/* ==========================================================================
   SPRiCH Klassenzimmer — klassenzimmer.css
   Laedt nach der Kinder-Theme-Kaskade (tokens -> base -> components), wenn
   vorhanden, und liest NUR deren Tokens (--c-*, --f-*, --r-*, --s*) — jeder
   mit Ersatzwert, damit das Klassenzimmer auch ohne Theme ruhig aussieht.

   Aufbau: Kopf + Video auf ZIB-Blau (wie die Seite), Arbeitsbereich auf
   Papier (wie .section--paper): dunkle Schrift auf hellem Grund fuer langes
   Lesen und Schreiben. Fokus: 2 px Orange mit innerem Tintenring, damit er
   auf Blau UND auf Papier sichtbar ist. Zustaende nie nur ueber Farbe:
   Symbol + Wort.
   ========================================================================== */

.kz {
  --kz-navy:       var(--c-blue-900, #1E2A54);
  --kz-navy-2:     var(--c-blue-800, #25325F);
  --kz-navy-3:     var(--c-blue-700, #2C3A6B);
  --kz-navy-line:  var(--c-blue-600, #3C4A80);
  --kz-light:      var(--c-light, #E8ECF4);
  --kz-light-mute: #AEB9D8;                 /* base.css --fg-muted (T054, 5.6:1 auf Karte) */
  --kz-white:      var(--c-white, #FCFCFC);
  --kz-paper:      var(--c-paper, #F5F1E8);
  --kz-paper-2:    #EFE9DB;
  --kz-card:       var(--c-paper-card, #FFFFFF);
  --kz-ink:        var(--c-ink, #10141C);
  --kz-ink-2:      var(--c-paper-ink, #48546B);
  --kz-muted:      #5E6879;                 /* base.css Papier --fg-muted (4.99:1) */
  --kz-line:       var(--c-paper-line, #DCD5C6);
  --kz-field:      #7A8191;                 /* Feldrahmen: 3.9:1 auf Weiss (Nicht-Text-Kontrast) */
  --kz-orange:     var(--c-orange, #FC8828);
  --kz-orange-soft:#FFEBD6;
  --kz-green:      var(--c-green, #3DDC97);
  --kz-ok:         #15784A;                 /* base.css Papier --ok (5.5:1 auf Weiss) */
  --kz-ok-soft:    #DFF6EA;
  --kz-red:        var(--c-red, #D01C20);
  --kz-err-soft:   #FFE6DC;
  --kz-info-soft:  #E9EEF8;
  --kz-font:       var(--f-display, "Source Sans 3", "Source Sans Pro", system-ui, sans-serif);
  --kz-font-ui:    var(--f-ui, "Inter", system-ui, -apple-system, sans-serif);
  --kz-r:          var(--r-control, 10px);
  --kz-r-card:     16px;
  --kz-pill:       var(--r-pill, 999px);
  --kz-s1: var(--s1, 8px);
  --kz-s2: var(--s2, 16px);
  --kz-s3: var(--s3, 24px);
  --kz-s4: var(--s4, 32px);
  --kz-top: var(--topbar-h, 0px);

  font-family: var(--kz-font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--kz-light);
  min-width: 0;
  overflow-wrap: break-word;
}
/* Resets mit :where() = Spezifitaet 0, damit jede Bausteinklasse gewinnt. */
:where(.kz) *, :where(.kz) *::before, :where(.kz) *::after { box-sizing: border-box; }
.kz [hidden] { display: none !important; }
:where(.kz) :where(p, h1, h2, h3, h4, figure, blockquote, ol, ul, fieldset) { margin: 0; }
:where(.kz) :where(ol, ul) { padding: 0; list-style: none; }
:where(.kz) fieldset { border: 0; padding: 0; min-width: 0; }
:where(.kz) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.kz .kz-icon { display: inline-block; flex: none; vertical-align: -0.18em; }

/* Fokus: Tintenring innen + Orange aussen — sichtbar auf Blau und Papier. */
.kz :focus { outline: none; }
.kz :focus-visible {
  outline: 2px solid var(--kz-orange);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--kz-ink);
}

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

/* ── Typo ──────────────────────────────────────────────────────────────── */
.kz-kicker {
  font-family: var(--kz-font-ui);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.33;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kz-orange);
}
.kz-title {
  font-family: var(--kz-font);
  font-weight: 900;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--kz-white);
  text-wrap: balance;
}
.kz-h2 {
  font-family: var(--kz-font);
  font-weight: 700;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.25;
  color: var(--kz-ink);
}
.kz-h3 {
  font-family: var(--kz-font-ui);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  color: var(--kz-ink);
  margin: var(--kz-s3) 0 var(--kz-s1);
}
.kz-lead { font-size: 17px; color: var(--kz-ink-2); max-width: 62ch; }
.kz-label {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--kz-font-ui);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  color: var(--kz-ink-2);
}
.kz-note { font-size: 15px; color: var(--kz-muted); }
.kz-note--warn { color: var(--kz-ink); background: var(--kz-orange-soft); border-radius: var(--kz-r); padding: 8px 12px; }
.kz-meta { font-family: var(--kz-font-ui); font-size: 13px; color: var(--kz-muted); }
.kz-prompt { font-weight: 600; font-size: 18px; color: var(--kz-ink); }
.kz-list { display: grid; gap: 4px; padding-left: 1.1em; list-style: disc; color: var(--kz-ink-2); }

/* ── Bedienelemente (wie .btn / .tab der Seite) ───────────────────────── */
.kz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; max-width: 100%;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--kz-pill);
  background: transparent;
  color: var(--kz-ink);
  font-family: var(--kz-font-ui);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.kz-btn--primary { background: var(--kz-orange); color: var(--kz-ink); }
.kz-btn--primary:hover { box-shadow: inset 0 0 0 999px rgba(16, 20, 28, .08); }
.kz-btn--ghost { border-color: var(--kz-ink-2); color: var(--kz-ink); background: var(--kz-card); }
.kz-btn--ghost:hover { border-color: var(--kz-ink); box-shadow: inset 0 0 0 999px rgba(16, 20, 28, .05); }
.kz-btn--quiet { color: var(--kz-ink-2); padding: 0 12px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* #21: icon-only quiet buttons get a visible outline at rest (no text to underline). */
.kz-btn--quiet[aria-label] { border-color: currentColor; min-width: 44px; padding: 0; }
.kz-btn--quiet:hover { color: var(--kz-ink); background: rgba(16, 20, 28, .06); }
.kz-btn--sm { min-height: 44px; padding: 0 14px; font-size: 14px; }
.kz-btn[disabled], .kz-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
/* #21: result line inside the pane that owns the action; reason under a blocked control. */
.kz-outcome { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--kz-line); border-left: 4px solid var(--kz-ok); border-radius: var(--kz-r); background: var(--kz-card); color: var(--kz-ink); font-size: 15px; }
.kz-outcome[data-tone="info"] { border-left-color: var(--kz-navy-line); }
.kz-outcome[data-tone="warn"] { border-left-color: var(--kz-orange); background: var(--kz-orange-soft); }
.kz-outcome__icon { display: inline-flex; color: var(--kz-ok); }
.kz-outcome[data-tone="info"] .kz-outcome__icon { color: var(--kz-navy); }
.kz-outcome[data-tone="warn"] .kz-outcome__icon { color: #9A4100; }
.kz-outcome__text { flex: 1 1 260px; min-width: 0; }
.kz-why { font-size: 14px; color: var(--kz-ink); background: var(--kz-paper-2); border-radius: var(--kz-r); padding: 6px 10px; }
.kz-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kz-row--end { justify-content: flex-end; }

.kz-input, .kz-select {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  background: var(--kz-card);
  border: 1.5px solid var(--kz-field);
  border-radius: var(--kz-r);
  color: var(--kz-ink);
  font-family: var(--kz-font);
  font-size: 18px;
  line-height: 1.45;
}
.kz-select { font-size: 16px; max-width: 100%; }
.kz-select[multiple] { min-height: 0; padding: 6px; }
textarea.kz-input { resize: vertical; min-height: 96px; }
.kz-input--long { min-height: 180px; }
.kz-input--num { width: 6.5em; }
.kz-input:hover, .kz-select:hover { border-color: var(--kz-ink-2); }
.kz-input:focus-visible, .kz-select:focus-visible { border-color: var(--kz-orange); }
.kz-input[aria-invalid="true"] { border-color: var(--kz-red); }
.kz-input[readonly] { background: var(--kz-paper-2); }
.kz-input::placeholder { color: var(--kz-muted); opacity: 1; }
.kz-field { display: grid; gap: 6px; min-width: 0; }
.kz-field--inline { grid-auto-flow: column; justify-content: start; align-items: center; gap: 12px; }
.kz-form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.kz-form-row > .kz-field { flex: 1 1 180px; }
.kz-check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 16px; color: var(--kz-ink); cursor: pointer; }
.kz-check input { width: 20px; height: 20px; accent-color: var(--kz-orange); flex: none; }
.kz-checks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.kz-fieldset { display: grid; gap: 4px; }

/* ── Zustaende ────────────────────────────────────────────────────────── */
.kz-state {
  display: grid; justify-items: center; gap: 10px;
  padding: var(--kz-s4) var(--kz-s2);
  text-align: center;
  color: var(--kz-ink-2);
}
.kz-state--loading { grid-auto-flow: column; justify-content: center; align-items: center; color: inherit; }
.kz-state__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--kz-paper-2); color: var(--kz-ink-2); }
.kz-state__title { font-weight: 700; font-size: 19px; color: var(--kz-ink); }
.kz-state__text { max-width: 46ch; }
.kz-spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid currentColor; border-right-color: transparent;
  animation: kz-spin .9s linear infinite;
}
@keyframes kz-spin { to { transform: rotate(360deg); } }

.kz-banner {
  margin-bottom: var(--kz-s2);
  padding: 10px 16px;
  border-radius: var(--kz-r);
  background: var(--kz-orange);
  color: var(--kz-ink);
  font-family: var(--kz-font-ui);
  font-weight: 600;
  font-size: 15px;
}

/* ── Klassenzimmer: Kopf ──────────────────────────────────────────────── */
.kz-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 12px var(--kz-s3);
  margin-bottom: var(--kz-s2);
}
.kz-head__main { display: grid; gap: 4px; min-width: 0; flex: 1 1 320px; }
.kz-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.kz-head .kz-meta { color: var(--kz-light-mute); display: inline-flex; align-items: center; gap: 4px; }
.kz-head .kz-tag { background: var(--kz-navy-line); color: var(--kz-white); border-color: transparent; }
.kz-live {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 26px; padding: 0 12px;
  border-radius: var(--kz-pill);
  font-family: var(--kz-font-ui); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--kz-navy-line); color: var(--kz-white);
}
.kz-live--live { background: var(--kz-red); }
.kz-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.kz-notice {
  display: flex; gap: 12px; align-items: flex-start;
  flex: 1 1 340px; max-width: 560px;
  padding: 12px 16px;
  border: 1px solid var(--kz-navy-line);
  border-radius: var(--kz-r-card);
  background: var(--kz-navy-2);
  color: var(--kz-light);
  font-size: 15px; line-height: 1.45;
}
.kz-notice > .kz-icon { color: var(--kz-orange); margin-top: 2px; }
.kz-notice[data-state="tr_off"] > .kz-icon,
.kz-notice[data-state="tr_consent_no"] > .kz-icon { color: var(--kz-light-mute); }
.kz-notice__title { font-weight: 700; color: var(--kz-white); }
.kz-notice__text { color: var(--kz-light); }
.kz-notice__icon { display: inline-flex; color: var(--kz-orange); margin-top: 2px; }
.kz-notice[data-state="tr_off"] .kz-notice__icon,
.kz-notice[data-state="tr_consent_no"] .kz-notice__icon,
.kz-notice[data-state="tr_consent_unknown"] .kz-notice__icon { color: var(--kz-light-mute); }
.kz-notice__body { display: grid; gap: 6px; min-width: 0; }

/* #23: eine Statuszeile + "Einstellungen" im Kopf; Dialog auf Papier. */
.kz-head__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; min-width: 0; }
.kz-trstatus {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--kz-navy-line); border-radius: var(--kz-pill);
  background: var(--kz-navy-2); color: var(--kz-light);
  font-family: var(--kz-font-ui); font-size: 14px; font-weight: 600; line-height: 1.25;
}
.kz-trstatus__icon { display: inline-flex; color: var(--kz-light-mute); }
.kz-trstatus[data-state="st_on_yes"] .kz-trstatus__icon,
.kz-trstatus[data-state="st_teacher_on"] .kz-trstatus__icon { color: var(--kz-green); }
.kz-dialog {
  width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 48px);
  padding: 0; border: 0; border-radius: var(--kz-r-card);
  background: var(--kz-paper); color: var(--kz-ink);
  box-shadow: 0 24px 64px rgba(11, 16, 34, .45);
}
.kz-dialog::backdrop { background: rgba(11, 16, 34, .6); }
.kz-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--kz-line); }
.kz-dialog__title { font-family: var(--kz-font-ui); font-size: 20px; font-weight: 700; color: var(--kz-ink); }
.kz-settings__section { display: grid; gap: 10px; padding: 16px 20px; }
.kz-settings__section + .kz-settings__section, .kz-settings__sections > .kz-settings__section { border-top: 1px solid var(--kz-line); }
.kz-settings__state { color: var(--kz-ink-2); }
.kz-settings .kz-btn--quiet { color: var(--kz-ink); }
.kz-switch { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--kz-ink); cursor: pointer; }
.kz-switch__box { width: 22px; height: 22px; margin: 0; accent-color: var(--kz-orange); flex: none; }
.kz-consent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--kz-ink); }
.kz-consent-row > .kz-icon { color: var(--kz-ok); }

