/* ==========================================================================
   caruit Komponenten (v2) — nur was diese Spielwiese rendert. Nutzt Tokens.
   ========================================================================== */

/* --- Nav-Item ------------------------------------------------------------- */
.nav-group__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nav-group-label);
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--nav-text);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}

.nav-item:hover { background: var(--nav-hover-bg); color: var(--nav-text-strong); }

.nav-item.is-active {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
}

.nav-item__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke-width: 2;
}

/* m24_8d: gelber „(N ungelesen)"-Zusatz am Nachrichten-Eintrag (Ersatz fuer die
   entfallene Glocke); Zaehlwert aus dem globalen notifications_unread_count. */
.nav-item__unread {
  margin-left: var(--space-2);
  color: var(--c-yellow-400);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* --- Suche (sec_top_middle) ---------------------------------------------- */
.search-box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 420px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.search-box input {
  border: 0;
  background: transparent;
  outline: none;
  width: 100%;
  font: inherit;
  color: var(--text);
}

/* --- Info-Leiste (sec_top_right) ----------------------------------------- */
.info-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.info-bar__sep { color: var(--border-strong); }
.info-bar__user { font-weight: var(--fw-semibold); color: var(--text); }

/* --- Button --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font: inherit;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  cursor: pointer;
  text-decoration: none;
}

.btn--primary { background: var(--action-bg); color: var(--action-text); }
.btn--primary:hover { background: var(--action-bg-hover); }

.btn--secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--secondary:hover { background: var(--surface-muted); }

/* --- Datentabelle (sec_middle) ------------------------------------------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}

.panel__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }

.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }

.data-table th {
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.data-table th .sort-caret { color: var(--border-strong); margin-left: var(--space-1); }

.data-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-muted); }

.cell-topic { font-weight: var(--fw-medium); color: var(--text); }

/* m24_8d: Nachrichten-Tabelle — schmale Auswahlspalte, zentrierter Empty-Text,
   Read/Unread-Optik (ungelesen hervorgehoben, gelesen blasser). */
.data-table__check-col { width: 1%; text-align: center; white-space: nowrap; }
.data-table__empty { text-align: center; color: var(--text-muted); padding: var(--space-8); }
.data-table tr.is-unread { font-weight: var(--fw-semibold); }
.data-table tr.is-read { color: var(--text-muted); }

/* m24_8d: Button-Zeile unter einem Panel-Inhalt (z. B. Sammel-Aktion). */
/* Abstand rechts/unten, damit der Button nicht bündig an der Karten-Kante sitzt (v2-Spacing). */
.panel__foot { display: flex; justify-content: flex-end; margin-top: var(--space-4); padding: 0 var(--space-5) var(--space-5); }

/* --- m24_3: Thema-Links in der Tabelle: eine Farbe, keine Unterstreichung -- */
.data-table a,
.data-table a:visited {
  color: var(--link);
  text-decoration: none;
}
.data-table a:hover {
  color: var(--action-bg-hover);
  text-decoration: none;
}

/* --- Fach-Badge ----------------------------------------------------------- */
.subject-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-white);
  background: var(--c-subject-math);   /* produktiv aus Subject-DB-Farbe */
}

.subject-badge__icon { width: 14px; height: 14px; }

/* --- Tutor-Card + Side-Info (sec_right) ---------------------------------- */
.tutor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  text-align: center;
}

.tutor-card__avatar {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: var(--surface-muted);
  margin: 0 auto var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--fs-2xl);
}

.tutor-card__name { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.tutor-card__role { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--fs-sm); }
/* m57_3: das Zitat des Tages unter dem Namen. Abgeleitet von
   `.tutor-card__role`, das dieselbe Rolle spielt. Zentriert wird nicht eigens:
   `.tutor-card` traegt bereits `text-align: center`. */
.tutor-card__quote {
  margin: var(--space-3) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  font-style: italic;
}

.side-info {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
}

.side-info__row { display: flex; justify-content: space-between; padding: var(--space-1) 0; }
.side-info__label { color: var(--text-muted); }
.side-info__value { font-weight: var(--fw-medium); }

/* --- m24_2a: Nav-Item deaktiviertes (nicht lizenziertes) Fach ------------ */
.nav-item.is-disabled {
  color: var(--nav-group-label);
  opacity: 0.5;
  cursor: not-allowed;
}

/* span.nav-item (Fach-Darstellung in 2a) verhält sich wie der Link */
span.nav-item { cursor: default; }

/* --- m24_2a: Logo-Bild in der Sidebar ------------------------------------ */
.sidebar__logo-img { max-width: 140px; height: auto; display: block; }

/* --- m24_2a: Tutor-Avatar als Bild (Rahmen/Rundung der Div-Variante) ----- */
img.tutor-card__avatar { object-fit: cover; }

/* --- m24_2a: Modal (.modal*) — token-basiert, isoliert von main.css ------ */
/* Die eingebundenen Create-/Delete-Modals nutzen die .modal*-Klassen, die
   in der Alt-Welt main.css liefert. Da die v2-Shell main.css NICHT lädt,
   werden die nötigen Regeln hier token-basiert nachgebildet. */
.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

/* m24_9: Header-Suche — breiteres Modal + scrollbarer Ergebnis-Bereich
   (portiert aus account.css, Klassennamen unverändert). */
.modal__box--search { max-width: 720px; }
.modal__search-body { max-height: 60vh; overflow-y: auto; }

.modal__title { margin: 0 0 var(--space-3); font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.modal__prompt { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--fs-sm); }

.modal__form { display: flex; flex-direction: column; gap: var(--space-3); }

.modal__field { display: block; }
.modal__field select,
.modal__select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  background: var(--surface);
  color: var(--text);
}

.modal__buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.modal__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font: inherit;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.modal__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.modal__btn--primary { background: var(--action-bg); color: var(--action-text); }
.modal__btn--primary:not(:disabled):hover { background: var(--action-bg-hover); }
.modal__btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.modal__btn--secondary:hover { background: var(--surface-muted); }
.modal__btn--danger { background: var(--c-red-500); color: var(--c-white); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ==========================================================================
   m24_4 — Detail-Ansicht: token-basiert aus main.css portiert.
   Klassennamen + Hooks identisch zum Alt-Layout. Layout (Spalten) liefert die
   v2-Shell; hier nur die Komponenten-Optik. Token-Mapping: --color-accent →
   --tab-accent-line, --color-bg-accent-soft → --tab-selected-bg, bg-page(weiss)
   → --surface, bg-panel(grau) → --surface-muted, --color-text → --text,
   --color-border → --border, --color-link → --link, space-xs/sm/md/lg →
   --space-1/2/4/6.
   ========================================================================== */

/* --- Zurück-Link (im Header-Band) ---------------------------------------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--link);
  text-decoration: none;
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}
.back-link:hover { text-decoration: none; }

/* --- m24_4c: Mittelteil-Breite begrenzen (Lesbarkeit) -------------------- */
.detail-main {
  max-width: var(--detail-max-width);
  /* zentriert im verfügbaren Mittelteil-Bereich (Weißraum links + rechts);
     der Inhalt darin bleibt linksbündig. */
  margin-left: auto;
  margin-right: auto;
}

/* --- m24_5c: verstecktes Upload-Formular (Datei-Picker per JS) ----------- */
.upload-form-hidden { display: none; }

/* --- m24_5a: Vertiefen Sub-Tab-Leiste (Underline, orange Akzent) ---------- */
.deepen-subtabs {
  display: flex;
  gap: var(--space-6);
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--space-6);
}
.deepen-subtabs__tab {
  padding: var(--space-2) 0;
  color: var(--text);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-weight: var(--fw-medium);
}
.deepen-subtabs__tab:hover,
.deepen-subtabs__tab:focus {
  text-decoration: none;
  color: var(--tab-accent-line);
}
.deepen-subtabs__tab--active {
  color: var(--tab-accent-line);
  border-bottom-color: var(--tab-accent-line);
  font-weight: var(--fw-semibold);
}

