/* openTMSnat — Modul-Screens (Text, Diagramme, Quantitative, Muster, Schlauch, Figuren, Fakten, Generalprobe, Lernplan). Tokens: css/design.css */

/* ============================================================
   TEXTVERSTÄNDNIS · DIAGRAMME & TABELLEN · QUANTITATIVE PROBLEME
   Markup: views/modules.html (#view-textverstaendnis, #view-diagramme,
   #view-quantitative), js/modules/text.js, js/modules/diagramme.js,
   js/quantitative.js. Nur Tokens aus css/design.css.
   ============================================================ */

/* ---------- Gemeinsam: Buttons, Ladezustand ---------- */
.otms-btn--lg { min-height: 52px; padding: 0 26px; font-size: 17px; }
.otms-loading { max-width: 520px; margin: 48px auto; padding: 28px 24px; border: 1px solid var(--otms-line); background: var(--otms-surface); text-align: center; color: var(--otms-ink-soft); }
.otms-loading p { margin: 0; }
.otms-loading--empty b { display: block; font: 600 22px/1.15 var(--otms-f-display); color: var(--otms-ink); margin-bottom: 6px; }
.otms-loading--empty p { margin: 0 0 18px; }
/* Lade- und Leerzustand im Container der Module: der Container ist schon die Karte (keine Karte in der Karte) */
[id$="-upload-container"] > .otms-loading { margin: 0 auto; padding: 0; border: 0; background: transparent; }

/* ---------- Modus-Wahl: zwei Felder auf einem Bogen ---------- */
.otms-modesel { max-width: 860px; margin: 0 auto; }
.otms-modesel .otms-back { margin-bottom: 22px; }
.otms-modesel__head { margin-bottom: 22px; }
.otms-modesel__head h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1; margin: 6px 0 8px; }
.otms-modesel__head p { margin: 0; color: var(--otms-ink-soft); max-width: 60ch; }
.otms-modesel__grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--otms-line); background: var(--otms-surface); }
.otms-modesel__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 26px 26px 24px; border: 0 !important; border-right: 1px solid var(--otms-line) !important; background: transparent; text-align: left; font: inherit; color: var(--otms-ink); cursor: pointer; min-height: 100%; }
.otms-modesel__opt:last-child { border-right: 0 !important; }
.otms-modesel__opt:hover { background: var(--otms-tint); }
.otms-modesel__opt b { font: 700 28px/1.05 var(--otms-f-display); letter-spacing: -0.005em; }
.otms-modesel__opt p { margin: 0 0 6px; color: var(--otms-ink-soft); font-size: 15px; line-height: 1.5; }
.otms-modesel__opt ul { list-style: none; margin: 0; padding: 0; width: 100%; font-size: 14.5px; }
.otms-modesel__opt li { padding: 8px 0; border-top: 1px solid var(--otms-line); }
.otms-modesel__opt li:last-child { border-bottom: 1px solid var(--otms-line); }
.otms-modesel__opt .otms-num { font-weight: 500; }
.otms-modesel__cta { margin-top: auto; padding-top: 18px; font: 600 15px/1 var(--otms-f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--otms-accent); text-decoration: underline; text-decoration-color: var(--otms-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
/* Beide Karten gleichwertig: CTA immer in Akzentfarbe, Hover/Fokus nur kräftigerer Unterstrich */
.otms-modesel__opt:hover .otms-modesel__cta, .otms-modesel__opt:focus-visible .otms-modesel__cta { text-decoration-thickness: 3px; }
.otms-modesel__opt:focus-visible { outline: 2px solid var(--otms-focus); outline-offset: -2px; }
@media (max-width: 720px) {
    .otms-modesel__grid { grid-template-columns: 1fr; }
    .otms-modesel__opt { border-right: 0 !important; border-bottom: 1px solid var(--otms-line) !important; padding: 20px 18px; }
    .otms-modesel__opt:last-child { border-bottom: 0 !important; }
}

/* ---------- Sticky Modulkopf: Zurück · Aufgabe x/y · Timer · Marker ---------- */
.otms-modhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.otms-modhead__back { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 6px 0; font: 600 13px/1 var(--otms-f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--otms-ink-soft); cursor: pointer; }
.otms-modhead__back:hover { color: var(--otms-ink); }
.otms-modhead__back .otms-icon { width: 18px; height: 18px; color: inherit; }
.otms-modhead__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.otms-modhead__pick { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--otms-line-strong); border-radius: var(--otms-r); background: var(--otms-surface); color: var(--otms-ink); font: 500 14px/1 var(--otms-f-body); cursor: pointer; }
.otms-modhead__pick:hover { background: var(--otms-tint); }
.otms-modhead__pick svg, .otms-modhead__pick i { width: 14px; height: 14px; color: var(--otms-ink-soft); }
.otms-modhead__menu { background: var(--otms-surface) !important; border: 1px solid var(--otms-line-strong); border-radius: var(--otms-r); box-shadow: none !important; }
.otms-modhead__menu .otms-input { min-height: 36px; padding: 6px 10px !important; }
.otms-modhead__menu [class*="dropdown-item"] { border-radius: var(--otms-r) !important; }
.otms-modhead__count { font: 500 14px/1 var(--otms-f-mono); font-variant-numeric: tabular-nums; color: var(--otms-ink-soft); white-space: nowrap; }
.otms-modhead__count span { color: var(--otms-ink); }
.otms-modhead__timer { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--otms-line-strong); border-radius: var(--otms-r); font: 600 15px/1 var(--otms-f-mono); font-variant-numeric: tabular-nums; color: var(--otms-ink); white-space: nowrap; }
.otms-modhead__timer[style*="display: block"] { display: inline-flex !important; }
.otms-modhead__timer.is-low { color: var(--otms-danger-text); border-color: var(--otms-danger); }
.otms-modhead__icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--otms-line); border-radius: var(--otms-r); background: var(--otms-surface); color: var(--otms-ink-soft); cursor: pointer; }
.otms-modhead__icon:hover { color: var(--otms-ink); background: var(--otms-tint); }
.otms-modhead__icon svg, .otms-modhead__icon i { width: 18px; height: 18px; }
.otms-modhead__icon .text-yellow-500, .otms-modhead__icon [fill="currentColor"] { color: var(--otms-accent) !important; }
.otms-modhead__end { min-height: 36px; padding: 0 12px; font-size: 13px; border-width: 1px; }
@media (max-width: 640px) {
    .otms-modhead__right { width: 100%; justify-content: space-between; gap: 8px; }
    .otms-modhead__pick { flex: 1 1 auto; min-width: 0; }
    .otms-modhead__pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .otms-modhead__end { display: none; }
    #diagramme-invert-btn.otms-modhead__end { display: inline-flex; }
}

/* ---------- Antwortoptionen: gemeinsame Zustände ---------- */
.otms-opt[disabled] { cursor: default; }
.otms-opt[disabled]:hover { background: transparent; }
.otms-opt.is-correct[disabled]:hover { background: var(--otms-ok-tint); }
.otms-opt.is-wrong[disabled]:hover { background: var(--otms-danger-tint); }
.otms-opt__text { min-width: 0; line-height: 1.5; padding-top: 5px; }
.otms-opt__text > p { margin: 0; }

/* ---------- Korrektur (Erklärung unter der Aufgabe) ---------- */
.otms-correction { border-top: 1px solid var(--otms-line-strong); margin-top: 22px; padding-top: 16px; }
.otms-correction__verdict { display: block; font: 700 22px/1.15 var(--otms-f-display); margin: 0 0 10px; color: var(--otms-ink); }
.otms-correction__verdict.is-ok { color: var(--otms-ok-text); }
.otms-correction__verdict.is-bad { color: var(--otms-danger-text); }
.otms-correction__label { display: block; margin: 0 0 6px; }
.otms-correction__text { font-size: 15px; line-height: 1.6; color: var(--otms-ink); }
.otms-correction__text p { margin: 0 0 10px; }
.otms-correction__text p:last-child { margin-bottom: 0; }
.otms-correction__opt { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; font-size: 14.5px; line-height: 1.55; padding: 8px 0; border-top: 1px solid var(--otms-line); }
.otms-correction__opt:last-child { border-bottom: 1px solid var(--otms-line); }
.otms-correction__opt b { font: 600 15px/1.4 var(--otms-f-display); }
.otms-correction__opt.is-ok { color: var(--otms-ok-text); }
.otms-correction__opt.is-bad { color: var(--otms-danger-text); }
.otms-correction--q { margin-top: 12px; padding-top: 12px; }
.otms-correction--q .otms-correction__verdict { font-size: 18px; margin-bottom: 6px; }
.otms-correction--q .otms-correction__text { font-size: 14.5px; }
/* Einheitliche Korrektur (js/correction.js): übrige Optionen zurücknehmen, Erklärungsliste, leerer Zustand */
.otms-opt.is-dim, .otms-imgopt.is-dim, .otms-dir.is-dim, .otms-simopt.is-dim { opacity: .55; }
.otms-correction__text + .otms-correction__opts { margin-top: 12px; }
.otms-correction__none { margin: 0; font-size: 15px; line-height: 1.6; color: var(--otms-ink-soft); }
/* Seitenrand (Med-Nat, TMSnat): gleiche Bausteine, Schrift im 20-px-Karo-Raster, Knopf über die Breite */
.otms-margin .otms-correction__text { font-size: 15px; line-height: 20px; }
.otms-margin .otms-correction__text p { margin: 0 0 20px; }
.otms-margin .otms-correction__opt { grid-template-columns: 22px minmax(0, 1fr); gap: 6px; font-size: 14px; line-height: 20px; padding: 0; margin-bottom: 10px; border: 0; }
.otms-margin .otms-correction__opt:last-child { border: 0; }
.otms-margin .otms-correction__opt b { font-size: 15px; line-height: 20px; }
.otms-margin .otms-correction__none { font-size: 14px; line-height: 20px; }
.otms-margin .otms-correction__next { display: block; }
.otms-margin .otms-correction__next .otms-btn { width: 100%; }