/* Einwilligung: Haekchen + woertlicher Text als Beschriftung (Nachweis). */
.kz-consent { display: grid; gap: 8px; min-width: 0; }
.kz-consent__state { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; }
.kz-consent__state .kz-icon { margin-top: 3px; }
.kz-consent__hint { font-family: var(--kz-font-ui); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.kz-consent__label {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 10px 12px;
  border-radius: var(--kz-r);
  cursor: pointer;
  font-size: 14px; line-height: 1.5;
}
.kz-consent__box { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--kz-orange); cursor: pointer; }
.kz-consent__box:disabled { cursor: progress; }
.kz-consent__out { font-size: 14px; font-weight: 600; }
.kz-consent__out:empty { display: none; }
.kz-consent__out[data-state="error"] { padding: 6px 10px; border-radius: 8px; background: var(--kz-orange); color: var(--kz-ink); }
.kz-consent[aria-busy="true"] .kz-consent__label { opacity: .75; }
/* auf Blau (Kopf) */
.kz-consent--notice .kz-consent__state { color: var(--kz-white); }
.kz-consent--notice[data-consent="yes"] .kz-consent__state .kz-icon { color: var(--kz-green); }
.kz-consent--notice .kz-consent__hint { color: var(--kz-orange); }
.kz-consent--notice .kz-consent__label { background: var(--kz-navy); border: 1px solid var(--kz-navy-line); color: var(--kz-light); }
.kz-consent--notice .kz-consent__label:hover { border-color: var(--kz-light-mute); }
.kz-consent--notice .kz-consent__out[data-state="ok"] { color: var(--kz-green); }
/* auf Papier (eigenstaendige Seiten) */
.kz-consent--card .kz-consent__state { color: var(--kz-ink); }
.kz-consent--card[data-consent="yes"] .kz-consent__state .kz-icon { color: var(--kz-ok); }
.kz-consent--card .kz-consent__hint { color: var(--kz-ink-2); }
.kz-consent--card .kz-consent__label { background: var(--kz-paper); border: 1px solid var(--kz-field); color: var(--kz-ink); }
.kz-consent--card .kz-consent__out[data-state="ok"] { color: var(--kz-ok); }
.kz-consent__more { display: none; justify-self: start; }
.kz-consent--notice .kz-consent__more { color: var(--kz-light); }
.kz-consent-host:empty { display: none; }
.kz-consent-host { margin-bottom: var(--kz-s2); }
.kz-consent-card { display: grid; gap: 10px; }
.kz-consent-card__title { margin: 0; display: flex; align-items: center; gap: 6px; }

/* ── Klassenzimmer: Raster ────────────────────────────────────────────── */
/* Breite (#7): Seitenvorlagen mit schmaler Inhaltsspalte (sprich-child: 464 px) ignorieren `alignwide`.
   Die Wurzel bricht deshalb selbst aus der Spalte aus – zentriert, höchstens 1200 px, 20 px Rand. In Themes,
   die alignwide schon breit machen, ändert sich nichts (Mitte bleibt Mitte). */
.kz-root.alignwide {
  width: min(1760px, calc(100vw - 40px));
  max-width: none;
  margin-left: calc(50% - min(880px, calc(50vw - 20px)));
  margin-right: 0;
}

/* Seiten mit Klassenzimmer-Shortcodes (#20, body.kz-page aus includes/frontend.php):
   die Seite beginnt kompakt und das Klassenzimmer nutzt die ganze Inhaltsbreite.
   Nur diese Seiten — alle anderen Seiten des Themes bleiben unverändert. */
body.kz-page .k-page { padding-block: 12px var(--kz-page-bottom, 40px); }
body.kz-page .k-page__wrap {
  max-width: 2000px;
  padding-inline: clamp(12px, 1.6vw, 28px);
}
body.kz-page .k-page__title { font-size: clamp(24px, 2.2vw, 32px); margin-bottom: 12px; }
body.kz-page .k-page__body > * + * { margin-top: 20px; }
/* Das Klassenzimmer bringt seine eigene Überschrift (h1) mit: der Seitentitel fiele doppelt aus. */
body.kz-page--classroom .k-page__title { display: none; }
body.kz-page--classroom .k-page__body { margin-top: 0; }
/* Abstand zwischen Kopfzeile und Inhalt (blockGap der Vorlage) entfällt hier; main hält die Höhe des fixierten Kopfs. */
body.kz-page main#inhalt { margin-top: 0; }
body.kz-page .kz-root.alignwide { width: auto; margin-left: 0; margin-right: 0; }
/* Kopf kompakt: Titelblock so breit wie nötig, der Hinweis (mit Einwilligung) nimmt den Rest der Zeile
   statt in 560 px hoch zu wachsen. */
body.kz-page .kz-head__main { flex: 0 1 auto; }
body.kz-page .kz-notice { flex: 1 1 420px; max-width: 920px; }
/* Eigenständige Bausteine (Meine Fehler, Lernkarte) unter dem Klassenzimmer: volle Breite,
   Fließtext bleibt lesbar schmal. */