/* --- Äußere Lern-Phasen-Tabs --------------------------------------------- */
/* --- m24_5d: Feedback-/Menü-Icons rechtsbündig in der Phasen-Tab-Zeile ---- */
/* Rein dekorativ (kein Handler/Endpunkt), klickbar (cursor:pointer), nicht disabled. */
.detail-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.detail-actions__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
}
.detail-actions__btn:hover { color: var(--text); }
.detail-actions__btn i { width: 18px; height: 18px; }
/* m75_1a: gewaehlter Daumen — das Symbol selbst gefuellt und umrissen in der Farbe, kein Hintergrund. */
.detail-actions__btn.detail-actions__btn--useful svg { fill: var(--feedback-useful); stroke: var(--feedback-useful); }
.detail-actions__btn.detail-actions__btn--not-useful svg { fill: var(--feedback-not-useful); stroke: var(--feedback-not-useful); }
/* m28_1d_fix: Themenkompass-Auslöser als Textlink (links vor der Feedback-Gruppe) */
.detail-actions__link {
  margin-right: var(--space-3);
  color: var(--text);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  align-self: center;
}
.detail-actions__link:hover { color: var(--link); }

/* --- m24_5d: Übungen-Coming-Soon-Stub (schlicht, token-basiert) ---------- */
.deepen-stub { padding: var(--space-6) 0; }
.deepen-stub__title {
  font-size: 1.05rem;
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}
.deepen-stub p { color: var(--text-muted); max-width: 60ch; }

.app-tabs {
  display: flex;
  gap: var(--space-1);
  padding: 0;
  border-bottom: 4px solid var(--tab-accent-line);   /* orange Zierleiste */
  background: transparent;
  margin-bottom: var(--space-6);
}
.app-tabs__tab {
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  color: var(--text);
  border-top: 3px solid transparent;
}
.app-tabs__tab:hover:not(.app-tabs__tab--disabled),
.app-tabs__tab:focus:not(.app-tabs__tab--disabled) {
  text-decoration: none;
  border-top-color: var(--border);
}
.app-tabs__tab--active {
  background: var(--tab-selected-bg);   /* cremegelb */
  color: var(--text);
  border-top-color: var(--tab-top-line);  /* orange top_line */
  font-weight: var(--fw-semibold);
}
.app-tabs__tab--disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* --- Content-Panel (Verstehen) ------------------------------------------- */
.content-panel { display: flex; flex-direction: column; gap: var(--space-4); }

.content-panel__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* m24_4a: keine graue Box — linksbündige Flucht mit der Erklärungs-Überschrift.
     Vertikaler Abstand zur Erklärung bleibt über content-panel gap erhalten. */
  padding: 0;
  background: transparent;
  border: 0;
}
/* m24_4a: abgesendete (readonly) Eingabefelder sichtbar gesperrt */
.content-panel__form input[readonly],
.content-panel__form textarea[readonly] {
  background: var(--surface-muted);
  color: var(--text-muted);
  cursor: default;
}
.content-panel__field { display: flex; flex-direction: column; gap: var(--space-1); }
.content-panel__field select,
.content-panel__field input[type="text"],
.content-panel__field textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  background: var(--surface);
  color: var(--text);
}
.content-panel__heading {
  font-size: 1.05rem;
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-4) 0;
  color: var(--text);
}
.content-panel__status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.content-panel__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--text);
}
.content-panel__check { color: var(--c-green-500); }
.content-panel__send-btn {
  background: var(--link);
  color: var(--c-white);
  border: 0;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.content-panel__send-btn:disabled {
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
  cursor: not-allowed;
}
.content-panel__send-btn[data-loading="true"] {
  cursor: progress;
  background: var(--link);
  color: var(--c-white);
  opacity: 0.9;
}
.content-panel__send-btn[data-loading="true"]::before {
  content: "";
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  margin-right: 0.5em;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.content-panel__output-area {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.content-panel__subtabs {
  display: flex;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
}
.content-panel__subtab {
  flex: 1;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 0;
  color: var(--text);
  font-weight: var(--fw-medium);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.content-panel__subtab--active {
  background: var(--tab-selected-bg);
  border-bottom-color: var(--tab-accent-line);
  font-weight: var(--fw-semibold);
}
.content-panel__print-btn {
  margin-left: auto;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
}
.content-panel__print-btn:hover,
.content-panel__print-btn:focus {
  color: var(--tab-accent-line);
  background: var(--surface);
  text-decoration: none;
  border-bottom-color: var(--border);
}
.content-panel__output { padding: var(--space-4); min-height: 240px; }
.content-panel__section {
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.content-panel__section--active { display: block; opacity: 1; }
.content-panel__placeholder { color: var(--text-muted); font-style: italic; }
/* m24_4b: KI-Disclaimer dezenter — kleiner + gedämpft, bleibt lesbar (EU AI Act) */
.ai-disclaimer {
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--text-muted);
  margin: 0;
}
.content-panel__feedback {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
}
.content-panel__feedback-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  line-height: 0;
  opacity: 0.6;
  cursor: not-allowed;
}
.content-panel__feedback-img { width: 24px; height: 24px; object-fit: contain; }

/* --- m24_5b: Vertiefen Frage-Form (Style-Radios + Additions) ------------- */
.question-form__choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 767px) {
  .question-form__choices { grid-template-columns: 1fr; }
}
.question-form__group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.question-form__group legend { padding: 0; }
.question-form__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--text);
  padding: var(--space-1) 0;
}
.question-form__option input[type="radio"],
.question-form__option input[type="checkbox"] { flex-shrink: 0; cursor: pointer; }
.question-form__option input:disabled { cursor: not-allowed; }
.question-form__option input:disabled ~ span { color: var(--text-muted); }
.content-panel__actions { display: flex; gap: var(--space-2); align-items: center; }

/* --- m24_5b: Vertiefen Frage-Antwort (Box folgt der Verstehen-Optik) ----- */
.question-answer { display: flex; flex-direction: column; gap: var(--space-2); }
.question-answer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.question-answer__print-btn {
  background: none;
  border: 0;
  padding: var(--space-1);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.question-answer__print-btn:hover,
.question-answer__print-btn:focus {
  background-color: var(--surface);
  color: var(--tab-accent-line);
  text-decoration: none;
}
.question-answer__print-btn i { width: 20px; height: 20px; }
.question-answer__box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.question-answer__text {
  padding: var(--space-4);
  min-height: 120px;
  white-space: pre-wrap;
  line-height: 1.6;
}
/* Dezenter Footer der Antwort-Box: trägt jetzt nur den KI-Disclaimer (m24_5b) */
.question-answer__feedback {
  padding: var(--space-2);
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
}

/* --- Notizen-Panel (rechte Spalte, unter der Tutor-Card) ----------------- */
.notes-panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.notes-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.notes-panel__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.notes-panel__actions { display: flex; gap: var(--space-1); }
.notes-panel__action {
  background: none;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}
.notes-panel__action:hover { background: var(--surface-muted); color: var(--text); }
.notes-panel__list { list-style: none; margin: 0; padding: 0; }
.notes-panel__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}
.notes-panel__checkbox { flex-shrink: 0; cursor: pointer; }
.notes-panel__open-btn {
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--link);
  text-decoration: none;
  font-size: var(--fs-sm);
  padding: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notes-panel__open-btn:hover { text-decoration: underline; }
.notes-panel__empty { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); font-style: italic; }