/* ---------- Textverständnis: Text links, Fragen rechts ---------- */
.otms-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--otms-line); background: var(--otms-surface); align-items: start; }
.otms-text__passage { border-right: 1px solid var(--otms-line-strong); min-width: 0; }
.otms-text__phead { padding: 18px 24px 14px; border-bottom: 1px solid var(--otms-line); }
.otms-text__phead h2 { font-size: 24px; line-height: 1.1; margin: 6px 0 0; }
.otms-text__body { padding: 22px 24px 26px; font-size: 16.5px; line-height: 1.7; overflow-y: auto; }
.otms-text__body p { margin: 0 0 1em; }
.otms-text__qcol { min-width: 0; }
.otms-text__progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--otms-line); font: 500 13px/1 var(--otms-f-mono); font-variant-numeric: tabular-nums; color: var(--otms-ink-soft); }
.otms-text__dots { display: flex; gap: 5px; }
.otms-text__dot { width: 11px; height: 11px; border: 1.5px solid var(--otms-line-strong); border-radius: var(--otms-r); background: var(--otms-surface); }
.otms-text__dot.is-done { background: var(--otms-pencil); border-color: var(--otms-pencil); }
.otms-text__card { padding: 18px 24px 24px; }
.otms-text__meta { display: block; margin-bottom: 12px; }
.otms-text__list { overflow-y: auto; padding-right: 6px; display: grid; gap: 22px; align-content: start; }
.otms-text__q { min-width: 0; }
.otms-text__qnum { display: block; margin-bottom: 6px; }
.otms-text__stem { font-size: 16px; line-height: 1.5; font-weight: 500; margin: 0 0 10px; }
.otms-text__action { width: 100%; margin-top: 18px; }
@media (max-width: 1023px) {
    .otms-text { grid-template-columns: minmax(0, 1fr); }
    .otms-text__passage { border-right: 0; border-bottom: 1px solid var(--otms-line-strong); }
    .otms-text__phead, .otms-text__body, .otms-text__progress, .otms-text__card { padding-left: 16px; padding-right: 16px; }
    .otms-text__body { font-size: 16px; }
}

/* ---------- Prüfungsbogen (Simulation): Ovale, ein Bogen pro Text/Aufgabe ---------- */
.otms-xsheet { display: grid; gap: 28px; }
.otms-xsheet__card { border: 1px solid var(--otms-line); background: var(--otms-surface); padding: clamp(18px, 3vw, 30px); }
.otms-xsheet__head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.otms-xsheet__title { font-size: 24px; line-height: 1.1; margin: 0 0 16px; }
.otms-xsheet__passage { max-height: 22rem; overflow-y: auto; padding: 16px 18px; border: 1px solid var(--otms-line); background: var(--otms-bg-2); font-size: 16px; line-height: 1.65; margin-bottom: 22px; }
.otms-xsheet__qs { display: grid; gap: 22px; }
.otms-xsheet__q { min-width: 0; }
.otms-xsheet__qnum { display: block; margin-bottom: 6px; }
.otms-xsheet__stem { font-size: 16.5px; line-height: 1.55; font-weight: 500; margin: 0 0 10px; }
.otms-xsheet__opts { display: grid; }
.otms-xopt { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 12px; width: 100%; padding: 10px 8px; border: 0; border-top: 1px solid var(--otms-line); background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.otms-xopt:last-child { border-bottom: 1px solid var(--otms-line); }
.otms-xopt:hover { background: var(--otms-tint); }
.otms-xopt .otms-oval { margin-top: 2px; }
.otms-xopt.is-sel { background: var(--otms-tint); }
.otms-xopt.is-sel .otms-oval { background: var(--otms-pencil); border-color: var(--otms-pencil); color: transparent; box-shadow: 0 0 0 .5px var(--otms-pencil); }
.otms-xopt__text { line-height: 1.5; padding-top: 1px; min-width: 0; }
.otms-xopt__text > p { margin: 0; }
.otms-xsubmit { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--otms-line-strong); text-align: center; }
#quant-exam-bulk-container .otms-xsheet__card, #diagramme-sim-bulk-container .otms-xsheet__card { border-color: var(--otms-line); }

/* ---------- Ergebnis: Formularzusammenfassung ---------- */
.otms-result { max-width: 640px; margin: 0 auto; border: 1px solid var(--otms-line); background: var(--otms-surface); padding: clamp(22px, 4vw, 36px); }
.otms-result__head { margin-bottom: 22px; }
.otms-result__head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; margin: 6px 0 6px; }
.otms-result__head p { margin: 0; color: var(--otms-ink-soft); }
.otms-result__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--otms-ink); border-radius: var(--otms-r); color: var(--otms-ink); margin-bottom: 12px; }
.otms-result__icon svg, .otms-result__icon i { width: 20px; height: 20px; }
.otms-result__icon.is-ok { border-color: var(--otms-ok); color: var(--otms-ok-text); }
.otms-result__icon.is-warn { border-color: var(--otms-warn); color: var(--otms-warn); }
.otms-result__icon.is-bad { border-color: var(--otms-danger); color: var(--otms-danger-text); }
.otms-result__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--otms-line); margin-bottom: 24px; }
.otms-result__grid--3 { grid-template-columns: repeat(3, 1fr); }
.otms-result__grid .otms-field { border: 0; border-right: 1px solid var(--otms-line); border-radius: 0; background: transparent; padding: 12px 16px 14px; }
.otms-result__grid .otms-field:last-child { border-right: 0; }
.otms-result__grid .otms-field b { display: block; font: 600 34px/1.1 var(--otms-f-mono); font-variant-numeric: tabular-nums; margin-top: 2px; }
.otms-result__grid .otms-field b.is-ok { color: var(--otms-ok-text); }
.otms-result__grid .otms-field b.is-bad { color: var(--otms-danger-text); }
.otms-result__grid .otms-field b.is-warn { color: var(--otms-warn); }
.otms-result__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.otms-result__actions .otms-btn { flex: 1 1 200px; }
@media (max-width: 480px) {
    .otms-result__grid, .otms-result__grid--3 { grid-template-columns: 1fr; }
    .otms-result__grid .otms-field { border-right: 0; border-bottom: 1px solid var(--otms-line); }
    .otms-result__grid .otms-field:last-child { border-bottom: 0; }
}
/* Ergebnisseite aus js/quiz-engine.js (Diagramme-Simulation) auf dieselbe Form ziehen */
#diagramme-quiz-container > .max-w-2xl { border: 1px solid var(--otms-line); background: var(--otms-surface) !important; padding: clamp(22px, 4vw, 36px) !important; text-align: left !important; }
#diagramme-quiz-container > .max-w-2xl .rounded-full { display: none; }
#diagramme-quiz-container > .max-w-2xl h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; }
#diagramme-quiz-container > .max-w-2xl .grid.grid-cols-3 { gap: 0 !important; border: 1px solid var(--otms-line); }
#diagramme-quiz-container > .max-w-2xl .grid.grid-cols-3 > div { background: transparent !important; border-right: 1px solid var(--otms-line); padding: 12px 16px 14px !important; }
#diagramme-quiz-container > .max-w-2xl .grid.grid-cols-3 > div:last-child { border-right: 0; }
#diagramme-quiz-container > .max-w-2xl .grid.grid-cols-3 > div > div:first-child { font: 600 34px/1.1 var(--otms-f-mono); font-variant-numeric: tabular-nums; }
#diagramme-quiz-container > .max-w-2xl .grid.grid-cols-3 > div > div:last-child { font: 600 12px/1.2 var(--otms-f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--otms-ink-soft); margin-top: 4px; }
#diagramme-quiz-container > .max-w-2xl .text-blue-600 { color: var(--otms-ink) !important; }
#diagramme-quiz-container > .max-w-2xl > button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px !important; border: 1.5px solid var(--otms-ink); border-radius: var(--otms-r) !important; background: var(--otms-ink) !important; color: var(--otms-bg) !important; font: 600 16px/1 var(--otms-f-display); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Quantitative Probleme ---------- */
.otms-quant__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 16px; }
.otms-quant__meta .otms-label:empty, .otms-quant__meta .otms-label[style*="display: none"] { display: none; }
.otms-quant__meta .otms-label + .otms-label:not(:empty)::before { content: "·"; margin-right: 10px; color: var(--otms-ink-faint); }
.otms-quant__stem { margin-bottom: 18px; }
.otms-quant__stem p { margin: 0 0 .8em; }
.otms-quant__stem p:last-child { margin-bottom: 0; }
.otms-quant__stem table { font-family: var(--otms-f-mono); font-variant-numeric: tabular-nums; font-size: 14px; }
.otms-quant__stem table th, .otms-quant__stem table td { border-color: var(--otms-line) !important; padding: 6px 10px; }
.otms-quant__stem table th { font-family: var(--otms-f-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; color: var(--otms-ink-soft); }
.otms-quant__steps { margin-top: 18px; }
.otms-quant__step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; padding: 7px 0; border-top: 1px solid var(--otms-line); font-size: 15px; line-height: 1.55; }
.otms-quant__step:last-child { border-bottom: 1px solid var(--otms-line); }
.otms-quant__stepnum { font: 500 14px/1.55 var(--otms-f-mono); color: var(--otms-ink-soft); }
.otms-quant__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--otms-line-strong); }
.otms-quant__nav[style*="display: flex"] { display: flex !important; }
.otms-quant__nav .otms-btn { min-width: 130px; }
#quant-timer[style*="display: flex"] { display: inline-flex !important; }

/* ---------- Diagramme & Tabellen ---------- */
.otms-diag__meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.otms-diag__intro { font-size: 16.5px; line-height: 1.6; margin: 0 0 8px; max-width: 70ch; }
.otms-diag__desc { font-size: 14px; line-height: 1.55; color: var(--otms-ink-soft); margin: 0 0 16px; max-width: 70ch; }
.otms-diag__viz { display: flex; justify-content: center; overflow-x: auto; padding: 14px; margin: 0 0 20px; border: 1px solid var(--otms-line-strong); background: var(--otms-surface); }
.otms-diag__viz svg { display: block; }
.otms-diag__qwrap { margin: 0 0 6px; }
.otms-diag__question { font-size: 17px; line-height: 1.5; font-weight: 500; margin: 0 0 12px; }
#diagramme-explanation-container.otms-correction { border: 0 !important; border-top: 1px solid var(--otms-line-strong) !important; margin-top: 22px !important; padding: 16px 0 0 !important; }
.otms-xsheet .otms-diag__viz { margin-bottom: 16px; }
.otms-xsheet .otms-diag__question { margin-bottom: 8px; }