body.kz-page .kz-standalone .kz-consent-card,
body.kz-page .kz-standalone .kz-lead { max-width: 72ch; }
/* Zwei Spalten nur, wenn das Klassenzimmer selbst breit genug ist (nicht das Fenster). */
.kz-app { container: kzapp / inline-size; }
.kz-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kz-s3);
  align-items: start;
}
@container kzapp (min-width: 820px) {
  .kz-grid { grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); gap: 20px; }
}
/* Breite Bildschirme: das Video bekommt mindestens die Hälfte (#20). */
@container kzapp (min-width: 1100px) {
  .kz-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container kzapp (min-width: 1600px) {
  .kz-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.kz-video {
  position: sticky;
  top: calc(var(--kz-top) + 16px);
  z-index: 3;
  display: grid;
  border: 1px solid var(--kz-navy-line);
  border-radius: var(--kz-r-card);
  background: var(--kz-navy-2);
  overflow: hidden;
  min-width: 0;
}
.kz-video__bar {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 4px 8px 4px 14px;
  color: var(--kz-light);
  font-family: var(--kz-font-ui); font-size: 13px; font-weight: 600;
}
.kz-video__state { flex: 1; min-width: 0; color: var(--kz-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-video__size { display: none; color: var(--kz-light); }
.kz-video__size:hover { color: var(--kz-white); background: rgba(255, 255, 255, .08); }
.kz-video__stage {
  position: relative;
  height: clamp(360px, calc(100dvh - var(--kz-top) - 110px), 780px);
  height: clamp(360px, min(calc(100dvh - var(--kz-top) - 96px), 44cqi), 860px);
  background: #0B1022;
  transition: height .2s ease;
}
.kz-video__frame, .kz-video__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.kz-video__overlay {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: var(--kz-s3);
  background: rgba(11, 16, 34, .92);
  color: var(--kz-light);
  text-align: center;
}

.kz-work {
  min-width: 0;
  padding: 20px clamp(16px, 1.6vw, 24px);
  border-radius: var(--kz-r-card);
  background: var(--kz-paper);
  color: var(--kz-ink-2);
}
.kz-panel { min-width: 0; }
.kz-panel:focus-visible { box-shadow: none; outline-offset: 6px; }
.kz-panel__inner { display: grid; gap: var(--kz-s2); min-width: 0; }

/* Reiter (wie .tabs/.tab der Seite, auf Papier) */
.kz-tabs, .kz-subtabs {
  display: flex; gap: 4px;
  padding: 5px;
  margin-bottom: var(--kz-s2);
  background: var(--kz-card);
  border: 1px solid var(--kz-line);
  border-radius: calc(var(--kz-r) + 5px);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.kz-tabs::-webkit-scrollbar, .kz-subtabs::-webkit-scrollbar { display: none; }
.kz-tab, .kz-subtab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1 0 auto;
  min-height: 44px; padding: 0 16px;
  border: 0; border-radius: var(--kz-r);
  background: transparent;
  color: var(--kz-ink-2);
  font-family: var(--kz-font-ui); font-weight: 600; font-size: 15px; line-height: 1;
  white-space: nowrap; cursor: pointer;
}
.kz-subtab { flex: 0 0 auto; min-height: 44px; font-size: 14px; padding: 0 12px; }
.kz-tab:hover, .kz-subtab:hover { color: var(--kz-ink); background: var(--kz-paper-2); }
.kz-tab[aria-selected="true"], .kz-subtab[aria-selected="true"] { background: var(--kz-orange); color: var(--kz-ink); }
.kz-subtabs { margin-bottom: var(--kz-s2); background: var(--kz-paper-2); border-color: transparent; }
.kz-count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--kz-pill);
  background: var(--kz-ink); color: var(--kz-white);
  font-size: 12px; font-weight: 700;
}

/* Nachrichten der Lehrkraft */
.kz-news { display: grid; gap: 8px; margin-bottom: var(--kz-s2); }
.kz-news__item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 8px 12px 16px;
  border-radius: var(--kz-r-card);
  background: var(--kz-navy);
  color: var(--kz-light);
}
.kz-news__item > .kz-icon { color: var(--kz-orange); margin-top: 3px; }
.kz-news__body { flex: 1; min-width: 0; }
.kz-news__label { font-family: var(--kz-font-ui); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kz-orange); }
.kz-news__label .kz-meta { color: var(--kz-light-mute); letter-spacing: 0; text-transform: none; font-weight: 500; }
.kz-news__text { color: var(--kz-white); white-space: pre-line; }
.kz-news .kz-btn--quiet { color: var(--kz-light); }
.kz-news .kz-btn--quiet:hover { color: var(--kz-white); background: rgba(255, 255, 255, .08); }
/* #22: nur die neueste Ansage, auf zwei Zeilen gekuerzt; "mehr" klappt auf. */
.kz-news { margin-bottom: 8px; }
.kz-news .kz-news__item { align-items: center; gap: 10px; padding: 4px 6px 4px 14px; }
.kz-news__label { line-height: 1.25; }
.kz-news .kz-news__text {
  font-size: 16px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kz-news[data-expanded="true"] .kz-news__text { display: block; overflow: visible; }
.kz-news[data-expanded="true"] .kz-news__item { align-items: flex-start; }
.kz-news__actions { display: flex; align-items: center; gap: 4px; flex: none; }
.kz-news .kz-news__more { min-height: 44px; border-color: var(--kz-light-mute); font-size: 14px; }
.kz-news .kz-news__close { min-height: 44px; min-width: 44px; padding: 0; }
.kz-newslist { display: grid; gap: 10px; }
.kz-newslist__item { padding: 12px 16px; border: 1px solid var(--kz-line); border-left: 4px solid var(--kz-orange); border-radius: 12px; background: var(--kz-card); color: var(--kz-ink); }
.kz-newslist__item[data-audience="group"], .kz-newslist__item[data-audience="users"] { border-left-color: var(--kz-navy-line); }
.kz-newslist .kz-news__label { color: #9A4100; }
.kz-newslist .kz-news__label .kz-meta { color: var(--kz-muted); }
.kz-newslist__text { white-space: pre-line; margin-top: 2px; }
.kz-kind { color: var(--kz-ink-2); }
.kz-kind strong { color: var(--kz-ink); }
.kz-actionhelp { font-size: 15px; }

/* ── Abschnitte, Karten ───────────────────────────────────────────────── */
.kz-stack { display: grid; gap: var(--kz-s2); min-width: 0; }
.kz-section { display: grid; gap: 12px; min-width: 0; }
.kz-section + .kz-section { margin-top: var(--kz-s3); }
.kz-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.kz-intro { display: grid; gap: 6px; }
.kz-done > .kz-summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-family: var(--kz-font-ui); font-weight: 600; font-size: 16px; color: var(--kz-ink);
}
.kz-done > .kz-summary::-webkit-details-marker { display: none; }
.kz-done > .kz-summary::before { content: "▸"; color: var(--kz-ink-2); transition: transform .15s ease; }
.kz-done[open] > .kz-summary::before { transform: rotate(90deg); }
.kz-done > .kz-stack { margin-top: 8px; }

.kz-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--kz-line);
  border-radius: var(--kz-r-card);
  background: var(--kz-card);
  color: var(--kz-ink-2);
}
.kz-tag {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 24px; padding: 0 10px;
  border: 1px solid var(--kz-line);
  border-radius: var(--kz-pill);
  background: var(--kz-paper);
  color: var(--kz-ink);
  font-family: var(--kz-font-ui); font-size: 12px; font-weight: 600; line-height: 1;
  white-space: nowrap;
}
.kz-tag--own { background: var(--kz-navy); border-color: var(--kz-navy); color: var(--kz-white); }
.kz-tag--warn { background: var(--kz-orange-soft); border-color: var(--kz-orange); }
.kz-pill {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 24px; padding: 0 10px;
  border-radius: var(--kz-pill);
  background: var(--kz-paper-2); color: var(--kz-ink);
  font-family: var(--kz-font-ui); font-size: 12px; font-weight: 700;
}
.kz-pill[data-status="assigned"] { background: var(--kz-orange); }
.kz-pill[data-status="done"] { background: var(--kz-ok-soft); color: var(--kz-ok); }
.kz-pill[data-status="homework"] { background: var(--kz-info-soft); }

