/* Blueprint E · Teil 2 — Übungsaufgaben-Seite für Schwerpunkt-Lernmodule.
   Baut auf Blueprint C auf (blueprint_elearning.css liefert .elearning-container,
   .module-nav, .elearning-module, .elearn-card, .elearn-btn-success) und ergänzt
   die Aufgaben-Bausteine: Schaltbild-Container, Gegeben-Liste, numerische
   Eingaben mit fester Einheit, Verständnisfragen (Einzel-/Mehrfachauswahl),
   Drag-&-Drop-/Dropdown-Zuordnung, Teilaufgaben mit eigenem Prüfen-Button und
   Teil-Lösung, Status-Tabelle und Protokoll-Export. Präfix .ue- / .uebung-.
   Engine: js/shared/lernmodul/uebung.js (v2, Teilaufgaben-Modell). */

/* ── Sektionen: nur die aktive Aufgabe ist sichtbar ────── */
.uebung .elearning-module { display: none; }
.uebung .elearning-module.active { display: block; }

/* ── Aufgaben-Kopf ─────────────────────────────────────── */
.ue-task__meta {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--primary-color); font-weight: 600; margin: 0 0 .4rem;
}

/* ── Schaltbild je Aufgabe (inline SVG) ────────────────── */
.ue-circuit {
  margin: 1rem 0; padding: .8rem; display: flex; justify-content: center;
  background: var(--surface-bg); border: 1px solid var(--surface-border-light);
  border-radius: var(--radius-lg, 8px); overflow-x: auto;
}
.ue-circuit svg { max-width: 100%; height: auto; }

/* ── Gegeben/Gesucht ───────────────────────────────────── */
.ue-given { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.ue-given li {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  font-size: .84rem; padding: .22rem .6rem; border-radius: 999px;
  background: var(--primary-tint); color: var(--textcolor-fullcontrast);
  border: 1px solid var(--surface-border-light);
}
.ue-given li i { font-style: italic; }

/* ── Numerische Antwort: Zahl, Einheit vorgegeben ──────── */
.ue-num { display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; flex-wrap: wrap; }
.ue-num__label { min-width: 9.5rem; font-size: .95rem; color: var(--textcolor-fullcontrast); }
.ue-num__label i { font-style: italic; }
.ue-num input[type="text"] {
  width: 8.5rem; padding: .45rem .6rem; font-size: .95rem; text-align: right;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  border: 1.5px solid var(--surface-border); border-radius: var(--radius-lg, 8px);
  background: var(--neutrals-0); color: var(--textcolor-fullcontrast);
}
.ue-num input[type="text"]:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .3); outline-offset: 1px; border-color: var(--primary-color); }
.ue-num.is-correct input[type="text"] { border-color: var(--success-600); background: rgba(var(--success-rgb), .08); }
.ue-num.is-wrong input[type="text"] { border-color: var(--error-600); background: rgba(var(--error-rgb), .07); }
.ue-num__unit { font-size: .95rem; color: var(--textcolor-80contrast); min-width: 2.2rem; }
.ue-num__mark { font-weight: 700; min-width: 1.1rem; }
.ue-num.is-correct .ue-num__mark { color: var(--success-600); }
.ue-num.is-wrong .ue-num__mark { color: var(--error-600); }