/* --- Post-it-Notiz-Modal (Patrick Hand via Google-Fonts in _base_v2) ----- */
.note-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
}
.note-modal[aria-hidden="false"] { display: flex; }
.note-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); }
.note-modal__card {
  position: relative;
  width: min(90%, 480px);
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--note-body-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-note);
  color: var(--note-text);
}
.note-modal__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--note-header-bg);
  padding: var(--space-4) var(--space-5) var(--space-3);
}
.note-modal__header-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: var(--fw-bold);
  color: var(--note-text);
}
.note-modal__print {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--note-text);
  opacity: 0.75;
  text-decoration: none;
}
.note-modal__print:hover { opacity: 1; }
.note-modal__print[hidden] { display: none; }
.note-modal__header-input::placeholder { color: rgba(53, 28, 117, 0.5); }
.note-modal__body { padding: var(--space-3) var(--space-5) var(--space-4); }
.note-modal__body-textarea {
  width: 100%;
  min-height: 200px;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 1.05rem;
  color: var(--note-text);
  resize: vertical;
  line-height: 1.5;
}
.note-modal__body-textarea::placeholder { color: rgba(53, 28, 117, 0.5); }
.note-modal__footer {
  padding: 0 var(--space-5) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-2);
}
.note-modal__meta {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  color: rgba(53, 28, 117, 0.65);
  line-height: 1.3;
}
.note-modal__meta-line { margin: 0; }
.note-modal__footer-actions { display: flex; gap: var(--space-2); align-items: center; }
.note-modal__btn {
  font-family: inherit;
  font-size: var(--fs-md);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
}
.note-modal__btn--cancel { background: transparent; color: var(--note-text); }
.note-modal__btn--cancel:hover { background: rgba(53, 28, 117, 0.1); }
.note-modal__btn--save { background: var(--note-text); color: var(--note-body-bg); }
.note-modal__btn--save:hover { background: #4d2da0; }
.note-modal__error {
  margin: 0 var(--space-5) var(--space-4);
  padding: var(--space-2);
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}

/* --- m24_4: Loading-Overlay (Anlage-Splash, aus main.css portiert) -------- */
.loading-overlay[hidden] { display: none !important; }
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.loading-overlay__box {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: min(480px, 90vw);
}
.loading-overlay__video {
  width: min(360px, 70vw);
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}
.loading-overlay__text { font-size: var(--fs-md); color: var(--text); text-align: center; margin: 0; }

/* --- m24_4: AI-Confirm-Modal (Datenschutzhinweis vor KI, aus main.css) ---- */
.modal-ai-confirm {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.modal-ai-confirm[hidden] { display: none; }
.modal-ai-confirm__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.modal-ai-confirm__dialog {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 820px;
  width: 100%;
  padding: var(--space-6);
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}
.modal-ai-confirm__image { width: 220px; height: auto; flex-shrink: 0; border-radius: var(--radius-md); }
.modal-ai-confirm__body { flex: 1; min-width: 0; }
.modal-ai-confirm__title {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  color: var(--c-red-500);
  margin: 0 0 var(--space-4) 0;
}
.modal-ai-confirm__body p { margin: 0 0 var(--space-2) 0; line-height: var(--lh-normal); }
.modal-ai-confirm__warn { color: var(--c-red-500); text-decoration: underline; font-style: normal; }
.modal-ai-confirm__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
@media (max-width: 700px) {
  .modal-ai-confirm__dialog { flex-direction: column; align-items: stretch; }
  .modal-ai-confirm__image { width: 50%; margin: 0 auto; }
}

/* --- m24_4: Selektion-Analyse-Modal (Markieren-und-Aktion, aus main.css) -- */
.modal-selection {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.modal-selection[hidden] { display: none; }
.modal-selection__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.modal-selection__dialog {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 760px;
  width: 100%;
  padding: var(--space-6);
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
}
.modal-selection__image { width: 220px; height: auto; flex-shrink: 0; border-radius: var(--radius-md); }
.modal-selection__body { flex: 1; min-width: 0; }
.modal-selection__title {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  color: var(--c-red-500);
  margin: 0 0 var(--space-4) 0;
}
.modal-selection__actions { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-4) 0; }
.modal-selection__option { display: flex; gap: var(--space-2); align-items: center; cursor: pointer; padding: var(--space-1) 0; font-size: var(--fs-md); }
.modal-selection__buttons { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
@media (max-width: 700px) {
  .modal-selection__dialog { flex-direction: column; align-items: stretch; }
  .modal-selection__image { width: 50%; margin: 0 auto; }
}

/* ==========================================================================
   m24_5e_a — Upload-Auswerteseite: token-basiert aus main.css portiert.
   (Sektions-Tabs nutzen die v2-Komponente .content-panel__subtab*; daher
   werden .upload-subtabs*/.upload-tab/.upload-tab--active NICHT portiert.)
   ========================================================================== */

/* --- Kopfzeile (Titel/Meta + Aktionen) ----------------------------------- */
.upload-detail__header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.upload-detail__header-text { flex: 1; min-width: 0; }
.upload-detail__title { font-size: 1.5rem; font-weight: var(--fw-semibold); margin: 0; color: var(--text); word-break: break-word; }
.upload-detail__meta { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--space-1) 0 0 0; }
.upload-detail__header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.upload-detail__image-btn { white-space: nowrap; flex-shrink: 0; }
.upload-detail__print-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--link);
  text-decoration: none;
}
.upload-detail__print-btn:hover { background: var(--surface); border-color: var(--link); }
.upload-detail__print-btn i { width: 18px; height: 18px; }

/* --- Inhalts-Zustände (Warte/Hinweis/Boxen) ------------------------------ */
.upload-tab__waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  text-align: center;
}
.upload-tab__waiting-text { color: var(--text-muted); font-size: var(--fs-md); line-height: 1.6; }
.upload-tab__placeholder { color: var(--text-muted); font-style: italic; padding: var(--space-6); text-align: center; }
.upload-tab__hint { color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--space-4); font-style: italic; padding: 0 var(--space-2); }

/* Gerendertes Markdown (Abschrift + Analyse-Sektionen) — gleiche Optik */
.upload-tab__transcript-rendered,
.upload-tab__analysis-rendered {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  line-height: 1.6;
  min-height: 300px;
  max-height: 600px;
  overflow-y: auto;
}
.upload-tab__transcript-rendered--locked { background: var(--surface-muted); }
.upload-tab__transcript-rendered p,
.upload-tab__analysis-rendered p { margin: 0 0 var(--space-2) 0; }
.upload-tab__transcript-rendered p:last-child,
.upload-tab__analysis-rendered p:last-child { margin-bottom: 0; }
.upload-tab__transcript-rendered ul, .upload-tab__transcript-rendered ol,
.upload-tab__analysis-rendered ul, .upload-tab__analysis-rendered ol { margin: 0 0 var(--space-2) var(--space-6); }
.upload-tab__analysis-rendered li { margin-bottom: var(--space-1); }
.upload-tab__transcript-rendered h1, .upload-tab__transcript-rendered h2,
.upload-tab__transcript-rendered h3, .upload-tab__transcript-rendered h4,
.upload-tab__analysis-rendered h1, .upload-tab__analysis-rendered h2,
.upload-tab__analysis-rendered h3, .upload-tab__analysis-rendered h4 {
  margin: var(--space-4) 0 var(--space-1) 0;
  color: var(--text);
  font-weight: var(--fw-semibold);
}
.upload-tab__transcript-rendered h1, .upload-tab__analysis-rendered h1 { font-size: 1.25rem; }
.upload-tab__transcript-rendered h2, .upload-tab__analysis-rendered h2 { font-size: 1.125rem; }
.upload-tab__transcript-rendered h3, .upload-tab__analysis-rendered h3 { font-size: 1rem; }
.upload-tab__transcript-rendered code,
.upload-tab__analysis-rendered code {
  background: var(--surface-muted);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.upload-tab__transcript-rendered pre,
.upload-tab__analysis-rendered pre {
  background: var(--surface-muted);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin: 0 0 var(--space-2) 0;
}
.upload-tab__transcript-rendered blockquote,
.upload-tab__analysis-rendered blockquote {
  border-left: 3px solid var(--border);
  padding-left: var(--space-4);
  margin: var(--space-2) 0;
  color: var(--text-muted);
}

/* --- Freigabe-Aktion + Status-Hinweise ----------------------------------- */
.upload-detail__release-action {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}
.upload-detail__release-btn { min-width: 180px; }
.upload-detail__analyzed-info,
.upload-detail__released-warning {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  line-height: 1.5;
}
.upload-detail__analyzed-info { color: var(--text); }
.upload-detail__released-warning { color: var(--text-muted); }
.upload-detail__analyzed-info p, .upload-detail__released-warning p { margin: 0; }

/* --- Selektions-Tooltip (alt, „Frage daraus stellen") -------------------- */
.selection-tooltip {
  position: absolute;
  z-index: 100;
  background: var(--link);
  color: var(--c-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 0;
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.selection-tooltip[hidden] { display: none; }
.selection-tooltip form { margin: 0; }
.selection-tooltip__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  color: var(--c-white);
  border: none;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font: inherit;
  border-radius: var(--radius-sm);
}
.selection-tooltip__btn:hover { background: rgba(255, 255, 255, 0.12); }
.selection-tooltip__btn i { width: 16px; height: 16px; }

/* --- Originalbild-Modal (v2-native, große Bild-Box) ---------------------- */
.modal__box--image {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal__image-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}
.modal__close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-1);
}
.modal__close-btn:hover { color: var(--text); }
.modal__image-body { padding: var(--space-2); overflow: auto; display: flex; align-items: center; justify-content: center; }
.upload-image-modal__img { max-width: 100%; max-height: 75vh; width: auto; height: auto; display: block; border-radius: var(--radius-sm); }
.upload-image-modal__error { padding: var(--space-6); color: var(--text-muted); font-style: italic; text-align: center; }