/* Aufgabe */
.kz-task { display: grid; gap: var(--kz-s2); }
.kz-task__head { display: grid; gap: 8px; }
.kz-task__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.kz-task__title { font-family: var(--kz-font-ui); font-weight: 600; font-size: 19px; line-height: 1.35; color: var(--kz-ink); }
.kz-task__instr { color: var(--kz-ink-2); }
.kz-task__body { min-width: 0; }
.kz-task__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--kz-line);
}
.kz-task__metas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.kz-task[data-status="done"] { background: #FBFAF6; }
.kz-task[aria-busy="true"] .kz-task__body { opacity: .7; }
.kz-save { font-family: var(--kz-font-ui); font-size: 13px; color: var(--kz-muted); }
.kz-save[data-state="saved"]::before { content: "✓ "; color: var(--kz-ok); }
.kz-save[data-state="error"] { color: var(--kz-ink); }
.kz-ex { display: grid; gap: 12px; min-width: 0; }
/* Leere Platzhalter (Tipps, Ergebnis, Status) erzeugen keine Rasterluecke. */
.kz-task > :empty, .kz-mistake > :empty { display: none; }

/* Fehlerstelle: Markierung + Wellenlinie (nie korrigiert) */
.kz-err {
  background: var(--kz-err-soft);
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--kz-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
  border-radius: 3px;
  padding: 0 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.kz-err--solved {
  background: var(--kz-ok-soft);
  text-decoration-style: solid;
  text-decoration-color: var(--kz-ok);
}
@media (forced-colors: active) {
  .kz-err { text-decoration-color: Highlight; background: Mark; color: MarkText; }
}

.kz-said { display: grid; gap: 6px; }
.kz-said__label { display: flex; align-items: center; gap: 6px; font-family: var(--kz-font-ui); font-size: 13px; font-weight: 600; color: var(--kz-ink-2); }
.kz-said__text {
  margin: 0;
  padding: 14px 18px;
  border-left: 4px solid var(--kz-navy);
  border-radius: 0 var(--kz-r) var(--kz-r) 0;
  background: var(--kz-paper);
  color: var(--kz-ink);
  font-size: 20px;
  line-height: 1.75;
}

/* Lueckentext */
.kz-gaptext { font-size: 19px; line-height: 2.3; color: var(--kz-ink); white-space: pre-line; }
.kz-gap { display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%; vertical-align: baseline; white-space: nowrap; }
.kz-gap__input {
  min-width: 4.5em; max-width: 100%;
  min-height: 40px;
  padding: 2px 8px;
  border: 1.5px solid var(--kz-field);
  border-bottom-width: 3px;
  border-radius: 8px 8px 4px 4px;
  background: var(--kz-card);
  color: var(--kz-ink);
  font-family: var(--kz-font);
  font-size: 19px;
  line-height: 1.4;
}
.kz-gap__base { font-size: 15px; color: var(--kz-muted); }
.kz-gap__mark { display: inline-flex; }
.kz-gap[data-state="correct"] .kz-gap__input { border-color: var(--kz-ok); background: var(--kz-ok-soft); }
.kz-gap[data-state="correct"] .kz-gap__mark { color: var(--kz-ok); }
.kz-gap[data-state="almost"] .kz-gap__input { border-color: var(--kz-orange); background: var(--kz-orange-soft); }
.kz-gap[data-state="wrong"] .kz-gap__input { border-color: var(--kz-red); }
.kz-gap[data-state="wrong"] .kz-gap__mark { color: var(--kz-red); }

/* Woerter ordnen */
.kz-wo__answer, .kz-wo__bank { display: flex; flex-wrap: wrap; gap: 8px; min-height: 64px; padding: 10px; border-radius: var(--kz-r); }
.kz-wo__answer { border: 2px dashed var(--kz-field); background: var(--kz-paper); }
.kz-wo__bank { background: var(--kz-paper-2); }
.kz-ex--wo[data-state="correct"] .kz-wo__answer { border-style: solid; border-color: var(--kz-ok); background: var(--kz-ok-soft); }
.kz-wo__placeholder { align-self: center; color: var(--kz-muted); font-size: 15px; }
.kz-wo__preview { font-size: 19px; color: var(--kz-ink); font-weight: 600; }
.kz-token {
  min-height: 44px; padding: 6px 14px;
  border: 1.5px solid var(--kz-ink-2);
  border-radius: var(--kz-r);
  background: var(--kz-card);
  color: var(--kz-ink);
  font-family: var(--kz-font);
  font-size: 18px; font-weight: 600; line-height: 1.2;
  cursor: pointer;
}
.kz-token:hover { background: var(--kz-orange-soft); border-color: var(--kz-ink); }
.kz-token--placed { background: var(--kz-navy); border-color: var(--kz-navy); color: var(--kz-white); }
.kz-token--placed:hover { background: var(--kz-navy-3); }
.kz-token[disabled] { cursor: default; }

/* Auswahl */
.kz-options { display: grid; gap: 8px; }
.kz-option {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 10px 14px;
  border: 1.5px solid var(--kz-field);
  border-radius: var(--kz-r);
  background: var(--kz-card);
  color: var(--kz-ink);
  font-size: 18px;
  cursor: pointer;
}
.kz-option input { width: 20px; height: 20px; flex: none; accent-color: var(--kz-orange); }
.kz-option:hover { border-color: var(--kz-ink); }
.kz-option:has(input:checked) { border-color: var(--kz-orange); background: var(--kz-orange-soft); }
.kz-option[data-state="correct"] { border-color: var(--kz-ok); background: var(--kz-ok-soft); }
.kz-option[data-state="wrong"] { border-color: var(--kz-red); }
.kz-option:has(input:focus-visible) { outline: 2px solid var(--kz-orange); outline-offset: 2px; box-shadow: 0 0 0 2px var(--kz-ink); }
.kz-option input:focus-visible { outline: none; box-shadow: none; }

/* Woerter zuordnen */
.kz-vm { display: grid; gap: 8px; }
.kz-vm__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: center;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--kz-line);
  border-radius: var(--kz-r);
  background: var(--kz-paper);
}
.kz-vm__de { font-weight: 600; font-size: 18px; color: var(--kz-ink); }
.kz-vm__row[data-state="correct"] { border-color: var(--kz-ok); background: var(--kz-ok-soft); }
.kz-vm__row[data-state="wrong"] { border-color: var(--kz-red); background: var(--kz-card); }

/* Schreiben */
.kz-context { padding: 12px 16px; border-radius: var(--kz-r); background: var(--kz-info-soft); }
.kz-context__label { font-family: var(--kz-font-ui); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kz-ink-2); }
.kz-context__text { color: var(--kz-ink); }
.kz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kz-chip {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 30px; padding: 2px 12px;
  border: 1px solid var(--kz-field);
  border-radius: var(--kz-pill);
  background: var(--kz-card);
  color: var(--kz-ink);
  font-size: 15px;
}
.kz-chip[data-used="true"] { border-color: var(--kz-ok); background: var(--kz-ok-soft); color: var(--kz-ok); font-weight: 600; }
.kz-chip__icon:empty { display: none; }
.kz-chip--focus { border-color: var(--kz-orange); background: var(--kz-orange-soft); }
.kz-chip[data-away="true"] { border-style: dashed; color: var(--kz-ink-2); }
.kz-chip__note { color: var(--kz-muted); font-size: 13px; }
.kz-counter { font-family: var(--kz-font-ui); font-size: 13px; color: var(--kz-muted); text-align: right; }
.kz-counter[data-state="ok"] { color: var(--kz-ok); }
.kz-counter[data-state="ok"]::before { content: "✓ "; }
.kz-counter[data-state="over"] { color: var(--kz-ink); background: var(--kz-orange-soft); border-radius: 6px; padding: 2px 8px; justify-self: end; }
.kz-wfb { padding: 16px; border-radius: var(--kz-r); background: var(--kz-paper); border: 1px solid var(--kz-line); }
.kz-wfb__inner { display: grid; gap: 10px; }
.kz-marked { font-size: 18px; line-height: 1.9; color: var(--kz-ink); white-space: pre-wrap; }
.kz-markwrap { position: relative; display: inline; }
.kz-markbtn {
  display: inline; padding: 0; margin: 0;
  border: 0; background: none;
  font: inherit; color: inherit; text-align: inherit; line-height: inherit;
  cursor: pointer;
}
.kz-markbtn:hover .kz-err { background: var(--kz-orange-soft); }
.kz-markbtn__n {
  font-family: var(--kz-font-ui); font-size: 11px; font-weight: 700;
  color: var(--kz-red); margin-left: 1px;
}
.kz-pop {
  position: absolute; left: 0; top: calc(100% + 6px);
  z-index: 30;
  width: max-content; max-width: min(300px, 78vw);
  transform: translateX(var(--kz-pop-shift, 0));
  padding: 10px 14px;
  border-radius: var(--kz-r);
  background: var(--kz-ink);
  color: var(--kz-white);
  font-size: 15px; line-height: 1.45; white-space: normal;
  box-shadow: 0 8px 24px rgba(16, 20, 28, .25);
}
.kz-markhints { display: grid; gap: 6px; counter-reset: kzmark; }
.kz-markhints__item { position: relative; padding-left: 30px; color: var(--kz-ink-2); font-size: 16px; }
.kz-markhints__item::before {
  content: attr(data-n);
  position: absolute; left: 0; top: 1px;
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--kz-err-soft); color: var(--kz-red);
  font-family: var(--kz-font-ui); font-size: 12px; font-weight: 700;
}
.kz-markhints__quote { font-weight: 600; color: var(--kz-ink); }