/* ── Multiple Choice ───────────────────────────────────── */
.ue-mc { margin: 0 0 1rem; }
.ue-mc__q { font-weight: 600; color: var(--textcolor-fullcontrast); margin: 0 0 .6rem; }
.ue-mc__opts { display: flex; flex-direction: column; gap: .45rem; }
.ue-mc__opt {
  text-align: left; font-size: .93rem; padding: .5rem .8rem; cursor: pointer;
  border: 1.5px solid var(--surface-border); border-radius: var(--radius-lg, 8px);
  background: var(--surface-bg); color: var(--textcolor-80contrast); transition: border-color .15s, background .15s;
}
.ue-mc__opt:hover { border-color: var(--primary-color); background: var(--primary-tint); }
.ue-mc__opt.is-selected { border-color: var(--primary-color); background: var(--primary-tint); font-weight: 600; }
.ue-mc__opt.is-correct { border-color: var(--success-600); background: rgba(var(--success-rgb), .12); font-weight: 600; }
.ue-mc__opt.is-wrong { border-color: var(--error-600); background: rgba(var(--error-rgb), .10); }
.ue-mc__opt.is-correct::before { content: "✓ "; color: var(--success-600); font-weight: 700; }
.ue-mc__opt.is-wrong::before { content: "✕ "; color: var(--error-600); font-weight: 700; }
/* Nach dem Bestehen: Auswahl endgültig, kein Hover mehr */
.ue-mc.is-locked .ue-mc__opt { cursor: default; opacity: .9; }
.ue-mc.is-locked .ue-mc__opt:hover { border-color: var(--surface-border); background: var(--surface-bg); }
.ue-mc.is-locked .ue-mc__opt.is-correct:hover { border-color: var(--success-600); background: rgba(var(--success-rgb), .12); }

/* ── Gestufte Tipps (Gesamtübungs-Muster) ──────────────── */
.ue-hints { margin: 1rem 0 .4rem; }
/* Die Knöpfe stehen direkt in `.ue-hints`, ohne Zeilen-Wrapper — sonst
   bräuchte jede Serie zwei Konventionen für dieselbe Komponente (Befund
   2026-09-10: sieben von acht Statik-Modulen hatten die zweite, und die
   war weder gestylt noch verdrahtet). Abstand deshalb über `margin`
   statt `gap`: Ein Flex-Container an dieser Stelle würde die Tipptexte
   mit in die Zeile ziehen. */
.ue-hints__btn {
  font-size: .84rem; font-weight: 600; padding: .38rem .8rem; cursor: pointer;
  border-radius: 999px; border: 1.5px solid var(--primary-color);
  background: transparent; color: var(--primary-color);
  margin: 0 .45rem .5rem 0;
  transition: opacity .15s, background .15s;
}
.ue-hints__btn:hover:not([disabled]) { background: var(--primary-tint); }
.ue-hints__btn[disabled] { cursor: default; }
.ue-hints__btn[disabled]:not(.is-used) { opacity: .4; }
.ue-hints__btn.is-used { border-style: dashed; opacity: .65; }
.ue-hints__btn:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .3); outline-offset: 2px; }
.ue-hints__text {
  margin: 0 0 .5rem; padding: .6rem .85rem; font-size: .92rem;
  color: var(--textcolor-80contrast);
  background: var(--primary-tint); border-left: 3px solid var(--primary-color);
  border-radius: var(--radius-lg, 8px);
}
.ue-hints__text[hidden] { display: none; }

/* ── Teilaufgaben: einzeln prüfbar, Lösung direkt darunter ── */
.ue-part { margin: 0 0 1.2rem; padding: .9rem 0 .2rem; border-top: 1px solid var(--surface-border-light); }
.ue-part:first-of-type { border-top: 0; padding-top: .2rem; }
.ue-part__check {
  font-size: .85rem; font-weight: 600; padding: .4rem .9rem; cursor: pointer;
  border-radius: var(--radius-lg, 8px); border: 1.5px solid var(--primary-color);
  background: var(--primary-color); color: var(--neutrals-0);
  transition: transform .15s, opacity .15s;
}
.ue-part__check:hover:not([disabled]) { transform: translateY(-1px); }
.ue-part__check[disabled] { opacity: .45; cursor: default; }
.ue-part__check:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .3); outline-offset: 2px; }
.ue-part__fb { margin: .5rem 0 0; font-size: .9rem; padding: 0; display: none; }
.ue-part__fb.is-success { display: block; color: var(--success-600); }
.ue-part__fb.is-error { display: block; color: var(--error-600); }
.ue-part__solution {
  margin: .7rem 0 0; padding: .7rem .9rem; font-size: .92rem;
  color: var(--textcolor-80contrast);
  background: rgba(var(--success-rgb), .07); border-left: 3px solid var(--success-600);
  border-radius: var(--radius-lg, 8px);
}
.ue-part__solution[hidden] { display: none; }
.ue-part__solution p { margin: 0 0 .5rem; font-size: .92rem; }
.ue-part__solution p:last-child { margin-bottom: 0; }
.ue-part__solution .ue-solution__formula { background: var(--neutrals-0); }
.ue-part__solution-label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--success-600); margin: 0 0 .35rem;
}
.ue-progress {
  margin: 0 0 1rem; font-size: .84rem; font-weight: 600;
  color: var(--textcolor-80contrast);
}
.ue-progress.is-done { color: var(--success-600); }