/* ---------- Feinschliff nach Sichtprüfung (Text/Diagramme/Quantitativ) ---------- */
.otms-text__list { border-bottom: 1px solid var(--otms-line); padding-bottom: 4px; }
.otms-text__action { margin-top: 14px; }
#view-textverstaendnis .otms-xsheet { max-width: 960px; margin: 0 auto; }
#view-textverstaendnis .otms-xsubmit { max-width: 960px; margin-left: auto; margin-right: auto; }
.otms-modhead__tool { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border: 1px solid var(--otms-line); border-radius: var(--otms-r); background: var(--otms-surface); color: var(--otms-ink-soft); font: 600 12px/1 var(--otms-f-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.otms-modhead__tool:hover { color: var(--otms-ink); background: var(--otms-tint); }
.otms-options:has(~ .otms-correction:not(.hidden)) .otms-opt:last-child { border-bottom: 0; }
.otms-result__icon { display: grid; margin-bottom: 14px; }
.otms-result__head > .otms-label { display: block; }
.otms-result__grid:not(.otms-result__grid--3) > .otms-field:nth-child(2n) { border-right: 0; }
.otms-result__grid:not(.otms-result__grid--3) > .otms-field:nth-child(n+3) { border-top: 1px solid var(--otms-line); }
.otms-result__actions .otms-btn--quiet { flex: 1 1 100%; }
/* Prüfungsbogen in Quantitativ/Diagramme: äußerer Aufgabenrahmen tritt zurück, die Bogenkarten tragen die Marken */
.otms-qframe:has(> .otms-task__body > .otms-xsheet:not(.hidden)) { border: 0; background: transparent; }
.otms-qframe:has(> .otms-task__body > .otms-xsheet:not(.hidden))::before, .otms-qframe:has(> .otms-task__body > .otms-xsheet:not(.hidden))::after { display: none; }
.otms-qframe:has(> .otms-task__body > .otms-xsheet:not(.hidden)) > .otms-task__body { padding: 0; }
.otms-xsheet__stem.otms-quant__stem { font-weight: 400; font-size: 17px; line-height: 1.6; max-width: 66ch; }
@media (max-width: 480px) {
    .otms-result__grid:not(.otms-result__grid--3) > .otms-field:nth-child(n+3) { border-top: 0; }
}
#quant-exam-bulk-container.otms-xsheet .otms-xsheet__card + .otms-xsheet__card, #diagramme-sim-bulk-container.otms-xsheet .otms-xsheet__card + .otms-xsheet__card { margin-top: 28px; }
.otms-quant { max-width: 1040px; margin: 0 auto; }
.otms-modhead__right > .relative { min-width: 0; }

/* ============================================================
   MUSTER ZUORDNEN · SCHLAUCHFIGUREN · FAKTEN · FIGUREN ·
   GENERALPROBE · LERNPLAN · LESEZEICHEN
   Markup: views/modules.html (#view-muster, #view-schlauche,
   #schlauchfiguren-*, #view-fakten, #view-figuren, #view-simulation,
   #view-study-plan, #view-bookmarks), js/modules/{muster,schlauch-core,
   fakten,figuren}.js, js/quantitative-schlauch-3d.js, js/simulation.js,
   js/study-plan.js. Nur Tokens aus css/design.css.
   ============================================================ */

/* ---------- Gemeinsam: Phasenkopf, Hinweis, Aktionszeile ---------- */
.otms-phasehead { border: 1px solid var(--otms-line); background: var(--otms-surface); padding: 20px 24px 22px; margin-bottom: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; }
.otms-phasehead__main { min-width: 0; flex: 1 1 320px; }
.otms-phasehead h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.05; margin: 6px 0 8px; }
.otms-phasehead p { margin: 0; color: var(--otms-ink-soft); max-width: 66ch; font-size: 15px; line-height: 1.5; }
.otms-phasehead p b { color: var(--otms-ink); font-weight: 600; }
.otms-phasehead__stats { display: flex; gap: 0; border: 1px solid var(--otms-line); }
.otms-phasehead__stat { padding: 8px 14px 10px; border-right: 1px solid var(--otms-line); min-width: 96px; }
.otms-phasehead__stat:last-child { border-right: 0; }
.otms-phasehead__stat.hidden { display: none; }
.otms-phasehead__stat b { display: block; font: 600 22px/1.1 var(--otms-f-mono); font-variant-numeric: tabular-nums; margin-top: 2px; }
.otms-phasehead__stat b span { font: inherit; }
.otms-phasehead__stat b .otms-icon, .otms-phasehead__stat b i, .otms-phasehead__stat b svg { display: none; }
.otms-note { border: 1px solid var(--otms-line); border-left: 3px solid var(--otms-ink); background: var(--otms-surface); padding: 12px 16px; margin: 0 0 20px; font-size: 14.5px; line-height: 1.5; }
.otms-note p { margin: 0; }
.otms-note .otms-label { display: block; margin-bottom: 4px; }
.otms-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--otms-line-strong); }
.otms-actions__text { min-width: 0; flex: 1 1 260px; }
.otms-actions__text b { display: block; font: 600 20px/1.15 var(--otms-f-display); }
.otms-actions__text p { margin: 4px 0 0; color: var(--otms-ink-soft); font-size: 14.5px; }
.otms-actions__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.otms-cta { margin-top: 24px; display: flex; justify-content: center; }
.otms-modesel__grid--single { grid-template-columns: 1fr; }
.otms-modesel__opt--form { cursor: default; }
.otms-modesel__opt--form:hover { background: transparent; }
.otms-modesel__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 12px; }
.otms-field--input { padding: 8px 12px 6px; cursor: text; }
.otms-field--input:focus-within { outline: 2px solid var(--otms-focus); outline-offset: 2px; }
.otms-field--input input { display: block; width: 100%; border: 0 !important; background: transparent !important; padding: 2px 0 0 !important; min-height: 0 !important; font: 500 22px/1.2 var(--otms-f-mono) !important; font-variant-numeric: tabular-nums; color: var(--otms-ink) !important; }
.otms-field--input input:focus { outline: none !important; box-shadow: none !important; }
/* Pause vor der Abfrage (Figuren/Fakten lernen, js/retention.js): Chip-Reihe über beide Spalten der Zeitfelder */
.otms-modesel__fields .otms-field--choices { grid-column: 1 / -1; padding: 10px 12px 12px; min-width: 0; }
.otms-field--choices .otms-choices { margin-top: 8px; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.otms-modesel__fields .otms-field--choices:focus-within { border-color: var(--otms-line); box-shadow: none; }
.otms-field--choices .otms-choice { position: relative; align-content: center; min-height: 48px; padding: 8px 12px; }
.otms-field--choices .otms-choice b { font: 600 17px/1.1 var(--otms-f-display); letter-spacing: 0; white-space: nowrap; }
.otms-field--choices .otms-choice span { white-space: nowrap; }
.otms-field--choices .otms-choice.is-active b::after { content: none; }
.otms-field--choices .otms-choice.is-active::after { content: "\2713"; position: absolute; top: 6px; right: 8px; font: 700 13px/1 var(--otms-f-display); color: var(--otms-ink); }
.otms-field--choices .otms-field__hint { margin-top: 8px; }
.otms-modesel__opt .otms-btn { margin-top: 18px; align-self: stretch; }
.otms-modhead__phase { font: 600 12px/1 var(--otms-f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--otms-ink); padding: 0 10px; min-height: 36px; display: inline-flex; align-items: center; border: 1px solid var(--otms-line); border-radius: var(--otms-r); }
.otms-modhead__info { font-size: 13px; color: var(--otms-ink-soft); }
.otms-modhead__info:empty { display: none; }
@media (max-width: 640px) { .otms-modesel__fields { grid-template-columns: 1fr; } .otms-modhead__info { display: none; } .otms-phasehead { padding: 16px 16px 18px; } }

/* ---------- Bildoptionen (Muster zuordnen, Training + Bogen) ---------- */
.otms-muster__q { font-size: 17px; line-height: 1.5; font-weight: 500; margin: 0 0 18px; }
/* Muster zuordnen: Muster und Ausschnitte nebeneinander, Ausschnitte im selben
   Massstab wie das Muster (die Breite setzt js/modules/muster.js). */
.otms-muster { display: grid; gap: 22px; align-items: start; margin: 0 0 22px; }
/* Die Ausschnitte sind so breit wie Musterbreite x --muster-ratio (ausschnitt_px /
   muster_px, gesetzt von muster.js). Damit die Ausschnittspalte immer mindestens
   zwei nebeneinander fasst, wird das Muster schmaler, wenn der Platz knapp ist
   (Generalprobe mit Antwortbogen-Spalte): 2 x (Muster x ratio + 18px Rahmen/Innenabstand)
   + 12px Luecke + 32px Spaltenabstand + 4px Reserve = 100% - Muster. Vorher fiel die
   Spalte auf einen Ausschnitt zurueck, und D/E lagen unterhalb des Fensters. */
@media (min-width: 900px) {
    .otms-muster { grid-template-columns: minmax(0, min(520px, calc((100% - 84px) / (1 + 2 * var(--muster-ratio, 0.3))))) minmax(0, 1fr); gap: 32px; }
    /* Fest zwei Ausschnitte je Zeile (A B / C D / E). Die allgemeine .otms-imgopts-Regel
       weiter unten (auto-fill, minmax(150px, 1fr)) ueberschrieb die Muster-Regel und
       liess die Spalte bei knapper Breite auf einen Ausschnitt je Zeile fallen. */
    .otms-muster .otms-imgopts--muster { grid-template-columns: repeat(2, minmax(max-content, 1fr)); }
}
.otms-muster .otms-muster__orig { margin: 0; }
.otms-muster .otms-muster__orig img { width: 100%; max-width: 520px; max-height: none; background: #fff; }
.otms-imgopts--muster { grid-template-columns: repeat(auto-fill, minmax(112px, max-content)); justify-content: start; align-items: start; }
.otms-imgopts--muster .otms-imgopt { justify-items: center; }
.otms-imgopt__bild { position: relative; display: block; line-height: 0; overflow: hidden; }
.otms-imgopts--muster .otms-imgopt__bild img { width: auto; max-width: none; background: #fff; border-color: var(--otms-line-strong); }
.otms-imgopt__ring { position: absolute; border: 2px solid var(--otms-danger); border-radius: 50%; pointer-events: none; box-sizing: border-box; }
.otms-imgopt__ring--rand { border-radius: 0; background: repeating-linear-gradient(45deg, transparent 0 5px, var(--otms-danger) 5px 6px); }
.otms-muster__orig { margin: 0 0 22px; display: grid; justify-items: start; gap: 8px; }
.otms-muster__orig img { display: block; max-width: 100%; max-height: 340px; border: 1px solid var(--otms-line-strong); border-radius: 0 !important; box-shadow: none !important; background: var(--otms-surface); }
.otms-imgopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.otms-imgopt, .option-btn.otms-imgopt { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px; align-content: start; padding: 8px !important; border: 1px solid var(--otms-line) !important; border-radius: var(--otms-r) !important; background: var(--otms-surface) !important; text-align: left; cursor: pointer; margin: 0 !important; min-width: 0; }
.otms-imgopt:hover:not([disabled]), .option-btn.otms-imgopt:hover:not([disabled]) { border-color: var(--otms-ink) !important; background: var(--otms-surface) !important; }
.otms-imgopt > span:first-child { margin: 0; }
.otms-imgopt img { width: 100%; display: block; border: 1px solid var(--otms-line); border-radius: 0 !important; background: var(--otms-surface); }
.otms-imgopt.correct, .option-btn.otms-imgopt.correct { border-color: var(--otms-ok) !important; background: var(--otms-ok-tint) !important; }
.otms-imgopt.wrong, .option-btn.otms-imgopt.wrong { border-color: var(--otms-danger) !important; background: var(--otms-danger-tint) !important; }
.otms-imgopt.correct .otms-opt__letter, .otms-imgopt.is-correct .otms-opt__letter { background: var(--otms-ok); border-color: var(--otms-ok); color: #fff !important; }
.otms-imgopt.wrong .otms-opt__letter, .otms-imgopt.is-wrong .otms-opt__letter { background: var(--otms-danger); border-color: var(--otms-danger); color: #fff !important; }
.otms-imgopt[disabled] { cursor: default; }
.otms-imgopt[class*="exam-opt-"][class*=" bg-"] { border-color: var(--otms-ink) !important; background: var(--otms-tint) !important; }
.otms-xsheet__orig { margin: 0 0 16px; display: grid; gap: 8px; justify-items: start; }
.otms-xsheet__orig img { display: block; max-width: min(100%, 320px); border: 1px solid var(--otms-line-strong); border-radius: 0 !important; box-shadow: none !important; }
.otms-xsubmit--sticky { position: sticky; bottom: 0; background: var(--otms-bg); padding-bottom: 12px; z-index: 30; }
.otms-xsubmit--sticky.hidden { display: none; }
#muster-exam-sheet.otms-xsheet > .otms-xsheet__card + .otms-xsheet__card, #schlauch-exam-sheet.otms-xsheet > .otms-xsheet__card + .otms-xsheet__card { margin-top: 0; }
#muster-exam-sheet > *, #schlauch-exam-sheet > * { border-color: var(--otms-line) !important; }
.otms-correction--plain .otms-correction__verdict { font-size: 20px; }
.otms-correction__next { margin-top: 16px; display: flex; justify-content: flex-end; }

/* ---------- Schlauchfiguren: zwei Ansichten, fünf Richtungen ---------- */
.otms-schl { max-width: 1040px; margin: 0 auto; }
.otms-schl__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.otms-schl__col { min-width: 0; }
.otms-schl__col > .otms-label { display: block; margin-bottom: 8px; }
.otms-schl__col h3 { font-size: 20px; line-height: 1.15; margin: 0 0 12px; }
.otms-schl__view { position: relative; width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--otms-line-strong); background: var(--otms-surface) !important; border-radius: 0 !important; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--otms-ink-soft); font-size: 14px; }
.otms-schl__view canvas, .otms-schl__view img { max-width: 100%; max-height: 100%; display: block; }
.otms-schl__view .animate-spin { display: none; }
.otms-schl__view .text-red-500 { padding: 12px; text-align: center; }
.otms-schl__img { display: flex; justify-content: center; padding: 14px; border: 1px solid var(--otms-line-strong); background: var(--otms-surface) !important; }
.otms-schl__img img { max-width: 100%; display: block; border-radius: 0 !important; box-shadow: none !important; }
.otms-dirs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.otms-dir, .option-btn.otms-dir { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; justify-items: center; gap: 4px; padding: 10px 4px 8px !important; border: 1px solid var(--otms-line-strong) !important; border-radius: var(--otms-r) !important; background: var(--otms-surface) !important; color: var(--otms-ink) !important; cursor: pointer; text-align: center; margin: 0 !important; min-width: 0; }
.otms-dir:hover:not([disabled]), .option-btn.otms-dir:hover:not([disabled]) { background: var(--otms-tint) !important; }
.otms-dir > .text-2xl, .otms-dir > span:first-child, .option-btn.otms-dir > span:first-child { font: 600 24px/1 var(--otms-f-display) !important; color: var(--otms-ink); width: auto !important; height: auto !important; border: 0 !important; background: transparent !important; padding: 0 !important; display: block; text-transform: uppercase; }
.otms-dir > .text-xs, .otms-dir > span:last-child { font: 600 11px/1 var(--otms-f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--otms-ink-soft) !important; }
.otms-dir.bg-purple-100, .otms-dir.is-sel { background: var(--otms-ink) !important; border-color: var(--otms-ink) !important; }
.otms-dir.bg-purple-100 > *, .otms-dir.is-sel > * { color: var(--otms-bg) !important; }
.otms-dir.correct, .option-btn.otms-dir.correct { background: var(--otms-ok) !important; border-color: var(--otms-ok) !important; }
.otms-dir.correct > *, .option-btn.otms-dir.correct > span:first-child { color: #fff !important; }
.otms-dir.wrong, .option-btn.otms-dir.wrong { background: var(--otms-danger) !important; border-color: var(--otms-danger) !important; }
.otms-dir.wrong > *, .option-btn.otms-dir.wrong > span:first-child, .option-btn.otms-dir.wrong > span:last-child { color: #fff !important; text-decoration: none !important; }
.otms-dir[disabled] { cursor: default; }
@media (max-width: 760px) { .otms-schl__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
@media (max-width: 420px) { .otms-dirs { gap: 6px; } .otms-dir > .text-2xl, .otms-dir > span:first-child { font-size: 20px !important; } .otms-dir > .text-xs, .otms-dir > span:last-child { font-size: 9.5px; letter-spacing: .04em; } }

/* Simulationsbogen (24 Karten) */
.otms-simgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.otms-simcard { border: 1px solid var(--otms-line) !important; border-radius: var(--otms-r) !important; background: var(--otms-surface) !important; padding: 14px 14px 12px !important; box-shadow: none !important; min-width: 0; }
.otms-simcard.is-answered { border-color: var(--otms-ink) !important; }
.otms-simcard.is-correct { border-color: var(--otms-ok) !important; border-width: 2px !important; }
.otms-simcard.is-wrong { border-color: var(--otms-danger) !important; border-width: 2px !important; }
.otms-simcard__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin-bottom: 10px; }
.otms-simcard__views { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.otms-simcard__views .otms-label { display: block; margin-bottom: 6px; }
.otms-simcard__view { position: relative; width: 100%; aspect-ratio: 1 / 1; border: 1px solid var(--otms-line); background: var(--otms-surface) !important; border-radius: 0 !important; display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--otms-ink-soft); font-size: 12px; }
.otms-simcard__view canvas, .otms-simcard__view img { max-width: 100%; max-height: 100%; display: block; }
.otms-simcard__view .animate-spin { display: none; }
.otms-simcard__action { min-height: 22px; margin-top: 6px; font-size: 12px; color: var(--otms-ink-soft); }
.otms-simcard__action p { margin: 0; color: var(--otms-ink-soft) !important; }
.otms-simcard__action .otms-btn { min-height: 32px; width: 100%; font-size: 12px; border-width: 1px; }
.otms-simopts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.otms-simopt { display: grid !important; place-items: center; min-height: 40px; padding: 0 !important; border: 1.5px solid var(--otms-line-strong) !important; border-radius: 20px !important; background: var(--otms-surface) !important; color: var(--otms-ink) !important; font: 600 15px/1 var(--otms-f-display) !important; text-transform: uppercase; cursor: pointer; margin: 0 !important; }
.otms-simopt:hover:not([disabled]) { background: var(--otms-tint) !important; }
.otms-simopt.is-sel { background: var(--otms-pencil) !important; border-color: var(--otms-pencil) !important; color: var(--otms-bg) !important; }
.otms-simopt.correct { background: var(--otms-ok) !important; border-color: var(--otms-ok) !important; color: #fff !important; }
.otms-simopt.wrong { background: var(--otms-danger) !important; border-color: var(--otms-danger) !important; color: #fff !important; }
.otms-simopt[disabled] { cursor: default; }
.otms-simsubmit { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--otms-line-strong); display: flex; justify-content: center; }
.otms-modhead__title { font: 700 20px/1 var(--otms-f-display); color: var(--otms-ink); }
.otms-result--wide { max-width: none; }
#schlauch-sim-result { margin-bottom: 28px; }

/* ---------- Fakten lernen: Personenliste (Einprägen) und Fragebogen ---------- */
.otms-facts { border: 1px solid var(--otms-line); background: var(--otms-surface); }
.otms-fact { display: grid; grid-template-columns: 34px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 18px; align-items: baseline; padding: 14px 18px; border-top: 1px solid var(--otms-line); }
.otms-fact:first-child { border-top: 0; }
.otms-fact__n { font: 500 14px/1.4 var(--otms-f-mono); color: var(--otms-ink-soft); }
.otms-fact__name { font: 600 19px/1.2 var(--otms-f-display); }
.otms-fact__name small { display: block; font: 500 13px/1.4 var(--otms-f-mono); color: var(--otms-ink-soft); margin-top: 2px; }
.otms-fact__col { font-size: 15px; line-height: 1.45; min-width: 0; }
.otms-fact__col .otms-label { display: block; margin-bottom: 3px; }
.otms-fact__col i { font-style: italic; color: var(--otms-ink-soft); }
.otms-fact__col b { font-weight: 600; }
.otms-facts__hint { padding: 12px 18px; border-top: 1px solid var(--otms-line-strong); font-size: 14px; color: var(--otms-ink-soft); }
.otms-facts__hint p { margin: 0; }
.otms-fq { border: 1px solid var(--otms-line); background: var(--otms-surface); padding: 18px 22px 20px; }
.otms-fq + .otms-fq { margin-top: 16px; }
.otms-fq > .otms-label { display: block; margin-bottom: 6px; }
.otms-fq h3 { font: 500 17px/1.5 var(--otms-f-body); margin: 0 0 12px; letter-spacing: 0; }
.otms-fq .otms-options { display: grid; }
.otms-fq .otms-opt.is-sel { background: var(--otms-tint); }
.otms-fsubmit { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--otms-line-strong); display: flex; justify-content: flex-end; }
.otms-fres { border: 1px solid var(--otms-line); margin-bottom: 24px; }
.otms-fres__row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px 14px; padding: 12px 14px; border-top: 1px solid var(--otms-line); align-items: start; }
.otms-fres__row:first-child { border-top: 0; }
.otms-fres__n { font: 500 14px/1.5 var(--otms-f-mono); color: var(--otms-ink-soft); }
.otms-fres__q { font-size: 15px; line-height: 1.5; min-width: 0; }
.otms-fres__q small { display: block; margin-top: 4px; font-size: 13.5px; color: var(--otms-ink-soft); }
.otms-fres__q small b { color: var(--otms-ink); font-weight: 600; }
.otms-fres__q small.is-ok b { color: var(--otms-ok-text); }
.otms-fres__q small.is-bad b { color: var(--otms-danger-text); }
.otms-fres__q em { display: block; margin-top: 4px; font-size: 13.5px; color: var(--otms-ink-soft); font-style: italic; }
.otms-fres__tag { font: 600 11px/1 var(--otms-f-display); letter-spacing: .12em; text-transform: uppercase; padding-top: 4px; white-space: nowrap; }
.otms-fres__tag.is-ok { color: var(--otms-ok-text); }
.otms-fres__tag.is-bad { color: var(--otms-danger-text); }
/* Schmale Bildschirme: „Nicht beantwortet“ ist lang; der Tag steht dann als Kopfzeile über der Frage */
@media (max-width: 480px) {
    .otms-fres__row { grid-template-columns: 30px minmax(0, 1fr); row-gap: 4px; }
    .otms-fres__n { grid-row: 1 / span 2; }
    .otms-fres__tag { grid-column: 2; grid-row: 1; padding-top: 0; }
    .otms-fres__q { grid-column: 2; grid-row: 2; }
}
@media (max-width: 760px) { .otms-fact { grid-template-columns: 30px minmax(0, 1fr); padding: 12px 14px; } .otms-fact__col { grid-column: 2; } .otms-fq { padding: 14px 14px 16px; } }

/* ---------- Figuren lernen: Raster, Abruf-Canvases ---------- */
.otms-figgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.otms-fig { border: 1px solid var(--otms-line) !important; border-radius: var(--otms-r) !important; background: var(--otms-surface) !important; padding: 10px !important; box-shadow: none !important; min-width: 0; }
.otms-fig__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; min-height: 22px; }
.otms-fig__head .otms-label { color: var(--otms-ink); white-space: nowrap; }
.otms-fig__tools { display: flex; align-items: center; gap: 6px; min-width: 0; }
.otms-fig__mark { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0 !important; border: 0 !important; background: transparent !important; cursor: pointer; border-radius: var(--otms-r) !important; }
.otms-fig__mark:hover { background: var(--otms-tint) !important; }
[data-figur-bookmark] { display: block; width: 10px !important; height: 10px !important; border-radius: 50% !important; border: 1.5px solid var(--otms-line-strong) !important; background: transparent !important; }
[data-figur-bookmark].bg-yellow-300 { background: var(--otms-accent) !important; border-color: var(--otms-accent) !important; }
.otms-fig img { display: block; width: 100%; border: 1px solid var(--otms-line) !important; border-radius: 0 !important; background: var(--otms-surface); }
.otms-fig__canvas { position: relative; width: 100%; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto; border: 1px solid var(--otms-line-strong); background: var(--otms-surface) !important; border-radius: 0 !important; overflow: hidden; }
.otms-fig__canvas canvas { border-radius: 0 !important; }
.otms-fig__status { font: 600 10.5px/1 var(--otms-f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--otms-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.otms-fig__status.is-marked { color: var(--otms-ink); }
.otms-fig__status.is-ok { color: var(--otms-ok-text); }
.otms-fig__status.is-bad { color: var(--otms-danger-text); }
.otms-fig__reset { width: 100%; margin-top: 8px; min-height: 30px; padding: 0 8px; font-size: 11px; border-width: 1px; border-color: var(--otms-line-strong); color: var(--otms-ink-soft); }
.otms-fig__reset:hover { color: var(--otms-ink); }
.figur-card.border-violet-400 { border-color: var(--otms-ink) !important; }
.figur-card.border-emerald-500 { border-color: var(--otms-ok) !important; background: var(--otms-ok-tint) !important; }
.figur-card.border-red-500 { border-color: var(--otms-danger) !important; background: var(--otms-danger-tint) !important; }
.otms-figres { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; margin-bottom: 24px; }
.otms-figres__cell { padding: 8px 4px; border: 1px solid var(--otms-line); text-align: center; font: 500 13px/1.5 var(--otms-f-mono); font-variant-numeric: tabular-nums; }
.otms-figres__cell strong { display: block; font: 600 14px/1.3 var(--otms-f-display); }
.otms-figres__cell.is-ok { border-color: var(--otms-ok); color: var(--otms-ok-text); background: var(--otms-ok-tint); }
.otms-figres__cell.is-bad { border-color: var(--otms-danger); color: var(--otms-danger-text); background: var(--otms-danger-tint); }
#figuren-recall-results.otms-result { margin-top: 28px; }
@media (max-width: 480px) { .otms-figgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .otms-fig { padding: 8px !important; } }

/* ---------- Generalprobe ---------- */
.otms-sim { max-width: 860px; margin: 0 auto; }
.otms-sim__head { margin-bottom: 26px; }
.otms-sim__head h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1; margin: 6px 0 10px; }
.otms-sim__head p { margin: 0; color: var(--otms-ink-soft); max-width: 62ch; font-size: 15.5px; line-height: 1.55; }
.otms-sim__head p b { color: var(--otms-ink); font-weight: 600; }
.otms-sim__section { margin-bottom: 26px; }
.otms-sim__section > .otms-label { display: block; margin-bottom: 8px; }
/* Umfang der Generalprobe (Komplett / Vormittag / Nachmittag): waehrend des Ladens nicht umschaltbar */
#sim-part-choice .otms-choice:disabled { cursor: progress; }
#sim-part-choice .otms-choice:disabled:hover { background: var(--otms-surface); }
.otms-day { display: flex; height: 54px; margin: 12px 0 22px; border: 1px solid var(--otms-line-strong); background: var(--otms-surface); }
.otms-day__seg { flex: var(--m) 1 0; display: flex; align-items: flex-end; padding: 0 0 6px 6px; font: 600 12px/1 var(--otms-f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--otms-ink); border-right: 1px solid var(--otms-line-strong); overflow: hidden; white-space: nowrap; min-width: 0; }
.otms-day__seg:last-child { border-right: 0; }
.otms-day__seg--pause { background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--otms-line) 6px 7px); color: var(--otms-ink-soft); }
.otms-day__seg--s { background: repeating-linear-gradient(90deg, var(--otms-line) 0 1px, transparent 1px 4px); padding: 0; }
.otms-day__seg.is-now { background: var(--otms-ink); color: var(--otms-bg); }
.otms-day__seg.is-done { background: var(--otms-tint); }
.otms-schedule { border: 1px solid var(--otms-line); background: var(--otms-surface); }
.otms-schedule__group { padding: 10px 16px 6px; border-top: 1px solid var(--otms-line-strong); }
.otms-schedule__group:first-child, .otms-schedule__group.is-first { border-top: 0; }
.otms-schedule__group .otms-label { display: block; }
.otms-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--otms-line); }
.otms-step__n { font: 500 14px/1.4 var(--otms-f-mono); color: var(--otms-ink-soft); }
.otms-step__label { font-weight: 500; min-width: 0; }
.otms-step__warn { display: block; font-size: 12.5px; color: var(--otms-warn); margin-top: 2px; }
.otms-step__meta { font: 500 13px/1.4 var(--otms-f-mono); font-variant-numeric: tabular-nums; color: var(--otms-ink-soft); white-space: nowrap; text-align: right; }
.otms-step--pause .otms-step__label { color: var(--otms-ink-soft); }
.otms-warns { display: grid; gap: 8px; margin-bottom: 22px; }
.otms-warns.hidden { display: none; }
.otms-warn { border: 1px solid var(--otms-warn); background: var(--otms-warn-tint); padding: 10px 14px; font-size: 14px; line-height: 1.5; }
.otms-warn b { font-weight: 600; }
.otms-sim__start { text-align: center; padding-top: 6px; }
.otms-sim__start p { margin: 12px 0 0; font-size: 13px; color: var(--otms-ink-soft); }
.otms-pause { max-width: 520px; margin: 24px auto 0; border: 1px solid var(--otms-line); background: var(--otms-surface); padding: clamp(24px, 5vw, 44px); text-align: center; }
.otms-pause h2 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; margin: 6px 0 10px; }
.otms-pause p { margin: 0 auto; color: var(--otms-ink-soft); max-width: 40ch; }
.otms-pause__timer { font: 500 clamp(56px, 12vw, 84px)/1 var(--otms-f-mono); font-variant-numeric: tabular-nums; margin: 26px 0; color: var(--otms-ink); }
.otms-pause__next { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--otms-line); font-size: 14px; color: var(--otms-ink-soft); }
.otms-pause__next b { display: block; color: var(--otms-ink); font-weight: 500; margin-top: 4px; }
.otms-simres { border: 1px solid var(--otms-line); margin-bottom: 24px; }
.otms-simres > .otms-box__head { border-bottom: 1px solid var(--otms-line); }
.otms-simres__row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(90px, 32%) 56px 90px; gap: 14px; align-items: center; width: 100%; padding: 12px 16px !important; border: 0 !important; border-top: 1px solid var(--otms-line) !important; background: transparent !important; text-align: left; font: inherit; color: inherit; cursor: pointer; margin: 0 !important; border-radius: 0 !important; }
.otms-simres__row:first-child { border-top: 0 !important; }
.otms-simres__row:hover { background: var(--otms-tint) !important; }
.otms-simres__label { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otms-simres__label small { display: block; font: 600 10.5px/1.2 var(--otms-f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--otms-ink-faint); margin-top: 2px; }
.otms-simres__score { font: 500 15px/1 var(--otms-f-mono); font-variant-numeric: tabular-nums; text-align: right; }
.otms-simres__score.is-ok { color: var(--otms-ok-text); } .otms-simres__score.is-warn { color: var(--otms-warn); } .otms-simres__score.is-bad { color: var(--otms-danger-text); } .otms-simres__score.is-muted { color: var(--otms-ink-faint); }
.otms-simres__count { font: 500 13px/1 var(--otms-f-mono); color: var(--otms-ink-soft); text-align: right; white-space: nowrap; }
.otms-simres .otms-bar > i { transition: width .4s ease; }
.otms-simres .otms-bar.is-ok > i { background: var(--otms-ok); } .otms-simres .otms-bar.is-warn > i { background: var(--otms-warn); } .otms-simres .otms-bar.is-bad > i { background: var(--otms-danger); }
.otms-review { border: 1px solid var(--otms-line); margin-bottom: 24px; }
.otms-review > .otms-box__head { align-items: center; gap: 12px; }
.otms-review > .otms-box__head h3 { font-size: 18px; line-height: 1.1; margin: 0; }
.otms-review > .otms-box__head p { margin: 2px 0 0; font-size: 13px; color: var(--otms-ink-soft); }
.otms-review__close { min-height: 36px; padding: 0 12px; font-size: 13px; border-width: 1px; flex: 0 0 auto; }
.otms-review__item { padding: 16px 0; border-top: 1px solid var(--otms-line); }
.otms-review__item:first-child { padding-top: 0; border-top: 0; }
.otms-review__item[hidden] { display: none; }
.otms-review__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; align-items: baseline; margin-bottom: 6px; }
.otms-review__head h4 { font: 600 17px/1.2 var(--otms-f-display); margin: 0; }
/* Kopfzeile je Aufgabe: gleicher Satz wie im Training (TMS.correction.verdict), Farben ok/bad */
.otms-review__verdict { font-size: 16px; line-height: 1.2; margin: 0; text-align: right; }
@media (max-width: 520px) { .otms-review__verdict { flex-basis: 100%; text-align: left; } }
.otms-review__ctx { font-size: 13px; color: var(--otms-ink-soft); margin-bottom: 6px; }
.otms-review__passage { padding: 10px 12px; border: 1px solid var(--otms-line); background: var(--otms-bg-2); font-size: 14px; line-height: 1.55; margin-bottom: 10px; max-height: 10rem; overflow-y: auto; }
.otms-review__prompt { font-size: 15px; line-height: 1.55; }
.otms-review__opts { display: grid; margin-top: 10px; }
/* Optionen in der Auswertung sind nicht klickbar; Farben und Tags setzt TMS.correction.markOptions */
.otms-review__item .otms-opt { cursor: default; }
.otms-review__item .otms-opt:hover { background: transparent; }
.otms-review__line { font-size: 14px; line-height: 1.5; margin-top: 6px; color: var(--otms-ink-soft); }
.otms-review__line b { color: var(--otms-ink); font-weight: 600; }
.otms-review__line.is-ok b { color: var(--otms-ok-text); }
.otms-review__media { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
.otms-review__media > div { border: 1px solid var(--otms-line); padding: 8px; }
.otms-review__media img { width: 100%; display: block; border-radius: 0 !important; }
.otms-review__media .otms-label { display: block; margin-bottom: 6px; }
.otms-review__item .otms-opt img, .otms-review__item .otms-correction__opt img { display: block; margin-top: 6px; max-height: 7rem; border: 1px solid var(--otms-line); border-radius: 0 !important; }
/* Generalprobe-Auswertung: Muster/Figuren nutzen die Renderer des Trainings (muster.js, figuren.js),
   Schlauchfiguren zeigen die Ansichten + 3D-Modell (quantitative-schlauch-3d.js). */
.otms-review__item--muster .otms-muster { margin: 4px 0 0; }
.otms-review__item--muster .otms-imgopt { cursor: default; }
.otms-review__item--muster .otms-correction { margin-top: 16px; padding-top: 12px; }
@media (max-width: 899px) { .otms-review__item--muster .otms-imgopts--muster { grid-template-columns: repeat(auto-fill, minmax(112px, max-content)); } }
.otms-figgrid--review { margin-top: 12px; }
.otms-review__schlauch { max-width: 520px; margin-top: 12px; }
.otms-review__schlauch-action { margin-top: 8px; }
.otms-review__schlauch-action .otms-review__line { margin-top: 0; font-size: 13px; }
/* ---------- Auswertung der Modul-Simulation (js/sim-result.js) ----------
   Kacheln: die Anzahl der Spalten folgt der Breite des Ergebnisfelds (Container Query), nicht dem Fenster,
   weil die Seitenleiste je nach Fenstergröße Platz nimmt. Trennlinien entstehen über gap + Hintergrund;
   die letzte Kachel füllt eine angebrochene Zeile. */
.otms-simresult__tiles { container-type: inline-size; margin-bottom: 24px; }
.otms-simresult__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--otms-line); background: var(--otms-line); }
.otms-simresult__grid .otms-field { border: 0; border-radius: 0; background: var(--otms-surface); padding: 12px 14px 14px; min-width: 0; }
.otms-simresult__grid .otms-field b { display: block; font: 600 26px/1.1 var(--otms-f-mono); font-variant-numeric: tabular-nums; margin-top: 2px; }
.otms-simresult__grid .otms-field b.is-ok { color: var(--otms-ok-text); }
.otms-simresult__grid .otms-field b.is-bad { color: var(--otms-danger-text); }
.otms-simresult__grid .otms-field b.is-warn { color: var(--otms-warn); }
.otms-simresult__grid .otms-field:last-child:nth-child(odd) { grid-column: 1 / -1; }
@container (min-width: 380px) {
    .otms-simresult__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .otms-simresult__grid .otms-field:last-child:nth-child(3n+2) { grid-column: span 2; }
    .otms-simresult__grid .otms-field:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
@container (min-width: 640px) {
    .otms-simresult__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .otms-simresult__grid .otms-field:last-child:nth-child(n) { grid-column: auto; }
}
.otms-simresult__review { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--otms-line-strong); }
.otms-simresult__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.otms-simresult__filters .otms-choice { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; }
.otms-simresult__filters .otms-choice:disabled { opacity: .45; cursor: default; }
.otms-simresult__filters .otms-choice:disabled:hover { background: var(--otms-surface); }
.otms-simresult__list { border-bottom: 1px solid var(--otms-line); }
.otms-simresult__list .otms-review__item, .otms-simresult__list .otms-review__item:first-child { padding: 16px 0; border-top: 1px solid var(--otms-line); }
#sim-floating-bar { background: var(--otms-bg) !important; border-bottom: 1px solid var(--otms-line-strong) !important; box-shadow: none !important; backdrop-filter: none !important; }
@media (min-width: 768px) { #sim-floating-bar { margin-left: var(--otms-sidebar-w, 232px) !important; } }
.otms-simbar { max-width: 960px; margin: 0 auto; padding: 8px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; }
.otms-simbar__step { font: 500 13px/1 var(--otms-f-mono); font-variant-numeric: tabular-nums; color: var(--otms-ink-soft); }
.otms-simbar__dots { display: flex; align-items: center; gap: 3px; min-width: 0; }
.otms-simbar__dot { display: block; width: 9px; height: 9px; border: 1.5px solid var(--otms-line-strong); background: var(--otms-surface); flex: 0 0 auto; }
.otms-simbar__dot.is-done { background: var(--otms-pencil); border-color: var(--otms-pencil); }
.otms-simbar__dot.is-now { background: var(--otms-accent); border-color: var(--otms-accent); }
.otms-simbar__line { display: block; flex: 1 1 8px; min-width: 6px; height: 1px; background: var(--otms-line); }
.otms-simbar__line.is-done { background: var(--otms-pencil); }
.otms-simbar__abort { background: none; border: 0; padding: 0; font: 600 12px/1 var(--otms-f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--otms-ink-soft); cursor: pointer; }
.otms-simbar__abort:hover { color: var(--otms-danger-text); }
.otms-simbar__label { grid-column: 1 / -1; display: flex; justify-content: center; gap: 10px; font: 600 12px/1 var(--otms-f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--otms-ink); }
.otms-simbar__label #sim-bar-task-counter { font: 500 12px/1 var(--otms-f-mono); letter-spacing: 0; text-transform: none; color: var(--otms-ink-soft); }
.otms-resume { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9000; width: calc(100% - 32px); max-width: 620px; border: 1px solid var(--otms-line-strong); background: var(--otms-surface); padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.otms-resume__main { flex: 1 1 280px; min-width: 0; }
.otms-resume__main h3 { font-size: 18px; line-height: 1.1; margin: 4px 0 4px; }
.otms-resume__main p { margin: 2px 0 0; font-size: 14px; color: var(--otms-ink-soft); }
.otms-resume__main p b { color: var(--otms-ink); font-weight: 600; }
.otms-resume__btns { display: flex; gap: 8px; }
.otms-resume__btns .otms-btn { min-height: 38px; padding: 0 14px; font-size: 14px; }
@media (max-width: 640px) {
    .otms-simres__row { grid-template-columns: minmax(0, 1fr) 56px; }
    .otms-simres__row .otms-bar { display: none; }
    .otms-simres__count { grid-column: 1; text-align: left; }
    .otms-day { height: 44px; }
    .otms-day__seg { font-size: 10px; letter-spacing: .04em; padding-left: 4px; }
    .otms-step { padding: 10px 12px; grid-template-columns: 24px minmax(0, 1fr); }
    .otms-step__meta { grid-column: 2; text-align: left; }
}

/* ---------- Lernplan ---------- */
.otms-plan { max-width: 900px; margin: 0 auto; }
.otms-plan__head { margin-bottom: 22px; }
.otms-plan__head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; margin: 6px 0 6px; }
.otms-plan__head p { margin: 0; color: var(--otms-ink-soft); max-width: 60ch; }
.otms-plan__section { margin-bottom: 26px; }
.otms-plan__section > .otms-label { display: block; margin-bottom: 8px; }
.otms-plan__section > summary { list-style: none; cursor: pointer; }
.otms-plan__section > summary::-webkit-details-marker { display: none; }
.otms-plan__section > summary .otms-label { display: inline-flex; align-items: center; gap: 8px; }
.otms-plan__section > summary .otms-label::after { content: "+"; font: 600 14px/1 var(--otms-f-mono); }
.otms-plan__section[open] > summary .otms-label::after { content: "\2212"; }
.otms-plan__section > summary + * { margin-top: 10px; }
.otms-plan__hero { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--otms-line); background: var(--otms-surface); margin-bottom: 0; }
.otms-plan__hero .otms-field { border: 0; border-right: 1px solid var(--otms-line); border-radius: 0; background: transparent; padding: 12px 16px 14px; }
.otms-plan__hero .otms-field:last-child { border-right: 0; }
.otms-plan__hero .otms-field b { display: block; font: 600 30px/1.1 var(--otms-f-mono); font-variant-numeric: tabular-nums; margin-top: 2px; }
.otms-plan__hero .otms-field b.is-display { font: 600 26px/1.15 var(--otms-f-display); }
.otms-plan__hero .otms-field span:not(.otms-label) { display: block; font-size: 13px; color: var(--otms-ink-soft); margin-top: 3px; }
.otms-plan__bar { border: 1px solid var(--otms-line); border-top: 0; height: 10px; background: var(--otms-surface); }
.otms-plan__bar > i { display: block; height: 100%; background: var(--otms-pencil); transition: width .4s ease; }
.otms-plan__tasks { border: 1px solid var(--otms-line); background: var(--otms-surface); }
.otms-plan__task { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--otms-line); }
.otms-plan__task:first-child { border-top: 0; }
.otms-plan__task.is-done { color: var(--otms-ink-soft); }
.otms-plan__task.is-done .otms-plan__task-name { text-decoration: line-through; text-decoration-color: var(--otms-line-strong); }
.otms-plan__task-n { width: 30px; height: 30px; display: grid; place-items: center; border: 1.5px solid var(--otms-line-strong); border-radius: var(--otms-r); font: 600 13px/1 var(--otms-f-mono); color: var(--otms-ink); }
.otms-plan__task.is-done .otms-plan__task-n { background: var(--otms-ok); border-color: var(--otms-ok); color: #fff; }
.otms-plan__task.is-done .otms-plan__task-n svg { width: 14px; height: 14px; }
.otms-plan__task-name { font-weight: 500; }
.otms-plan__task-meta { display: block; font: 500 12.5px/1.4 var(--otms-f-mono); color: var(--otms-ink-soft); margin-top: 1px; }
.otms-plan__task .otms-btn { min-height: 34px; padding: 0 12px; font-size: 13px; border-width: 1px; }
.otms-plan__task-actions { display: flex; gap: 8px; align-items: center; }
.otms-plan__task .otms-plan__task-check { width: 34px; padding: 0; display: grid; place-items: center; border-color: var(--otms-line-strong); color: var(--otms-ink-soft); }
.otms-plan__task .otms-plan__task-check:hover { border-color: var(--otms-ok); color: var(--otms-ok-text); }
.otms-plan__task-check svg { width: 16px; height: 16px; }
.otms-plan__task-tag { display: inline-block; margin-left: 8px; padding: 1px 6px; border: 1px solid var(--otms-accent); border-radius: var(--otms-r); font: 600 11px/1.4 var(--otms-f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--otms-accent); vertical-align: 2px; }
.otms-plan__task.is-done .otms-plan__task-tag { border-color: var(--otms-line-strong); color: var(--otms-ink-faint); }
@media (max-width: 480px) { .otms-plan__task { grid-template-columns: 30px minmax(0, 1fr); } .otms-plan__task-actions { grid-column: 1 / -1; justify-content: flex-end; } }
.otms-plan__empty { padding: 20px 16px; border: 1px solid var(--otms-line); background: var(--otms-surface); color: var(--otms-ink-soft); text-align: center; }
.otms-plan__empty p { margin: 0; }
.otms-plan__empty .otms-btn { margin-top: 14px; }
.otms-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--otms-line); background: var(--otms-surface); }
.otms-week__day { padding: 10px 6px 12px; border-right: 1px solid var(--otms-line); text-align: center; min-width: 0; }
.otms-week__day:last-child { border-right: 0; }
.otms-week__day.is-today { background: var(--otms-tint); box-shadow: inset 0 -3px 0 var(--otms-accent); }
.otms-week__day .otms-label { display: block; }
.otms-week__day b { display: block; font: 500 18px/1.2 var(--otms-f-mono); font-variant-numeric: tabular-nums; margin-top: 4px; }
.otms-week__day b.is-ok { color: var(--otms-ok-text); }
.otms-week__day small { display: block; font: 500 11px/1.2 var(--otms-f-mono); color: var(--otms-ink-faint); margin-top: 2px; }
.otms-week__day.is-off b { color: var(--otms-ink-faint); }
.otms-plan__phases { border: 1px solid var(--otms-line); background: var(--otms-surface); padding: 16px 18px 14px; }
.otms-plan__phases .otms-day { margin: 0 0 12px; height: 44px; }
.otms-plan__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--otms-ink-soft); }
.otms-plan__legend span { display: inline-flex; align-items: center; gap: 6px; }
.otms-plan__legend span.is-now { color: var(--otms-ink); font-weight: 600; }
.otms-plan__legend i { display: inline-block; width: 10px; height: 10px; border: 1px solid var(--otms-line-strong); background: var(--otms-surface); }
.otms-plan__legend span.is-now i { background: var(--otms-ink); border-color: var(--otms-ink); }
.otms-plan__legend span.is-done i { background: var(--otms-tint); }
.otms-plan__foot { margin: 12px 0 0; font-size: 13px; color: var(--otms-ink-soft); }
.otms-plan__sum { margin-left: 12px; font: 500 12.5px/1.4 var(--otms-f-mono); letter-spacing: 0; text-transform: none; color: var(--otms-ink-soft); }
.otms-plan__mods { border: 1px solid var(--otms-line); background: var(--otms-surface); }
.otms-plan__mod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 30%) 52px auto; gap: 14px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--otms-line); }
.otms-plan__mod:first-child { border-top: 0; }
.otms-plan__mod-name { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otms-plan__mod-pct { font: 500 15px/1 var(--otms-f-mono); font-variant-numeric: tabular-nums; text-align: right; }
.otms-plan__mod-status { font: 600 11px/1 var(--otms-f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--otms-ink-soft); white-space: nowrap; min-width: 92px; text-align: right; }
.otms-plan__mod.is-bad .otms-plan__mod-status { color: var(--otms-danger-text); } .otms-plan__mod.is-warn .otms-plan__mod-status { color: var(--otms-warn); } .otms-plan__mod.is-ok .otms-plan__mod-status { color: var(--otms-ok-text); }
.otms-plan__mod .otms-bar.is-bad > i { background: var(--otms-danger); } .otms-plan__mod .otms-bar.is-warn > i { background: var(--otms-warn); } .otms-plan__mod .otms-bar.is-ok > i { background: var(--otms-ok); }
.otms-plan__sched { border: 1px solid var(--otms-line); background: var(--otms-surface); padding: 14px 16px 16px; margin-bottom: 12px; }
.otms-plan__sched > .otms-label { display: block; margin-bottom: 8px; }
.otms-plan__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) {
    .otms-plan__hero { grid-template-columns: 1fr 1fr; }
    .otms-plan__hero .otms-field:nth-child(2) { border-right: 0; }
    .otms-plan__hero .otms-field:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--otms-line); }
    .otms-plan__mod { grid-template-columns: minmax(0, 1fr) 52px; }
    .otms-plan__mod .otms-bar { display: none; }
    .otms-plan__mod-status { grid-column: 1 / -1; text-align: left; min-width: 0; }
    .otms-week__day { padding: 8px 2px 10px; }
    .otms-week__day b { font-size: 14px; }
}