/* Rueckmeldung */
.kz-result {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border: 1.5px solid var(--kz-line);
  border-radius: var(--kz-r);
  background: var(--kz-paper);
  color: var(--kz-ink);
}
.kz-result__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--kz-card); }
.kz-result__body { display: grid; gap: 6px; min-width: 0; }
.kz-result__msg { font-weight: 600; font-size: 17px; }
.kz-result__meta { font-size: 15px; color: var(--kz-ink-2); }
.kz-result__hint { font-size: 16px; }
.kz-result__praise { display: flex; align-items: flex-start; gap: 6px; font-size: 16px; color: var(--kz-ink); }
.kz-result__praise .kz-icon { color: var(--kz-ok); margin-top: 3px; }
.kz-result--success { border-color: var(--kz-ok); background: var(--kz-ok-soft); }
.kz-result--success .kz-result__icon { background: var(--kz-ok); color: var(--kz-white); }
.kz-result--almost { border-color: var(--kz-orange); background: var(--kz-orange-soft); }
.kz-result--almost .kz-result__icon { background: var(--kz-orange); color: var(--kz-ink); }
.kz-result--retry .kz-result__icon { background: var(--kz-navy); color: var(--kz-white); }
.kz-result--info { background: var(--kz-info-soft); border-color: #B7C2DC; }
.kz-result--error { background: #FDE8E8; border-color: var(--kz-red); }
.kz-solution { display: grid; gap: 4px; padding-top: 6px; border-top: 1px dashed var(--kz-field); }
.kz-solution__label { font-family: var(--kz-font-ui); font-size: 13px; font-weight: 700; color: var(--kz-ink-2); }
.kz-solution__list { display: grid; gap: 2px; font-size: 17px; font-weight: 600; color: var(--kz-ink); }
.kz-solution__why { font-size: 15px; color: var(--kz-ink-2); }

.kz-hints-wrap { display: grid; gap: 6px; padding: 12px 14px; border-left: 4px solid var(--kz-orange); border-radius: 0 var(--kz-r) var(--kz-r) 0; background: #FFF8F0; }
.kz-hints__title { display: flex; align-items: center; gap: 6px; font-family: var(--kz-font-ui); font-size: 13px; font-weight: 700; color: var(--kz-ink); }
.kz-hints { display: grid; gap: 4px; }
.kz-hints__item { color: var(--kz-ink); font-size: 16px; }
.kz-hints__n { font-weight: 700; }

/* Meine Fehler */
.kz-mistake { display: grid; gap: 14px; }
.kz-mistake[data-solved="true"] { background: #FBFAF6; }
.kz-mistake__edit { display: grid; gap: 8px; }
.kz-solved { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--kz-ok); }
.kz-group { margin: var(--kz-s2) 0 0; color: var(--kz-ink-2); font-size: 15px; }

/* ── Lernkarte ────────────────────────────────────────────────────────── */
.kz-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 14px; border-radius: var(--kz-r); background: var(--kz-card); border: 1px solid var(--kz-line); }
.kz-legend__item { display: flex; align-items: center; gap: 8px; }
.kz-legend__text { font-size: 15px; color: var(--kz-ink-2); }
.kz-status {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 26px; padding: 0 10px 0 8px;
  border-radius: var(--kz-pill);
  font-family: var(--kz-font-ui); font-size: 12px; font-weight: 700; letter-spacing: .04em;
  white-space: nowrap;
}
.kz-status[data-status="locked"] { background: #E9E6DE; color: #3F4654; border: 1px dashed #8E93A0; }
.kz-status[data-status="unstable"] { background: var(--kz-orange); color: var(--kz-ink); }
.kz-status[data-status="stable"] { background: var(--kz-green); color: var(--kz-ink); }
.kz-counts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--kz-font-ui); font-size: 13px; color: var(--kz-ink-2); }
.kz-counts__item { display: inline-flex; align-items: center; gap: 4px; }
.kz-counts__item[data-status="stable"] .kz-icon { color: var(--kz-ok); }
.kz-counts__item[data-status="unstable"] .kz-icon { color: #B45A00; }
.kz-level { margin: 8px 0 0; font-family: var(--kz-font-ui); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kz-muted); }
.kz-modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.kz-mod {
  display: grid; align-content: start; gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--kz-line);
  border-left-width: 6px;
  border-radius: 12px;
  background: var(--kz-card);
}
.kz-mod[data-status="unstable"] { border-color: var(--kz-orange); }
.kz-mod[data-status="stable"] { border-color: var(--kz-green); }
.kz-mod[data-status="locked"] { background: var(--kz-paper-2); border-left-color: #B9B3A5; border-left-style: dashed; }
.kz-mod[data-status="locked"] .kz-mod__title { color: var(--kz-ink-2); }
.kz-mod__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.kz-mod__title { font-family: var(--kz-font-ui); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--kz-ink); }
.kz-mod__summary { font-size: 15px; line-height: 1.45; color: var(--kz-ink-2); }
.kz-mod__meta { font-family: var(--kz-font-ui); font-size: 12px; color: var(--kz-muted); }
.kz-mod__override { display: flex; align-items: center; gap: 4px; font-family: var(--kz-font-ui); font-size: 12px; font-weight: 600; color: var(--kz-ink); }
.kz-flag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--kz-font-ui); font-size: 12px; font-weight: 700;
  color: var(--kz-ink);
  padding: 2px 8px; border-radius: var(--kz-pill); background: var(--kz-orange-soft); border: 1px solid var(--kz-orange);
}
.kz-bar { height: 8px; border-radius: var(--kz-pill); background: var(--kz-paper-2); border: 1px solid var(--kz-line); overflow: hidden; }
.kz-bar__fill { display: block; height: 100%; background: var(--kz-ok); border-radius: inherit; }
.kz-focus { padding: 12px 14px; border-radius: var(--kz-r); background: var(--kz-orange-soft); display: grid; gap: 8px; }
.kz-focus__title { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--kz-ink); }

/* ── Lehrkraft ────────────────────────────────────────────────────────── */
.kz-tstatus:empty { display: none; }
.kz-tstatus:not(:empty) { padding: 8px 12px; border-radius: var(--kz-r); background: var(--kz-info-soft); color: var(--kz-ink); font-size: 15px; margin-bottom: 12px; }
.kz-tpane { display: grid; gap: 12px; min-width: 0; }
.kz-tpane:focus-visible { box-shadow: none; }
.kz-tpane > .kz-h3:first-child { margin-top: 0; }
.kz-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.kz-confirm { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--kz-r); background: var(--kz-orange-soft); border: 1px solid var(--kz-orange); color: var(--kz-ink); }
.kz-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.kz-room { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--kz-card); border: 1px solid var(--kz-line); }
.kz-room[data-breakout="true"] { border-left: 5px solid var(--kz-navy); }
.kz-room__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-family: var(--kz-font-ui); font-weight: 600; color: var(--kz-ink); }
.kz-jrooms { display: grid; gap: 6px; }
.kz-jrooms:empty { display: none; }
.kz-student { display: grid; gap: 10px; }
.kz-student__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.kz-student__name { font-family: var(--kz-font-ui); font-weight: 600; font-size: 17px; color: var(--kz-ink); }
.kz-student__flags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.kz-student__flags:empty { display: none; }
.kz-tag--online { color: var(--kz-ok); border-color: var(--kz-ok); background: var(--kz-ok-soft); }
.kz-tag--online .kz-dot { width: 6px; height: 6px; }
.kz-student__lk { display: grid; gap: 12px; padding: 14px; border-radius: var(--kz-r); background: var(--kz-paper); border: 1px solid var(--kz-line); }
.kz-student__lk-title { margin: 0; }
.kz-student__lk .kz-section + .kz-section { margin-top: var(--kz-s2); }
.kz-mod__adjust { justify-self: start; margin-left: -8px; }
.kz-transcript { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; padding: 8px 10px; border-radius: var(--kz-r); background: var(--kz-paper); }
.kz-transcript__line { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 8px; font-size: 16px; color: var(--kz-ink); }
.kz-transcript__time { font-family: var(--kz-font-ui); font-size: 12px; color: var(--kz-muted); padding-top: 3px; }
.kz-details > summary,
.kz-done > .kz-summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  width: fit-content; max-width: 100%;
  min-height: 44px; padding: 0 16px 0 12px;
  border: 1px solid var(--kz-field);
  border-radius: var(--kz-pill);
  background: var(--kz-card);
  font-family: var(--kz-font-ui); font-size: 14px; font-weight: 600; color: var(--kz-ink);
}
.kz-details > summary:hover,
.kz-done > .kz-summary:hover { background: var(--kz-paper-2); border-color: var(--kz-ink-2); }
.kz-details[open] > summary,
.kz-done[open] > .kz-summary { background: var(--kz-paper-2); }
.kz-details > summary::-webkit-details-marker { display: none; }
.kz-details > summary::before { content: "▸"; color: var(--kz-ink-2); transition: transform .15s ease; }
.kz-details[open] > summary::before { transform: rotate(90deg); }
.kz-details[open] > summary { margin-bottom: 8px; }
.kz-finding { display: grid; gap: 10px; }
.kz-finding[data-editing="true"] { border-color: var(--kz-orange); box-shadow: 0 0 0 1px var(--kz-orange); }
.kz-finding__who { font-family: var(--kz-font-ui); color: var(--kz-ink); }
.kz-utt { font-size: 19px; line-height: 1.75; color: var(--kz-ink); padding: 10px 14px; background: var(--kz-paper); border-radius: var(--kz-r); user-select: text; -webkit-user-select: text; }
.kz-finding[data-editing="true"] .kz-utt { cursor: text; outline: 2px dashed var(--kz-field); outline-offset: 2px; }
.kz-finding__corr { color: var(--kz-ink); }
.kz-finding__corr .kz-label { display: inline; }
.kz-editbox { display: grid; gap: 10px; padding-top: 6px; border-top: 1px dashed var(--kz-field); }
.kz-form { display: grid; gap: 14px; }
.kz-form > .kz-h3 { margin: 0; }
.kz-draft { display: grid; gap: 10px; }
.kz-draft__preview { display: grid; gap: 12px; padding: 12px; border-radius: var(--kz-r); background: var(--kz-paper); }
.kz-draft__preview > .kz-card { border-style: dashed; }
.kz-key { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--kz-r); background: var(--kz-info-soft); }
.kz-publish { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; }
.kz-publish > .kz-field { flex: 1 1 200px; }
.kz-group-card { display: grid; gap: 8px; }
.kz-sent { margin-top: 8px; }