/* ==========================================================================
   m24_5e_b2 — Upload-Workflow-/Error-Modal (auf den JSON-Endpunkten).
   ========================================================================== */

.modal__box--upload { max-width: 520px; text-align: left; }
.modal__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
  margin: var(--space-3) 0 var(--space-1);
}
.modal__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  background: var(--surface);
  color: var(--text);
}
.modal__input[readonly] { background: var(--surface-muted); color: var(--text-muted); }
.upload-confirm__notice { margin-bottom: var(--space-3); }
.upload-confirm__status { font-size: var(--fs-sm); color: var(--text); margin: var(--space-3) 0 0; }
.upload-confirm__busy {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-style: italic;
}
.upload-error__msg {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-muted);
  border-left: 3px solid var(--c-red-500);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
}

/* --- DSGVO-Hinweis + wiederverwendbarer Tooltip (aus main.css portiert) --- */
.upload-disclaimer {
  background: var(--surface-muted);
  border-left: 3px solid var(--c-red-500);
  padding: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4) 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.upload-disclaimer p { margin: 0 0 var(--space-2) 0; }
.upload-disclaimer p:last-of-type { margin-bottom: var(--space-2); }
.upload-disclaimer__tooltip-line { margin-top: var(--space-3); }

.tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  cursor: help;
  outline: none;
}
.tooltip__trigger-text { text-decoration: underline dotted; text-underline-offset: 2px; color: var(--text); }
.tooltip__icon { color: var(--text-muted); display: inline-flex; align-items: center; }
.tooltip__bubble {
  position: absolute;
  margin-top: 0.5em;
  width: max-content;
  max-width: min(360px, 90vw);
  padding: 0.75em 1em;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  pointer-events: none;
  z-index: 1200;
  text-align: left;
}
.tooltip:hover .tooltip__bubble,
.tooltip:focus-within .tooltip__bubble,
.tooltip:focus .tooltip__bubble { opacity: 1; visibility: visible; pointer-events: auto; }
.tooltip__bubble p { margin: 0 0 0.5em 0; }
.tooltip__bubble p:last-child { margin-bottom: 0; }
.tooltip__bubble ul { margin: 0 0 0.5em 0; padding-left: 1.2em; }
.tooltip__bubble li { margin-bottom: 0.15em; }
.tooltip--bottom-start .tooltip__bubble { top: 100%; left: 0; }
.tooltip--bottom-end .tooltip__bubble { top: 100%; right: 0; left: auto; }
.tooltip--top-start .tooltip__bubble { bottom: 100%; left: 0; margin-top: 0; margin-bottom: 0.5em; }

/* ==========================================================================
   m24_6 — Merken-Panel (Mathe): Merken-eigene Klassen, die memorize_button.js /
   memorize_generate.js per Klasse/ID ansprechen. Token-basiert aus main.css.
   (Checkbox-Liste/Buttons/Panel nutzen die v2-Komponenten question-form__*/btn.)
   ========================================================================== */

.memorize-panel__needs-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* MP3-Player-Rahmen (Klassen werden vom JS beim Erzeugen neu gesetzt) */
.memorize-panel__audio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  font-size: var(--fs-sm);
  color: var(--text);
}
.memorize-panel__audio[hidden] { display: none; }
.memorize-panel__audio--failed { border-color: #e2b8b8; background: #fdf4f4; color: #8a3a3a; }
.memorize-panel__audio-label { color: var(--text); }
.memorize-panel__audio-player { width: 100%; display: block; }

/* Lernunterlagen-Bereich + gerendertes Markdown */
.memorize-panel__materials { display: flex; flex-direction: column; gap: var(--space-2); }
.memorize-panel__materials-header { display: flex; align-items: center; justify-content: space-between; }
.memorize-panel__materials-content {
  min-height: 300px;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  line-height: 1.6;
  color: var(--text);
}
.memorize-panel__materials-content p { margin: 0 0 var(--space-2) 0; }
.memorize-panel__materials-content p:last-child { margin-bottom: 0; }
.memorize-panel__materials-content ul,
.memorize-panel__materials-content ol { margin: 0 0 var(--space-2) var(--space-6); }
.memorize-panel__materials-content h1, .memorize-panel__materials-content h2,
.memorize-panel__materials-content h3, .memorize-panel__materials-content h4 {
  margin: var(--space-4) 0 var(--space-1) 0;
  color: var(--text);
  font-weight: var(--fw-semibold);
}
.memorize-panel__materials-content h1 { font-size: 1.25rem; }
.memorize-panel__materials-content h2 { font-size: 1.125rem; }
.memorize-panel__materials-content h3 { font-size: 1rem; }
.memorize-panel__materials-content code {
  background: var(--surface-muted);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.memorize-panel__materials-content pre {
  background: var(--surface-muted);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin: 0 0 var(--space-2) 0;
}
.memorize-panel__materials-placeholder { color: var(--text-muted); font-style: italic; }

/* Drucker-Button (JS togglet [hidden]) */
.memorize-panel__print-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--link);
  text-decoration: none;
  flex-shrink: 0;
}
.memorize-panel__print-btn:hover { background: var(--surface); border-color: var(--link); }
.memorize-panel__print-btn i { width: 18px; height: 18px; }
.memorize-panel__print-btn[hidden] { display: none; }

/* ==========================================================================
   m24_7a — Überprüfungs-Liste: check-list-Tabelle token-basiert aus check.css.
   Klassennamen bleiben (check_modal.js/check_delete.js koppeln daran);
   Header/Aktionen/Icon-Buttons sind durch das v2-Panel + .btn ersetzt.
   ========================================================================== */
