/* ═══════════════════════════════════════════════════════════════
   Lernkompass — Design System
   Prinzipien: Klar, zugänglich, motivierend. Kein Overdesign.
   ═══════════════════════════════════════════════════════════════ */

/* ── Custom Properties ─────────────────────────────────────────── */
:root {
  --gruen:   #1a7f4b;
  --blau:    #2e86c1;
  --gelb:    #d4a017;
  --rot:     #c0392b;
  --grau:    #636e72;
  --hell:    #f8f9fa;
  --weiss:   #ffffff;
  --schatten: 0 2px 8px rgba(0,0,0,0.08);
  --radius:   10px;
  --font:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Reset & Basis ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--hell);
  color: #2d3436;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ────────────────────────────────────────────────────── */
.app-header {
  background: var(--weiss);
  border-bottom: 3px solid #2e86c1;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--schatten);
}

.header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo { display: flex; align-items: center; gap: 8px; }
.logo-icon { font-size: 1.5rem; }
.logo-text  { font-weight: 700; font-size: 1.1rem; color: var(--blau); }
.logo-sub   { font-size: 0.8rem; color: var(--grau); margin-left: 4px; }

.header-nav { display: flex; align-items: center; gap: 12px; }
.nutzer-info { font-size: 0.9rem; display: flex; align-items: center; gap: 8px; }