/* ---------- Lesezeichen ---------- */
.otms-bm { max-width: 860px; margin: 0 auto; }
.otms-bm__head { margin-bottom: 18px; }
.otms-bm__head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; margin: 6px 0 6px; }
.otms-bm__head p { margin: 0; color: var(--otms-ink-soft); }
#bookmark-list { border: 1px solid var(--otms-line); background: var(--otms-surface); }
#bookmark-list:empty { display: none; }
#bookmark-list > div { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px !important; margin: 0 !important; border-radius: 0 !important; border-top: 1px solid var(--otms-line); background: transparent !important; }
#bookmark-list > div:first-child { border-top: 0; }
#bookmark-list > div > div > span { font: 600 11px/1.2 var(--otms-f-display) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--otms-ink-soft) !important; }
#bookmark-list > div > div > p { margin: 2px 0 0 !important; font-size: 15px; }
#bookmark-list > div > button { background: none; border: 0; padding: 4px 0; font: 600 12px/1 var(--otms-f-display) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--otms-ink-soft) !important; cursor: pointer; white-space: nowrap; }
#bookmark-list > div > button:hover { color: var(--otms-danger-text) !important; text-decoration: underline; text-underline-offset: 3px; }
#bookmark-list > p { margin: 0; padding: 24px 16px; text-align: center; color: var(--otms-ink-soft) !important; }