.check-list__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.check-list__table th,
.check-list__table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.check-list__table th { font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; }
.check-list__table tbody tr:last-child td { border-bottom: 0; }
.check-list__table tbody tr:hover { background: var(--surface-muted); }
.check-list__col-select { width: 36px; text-align: center; }
.check-list__col-date { width: 110px; }
.check-list__col-status { width: 140px; }
.check-list__link { color: var(--link); text-decoration: none; }
.check-list__link:hover, .check-list__link:focus { text-decoration: none; color: var(--action-bg-hover); }
.check-list__status {
  display: inline-block;
  font-size: var(--fs-xs);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text-muted);
}
.check-list__status--open { color: var(--text-muted); }
.check-list__status--unanswered { color: #b45309; background: rgba(180, 83, 9, 0.08); }
.check-list__status--answered { color: #166534; background: rgba(22, 101, 52, 0.08); }
.check-list__empty { color: var(--text-muted); text-align: center; padding: var(--space-8) 0; font-style: italic; }

/* ==========================================================================
   m24_7b — Überprüfen Einzelaufgabe-Flow: .check-single*-Klassen token-basiert
   aus check.css (Klassennamen bleiben — check_single.js koppelt an die IDs;
   Buttons nutzen die v2-.btn-Komponente, sind hier nicht dupliziert).
   ========================================================================== */
.check-single { display: flex; flex-direction: column; gap: var(--space-6); }
.check-single__panel {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}
.check-single__panel--selection { background: var(--surface-muted); }
.check-single__panel--solution { background: var(--surface-muted); }
.check-single__heading { font-size: 1.05rem; font-weight: var(--fw-semibold); color: var(--text); margin: 0 0 var(--space-4) 0; }
.check-single__heading--secondary { margin-top: var(--space-5); }
.check-single__selection-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}
@media (max-width: 767px) { .check-single__selection-grid { grid-template-columns: 1fr; } }
.check-single__selection-col { display: flex; flex-direction: column; gap: var(--space-2); }
.check-single__radio { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; color: var(--text); }
.check-single__radio--disabled { color: var(--text-muted); cursor: not-allowed; }
.check-single__radio-note { font-size: 0.85em; color: var(--text-muted); }
.check-single__geometry-dropdown { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.35rem 0 0.5rem 1.85rem; }
.check-single__geometry-dropdown[hidden] { display: none; }
.check-single__geometry-label { font-size: 0.9em; color: var(--text-muted); }
.check-single__geometry-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  max-width: 22rem;
}
.check-single__selection-actions { display: flex; justify-content: flex-end; }
.check-single__question-body { color: var(--text); line-height: 1.55; }
.check-single__answer-textarea {
  width: 100%;
  min-height: 130px;
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
}
.check-single__answer-textarea[readonly] { background: var(--surface-muted); color: var(--text-muted); cursor: not-allowed; }
.check-single__answer-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-3); }
.check-single__solution-body { color: var(--text); line-height: 1.55; margin-bottom: var(--space-4); }
.check-single__solution-body:last-child { margin-bottom: 0; }
.check-single__question-body .katex, .check-single__question-body .katex-display,
.check-single__solution-body .katex, .check-single__solution-body .katex-display { font-size: 1.05em; }
.check-single__panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.check-single__panel-header .check-single__heading { margin: 0; }
.check-single__print-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--link);
  text-decoration: none;
  flex-shrink: 0;
}
.check-single__print-btn:hover, .check-single__print-btn:focus { background: var(--surface); border-color: var(--link); }
.check-single__print-btn i { width: 18px; height: 18px; }

/* m27_3b: Schaltbild inline im Frage-Panel */
.check-single__circuit {
  margin: var(--space-3) 0;
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}
.check-single__circuit svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 640px;
  margin: 0 auto;
  color: var(--text); /* stroke="currentColor" der Engine-SVGs */
}

/* Tipp-Modal + Diagramm-/Geometrie-Modal (aus check.css) */
#modal-hint .modal__box { max-width: 520px; }
.modal__prompt--hint { line-height: 1.55; }
.modal__prompt--hint .katex, .modal__prompt--hint .katex-display { font-size: 1.05em; }
.modal__box--diagram { max-width: min(90vw, 900px); max-height: 90vh; width: min(90vw, 900px); }
.modal__prompt--diagram {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: auto;
  max-height: 70vh;
}
.modal__prompt--diagram svg { max-width: 100%; height: auto; }

/* ==========================================================================
   m24_7c — Überprüfen Test/Prüfung-Zweig: .check-multi*-Klassen token-basiert
   aus check.css (Klassennamen bleiben — check_multi.js koppelt an IDs +
   .check-multi__answer-textarea; Buttons nutzen die v2-.btn-Komponente).
   ========================================================================== */
.check-multi { display: flex; flex-direction: column; gap: var(--space-6); }
.check-multi__panel {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}
.check-multi__panel--selection { background: var(--surface-muted); }
.check-multi__panel--actions { padding: var(--space-3) var(--space-4); }
.check-multi__heading { font-size: 1.05rem; font-weight: var(--fw-semibold); color: var(--text); margin: 0 0 var(--space-4) 0; }
.check-multi__selection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}
@media (max-width: 767px) { .check-multi__selection-grid { grid-template-columns: 1fr; } }
.check-multi__selection-col { display: flex; flex-direction: column; gap: var(--space-2); }
.check-multi__radio { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; color: var(--text); }
.check-multi__selection-actions { display: flex; justify-content: flex-end; }
.check-multi__item {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}
.check-multi__item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.check-multi__item-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); margin: var(--space-3) 0 var(--space-2) 0; }
.check-multi__item-header .check-multi__item-title { margin: 0; }
.check-multi__item-title--solution { margin-top: var(--space-4); }
.check-multi__item-body { color: var(--text); line-height: 1.55; margin-bottom: var(--space-3); }
.check-multi__answer-textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
}
.check-multi__answer-textarea[readonly] { background: var(--surface-muted); color: var(--text-muted); cursor: not-allowed; }
.check-multi__item-actions { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.check-multi__solution { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--border); }
.check-multi__solution-body { color: var(--text); line-height: 1.55; }
.check-multi__solution-body .katex, .check-multi__solution-body .katex-display,
.check-multi__item-body .katex, .check-multi__item-body .katex-display { font-size: 1.05em; }
.check-multi__reveal-actions { display: flex; justify-content: center; margin-top: var(--space-4); }
.check-multi__actions-row { display: flex; justify-content: flex-end; }
.check-multi__print-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
  color: var(--link);
  text-decoration: none;
  flex-shrink: 0;
}
.check-multi__print-btn:hover, .check-multi__print-btn:focus { background: var(--surface); border-color: var(--link); }
.check-multi__print-btn i { width: 18px; height: 18px; }

/* --- m24_11a: „Konto verwalten" — Sektions-Stapel + zweispaltige Sektion 1 --- */
.manage-section { margin-bottom: var(--space-6); }
.manage-section__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); margin: 0 0 var(--space-4); }
.manage-section__subtitle { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); margin: 0 0 var(--space-3); }
.manage-section__actions { margin-top: var(--space-4); }
.manage-count { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--space-3); }
.manage-hint { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

.manage-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .manage-split { grid-template-columns: 1fr; gap: var(--space-6); } }

/* hellgrauer Trenner zwischen den Sektionen (erweiterbarer Stapel) */
.manage-divider { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

/* aktives Fach in der Navigations-Tabelle hervorheben */
.data-table tr.is-active { background: var(--surface-muted); }
.data-table tr.is-active a { font-weight: var(--fw-semibold); }

/* schmale Aktions-Spalte (Stift) */
.data-table__action-col { width: 1%; text-align: right; white-space: nowrap; }
.data-table__action-col a { color: var(--text-muted); }
.data-table__action-col a:hover { color: var(--link); }
.data-table__action-col i { width: 16px; height: 16px; }

/* deaktivierter .btn als <span> (kein :disabled bei span) */
.btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* --- m24_11b: „Konto verwalten"-Dialoge (server-seitig inline, Token-Port der
   Alt-Dialog-Optik aus account.css; Buttons über die v2-.btn-Komponente). --- */
.manage-dialog {
  max-width: 520px;
  margin-top: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
}
.manage-dialog__label {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--text);
  margin: var(--space-4) 0 var(--space-1);
}
.manage-dialog__label:first-child { margin-top: 0; }
.manage-dialog__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}
.manage-dialog__input[readonly],
.manage-dialog__input[disabled] {
  background: var(--surface-muted);
  color: var(--text-muted);
  cursor: not-allowed;
}
.manage-dialog__hint { color: var(--c-amber-500); font-size: var(--fs-sm); margin: var(--space-1) 0 0; }
.manage-dialog__check { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); }
.manage-dialog__avatars {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.manage-dialog__avatar-option { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.manage-dialog__avatar-img {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.manage-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); }

/* Hinweis-Banner (Token-Port von .account-notice, amber) */
.manage-notice {
  background: var(--c-yellow-100);
  border: 1px solid var(--c-amber-500);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text);
}