.rolle-badge {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px; letter-spacing: 0.5px;
}
.rolle-schueler      { background: #e3f2fd; color: #1565c0; }
.rolle-fachlehrer    { background: #e8f5e9; color: #2e7d32; }
.rolle-klassenlehrer { background: #f3e5f5; color: #6a1b9a; }
.rolle-schulleitung  { background: #fff3e0; color: #e65100; }
.rolle-eltern        { background: #fce4ec; color: #880e4f; }

.btn-logout {
  background: none; border: 1px solid #dfe6e9; border-radius: 6px;
  padding: 5px 12px; font-size: 0.85rem; color: var(--grau);
  text-decoration: none; cursor: pointer;
  transition: background 0.15s;
}
.btn-logout:hover { background: var(--hell); }

/* ── Main Layout ───────────────────────────────────────────────── */
.app-main {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  flex: 1;
  width: 100%;
}

/* ── Footer ────────────────────────────────────────────────────── */
.app-footer {
  text-align: center; font-size: 0.78rem; color: #b2bec3;
  padding: 16px; border-top: 1px solid #dfe6e9;
}

/* ── Cockpit Header ────────────────────────────────────────────── */
.cockpit-header {
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.cockpit-header h1 { font-size: 1.8rem; font-weight: 700; color: #2d3436; margin: 0; }
.cockpit-meta { font-size: 0.9rem; color: var(--grau); margin-top: 4px; }
.cockpit-greeting { flex: 1; min-width: 0; }
.cockpit-meta-right {
  text-align: right;
  font-size: 0.9rem;
  color: var(--grau);
  flex-shrink: 0;
}

/* ── Cockpit-Banner (Hinweis-/Status-Box, quer durch alle Cockpits) ── */
.cockpit-banner {
  padding: 12px 16px;
  border-radius: var(--radius, 8px);
  margin: 16px 0;
  font-size: 0.95rem;
  line-height: 1.5;
  border-left: 4px solid var(--grau, #94a3b8);
  background: var(--hell, #f8fafc);
  color: #1f2937;
}
.cockpit-banner code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 0.88em;
}
.cockpit-banner-ok {
  background: #ecfdf5;
  border-left-color: var(--gruen, #16a34a);
  color: #065f46;
}
.cockpit-banner-warn {
  background: #fff4cc;
  border-left-color: var(--gelb, #d97706);
  color: #92400e;
}
.cockpit-banner-info {
  background: #eff6ff;
  border-left-color: var(--blau, #2563eb);
  color: #1e40af;
}

.cockpit-empty {
  color: var(--grau, #6b7280);
  font-style: italic;
  text-align: center;
  padding: 20px;
  background: var(--hell, #f8fafc);
  border-radius: var(--radius, 8px);
}

.btn-link {
  color: var(--blau, #2563eb);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
}
.btn-link:hover { text-decoration: underline; }
.btn-link-warn {
  background: var(--gelb, #fbbf24);
  color: #78350f;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
}
.btn-link-warn:hover { text-decoration: none; background: #f59e0b; }

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
  background: var(--weiss); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 20px 24px; margin-bottom: 20px;
  display: flex; gap: 16px; align-items: flex-start;
}
.card-icon { font-size: 1.6rem; flex-shrink: 0; }
.card-content h2 { font-size: 1rem; font-weight: 600; margin-bottom: 8px; }

.card-wochenspiegel {
  background: linear-gradient(135deg, #e3f2fd 0%, #f8f9fa 100%);
  border-left: 4px solid var(--blau);
}
.wochenspiegel-text {
  font-size: 1rem; line-height: 1.7; color: #2d3436;
  font-style: italic;
}

/* ── Sektionen ─────────────────────────────────────────────────── */
.section-block { margin-bottom: 32px; }

.section-titel {
  font-size: 1.1rem; font-weight: 700; color: #2d3436;
  margin-bottom: 16px; display: flex; align-items: center; gap: 8px;
  border-bottom: 2px solid #dfe6e9; padding-bottom: 8px;
}
.section-icon { font-size: 1.2rem; }

.badge-count {
  background: var(--blau); color: white; font-size: 0.75rem; font-weight: 700;
  padding: 2px 8px; border-radius: 12px; margin-left: 4px;
}

/* ── Kompetenz-Karten (Wiederholung) ───────────────────────────── */
.kompetenz-liste { display: flex; flex-direction: column; gap: 12px; }

.kompetenz-karte {
  background: var(--weiss); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 16px 20px;
  display: flex; gap: 16px; align-items: center;
  border-left: 4px solid transparent;
  transition: transform 0.1s;
}
.kompetenz-karte:hover { transform: translateX(2px); }

.dringlichkeit-hoch   { border-left-color: var(--rot); }
.dringlichkeit-mittel { border-left-color: var(--gelb); }
.dringlichkeit-gering { border-left-color: var(--blau); }

/* Retention-Ring (SVG) */
.retention-ring { width: 56px; height: 56px; flex-shrink: 0; }
.ring-svg       { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg   { fill: none; stroke: #f0f0f0; stroke-width: 3.5; }
.ring-fill { fill: none; stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray 0.5s; }
.ring-text {
  fill: #2d3436; font-size: 9px; font-weight: 700;
  dominant-baseline: central; text-anchor: middle;
  transform: rotate(90deg) translateY(-36px);
  transform-origin: center;
  transform-box: fill-box;
}

.karte-rechts { flex: 1; }
.karte-frage  { font-size: 0.95rem; font-weight: 600; color: #2d3436; margin-bottom: 4px; }
.karte-kompetenz { font-size: 0.8rem; color: var(--grau); margin-bottom: 8px; }
.karte-tipp  { font-size: 0.82rem; color: #636e72; background: #f8f9fa; padding: 6px 10px; border-radius: 6px; margin-bottom: 8px; }
.karte-meta  { display: flex; gap: 12px; align-items: center; }
.wdh-info    { font-size: 0.8rem; color: var(--grau); }
.wdh-info.alarm { color: var(--rot); font-weight: 600; }

/* ── Stabile Kompetenzen ───────────────────────────────────────── */
.stabil-liste { display: flex; flex-direction: column; gap: 10px; }
.stabil-karte {
  background: #e8f5e920; border: 1px solid #c8e6c9; border-radius: var(--radius);
  padding: 14px 18px; display: flex; gap: 12px; align-items: center;
}
.stabil-icon  { font-size: 1.3rem; flex-shrink: 0; }
.stabil-text  { flex: 1; }
.stabil-meta  { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.stufe-badge  { font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 12px; }
.retention-text { font-size: 0.78rem; color: var(--grau); }

/* ── In Entwicklung ────────────────────────────────────────────── */
.entwicklung-liste { display: flex; flex-direction: column; gap: 10px; }
.entwicklung-karte {
  background: var(--weiss); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 14px 18px;
}
.entwicklung-balken {
  height: 6px; background: #f0f0f0; border-radius: 3px; margin-bottom: 10px; overflow: hidden;
}
.balken-fill { height: 100%; background: var(--gelb); border-radius: 3px; transition: width 0.5s; }

/* ── Feedback ──────────────────────────────────────────────────── */
.feedback-karte {
  background: var(--weiss); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 16px 20px; margin-bottom: 12px;
  border-left: 4px solid var(--blau);
}
.feedback-sekundaer { opacity: 0.7; border-left-color: #b2bec3; }
.feedback-meta      { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.feedback-datum     { font-size: 0.8rem; color: var(--grau); }
.feedback-kompetenz { font-size: 0.82rem; color: var(--grau); margin-bottom: 8px; }
.feedback-text      { font-size: 0.95rem; line-height: 1.6; font-style: italic; color: #2d3436; }

/* ── Empty State ───────────────────────────────────────────────── */
.empty-state {
  text-align: center; padding: 24px; color: var(--grau);
  font-size: 0.95rem; background: var(--weiss);
  border-radius: var(--radius); border: 2px dashed #dfe6e9;
}
.empty-state span { display: block; font-size: 2rem; margin-bottom: 8px; }

/* ── Login ─────────────────────────────────────────────────────── */
.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: linear-gradient(135deg, #2e86c1 0%, #1a5276 100%);
}

.login-container {
  background: var(--weiss); border-radius: 16px;
  padding: 40px 36px; width: 100%; max-width: 400px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.login-logo { text-align: center; margin-bottom: 28px; }
.login-icon { font-size: 3rem; display: block; margin-bottom: 8px; }
.login-logo h1 { font-size: 1.6rem; font-weight: 700; color: var(--blau); margin-bottom: 4px; }
.login-logo p  { font-size: 0.88rem; color: var(--grau); }

.login-fehler {
  background: #fdecec; border: 1px solid #f5c6c6; border-radius: 8px;
  padding: 10px 14px; font-size: 0.88rem; color: var(--rot); margin-bottom: 16px;
}

.login-form { display: flex; flex-direction: column; gap: 16px; }

.form-gruppe { display: flex; flex-direction: column; gap: 6px; }
.form-gruppe label { font-size: 0.85rem; font-weight: 600; color: #2d3436; }
.form-gruppe input {
  padding: 12px 14px; border: 2px solid #dfe6e9; border-radius: 8px;
  font-size: 1rem; transition: border-color 0.2s;
  font-family: var(--font);
}
.form-gruppe input:focus { outline: none; border-color: var(--blau); }

.btn-primary {
  background: var(--blau); color: white; border: none; border-radius: 8px;
  padding: 13px 24px; font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: background 0.2s; text-decoration: none; display: inline-block;
  text-align: center;
}
.btn-primary:hover { background: #2471a3; }
.btn-block { width: 100%; }

.login-hinweis {
  text-align: center; font-size: 0.82rem; color: var(--grau); margin-top: 16px;
}
.login-datenschutz {
  text-align: center; font-size: 0.78rem; color: #b2bec3; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid #f0f0f0;
}

/* ── Fehler-Seite ───────────────────────────────────────────────── */
.fehler-container {
  text-align: center; padding: 60px 20px;
}
.fehler-icon { font-size: 3rem; margin-bottom: 16px; }
.fehler-container h1 { font-size: 1.4rem; margin-bottom: 12px; }
.fehler-container p  { color: var(--grau); margin-bottom: 24px; }

/* ── Phase 2: Fachlehrer-Cockpit ───────────────────────────────── */

.back-link {
  display: inline-block; font-size: 0.85rem; color: var(--blau);
  text-decoration: none; margin-bottom: 8px;
}
.back-link:hover { text-decoration: underline; }

/* Klassen-Grid */
.klassen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.klassen-kachel {
  background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 18px 20px; text-decoration: none; color: inherit;
  border-left: 5px solid transparent; display: block; transition: transform 0.1s;
}
.klassen-kachel:hover { transform: translateY(-2px); }
.ampel-rot   { border-left-color: var(--rot);   }
.ampel-gelb  { border-left-color: var(--gelb);  }
.ampel-gruen { border-left-color: var(--gruen); }

.kachel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kachel-klasse { font-weight: 700; font-size: 1.05rem; }
.ampel-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.ampel-dot-rot   { background: var(--rot);   }
.ampel-dot-gelb  { background: var(--gelb);  }
.ampel-dot-gruen { background: var(--gruen); }
.kachel-stats { font-size: 0.82rem; color: var(--grau); margin-bottom: 10px; }
.kachel-bedarf { font-size: 0.82rem; }
.kachel-bedarf-label { font-weight: 600; color: var(--grau); margin-bottom: 4px; }
.kachel-bedarf-item  { color: #2d3436; margin: 2px 0; }
.kachel-ok  { font-size: 0.82rem; color: var(--gruen); margin-bottom: 8px; }
.kachel-link { font-size: 0.82rem; color: var(--blau); margin-top: 10px; font-weight: 600; }

/* Tabellen */
.aufgaben-tabelle-wrapper, .bedarf-tabelle-wrapper, .profil-tabelle-wrapper {
  overflow-x: auto; border-radius: var(--radius);
}
.aufgaben-tabelle, .bedarf-tabelle, .profil-tabelle {
  width: 100%; border-collapse: collapse; background: var(--weiss);
  box-shadow: var(--schatten); border-radius: var(--radius); overflow: hidden;
}
.aufgaben-tabelle th, .bedarf-tabelle th, .profil-tabelle th {
  background: #f8f9fa; padding: 10px 14px; text-align: left;
  font-size: 0.82rem; font-weight: 700; color: var(--grau);
  border-bottom: 2px solid #dfe6e9; white-space: nowrap;
}
.aufgaben-tabelle td, .bedarf-tabelle td, .profil-tabelle td {
  padding: 10px 14px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; font-size: 0.88rem;
}
.aufgaben-tabelle tr:last-child td, .bedarf-tabelle tr:last-child td { border-bottom: none; }
.td-meta { color: var(--grau); font-size: 0.82rem; }
.td-zahl { text-align: right; font-weight: 700; font-size: 0.9rem; }
.td-alarm { color: var(--rot); font-weight: 700; }
.td-ok    { color: var(--gruen); font-size: 0.82rem; }
.td-kernfrage  { font-size: 0.78rem; color: var(--grau); margin-top: 2px; }
.td-kompname   { font-size: 0.88rem; }

.row-kritisch { background: #fff5f5; }
.row-gut      { background: #f0fdf4; }

.tag { display: inline-block; background: #f0f0f0; color: #636e72; font-size: 0.72rem; padding: 2px 8px; border-radius: 10px; margin: 2px 2px 0 0; }
.tag-typ  { background: #e3f2fd; color: #1565c0; }
.tag-afb  { background: #f3e5f5; color: #6a1b9a; }
.tag-kern { background: #fff3cd; color: #856404; }
.btn-klein { font-size: 0.8rem; color: var(--blau); text-decoration: none; font-weight: 600; white-space: nowrap; }
.btn-klein:hover { text-decoration: underline; }

/* Bedarf-Tabelle */
.bedarf-row-rot td:first-child  { border-left: 3px solid var(--rot);  }
.bedarf-row-gelb td:first-child { border-left: 3px solid var(--gelb); }
.ampel-badge { font-size: 0.78rem; padding: 2px 8px; border-radius: 10px; }
.ampel-badge-rot   { background: #fdecec; color: var(--rot); }
.ampel-badge-gelb  { background: #fff8e6; color: #a0700a; }
.ampel-badge-gruen { background: #e8f5e9; color: var(--gruen); }

.anteil-balken-wrap { height: 5px; background: #f0f0f0; border-radius: 3px; margin-bottom: 4px; width: 120px; overflow: hidden; }
.anteil-balken-fill { height: 100%; border-radius: 3px; transition: width 0.4s; }
.anteil-text { font-size: 0.78rem; color: var(--grau); }

/* Schnitt-Grid */
.schnitt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.schnitt-kachel {
  background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 16px 18px; text-align: center;
}
.schnitt-pct   { font-size: 2rem; font-weight: 700; margin-bottom: 4px; }
.schnitt-label { font-size: 0.85rem; font-weight: 600; color: #2d3436; }
.schnitt-meta  { font-size: 0.75rem; color: var(--grau); margin-top: 4px; }

/* Gruppen */
.gruppen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .gruppen-grid { grid-template-columns: 1fr; } }
.gruppen-karte { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: 14px 16px; }
.gruppen-a { border-top: 3px solid var(--gruen); }
.gruppen-b { border-top: 3px solid var(--gelb);  }
.gruppen-c { border-top: 3px solid var(--rot);   }
.gruppen-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.gruppen-icon   { font-size: 1.1rem; }
.gruppen-titel  { font-size: 0.88rem; font-weight: 700; flex: 1; }
.gruppen-hinweis { font-size: 0.75rem; color: var(--grau); margin-bottom: 8px; }
.gruppen-liste { list-style: none; font-size: 0.85rem; }
.gruppen-liste li { padding: 3px 0; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
.gruppen-liste li:last-child { border-bottom: none; }
.gruppen-leer { font-size: 0.82rem; color: var(--grau); font-style: italic; }
.profil-link { font-size: 0.72rem; color: var(--blau); text-decoration: none; margin-left: 8px; }
.profil-link:hover { text-decoration: underline; }

/* Schüler-Grid */
.schueler-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.schueler-chip {
  background: var(--weiss); border-radius: 20px; box-shadow: var(--schatten);
  padding: 7px 14px; text-decoration: none; color: inherit;
  display: flex; align-items: center; gap: 10px; font-size: 0.88rem;
  transition: transform 0.1s;
}
.schueler-chip:hover { transform: translateY(-1px); }
.schueler-name { font-weight: 600; }
.schueler-pct  { font-weight: 700; font-size: 0.85rem; }

/* Stats-Kacheln */
.stats-kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
@media (max-width: 600px) { .stats-kacheln { grid-template-columns: repeat(2, 1fr); } }
.stats-kachel {
  background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 14px 16px; text-align: center;
}
.stats-zahl  { font-size: 1.8rem; font-weight: 700; margin-bottom: 4px; }
.stats-label { font-size: 0.75rem; color: var(--grau); }

/* Profil-Tabelle */
.stufe-balken-wrap { height: 5px; background: #f0f0f0; border-radius: 3px; margin-bottom: 4px; width: 80px; overflow: hidden; }
.stufe-balken-fill { height: 100%; border-radius: 3px; }
.stufe-text { font-size: 0.78rem; font-weight: 700; }
.marker-liste { list-style: none; font-size: 0.78rem; color: #c0392b; }
.marker-liste li { margin: 1px 0; }

/* Aufgaben-Auswertung */
.auswertung-block {
  background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 18px 22px; margin-bottom: 16px;
}
.auswertung-header { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.auswertung-titel-wrap { flex: 1; }
.auswertung-komp { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.auswertung-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.auswertung-pct-ring { flex-shrink: 0; }
.pct-kreis {
  width: 60px; height: 60px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pct-text { font-size: 0.9rem; font-weight: 700; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

.verteilung-wrap { margin-bottom: 12px; }
.verteilung-zeile { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.verteilung-label { font-size: 0.78rem; width: 130px; flex-shrink: 0; color: var(--grau); }
.verteilung-balken-wrap { flex: 1; height: 10px; background: #f0f0f0; border-radius: 5px; overflow: hidden; }
.verteilung-balken-fill { height: 100%; border-radius: 5px; transition: width 0.5s; }
.verteilung-n { font-size: 0.78rem; width: 20px; text-align: right; font-weight: 700; }

.fehler-block { background: #f8f9fa; border-radius: 8px; padding: 10px 14px; margin-top: 10px; }
.fehler-titel { font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; color: #2d3436; }
.fehler-zeile { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.fehler-balken-wrap { width: 80px; height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.fehler-balken-fill { height: 100%; background: #e17055; border-radius: 3px; }
.fehler-marker { font-size: 0.8rem; flex: 1; }
.fehler-n { font-size: 0.75rem; color: var(--grau); white-space: nowrap; }
.fehler-liste { list-style: none; font-size: 0.82rem; }
.fehler-liste li { padding: 3px 0; }
.fehler-n-klein { font-size: 0.75rem; color: var(--grau); }

/* ═══════════════════════════════════════════════════════════════
   Phase 3 — Tutor/Klassenlehrer-Cockpit
   ═══════════════════════════════════════════════════════════════ */

/* ── Tutanden-Grid ──────────────────────────────────────────────── */
.tutanden-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.tutand-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tutand-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.tutand-name { font-size: 1.15rem; font-weight: 700; margin: 0; }
.tutand-meta { font-size: 0.82rem; color: var(--grau); margin: 2px 0 0; }

.tutand-avg-wrap { text-align: center; flex-shrink: 0; }
.tutand-avg-zahl { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1; }
.tutand-avg-label { font-size: 0.72rem; color: var(--grau); }

/* ── Mini-Trend-Balken ──────────────────────────────────────────── */
.trend-mini {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 56px;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 4px;
}

.trend-mini-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.trend-mini-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}

.trend-mini-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  min-height: 3px;
  transition: height 0.3s;
}

.trend-mini-label {
  font-size: 0.62rem;
  color: var(--grau);
  text-align: center;
  white-space: nowrap;
}

/* ── Status-Chips ────────────────────────────────────────────────── */
.tutand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
}

.chip-lerntyp   { background: #e8f4fd; color: #2e86c1; }
.chip-staerken  { background: #e8f8f0; color: #1a7f4b; }
.chip-kritisch  { background: #fef5f4; color: #c0392b; }

/* ── Gesprächs-Button ────────────────────────────────────────────── */
.tutand-actions { margin-top: 4px; }

.btn-gespraech {
  display: inline-block;
  background: var(--blau);
  color: var(--weiss);
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.2s;
  width: 100%;
  text-align: center;
}

.btn-gespraech:hover { background: #1a6fa0; }

/* ── Hinweis-Text ────────────────────────────────────────────────── */
.hinweis-text { color: var(--grau); font-size: 0.9rem; }
.hinweis-text a { color: var(--blau); }
.leer-text { color: var(--grau); font-style: italic; padding: 12px 0; }

/* ── Lernverlauf-Balken (groß, Gesprächsvorbereitung) ────────────── */
.verlauf-wrap {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  height: 160px;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 8px;
  margin-top: 8px;
}

.verlauf-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 4px;
}

.verlauf-bar-outer {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}

.verlauf-bar-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 4px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.verlauf-bar-pct {
  font-size: 0.72rem;
  font-weight: 700;
  color: white;
  padding-top: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.verlauf-klasse-label {
  font-size: 0.78rem;
  color: #2d3436;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.verlauf-n-label {
  font-size: 0.68rem;
  color: var(--grau);
  text-align: center;
}

/* ── Profil-Doppel (AFB + Bereich nebeneinander) ─────────────────── */
.profil-doppel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.section-titel-klein {
  font-size: 1rem;
  font-weight: 700;
  color: #2d3436;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── AFB-Profilbalken ─────────────────────────────────────────────── */
.afb-profil-wrap { display: flex; flex-direction: column; gap: 10px; }

.afb-zeile {
  display: grid;
  grid-template-columns: 120px 1fr 40px 36px;
  align-items: center;
  gap: 8px;
  font-size: 0.83rem;
}

.afb-label { color: #2d3436; font-weight: 600; font-size: 0.8rem; }

.afb-balken-wrap {
  background: #f0f0f0;
  border-radius: 4px;
  height: 12px;
  overflow: hidden;
}

.afb-balken-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s;
}

.afb-pct { font-weight: 700; font-size: 0.82rem; text-align: right; }
.afb-n   { color: var(--grau); font-size: 0.75rem; }

/* ── Lerntyp-Karte ────────────────────────────────────────────────── */
.lerntyp-karte {
  background: linear-gradient(135deg, #e8f4fd 0%, #f0f8ff 100%);
  border-left: 4px solid var(--blau);
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.lerntyp-badge {
  background: var(--blau);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.lerntyp-text { color: #2d3436; font-size: 0.9rem; line-height: 1.5; }

/* ── Gesprächs-Listen (Stärken + Entwicklungsfelder) ─────────────── */
.gespraech-liste { display: flex; flex-direction: column; gap: 10px; }

.gespraech-zeile {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  border-left: 4px solid transparent;
}

.gespraech-zeile-staerke {
  background: #f0fff5;
  border-color: var(--gruen);
}

.gespraech-zeile-entwicklung {
  background: #fff8f7;
  border-color: var(--rot);
}

.gespraech-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.gespraech-name { font-size: 0.95rem; font-weight: 700; color: #2d3436; }
.gespraech-frage { font-size: 0.83rem; color: var(--grau); font-style: italic; }

.gespraech-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.gespraech-marker { font-size: 0.78rem; color: var(--gelb); margin-top: 4px; }

.gespraech-werte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Stufe-Ring (klein, für Gesprächslisten) */
.stufe-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stufe-ring-text {
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2d3436;
}

.retention-klein { font-size: 0.68rem; color: var(--grau); text-align: center; }

/* ── KI-Gesprächsimpuls ──────────────────────────────────────────── */
.gespraech-impuls-section .section-block { border-top: none; }

.impuls-karte {
  background: linear-gradient(135deg, #fffdf0 0%, #fffff8 100%);
  border: 2px solid var(--gelb);
  border-radius: 12px;
  padding: 20px 24px;
}

.impuls-text {
  font-size: 1.05rem;
  font-style: italic;
  color: #2d3436;
  line-height: 1.7;
  margin-bottom: 10px;
}

.impuls-meta {
  font-size: 0.75rem;
  color: var(--grau);
}

/* ── Druck/Aktions-Leiste ────────────────────────────────────────── */
.druck-hinweis {
  display: flex;
  gap: 10px;
  padding: 16px 0;
  flex-wrap: wrap;
}

.btn-druck {
  background: var(--grau);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-druck:hover { background: #2d3436; }

.btn-json {
  background: #f0f0f0;
  color: var(--grau);
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: monospace;
}

.btn-secondary {
  background: #e8f4fd;
  color: var(--blau);
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.83rem;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   PHASE 4 — Schulleitung-Cockpit
   ════════════════════════════════════════════════════════════════ */

/* ── Datenschutz-Hinweis-Banner ─────────────────────────────────── */
.datenschutz-hinweis {
  background: #fff8e1;
  border: 1.5px solid var(--gelb);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-size: 0.88rem;
  color: #5d4037;
  margin-bottom: 20px;
}

/* ── Stats-Kacheln (4er-Grid) ───────────────────────────────────── */
.stats-kacheln {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stats-kachel {
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.stats-zahl {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--blau);
  line-height: 1;
}

.stats-label {
  font-size: 0.78rem;
  color: var(--grau);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Schulleitung-Tabelle ───────────────────────────────────────── */
.sl-tabelle-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
}

.sl-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.sl-tabelle thead th {
  background: #f0f4f8;
  padding: 10px 12px;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--grau);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #e0e0e0;
}

.sl-tabelle tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.sl-tabelle tbody tr:hover { background: #fafbfc; }

.sl-zeile-prototyp { background: #fffdf0 !important; }
.sl-zeile-prototyp td { color: #856404; }

.sl-klasse-zelle {
  min-width: 130px;
  border-right: 1px solid #e8e8e8;
}

.sl-klasse-zelle strong { font-size: 0.95rem; color: #2d3436; }

.sl-mini-balken-wrap {
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  margin: 6px 0 2px;
  overflow: hidden;
  width: 100%;
}

.sl-mini-balken {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s;
}

.sl-avg-pct { font-size: 0.75rem; color: var(--grau); }

.sl-zeile-balken-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sl-zeile-balken {
  height: 10px;
  border-radius: 5px;
  flex-shrink: 0;
  transition: width 0.3s;
}

.sl-zeile-pct { font-size: 0.82rem; font-weight: 700; white-space: nowrap; }

.sl-zahl { text-align: right; font-size: 0.85rem; color: #2d3436; }

.sl-proto-tag {
  font-size: 0.75rem;
  color: var(--gelb);
  margin-left: 4px;
  cursor: help;
}

/* ── Schulleitung-Doppel-Panel ──────────────────────────────────── */
.sl-doppel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.sl-halb { min-width: 0; }

/* ── Schulleitung-Empfehlungen ──────────────────────────────────── */
.sl-empfehlungen {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sl-empfehlungen li {
  background: #f8f9fa;
  border-left: 4px solid var(--blau);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #2d3436;
}

/* ════════════════════════════════════════════════════════════════
   PHASE 5 — Eltern-Cockpit
   ════════════════════════════════════════════════════════════════ */

/* ── Trend-Banner ────────────────────────────────────────────────── */
.eltern-trend-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  border-radius: var(--radius);
  border-left: 6px solid transparent;
}

.eltern-trend-steigend {
  background: #f0fff5;
  border-color: var(--gruen);
}

.eltern-trend-stabil {
  background: #f0f7ff;
  border-color: var(--blau);
}

.eltern-trend-fallend {
  background: #fff5f5;
  border-color: var(--rot);
}

.eltern-trend-pfeil {
  font-size: 2.8rem;
  line-height: 1;
  flex-shrink: 0;
}

.eltern-trend-info { display: flex; flex-direction: column; gap: 4px; }

.eltern-trend-titel { font-size: 1.15rem; color: #2d3436; }

.eltern-trend-detail { font-size: 0.88rem; color: var(--grau); }

/* ── Eltern-Listen (Stärken / Entwicklung) ──────────────────────── */
.eltern-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eltern-zeile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 8px;
  border-left: 4px solid transparent;
}

.eltern-zeile-staerke {
  background: #f0fff5;
  border-color: var(--gruen);
}

.eltern-zeile-entwicklung {
  background: #fff8f7;
  border-color: var(--rot);
}

.eltern-zeile-icon { font-size: 1.2rem; flex-shrink: 0; }

.eltern-zeile-inhalt {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.eltern-zeile-inhalt strong { font-size: 0.95rem; color: #2d3436; }

.eltern-zeile-frage {
  font-size: 0.82rem;
  color: var(--grau);
  font-style: italic;
}

.eltern-zeile-pct {
  font-size: 1.1rem;
  font-weight: 800;
  flex-shrink: 0;
  align-self: center;
}

/* ── Druck-Optimierung ────────────────────────────────────────────── */
@media print {
  .no-print, .app-header, .app-footer, .back-link { display: none !important; }
  .app-main { padding: 0; }
  .section-block { box-shadow: none; border: 1px solid #e0e0e0; break-inside: avoid; }
  body { background: white; font-size: 11pt; }
  .verlauf-bar-pct { color: #2d3436; text-shadow: none; }
  .impuls-karte { border-color: #ccc; background: white; }
  .eltern-trend-banner { border: 1px solid #ccc; }
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .header-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .logo-sub { display: none; }
  .kompetenz-karte { flex-direction: column; }
  .retention-ring { width: 48px; height: 48px; }
  .profil-doppel { grid-template-columns: 1fr; }
  .afb-zeile { grid-template-columns: 100px 1fr 36px 30px; }
  .tutanden-grid { grid-template-columns: 1fr; }
  .verlauf-wrap { gap: 8px; }
  .verlauf-klasse-label { font-size: 0.65rem; }
  .stats-kacheln { grid-template-columns: 1fr 1fr; }
  .sl-doppel { grid-template-columns: 1fr; }
  .eltern-trend-banner { flex-direction: column; gap: 10px; }
  .eltern-trend-pfeil { font-size: 2rem; }
  .bereich-grid { grid-template-columns: 1fr 1fr; }
  .hattie-row { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 6 — 3-Ebenen-Schüler-Cockpit (Hattie-Design)
   ═══════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 4px;
  font-size: 0.85rem;
  color: var(--grau);
}
.breadcrumb-item {
  color: var(--blau);
  text-decoration: none;
}
.breadcrumb-item:hover { text-decoration: underline; }
.breadcrumb-aktiv { color: var(--grau); font-weight: 500; }
.breadcrumb-sep { color: #b2bec3; }

/* ── Section Untertitel ──────────────────────────────────────── */
.section-untertitel {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--grau);
  margin-left: 6px;
}

/* ── Spotlight ───────────────────────────────────────────────── */
.section-spotlight { border-left: 3px solid var(--blau); }

.spotlight-karte {
  background: var(--weiss);
  border: 1px solid #dfe6e9;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.spotlight-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.spotlight-titel { font-weight: 600; font-size: 0.95rem; }
.spotlight-typ {
  font-size: 0.7rem;
  background: #e8f4ff;
  color: var(--blau);
  border-radius: 4px;
  padding: 2px 6px;
}
.spotlight-datum { font-size: 0.75rem; color: var(--grau); margin-left: auto; }

.spotlight-kompetenzen { display: flex; flex-direction: column; gap: 8px; }

.spotlight-kompetenz-zeile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #f1f3f5;
}
.spotlight-kompetenz-zeile:last-child { border-bottom: none; }

.spotlight-kompetenz-info { flex: 1; min-width: 0; }
.spotlight-kompetenz-link {
  font-size: 0.88rem;
  font-weight: 500;
  color: #2d3436;
  text-decoration: none;
  display: block;
}
.spotlight-kompetenz-link:hover { color: var(--blau); text-decoration: underline; }

.spotlight-next-step {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--gelb);
}
.next-step-icon { font-style: normal; font-weight: 700; }
.next-step-text { color: #636e72; font-style: italic; }

.spotlight-kompetenz-wert {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mini-stufe-balken {
  width: 60px;
  height: 6px;
  background: #dfe6e9;
  border-radius: 3px;
  overflow: hidden;
}
.mini-stufe-fill {
  height: 100%;
  background: var(--blau);
  border-radius: 3px;
}
.mini-stufe-zahl { font-size: 0.78rem; font-weight: 600; min-width: 28px; text-align: right; }

.delta-badge {
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
}
.delta-positiv { background: #d5f5e3; color: #1a7f4b; }
.delta-negativ { background: #fde8e7; color: var(--rot); }
.delta-neutral { background: #f1f3f5; color: var(--grau); }

.spotlight-mehr { font-size: 0.75rem; color: var(--grau); margin-top: 6px; }

/* ── Bereichs-Kacheln (Kompass) ──────────────────────────────── */
.section-kompass { border-left: 3px solid var(--gruen); }

.bereich-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.bereich-kachel {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  border: 2px solid transparent;
  display: block;
  transition: transform 0.15s, box-shadow 0.15s;
}
.bereich-kachel:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.bereich-ampel-gruen { border-color: #a9dfbf; }
.bereich-ampel-gelb  { border-color: #fad7a0; }
.bereich-ampel-rot   { border-color: #f5b7b1; }

.bereich-name { font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; line-height: 1.3; }
.bereich-balken-wrap {
  height: 6px;
  background: #dfe6e9;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.bereich-balken-fill { height: 100%; background: var(--blau); border-radius: 3px; }
.bereich-stats { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; }
.bereich-pct { font-weight: 700; color: var(--blau); }
.bereich-detail { display: flex; gap: 6px; }
.bereich-souveraen { color: var(--gruen); }
.bereich-kritisch  { color: var(--rot); }

/* ── Hattie-Frame (Ebene 2+3) ────────────────────────────────── */
.hattie-frame {
  background: #eaf4ff;
  border-left: 4px solid var(--blau);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.hattie-row {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.hattie-block { flex: 1; min-width: 200px; }
.hattie-frage {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blau);
  margin-bottom: 4px;
}
.hattie-frage-sekundaer { margin-top: 10px; }
.hattie-antwort { font-size: 0.9rem; color: #2d3436; }
.hattie-antwort strong { font-size: 1.1rem; }
.hattie-noch-nicht { color: var(--grau); font-style: italic; }
.hattie-ziel { font-style: italic; color: #636e72; font-size: 0.85rem; }
.hattie-retention { color: var(--gruen); }
.hattie-status { font-weight: 600; }
.hattie-status-gruen { color: var(--gruen); }
.hattie-status-gelb  { color: var(--gelb); }
.hattie-status-rot   { color: var(--rot); }

/* ── Bereichs-Kompetenz-Liste (Ebene 2) ──────────────────────── */
.bereich-kompetenz-liste { display: flex; flex-direction: column; gap: 4px; }
.bereich-kompetenz-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid transparent;
  transition: background 0.12s;
}
.bereich-kompetenz-zeile:hover { background: #f0f8ff; }
.bereich-zeile-souveraen  { border-left-color: var(--gruen); }
.bereich-zeile-entwicklung{ border-left-color: var(--gelb); }
.bereich-zeile-kritisch   { border-left-color: var(--rot); }

.bereich-zeile-links { flex: 1; min-width: 0; }
.bereich-zeile-frage { font-size: 0.88rem; font-weight: 500; line-height: 1.3; }
.bereich-zeile-tipp { font-size: 0.75rem; color: var(--gelb); margin-top: 2px; font-style: italic; }
.bereich-zeile-rechts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.bereich-mini-balken {
  width: 56px; height: 6px;
  background: #dfe6e9;
  border-radius: 3px;
  overflow: hidden;
}
.bereich-mini-fill { height: 100%; background: var(--blau); border-radius: 3px; }
.bereich-zeile-pct { font-size: 0.78rem; font-weight: 700; min-width: 32px; text-align: right; }
.bereich-zeile-ret { font-size: 0.72rem; color: var(--grau); min-width: 28px; text-align: right; }
.bereich-zeile-pfeil { color: #b2bec3; font-size: 1rem; }

/* ── Rubrik-Leiter (Ebene 3) ─────────────────────────────────── */
.ek-titel { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }

.rubrik-leiter { display: flex; flex-direction: column; gap: 6px; }
.rubrik-stufe {
  background: var(--weiss);
  border: 1px solid #dfe6e9;
  border-radius: var(--radius);
  padding: 10px 14px;
  opacity: 0.6;
}
.rubrik-stufe-erreicht { opacity: 1; }
.rubrik-stufe-aktiv {
  opacity: 1;
  border-color: var(--blau);
  background: #e8f4ff;
  box-shadow: 0 0 0 2px rgba(46, 134, 193, 0.2);
}
.rubrik-stufe-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.rubrik-label { font-weight: 700; font-size: 0.82rem; }
.rubrik-pct { font-size: 0.78rem; color: var(--grau); }
.rubrik-du-bist-hier {
  font-size: 0.72rem;
  color: var(--blau);
  font-weight: 600;
  margin-left: auto;
}
.rubrik-beschreibung { font-size: 0.83rem; color: #636e72; line-height: 1.4; }

/* ── Evidenz-Marker (Ebene 3) ────────────────────────────────── */
.evidenz-liste { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.evidenz-zeile {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
}
.evidenz-erreicht { background: #d5f5e3; color: #1a7f4b; }
.evidenz-fehlend  { background: #fef9e7; color: #7d6608; }
.evidenz-offen    { background: #f8f9fa; color: var(--grau); }
.evidenz-icon     { flex-shrink: 0; }
.evidenz-text     { line-height: 1.4; }

.naechster-schritt-box {
  background: #fff8e1;
  border-left: 3px solid var(--gelb);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 14px;
  margin-top: 8px;
}
.naechster-schritt-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gelb);
  margin-bottom: 4px;
}
.naechster-schritt-text { font-size: 0.88rem; color: #2d3436; }

/* ── Fehler-Liste (Ebene 3) ──────────────────────────────────── */
.fehler-liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fehler-item {
  background: var(--weiss);
  border-left: 3px solid #fad7a0;
  border-radius: 0 6px 6px 0;
  padding: 6px 10px;
  font-size: 0.83rem;
  color: #636e72;
}
.fehler-item::before { content: '⚠ '; }

/* ═══════════════════════════════════════════════════════════════
   ZYKLISCHES SCHÜLER-COCKPIT (Module A–J)
   ═══════════════════════════════════════════════════════════════ */

/* ── Modul-Navigation (sticky Tab-Bar) ─────────────────────────── */
.modul-nav {
  background: var(--weiss);
  border-bottom: 1px solid #e6eaee;
  position: sticky;
  top: 64px;
  z-index: 90;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  margin-bottom: 24px;
}
.modul-nav-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.modul-tab {
  flex-shrink: 0;
  padding: 12px 14px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--grau);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.modul-tab:hover {
  color: var(--blau);
  background: #f4f8fb;
}
.modul-tab-aktiv {
  color: var(--blau);
  border-bottom-color: var(--blau);
  font-weight: 600;
}

/* ── Modus-spezifische Stile ───────────────────────────────────── */
.modus-56 .modul-tab { font-size: 0.95rem; padding: 14px 16px; }
.modus-56 h1 { font-size: 1.8rem; }
.modus-56 .prozent-zahl { display: none; }

.modus-79 .modul-tab { font-size: 0.9rem; }

.modus-1012 .modul-tab { letter-spacing: 0.01em; }

/* ── Zyklus-Rad (zentrale 4-Dimensionen-Visualisierung) ────────── */
.zyklus-rad {
  display: block;
  margin: 24px auto;
  max-width: 360px;
  width: 100%;
}
.zyklus-segment { fill-opacity: 0.18; stroke-width: 2; cursor: pointer; transition: fill-opacity 0.2s; }
.zyklus-segment:hover { fill-opacity: 0.4; }
.zyklus-segment-meta   { fill: #2e86c1; stroke: #2e86c1; }
.zyklus-segment-konkret{ fill: #1a7f4b; stroke: #1a7f4b; }
.zyklus-segment-self   { fill: #d4a017; stroke: #d4a017; }
.zyklus-segment-reise  { fill: #8e44ad; stroke: #8e44ad; }
.zyklus-mitte {
  fill: #fff8dc;
  stroke: #d4a017;
  stroke-width: 2;
}
.zyklus-label {
  font-size: 11px;
  fill: #2d3436;
  font-weight: 600;
  text-anchor: middle;
  pointer-events: none;
}
.zyklus-mitte-label {
  font-size: 14px;
  fill: #b8860b;
  font-weight: 700;
  text-anchor: middle;
}

/* ── Aha-Karte (gelb glimmernd, für Einsichten) ────────────────── */
.aha-karte {
  background: linear-gradient(135deg, #fff8dc 0%, #fef5c4 100%);
  border-left: 4px solid var(--gelb);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 12px 0;
  box-shadow: 0 2px 6px rgba(212, 160, 23, 0.15);
  position: relative;
}
.aha-karte::before {
  content: '💡';
  position: absolute;
  top: -8px;
  right: 12px;
  font-size: 1.4rem;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.aha-karte-titel {
  font-size: 0.78rem;
  font-weight: 600;
  color: #b8860b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.aha-karte-text {
  font-size: 0.97rem;
  color: #2d3436;
  font-style: italic;
}
.aha-karte-datum {
  font-size: 0.78rem;
  color: var(--grau);
  margin-top: 8px;
}
.aha-frage {
  background: #fffdf2;
  border: 1px dashed var(--gelb);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 0.9rem;
  color: #6e5d1e;
}
.aha-frage::before { content: '🤔 '; }

/* ── Tagebuch ──────────────────────────────────────────────────── */
.tagebuch-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.tagebuch-eintrag {
  background: var(--weiss);
  border-left: 4px solid var(--grau);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--schatten);
}
.tagebuch-eintrag-aha        { border-left-color: var(--gelb);  background: #fffdf2; }
.tagebuch-eintrag-erkenntnis { border-left-color: var(--gruen); background: #f3faf6; }
.tagebuch-eintrag-frage      { border-left-color: var(--blau);  background: #f4f8fb; }
.tagebuch-eintrag-frust      { border-left-color: var(--rot);   background: #fdf3f2; }

.tagebuch-eintrag-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.82rem;
}
.tagebuch-typ-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tagebuch-typ-aha        { background: #fef5c4; color: #b8860b; }
.tagebuch-typ-erkenntnis { background: #d4efdc; color: #15693e; }
.tagebuch-typ-frage      { background: #d4e7f3; color: #1e5f8c; }
.tagebuch-typ-frust      { background: #f4cccc; color: #922b21; }
.tagebuch-eintrag-text { font-size: 0.95rem; line-height: 1.55; }
.tagebuch-eintrag-datum { color: var(--grau); font-size: 0.78rem; }

.tagebuch-form {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--schatten);
  margin-bottom: 24px;
}
.tagebuch-form-zeile { margin-bottom: 14px; }
.tagebuch-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2d3436;
  margin-bottom: 6px;
}
.tagebuch-form textarea,
.tagebuch-form select,
.tagebuch-form input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--hell);
}
.tagebuch-form textarea { min-height: 90px; resize: vertical; }
.tagebuch-form textarea:focus,
.tagebuch-form select:focus,
.tagebuch-form input:focus {
  outline: none;
  border-color: var(--blau);
  background: var(--weiss);
}
.tagebuch-typ-auswahl {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tagebuch-typ-auswahl label {
  flex: 1 1 calc(50% - 4px);
  min-width: 110px;
  cursor: pointer;
  padding: 10px 12px;
  border: 1.5px solid #ced4da;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  background: var(--hell);
  transition: all 0.15s;
  margin-bottom: 0;
}
.tagebuch-typ-auswahl input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.tagebuch-typ-auswahl input[type="radio"]:checked + .typ-label-inhalt {
  font-weight: 700;
}
.tagebuch-typ-auswahl label:has(input:checked) {
  border-color: var(--blau);
  background: #f4f8fb;
  box-shadow: 0 0 0 3px rgba(46,134,193,0.15);
}

/* ── Quick-Check (5-Punkt-Likert-Skala) ────────────────────────── */
.quickcheck-form {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--schatten);
  margin-bottom: 24px;
}
.quickcheck-frage {
  margin-bottom: 22px;
}
.quickcheck-frage-text {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #2d3436;
}
.quickcheck-skala {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.quickcheck-skala-rand {
  font-size: 0.8rem;
  color: var(--grau);
  min-width: 80px;
}
.quickcheck-skala-rand.links  { text-align: right; }
.quickcheck-skala-rand.rechts { text-align: left; }
.quickcheck-optionen {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
.quickcheck-option {
  position: relative;
  cursor: pointer;
}
.quickcheck-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.quickcheck-option-kreis {
  width: 38px;
  height: 38px;
  border: 2px solid #ced4da;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--grau);
  background: var(--weiss);
  transition: all 0.15s;
}
.quickcheck-option:hover .quickcheck-option-kreis {
  border-color: var(--blau);
  color: var(--blau);
}
.quickcheck-option input:checked + .quickcheck-option-kreis {
  border-color: var(--blau);
  background: var(--blau);
  color: var(--weiss);
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(46,134,193,0.3);
}

.selbsteinschaetzung-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.selbsteinschaetzung-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 12px 16px;
  box-shadow: var(--schatten);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.selbsteinschaetzung-werte {
  display: flex;
  gap: 14px;
  font-size: 0.88rem;
}
.selbsteinschaetzung-werte b { color: var(--blau); }

/* ── Bilanz: Trend-Graph ───────────────────────────────────────── */
.bilanz-trend-graph {
  display: block;
  width: 100%;
  height: 200px;
  margin: 16px 0;
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 16px;
}
.trend-linie { fill: none; stroke: var(--blau); stroke-width: 2.5; }
.trend-flaeche { fill: var(--blau); opacity: 0.12; }
.trend-punkt { fill: var(--blau); }
.trend-achse { stroke: #ced4da; stroke-width: 1; }
.trend-label { font-size: 10px; fill: var(--grau); }

.bilanz-uebersicht {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.bilanz-kachel {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--schatten);
  text-align: center;
}
.bilanz-kachel-wert {
  font-size: 2rem;
  font-weight: 700;
  color: var(--blau);
}
.bilanz-kachel-label {
  font-size: 0.82rem;
  color: var(--grau);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Stärken-Radar ─────────────────────────────────────────────── */
.staerken-radar {
  display: block;
  margin: 16px auto;
  max-width: 420px;
  width: 100%;
}
.radar-grid    { fill: none; stroke: #e6eaee; stroke-width: 1; }
.radar-achse   { stroke: #ced4da; stroke-width: 1; }
.radar-polygon {
  fill: var(--gruen);
  fill-opacity: 0.25;
  stroke: var(--gruen);
  stroke-width: 2;
}
.radar-punkt   { fill: var(--gruen); }
.radar-label {
  font-size: 11px;
  fill: #2d3436;
  text-anchor: middle;
  font-weight: 500;
}

.staerken-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.staerken-eintrag {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--weiss);
  border-left: 4px solid var(--gruen);
  border-radius: 8px;
  box-shadow: var(--schatten);
}
.staerken-eintrag-icon { font-size: 1.4rem; }
.staerken-eintrag-name { font-weight: 600; flex: 1; }
.staerken-eintrag-wert { color: var(--gruen); font-weight: 700; }

/* ── Nächster Schritt (Modul E) ────────────────────────────────── */
.naechster-schritt-karte {
  background: linear-gradient(135deg, #f4f8fb 0%, #e8f0f7 100%);
  border-left: 4px solid var(--blau);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--schatten);
  margin-bottom: 18px;
}
.naechster-schritt-titel {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blau);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.naechster-schritt-kompetenz {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.naechster-schritt-grund {
  font-size: 0.92rem;
  color: var(--grau);
  margin-bottom: 12px;
}
.naechster-schritt-action {
  background: var(--blau);
  color: var(--weiss);
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  display: inline-block;
  font-size: 0.9rem;
}
.naechster-schritt-action:hover { background: #2470a3; }

/* ── Übergabe (Modul J) ────────────────────────────────────────── */
.uebergabe-bogen {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--schatten);
  margin-bottom: 18px;
  border-top: 4px solid var(--gelb);
}
.uebergabe-titel {
  font-size: 1.3rem;
  margin-bottom: 4px;
  color: #2d3436;
}
.uebergabe-meta {
  font-size: 0.85rem;
  color: var(--grau);
  margin-bottom: 16px;
}
.uebergabe-empfehlung {
  background: #fef5c4;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 14px 0;
}
.uebergabe-empfehlung-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #b8860b;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.uebergabe-empfehlung-wert { font-size: 1.1rem; font-weight: 600; }

/* ── Erfolg-Meldung (nach POST) ────────────────────────────────── */
.erfolg-meldung {
  background: #d4efdc;
  border-left: 4px solid var(--gruen);
  color: #15693e;
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-weight: 500;
}
.fehler-meldung {
  background: #f4cccc;
  border-left: 4px solid var(--rot);
  color: #922b21;
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-weight: 500;
}

/* ── Leerzustand ───────────────────────────────────────────────── */
.leer-zustand {
  background: var(--weiss);
  border: 2px dashed #ced4da;
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  color: var(--grau);
}
.leer-zustand-icon { font-size: 2.4rem; margin-bottom: 10px; }
.leer-zustand-text { font-size: 0.95rem; }

/* ── Modus-56 (Klasse 5/6): spielerischer Stil ─────────────────── */
.modus-56 .bilanz-kachel-wert { color: var(--gruen); }
.modus-56 .tagebuch-form label,
.modus-56 .quickcheck-frage-text {
  font-size: 1.05rem;
}
.modus-56 .modul-tab-label::before { content: ''; }

/* ── Cockpit-Section Layout ────────────────────────────────────── */
.cockpit-section { margin-bottom: 28px; }
.cockpit-section-titel {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--blau);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cockpit-section-untertitel {
  font-size: 0.82rem;
  color: var(--grau);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════
   Klassenlehrer-Cockpit (Module A–J)
   ═══════════════════════════════════════════════════════════════ */

/* ── Modulnav-Erweiterungen ────────────────────────────────────── */
.klassen-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--weiss);
  border-bottom: 1px solid #e9ecef;
  font-size: 0.9rem;
}
.klassen-switcher select {
  padding: 4px 8px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-family: var(--font);
}
.kl-modus-badge {
  display: inline-block;
  padding: 2px 10px;
  background: var(--hell);
  border: 1px solid #dee2e6;
  border-radius: 12px;
  font-size: 0.78rem;
  color: var(--grau);
}
.kl-modus-badge a {
  margin-left: 8px;
  color: var(--blau);
  text-decoration: none;
}

/* ── Schleier-Banner ───────────────────────────────────────────── */
.kl-schleier-banner-phase-1,
.kl-schleier-banner-phase-2 {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin: 12px 20px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.kl-schleier-banner-phase-1 {
  background: #fff4d6;
  border-left: 4px solid var(--gelb);
  color: #6e4f00;
}
.kl-schleier-banner-phase-2 {
  background: #e3f2fd;
  border-left: 4px solid var(--blau);
  color: #1a5478;
}
.kl-schleier-banner-phase-1 strong,
.kl-schleier-banner-phase-2 strong {
  display: block;
  margin-bottom: 4px;
}

/* ── Modul-Tab: gesperrt ───────────────────────────────────────── */
.modul-tab-gesperrt {
  opacity: 0.4;
  pointer-events: none;
  position: relative;
}
.modul-tab-gesperrt::after {
  content: ' 🔒';
  font-size: 0.8em;
}

/* ── Modul A: Heute (3-Kacheln) ────────────────────────────────── */
.kl-3-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.kl-kachel {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--schatten);
  border-left: 4px solid var(--blau);
}
.kl-kachel-rot { border-left-color: var(--rot); }
.kl-kachel-gelb { border-left-color: var(--gelb); }
.kl-kachel-gruen { border-left-color: var(--gruen); }
.kl-kachel h3 {
  font-size: 0.95rem;
  margin-bottom: 8px;
  color: var(--grau);
  font-weight: 600;
}
.kl-kachel-wert {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--blau);
}
.kl-kachel-meta {
  font-size: 0.82rem;
  color: var(--grau);
  margin-top: 6px;
}
.kl-bauchgefuehl-banner {
  background: #f0e6ff;
  border-left: 4px solid #7e57c2;
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 0.9rem;
  color: #4a2e7e;
}

/* ── Modul B: Tutand:innen-Grid ────────────────────────────────── */
.kl-tutanden-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.kl-tutanden-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--schatten);
  transition: transform 0.15s;
}
.kl-tutanden-karte:hover { transform: translateY(-2px); }
.kl-tutanden-name {
  font-weight: 600;
  font-size: 1rem;
  color: #2d3436;
}
.kl-tutanden-klasse {
  font-size: 0.8rem;
  color: var(--grau);
}
.kl-tutanden-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  background: var(--blau);
  color: var(--weiss);
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.85rem;
}

/* ── Tip-Block (für anfänger:innen) ────────────────────────────── */
.kl-tip-block {
  background: #e8f5e9;
  border-left: 4px solid var(--gruen);
  padding: 10px 14px;
  border-radius: var(--radius);
  margin: 12px 0;
  font-size: 0.88rem;
  color: #1e4620;
}

/* ── Lebenslinie / Velocity-SVG ────────────────────────────────── */
.kl-lebenslinie-svg {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--schatten);
  margin-bottom: 16px;
}
.kl-lebenslinie-svg svg { width: 100%; height: auto; }

/* ── Klassen-Tabelle ───────────────────────────────────────────── */
.kl-tabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--weiss);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
}
.kl-tabelle th,
.kl-tabelle td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #f1f3f5;
  font-size: 0.9rem;
}
.kl-tabelle th {
  background: var(--hell);
  color: var(--grau);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
}
.kl-tabelle tr:hover { background: #fafbfc; }

/* ── Multi-Fach ────────────────────────────────────────────────── */
.kl-multifach-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--schatten);
  margin-bottom: 14px;
}
.kl-quelle-aktiv {
  display: inline-block;
  padding: 2px 8px;
  background: #d4edda;
  color: #155724;
  border-radius: 10px;
  font-size: 0.78rem;
  margin-right: 6px;
}
.kl-quelle-inaktiv {
  display: inline-block;
  padding: 2px 8px;
  background: #f1f3f5;
  color: var(--grau);
  border-radius: 10px;
  font-size: 0.78rem;
  margin-right: 6px;
  text-decoration: line-through;
}

/* ── Sperre (N<5, Soziogramm) ──────────────────────────────────── */
.kl-sperre {
  background: #fff4d6;
  border-left: 4px solid var(--gelb);
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 0.92rem;
  color: #6e4f00;
}
.kl-sperre strong { display: block; margin-bottom: 4px; }
.kl-warn {
  color: var(--rot);
  font-size: 0.85rem;
  font-style: italic;
}

/* ── Klima ─────────────────────────────────────────────────────── */
.kl-klima-werte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.kl-klima-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
  box-shadow: var(--schatten);
}
.kl-klima-karte-wert {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blau);
}
.kl-klima-karte-label {
  font-size: 0.82rem;
  color: var(--grau);
}

/* ── Soziogramm ────────────────────────────────────────────────── */
.kl-schritte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 14px 14px 14px 36px;
  box-shadow: var(--schatten);
}
.kl-schritte li {
  margin-bottom: 6px;
  font-size: 0.92rem;
}

/* ── Narrativ-Stil (Übergabe, Methodik) ────────────────────────── */
.kl-narrativ-liste {
  padding-left: 20px;
  margin-bottom: 12px;
}
.kl-narrativ-liste li { margin-bottom: 4px; font-size: 0.92rem; }
.kl-narrativ-meta {
  font-size: 0.82rem;
  color: var(--grau);
  font-style: italic;
  margin-top: 8px;
}
.kl-narrativ-methodik {
  background: #f8f9fa;
  border-left: 3px solid var(--grau);
  font-size: 0.88rem;
}

/* ── Eltern / Konferenz / Laufbahn Karten ──────────────────────── */
.kl-eltern-karte,
.kl-konferenz-karte,
.kl-laufbahn-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--schatten);
  margin-bottom: 14px;
}
.kl-konferenz-karte h3,
.kl-eltern-karte h3,
.kl-laufbahn-karte h3 {
  font-size: 1.02rem;
  margin-bottom: 8px;
  color: var(--blau);
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 6px;
}
.kl-konferenz-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

/* ── Modus-Switcher ────────────────────────────────────────────── */
.kl-modus-form {
  max-width: 600px;
  margin: 0 auto;
}
.kl-modus-option {
  display: block;
  background: var(--weiss);
  border: 2px solid #e9ecef;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.kl-modus-option:hover { border-color: var(--blau); }
.kl-modus-option input[type="radio"] {
  margin-right: 10px;
}
.kl-modus-option strong { font-size: 0.98rem; }
.kl-modus-meta {
  display: block;
  font-size: 0.83rem;
  color: var(--grau);
  margin-top: 4px;
  margin-left: 24px;
}
.kl-modus-submit {
  background: var(--blau);
  color: var(--weiss);
  border: none;
  border-radius: var(--radius);
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  margin-right: 12px;
}
.kl-modus-submit:hover { background: #246a96; }
.kl-modus-link {
  color: var(--grau);
  text-decoration: none;
}

/* ── Print-Button ──────────────────────────────────────────────── */
.kl-print-button {
  background: var(--weiss);
  border: 1px solid var(--blau);
  color: var(--blau);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
}
.kl-print-button:hover { background: var(--blau); color: var(--weiss); }

/* ── Reflexions-Prompt ─────────────────────────────────────────── */
.kl-reflex {
  background: #f0e6ff;
  border-left: 4px solid #7e57c2;
}
.kl-reflex h3 {
  color: #4a2e7e;
  font-size: 0.98rem;
}
.kl-reflex p { font-size: 0.92rem; font-style: italic; }

/* ── Print-Layout (A4) ─────────────────────────────────────────── */
@media print {
  .app-header,
  .modulnav,
  .klassen-switcher,
  .kl-print-button,
  .kl-modus-form,
  .sl-info-leiste { display: none !important; }
  .kl-eltern-karte,
  .kl-konferenz-karte,
  .kl-laufbahn-karte,
  .sl-briefing-karte,
  .sl-recht-karte {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Schulleitungs-Cockpit (Module A–H, strikt anonym)
   ═══════════════════════════════════════════════════════════════ */

.sl-info-leiste {
  background: #fff4d6;
  border-left: 4px solid var(--gelb);
  padding: 8px 16px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.85rem;
}
.sl-badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--gelb);
  color: #5a3d00;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.82rem;
}
.sl-meta { color: var(--grau); }

/* ── KPI-Karten ───────────────────────────────────────────────── */
.sl-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.sl-kpi-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--schatten);
  text-align: center;
  border-top: 3px solid var(--blau);
}
.sl-kpi-karte-rot { border-top-color: var(--rot); }
.sl-kpi-karte-gruen { border-top-color: var(--gruen); }
.sl-kpi-karte-gelb { border-top-color: var(--gelb); }
.sl-kpi-wert {
  font-size: 2rem;
  font-weight: 700;
  color: var(--blau);
}
.sl-kpi-karte-rot .sl-kpi-wert { color: var(--rot); }
.sl-kpi-karte-gruen .sl-kpi-wert { color: var(--gruen); }
.sl-kpi-karte-gelb .sl-kpi-wert { color: #8a6700; }
.sl-kpi-label {
  font-size: 0.85rem;
  color: var(--grau);
  margin-top: 4px;
}

/* ── Tabellen ─────────────────────────────────────────────────── */
.sl-tabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--weiss);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
  margin-bottom: 16px;
}
.sl-tabelle th,
.sl-tabelle td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #f1f3f5;
  font-size: 0.9rem;
}
.sl-tabelle th {
  background: var(--hell);
  color: var(--grau);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
}
.sl-zeile-gesperrt {
  background: #fafafa;
  color: var(--grau);
}

/* ── Warn / Sperre / Tag ──────────────────────────────────────── */
.sl-warn {
  color: var(--rot);
  font-size: 0.85rem;
  font-style: italic;
}
.sl-sperre {
  background: #fff4d6;
  border-left: 4px solid var(--gelb);
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.sl-sperre strong { display: block; margin-bottom: 6px; }
.sl-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
}
.sl-tag-ok { background: #d4edda; color: #155724; }
.sl-tag-warn { background: #fff4d6; color: #6e4f00; }

/* ── Balken (Curriculum-Abdeckung) ────────────────────────────── */
.sl-balken {
  display: inline-block;
  width: 60px;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 6px;
}
.sl-balken-fuellung {
  height: 100%;
  background: var(--blau);
  border-radius: 4px;
}

/* ── Risiko-Karten ────────────────────────────────────────────── */
.sl-risiko-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.sl-risiko-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--schatten);
  text-align: center;
  border-left: 4px solid var(--rot);
}
.sl-risiko-karte-gesperrt { border-left-color: var(--gelb); opacity: 0.85; }
.sl-risiko-klasse { font-weight: 600; color: var(--grau); }
.sl-risiko-wert {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--rot);
}
.sl-risiko-karte-gesperrt .sl-risiko-wert { color: var(--gelb); }
.sl-risiko-label { font-size: 0.82rem; color: var(--grau); }

/* ── Briefing-Karten ──────────────────────────────────────────── */
.sl-briefing-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.sl-briefing-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--schatten);
}
.sl-briefing-karte h3 {
  color: var(--blau);
  margin-bottom: 8px;
  font-size: 1rem;
}

/* ── Recht-Karten ─────────────────────────────────────────────── */
.sl-recht-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.sl-recht-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--schatten);
  border-left: 4px solid var(--gruen);
}
.sl-recht-karte.sl-recht-pruefen { border-left-color: var(--gelb); }
.sl-recht-kategorie {
  font-size: 0.78rem;
  color: var(--grau);
  text-transform: uppercase;
  font-weight: 600;
}
.sl-recht-karte h3 {
  font-size: 1rem;
  margin: 4px 0 6px;
  color: #2d3436;
}
.sl-recht-beleg {
  font-size: 0.88rem;
  color: var(--grau);
  margin-bottom: 8px;
}

/* ── Meta-Info ────────────────────────────────────────────────── */
.sl-meta-info {
  background: #f8f9fa;
  border-left: 3px solid var(--grau);
  font-size: 0.88rem;
}
.sl-meta-info h3 { color: var(--grau); font-size: 0.92rem; margin-bottom: 4px; }

/* ═══════════════════════════════════════════════════════════════
   Eltern-Cockpit (Module A–F, Stärken-zuerst)
   ═══════════════════════════════════════════════════════════════ */

.el-info-leiste {
  background: #e8f5e9;
  border-left: 4px solid var(--gruen);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.el-info-name { font-size: 1rem; }
.el-info-klasse { color: var(--grau); margin-left: 6px; font-size: 0.9rem; }
.el-info-meta {
  font-size: 0.82rem;
  color: var(--grau);
  font-style: italic;
}

/* ── A · Heute ────────────────────────────────────────────────── */
.el-stand-karte {
  background: linear-gradient(135deg, #f1f8f4 0%, var(--weiss) 100%);
  border-left: 4px solid var(--gruen);
}
.el-stand-text {
  font-size: 1.02rem;
  line-height: 1.6;
}
.el-entwicklung-karte {
  background: #fff8e7;
  border-left: 4px solid var(--gelb);
}

.el-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.el-kpi-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--schatten);
  text-align: center;
  border-top: 3px solid var(--blau);
}
.el-kpi-karte-gruen { border-top-color: var(--gruen); }
.el-kpi-karte-trend { border-top-color: var(--gelb); }
.el-kpi-wert {
  font-size: 2rem;
  font-weight: 700;
  color: var(--blau);
}
.el-kpi-karte-gruen .el-kpi-wert { color: var(--gruen); }
.el-kpi-karte-trend .el-kpi-wert { color: var(--gelb); }
.el-kpi-label {
  font-size: 0.85rem;
  color: var(--grau);
  margin-top: 4px;
}

/* ── B · Lebenslinie ──────────────────────────────────────────── */
.el-trend-karte {
  background: var(--weiss);
}
.el-lebenslinie-svg {
  width: 100%;
  height: auto;
  max-height: 240px;
  display: block;
  margin-bottom: 12px;
}
.el-trend-deutung {
  background: var(--hell);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  color: var(--grau);
}

/* ── C · Stärken ──────────────────────────────────────────────── */
.el-staerken-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.el-staerken-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--schatten);
  border-top: 3px solid var(--gruen);
  position: relative;
}
.el-staerken-nummer {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 0.82rem;
  color: var(--gruen);
  font-weight: 700;
}
.el-staerken-karte h3 {
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--gruen);
}
.el-staerken-frage {
  color: var(--grau);
  font-size: 0.9rem;
  margin-bottom: 6px;
}
.el-staerken-stufe {
  font-size: 0.9rem;
  margin-top: 8px;
}
.el-entwicklung-liste {
  margin-left: 20px;
  margin-top: 8px;
}

/* ── D · Tagebuch (Aggregat) ──────────────────────────────────── */
.el-tagebuch-sperre {
  background: #fff8e7;
  border-left: 4px solid var(--gelb);
}
.el-tagebuch-sperre strong { display: block; margin-bottom: 4px; }
.el-tagebuch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}
.el-tagebuch-karte {
  background: var(--weiss);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--schatten);
  text-align: center;
}
.el-tagebuch-emoji { font-size: 1.8rem; }
.el-tagebuch-wert {
  font-size: 2rem;
  font-weight: 700;
  color: var(--blau);
}
.el-tagebuch-aha .el-tagebuch-wert { color: var(--gelb); }
.el-tagebuch-erkenntnis .el-tagebuch-wert { color: var(--gruen); }
.el-tagebuch-frage .el-tagebuch-wert { color: var(--blau); }
.el-tagebuch-frust .el-tagebuch-wert { color: var(--rot); }
.el-tagebuch-label {
  font-size: 0.82rem;
  color: var(--grau);
}
.el-hinweis-karte {
  background: #fff4d6;
  border-left: 4px solid var(--gelb);
}

/* ── E · Gespräch ─────────────────────────────────────────────── */
.el-gespraech-karte {
  background: var(--weiss);
}
.el-gespraech-themen {
  padding-left: 20px;
  margin-bottom: 8px;
}
.el-gespraech-themen li {
  margin-bottom: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.el-tipps-liste {
  list-style: '✓ ';
  padding-left: 20px;
  margin-top: 8px;
}
.el-tipps-liste li {
  margin-bottom: 6px;
  font-size: 0.92rem;
}

/* ── F · Termine ──────────────────────────────────────────────── */
.el-termine-tabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--weiss);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
}
.el-termine-tabelle th,
.el-termine-tabelle td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #f1f3f5;
  font-size: 0.92rem;
}
.el-termine-tabelle th {
  background: var(--hell);
  color: var(--grau);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
}
.el-termin-frage {
  font-size: 0.85rem;
  color: var(--grau);
}
.el-balken {
  display: inline-block;
  width: 60px;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 6px;
}
.el-balken-fuellung {
  height: 100%;
  background: var(--gruen);
  border-radius: 4px;
}

/* ── Meta-Info ────────────────────────────────────────────────── */
.el-meta {
  background: #f8f9fa;
  border-left: 3px solid var(--grau);
  font-size: 0.88rem;
}
.el-meta h3 { color: var(--grau); font-size: 0.92rem; margin-bottom: 4px; }


/* ────────────────────────────────────────────────────────── */
/*  Schüler-Codes (routes/codes.js)                            */
/* ────────────────────────────────────────────────────────── */

.codes-meldung {
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius, 8px);
  margin: 1rem 0;
  font-size: 0.95rem;
}
.codes-meldung-ok      { background: #d4edda; border-left: 4px solid var(--gruen, #2ecc71); }
.codes-meldung-fehler  { background: #f8d7da; border-left: 4px solid var(--rot,   #e74c3c); }

.codes-info {
  background: var(--hell, #f7f8fa);
  border-left: 4px solid var(--blau, #2563eb);
}
.codes-beispiel {
  font-family: 'Courier New', 'Consolas', monospace;
  background: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid #ddd;
  font-size: 0.95em;
  letter-spacing: 1px;
}

.codes-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}
.codes-tabelle th,
.codes-tabelle td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}
.codes-tabelle th {
  background: var(--hell, #f7f8fa);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #555;
}
.codes-tabelle tr:hover { background: #fafbfc; }

.codes-btn {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 0;
  border-radius: 4px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.codes-btn-vergeben {
  background: var(--blau, #2563eb);
  color: white;
}
.codes-btn-vergeben:hover { filter: brightness(1.1); }
.codes-btn-drucken {
  background: var(--grau, #6b7280);
  color: white;
}
.codes-btn-drucken:hover { filter: brightness(1.1); }

.codes-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.codes-status-aktiv     { background: #d4edda; color: #155724; }
.codes-status-rotiert   { background: #fff3cd; color: #856404; }
.codes-status-inaktiv   { background: #e9ecef; color: #495057; }

.codes-warten {
  background: #fff8e1;
  border-left: 4px solid var(--gelb, #f1c40f);
}
.codes-meta {
  font-size: 0.88rem;
  color: #666;
  background: var(--hell, #f7f8fa);
  border-left: 3px solid var(--grau, #6b7280);
}
.codes-meta h3 { color: var(--grau, #6b7280); font-size: 0.92rem; margin-bottom: 4px; }
.codes-meta ul { margin: 0.5rem 0 0 1.2rem; padding: 0; }
.codes-meta li { margin-bottom: 0.3rem; }