/* Verständnisfragen: gesperrte/abgewählte Optionen */
.ue-mc__opt:disabled { cursor: default; }
.ue-mc__opt.is-wrong:disabled { opacity: .75; }
.ue-mc--multi .ue-mc__opt.is-selected::before { content: "☑ "; font-weight: 700; }
.ue-mc--multi .ue-mc__opt:not(.is-selected)::before { content: "☐ "; color: var(--textcolor-80contrast); }
.ue-mc--multi .ue-mc__opt.is-correct::before { content: "✓ "; color: var(--success-600); }
.ue-mc__multi-hint { font-weight: 400; font-size: .84rem; color: var(--textcolor-80contrast); }

/* ── Drag-&-Drop-Zuordnung (Stil der Physiklabor-Einführung) ── */
.ue-match { margin: .6rem 0 .4rem; }
.ue-match__pool { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .8rem; min-height: 2.2rem; }
.ue-match__item {
  font-size: .9rem; font-weight: 600; padding: .42rem .8rem; cursor: grab;
  border: 1.5px solid var(--primary-color); border-radius: 999px;
  background: var(--primary-tint); color: var(--textcolor-fullcontrast);
  transition: transform .15s, box-shadow .15s;
}
.ue-match__item:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -10px rgba(var(--primary-rgb), .6); }
.ue-match__item.is-picked { background: var(--primary-color); color: var(--neutrals-0); }
.ue-match__item.is-dragging { opacity: .5; }
.ue-match__item:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .3); outline-offset: 2px; }
.ue-match__zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; }
.ue-match__zone {
  padding: .7rem .8rem; min-height: 5.2rem;
  border: 1.5px dashed var(--surface-border); border-radius: var(--radius-lg, 8px);
  background: var(--surface-bg); transition: border-color .15s, background .15s;
}
.ue-match__zone.is-dragover { border-color: var(--primary-color); background: var(--primary-tint); }
.ue-match__zone.is-reject { border-color: var(--error-600); background: rgba(var(--error-rgb), .08); }
.ue-match__zone:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .3); outline-offset: 2px; }
.ue-match__zone-title { margin: 0 0 .5rem; font-size: .88rem; font-weight: 600; color: var(--textcolor-fullcontrast); }
.ue-match__slots { display: flex; flex-wrap: wrap; gap: .35rem; }
.ue-match__tag {
  font-size: .84rem; font-weight: 600; padding: .28rem .65rem; border-radius: 999px;
  background: rgba(var(--success-rgb), .12); color: var(--success-600);
  border: 1px solid var(--success-600);
}
.ue-match__tag::before { content: "✓ "; }
.ue-match.is-locked .ue-match__zone { border-style: solid; }

/* ── Dropdown-Zuordnung ────────────────────────────────── */
.ue-assign { display: flex; flex-direction: column; gap: .55rem; margin: .6rem 0 .8rem; }
.ue-assign__row {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .5rem .7rem; border: 1.5px solid var(--surface-border);
  border-radius: var(--radius-lg, 8px); background: var(--surface-bg);
}
.ue-assign__row.is-correct { border-color: var(--success-600); background: rgba(var(--success-rgb), .07); }
.ue-assign__row.is-wrong { border-color: var(--error-600); background: rgba(var(--error-rgb), .06); }
.ue-assign__label { font-size: .92rem; color: var(--textcolor-fullcontrast); flex: 1 1 220px; }
.ue-assign__row select {
  padding: .4rem .55rem; font-size: .9rem; border-radius: var(--radius-lg, 8px);
  border: 1.5px solid var(--surface-border); background: var(--neutrals-0);
  color: var(--textcolor-fullcontrast); max-width: 100%;
}
.ue-assign__row select:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .3); outline-offset: 1px; }