/* --- m25_1: Sprachfach-Merken Lückentext + Sub-Nav (Token-Port aus main.css,
   Klassennamen 1:1 — viele werden von languages_memorize_*.js dynamisch gesetzt).
   languages-comprehension-panel* folgt in m25_2; bereits-v2 memorize-panel__
   needs-actions/audio*/materials* werden NICHT gedoppelt. ------------------- */

/* Sub-Navigation (link-basiert, Optik wie .deepen-subtabs, Namen behalten) */
.memorize-subtabs {
  display: flex;
  gap: var(--space-6);
  border-bottom: 2px solid var(--border);
  margin-bottom: var(--space-6);
}
.memorize-subtabs__tab {
  padding: var(--space-2) 0;
  text-decoration: none;
  color: var(--text);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-weight: var(--fw-medium);
  font-size: 0.9375rem;
}
a.memorize-subtabs__tab:hover,
a.memorize-subtabs__tab:focus { text-decoration: none; color: var(--tab-accent-line); }
.memorize-subtabs__tab--active {
  color: var(--tab-accent-line);
  border-bottom-color: var(--tab-accent-line);
  font-weight: var(--fw-semibold);
}
.memorize-subtabs__tab--placeholder { cursor: default; opacity: 0.45; }

/* Geteilter Steuerblock (mit Mathe-Merken, war noch nicht v2) */
.memorize-panel__needs {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.memorize-panel__needs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.memorize-panel__needs-col { display: flex; flex-direction: column; gap: var(--space-2); }

.memorize-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.4;
}
.memorize-checkbox input[type="checkbox"] { margin-top: 0.2rem; cursor: pointer; accent-color: var(--link); }
.memorize-checkbox input[type="checkbox"]:disabled { cursor: not-allowed; }
.memorize-checkbox input[type="checkbox"]:disabled + span { color: var(--text-muted); }

/* m25_1b: geteilte Button-Klasse (Template-„Erstellen" + JS-erzeugtes
   „Auflösen") auf die v2-.btn--primary-Optik (Tokens/Maße wie .btn). */
.memorize-panel__create-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--action-bg);
  color: var(--action-text);
  font: inherit;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, opacity 0.15s;
}
.memorize-panel__create-btn:hover:not(:disabled) { background: var(--action-bg-hover); }
.memorize-panel__create-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Lückentext-Panel (inkl. JS-dynamisch erzeugter Klassen) */
.languages-memorize-panel { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.languages-memorize-panel__group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.languages-memorize-panel__group:last-child { margin-bottom: 0; }
.languages-memorize-panel__group-title { font-size: 0.95rem; font-weight: var(--fw-semibold); margin: 0 0 var(--space-1) 0; color: var(--text); }
/* m25_1b: v2-Select-Optik (gerundet, Rahmen, eigener Caret statt nativ).
   Tokens wie die etablierten v2-Selects (.content-panel__field select). */
.languages-memorize-panel__select {
  width: 100%;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  color: var(--text);
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}
.languages-memorize-panel__select:focus { outline: none; border-color: var(--link); }

/* m25_1b: zweispaltiges Checkbox-Raster (Zeitformen 6 → 3+3, Varianten 3 → 1 Spalte) */
.memorize-checkbox-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  column-gap: var(--space-6);
  row-gap: var(--space-2);
}
.languages-memorize-panel__output-wrap { display: flex; flex-direction: column; gap: var(--space-2); }
.languages-memorize-panel__output-title { font-size: 1.05rem; font-weight: var(--fw-semibold); margin: 0; color: var(--text); }
.languages-memorize-panel__output {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  min-height: 8rem;
}
.languages-memorize-panel__output-placeholder { margin: 0; color: var(--text); opacity: 0.7; }
.languages-memorize-panel__count-row { margin-top: var(--space-4); }
.languages-memorize-panel__count { font-size: 0.9rem; color: var(--text); }
.languages-memorize-panel__count--warn { color: var(--c-red-500); font-weight: var(--fw-semibold); }
.languages-memorize-panel__exercise { display: flex; flex-direction: column; gap: var(--space-6); }
.languages-memorize-panel__sentence { display: flex; flex-direction: column; gap: var(--space-2); }
.languages-memorize-panel__sentence-text { margin: 0; color: var(--text); line-height: 1.6; }
.languages-memorize-panel__answer {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text);
  resize: vertical;
}
.languages-memorize-panel__solution { border-left: 3px solid var(--tab-accent-line); padding-left: var(--space-4); }
.languages-memorize-panel__solution-text { margin: 0; font-weight: var(--fw-semibold); color: var(--text); }
.languages-memorize-panel__explanation { margin: 0.25rem 0 0 0; font-size: 0.9rem; color: var(--text); opacity: 0.75; }
.languages-memorize-panel__resolve-row { margin-top: var(--space-4); }
.languages-memorize-panel__error { margin: 0; color: var(--c-red-500); font-weight: var(--fw-semibold); }

/* --- m25_2: Sprachfach-Merken Lese-/Hörverständnis — verständnis-spezifische
   Klassen (Token-Port aus main.css, Namen 1:1; viele von
   languages_comprehension_render.js dynamisch gesetzt). Geteilte
   languages-memorize-panel__output*/__answer/__solution*/__explanation/
   __resolve-row/__error (m25_1) werden NICHT gedoppelt. --------------------- */
.languages-comprehension-panel { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* Modus-Radios (name="mode": reading/listening) — v2-Optik, accent-color */
.languages-comprehension-panel__radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.4;
}
.languages-comprehension-panel__radio input[type="radio"] { cursor: pointer; accent-color: var(--link); }
.languages-comprehension-panel__radio input[type="radio"]:disabled { cursor: not-allowed; }
.languages-comprehension-panel__radio input[type="radio"]:disabled + span { opacity: 0.45; }

/* Ausgabe (Leseverständnis) */
.languages-comprehension-panel__exercise { display: flex; flex-direction: column; gap: var(--space-6); }
.languages-comprehension-panel__text {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  line-height: 1.6;
  color: var(--text);
}
.languages-comprehension-panel__text p { margin: 0 0 var(--space-4) 0; }
.languages-comprehension-panel__text p:last-child { margin-bottom: 0; }
.languages-comprehension-panel__question { display: flex; flex-direction: column; gap: var(--space-2); }
.languages-comprehension-panel__question-text { margin: 0; color: var(--text); line-height: 1.6; }

/* Audio-Player (Hörverständnis) */
.languages-comprehension-panel__audio {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.languages-comprehension-panel__audio audio { width: 100%; display: block; }

/* Zusätzliche Informationen */
.languages-comprehension-panel__additional {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.languages-comprehension-panel__additional-title { margin: 0 0 var(--space-2) 0; color: var(--text); }
.languages-comprehension-panel__additional-text { margin: 0; white-space: pre-wrap; line-height: 1.6; color: var(--text); }

/* --- m26_1c: Block „Übersetzungen und Erklärungen" (rechte Spalte, nur
   Sprachfach) — Optik analog .notes-panel, token-basiert. ----------------- */
.explanations-panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.explanations-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.explanations-panel__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.explanations-panel__actions { display: flex; gap: var(--space-1); }
.explanations-panel__action {
  background: none;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}
.explanations-panel__action:hover { background: var(--surface-muted); color: var(--text); }
.explanations-panel__list { list-style: none; margin: 0; padding: 0; }
.explanations-panel__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}
.explanations-panel__checkbox { flex-shrink: 0; cursor: pointer; }
.explanations-panel__open-btn {
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.explanations-panel__kind {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text-muted);
}
.explanations-panel__kind--translate { color: var(--link); }
.explanations-panel__kind--grammar { color: var(--c-amber-500); }
.explanations-panel__preview {
  color: var(--link);
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.explanations-panel__open-btn:hover .explanations-panel__preview { text-decoration: underline; }
.explanations-panel__empty { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); font-style: italic; }

/* Ergebnis-Overlay (m26_1c): breitere Dialog-Variante + lesbare Prosa fürs
   gerenderte result_html (Überschriften/Listen/Tabellen). */
.modal-selection__dialog--result { display: block; max-width: 720px; }
.selection-result__body {
  max-height: 70vh;
  overflow-y: auto;
  color: var(--text);
  line-height: 1.6;
}
.selection-result__body h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: var(--space-4) 0 var(--space-2); }
.selection-result__body h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: var(--space-3) 0 var(--space-1); }
.selection-result__body p { margin: 0 0 var(--space-3); }
.selection-result__body ul,
.selection-result__body ol { margin: 0 0 var(--space-3) var(--space-6); }
.selection-result__body li { margin: var(--space-1) 0; }
.selection-result__body table { border-collapse: collapse; margin: var(--space-3) 0; width: 100%; }
.selection-result__body th,
.selection-result__body td { border: 1px solid var(--border); padding: var(--space-1) var(--space-3); text-align: left; }
.selection-result__body th { background: var(--surface-muted); }
.selection-result__body code {
  background: var(--surface-muted);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-sm);
  font-size: 0.92em;
}