/* ============================================================
   ANTWORT-FLOW: Bestätigungsdialog, Sitzung fortsetzen, Beenden
   Markup: js/session-resume.js (TMS.sessionDialog), js/quiz-engine.js,
   js/modules/*.js, views/modules.html. Nur Tokens aus css/design.css.
   ============================================================ */
.otms-sdialog { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 8, 12, .55); }
.otms-sdialog__panel { max-width: 460px; }
.otms-sdialog .otms-modal__head h2 { font-size: 26px; }
.otms-sdialog__text { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--otms-ink-soft); }
.otms-sdialog__text b { color: var(--otms-ink); font-weight: 600; }
.otms-sdialog__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.otms-sdialog__btns .otms-btn { flex: 1 1 160px; }
/* Offene Aufgaben vor dem Abgeben: Nummern als Sprungziele */
.otms-sdialog__jumps { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 18px; }
.otms-sdialog__jump { min-width: 40px; min-height: 36px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--otms-line-strong); border-radius: var(--otms-r); background: var(--otms-surface); color: var(--otms-ink); font: 600 14px/1 var(--otms-f-mono); cursor: pointer; }
.otms-sdialog__jump:hover { border-color: var(--otms-accent); color: var(--otms-accent); }
.otms-sdialog__jump.is-static { cursor: default; border-color: var(--otms-line); }
.otms-sdialog__more { align-self: center; font-size: 13px; color: var(--otms-ink-soft); }