/* ── Prüfen + Feedback ─────────────────────────────────── */
.ue-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.ue-fb { margin: .8rem 0 0; font-size: .92rem; padding: .6rem .8rem; border-radius: var(--radius-lg, 8px); display: none; }
.ue-fb.is-success { display: block; background: rgba(var(--success-rgb), .12); color: var(--success-600); border-left: 3px solid var(--success-600); }
.ue-fb.is-error { display: block; background: rgba(var(--error-rgb), .10); color: var(--error-600); border-left: 3px solid var(--error-600); }

/* ── Lösungsweg: nach Bestehen oder solutions_mode ─────── */
.ue-solution { margin: 1.1rem 0 0; border: 1px solid var(--surface-border); border-radius: var(--radius-xl, 12px); overflow: hidden; }
.ue-solution[hidden] { display: none; }
.ue-solution summary {
  cursor: pointer; padding: .7rem 1rem; font-weight: 600; font-size: .95rem;
  background: var(--surface-bg); color: var(--primary-color); list-style: none;
}
.ue-solution summary::-webkit-details-marker { display: none; }
.ue-solution summary::before { content: "▸ "; }
.ue-solution[open] summary::before { content: "▾ "; }
.ue-solution__body { padding: .9rem 1rem 1rem; border-top: 1px solid var(--surface-border-light); }
.ue-solution__body p { font-size: .93rem; color: var(--textcolor-80contrast); margin: 0 0 .6rem; }
.ue-solution__formula {
  display: block; text-align: center; margin: .6rem 0; padding: .7rem .5rem; font-size: .95em;
  background: var(--primary-tint); border-radius: var(--radius-lg, 8px); overflow-x: auto;
}
.ue-solution__formula .katex-display { margin: .4em 0; }

/* ── Status-Tabelle + Protokoll-Export ─────────────────── */
.uebung-status { width: 100%; border-collapse: collapse; margin: 0 0 1.2rem; }
.uebung-status th, .uebung-status td {
  text-align: left; padding: .55rem .8rem; font-size: .93rem;
  border-bottom: 1px solid var(--surface-border-light); color: var(--textcolor-80contrast);
}
.uebung-status th { color: var(--textcolor-fullcontrast); font-weight: 600; }
.uebung-status .ue-status { font-weight: 600; }
.uebung-status .ue-status--done {
  color: var(--success-800); background: var(--success-50);
}
.uebung-status .ue-status--open {
  color: var(--error-800); background: var(--error-50);
}
.ue-export-row { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.ue-name-input {
  flex: 1 1 220px; max-width: 320px; padding: .5rem .7rem; font-size: .95rem;
  border: 1.5px solid var(--surface-border); border-radius: var(--radius-lg, 8px);
  background: var(--neutrals-0); color: var(--textcolor-fullcontrast);
}
.ue-name-input:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .3); outline-offset: 1px; border-color: var(--primary-color); }
.ue-export-feedback { margin: .7rem 0 0; font-size: .92rem; padding: .6rem .8rem; border-radius: var(--radius-lg, 8px); }
.ue-export-feedback--info { background: var(--primary-tint); color: var(--textcolor-fullcontrast); }
.ue-export-feedback--success { background: rgba(var(--success-rgb), .12); color: var(--success-600); }
.ue-export-feedback--error { background: rgba(var(--error-rgb), .10); color: var(--error-600); }