/* m26_1e — strukturierte Selektions-Ergebnisse (translate/grammar). */
.selection-result__section { margin-bottom: var(--space-4); }
.selection-result__section:last-child { margin-bottom: 0; }
.selection-result__heading {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-1);
}
.selection-result__list { margin: 0 0 0 var(--space-6); }
.selection-result__list li { margin: var(--space-1) 0; }

.selection-result__false-friend {
  border: 1px solid var(--c-amber-500);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
  background: var(--surface-muted);
}
.selection-result__ff-word { font-weight: var(--fw-semibold); margin: 0 0 var(--space-1); }
.selection-result__ff-wrong { color: var(--c-red-500); margin: 0 0 var(--space-1); }
.selection-result__ff-right { color: var(--c-green-500); margin: 0; }

.selection-result__example {
  border-left: 3px solid var(--border-strong);
  padding-left: var(--space-3);
  margin-top: var(--space-2);
}
.selection-result__ex-en { font-weight: var(--fw-medium); margin: 0 0 var(--space-1); }
.selection-result__ex-de { color: var(--text-muted); margin: 0; }

.selection-result__remember {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border-left: 4px solid var(--link);
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
.selection-result__remember-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--link);
}
.selection-result__remember p { margin: 0; }

.selection-result__notice {
  color: var(--text-muted);
  background: var(--surface-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: 0;
}

/* --- m28_1d Themenkompass: Leer-Zustand + Sektionen (reine Abstände/Typo,
   semantische Tokens, kein neues Layout-System) --- */
.content-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  color: var(--text-muted);
}
.compass-section {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.compass-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
/* m28_2h: Drucker-Icon rechtsbündig in der Sub-Tab-Leiste (Leiste ist bereits flex) */
.content-panel__subtabs { align-items: center; }
.compass-print-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  color: var(--text-muted);
  text-decoration: none;
}
.compass-print-link:hover { color: var(--text); }
.compass-section__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-2);
}
.compass-section__intro,
.compass-section__outro { margin: var(--space-2) 0; color: var(--text); line-height: var(--lh-normal); }
.compass-section__items { margin: var(--space-2) 0; padding-left: var(--space-4); }
.compass-section__item { margin: var(--space-1) 0; }
.compass-section__item > p { margin: 0; }
/* m28_2b: Voraussetzungen als Checkbox-Optionen + Wiederholung-Button */
.compass-repeat .compass-section__items,
.compass-explain .compass-section__items { padding-left: 0; }
.compass-option { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-1) 0; }
.compass-option__label > p { margin: 0; }
.compass-repeat .btn,
.compass-explain .btn { margin-top: var(--space-3); }

/* --- m29_3: Lernplan-Detail-Landkarte (tokenbasiert, kein neues Layout-System) --- */
/* m29_3a: zentrierter weißer Inhaltsbereich wie der Themenkompass (.detail-main-
   Breite + Surface-Box). Eigene Klasse, da .content-panel__output-area an die
   Sub-Tab-Hülle gebunden ist. */
.lp-panel {
  max-width: var(--detail-max-width);
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.lp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
}
.lp-meta__label { color: var(--text-muted); margin-right: var(--space-1); }
.lp-print { margin-left: auto; }
.lp-intro { margin-bottom: var(--space-6); line-height: var(--lh-normal); }
.lp-block {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.lp-block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.lp-block__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0 0 var(--space-2); }
.lp-block__intro, .lp-block__outro { margin: var(--space-2) 0; line-height: var(--lh-normal); }
.lp-items { margin: var(--space-3) 0; }
.lp-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}
.lp-item__choice { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.lp-item__status { white-space: nowrap; }
.lp-sep { color: var(--border-strong); margin-right: var(--space-2); }
.lp-item__muted { color: var(--text-muted); }
.lp-create-topic { margin-top: var(--space-4); }

/* --- m32_2: Prüfungssicherheit — Angleichung an v2-Vorbilder (nur Tokens) --- */

/* Intro-Panel wie .check-single__panel */
.exam-safety__intro-panel {
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-5);
}
.exam-safety__heading {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-4);
}
.exam-safety__lead {
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

/* Einleitungstext über der Aufgabensequenz */
.exam-safety__intro-text {
  margin-bottom: var(--space-5);
  line-height: var(--lh-normal);
}

/* Ein Aufgaben-Block wie .compass-section / .lp-block (Sequenz-Trennung) */
.exam-safety__task {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.exam-safety__task:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.exam-safety__task-goal {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-3);
}
.exam-safety__task-question {
  margin-bottom: var(--space-3);
  line-height: var(--lh-normal);
}

/* Textarea exakt wie .check-single__answer-textarea (min-height 130px wie Überprüfen) */
.exam-safety__task-input {
  width: 100%;
  min-height: 130px;
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
}

/* Button unter dem Feld (Abstand wie .check-single__answer-actions) */
.exam-safety__reveal-btn {
  margin-top: var(--space-3);
}

/* aufgedeckte Lösung */
.exam-safety__task-solution {
  margin-top: var(--space-4);
  line-height: var(--lh-normal);
}

/* --- m29_3b: Lernplan-Liste (Aktions-Spalte) + Neu-Formular (.lp-panel) --- */
.lp-list__actions-col { width: 1%; }
.lp-list__actions { text-align: right; }
.lp-list__row-icon {
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-1);
  display: inline-flex;
  align-items: center;
}
.lp-list__row-icon:hover { color: var(--text); }

.lp-form__notice {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.lp-form__field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.lp-form__field label { font-weight: var(--fw-medium); }
.lp-form__field input,
.lp-form__field select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.lp-form__actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); }

/* m47_3: Excel-Funktionsreferenz — deterministische Anzeige (an v2-Tokens
   gebunden: Sektionstrennung wie .compass-section, Tabellen wie .data-table,
   Code monospace ueber --font-mono). */
.excel-back { margin: 0 0 var(--space-4); }
.excel-section {
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
}
.excel-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.excel-section__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
}
.excel-section__text { margin: var(--space-2) 0; color: var(--text); line-height: var(--lh-normal); }
.excel-list { margin: var(--space-2) 0; padding-left: var(--space-4); }
.excel-list li { margin: var(--space-1) 0; line-height: var(--lh-normal); }
/* m48_5: Excel-Grid fuer typical_structure — bewusst Excel-getreu (Rohfarben/
   Calibri, ausdruecklich freigegeben; einzige Ausnahme vom Token-Prinzip). */
