/* ═══════════════════════════════════════════════════════════════
   Fachlehrer-Cockpit (Module A–J, drei Säulen)
   Präfix: .lk- (Lehrkraft)
   Wird nach style.css geladen, ergänzt/überschreibt Schüler-Defaults.
   ═══════════════════════════════════════════════════════════════ */

/* ── Klassen-Switcher + Modus-Badge ──────────────────────────── */
.lk-klassen-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -8px 0 12px;
  padding: 8px 12px;
  background: var(--weiss);
  border-radius: 8px;
  box-shadow: var(--schatten);
  font-size: 0.9rem;
}
.lk-klassen-switcher-label { color: var(--grau); font-weight: 600; }
.lk-klassen-tab {
  padding: 4px 10px;
  border-radius: 6px;
  text-decoration: none;
  background: var(--hell);
  color: var(--grau);
  font-weight: 600;
  font-size: 0.88rem;
  transition: background 0.15s;
}
.lk-klassen-tab:hover { background: #e8eff5; }
.lk-klassen-tab-aktiv { background: var(--blau); color: var(--weiss); }
.lk-modus-badge {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.lk-modus-wizard  { background: #e3f2fd; color: #1565c0; }
.lk-modus-kompakt { background: #fff8e6; color: #a0700a; }
.lk-modus-profi   { background: #f3e5f5; color: #6a1b9a; }
.lk-modus-link { color: var(--grau); font-size: 0.78rem; text-decoration: underline; }

/* ── Modul-Nav mit Säulen-Trennern ───────────────────────────── */
.modul-nav-lk .modul-nav-inner { flex-wrap: wrap; align-items: center; }

/* Klassenlehrer-Nav (10 Module): zweite Zeile statt rechts abgeschnitten */
.modul-nav-kl .modul-nav-inner { flex-wrap: wrap; align-items: center; }

/* Schulleitungs- + Schüler-Nav: ebenfalls umbrechen statt abschneiden */
.modul-nav-sl  .modul-nav-inner { flex-wrap: wrap; align-items: center; }
.modul-nav-sus .modul-nav-inner { flex-wrap: wrap; align-items: center; }
.lk-saeule-trenner {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 0 2px;
  flex-shrink: 0;
}
.modul-tab-saeule-1 { border-bottom: 2px solid #2e86c1; }
.modul-tab-saeule-2 { border-bottom: 2px solid #1a7f4b; }
.modul-tab-saeule-3 { border-bottom: 2px solid #6c5ce7; }

/* ── Bauchgefühl-Banner (Kompakt-Modus) ───────────────────────── */
.lk-bauchgefuehl-banner {
  background: #fff8e6;
  border-left: 4px solid #d4a017;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ── Tooltip-Block (Wizard-Modus) ─────────────────────────────── */
.lk-tooltip-block {
  background: #e3f2fd;
  border-left: 4px solid #2e86c1;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #1565c0;
}
.lk-tooltip-inline { margin-top: 12px; }

/* ── Drei-Kacheln-Layout (Modul A Morgen) ─────────────────────── */
.lk-3-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.lk-kachel {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--schatten);
  display: flex;
  flex-direction: column;
}
.lk-kachel-typ {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--grau);
  margin-bottom: 8px;
}
.lk-kachel-text { font-size: 1rem; line-height: 1.4; margin-bottom: 6px; }
.lk-kachel-hinweis { font-size: 0.85rem; color: var(--grau); margin-bottom: 10px; }
.lk-kachel-meta { font-size: 0.78rem; color: var(--grau); font-style: italic; margin-bottom: 8px; }
.lk-kachel-link {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blau);
  text-decoration: none;
}
.lk-kachel-link:hover { text-decoration: underline; }
.lk-kachel-weitere { font-size: 0.78rem; color: var(--grau); margin-top: 8px; }
.lk-kachel-weitere-label { font-weight: 600; }
.lk-kachel-weitere a { color: var(--blau); text-decoration: none; margin-right: 6px; }

.lk-fussnote {
  font-size: 0.78rem;
  color: var(--grau);
  margin-top: 16px;
  font-style: italic;
  line-height: 1.5;
}
.lk-aufgabe-meta { font-size: 0.85rem; color: var(--grau); margin-top: 8px; }

/* ── Modus-Karten (Auswahlseite) ──────────────────────────────── */
.lk-modus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.lk-modus-karte {
  background: var(--weiss);
  border: 2px solid #e0e0e0;
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  display: block;
  transition: border-color 0.15s, transform 0.15s;
}
.lk-modus-karte:hover { transform: translateY(-2px); }
.lk-modus-karte input[type="radio"] { display: none; }
.lk-modus-karte-aktiv { border-color: var(--blau); }
.lk-modus-karte-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lk-modus-aktiv-tag {
  font-size: 0.7rem;
  background: var(--blau);
  color: var(--weiss);
  padding: 2px 6px;
  border-radius: 4px;
}
.lk-modus-karte-titel { font-size: 1.05rem; margin-bottom: 8px; color: var(--blau); }
.lk-modus-features {
  list-style: none;
  padding: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 10px;
}
.lk-modus-karte-zielgruppe { font-size: 0.82rem; color: var(--grau); line-height: 1.4; }

/* ── AFB-Balkendiagramm ──────────────────────────────────────── */
.lk-afb-balken { margin: 12px 0; }
.lk-afb-zeile {
  display: grid;
  grid-template-columns: 180px 1fr 220px;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
}
.lk-afb-label { font-size: 0.88rem; font-weight: 600; }
.lk-afb-bar-wrap {
  position: relative;
  background: var(--hell);
  border-radius: 4px;
  height: 24px;
  overflow: visible;
}
.lk-afb-bar {
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding-right: 6px;
  justify-content: flex-end;
  color: var(--weiss);
  font-size: 0.78rem;
  font-weight: 700;
  min-width: 24px;
  transition: width 0.3s;
}
.lk-afb-bar-1 { background: #74b9ff; }
.lk-afb-bar-2 { background: #0984e3; }
.lk-afb-bar-3 { background: #6c5ce7; }
.lk-afb-pct {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #2d3436;
  font-size: 0.82rem;
  font-weight: 700;
}
.lk-afb-soll {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: #c0392b;
  z-index: 2;
}
.lk-afb-soll::after {
  content: "Soll";
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: #c0392b;
}
.lk-afb-meta { font-size: 0.78rem; color: var(--grau); }

/* ── Heterogenität ───────────────────────────────────────────── */
.lk-heter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
.lk-heter-box {
  background: var(--weiss);
  padding: 14px;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--schatten);
  position: relative;
}
.lk-heter-zahl { font-size: 1.8rem; font-weight: 700; color: var(--blau); }
.lk-heter-label { font-size: 0.82rem; color: var(--grau); margin-top: 4px; }
.lk-heter-warnung, .lk-heter-mittel, .lk-heter-ok {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.lk-heter-warnung { background: #fdecec; color: var(--rot); }
.lk-heter-mittel  { background: #fff8e6; color: #a0700a; }
.lk-heter-ok      { background: #e8f5e9; color: var(--gruen); }

.lk-subhead {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 16px 0 8px;
  color: var(--grau);
}

.lk-streu-leiste {
  position: relative;
  height: 48px;
  background: linear-gradient(to right, #fdecec 0%, #fff8e6 30%, #e8f5e9 60%, #e3f2fd 100%);
  border-radius: 4px;
  margin: 8px 0 32px;
}
.lk-streu-punkt {
  position: absolute;
  top: 8px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--blau);
  border: 2px solid var(--weiss);
  transform: translateX(-50%);
  cursor: pointer;
}
.lk-streu-punkt:hover { transform: translateX(-50%) scale(1.4); }
.lk-streu-skala {
  position: absolute;
  bottom: -16px;
  left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--grau);
}

/* ── Mini-Heatmap ────────────────────────────────────────────── */
.lk-heatmap-mini-wrap {
  overflow-x: auto;
  max-width: 100%;
}
.lk-heatmap-mini {
  border-collapse: collapse;
  font-size: 0.78rem;
}
.lk-heatmap-mini th, .lk-heatmap-mini td {
  padding: 4px 6px;
  border: 1px solid #f0f0f0;
  text-align: center;
}
.lk-hm-cell-name { text-align: left; min-width: 100px; font-weight: 600; }
.lk-hm-cell-k {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  min-height: 80px;
  font-weight: 400;
  font-size: 0.72rem;
}
.lk-hm-cell { min-width: 32px; }
.lk-hm-souv { background: #1a7f4b; color: var(--weiss); }
.lk-hm-eig  { background: #2e86c1; color: var(--weiss); }
.lk-hm-begl { background: #d4a017; color: var(--weiss); }
.lk-hm-mit  { background: #c0392b; color: var(--weiss); }
.lk-hm-na   { background: #f5f5f5; color: var(--grau); }

/* ── Differenzierungsgruppen (Profi) ──────────────────────────── */
.lk-gruppen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.lk-gruppe-karte {
  background: var(--weiss);
  padding: 14px;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.lk-gruppe-karte h3 { font-size: 1rem; margin-bottom: 4px; color: var(--blau); }
.lk-gruppe-meta { font-size: 0.82rem; color: var(--grau); margin-bottom: 8px; }
.lk-gruppe-karte ul { list-style: none; padding: 0; font-size: 0.88rem; line-height: 1.5; }

/* ── Förderkarten (Modul C) ──────────────────────────────────── */
.lk-foerder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.lk-foerder-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--schatten);
  text-decoration: none;
  color: #2d3436;
  border-left: 4px solid #e0e0e0;
  transition: transform 0.15s;
  display: block;
}
.lk-foerder-karte:hover { transform: translateY(-2px); }
.lk-foerder-rot   { border-left-color: var(--rot); }
.lk-foerder-gelb  { border-left-color: var(--gelb); }
.lk-foerder-gruen { border-left-color: var(--gruen); }
.lk-foerder-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.lk-foerder-name { font-size: 1rem; }
.lk-foerder-zahlen { display: flex; gap: 12px; margin-bottom: 10px; }
.lk-foerder-zahl {
  flex: 1;
  text-align: center;
  background: var(--hell);
  padding: 6px;
  border-radius: 6px;
}
.lk-foerder-wert { display: block; font-weight: 700; font-size: 1.05rem; color: var(--blau); }
.lk-foerder-label { display: block; font-size: 0.7rem; color: var(--grau); }
.lk-foerder-hinweis { font-size: 0.82rem; color: var(--rot); margin-bottom: 6px; }
.lk-foerder-ok      { font-size: 0.82rem; color: var(--gruen); margin-bottom: 6px; }
.lk-foerder-link    { font-size: 0.82rem; color: var(--blau); font-weight: 600; }

/* ── Methodenkarten (Modul D) ────────────────────────────────── */
.lk-methoden-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.lk-methode-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  border-top: 4px solid #6c5ce7;
  overflow: hidden;
}
.lk-methode-kopf {
  padding: 12px 16px;
  background: #f8f7ff;
  border-bottom: 1px solid #e8e4ff;
}
.lk-methode-muster {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #6c5ce7;
  margin-bottom: 4px;
}
.lk-methode-titel { font-size: 1rem; }
.lk-methode-body { padding: 14px 16px; }
.lk-methode-name { margin-bottom: 8px; }
.lk-methode-zeile { font-size: 0.88rem; margin-bottom: 4px; }
.lk-methode-begruendung {
  background: var(--hell);
  padding: 10px;
  border-radius: 6px;
  margin: 10px 0;
  font-size: 0.88rem;
  line-height: 1.5;
}
.lk-methode-quelle { font-size: 0.78rem; color: var(--grau); }
.lk-methode-aktionen {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid #f0f0f0;
}

/* ── Coverage-Liste (Modul E + H) ─────────────────────────────── */
.lk-coverage-liste { display: flex; flex-direction: column; gap: 6px; }
.lk-coverage-zeile {
  display: grid;
  grid-template-columns: 220px 1fr 80px;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.lk-coverage-label { font-size: 0.92rem; }
.lk-coverage-bar-wrap {
  position: relative;
  background: var(--hell);
  height: 18px;
  border-radius: 4px;
}
.lk-coverage-bar {
  height: 100%;
  border-radius: 4px;
  background: var(--blau);
  transition: width 0.3s;
}
.lk-coverage-pct {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  font-weight: 700;
}
.lk-coverage-meta { font-size: 0.78rem; color: var(--grau); }
.lk-coverage-details {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 6px 12px;
  background: var(--hell);
  border-radius: 4px;
  font-size: 0.85rem;
}
.lk-coverage-fehlend { margin: 6px 0 0 16px; }

/* ── Konferenz-Profile (Modul F) ─────────────────────────────── */
.lk-konferenz-zeile {
  background: var(--weiss);
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  box-shadow: var(--schatten);
}
.lk-konferenz-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.lk-konferenz-satz { margin: 4px 0; padding-left: 16px; font-size: 0.95rem; line-height: 1.5; }
.lk-konferenz-staerke { border-left: 3px solid var(--gruen); }
.lk-konferenz-entw    { border-left: 3px solid var(--gelb); }
.lk-konferenz-empf    { border-left: 3px solid var(--blau); }

/* ── Eltern-Karten (Modul G) ─────────────────────────────────── */
.lk-eltern-auswahl {
  background: var(--hell);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 0.92rem;
}
.lk-eltern-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; list-style: none; padding: 0; }
.lk-eltern-liste a {
  font-size: 0.85rem;
  background: var(--weiss);
  padding: 3px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--blau);
}
.lk-eltern-karte {
  background: var(--weiss);
  padding: 20px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  box-shadow: var(--schatten);
}
.lk-eltern-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.lk-eltern-section-titel {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 16px 0 8px;
  color: var(--blau);
}
.lk-eltern-staerken { list-style: none; padding: 0; }
.lk-eltern-staerken li::before { content: "✓ "; color: var(--gruen); font-weight: bold; }
.lk-eltern-entw { list-style: none; padding: 0; }
.lk-eltern-entw li::before { content: "→ "; color: var(--gelb); font-weight: bold; }
.lk-eltern-empf {
  font-size: 0.95rem;
  font-style: italic;
  padding: 10px 14px;
  background: var(--hell);
  border-radius: 6px;
  margin-top: 6px;
}
.lk-eltern-meta { font-size: 0.82rem; color: var(--grau); margin-top: 12px; }

/* ── Säule-3-Banner (Praxis-Schutz) ──────────────────────────── */
.lk-praxis-banner {
  background: #f3e5f5;
  border-left: 4px solid #6c5ce7;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.lk-praxis-icon { font-size: 1.4rem; }
.lk-praxis-frage {
  background: #f3e5f5;
  border-left: 4px solid #6c5ce7;
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: 16px;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ── Drift-Anzeige (Modul J) ──────────────────────────────────── */
.lk-drift-grid {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}
.lk-drift-box {
  background: var(--weiss);
  padding: 14px;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--schatten);
}
.lk-drift-label { font-size: 0.82rem; color: var(--grau); margin-bottom: 6px; }
.lk-drift-wert { font-size: 1.6rem; font-weight: 700; color: var(--blau); }
.lk-drift-pfeil {
  font-size: 2rem;
  text-align: center;
  color: var(--grau);
}
.lk-drift-fazit {
  background: var(--hell);
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.lk-drift-details {
  background: var(--hell);
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 12px;
}
.lk-drift-streifen {
  position: relative;
  height: 80px;
  background: linear-gradient(to top, #fdecec 0%, #fff8e6 25%, #e8f5e9 50%, #e3f2fd 75%, #d4edda 100%);
  border-radius: 4px;
  margin-top: 10px;
}
.lk-drift-punkt {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #2d3436;
}

/* ── Abgleich-Box (Modul J) ──────────────────────────────────── */
.lk-abgleich-box {
  background: var(--weiss);
  padding: 16px;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  text-align: center;
}
.lk-abgleich-zahl { font-size: 2.5rem; font-weight: 700; color: var(--blau); }
.lk-abgleich-label { font-size: 0.85rem; color: var(--grau); margin-bottom: 6px; }
.lk-abgleich-interpretation {
  font-size: 1rem;
  font-weight: 600;
  color: #2d3436;
  margin: 8px 0;
}
.lk-abgleich-meta { font-size: 0.88rem; color: var(--grau); margin-top: 10px; line-height: 1.5; }

/* ── Print-Helfer ─────────────────────────────────────────────── */
.lk-print-only { display: none; }
@media print { .lk-print-only { display: block; } }

/* ── Section-Titel (für Lehrer-Module) ────────────────────────── */
.section-titel {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--blau);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-titel .section-icon { font-size: 1.3rem; }

/* ═══════════════════════════════════════════════════════════════
   Variante A — Aufgabe-Anlage-Form (Modul E)
   Klassen: .aufgabe-form, .form-zeile, .kompetenz-cluster, .tag-afb
   ═══════════════════════════════════════════════════════════════ */

.aufgabe-form { margin-top: 8px; }

.form-zeile { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.form-zeile label { font-weight: 600; color: #2d3436; font-size: 0.95rem; }
.form-zeile input[type="text"],
.form-zeile input[type="date"],
.form-zeile select,
.form-zeile textarea {
  padding: 8px 10px;
  border: 1px solid var(--grau, #d1d5db);
  border-radius: var(--radius, 6px);
  font-family: inherit;
  font-size: 1rem;
  background: var(--weiss, #fff);
}
.form-zeile textarea { resize: vertical; min-height: 80px; }
.form-zeile input:focus, .form-zeile select:focus, .form-zeile textarea:focus {
  outline: none;
  border-color: var(--blau, #2563eb);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.form-zeile-grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  flex-direction: row;
}
.form-zeile-grid3 > div { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 720px) {
  .form-zeile-grid3 { grid-template-columns: 1fr; }
}

.pflicht { color: var(--rot, #dc2626); font-weight: 700; }
.form-optional { color: var(--grau, #6b7280); font-weight: 400; font-size: 0.85rem; }
.form-hinweis { color: var(--grau, #6b7280); font-size: 0.82rem; margin-top: 2px; }

.form-aktionen {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--grau, #e5e7eb);
}

/* ── Klapp-Cluster für Kompetenz-Auswahl ─────────────────────── */
.kompetenz-cluster-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.kompetenz-cluster {
  background: var(--weiss, #fff);
  border: 1px solid var(--grau, #e5e7eb);
  border-radius: var(--radius, 6px);
  padding: 0;
  overflow: hidden;
}
.kompetenz-cluster > summary {
  cursor: pointer;
  padding: 10px 14px;
  background: #f8fafc;
  font-size: 0.95rem;
  list-style: none;
  user-select: none;
}
.kompetenz-cluster > summary::-webkit-details-marker { display: none; }
.kompetenz-cluster > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s;
}
.kompetenz-cluster[open] > summary::before { transform: rotate(90deg); }
.kompetenz-cluster[open] > summary { background: #eef2f7; }

.kompetenz-liste { list-style: none; margin: 0; padding: 8px 14px 12px; }
.kompetenz-zeile { padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.kompetenz-zeile:last-child { border-bottom: none; }
.kompetenz-zeile > label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 400;
  font-size: 0.94rem;
}
.kompetenz-zeile > label input[type="checkbox"] { width: 16px; height: 16px; }
.kompetenz-name { flex: 1; }

.kompetenz-beschreibung {
  margin: 4px 0 0 24px;
  font-size: 0.85rem;
  color: var(--grau, #6b7280);
}
.kompetenz-beschreibung > summary { cursor: pointer; }
.kompetenz-beschreibung > p { margin: 6px 0 0; line-height: 1.5; }

/* ── AFB-Tags ─────────────────────────────────────────────────── */
.tag-afb {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tag-afb-1 { background: #d1fae5; color: #065f46; }
.tag-afb-2 { background: #fef3c7; color: #92400e; }
.tag-afb-3 { background: #fee2e2; color: #991b1b; }

.muster-kuerzel {
  background: #fff4cc;
  padding: 0 4px;
  border-radius: 3px;
  font-family: ui-monospace, 'SF Mono', monospace;
}

/* ═══════════════════════════════════════════════════════════════
   Variante B1 — Offene Abgaben (Liste + Detail)
   ═══════════════════════════════════════════════════════════════ */

.offen-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.offen-banner a {
  margin-left: auto;
  white-space: nowrap;
}

/* ── Listen-View ── */
.offen-liste {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}
.offen-zeile {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.offen-zeile:hover {
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}
.offen-link {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
}
.offen-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.offen-schueler {
  font-weight: 600;
  font-size: 1rem;
  color: #111;
}
.offen-meta {
  font-size: 0.85rem;
  color: #6b7280;
}
.offen-fuss {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #4b5563;
  flex-wrap: wrap;
}
.offen-stufe {
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.78rem;
  color: #475569;
}
.offen-vorschlaege {
  color: #1d4ed8;
  font-weight: 500;
}
.offen-warnung {
  color: #92400e;
  background: #fff4cc;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.78rem;
}
.offen-leer {
  color: #6b7280;
  font-style: italic;
  font-size: 0.85rem;
}
.offen-pfeil {
  margin-left: auto;
  color: #6b7280;
  font-size: 1.1rem;
}

/* ── Detail-View ── */
.offen-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.offen-meta-grid > div {
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
}
.offen-meta-grid .meta-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #6b7280;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.offen-ocr {
  margin-top: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 12px;
}
.offen-ocr summary {
  cursor: pointer;
  font-size: 0.9rem;
}
.offen-ocr-text {
  margin: 8px 0 0;
  white-space: pre-wrap;
  font-size: 0.85rem;
  line-height: 1.45;
  font-family: 'Consolas', 'Courier New', monospace;
  background: #fff;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  max-height: 280px;
  overflow-y: auto;
}

.offen-vorschlag-liste {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}
.offen-vorschlag {
  background: #f8fafc;
  border-left: 3px solid #2563eb;
  border-radius: 4px;
  padding: 10px 14px;
}
.offen-vorschlag-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.offen-vorschlag-name {
  font-weight: 600;
  font-size: 0.95rem;
}
.offen-vorschlag-konfidenz {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 0.85rem;
  color: #1d4ed8;
  white-space: nowrap;
}
.offen-vorschlag-id {
  font-size: 0.78rem;
  color: #6b7280;
  margin: 2px 0 4px;
}
.offen-vorschlag-id code {
  background: transparent;
}
.offen-vorschlag-begruendung {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #1f2937;
  margin: 4px 0 0;
}
.offen-vorschlag-beschreibung {
  margin-top: 6px;
  font-size: 0.85rem;
}
.offen-vorschlag-beschreibung summary {
  cursor: pointer;
  color: #4b5563;
}
.offen-vorschlag-beschreibung p {
  margin: 4px 0 0;
  color: #374151;
}

.offen-katalog .kompetenz-zeile-vorschlag {
  background: #eff6ff;
  border-left: 3px solid #2563eb;
  padding-left: 8px;
  border-radius: 4px;
}

.tag-vorschlag {
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
}
.tag-warn {
  background: #fff4cc;
  color: #92400e;
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
}

.offen-verwerfen-block {
  border: 1px solid #fecaca;
  background: #fef2f2;
  border-radius: 8px;
  padding: 16px;
  margin-top: 20px;
}
.offen-verwerfen-form {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.offen-verwerfen-form input[type="text"] {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.9rem;
}
.btn-danger {
  background: #dc2626;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger:hover {
  background: #b91c1c;
}