/* ── Theorie-Verweis oben auf der Aufgaben-Seite ───────── */
/* Karte mit Text links und richtigem Button rechts (kein Roh-Link) */
.ue-theorie-hint {
  display: flex; gap: .8rem 1.2rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  margin: 0 0 1.2rem; padding: .85rem 1.1rem;
  background: var(--primary-tint); border: 1px solid var(--surface-border-light);
  border-radius: var(--radius-xl, 12px);
}
.ue-theorie-hint__text { margin: 0; font-size: .93rem; color: var(--textcolor-80contrast); max-width: 58ch; }
.ue-theorie-hint__btn {
  display: inline-block; white-space: nowrap; font-size: .9rem; font-weight: 600; text-decoration: none;
  padding: .5rem .95rem; border-radius: var(--radius-lg, 8px);
  background: var(--primary-color); color: var(--neutrals-0); border: 1px solid var(--primary-color);
  transition: transform .15s, box-shadow .15s;
}
.ue-theorie-hint__btn:hover { color: var(--neutrals-0); text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(var(--primary-rgb), .6); }
.ue-theorie-hint__btn:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .3); outline-offset: 2px; }
/* Kontrast-Fix (Nutzer-Feedback): die globale Anker-Regel
   body.neutral0color-onbackground a (pruefstand.css) färbte die Button-
   Schrift dunkel auf Dunkelblau — höhere Spezifität stellt Weiß sicher. */
body.neutral0color-onbackground .ue-theorie-hint__btn,
body.neutral0color-onbackground .ue-theorie-hint__btn:hover { color: var(--neutrals-0); }

/* ── TM-Blueprint: symbolische Formel-Eingabe (Typ formula) ─────────── */
.ue-formula { display: grid; gap: .45rem; margin: .35rem 0 .6rem; }
.ue-formula input {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: .95rem;
  padding: .5rem .7rem; border: 1px solid var(--surface-border);
  border-radius: var(--radius-md, 8px); background: var(--surface-bg);
  color: var(--textcolor-fullcontrast); width: 100%; max-width: 34rem;
}
.ue-formula.is-correct input { border-color: rgb(var(--chart-teal-rgb)); }
.ue-formula.is-wrong input { border-color: rgb(var(--chart-rose-rgb)); }
.ue-formula__preview {
  min-height: 1.6rem; font-size: .95rem; color: var(--textcolor-80contrast);
  overflow-x: auto;
}
.ue-formula__preview.is-invalid { color: rgb(var(--chart-rose-rgb)); font-size: .88rem; }
.ue-formula__verstanden { font-size: .85rem; margin-right: .35rem; }
.ue-fkb.is-locked .fkb__palette,
.ue-fkb.is-locked .fkb__svg,
.ue-fkb.is-locked .fkb__check { pointer-events: none; opacity: .85; }
.ue-formula__row { display: flex; align-items: center; gap: .55rem; }
.ue-formula__var { font-size: 1.05rem; white-space: nowrap; }
.ue-formula__help {
  margin: 0; font-size: .84rem; color: var(--textcolor-80contrast);
}
.ue-formula__help code {
  background: var(--surface-hover, rgba(0,0,0,0.05));
  border-radius: var(--radius-sm, 4px); padding: .05rem .3rem;
}

/* ── Teilaufgaben-Chips: automatische Nummerierung (2026-08-04) ──
   CSS-Zähler statt Hand-Beschriftung in den Aufgabentexten — die
   Buchstaben folgen der DOM-Reihenfolge und können nicht driften.
   Querverweise in Texten nennen „Teil x". */
[data-ue-section] { counter-reset: ue-teil; }
.ue-part { counter-increment: ue-teil; }
.ue-part::before {
  content: "Teil " counter(ue-teil, lower-alpha);
  display: inline-block;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--primary-color);
  background: rgba(var(--primary-rgb), 0.08);
  border-radius: var(--radius-sm);
  padding: .16rem .5rem;
  margin-bottom: .45rem;
}
html[lang="en"] .ue-part::before { content: "Part " counter(ue-teil, lower-alpha); }