/* ── Ohne JS / Hinweise / eigenstaendige Seiten ───────────────────────── */
.kz-fallback { display: grid; gap: 10px; padding: var(--kz-s3) 0; }
.kz-fallback__loading { color: var(--kz-light); }
.kz-fallback__hint, .kz-fallback__noscript { color: var(--kz-light-mute); font-size: 15px; max-width: 60ch; }
.kz-fallback__noscript { color: var(--kz-white); font-weight: 600; }
.kz-standalone { color: var(--kz-ink-2); }
.kz-standalone > .kz-app,
.kz-notice-box {
  padding: var(--kz-s3);
  border-radius: var(--kz-r-card);
  background: var(--kz-paper);
}
.kz-notice-box { display: grid; gap: 12px; max-width: 720px; }
.kz-standalone .kz-fallback__loading,
.kz-standalone .kz-fallback__noscript { color: var(--kz-ink); }
.kz-notice-box .kz-kicker { color: #B04A00; }

/* ── Lernpfad (Vertrag §7a): Hierarchie + Ausschnitt aus dem Kompetenzgraphen ─────────────── */
.kz-viewswitch { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 var(--kz-s2); border: 1px solid var(--kz-line); border-radius: var(--kz-pill); background: var(--kz-card); }
.kz-viewswitch__btn { border-radius: var(--kz-pill); background: transparent; color: var(--kz-ink); border: 0; }
.kz-viewswitch__btn[aria-pressed="true"] { background: var(--kz-navy); color: var(--kz-white); }
.kz-path__rule { display: flex; gap: 6px; align-items: flex-start; }
.kz-path__layer { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.kz-path__layer + .kz-level::before { content: "↓"; display: block; margin: 0 0 4px; color: var(--kz-muted); font-size: 18px; line-height: 1; }
.kz-pathmod { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 12px 14px; border: 1px solid var(--kz-line); border-left-width: 6px; border-radius: 12px; background: var(--kz-card); }
.kz-pathmod[data-status="unstable"] { border-color: var(--kz-orange); }
.kz-pathmod[data-status="stable"] { border-color: var(--kz-green); }
.kz-pathmod[data-status="locked"] { background: var(--kz-paper-2); border-left-color: #B9B3A5; border-left-style: dashed; }
.kz-pathmod[data-gap="yes"] { border-left-color: var(--kz-red); border-left-style: solid; }
.kz-pathmod__head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kz-pathmod { color: var(--kz-ink); }
.kz-pathmod__title { margin: 0; font-family: var(--kz-font-ui); font-weight: 600; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; color: var(--kz-ink); }
.kz-pathmod[data-status="locked"] .kz-pathmod__title { color: var(--kz-ink-2); }
.kz-pathmod__needs { margin: 0; font-size: .875rem; color: var(--kz-muted); overflow-wrap: anywhere; }
.kz-pathmod__gap { padding: 1px 8px; border-radius: var(--kz-pill); background: var(--kz-err-soft); color: #8A1014; font-size: .8125rem; font-weight: 600; }
.kz-pathmod__ready { padding: 1px 8px; border-radius: var(--kz-pill); font-size: .8125rem; background: var(--kz-paper-2); color: var(--kz-ink-2); overflow-wrap: anywhere; }
.kz-pathmod[data-ready="yes"] .kz-pathmod__ready { background: var(--kz-ok-soft); color: var(--kz-ok); font-weight: 600; }
.kz-pathmod__toggle { justify-self: start; }
.kz-pathmod__detail { margin-top: 4px; }
.kz-graph { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--kz-line); border-radius: 10px; background: var(--kz-paper); color: var(--kz-ink); }
.kz-graph__step { display: grid; gap: 6px; }
.kz-graph__label { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kz-muted); }
.kz-graph__row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kz-graph__arrow { text-align: center; color: var(--kz-muted); font-size: 18px; line-height: 1; }
.kz-graph__more { margin: 0; font-size: .8125rem; color: var(--kz-muted); }
.kz-graph__orwrap { display: grid; gap: 4px; padding: 6px; border: 1px dashed var(--kz-navy-line); border-radius: 10px; }
.kz-graph__orlabel { font-size: .75rem; font-weight: 700; color: var(--kz-navy); }
.kz-graph__or { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kz-graph__explain { margin: 6px 0 0; font-size: .9375rem; line-height: 1.45; }
.kz-gnode { display: grid; gap: 1px; min-width: 0; max-width: 100%; padding: 6px 10px; border: 1px solid var(--kz-line); border-left-width: 5px; border-radius: 8px; background: var(--kz-card); font-size: .875rem; line-height: 1.3; }
.kz-gnode__state { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.kz-gnode__label { overflow-wrap: anywhere; }
.kz-gnode__ex, .kz-gnode__mod { font-size: .75rem; color: var(--kz-muted); overflow-wrap: anywhere; }
.kz-gnode__kind { font-size: .6875rem; color: var(--kz-muted); }
.kz-gnode[data-state="stable"] { border-left-color: var(--kz-green); }
.kz-gnode[data-state="stable"] .kz-gnode__state { color: var(--kz-ok); }
.kz-gnode[data-state="unstable"] { border-left-color: var(--kz-orange); }
.kz-gnode[data-state="unstable"] .kz-gnode__state { color: #B45A00; }
.kz-gnode[data-state="gap"] { border-left-color: var(--kz-red); }
.kz-gnode[data-state="gap"] .kz-gnode__state { color: #A3151A; }
.kz-gnode[data-state="untested"] { border-left-color: #B9B3A5; }
.kz-gnode[data-state="untested"] .kz-gnode__state, .kz-gnode[data-state="outside"] .kz-gnode__state { color: var(--kz-muted); }
.kz-gnode[data-state="outside"] { border-style: dashed; background: transparent; }
.kz-gnode--target { border-width: 2px; border-left-width: 5px; box-shadow: 0 0 0 2px var(--kz-orange-soft); }
.kz-gnode--target .kz-gnode__label { font-weight: 700; }
.kz-gnode--helpful { border-style: dashed; }

/* #24 Lernplattform: oben drei Karten (ohne Scrollen sichtbar), darunter die Abschnitte. */
.kz-home .kz-app { background: var(--kz-paper); }
.kz-home__wrap { display: grid; gap: var(--kz-s3); min-width: 0; color: var(--kz-ink-2); }
.kz-home__top { display: grid; gap: var(--kz-s2); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.kz-home__card { display: grid; align-content: start; gap: 10px; }
.kz-home__title { display: flex; align-items: center; gap: 6px; color: var(--kz-ink); }
.kz-home__title .kz-icon { color: #9A4100; }
.kz-home__body { display: grid; gap: 10px; justify-items: start; }
.kz-home__text { color: var(--kz-ink); font-size: 17px; }
.kz-home__sec { display: grid; gap: 12px; min-width: 0; scroll-margin-top: calc(var(--kz-top) + 16px); }
.kz-home__sec:focus { outline: none; }
.kz-home__lessons { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.kz-home__lesson { display: grid; gap: 6px; justify-items: start; }
.kz-home__lesson[data-status="live"] { border-color: var(--kz-red); box-shadow: 0 0 0 1px var(--kz-red); }
.kz-home__lesson-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--kz-ink); }
.kz-home__fold > summary { margin-bottom: 8px; }
/* #32 Hinweise: kleine Toasts unten rechts, ohne Bewegung bei prefers-reduced-motion. */
.kz-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 8px; justify-items: end; max-width: min(360px, calc(100vw - 32px)); pointer-events: none; }
.kz-toast {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 10px 14px; border-radius: var(--kz-r);
  background: var(--kz-navy); color: var(--kz-white); border: 1px solid var(--kz-navy-line);
  box-shadow: 0 8px 24px rgba(11, 16, 34, .35);
  font-family: var(--kz-font-ui); font-size: 15px; font-weight: 600;
  animation: kz-toast-in .2s ease-out;
}
.kz-toast .kz-icon { color: var(--kz-orange); flex: none; }
@keyframes kz-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kz-toast { animation: none; } }

/* ── Mobil (≤ 760 px): kompaktes Video oben, Arbeitsbereich darunter ──── */
@media (max-width: 760px) {
  .kz { font-size: 16px; }
  .kz-head { margin-bottom: var(--kz-s2); }
  .kz-notice { max-width: none; }
  .kz-head__tools { justify-content: flex-start; width: 100%; }
  .kz-dialog { max-height: calc(100vh - 24px); }
  .kz-consent[data-consent="yes"] .kz-consent__more { display: inline-flex; }
  .kz-consent[data-consent="yes"]:not([data-expanded="true"]) .kz-consent__text {
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .kz-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .kz-path__layer { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kz-viewswitch { display: flex; }
  .kz-viewswitch__btn { flex: 1; }
  .kz-video { top: var(--kz-top); border-radius: 12px; }
  .kz-video__size { display: inline-flex; }
  .kz-video__stage { height: clamp(170px, 32vh, 260px); }
  .kz--video-mini .kz-video__stage { height: 96px; }
  /* Tastatur offen: das Video macht Platz, ohne neu zu laden. */
  .kz--classroom:has(.kz-work :is(input[type="text"], textarea):focus) .kz-video__stage { height: 96px; }
  .kz-work { padding: 16px 12px; border-radius: 12px; }
  .kz-tabs { margin-bottom: var(--kz-s2); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; }
  .kz-tab { position: relative; padding: 0 6px; font-size: 14px; white-space: normal; text-align: center; line-height: 1.15; }
  .kz-tab .kz-count { position: absolute; top: -6px; right: -2px; min-width: 20px; height: 20px; font-size: 11px; box-shadow: 0 0 0 2px var(--kz-card); }
  .kz-subtabs { flex-wrap: wrap; }
  .kz-news .kz-news__item { flex-wrap: wrap; align-items: flex-start; }
  .kz-news__body { flex: 1 1 calc(100% - 90px); }
  .kz-news__actions { margin-left: auto; }
  .kz-card { padding: 16px 14px; }
  .kz-said__text { font-size: 18px; padding: 12px 14px; }
  .kz-gaptext { font-size: 18px; }
  .kz-vm__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .kz-task__foot { flex-direction: column; align-items: stretch; }
  .kz-task__foot > .kz-btn { width: 100%; }
  .kz-modgrid { grid-template-columns: minmax(0, 1fr); }
  .kz-standalone > .kz-app, .kz-notice-box { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .kz *, .kz *::before, .kz *::after { transition: none !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* == lane 3 == */
/* #38: one line under the video that explains Jitsi's subtitles (CC) */
.kz-video__cc {
  margin: 0; padding: 6px 14px 8px;
  color: var(--kz-light);
  font-family: var(--kz-font-ui); font-size: 12px; line-height: 1.35;
}
/* == lane 2 == */
/* W06 #25 — "Was kommt an?" (teacher Live tab). Symbol + text, never colour only. */
.kz-pipe { display: grid; gap: var(--kz-s2, 12px); margin-bottom: var(--kz-s3, 16px); }
.kz-pipe__blockers, .kz-pipe__learners { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kz-pipe__b { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: var(--kz-r); border: 1px solid var(--kz-line); color: var(--kz-ink); }
.kz-pipe__b svg { flex: none; margin-top: 2px; }
.kz-pipe__b--block { background: var(--kz-orange-soft); border-color: var(--kz-orange); font-weight: 600; }
.kz-pipe__b--warn { background: var(--kz-orange-soft); }
.kz-pipe__b--info, .kz-pipe__b--ok { background: transparent; }
.kz-pipe__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 0; border-bottom: 1px solid var(--kz-line); }
.kz-pipe__name { font-weight: 600; color: var(--kz-ink); }
.kz-pipe__state { flex: 1 1 12em; font-size: 14px; color: var(--kz-ink-2); }
/* W09 #28 — traffic light per item: shape + word, colour only as a third cue. */
.kz-tl { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--kz-line); font-family: var(--kz-font-ui); font-size: 13px; color: var(--kz-ink); }
.kz-tl[data-state="ok"] { border-color: var(--kz-green); }
.kz-tl[data-state="ok"] svg { color: var(--kz-green); }
.kz-tl[data-state="almost"] { border-color: var(--kz-orange); background: var(--kz-orange-soft); }
.kz-tl[data-state="wrong"] { border-color: var(--kz-red); }
.kz-tl[data-state="wrong"] svg { color: var(--kz-red); }
.kz-tl[data-state="open"] { color: var(--kz-muted); }
.kz-tl-strip { list-style: none; display: inline-flex; flex-wrap: wrap; gap: 3px; margin: 0; padding: 0; }
.kz-tl-strip__i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--kz-line); }
.kz-tl-strip__i[data-state="ok"] { border-color: var(--kz-green); color: var(--kz-green); }
.kz-tl-strip__i[data-state="almost"] { border-color: var(--kz-orange); background: var(--kz-orange-soft); }
.kz-tl-strip__i[data-state="wrong"] { border-color: var(--kz-red); color: var(--kz-red); }
.kz-tl-strip__i[data-state="open"] { color: var(--kz-muted); }
/* W12 #31 — pace: teacher counter (cue at 2/3: border + icon + text, not colour only), learner hand-up. */
.kz-pace { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px solid var(--kz-line); border-radius: var(--kz-r); }
.kz-pace[data-cue="true"] { border: 2px solid var(--kz-orange); background: var(--kz-orange-soft); font-weight: 600; }
.kz-pace__count { display: inline-flex; align-items: center; gap: 6px; }
.kz-pace__sound { font-size: 13px; color: var(--kz-muted); }
.kz-pace-cell { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--kz-ink-2); }
.kz-pace-cell progress { width: 72px; height: 8px; }
.kz-pace-me { display: grid; gap: 4px; justify-items: start; margin-bottom: var(--kz-s2, 12px); }
.kz-fertig[aria-pressed="true"] { border-color: var(--kz-green); }
/* W28 #48 — material task + teacher form. */
.kz-ex--material { display: grid; gap: 8px; justify-items: start; }
.kz-mat__what { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-weight: 600; color: var(--kz-ink); }
.kz-mat__private { color: var(--kz-muted); }
.kz-mat-form { margin-bottom: var(--kz-s3, 16px); }
.kz-mat-form .kz-input--num { max-width: 8em; }
/* W29 #49 — private review queue (teacher) + "Du bist dran" (learner). */
.kz-rv { margin-bottom: var(--kz-s3, 16px); }
.kz-rv__list { margin: 0; padding-left: 1.2em; display: grid; gap: 2px; }
.kz-rv__item[data-current="true"] { font-weight: 700; }
.kz-rv__now { font-weight: 600; color: var(--kz-ink); }
.kz-turn { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 2px solid var(--kz-orange); border-radius: var(--kz-r); background: var(--kz-orange-soft); font-weight: 700; color: var(--kz-ink); }
/* == lane A1 (#88) == teacher: answer history per learner (dialog, attempts list, clickable strip items). */
.kz-ah { width: min(760px, calc(100vw - 24px)); }
.kz-ah__body { display: grid; gap: 12px; padding: 16px 20px 20px; overflow-y: auto; max-height: calc(100vh - 140px); }
.kz-ah__private { display: inline-flex; align-items: center; gap: 4px; }
.kz-ah__all { justify-self: start; }
.kz-ah-item { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--kz-line); border-radius: var(--kz-r); min-width: 0; }
.kz-ah-item[data-state="wrong"] { border-left: 4px solid var(--kz-red); }
.kz-ah-item[data-state="almost"] { border-left: 4px solid var(--kz-orange); }
.kz-ah-item[data-state="ok"] { border-left: 4px solid var(--kz-green); }
.kz-ah-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.kz-ah-item__title { margin: 0; flex: 1 1 12em; }
.kz-ah-prompt { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--kz-r); background: var(--kz-paper-2, rgba(11, 16, 34, .04)); overflow-wrap: anywhere; }
.kz-ah-prompt__title { font-weight: 600; }
.kz-ah-prompt__instructions, .kz-ah-prompt__context { color: var(--kz-ink-2); }
.kz-ah-attempts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kz-ah-attempt { display: grid; gap: 4px; padding: 8px 0 8px 10px; border-left: 2px solid var(--kz-line); min-width: 0; }
.kz-ah-attempt[data-counted="false"] { opacity: .8; border-left-style: dashed; }
.kz-ah-attempt__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.kz-ah-attempt__label { font-weight: 600; color: var(--kz-ink); }
.kz-ah-attempt__answer { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--kz-ink); }
.kz-ah-attempt__hint, .kz-ah-attempt__praise { margin: 0; font-size: 14px; color: var(--kz-ink-2); }
.kz-ah-marks { margin: 0; padding-left: 1.2em; font-size: 14px; color: var(--kz-ink-2); }
.kz-ah-none { margin: 0; }
.kz-tl-strip__i.kz-ah-trigger { cursor: pointer; }
.kz-tl-strip__i.kz-ah-trigger:hover { background: var(--kz-orange-soft); }
.kz-tl-strip__i.kz-ah-trigger:focus-visible { outline: 2px solid var(--kz-orange); outline-offset: 2px; }
@media (max-width: 760px) {
  .kz-ah__body { padding: 12px; max-height: calc(100vh - 110px); }
  .kz-tl-strip__i.kz-ah-trigger { width: 28px; height: 28px; }
} /* train 2b (#105): this closing brace was lost in the train-2a merge — the #89/#90 rules below only applied at <= 760 px */
/* == lane A2 (#89) == „Warum?“ je Lernkarte-/Lernpfad-Modul (assets/js/lernkarte/why.js). */
.kz-why-box { display: grid; gap: 6px; min-width: 0; }
.kz-why-btn { justify-self: start; display: inline-flex; align-items: center; gap: 4px; }
/* An open explanation takes the whole row of the module grid (readable sentences on desktop). */
.kz-mod:has(.kz-why-open), .kz-pathmod:has(.kz-why-open) { grid-column: 1 / -1; }
.kz-why-panel { padding: 10px 12px; border: 1px solid var(--kz-line); border-radius: 10px; background: var(--kz-paper); color: var(--kz-ink); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.kz-why-body { display: grid; gap: 8px; }
.kz-why-body p { margin: 0; }
.kz-why-status { padding: 6px 10px; border-left: 4px solid #B9B3A5; border-radius: 6px; background: var(--kz-card); }
.kz-why-status[data-status="unstable"] { border-left-color: var(--kz-orange); }
.kz-why-status[data-status="stable"] { border-left-color: var(--kz-ok); }
.kz-why-override { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; }
.kz-why-h { font-family: var(--kz-font-ui); font-size: 13px; font-weight: 700; color: var(--kz-ink-2); }
.kz-why-checks { display: grid; gap: 2px; margin: 0; }
.kz-why-check { display: flex; align-items: flex-start; gap: 6px; }
.kz-why-check .kz-icon { margin-top: .2em; }
.kz-why-check[data-met="yes"] .kz-icon { color: var(--kz-ok); }
.kz-why-check[data-met="no"] { color: var(--kz-ink-2); }
.kz-why-check[data-met="no"] .kz-icon { color: #B45A00; }
.kz-why-rule > summary { cursor: pointer; font-family: var(--kz-font-ui); font-size: 13px; font-weight: 600; color: var(--kz-ink-2); }
.kz-why-rule > p { margin-top: 4px; font-size: 14px; color: var(--kz-ink-2); }
.kz-why-events { display: grid; gap: 8px; margin: 0; }
.kz-why-ev { display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--kz-line); border-left-width: 4px; border-radius: 8px; background: var(--kz-card); }
.kz-why-ev[data-kind="correct"] { border-left-color: var(--kz-ok); }
.kz-why-ev[data-kind="error"] { border-left-color: var(--kz-red); }
.kz-why-ev[data-counts="no"] { opacity: .8; border-left-style: dashed; }
.kz-why-evhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-family: var(--kz-font-ui); font-size: 13px; }
.kz-why-kind { padding: 0 8px; border-radius: var(--kz-pill); font-weight: 700; background: var(--kz-ok-soft); color: var(--kz-ok); }
.kz-why-ev[data-kind="error"] .kz-why-kind { background: var(--kz-err-soft); color: #8A1014; }
.kz-why-label { font-weight: 600; color: var(--kz-ink); }
.kz-why-at { color: var(--kz-muted); }
.kz-why-sentence { margin: 0; padding: 0 0 0 10px; border-left: 2px solid var(--kz-line); font-style: italic; color: var(--kz-ink); }
.kz-why-fix, .kz-why-nosentence, .kz-why-counts { font-size: 13px; color: var(--kz-muted); }
.kz-why-close { justify-self: start; margin-top: 4px; }
@media (max-width: 760px) {
  .kz-why-panel { padding: 8px; font-size: 14px; }
}
/* == lane A3 (#90) == */
/* Richtig verwendet (learner: own sentences in Meine Fehler; teacher: Prüfen) + skip option in Übungen. */
.kz-cu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; margin-top: var(--kz-s3, 16px); padding-top: var(--kz-s3, 16px); border-top: 1px solid var(--kz-line); }
.kz-cu__title { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.kz-cu__title svg { color: var(--kz-ok); }
.kz-cu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kz-cu__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--kz-line); border-left: 4px solid var(--kz-ok); border-radius: var(--kz-r); background: var(--kz-card); }
.kz-cu__item[data-kept="false"] { border-left-style: dashed; }
.kz-cu__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.kz-cu__tag { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; height: auto; padding-top: 3px; padding-bottom: 3px; line-height: 1.3; border-radius: 12px; background: var(--kz-ok-soft); }
.kz-cu__tag svg { color: var(--kz-ok); }
.kz-cu__text { margin: 0; color: var(--kz-ink); overflow-wrap: anywhere; }
.kz-cu__gone { margin: 0; font-size: 14px; font-style: italic; color: var(--kz-muted); }
.kz-cu__learner .kz-cu__list { margin: 4px 0 8px; }
.kz-cu-skip { display: grid; gap: 4px; padding: 8px 12px; border: 1px dashed var(--kz-line); border-radius: var(--kz-r); }
.kz-cu__skipped { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* == train 2b (#105) == Live-Tab verschlankt, Bereich einklappen (F15), Entwürfe (F4), Hinweis-Zeile ohne Zustimmung. */
/* Arbeitsbereich eingeklappt: das Video nimmt die ganze Breite; der Knopf bleibt im Kopf neben „Einstellungen“. */
.kz--work-collapsed .kz-grid { grid-template-columns: minmax(0, 1fr); }
.kz-collapse { white-space: nowrap; }
.kz-collapse svg { flex: none; }
/* Mittlere Breiten: nur das Pfeil-Symbol (Name bleibt per aria-label/title), damit der Kopf einzeilig bleibt. */
@container kzapp (min-width: 721px) and (max-width: 1100px) {
  .kz-collapse { min-width: 44px; padding-inline: 0; justify-content: center; }
  .kz-collapse .kz-collapse__text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 760px) {
  .kz-collapse svg { transform: rotate(90deg); } /* gestapelt: der Bereich liegt unter dem Video */
  .kz--work-collapsed .kz-collapse svg { transform: rotate(-90deg); }
}
/* Eine Zeile statt der Zustimmung je Person (ui2_live_slim). */
.kz-pipe__consent { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--kz-line); border-radius: var(--kz-r); background: var(--kz-orange-soft); color: var(--kz-ink); }
.kz-pipe__consent svg { flex: none; margin-top: 2px; }
/* Entwürfe: Kopfzeile mit Reihenfolge und „Entwürfe aufräumen“; Erstellzeit je Karte. */
.kz-drafts-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.kz-drafts-bar .kz-h3 { margin-right: auto; }
.kz-draft__created { white-space: nowrap; }
.kz-count-help { margin-top: -4px; }
/* „Anpassen“ / „Warum?“ auf Modulkarten tragen ein aria-label UND sichtbaren Text: .kz-btn--quiet[aria-label] nahm ihnen das Innenpolster (Text lief über den Rand). */
.kz-mod .kz-btn--quiet[aria-label], .kz-pathmod .kz-btn--quiet[aria-label] { padding: 0 12px; }
/* == lane 2: W07 #26 Probelauf (teacher/rehearsal.js) == */
.kz .kz-rehearsal { margin-top: var(--kz-s2); border-left: 4px solid var(--kz-orange); }
.kz .kz-rehearsal h3 { display: flex; align-items: center; gap: 6px; }
.kz .kz-rehearsal__state { font-weight: 600; }
/* == lane 2: W16 #35 Gruppenplan (teacher/groupplan.js, assignments.js) == */
.kz .kz-plan { margin-top: var(--kz-s2); }
.kz .kz-plan__lanes { display: grid; gap: var(--kz-s1); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.kz .kz-plan__lane textarea { width: 100%; }
.kz .kz-plan__people { display: grid; gap: 4px 12px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); padding: 0; list-style: none; }
.kz .kz-plan__who { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kz .kz-plan__clocks { list-style: none; padding: 0; display: grid; gap: var(--kz-s1); }
.kz .kz-plan__clock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--kz-line); border-radius: var(--kz-r); }
.kz .kz-plan__clock[data-over="true"] { border-color: var(--kz-orange); background: var(--kz-orange-soft); }
.kz .kz-plan__time { font-variant-numeric: tabular-nums; font-weight: 600; }
.kz .kz-plan-me { border: 1px solid var(--kz-line); border-left: 4px solid var(--kz-navy); border-radius: var(--kz-r); padding: 8px 12px; margin-bottom: var(--kz-s2); background: var(--kz-card); }
.kz .kz-plan-me[data-over="true"] { border-left-color: var(--kz-orange); }
.kz .kz-plan-me__head { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.kz .kz-plan-me__time { font-variant-numeric: tabular-nums; }
/* == lane 2: W14 #33 Abzeichen (persönlich, ohne Zahlen) == */
.kz-badges { margin: var(--kz-s2) 0; padding: var(--kz-s2); background: var(--kz-card); border: 1px solid var(--kz-line); border-radius: var(--kz-r-card); color: var(--kz-ink); }
.kz-badges__title { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--kz-s1); font-weight: 700; }
.kz-badges__list { display: flex; flex-wrap: wrap; gap: var(--kz-s1); margin: 0; padding: 0; list-style: none; }
.kz-badge { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: start; max-width: 22rem; padding: 6px 12px; background: var(--kz-ok-soft); border: 1px solid var(--kz-ok); border-radius: var(--kz-r); color: var(--kz-ink); }
.kz-badge > svg { color: var(--kz-ok); margin-top: 2px; }
.kz-badge__title { font-weight: 700; }
.kz-badge__text { grid-column: 2; font-size: .875rem; color: var(--kz-ink-2); }
.kz-badges__private { margin: var(--kz-s1) 0 0; }
/* == lane 2: W10 #29 == freier Dialog */
.kz-dlg__turns { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .6rem; }
.kz-dlg__turn { display: grid; gap: .3rem; padding: .5rem .6rem; border: 1px solid var(--kz-line); border-radius: var(--kz-r); background: var(--kz-card); }
.kz-dlg__turn--mine { border-color: var(--kz-navy-3); }
.kz-dlg__turn--next { border-style: dashed; }
.kz-dlg__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.kz-dlg__speaker { width: auto; min-width: 4.5rem; }
.kz-dlg__text { width: 100%; min-height: 2.6rem; resize: vertical; }
.kz-dlg__ini { display: inline-block; min-width: 1.6rem; text-align: center; font-weight: 700; }
.kz-dlg__line { margin: 0; }
.kz-dlg__cue { font-weight: 600; }
.kz-dlg__roles { margin: .25rem 0 .5rem; padding-left: 1rem; }
.kz-dlg__wait { color: var(--kz-muted); font-style: italic; padding: .25rem .6rem; }
.kz-dlgform > summary { cursor: pointer; }
.kz-dlgform .kz-form-row { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 480px) { .kz-dlg__turn { padding: .45rem; } }


/* == 0.6.0 L3 (#51) == Prüfungsteil: Leitpunkte (Lernende), Bewertungsbogen (Lehrkraft) */
.kz-leitpunkte { list-style: none; margin: 0 0 var(--kz-s2, 12px); padding: 0; display: grid; gap: 6px; }
.kz-leitpunkt { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border: 1px solid var(--kz-line); border-radius: var(--kz-r); background: var(--kz-card); }
.kz-leitpunkt__state { flex: 0 0 auto; min-width: 0; font-family: var(--kz-font-ui); font-size: 13px; font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.kz-leitpunkt__state:empty { display: none; }
.kz-leitpunkt[data-covered="true"] { border-color: var(--kz-ok); background: var(--kz-ok-soft); }
.kz-leitpunkt[data-covered="true"] .kz-leitpunkt__state { color: var(--kz-ok); }
.kz-leitpunkt[data-covered="false"] { border-color: var(--kz-orange); background: var(--kz-orange-soft); }
.kz-leitpunkt[data-covered="false"] .kz-leitpunkt__state::before { content: "!"; font-weight: 700; }
.kz-wfb-mods { margin-top: 8px; }
.kz-exam { display: grid; gap: 10px; margin-top: var(--kz-s2, 12px); }
.kz-exam .kz-h3 { display: flex; gap: 6px; align-items: center; }
.kz-exam .kz-h4 { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: var(--kz-ink); opacity: 1; } /* no plugin rule for .kz-h4: the theme h4 colour was near-invisible in UI-2 */
.kz-exam__task, .kz-exam__sheet { border: 1px solid var(--kz-line); border-radius: var(--kz-r); padding: 10px 12px; display: grid; gap: 6px; background: var(--kz-card); }
.kz-exam__part, .kz-exam__title, .kz-exam__head { margin: 0; }
.kz-exam__title { font-weight: 600; }
.kz-exam__head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kz-exam__sheet[data-confirmed="true"] { border-color: var(--kz-ok); }
.kz-exam__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kz-exam__table th, .kz-exam__table td { text-align: left; padding: 6px 4px; border-top: 1px solid var(--kz-line); vertical-align: top; }
.kz-exam__table thead th { border-top: 0; font-family: var(--kz-font-ui); font-size: 13px; color: var(--kz-muted); }
@media (max-width: 640px) {
  .kz-exam__table, .kz-exam__table tbody, .kz-exam__table tr, .kz-exam__table th, .kz-exam__table td { display: block; }
  .kz-exam__table thead { display: none; }
  .kz-exam__table tr { border-top: 1px solid var(--kz-line); padding: 6px 0; }
  .kz-exam__table th, .kz-exam__table td { border-top: 0; padding: 2px 0; }
}
/* == lane 2: W30 #50 Aufgaben wie diese (teacher/matgen.js) == */
.kz .kz-matgen { margin-top: var(--kz-s2); }
.kz .kz-matgen > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.kz .kz-matgen textarea { width: 100%; min-height: 7em; }
.kz .kz-matgen .kz-row > .kz-form-row { flex: 1 1 12rem; }
.kz .kz-tag--source { background: var(--kz-info-soft); color: var(--kz-ink-2); display: inline-flex; align-items: center; gap: 4px; }
.kz .kz-tag--source[data-source="third-party"],
.kz .kz-tag--source[data-source="official-exam"] { background: var(--kz-orange-soft); }
/* == 0.6.0 L3 (#50) == label above its field in the file/page row (UI-2 and classic) */
.kz .kz-matgen .kz-row > .kz-form-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.kz .kz-matgen .kz-input--num { max-width: 8rem; }
/* == 0.6.0 L3 (#50) == UI-2: the card belongs to "Einzelaufgabe"; hidden while 0.6.0 L1's pair mode hides the form */
.kz .kz-t-create__form[hidden] ~ [data-kz-matgen] { display: none; }