/* "Beenden" im Modulkopf: bleibt anders als .otms-modhead__end auch mobil sichtbar */
.otms-modhead__quit { min-height: 36px; padding: 0 12px; font-size: 13px; border-width: 1px; }
.otms-modhead__quit:hover { border-color: var(--otms-danger); color: var(--otms-danger-text); }

/* Zwei-Schritt-Antwort (Einstufungstest + Training): Auswahl bestätigen */
.otms-confirm { display: flex; justify-content: flex-end; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--otms-line); }
.otms-confirm .otms-btn { min-width: 180px; }
/* display:flex schlägt die Utility-Klasse .hidden: die Prüfen-Leiste blieb nach dem Prüfen als graue Zeile stehen (alle Module) */
.otms-confirm.hidden { display: none; }
.otms-confirm .otms-btn[disabled] { opacity: .5; cursor: default; }
@media (max-width: 480px) {
    .otms-confirm { justify-content: stretch; }
    .otms-confirm .otms-btn { flex: 1 1 100%; }
}

/* Einstufungstest: gewählte, noch nicht bestätigte Antwort */
.diag-option.is-sel { background: var(--otms-tint) !important; }
.diag-option.is-sel > span:first-child { background: var(--otms-ink) !important; border-color: var(--otms-ink); color: var(--otms-bg) !important; }
.diag-option.aspect-square.is-sel, .diag-option.text-center.is-sel { border-color: var(--otms-ink) !important; box-shadow: inset 0 0 0 1px var(--otms-ink); }