.excel-table { width: 100%; border-collapse: collapse; font-family: Calibri, Arial, sans-serif; font-size: 13px; color: #000; margin: var(--space-3) 0; }
.excel-table th, .excel-table td { border: 1px solid #d4d4d4; padding: 4px 8px; text-align: left; }
.excel-table th { background: #f2f2f2; text-align: center; font-weight: normal; } /* Rahmen A/B/C + Zeilennr. + Ecke */
.excel-table__headrow td { font-weight: bold; } /* getippte Kopfzeile (Zeile 1) */
.excel-example { margin: var(--space-3) 0; }
.excel-example__title { margin: 0 0 var(--space-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.excel-code {
  margin: var(--space-2) 0;
  padding: var(--space-3);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  white-space: pre-wrap;
  overflow-x: auto;
}
.excel-code code { font-family: inherit; }

/* m52_3a: Schaltzeichen im Bauteil-Ueberblick. Eigener, klein dimensionierter
   Wrapper statt .check-single__circuit -- die traegt die Schaltbilder im
   Ueberpruefen-Bereich (volle Breite, bordiert) und bleibt unangetastet.
   max-width ist der einzige Stellknopf fuer die Groesse. */
.bauteil-symbol { max-width: 160px; margin: 1.5rem auto; }
.bauteil-symbol svg { width: 100%; height: auto; display: block; }
.bauteil-picture { display: block; width: 100%; max-width: 30%; height: auto; margin: 1.5rem auto; }

/* m53_4: Deutsch, aufklappbare Hauptbereiche ------------------------------- */
/* Der Schalter soll aussehen wie ein Verweis in einer Tabellenzelle, also wie
   `.data-table a` (--link) mit dem Gewicht von `.cell-topic` (--fw-medium).
   m53_5: vollstaendiger Reset der Knopf-Darstellung. In den geladenen
   Stylesheets gibt es KEINE `button`-Regel -- die Kasten-Optik ist die
   UA-Voreinstellung des `<button>`, die hier restlos abgeraeumt wird
   (`appearance` samt Rundung und Schatten). Der Selektor ist auf `.data-table`
   verstaerkt, damit eine spaeter hinzukommende allgemeinere Knopf-Regel ihn
   nicht uebersteuert -- kein `!important`. */
.data-table .deutsch-area__toggle,
.deutsch-area__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  font: inherit;
  color: var(--link);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.data-table .deutsch-area__toggle:hover,
.deutsch-area__toggle:hover {
  color: var(--action-bg-hover);
}

.deutsch-area__caret {
  color: var(--border-strong);
}

/* Auf einer Tabellenzeile kann eine display-Regel das native `hidden`
   ueberstimmen -- deshalb explizit. */
.deutsch-area__panel[hidden] {
  display: none;
}

.deutsch-area__panel > td {
  padding: 0 0 0 var(--space-8);
  background: var(--surface-muted);
}

/* Gesperrter Sub-Tab. `.content-panel__subtab` setzt `color: var(--text)` und
   `cursor: pointer` explizit und ueberstimmt damit die UA-Darstellung eines
   disabled-Buttons -- ohne diese Regel saehe ein gesperrter Reiter aus wie ein
   offener. Werte gespiegelt von `.app-tabs__tab--disabled`.
   Wirkt auch auf die drei Platzhalter-Reiter in practice_detail.html. */
.content-panel__subtab:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* m53_5: Deutsch, Fliesstext der Themenseite.
   Die Huelle ist noetig, weil der Renderer nackte `<h2>` erzeugt und `<h2>` im
   Bestand zugleich die Panel-Ueberschrift traegt (`.panel__title`) -- ohne
   Eingrenzung griffe die Regel dorthin durch.
   Fliesstext ist `--fs-base` (15px); zwei Punkt darueber sind 17px, wofuer es
   keine Variable gibt (--fs-md 16, --fs-lg 18). Daher `calc`, relativ zur
   Umgebung, damit die Regel mitwaechst. */
.deutsch-prose h2 {
  font-size: calc(1em + 2px);
  font-weight: var(--fw-semibold);
}

/* m55_2: Aussagenpruefung -------------------------------------------------- */
/* Form, Abstaende und Rundungen abgeleitet von `.question-answer` (Z. 673-717).
   Farben aus dem Bestand: dieselben, die `.selection-result__ff-right` und
   `__ff-wrong` (Z. 1970-1971) verwenden — keine neuen Farbtokens.
   m55_2d: Namen an das englische Layout angeglichen. Der Absatztext hat keine
   eigene Lesebreite mehr und laeuft ueber die volle Breite seines Kastens;
   `--reading-max` bleibt fuer Aussage, Erklaerung und Kennwert. */
.statement-check {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.statement-check__block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.statement-check__passage {
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}

.statement-check__question {
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}

.statement-check__prompt {
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-2);
}

.statement-check__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
}
.statement-check__item + .statement-check__item {
  border-top: 1px solid var(--border);
}

.statement-check__statement {
  max-width: var(--reading-max);
  margin: 0;
}

.statement-check__choices {
  display: flex;
  gap: var(--space-2);
}

.statement-check__choice {
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.statement-check__choice:hover:not(:disabled) {
  border-color: var(--action-bg);
}
.statement-check__choice:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.statement-check__choice--correct {
  border-color: var(--c-green-500);
  color: var(--c-green-500);
  font-weight: var(--fw-semibold);
}
.statement-check__choice--incorrect {
  border-color: var(--c-red-500);
  color: var(--c-red-500);
  font-weight: var(--fw-semibold);
}

.statement-check__explanation {
  max-width: var(--reading-max);
  margin: var(--space-1) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.statement-check__explanation[hidden] {
  display: none;
}

/* Kennwert mit Erlaeuterung. `lp-meta` traegt das nicht: es ist eine
   waagerechte Leiste aus kurzen Label-Wert-Paaren mit `gap: var(--space-4)`,
   ein Erklaersatz von rund 150 Zeichen sprengt sie. */
.statement-check__meta {
  max-width: var(--reading-max);
  margin: var(--space-5) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* --- m56_6: Diktat & Hoerverstehen, Aufgabenseite. Genau zwei Klassen; jedes
   uebrige Element traegt eine Bestandsklasse. Werte gespiegelt von
   `.exam-safety__intro-text` (Z. 2129) und `.check-single__answer-actions`
   (Z. 1446) -- letztere ohne `justify-content: flex-end`, die Knoepfe stehen
   links wie der Erstellen-Knopf des Auswahlformulars. --------------------- */
.dictation-task__intro {
  margin: 0 0 var(--space-4);
  line-height: var(--lh-normal);
}
.dictation-task__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* m61_3: Suchergebnis-Zeile — Etikett, Titel, Fundstelle, Ausschnitt.
   Nur in partials/_search_results.html verwendet. Ausschliesslich vorhandene
   Tokens; das Cremegelb der Hervorhebung liegt seit m61_3a als semantisches
   Token --search-mark-bg vor. */
.search-result__label {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  margin-right: var(--space-2);
}
.search-result__title { font-weight: var(--fw-medium); }
.search-result__meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}
.search-result__snippet {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
  line-height: var(--lh-normal);
}
.search-result__mark {
  background: var(--search-mark-bg);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
}
.search-result__targets {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* --- m83_2: Fortschritts-Box (rechte Spalte, unter der Notizen-Box) ------- */
/* Rahmen, Radius, Innenmaß und Abstand nach oben wie `.notes-panel`, damit die
   Box in der Reihe sitzt. Neu ist nur die Zeile je Stufe (Bild, Text, Zeichen)
   und der ausgegraute Zustand -- der wechselt ausschliesslich die Textfarbe,
   das graue Bild bringt seinen Zustand selbst mit. */
.progress-box {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.progress-box__title { margin: 0 0 var(--space-2); font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.progress-box__list { list-style: none; margin: 0; padding: 0; }
.progress-box__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--fs-sm);
  color: var(--text);
}
.progress-box__step--offen { color: var(--text-muted); }
.progress-box__icon { width: 24px; height: 24px; flex-shrink: 0; }
.progress-box__label { flex: 1; }
.progress-box__status { width: 24px; height: 24px; flex-shrink: 0; }