/* ---------- Schlauchfiguren: Fallback, wenn eine Ansicht nicht laedt ---------- */
/* Ersetzt die alte rote Rohtext-Meldung ("Fehler beim Laden"): Tokens statt Tailwind-Farben,
   damit der Hinweis in beiden Modi und allen Paletten lesbar bleibt. */
.otms-loadfail { display: grid; gap: 8px; justify-items: center; align-content: center; padding: 16px 14px; text-align: center; color: var(--otms-ink-soft); }
.otms-loadfail b { font: 600 15px/1.2 var(--otms-f-display); letter-spacing: .02em; color: var(--otms-ink); }
.otms-loadfail p { margin: 0; font-size: 13px; line-height: 1.45; max-width: 26ch; }
.otms-loadfail__btn { min-height: 32px; padding: 0 12px; font-size: 12px; border-width: 1px; }
.otms-loadfail--compact { padding: 8px 6px; gap: 6px; }
.otms-loadfail--compact b { font-size: 12.5px; }
.otms-loadfail--compact .otms-loadfail__btn { min-height: 28px; padding: 0 8px; font-size: 11px; }

/* ---------- Schlauchfiguren: Simulationsstart bei knappem Aufgabenpool ---------- */
.otms-modesel__opt[disabled] { cursor: default; opacity: .72; }
.otms-modesel__opt[disabled]:hover { background: transparent; }
.otms-modesel__opt[disabled] .otms-modesel__cta { color: var(--otms-ink-faint); text-decoration-color: var(--otms-line); text-decoration-thickness: 2px; }
.otms-modesel__opt p.otms-modesel__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--otms-warn); }
.otms-modesel__opt p.otms-modesel__note b { font: inherit; font-weight: 600; }

/* ---------- Figuren lernen: Korrektur in der Karte ---------- */
/* Fallback, wenn das richtige Feld nicht in den Canvas gezeichnet werden kann:
   die richtige Figur steht dann unter der eigenen Markierung. */
.otms-fig__solution { margin-top: 8px; display: grid; gap: 4px; }
.otms-fig__solution .otms-label { color: var(--otms-ok-text); }
.otms-fig__solution img { display: block; width: 100%; border: 1px solid var(--otms-ok) !important; border-radius: 0 !important; background: #fff; }

/* Aufgaben-Navigator im Modulkopf (js/quiz-engine.js buildDropdown): früher
   bg-<modulfarbe>-500 — diese Tailwind-Klassen fehlen in css/styles.min.css. */
.otms-qnav__item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: var(--otms-r); background: transparent; color: var(--otms-ink); font: inherit; cursor: pointer; }
.otms-qnav__item:hover:not(.is-locked) { background: var(--otms-tint); }
.otms-qnav__item.is-current { background: var(--otms-tint); }
.otms-qnav__item.is-current .otms-qnav__title { font-weight: 600; }
.otms-qnav__item.is-locked { opacity: .55; cursor: not-allowed; }
.otms-qnav__row { display: flex; align-items: center; gap: 10px; }
.otms-qnav__num { flex: 0 0 auto; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--otms-accent); border-radius: var(--otms-r); background: var(--otms-accent); color: var(--otms-on-accent); font: 600 13px/1 var(--otms-f-mono); }
.otms-qnav__num.is-off { border-color: var(--otms-line-strong); background: var(--otms-bg-2); color: var(--otms-ink-soft); }
.otms-qnav__main { flex: 1 1 auto; min-width: 0; }
.otms-qnav__title { font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otms-qnav__sub { font-size: 12px; color: var(--otms-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otms-qnav__hint { font-size: 11px; color: var(--otms-ink-faint); }

/* Ausgewählte Antwort auf dem Prüfungsbogen (alle Untertests) */
[class*="exam-opt-"].is-sel, .otms-imgopt.is-sel, .option-btn.otms-imgopt.is-sel { border-color: var(--otms-ink) !important; background: var(--otms-tint) !important; }
.otms-imgopt.is-sel .otms-opt__letter { background: var(--otms-ink); border-color: var(--otms-ink); color: var(--otms-bg); }

/* ============================================================
   Generalprobe-Leiste: Klickbarkeit auf dem Desktop
   ------------------------------------------------------------
   Die Leiste liegt fix am oberen Rand (top:0), die Desktop-Topbar aber
   ebenfalls und mit hoeherem z-index. Dadurch nahm die Topbar alle Klicks
   entgegen: Fortschrittspunkte, "Antwortbogen" und "Abbrechen" waren
   waehrend einer laufenden Generalprobe nicht erreichbar. Waehrend die
   Leiste sichtbar ist, tritt die Topbar zurueck und der Inhalt beginnt
   unterhalb der Leiste, statt von ihr ueberdeckt zu werden.
   ============================================================ */
#sim-floating-bar:not(.hidden) { z-index: 90; }

html:has(#sim-floating-bar:not(.hidden)) #desktop-topbar-shell {
    display: none !important;
}

@media (min-width: 768px) {
    html:has(#sim-floating-bar:not(.hidden)) #main-content {
        padding-top: calc(var(--otms-simbar-h, 52px) + 8px);
    }
}

/* .otms-btn setzt display:inline-flex und gewinnt gegen Tailwinds .hidden
   (gleiche Spezifität, spätere Datei) — versteckte Buttons blieben dadurch
   sichtbar (z. B. "Nächster Text" neben "Prüfen" im Textverständnis). */
.otms-btn.hidden { display: none !important; }

/* ============================================================
   "Notiz"/"Melden" an der Aufgabe (TMS.taskActions, js/notes.js)
   Schlauchfiguren: eine Leiste unter der Aufgabe.
   Figuren lernen: je Figur eine eigene Leiste am Kartenfuss —
   dort kompakter und zentriert, weil die Karten schmal sind.
   ============================================================ */
#schlauch-task-actions:empty { display: none; }
#schlauch-task-actions .otms-taskacts { margin-top: 16px; }

.otms-fig__acts:empty { display: none; }
.otms-fig__acts .otms-taskacts { margin-top: 8px; padding-top: 8px; gap: 4px; justify-content: center; }
.otms-fig__acts .otms-taskacts__btn { gap: 4px; padding: 3px 7px; font-size: 10.5px; }
.otms-fig__acts .otms-taskacts__btn .otms-icon { width: 12px; height: 12px; }

/* Beim Scrollen rutschten die klebenden Modul-Kopfzeilen (sticky top-0) unter
   die Generalprobe-Leiste; das obere Polster hilft nur bei Scrollposition 0. */
html:has(#sim-floating-bar:not(.hidden)) #main-content [id$="-header"].sticky,
html:has(#sim-floating-bar:not(.hidden)) #main-content .otms-modhead.sticky {
    top: calc(var(--otms-simbar-h) + 8px);
}

/* Gemerkte Aufgabe (Schlauchfiguren): Lesezeichen in der Akzentfarbe statt einer
   festen Tailwind-Farbe, damit es in allen Paletten stimmt. */
.is-marked, .is-marked .otms-icon { color: var(--otms-accent); }

/* Aussagenliste der I/II/III-Aufgaben (MedNat, Diagramme, Quantitative).
   Steht zwischen Fragesatz und Optionen; die Optionen ("Nur Aussage I")
   sind ohne sie bedeutungslos. Markup: TMS.taskGuards.statementsHTML. */
.otms-statements {
    list-style: none;
    margin: 14px 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.otms-statement {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 10px 12px;
    border-left: 3px solid var(--otms-accent, #2563eb);
    background: var(--otms-surface-2, rgba(127, 127, 127, .07));
    border-radius: 0 8px 8px 0;
}
.otms-statement__nr {
    flex: 0 0 auto;
    min-width: 2.1em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--otms-accent, #2563eb);
}
.otms-statement__text { flex: 1 1 auto; }

/* Fragesatz der quantitativen I/II/III-Aufgaben, zwischen Aufgabentext und
   Aussagenliste. Steht bewusst etwas kraeftiger als der Aufgabentext. */
.otms-quant__frage {
    margin: 14px 0 0;
    font-weight: 600;
}

/* ============================================================
   BEHALTENSPHASE (js/retention.js): Pause zwischen Einprägen und Abfrage
   Markup rendert TMS.retention in #figuren-retention-container und
   #fakten-retention-container (views/modules.html). Nur Tokens.
   ============================================================ */
.otms-retention { max-width: 760px; margin: 0 auto; }
.otms-retention:focus { outline: none; }
.otms-retention:focus-visible { outline: 2px solid var(--otms-focus); outline-offset: 3px; }
.otms-retention h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.05; margin: 6px 0 0; }
.otms-retention__clock { margin: 18px 0 14px; font: 600 clamp(64px, 17vw, 128px)/1 var(--otms-f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--otms-ink); }
.otms-retention__clock.is-due { color: var(--otms-accent); }
.otms-retention__due { margin: 0 0 8px; font: 600 18px/1.3 var(--otms-f-display); letter-spacing: .02em; color: var(--otms-ink); }
.otms-retention__due:empty { display: none; }
.otms-retention__note { margin: 0; max-width: 56ch; color: var(--otms-ink-soft); font-size: 16px; line-height: 1.55; }
.otms-retention__meta { margin: 12px 0 0; font: 400 13px/1.3 var(--otms-f-mono); color: var(--otms-ink-soft); }
.otms-retention__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
@media (max-width: 640px) { .otms-retention__acts .otms-btn { flex: 1 1 100%; } }

/* Hinweis „Abfrage Fakten in 12:30“ (js/retention.js): Seitenleiste am Desktop, zweite Zeile der Kopfleiste mobil.
   Markup: views/layout.html. Sichtbar nur, solange eine Behaltensphase läuft und keine Simulation. */
.otms-retention-hint { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; width: 100%; padding: 8px 12px; border: 1px solid var(--otms-line-strong); border-radius: var(--otms-r); background: var(--otms-surface); color: var(--otms-ink); font: 600 12px/1.3 var(--otms-f-display); letter-spacing: .1em; text-transform: uppercase; text-align: left; cursor: pointer; }
.otms-retention-hint:hover { background: var(--otms-tint); }
.otms-retention-hint.hidden { display: none; }
.otms-retention-hint__time { font: 600 16px/1.2 var(--otms-f-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.otms-retention-hint.is-due .otms-retention-hint__time { color: var(--otms-accent); }
.otms-retention-hint__more { font: 500 12px/1 var(--otms-f-mono); letter-spacing: 0; color: var(--otms-ink-soft); }
.otms-retention-hint__more:empty { display: none; }
#sidebar .otms-retention-hint { width: calc(100% - 24px); margin: 0 12px 10px; }
#mobile-header .otms-retention-hint { align-items: center; gap: 0 8px; padding: 6px 16px; border-width: 1px 0 0; border-radius: 0; background: var(--otms-bg); }
@media (max-width: 767px) { html.otms-has-retention #main-content.app-main-shell { padding-top: calc(var(--app-mobile-top-offset, 53px) + 3px); } }