/* ============================================================
   Stylesheet
   Design: Dark Dashboard (DESIGN-SPEC.md)
   ============================================================ */

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

:root {
  /* Hintergrundfarben */
  --bg-primary:    #0f1119;
  --bg-secondary:  #0a0b12;
  --bg-tertiary:   #1a1c2e;
  --bg-card:       #13161f;
  --bg-card-hover: #1a1c2e;

  /* Borders */
  --border-default: #262b3f;
  --border-subtle:  #2c3146;

  /* Textfarben */
  --text-primary:   #f3f4f8;
  --text-secondary: #e2e4ea;
  --text-muted:     #8b8fa6;
  --text-dim:       #6b6f82;
  --text-label:     #4a4e63;

  /* Akzentfarben */
  --accent-red:    #e85d4a;
  --accent-orange: #8796ef;   /* TBW 12.10.2026: Name geerbt, Wert ist das helle Blau der Plattform */
  --accent-blue:   #3b82f6;
  --accent-purple: #a78bfa;
  --accent-green:  #4ade80;
  --accent-yellow: #f59e0b;

  /* Border-Radien */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 16px;

  /* Rückwärtskompatible Aliasse für Views/Quiz-Styles */
  /* --bg wird weiter unten vom Redesign-Token gesetzt (war ungenutzt) */
  --bg2:        var(--bg-card);
  --bg3:        var(--bg-card-hover);
  --border:     var(--border-default);
  --text:       var(--text-secondary);
  --accent:     var(--accent-red);
  --accent2:    var(--accent-orange);
  --success:    var(--accent-green);
  --danger:     var(--accent-red);

  /* ── Fach-Akzentfarben (dynamisch per JS gesetzt) ─────────── */
  --fach-color:        #5469d4;
  --fach-color-dim:    rgba(84,105,212,0.15);
  --fach-color-border: rgba(84,105,212,0.4);
  --warning:    var(--accent-yellow);
  --radius:     var(--radius-lg);
  --shadow:     0 4px 24px rgba(0,0,0,0.5);
  --transition: 0.15s ease;

  /* ── Redesign-Tokens (design-referenz.html) ──────────────────
     Neue, verbindliche Palette für Dashboard und Navigation.
     Farbregel: Orange nur für Fortschritt und Primäraktionen,
     Grün nur für Erfolg, Rot nur für Fehler und Schwachstellen.
     Die älteren Tokens darüber bleiben bestehen, solange die
     übrigen Seiten sie noch nutzen. */
  --bg:         #0c0e12;
  --surface:    #13161f;
  --surface-hi: #1a1e26;
  --line:       rgba(255,255,255,.07);
  --line-hi:    rgba(255,255,255,.14);
  --tx:         #e8eaee;
  --tx-2:       #9aa1ad;
  --tx-3:       #6b7280;
  --orange:     #5469d4;
  --orange-hi:  #8796ef;   /* TBW: Indigo hell statt IM-Orange */
  --orange-dim: rgba(84,105,212,.14);
  --ok:         #3ec27a;
  --warn:       #f0a03c;
  --r:          12px;
  --nav-w:      236px;
}

html { font-size: 16px; scroll-behavior: smooth; background-color: #0f1119; }

/* Formularelemente erben die Seitenschrift (sonst Browser-Standard Arial) */
button, input, select, textarea { font-family: inherit; }

/* TBW 12.10.2026 (Auftrag Walied): Überschriften überall in Georgia, Fließtext bleibt in der Seitenschrift */
h1, h2, h3,
.dashboard-header-title, .formel-gruppe-name { font-family: Georgia, 'Times New Roman', serif; }   /* Seitentitel Dashboard/Formeln und Formelgruppen sind keine h-Elemente */

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg-primary);
  color: var(--text-secondary);
  min-height: 100vh;
  display: flex;
  line-height: 1.6;
}

/* ==================== SIDEBAR ==================== */
.sidebar {
  width: var(--nav-w);
  background: var(--bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  /* Kein overflow hier! Der Einklapp-Knopf ragt mit right:-14px bewusst über
     den Rand hinaus und würde sonst abgeschnitten. Gescrollt wird in
     .sidebar-nav. */
  transition: width 0.2s ease;
}

.sidebar-logo {
  padding: 0 8px 22px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-logo-icon {
  width: 32px;
  height: 32px;
  background: #5469d4;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15.5px;
  color: #fff;
  flex-shrink: 0;
}

.sidebar-logo-text {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tx);
}

.sidebar-logo-sub {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tx-3);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.sidebar-section-label {
  font-size: 11px;
  color: var(--tx-3);
  text-transform: uppercase;
  letter-spacing: 0.11em;
  padding: 18px 10px 7px;
  margin: 0;
}

.sidebar-section-label:first-of-type {
  padding-top: 10px;
}

/* Nav-Items: Klasse .nav-btn bleibt für app.js-Kompatibilität */
.nav-item,
.nav-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  color: var(--tx-2);
  font-size: 14px; /* Seitenleiste bewusst klein gehalten, sonst muss man scrollen (28.09.2026) */
  transition: background 0.12s, color 0.12s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

.nav-item:hover,
.nav-btn:hover {
  background: var(--surface);
  color: var(--tx);
}

.nav-item.active,
.nav-btn.active {
  background: var(--orange-dim);
  color: var(--orange-hi);
  font-weight: 500;
}

.nav-item.active svg,
.nav-btn.active svg {
  stroke: currentColor;
}

/* Hardcore-Hervorhebung in der Sidebar */
/* Hardcore war früher rot umrandet und rot hinterlegt. Entfernt — der Punkt
   sieht jetzt aus wie jeder andere, gekennzeichnet nur durch die Badges.
   Die Klasse .sb-hardcore-link bleibt als Ansatzpunkt bestehen. */
.sb-neu-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.3px;
  background: #e85d4a; color: #fff;
  padding: 1px 5px; border-radius: 4px;
  vertical-align: middle; margin-left: 4px; display: inline-block;
  line-height: 1.4;
}
.sb-beta-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  color: #a78bfa; vertical-align: middle; margin-left: 2px;
}

.nav-item svg,
.nav-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  flex-shrink: 0;
}

.nav-badge {
  margin-left: auto;
  background: #2a1a1a;
  color: var(--accent-red);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
}

.referral-nav-btn {
  margin-top: 4px;
  background: linear-gradient(135deg, rgba(84, 105, 212,.12), rgba(84, 105, 212,.06));
  border: 1px solid rgba(84, 105, 212,.3) !important;
  color: #8796ef !important;
}
.referral-nav-btn:hover {
  background: linear-gradient(135deg, rgba(84, 105, 212,.22), rgba(84, 105, 212,.12)) !important;
  border-color: rgba(84, 105, 212,.55) !important;
}
.referral-badge {
  margin-left: auto;
  background: rgba(84, 105, 212,.2);
  color: #8796ef;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 18px;
}

/* A5-Fix: Profil-Bereich in der Sidebar */
#sidebar-user-area {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px;
}

/* A5-Fix: Referral-Button mit orange Umrandung */
.referral-nav-btn {
  border: 1px solid var(--orange) !important;
  box-shadow: 0 0 6px rgba(84,105,212,0.3);
}

/* Einstellungen-Button im Sidebar-Footer (jetzt aktiv) */
.sidebar-footer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-radius: var(--radius-md);
  padding: 6px 8px;
  transition: background 0.15s;
}

.sidebar-footer-icon {
  width: 30px;
  height: 30px;
  background: var(--border-default);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-footer-icon svg {
  width: 14px;
  height: 14px;
  stroke: var(--text-dim);
  stroke-width: 2;
  fill: none;
}

.sidebar-footer-text {
  font-size: 13.5px;
  color: var(--text-dim);
}

/* ==================== MAIN CONTENT ==================== */
.main,
.app-main {
  flex: 1;
  margin-left: var(--nav-w);
  padding: 28px 32px;
  overflow-y: auto;
  min-height: 100vh;
}

/* ── Views ─────────────────────────────────────────────────── */
.view { display: none; }
/* C1-Fix: padding-bottom damit untere Kästen bei 100% Zoom vollständig sichtbar */
.view.active { display: block; animation: fadeIn 0.3s ease; padding-bottom: 40px; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==================== DASHBOARD: HEADER ==================== */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
}

.dashboard-header-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.dashboard-header-subtitle {
  font-size: 14.5px;
  color: var(--text-dim);
}

.dashboard-header-actions {
  display: flex;
  gap: 8px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  border: none;
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition: all 0.15s;
}

.btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.btn-secondary {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.btn-secondary:hover {
  background: var(--bg-card);
  color: var(--text-secondary);
}

.btn-primary {
  background: #5469d4;
  color: var(--tx);
  font-weight: 500;
}

.btn-primary:hover { opacity: 0.9; }

/* ==================== STAT CARDS ==================== */
.dashboard-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}

.stat-card-label {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.stat-card-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.stat-card-value .stat-total {
  font-size: 15.5px;
  color: var(--text-dim);
  font-weight: 400;
}

.stat-card-sub {
  font-size: 12px;
  margin-top: 4px;
}

.stat-card-sub.success { color: var(--accent-green); }
.stat-card-sub.warning { color: var(--accent-yellow); }

/* Fortschrittsbalken Dashboard */
.dash-progress-bar {
  height: 4px;
  background: var(--border-default);
  border-radius: 2px;
  overflow: hidden;
}

.dash-progress-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: #5469d4;
  transition: width 0.6s ease;
}

/* ==================== SECTION HEADER ==================== */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.section-link {
  font-size: 13.5px;
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
  background: none;
  border: none;
  font-family: inherit;
}

.section-link:hover { color: var(--text-secondary); }

/* ==================== FACH CARDS (Dashboard) ==================== */
.faecher-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.fach-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
}

.fach-card:hover {
  border-color: var(--border-subtle);
  transform: translateY(-2px);
}

/* M7 – Nur Grossbuchstaben-Varianten: data-fach im HTML ist immer Grossbuchstaben */
.fach-card[data-fach="RBH"]  { border-top: 3px solid var(--accent-red); }
.fach-card[data-fach="BWH"]  { border-top: 3px solid var(--accent-blue); }
.fach-card[data-fach="MIKP"] { border-top: 3px solid var(--accent-orange); }
.fach-card[data-fach="ZIB"]  { border-top: 3px solid var(--accent-purple); }
.fach-card[data-fach="NTG"]  { border-top: 3px solid var(--accent-green); }

.fach-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.fach-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fach-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  fill: none;
}

.fach-icon.red    { background: #2a1a1a; }
.fach-icon.red svg    { stroke: var(--accent-red); }
.fach-icon.blue   { background: #1a1a2e; }
.fach-icon.blue svg   { stroke: var(--accent-blue); }
.fach-icon.orange { background: #2a2214; }
.fach-icon.orange svg { stroke: var(--accent-orange); }
.fach-icon.purple { background: #1e1a2e; }
.fach-icon.purple svg { stroke: var(--accent-purple); }
.fach-icon.green  { background: #142214; }
.fach-icon.green svg  { stroke: var(--accent-green); }

.fach-count {
  font-size: 20px;
  font-weight: 700;
}

.fach-count.red    { color: var(--accent-red); }
.fach-count.blue   { color: var(--accent-blue); }
.fach-count.orange { color: var(--accent-orange); }
.fach-count.purple { color: var(--accent-purple); }
.fach-count.green  { color: var(--accent-green); }

.fach-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.fach-desc {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
  line-height: 1.4;
}

.fach-progress-bar {
  height: 3px;
  background: var(--border-default);
  border-radius: 2px;
  overflow: hidden;
}

.fach-progress-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}

.fach-progress-text {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
}

/* ==================== BOTTOM SECTION ==================== */
.bottom-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
  /* C1-Fix: Kein overflow:hidden mehr — Kästen vollständig sichtbar bei 100% Zoom */
  align-items: start;
}

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  /* C1-Fix: Kein festes height — Panel wächst mit Inhalt */
  overflow: visible;
}

.panel-title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
}

/* Aktivitätsliste */
.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.activity-item:last-child { border-bottom: none; }

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.activity-dot.success { background: var(--accent-green); }
.activity-dot.warning { background: var(--accent-yellow); }
.activity-dot.danger  { background: var(--accent-red); }

.activity-content { flex: 1; }

/* Erklärvideos Panel */
.video-list { display: flex; flex-direction: column; gap: 2px; }

.video-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.video-item:hover { background: var(--surface-hi); }

.video-thumb {
  width: 80px;
  height: 45px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  background: var(--surface-hi);
}

.video-item-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.video-item-num {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.video-item-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-title {
  font-size: 13.5px;
  color: var(--text-secondary);
}

.activity-detail {
  font-size: 12px;
  color: var(--text-dim);
}

.activity-time {
  font-size: 12px;
  color: var(--text-dim);
}

/* Schwachstellen-Panel */
.weakness-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.weakness-link {
  font-size: 12px;
  color: var(--accent-red);
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  font-family: inherit;
}

.weakness-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #1a1c2e;
}

.weakness-item:last-child { border-bottom: none; }

.weakness-name {
  font-size: 13.5px;
  color: var(--text-secondary);
}

.weakness-fach {
  font-size: 12px;
  color: var(--text-dim);
}

.weakness-badge {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}

.weakness-badge.danger {
  background: #2a1a1a;
  color: var(--accent-red);
}

.weakness-badge.warning {
  background: #2a2214;
  color: var(--accent-yellow);
}

/* ==================== VIEW HEADER (Prüfungen / Themen) ==================== */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.view-header h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
}

.filter-row {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.filter-row label {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.filter-row select {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
}

/* ==================== JAHRES-ACCORDION ==================== */
.jahres-accordion { display: flex; flex-direction: column; gap: 0.75rem; }

.jahr-block {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.jahr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}

.jahr-header:hover { background: var(--bg-card-hover); }

.jahr-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.jahr-toggle {
  color: var(--text-muted);
  font-size: 1.2rem;
  transition: transform var(--transition);
}

.jahr-block.open .jahr-toggle { transform: rotate(90deg); }

.jahr-body {
  display: none;
  padding: 0 1.25rem 1.25rem;
}

.jahr-block.open .jahr-body { display: block; }

.jahr-info-hinweis {
  display: inline-block;
  margin: 0.75rem 0 0.25rem;
  padding: 0.3rem 0.75rem;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  color: #93c5fd;
  font-size: 0.8rem;
}

/* ── Prüfungs-Sektionen (Reale / Generierte) ─────────────── */
.pruefung-sektion {
  margin-bottom: 0.5rem;
}
.pruefung-sektion-header {
  padding: 1.5rem 0 0.75rem;
  border-bottom: 1px solid var(--border-default);
  margin-bottom: 0.75rem;
}
.pruefung-sektion-titel {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.2rem;
}
.pruefung-sektion-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}
.pruefung-sektion-gen .pruefung-sektion-titel { color: var(--accent-blue); }

/* Badge (Kostenlos / Premium) */
.gen-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(74,222,128,0.15);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,0.3);
  margin-left: 8px;
}
.gen-badge-lock {
  background: rgba(59,130,246,0.12);
  color: var(--accent-blue);
  border-color: rgba(59,130,246,0.3);
}

/* Teaser für gesperrte Prüfungen */
.gen-teaser {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(59,130,246,0.06);
  border-radius: 8px;
  border: 1px solid rgba(59,130,246,0.15);
  margin: 0.75rem 0;
}
.gen-teaser-icon { font-size: 1.5rem; flex-shrink: 0; }
.gen-teaser-text {
  flex: 1;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.gen-teaser-text strong { display: block; color: var(--text-primary); margin-bottom: 3px; }
.gen-teaser-btn {
  flex-shrink: 0;
  background: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.gen-teaser-btn:hover { opacity: 0.9; }

.termin-section { margin-top: 2rem; }

.termin-label {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  display: block;
}

.aufgaben-liste {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ==================== AUFGABE ITEM ==================== */
.aufgabe-item {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.aufgabe-item:hover {
  border-color: var(--border-subtle);
  transform: translateX(4px);
}

.aufgabe-item.richtig { border-left: 3px solid var(--accent-green); }
.aufgabe-item.falsch  { border-left: 3px solid var(--accent-red); }

.aufgabe-nr {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  flex-shrink: 0;
  font-family: monospace;
}

.aufgabe-frage-text {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.aufgabe-thema-tag {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  flex-shrink: 0;
  align-self: flex-start;
}

/* ==================== THEMEN-GRID ==================== */
.themen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.thema-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  cursor: pointer;
  transition: var(--transition);
}

.thema-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-subtle);
  transform: translateY(-2px);
}

.thema-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.thema-card-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.thema-card-bar {
  height: 4px;
  background: var(--border-default);
  border-radius: 2px;
  overflow: hidden;
}

.thema-card-bar-fill {
  height: 100%;
  background: #5469d4;
  border-radius: 2px;
  transition: width 0.6s ease;
}

/* ==================== UEBEN / QUIZ ==================== */
.ueben-panel { max-width: 720px; margin: 0 auto; padding: 1.5rem 0; }

.ueben-panel h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}

.ueben-optionen { display: flex; flex-direction: column; gap: 1.25rem; }

.option-group label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.themen-fach-chips { margin-bottom: 1.25rem; }

.chip {
  padding: 0.4rem 1rem;
  border: 1px solid var(--border-default);
  border-radius: 20px;
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  transition: var(--transition);
  font-family: inherit;
}

.chip:hover {
  border-color: var(--fach-color);
  color: var(--text-secondary);
}

.chip.active {
  background: var(--fach-color);
  border-color: var(--fach-color);
  color: #fff;
  font-weight: 600;
}

/* Fachfarben für Chips (scoped --fach-color per Element) */
.chip-rbh  { --fach-color: #e85d4a; }
.chip-bwh  { --fach-color: #3b82f6; }
.chip-mikp { --fach-color: #f0a03c; }
.chip-zib  { --fach-color: #a78bfa; }
.chip-ntg  { --fach-color: #4ade80; }

.jahr-fach-chips { margin-bottom: 1.25rem; }

.free-tier-hinweis {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.free-tier-hinweis a {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
}
.free-tier-hinweis a:hover { text-decoration: underline; }

/* Fach-Abschnitt innerhalb einer Termin-Sektion */
.fach-section { margin-top: 0.75rem; }
.fach-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.4rem;
  color: #fff;
}
.fach-label-rbh  { background: #e85d4a; }
.fach-label-bwh  { background: #3b82f6; }
.fach-label-mikp { background: #f0a03c; }
.fach-label-zib  { background: #a78bfa; }
.fach-label-ntg  { background: #4ade80; color: #1a1c2e; }

/* ── Quiz Panel ────────────────────────────────────────────── */
.quiz-panel { max-width: 720px; margin: 0 auto; }
.hidden { display: none !important; }

.quiz-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Fortschrittsbalken im Quiz (eigene Klasse, damit kein Konflikt mit Dashboard) */
.progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-card-hover);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--fach-color);
  border-radius: 3px;
  transition: width 0.4s ease;
}

#quiz-progress-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.quiz-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  padding: 1.75rem;
  animation: fadeIn 0.3s ease;
}

.quiz-meta {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.quiz-fach, .quiz-thema, .quiz-jahr {
  font-size: 0.72rem;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.quiz-fach {
  background: var(--fach-color-dim);
  color: var(--fach-color);
  border: 1px solid var(--fach-color-border);
}

.quiz-thema {
  background: rgba(167, 139, 250, 0.15);
  color: var(--accent-purple);
  border: 1px solid rgba(167, 139, 250, 0.3);
}

.quiz-jahr {
  background: rgba(107, 111, 130, 0.15);
  color: var(--text-muted);
  border: 1px solid var(--border-default);
}

.quiz-grafik {
  margin-bottom: 1.25rem;
  background: #1e2130;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: zoom-in;
}
.quiz-grafik svg {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
}

.quiz-frage {
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.65;
  margin-bottom: 1.5rem;
  color: var(--text-secondary);
}

.quiz-antworten {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.antwort-btn {
  text-align: left;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-card-hover);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  transition: var(--transition);
  line-height: 1.5;
  font-family: inherit;
}

.antwort-btn:hover:not(:disabled) {
  border-color: var(--fach-color);
  background: var(--fach-color-dim);
}

.antwort-btn.richtig {
  border-color: var(--accent-green);
  background: rgba(74, 222, 128, 0.1);
  color: var(--accent-green);
}

.antwort-btn.falsch {
  border-color: var(--accent-red);
  background: rgba(232, 93, 74, 0.1);
  color: #ff7a6e;
}

.quiz-feedback {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  border: 1px solid;
  color: var(--text-muted);
  border-color: var(--border-default);
  background: var(--bg-card-hover);
}

.quiz-feedback.richtig {
  background: rgba(74, 222, 128, 0.1);
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.quiz-feedback.falsch {
  background: rgba(232, 93, 74, 0.1);
  border-color: var(--accent-red);
  color: #ff9e97;
}

.quiz-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* ── Quiz Abschluss ────────────────────────────────────────── */
.quiz-abschluss { text-align: center; padding: 2rem 0; }

.abschluss-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 2.5rem;
  display: inline-block;
  min-width: 300px;
}

.abschluss-card h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.score-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 6px solid var(--fach-color);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--fach-color);
}

/* ==================== ACTION BUTTONS (Üben-Views) ==================== */
.action-btn {
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: var(--transition);
  font-family: inherit;
}

.action-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-subtle);
}

.action-btn.primary {
  background: var(--fach-color);
  border-color: var(--fach-color);
  color: #fff;
}

/* Weiter-Button immer blau, unabhängig von Fachfarbe */
#btn-naechste {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
}

.action-btn.primary:hover {
  opacity: 0.9;
}

.action-btn.danger {
  border-color: var(--accent-red);
  color: var(--accent-red);
  background: transparent;
}

.action-btn.danger:hover {
  background: var(--accent-red);
  color: #fff;
}

.action-btn.big {
  padding: 0.85rem 2.5rem;
  font-size: 1rem;
  margin-top: 1.5rem;
}

/* Weiter-Button: neutral Blau (Grün ist für "richtige Antwort" reserviert) */
#btn-naechste {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}
#btn-naechste:hover {
  background: #2563eb;
  border-color: #2563eb;
  opacity: 1;
}

/* ==================== STATISTIK VIEW ==================== */
/* stats-grid im Statistik-View (3 Karten) */
#view-statistik .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stats-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
}

.stats-number {
  font-size: 2.2rem;
  font-weight: 700;
  color: #8796ef;
  margin-bottom: 0.3rem;
}

.stats-label { font-size: 0.8rem; color: var(--text-muted); }

#view-statistik h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}

/* A4-Fix: Statistik-Widget-Grid — zwei nebeneinander */
.stat-widget-grid {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.stat-widget-panel {
  flex: 1 1 48%;
  min-width: 280px;
  min-height: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .stat-widget-panel {
    flex: 1 1 100%;
  }
}

.stat-widget-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.themen-meistgeubt {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.themen-meistgeubt-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.themen-meistgeubt-label {
  min-width: 180px;
  font-size: 14.5px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.themen-meistgeubt-bar {
  flex: 1;
  height: 14px;
  background: var(--bg-card-hover);
  border-radius: 4px;
  overflow: hidden;
}

.themen-meistgeubt-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent-blue);
  transition: width 0.6s ease;
}

.themen-meistgeubt-count {
  font-size: 13.5px;
  color: var(--text-muted);
  min-width: 40px;
  text-align: right;
}

.fach-fortschritt { margin-bottom: 2rem; }

/* A4-Fix: Fortschritts-Widget vergrößert */
.fach-fortschritt-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.fp-label {
  min-width: 180px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.fp-bar {
  flex: 1;
  height: 14px;
  background: var(--bg-card-hover);
  border-radius: 4px;
  overflow: hidden;
}

.fp-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.fp-pct { font-size: 0.8rem; color: var(--text-muted); min-width: 60px; text-align: right; }

/* ==================== MODAL ==================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 2rem;
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  animation: slideUp 0.25s ease;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-default);
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.modal-close:hover {
  background: var(--accent-red);
  color: #fff;
  border-color: var(--accent-red);
}

.modal-aufgabe-header {
  margin-bottom: 1.25rem;
  padding-right: 2.5rem;
}

.modal-aufgabe-header h3 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Formatierter Fragetext im Modal (ersetzt h3) */
.modal-frage-text {
  font-size: 0.95rem;
  line-height: 1.65;
}
.modal-frage-text .frage-kontext {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
  border-left: 3px solid var(--border-subtle);
  padding-left: 0.85rem;
  margin-bottom: 0.6rem;
}
.modal-frage-text .frage-hauptfrage {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.modal-frage-text .frage-liste {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.modal-frage-text .frage-liste li {
  font-size: 0.875rem;
  color: var(--text-secondary);
  display: flex;
  gap: 0.4rem;
}
.modal-frage-text .frage-text {
  color: var(--text-secondary);
}

.modal-loesung {
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-top: 1rem;
}

.modal-loesung-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-green);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.modal-loesung p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #a8efbb;
}

.modal-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 900px) {
  .sidebar {
    width: 60px;
    overflow: hidden;
  }

  .sidebar-logo-text,
  .sidebar-logo-sub,
  .nav-item span,
  .nav-btn span,
  .sidebar-section-label,
  .nav-badge,
  .sidebar-footer-text {
    display: none;
  }

  .sidebar-logo { justify-content: center; padding: 16px 0; }

  .nav-item,
  .nav-btn {
    justify-content: center;
    padding: 10px;
  }

  .main,
  .app-main {
    margin-left: 60px;
    padding: 20px 16px;
  }

  .dashboard-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .faecher-grid { grid-template-columns: repeat(2, 1fr); }
  .bottom-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .main,
  .app-main { padding: 16px 12px; }
  .dashboard-stats-grid { grid-template-columns: 1fr 1fr; }
  .faecher-grid { grid-template-columns: 1fr 1fr; }
}

/* M8 – Mobiler Breakpoint: Sidebar ausblenden, Bottom Nav einblenden */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main, .app-main { margin-left: 0; padding: 16px 16px 80px; }
}

/* ==================== KI-HILFE PANEL ==================== */
.ki-hilfe-panel {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(59, 130, 246, 0.08));
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: var(--radius-md, 8px);
  padding: 14px 16px;
  margin-bottom: 1rem;
  animation: fadeIn 0.3s ease;
}

.ki-hilfe-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.ki-hilfe-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-purple, #a78bfa);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ki-hilfe-title svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent-purple, #a78bfa);
  stroke-width: 2;
  fill: none;
}

.ki-hilfe-close {
  background: none;
  border: none;
  color: var(--text-dim, #6b6f82);
  cursor: pointer;
  font-size: 13.5px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
  line-height: 1;
}

.ki-hilfe-close:hover {
  background: var(--border-default, #1e2030);
  color: var(--text-secondary, #e2e4ea);
}

.ki-hilfe-content {
  font-size: 14.5px;
  color: var(--text-secondary, #e2e4ea);
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap;
}

/* Settings-Modal: API-Key-Eingabefeld Fokus-Hervorhebung */
#settings-api-key:focus {
  border-color: var(--accent-purple, #a78bfa) !important;
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.15);
}

/* Sidebar-Footer: Hover-Effekt für den Einstellungen-Button */
.sidebar-footer-item:hover {
  background: var(--bg-card-hover);
}

.sidebar-footer-item:hover .sidebar-footer-text {
  color: var(--text-secondary);
}

/* Sidebar-Footer: Key-Status-Indikator (grüner / grauer Punkt) */
.sidebar-footer-key-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: auto;
  flex-shrink: 0;
}

.sidebar-footer-key-status.active {
  background: var(--accent-green, #4ade80);
  box-shadow: 0 0 4px var(--accent-green, #4ade80);
}

.sidebar-footer-key-status.inactive {
  background: var(--text-dim, #6b6f82);
}

/* ── Modal: Lösung anzeigen Button ──────────────────────────── */
/* ==================== AUFGABEN-DARSTELLUNG NEU (Modal) ==================== */

/* Hauptblock mit farbiger linker Markierung je Fach */
.aufgabenstellung-block {
  background: #1a2029;
  border-left: 3px solid var(--aufgabe-fachfarbe, #4ade80);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.aufgabenstellung-block p {
  font-size: 18px;
  font-weight: 700;
  color: #eaecef;
  line-height: 1.5;
  margin: 0;
}

/* Beschriftung über Abschnitten (z.B. "GEGEBEN") */
.aufgabe-section-label {
  font-size: 13.5px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 8px;
}

/* Gegeben-Werte-Block */
.aufgabe-gegebene-werte {
  margin-bottom: 18px;
}

.aufgabe-werte-liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aufgabe-wert-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
}

/* Farbiger Bullet-Punkt (Fachfarbe) */
.aufgabe-bullet {
  color: var(--aufgabe-fachfarbe, #4ade80);
  font-size: 15.5px;
  flex-shrink: 0;
}

.aufgabe-wert-text {
  color: #b7bdc6;
  font-size: 16.5px;
}

/* Gesucht-Block */
.aufgabe-gesucht {
  margin-bottom: 18px;
}

.aufgabe-gesucht-text {
  color: #8796ef;
  font-size: 16.5px;
  font-weight: 500;
  padding-left: 4px;
}

/* Trennlinie zwischen Aufgabentext und Antworten */
.aufgabe-trenner {
  border: none;
  border-top: 1px solid #252d3a;
  margin: 0 0 20px;
}

/* Grafik-Wrapper über der Aufgabenstellung */
.aufgabe-grafik-wrap {
  margin-bottom: 16px;
  text-align: center;
  background: #1a2029;
  border-radius: 8px;
  padding: 12px;
  overflow: auto;
}

.aufgabe-grafik-wrap svg {
  max-width: 100%;
  height: auto;
}

/* Neue Antwort-Buttons mit verbesserter Optik */
.antwort-btn-neu {
  background: #1a2029;
  border: 1px solid #252d3a;
  border-radius: 8px;
  font-size: 16.5px;
  padding: 12px 16px;
  text-align: left;
  width: 100%;
  color: #b7bdc6;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
}

.antwort-btn-neu:hover:not(:disabled) {
  border-color: #3a4456;
  background: #1e2736;
}

/* ==================== AUFGABEN-DARSTELLUNG NEU — ENDE ==================== */

.modal-loesung-bereich {
  margin-top: 1.25rem;
}

.modal-loesung-btn {
  width: 100%;
  justify-content: center;
  gap: 0.5rem;
}

.modal-loesung-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

/* ── KI Frage stellen Button ─────────────────────────────────── */
.btn-ki-frage {
  margin-top: 1rem;
  width: 100%;
  background: transparent;
  border: 1px solid var(--accent-blue);
  color: var(--accent-blue);
  border-radius: var(--radius-md);
  padding: 0.65rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 14.5px;
  font-family: inherit;
  transition: background var(--transition);
}

.btn-ki-frage:hover {
  background: rgba(59, 130, 246, 0.1);
}

.btn-ki-frage svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  flex-shrink: 0;
}

/* ── KI Chat Panel ───────────────────────────────────────────── */
.ki-chat-panel {
  margin-top: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-secondary);
}

.ki-chat-panel.hidden {
  display: none;
}

.ki-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-default);
}

.ki-chat-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--accent-blue);
}

.ki-chat-title svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.ki-chat-close-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 15.5px;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}

.ki-chat-close-btn:hover {
  color: var(--text-primary);
  background: var(--bg-card-hover);
}

.ki-chat-verlauf {
  min-height: 100px;
  max-height: 260px;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.ki-chat-msg {
  max-width: 88%;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.ki-chat-msg-ki {
  background: var(--bg-card);
  color: var(--text-secondary);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.ki-chat-msg-user {
  background: var(--accent-blue);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.ki-chat-loading {
  opacity: 0.55;
  font-style: italic;
}

.ki-chat-eingabe {
  display: flex;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-top: 1px solid var(--border-default);
  background: var(--bg-card);
  align-items: flex-end;
}

.ki-chat-textarea {
  flex: 1;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-size: 14.5px;
  font-family: inherit;
  resize: none;
  outline: none;
  line-height: 1.4;
}

.ki-chat-textarea:focus {
  border-color: var(--accent-blue);
}

.ki-chat-senden-btn {
  padding: 0.5rem 0.75rem;
  flex-shrink: 0;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ki-chat-senden-btn svg {
  width: 15px;
  height: 15px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
}

/* ==================== QUIZ FRAGE FORMATIERUNG ==================== */

/* Punkte-Badge neben der Frage */
.quiz-punkte-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Container für die formatierte Frage */
.frage-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Fallbeispiel / Situationsbeschreibung */
.frage-kontext {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  border-left: 3px solid var(--border-subtle);
  padding-left: 0.85rem;
  margin-bottom: 0.75rem;
  font-style: italic;
}

/* Die eigentliche Frage – hervorgehoben */
.frage-hauptfrage {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.55;
  margin-top: 0.25rem;
}

/* Listen (nummeriert, alpha, bullet) */
.frage-liste {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.frage-liste li {
  display: flex;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.frage-liste li .frage-liste-nr {
  color: var(--accent-orange);
  font-weight: 600;
  min-width: 1.5rem;
  flex-shrink: 0;
}

/* Alpha-Listenpräfix (a) b) c) ...) */
.frage-liste-key {
  color: var(--accent-orange);
  font-weight: 600;
  font-size: 0.875rem;
  margin-right: 0.1rem;
}

/* ==================== LÖSUNG BEREICH ==================== */

#quiz-loesung-bereich {
  margin-top: 1.25rem;
}

.quiz-loesung-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--accent-green);
  padding: 0.55rem 1rem 0.4rem;
  background: rgba(74, 222, 128, 0.08);
  border-bottom: 1px solid rgba(74, 222, 128, 0.15);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.quiz-loesung-label::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
}

.quiz-loesung-text {
  padding: 0;
  background: transparent;
}

/* ==================== PRÜFUNGSMODUS ==================== */

.pruefung-info-box {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1.25rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: center;
}

/* Punktestand im Abschluss-Screen */
#score-punkte {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-yellow);
  text-align: center;
  padding: 0.6rem 1.25rem;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-lg);
  margin: 0.25rem 0;
}

/* ==================== QUIZ KI CHAT (eingebettet) ==================== */

#quiz-ki-panel {
  margin-top: 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
}

.quiz-ki-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: rgba(59, 130, 246, 0.1);
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.quiz-ki-header-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.quiz-ki-header-title::before {
  content: '✦';
  font-size: 0.65rem;
}

.quiz-ki-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.quiz-ki-close-btn:hover {
  color: var(--text-primary);
  background: var(--bg-card-hover);
}

.quiz-ki-messages {
  max-height: 240px;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-subtle) transparent;
}

.quiz-ki-eingabe {
  display: flex;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-top: 1px solid var(--border-default);
  background: var(--bg-card);
  align-items: flex-end;
}

.quiz-ki-textarea {
  flex: 1;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 0.45rem 0.65rem;
  font-size: 14.5px;
  font-family: inherit;
  resize: none;
  outline: none;
  line-height: 1.4;
  min-height: 36px;
}

.quiz-ki-textarea:focus {
  border-color: var(--accent-blue);
}

.quiz-ki-senden-btn {
  padding: 0.45rem 0.7rem;
  flex-shrink: 0;
  min-width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--accent-blue);
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}

.quiz-ki-senden-btn:hover {
  opacity: 0.85;
}

.quiz-ki-senden-btn svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
}

/* ============================================================
   ZUSAMMENFASSUNGEN PAGE  — v2 (korrekte Klassennamen)
   ============================================================ */

/* ── Layout ─────────────────────────────────────────────── */
.zs-page {
  display: grid;
  grid-template-columns: 240px 280px 1fr;
  height: 100vh;
  overflow: hidden;
}

.zs-toc-panel {
  grid-column: 2;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
}

.zs-content {
  grid-column: 3;
  overflow-y: auto;
  padding: 2.5rem 3rem;
  background: var(--bg-primary);
  height: 100vh;
}

/* ── Search box ──────────────────────────────────────────── */
.zs-search-box {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  gap: 0.5rem;
}
.zs-search-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.zs-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}
.zs-nav-row.hidden { display: none; }
.zs-nav-btns {
  display: flex;
  gap: 4px;
}

.zs-search-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--text-muted);
  fill: none;
  stroke-width: 2;
}

#zs-suche {
  flex: 1;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  outline: none;
}

#zs-suche:focus { border-color: var(--accent-blue); }

.zs-treffer {
  font-size: 0.75rem;
  color: var(--accent-yellow);
  white-space: nowrap;
}
.zs-treffer.hidden { display: none; }
.zs-nav-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 4px;
  width: 22px;
  height: 22px;
  font-size: 13.5px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.zs-nav-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.zs-nav-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Fach chips ──────────────────────────────────────────── */
.zs-toc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.zs-toc-chip {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.zs-toc-chip:hover { border-color: var(--text-muted); color: var(--text-primary); }
.zs-toc-chip.active { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; }
.zs-toc-chip.rbh.active  { background: #e53e3e; border-color: #e53e3e; }
.zs-toc-chip.bwh.active  { background: #3b82f6; border-color: #3b82f6; }
.zs-toc-chip.ntg.active  { background: #38a169; border-color: #38a169; }
.zs-toc-chip.zib.active  { background: #6b46c1; border-color: #6b46c1; }
.zs-toc-chip.mikp.active { background: #f0a03c; border-color: #f0a03c; }
/* TBW 10.10.2026: Fachfarben der sechs Prüfungsfächer (Vorschlag) */
.zs-toc-chip.vwl.active { background: #6c8ebf; border-color: #6c8ebf; color: #16121f; }
.zs-toc-chip.rewe.active { background: #c29a4b; border-color: #c29a4b; color: #16121f; }
.zs-toc-chip.fininv.active { background: #4f9d8f; border-color: #4f9d8f; color: #16121f; }
.zs-toc-chip.mpa.active { background: #b07a63; border-color: #b07a63; color: #16121f; }
.zs-toc-chip.sa1.active { background: #8f86c9; border-color: #8f86c9; color: #16121f; }
.zs-toc-chip.sa2.active { background: #8796ad; border-color: #8796ad; color: #16121f; }

/* ── TOC list ────────────────────────────────────────────── */
.zs-toc-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

.zs-toc-gruppe { margin-bottom: 0.25rem; }

.zs-toc-fach-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 1rem 0.25rem;
  color: var(--text-muted);
}

.zs-toc-fach-label.rbh  { color: #e53e3e; }
.zs-toc-fach-label.bwh  { color: #3b82f6; }
.zs-toc-fach-label.ntg  { color: #38a169; }
.zs-toc-fach-label.zib  { color: #6b46c1; }
.zs-toc-fach-label.mikp { color: #f0a03c; }
.zs-toc-fach-label.vwl { color: #6c8ebf; }
.zs-toc-fach-label.rewe { color: #c29a4b; }
.zs-toc-fach-label.fininv { color: #4f9d8f; }
.zs-toc-fach-label.mpa { color: #b07a63; }
.zs-toc-fach-label.sa1 { color: #8f86c9; }
.zs-toc-fach-label.sa2 { color: #8796ad; }

.zs-toc-list ul { list-style: none; padding: 0; margin: 0; }

.zs-toc-link {
  display: block;
  padding: 0.3rem 1rem 0.3rem 1.25rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all 0.12s;
  line-height: 1.35;
}

.zs-toc-link:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.zs-toc-link.active {
  color: var(--accent-blue);
  border-left-color: var(--accent-blue);
  background: rgba(66,153,225,0.08);
}

/* ── Fach section header ─────────────────────────────────── */
.zs-fach { margin-bottom: 4rem; }

.zs-fach-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  margin-bottom: 2rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}

.zs-fach-header.rbh  { border-left: 4px solid #e53e3e; }
.zs-fach-header.bwh  { border-left: 4px solid #3b82f6; }
.zs-fach-header.ntg  { border-left: 4px solid #38a169; }
.zs-fach-header.zib  { border-left: 4px solid #6b46c1; }
.zs-fach-header.mikp { border-left: 4px solid #f0a03c; }
.zs-fach-header.vwl { border-left: 4px solid #6c8ebf; }
.zs-fach-header.rewe { border-left: 4px solid #c29a4b; }
.zs-fach-header.fininv { border-left: 4px solid #4f9d8f; }
.zs-fach-header.mpa { border-left: 4px solid #b07a63; }
.zs-fach-header.sa1 { border-left: 4px solid #8f86c9; }
.zs-fach-header.sa2 { border-left: 4px solid #8796ad; }

.zs-fach-kuerzel {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-muted);
  min-width: 3.5rem;
  text-align: center;
}

.zs-fach-header h1 {
  margin: 0 0 0.3rem;
  font-size: 1.5rem;
  color: var(--text-primary);
}

.zs-fach-subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* ── Article ─────────────────────────────────────────────── */
.zs-artikel {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem;
  margin-bottom: 1.5rem;
  scroll-margin-top: 1rem;
  overflow: hidden; /* verhindert Kollision durch float-Elemente */
}

/* Alle eingebetteten Blöcke in Zusammenfassungen: kein float, immer block */
.zs-artikel table,
.zs-artikel figure,
.zs-artikel img,
.zs-artikel svg,
.zs-artikel .zs-table,
.zs-artikel .zs-formel,
.zs-artikel .zs-hinweis,
.zs-artikel .zs-kalkulation-schema,
.zs-artikel .zs-schema,
.zs-artikel .zs-box,
.zs-artikel .zs-diagram,
.zs-artikel .zs-pyramid,
.zs-artikel .zs-svg-container {
  display: block;
  clear: both;
  float: none;
  position: static;
  width: 100%;
  max-width: 100%;
  margin-bottom: 24px;
}

/* Breite Tabellen scrollen in sich selbst, statt am `overflow: hidden` des
   Artikels abgeschnitten zu werden. Ohne das fehlten auf Bildschirmen unter
   etwa 1370 px die rechten Spalten in „Unternehmensformen" (117 px) und
   „Organisationsentwicklung" (205 px) — unsichtbar UND nicht erreichbar. */
.zs-artikel table {
  overflow-x: auto;
}

/* h2 = Abschnittsüberschrift: fett, springt ins Auge */
.zs-artikel h2 {
  margin: 0 0 1rem;
  font-size: 1.7rem;        /* 27px */
  font-weight: 700;
  color: var(--text-primary);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border);
  letter-spacing: -0.01em;
}

/* h3 = Unter-Überschriften */
.zs-artikel h3 {
  font-size: 1.2rem;        /* 19px — deutlich größer als Fließtext (16,5px) */
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  letter-spacing: 0.01em;
}

/* Fließtext: 16,5px, line-height 1.75 */
.zs-artikel p {
  font-size: 1.03rem;       /* 16,5px */
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0 0 0.75rem;
  /* G1-Fix: Fließtext soll nach eingebetteten Elementen klar stehen */
  clear: both;
}

.zs-artikel ul,
.zs-artikel ol {
  padding-left: 1.5rem;
  margin: 0 0 0.75rem;
}

/* Listen-Einträge */
.zs-artikel li {
  font-size: 1.03rem;       /* 16,5px */
  color: var(--text-secondary);
  line-height: 1.72;
  margin-bottom: 0.4rem;
}

.zs-artikel strong { color: var(--text-primary); }

/* ════════════════════════════════════════════════════════════
   ZUSAMMENFASSUNGEN — LESBARKEITS-OPTIMIERUNG
   Patch für bessere visuelle Hierarchie und Aufnahmefähigkeit.
   ════════════════════════════════════════════════════════════ */

/* ── 1. Content-Container: max-width für lesbare Zeilenlänge ── */
.zs-content {
  padding: 2.5rem 3rem;
}

.zs-content > * {
  max-width: 1170px;
}

/* Nur die Zusammenfassungsseite (nicht /formeln): breitere Nutzung des
   Bildschirms. Unten extra Platz, damit der KI-Button den letzten Absatz
   nicht überdeckt — der Button liegt fix bei bottom:24px / right:24px. */
#zs-content > * {
  max-width: 1500px;
}

#zs-content {
  padding-bottom: 7rem;
}

/* Formelseite: gleiche Verbreiterung, damit Formel und Rechenbeispiele
   nebeneinander Platz haben. Unten Luft für den fixen KI-Button. */
#formeln-content > * {
  max-width: 1600px;
}

#formeln-content {
  padding-bottom: 7rem;
}

/* ── 2. Artikel-Container: mehr Innen-Padding, mehr Abstand zwischen Sections ── */
.zs-artikel {
  padding: 2.5rem 2.5rem 2rem;
  margin-bottom: 2.5rem;
}

/* ── 3. h4-Überschriften: deutliche Hierarchie statt klebende Textwand ── */
.zs-artikel h4 {
  font-size: 1.35rem;       /* 21,6px */
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 4rem;
  margin-bottom: 1rem;
  padding: 0 0 0.6rem 12px;
  border-left: 3px solid var(--accent-orange, #f0a03c);
  border-bottom: 1px solid rgba(84, 105, 212, 0.25);
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.zs-artikel ul + h4,
.zs-artikel ol + h4,
.zs-artikel table + h4,
.zs-artikel .zs-table + h4,
.zs-artikel .zs-diagram + h4,
.zs-artikel .vn-container + h4,
.zs-artikel .info-box + h4,
.zs-artikel .wichtig-box + h4,
.zs-artikel .zs-formel-gruppe + h4 {
  margin-top: 3.5rem;
}

/* Erstes h4 in einer Section braucht keinen Mega-Abstand nach oben */
.zs-artikel > h4:first-child,
.zs-artikel > p:first-child + h4,
.zs-artikel > .zs-fach-header + h4 {
  margin-top: 0.5rem;
}

/* ── 4. Absätze: mehr Atem zwischen Blöcken ── */
.zs-artikel p {
  margin: 0 0 1.1rem;
  line-height: 1.75;
}

/* ── 5. Listen: deutlich mehr Luft zwischen Bullets ── */
.zs-artikel ul,
.zs-artikel ol {
  padding-left: 1.75rem;
  margin: 0 0 1.25rem;
}

.zs-artikel li {
  margin-bottom: 0.6rem;
  line-height: 1.7;
}

.zs-artikel li:last-child {
  margin-bottom: 0;
}

/* Verschachtelte Listen: etwas weniger Abstand */
.zs-artikel li ul,
.zs-artikel li ol {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.zs-artikel li li {
  margin-bottom: 0.35rem;
}

/* ── 6. Tabellen: Zeilen entzerren, Schrift auf Fließtext-Niveau ── */
.zs-artikel .zs-table td,
.zs-artikel .zs-table th {
  padding: 0.75rem 0.95rem;
  line-height: 1.6;
  font-size: 0.97rem;       /* 15,5px statt 14px */
}

/* ── 7. Pro/Contra-Boxen (vn-container): klare Hierarchie ── */
.vn-container {
  gap: 1rem;
  margin: 1.25rem 0;
}

.vorteile-liste,
.nachteile-liste {
  padding: 1rem 1.25rem 1rem 1.1rem;
  border-left-width: 4px;
}

.vorteil-label,
.nachteil-label {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid currentColor;
  letter-spacing: 0.01em;
}

.vorteil-label {
  border-bottom-color: rgba(34, 197, 94, 0.3);
}
.nachteil-label {
  border-bottom-color: rgba(239, 68, 68, 0.3);
}

.vorteile-liste ul,
.nachteile-liste ul {
  padding-left: 1.1rem;
  margin: 0;
}

.vorteile-liste li,
.nachteile-liste li {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.65;
}

.vorteile-liste li:last-child,
.nachteile-liste li:last-child {
  margin-bottom: 0;
}

/* Auf schmalen Screens: Boxen untereinander, mehr Abstand */
@media (max-width: 720px) {
  .vn-container {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* ── 8. Info-Box & Wichtig-Box: Lesbarkeit angleichen ── */
.zs-artikel .info-box {
  padding: 1rem 1.25rem;
  line-height: 1.7;
}

.zs-artikel .wichtig-box {
  padding: 1rem 1.25rem;
  line-height: 1.7;
}

/* ── 9. Prüfungshinweis: noch klarer als Schluss-Anker ── */
.zs-hinweis {
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  line-height: 1.7;
}

/* ── 10. Diagram-Container: max-height entfernen (Overflow-Bugs) ── */
.zs-diagram {
  max-height: none;
  max-width: 100%;
}

/* SVGs innerhalb von .zs-diagram dürfen wieder bis 600px gehen */
.zs-diagram > svg {
  max-width: min(600px, 100%);
  display: block;
  margin: 0 auto;
  height: auto;
}

/* ── Search highlight ────────────────────────────────────── */
mark.zs-mark {
  background: rgba(251,211,141,0.3);
  color: var(--accent-yellow);
  border-radius: 2px;
  padding: 0 2px;
}
mark.zs-mark.zs-mark-aktiv {
  background: rgba(251,211,141,0.75);
  color: #1a1a1a;
  outline: 2px solid var(--accent-yellow);
}

/* ── Hinweis box ─────────────────────────────────────────── */
.zs-hinweis {
  background: rgba(66,153,225,0.08);
  border: 1px solid rgba(66,153,225,0.25);
  border-radius: var(--radius-sm);
  padding: 0.875rem 1.125rem;
  font-size: 0.9rem;       /* min 14px */
  color: var(--text-secondary);
  margin: 1rem 0;
  line-height: 1.65;
}

/* ── Tables ──────────────────────────────────────────────── */
.zs-table {
  display: block;
  clear: both;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 1rem 0 24px;
  position: static;
}

.zs-table th {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 600;
  padding: 0.6rem 0.875rem;
  text-align: left;
  border: 1px solid var(--border);
}

.zs-table td {
  padding: 0.55rem 0.875rem;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  vertical-align: top;
  font-size: 0.875rem;
}

.zs-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }

/* ── Formel (inline, Bruchdarstellung im Fließtext) ─────────── */
.zs-formel {
  display: flex;
  clear: both;
  align-items: center;
  gap: 12px;
  background: var(--bg-secondary);
  /* G1-Fix: Einrückung für blaue Klammer-Boxen */
  padding: 12px 16px 12px 24px;
  border-radius: 8px;
  border-left: 3px solid var(--accent-blue);
  margin: 8px 0 24px;
  flex-wrap: wrap;
  position: static;
  width: 100%;
  box-sizing: border-box;
}

.zs-formel > .zs-formel-name {
  font-weight: 600;
  color: var(--text-primary);
  /* override the box-variant uppercase */
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9375rem;
  margin-bottom: 0;
}

.zs-formel-bruch {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.zs-formel-zaehler {
  border-bottom: 1.5px solid var(--text-primary);
  padding: 0 6px;
  font-size: 14.5px;
}

.zs-formel-nenner {
  padding: 0 6px;
  font-size: 14.5px;
}

.zs-formel-suffix {
  font-size: 14.5px;
  color: var(--text-muted);
}

/* ── Formel-Boxen (wiederverwendbar, auch in Zusammenfassungen) ── */
.zs-formel-gruppe {
  display: flex;
  clear: both;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 24px;
  position: static;
  width: 100%;
}

.zs-formel-box {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-blue);
  border-radius: var(--radius-sm);
  /* G1-Fix: padding-left 24px für einheitliche Einrückung */
  padding: 0.75rem 1rem 0.75rem 24px;
  flex: 1;
  min-width: 200px;
}

.zs-formel-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.zs-formel-einheit {
  font-weight: 400;
  color: var(--accent-yellow);
  text-transform: none;
  letter-spacing: 0;
}

.zs-formel-ausdruck {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-family: 'Segoe UI', 'Courier New', monospace;
  font-size: 1rem;
  color: var(--text-primary);
}

.zs-f-lhs {
  font-style: italic;
  color: var(--text-primary);
  white-space: nowrap;
}

.zs-f-bruch {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  gap: 1px;
}

.zs-f-zaehler {
  padding: 0 6px 3px;
  border-bottom: 1.5px solid var(--text-primary);
  font-size: 0.9rem;
  white-space: nowrap;
  text-align: center;
}

.zs-f-nenner {
  padding: 3px 6px 0;
  font-size: 0.9rem;
  white-space: nowrap;
  text-align: center;
  color: var(--text-secondary);
}

.zs-f-text {
  font-size: 0.95rem;
  color: var(--text-primary);
}

.zs-f-suffix {
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Diagram wrapper ─────────────────────────────────────── */
/* G1-Fix: Überlappung verhindern — alle eingebetteten Elemente klar floaten */
.zs-diagram {
  display: block;
  clear: both;
  margin: 1.5rem auto 24px;
  max-width: min(600px, 100%);
  max-height: 350px;
  width: 100%;
  position: static;
}

/* Schema-Boxen, SVG-Container und Diagramm-Wrapper */
.zs-schema,
.zs-box,
.zs-svg-container {
  display: block;
  clear: both;
  width: 100%;
  max-width: 100%;
  position: static;
  margin-bottom: 24px;
  float: none;
}

.zs-diagram-caption {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

/* ── Normenhierarchie-Pyramide ───────────────────────────── */
.zs-pyramid {
  display: flex;
  clear: both;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 0.75rem auto 24px;
  max-width: 420px;
  position: static;
  width: 100%;
}

.zs-pyr-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  padding: 4px 8px;
  width: var(--pw, 100%);
  transition: width 0.3s;
  /* Stufen mittig: im Artikel ist .zs-pyramid display:block (siehe .zs-artikel-Liste),
     ohne auto-Ränder stand die Pyramide linksbündig (04.10.2026) */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  min-width: 84px; /* Spitze bleibt lesbar („Völkerrecht“ ohne Trennung) */
}

/* Im Artikel (display:block) fehlt das gap der Flexbox → Abstand per Rand */
.zs-artikel .zs-pyramid .zs-pyr-row + .zs-pyr-row { margin-top: 3px; }
.zs-pyr-row:nth-child(1) { background: #742a2a; }
.zs-pyr-row:nth-child(2) { background: #9b2c2c; }
.zs-pyr-row:nth-child(3) { background: #c53030; }
.zs-pyr-row:nth-child(4) { background: #2b6cb0; }
.zs-pyr-row:nth-child(5) { background: #2c7a7b; }
.zs-pyr-row:nth-child(6) { background: #276749; }
.zs-pyr-row:nth-child(7) { background: #285e61; }

/* ── SV Grid ─────────────────────────────────────────────── */
.zs-sv-grid {
  display: grid;
  clear: both;
  /* auto-fit statt fester Fünferreihe: die fünf Karten brauchen zusammen
     747 px Mindestbreite, die Inhaltsspalte ist bei einem 1280-px-Fenster aber
     nur 658 px breit — die fünfte Karte (Unfallversicherung) wurde deshalb
     abgeschnitten. Jetzt bricht die Reihe um, sobald der Platz nicht reicht. */
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.5rem;
  margin: 0.75rem 0 24px;
  position: static;
  width: 100%;
}

.zs-sv-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.5rem;
  text-align: center;
}

.zs-sv-card.sv-ag-allein {
  border-color: rgba(245,158,11,0.4);
  background: rgba(245,158,11,0.06);
}

.zs-sv-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.sv-ag-allein .zs-sv-nr { background: #f59e0b; }

.zs-sv-name {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.zs-sv-info {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ── Vier-Felder (Betriebsrat) ───────────────────────────── */
.zs-vier-felder {
  display: grid;
  clear: both;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0.75rem 0 24px;
  position: static;
  width: 100%;
}

.zs-vf-zelle {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.zs-vf-zelle.rbh-bg {
  border-color: rgba(229,62,62,0.25);
  background: rgba(229,62,62,0.05);
}

.zs-vf-zelle.bwh-bg {
  border-color: rgba(59, 130, 246, 0.25);
  background: rgba(59, 130, 246, 0.05);
}

.zs-vf-zelle.ntg-bg {
  border-color: rgba(56, 161, 105, 0.25);
  background: rgba(56, 161, 105, 0.05);
}

.zs-vf-zelle.zib-bg {
  border-color: rgba(107, 70, 193, 0.25);
  background: rgba(107, 70, 193, 0.05);
}

.zs-vf-zelle.mikp-bg {
  border-color: rgba(240, 160, 60, 0.25);
  background: rgba(240, 160, 60, 0.05);
}

.zs-vf-titel {
  display: block;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
  font-size: 0.83rem;
}

/* ── Grundsätze Grid (DSGVO) ─────────────────────────────── */
.zs-grundsaetze-grid {
  display: grid;
  clear: both;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0.75rem 0 24px;
  position: static;
  width: 100%;
}

.zs-gs-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.zs-gs-card strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--accent-blue);
  font-size: 0.82rem;
}

/* ── Bilanz ──────────────────────────────────────────────── */
.zs-bilanz {
  display: flex;
  clear: both;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 0.75rem 0 24px;
  position: static;
  width: 100%;
}

.zs-bilanz-seite {
  flex: 1;
  padding: 0.875rem 1rem;
}

.zs-bilanz-seite.aktiva { background: rgba(56,161,105,0.06); }
.zs-bilanz-seite.passiva { background: rgba(66,153,225,0.06); }

.zs-bilanz-titel {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

.zs-bilanz-zeile {
  font-size: 0.82rem;
  color: var(--text-secondary);
  padding: 0.2rem 0;
}

.zs-bilanz-zeile.muted { color: var(--text-muted); font-size: 0.77rem; }

.zs-bilanz-mitte {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  font-size: 1.5rem;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

/* ── KLR Flow ────────────────────────────────────────────── */
.zs-klr-flow {
  display: flex;
  align-items: stretch;
  margin: 0.75rem 0;
}

.zs-klr-box {
  flex: 1;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.875rem 0.75rem;
  text-align: center;
}

.zs-klr-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.zs-klr-titel {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.zs-klr-frage {
  font-size: 0.78rem;
  color: var(--accent-blue);
  margin-bottom: 0.35rem;
  font-style: italic;
}

.zs-klr-info {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.zs-klr-pfeil {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  color: var(--text-muted);
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* ── Kalkulations-Schema ─────────────────────────────────── */
.zs-kalkulation-schema {
  display: block;
  clear: both;
  position: static;
  width: 100%;
  float: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 0.75rem 0 24px;
  font-size: 0.85rem;
}

.zs-kalk-zeile {
  padding: 0.45rem 0.875rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

.zs-kalk-zeile:last-child { border-bottom: none; }

.zs-kalk-zeile.a {
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary);
}

.zs-kalk-zeile.b {
  padding-left: 1.75rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.zs-kalk-zeile.sum {
  background: var(--bg-tertiary);
  font-weight: 700;
  color: var(--text-primary);
  border-top: 1px solid var(--border);
}

/* ── BEP SVG ─────────────────────────────────────────────── */
.zs-bep-svg {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-width: min(600px, 80%);
  max-height: 350px;
}

.zs-dreieck-svg {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
  max-width: min(600px, 80%);
  max-height: 350px;
}

/* ── pH Skala ────────────────────────────────────────────── */
.zs-ph-skala { margin: 0.75rem 0; }

.zs-ph-bar {
  height: 26px;
  border-radius: 4px;
  display: flex;
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.zs-ph-zahlen {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.zs-ph-7 {
  font-weight: 700;
  color: #4ade80;
}

.zs-ph-extreme {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
}

/* ── Spannungsreihe ──────────────────────────────────────── */
.zs-spannungsreihe {
  position: relative;
  margin: 0.75rem 0;
}

.zs-sr-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

.zs-sr-label.links { text-align: left; margin-bottom: 0.35rem; }
.zs-sr-label.rechts { text-align: right; margin-top: 0.35rem; }

.zs-sr-bar {
  position: relative;
  height: 36px;
  background: linear-gradient(to right, #e85d4a, #f0a03c, #ecc94b, #4ade80, #3b82f6, #a78bfa);
  border-radius: 4px;
  margin: 0.5rem 0;
}

.zs-sr-element {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(15,17,30,0.85);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: monospace;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.2);
  white-space: nowrap;
}

/* ── Maslow Pyramide ─────────────────────────────────────── */
.zs-maslow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 0.75rem auto;
  max-width: 480px;
}

.zs-m-row {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  padding: 4px 8px;
  width: var(--mw, 100%);
}

.zs-m-row:nth-child(1) { background: #6b46c1; }
.zs-m-row:nth-child(2) { background: #2b6cb0; }
.zs-m-row:nth-child(3) { background: #276749; }
.zs-m-row:nth-child(4) { background: #b7791f; }
.zs-m-row:nth-child(5) { background: #c53030; }

/* ── Tuckman ─────────────────────────────────────────────── */
.zs-tuckman {
  display: flex;
  gap: 0.35rem;
  margin: 0.75rem 0;
}

.zs-tuck-phase {
  flex: 1;
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.5rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.zs-tuck-phase p {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.zs-tuck-phase strong {
  display: block;
  font-size: 0.82rem;
  margin: 0.2rem 0;
}

.zs-tuck-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.2rem;
}

.tuck-forming  { background: rgba(59,130,246,0.08);  border-color: rgba(59,130,246,0.3); }
.tuck-storming { background: rgba(229,62,62,0.08);   border-color: rgba(229,62,62,0.3); }
.tuck-norming  { background: rgba(245,158,11,0.08);  border-color: rgba(245,158,11,0.3); }
.tuck-performing{ background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.3); }

.tuck-forming  .zs-tuck-nr { background: #3b82f6; }
.tuck-storming .zs-tuck-nr { background: #e53e3e; }
.tuck-norming  .zs-tuck-nr { background: #f59e0b; }
.tuck-performing .zs-tuck-nr { background: #4ade80; color: #111; }

.tuck-forming  strong { color: #3b82f6; }
.tuck-storming strong { color: #e53e3e; }
.tuck-norming  strong { color: #f59e0b; }
.tuck-performing strong { color: #4ade80; }

.zs-tuck-pfeil {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  font-size: 1rem;
  padding: 0 0.1rem;
  flex-shrink: 0;
}

/* ── Eisenhower Matrix 2x2 ───────────────────────────────── */
.zs-matrix2x2 {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  gap: 0.4rem;
  margin: 0.75rem 0;
}

.zs-m2-header {
  display: contents;
}

.zs-m2-col-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  padding: 0.25rem;
}

.zs-m2-row {
  display: contents;
}

.zs-m2-row-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  writing-mode: horizontal-tb;
  display: flex;
  align-items: center;
  padding-right: 0.5rem;
  white-space: nowrap;
}

.zs-m2-cell {
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.zs-m2-cell small {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.eisen-a { background: rgba(229,62,62,0.1);  border-color: rgba(229,62,62,0.3); }
.eisen-b { background: rgba(56,161,105,0.1); border-color: rgba(56,161,105,0.3); }
.eisen-c { background: rgba(221,107,32,0.1); border-color: rgba(221,107,32,0.3); }
.eisen-d { background: rgba(113,128,150,0.1);border-color: rgba(113,128,150,0.3); }

.eisen-a strong { color: #e53e3e; }
.eisen-b strong { color: #38a169; }
.eisen-c strong { color: #dd6b20; }
.eisen-d strong { color: var(--text-muted); }

/* ── SWOT ────────────────────────────────────────────────── */
.zs-swot {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  gap: 0.4rem;
  margin: 0.75rem 0;
}

.zs-swot-header { display: contents; }

.zs-swot-hl {
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  padding: 0.25rem;
}

.zs-swot-hl.positiv { color: #38a169; }
.zs-swot-hl.negativ { color: #e53e3e; }

.zs-swot-row { display: contents; }

.zs-swot-rl {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  padding-right: 0.5rem;
  white-space: nowrap;
}

.zs-swot-cell {
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.zs-swot-cell small {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.sw-s { background: rgba(56,161,105,0.1);  border-color: rgba(56,161,105,0.3); }
.sw-w { background: rgba(229,62,62,0.1);   border-color: rgba(229,62,62,0.3); }
.sw-o { background: rgba(66,153,225,0.1);  border-color: rgba(66,153,225,0.3); }
.sw-t { background: rgba(221,107,32,0.1);  border-color: rgba(221,107,32,0.3); }

.sw-s strong { color: #38a169; }
.sw-w strong { color: #e53e3e; }
.sw-o strong { color: var(--accent-blue); }
.sw-t strong { color: #dd6b20; }

/* ── Dreieck (Magisches Dreieck) ─────────────────────────── */
.zs-dreieck-wrap { text-align: center; margin: 0.75rem 0; }

/* ── Loading ─────────────────────────────────────────────── */
.zs-loading {
  text-align: center;
  color: var(--text-muted);
  padding: 3rem;
  font-size: 0.9rem;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .zs-page { grid-template-columns: 220px 250px 1fr; }
}

@media (max-width: 900px) {
  .zs-page { grid-template-columns: 220px minmax(0, 1fr); }
  .zs-toc-panel { display: none; }
  .zs-content { grid-column: 2; padding: 1.5rem; }
}

@media (max-width: 768px) {
  /* minmax(0, …) statt 1fr: ein blosses 1fr heisst minmax(auto, 1fr) und laesst
     sich von breitem Inhalt aufblaehen. Die 47 Tabellen der Seite haben die
     Spalte so auf 935 px gezogen — bei 390 px Bildschirmbreite. */
  .zs-page { grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
  .zs-content { grid-column: 1; padding: 1.5rem 1rem; height: auto; padding-bottom: 80px; }
}

@media (max-width: 640px) {
  .zs-sv-grid { grid-template-columns: repeat(2, 1fr); }
  .zs-tuckman { flex-wrap: wrap; }
  .zs-klr-flow { flex-direction: column; }
  .zs-grundsaetze-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   KI-CHAT WIDGET (Zusammenfassungsseite)
   ============================================================ */
:root { --ki-fach-color: #e85d4a; }

.ki-widget { position: fixed; bottom: 24px; right: 24px; z-index: 1000; }

/* G3-Fix: Auffälliger Pill-Button mit Text, orange Hintergrund, Pulsier-Animation */
.ki-fab {
  /* Kein festes width/height mehr — wächst mit dem Text */
  min-height: 48px;
  border-radius: 28px;
  background: #5469d4;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  color: #fff;
  font-weight: 700;
  font-size: 15.5px;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(84, 105, 212, 0.5);
  transition: transform 0.2s, opacity 0.25s, box-shadow 0.2s;
  /* Pulsier-Animation alle 30 Sekunden */
  animation: ki-fab-puls 30s ease-in-out infinite;
}
.ki-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 22px rgba(84, 105, 212, 0.65);
}
.ki-fab.hidden { opacity: 0; pointer-events: none; transform: scale(0.7); }
.ki-fab svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; flex-shrink: 0; }
.ki-fab-text { white-space: nowrap; }

@keyframes ki-fab-puls {
  /* Puls-Effekt bei 0% und kurz danach, danach 30 Sekunden Pause */
  0%   { transform: scale(1); box-shadow: 0 4px 16px rgba(84, 105, 212,0.5); }
  1.5% { transform: scale(1.05); box-shadow: 0 6px 24px rgba(84, 105, 212,0.7); }
  3%   { transform: scale(1); box-shadow: 0 4px 16px rgba(84, 105, 212,0.5); }
  100% { transform: scale(1); box-shadow: 0 4px 16px rgba(84, 105, 212,0.5); }
}

.ki-panel {
  position: absolute; bottom: 70px; right: 0;
  width: 380px; height: 480px;
  background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 16px;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  opacity: 0; transform: translateY(16px) scale(0.96); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease; overflow: hidden;
}
.ki-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }

.ki-panel-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.875rem 1rem; border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary); flex-shrink: 0;
}
.ki-panel-title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.ki-panel-title svg { stroke: var(--ki-fach-color); }
.ki-panel-kontext { flex: 1; font-size: 0.75rem; color: var(--text-muted); }
.ki-close-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 0.25rem; line-height: 1; transition: color 0.15s; }
.ki-close-btn:hover { color: var(--text-primary); }

.ki-verlauf { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.ki-willkommen p { font-size: 0.83rem; color: var(--text-muted); text-align: center; line-height: 1.5; }

.ki-nachricht { font-size: 0.85rem; line-height: 1.55; padding: 0.6rem 0.875rem; border-radius: 10px; max-width: 90%; }
.ki-nachricht-user { background: var(--ki-fach-color); color: #fff; align-self: flex-end; border-bottom-right-radius: 3px; }
.ki-nachricht-assistant { background: var(--bg-tertiary); color: var(--text-secondary); align-self: flex-start; border-bottom-left-radius: 3px; border: 1px solid var(--border); }
.ki-nachricht-fehler { color: var(--accent-red) !important; border-color: rgba(229,62,62,0.3) !important; }

.ki-input-area { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--border); flex-shrink: 0; }
.ki-textarea { flex: 1; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 10px; color: var(--text-primary); font-size: 0.85rem; font-family: inherit; padding: 0.5rem 0.75rem; resize: none; outline: none; line-height: 1.5; transition: border-color 0.15s; max-height: 100px; }
.ki-textarea:focus { border-color: var(--ki-fach-color); }
.ki-send-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--ki-fach-color); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.15s; }
.ki-send-btn:hover { opacity: 0.85; }
.ki-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ki-send-btn svg { stroke: #fff; }

@media (max-width: 480px) { .ki-panel { width: calc(100vw - 32px); right: -8px; } }

/* ── Prüfungs-Timer-Bar ──────────────────────────────────── */
.pruefung-timer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.875rem 1.25rem;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.ptb-left { flex: 1; }
.ptb-title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.ptb-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

.ptb-center { text-align: center; flex-shrink: 0; }
.ptb-uhr {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent-green);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: color 0.3s;
}
.ptb-uhr.warnung { color: var(--accent-yellow); }
.ptb-uhr.kritisch { color: var(--accent-red); animation: puls 1s ease-in-out infinite; }
.ptb-uhr-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em; }

.ptb-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Prüfungs-Ergebnis ───────────────────────────────────── */
.pruefung-ergebnis {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.pe-score { font-size: 3rem; font-weight: 800; letter-spacing: -0.03em; margin: 0.5rem 0; }
.pe-label { font-size: 1rem; color: var(--text-secondary); margin-bottom: 1rem; }
.pe-bestanden { color: var(--accent-green); }
.pe-nicht-bestanden { color: var(--accent-red); }
.pe-detail { font-size: 0.875rem; color: var(--text-muted); }

/* ── Dashboard-Weitermachen-Karte ─────────────────────────── */
.dash-weitermachen-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(59,130,246,0.03));
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.dash-wm-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dash-wm-icon svg { width: 16px; height: 16px; stroke: #fff; fill: #fff; }
.dash-wm-text { flex: 1; min-width: 0; }
.dash-wm-title { font-size: 0.875rem; font-weight: 700; color: var(--text-primary); }
.dash-wm-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Offene Prüfungen ────────────────────────────────────── */
.offene-pruefungen-liste { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.offene-pruefung-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
}
.op-fach-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
  flex-shrink: 0;
}
.op-fach-badge.fach-rbh  { color: #e85d4a; }
.op-fach-badge.fach-bwh  { color: #3b82f6; }
.op-fach-badge.fach-mikp { color: #f0a03c; }
.op-fach-badge.fach-zib  { color: #a78bfa; }
.op-fach-badge.fach-ntg  { color: #4ade80; }
.op-info { flex: 1; min-width: 0; }
.op-title { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); }
.op-meta  { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

/* ── Letzte Prüfungen Liste ──────────────────────────────── */
.letzte-pruefungen-liste { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 2rem; }
.letzte-pruefung-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
}
.lp-fach { font-size: 0.8rem; font-weight: 700; width: 40px; flex-shrink: 0; }
.lp-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lp-jahr { font-size: 0.875rem; color: var(--text-primary); font-weight: 600; }
.lp-datum { font-size: 0.75rem; color: var(--text-muted); }
.lp-score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.lp-punkte { font-size: 0.9rem; font-weight: 700; }

/* ── Filter-Select ───────────────────────────────────────── */
.dash-pruef-filter { display: flex; align-items: center; gap: 0.5rem; }
.filter-select {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.8rem;
  padding: 4px 8px;
  cursor: pointer;
  outline: none;
}
.filter-select:focus { border-color: var(--accent-blue); }

.empty-hint { font-size: 0.875rem; color: var(--text-muted); padding: 1rem; text-align: center; }
.btn-sm { font-size: 0.8rem; padding: 6px 12px; }

/* ── Prüfungs-Fragen-Container ───────────────────────────── */
#pruefung-fragen-container { padding: 0; }

.exam-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.exam-nav-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 1.25rem;
}
.exam-dot {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.exam-dot.aktiv { border-color: var(--accent-blue); color: var(--accent-blue); background: rgba(59,130,246,0.1); }
.exam-dot.beantwortet { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.4); color: var(--accent-green); }
.exam-dot.aktiv.beantwortet { border-color: var(--accent-blue); color: var(--accent-blue); }

.exam-frage-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.exam-frage-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.exam-fach-chip {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  color: var(--text-muted);
}
.exam-fach-chip.fach-rbh  { color: #e85d4a; }
.exam-fach-chip.fach-bwh  { color: #3b82f6; }
.exam-fach-chip.fach-mikp { color: #f0a03c; }
.exam-fach-chip.fach-zib  { color: #a78bfa; }
.exam-fach-chip.fach-ntg  { color: #4ade80; }
.exam-punkte-chip { font-size: 0.72rem; color: var(--text-muted); }
.exam-frage-text { font-size: 1rem; font-weight: 600; color: var(--text-primary); line-height: 1.5; margin-bottom: 1.25rem; }
.exam-antworten { display: flex; flex-direction: column; gap: 0.5rem; }
.exam-antwort-btn {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.exam-antwort-btn:hover { border-color: var(--accent-blue); color: var(--text-primary); }
.exam-antwort-btn.gewaehlt { background: rgba(59,130,246,0.15); border-color: var(--accent-blue); color: var(--accent-blue); font-weight: 600; }

.exam-nav-buttons { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; }

.exam-uebersicht {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem;
  text-align: center;
}
.exam-uebersicht h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-primary); }
.exam-uebersicht p { color: var(--text-secondary); margin-bottom: 1rem; }
.exam-uebersicht-dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* Lösungsübersicht */
.exam-loesung-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.eli-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
/* Fragetext — größer + farbiger linker Balken */
.eli-frage {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  line-height: 1.5;
}
/* Antworten als eigene Blöcke */
.eli-antworten-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.eli-antwort-block {
  font-size: 14.5px;
  padding: 7px 12px;
  border-radius: 5px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.eli-antwort-block.eli-antwort-richtig {
  background: rgba(74,222,128,0.1);
  border-color: var(--accent-green);
  color: var(--accent-green);
  font-weight: 600;
}
.eli-antwort-block.eli-antwort-falsch {
  background: rgba(239,68,68,0.1);
  border-color: var(--accent-red);
  color: var(--accent-red);
  font-weight: 600;
}
/* Musterlösung-Toggle */
.eli-loesung-bereich { margin: 10px 0; }
.eli-loesung-btn {
  background: none;
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 14.5px;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.eli-loesung-btn:hover { background: var(--bg-card-hover); }
.eli-loesung-inhalt { margin-top: 12px; }
.eli-loesung-alt {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.7;
  padding: 10px;
  background: var(--bg-card);
  border-radius: 6px;
}
/* KI-Hilfe Button Auswertung */
.eli-ki-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 16px;
  background: rgba(84, 105, 212,0.08);
  border: 1px solid rgba(84, 105, 212,0.35);
  border-radius: 8px;
  color: #8796ef;
  font-size: 14.5px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.eli-ki-btn:hover { background: rgba(84, 105, 212,0.15); }
/* Altes Format — unverändert behalten */
.eli-antwort { font-size: 0.8rem; padding: 4px 0; }
.eli-antwort.richtig { color: var(--accent-green); }
.eli-antwort.falsch  { color: var(--accent-red); }
.eli-erklaerung { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; font-style: italic; border-top: 1px solid var(--border); padding-top: 6px; }

/* ── Prüfungs-Start-Grid ─────────────────────────────────── */
.pruefung-start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.pruefung-start-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.pruefung-start-card:hover { border-color: var(--accent-blue); transform: translateY(-2px); }
.psc-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.psc-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.25rem; }
.psc-desc { font-size: 0.8rem; color: var(--text-muted); }

/* ── Dashboard Stats Grid: 5 Spalten ────────────────────── */
/* Wenn Prüfungs-Avg Karte vorhanden: Grid auf 5 Spalten erweitern */
.dashboard-stats-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* ── Prüfungstermine-Grid ────────────────────────────────── */
.pruef-termine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.pruef-gruppe-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
}
.pruef-gruppe-titel {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}
.pruef-termin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.pruef-termin-row:last-child { border-bottom: none; }
.pruef-termin-datum {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.pruef-termin-label {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.pruef-countdown {
  font-size: 13.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}
.pruef-countdown.soon {
  background: rgba(232,93,74,0.15);
  color: var(--accent-red);
}
.pruef-countdown.mid {
  background: rgba(240,160,60,0.15);
  color: #f0a03c;
}
.pruef-countdown.far {
  background: rgba(74,222,128,0.1);
  color: var(--accent-green);
}
.pruef-hinweis {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 0.5rem;
  font-style: italic;
}
.pruef-skeleton {
  height: 120px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Pareto-Analyse ──────────────────────────────────────── */
.pareto-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(240,160,60,0.08);
  border: 1px solid rgba(240,160,60,0.25);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}
.pareto-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.pareto-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pareto-tab:hover { border-color: var(--border-hover); color: var(--text-primary); }
.pareto-tab.active { color: #fff; }
.pareto-chart-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.pareto-chart { display: flex; flex-direction: column; gap: 6px; }
.pareto-row {
  display: grid;
  grid-template-columns: minmax(120px, 220px) 1fr 46px;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  transition: opacity 0.15s;
}
.pareto-row.b-teil { opacity: 0.5; }
.pareto-row.b-teil:hover { opacity: 0.8; }
.pareto-row.schwach .pareto-label { color: var(--accent-red); }
.pareto-label {
  font-size: 13.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pareto-schwach-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(232,93,74,0.15);
  color: var(--accent-red);
  border: 1px solid rgba(232,93,74,0.3);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pareto-bar-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 20px;
}
.pareto-bar {
  height: 14px;
  border-radius: 3px;
  min-width: 2px;
  transition: width 0.4s ease;
}
.pareto-pct {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 28px;
}
.pareto-cum {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}
.pareto-grenze {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px dashed rgba(255,255,255,0.2);
  padding: 8px 0 4px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 4px;
  grid-column: 1/-1;
}

/* ── Forum: Gast-Blur ────────────────────────────────────── */
.msg-blurred {
  position: relative;
  pointer-events: none;
  user-select: none;
}
.msg-blurred .msg-body {
  filter: blur(16px);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}
.msg-blurred .msg-avatar {
  filter: blur(16px);
  opacity: 0.45;
}
.forum-guest-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(to bottom, rgba(17,19,30,0) 0%, rgba(17,19,30,0.97) 30%, var(--bg-primary) 60%);
  padding: 4rem 1rem 1rem;
  text-align: center;
  margin-top: -140px;
}
.forum-guest-overlay-title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text-primary);
}
.forum-guest-overlay-text {
  font-size: 14.5px;
  color: var(--text-muted);
  max-width: 280px;
  line-height: 1.5;
}
.forum-guest-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.forum-guest-btn {
  padding: 8px 18px;
  border-radius: var(--radius-md);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: opacity 0.15s;
}
.forum-guest-btn:hover { opacity: 0.85; }
.forum-guest-btn.primary { background: #5469d4; color: #fff; }
.forum-guest-btn.secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* ── Dashboard Verbesserungen ─────────────────────────────── */
.section-title {
  font-size: 22px !important;
  font-weight: 700 !important;
}

.section-header {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, #2a2d3e);
}

.panel-title {
  font-size: 18px;
  font-weight: 700;
}

/* Prüfungsinformationen kombinierter Bereich */
.pruef-info-section {
  margin-top: 2.5rem;
}

.pruef-info-section-header {
  margin-bottom: 1rem;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, #2a2d3e);
}

.pruef-info-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.pruef-info-year {
  /* Farbregel Redesign: kein dekoratives Blau. Die Jahreszahl ist eine
     reine Angabe, kein Fortschritt und keine Aktion — daher neutral. */
  color: var(--tx-2);
  font-size: 26px;
}

.pruef-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  align-items: start;
}

.pruef-info-sub-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

@media (max-width: 900px) {
  .pruef-info-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Lösung anzeigen: grüner Button ───────────────────────── */
.btn-loesung-gruen {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md, 8px);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  border: none;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}
.btn-loesung-gruen:hover {
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.65);
  transform: translateY(-1px);
}
.btn-loesung-gruen svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Änderung 4: Buttons nach falscher Antwort ─────────────── */
.btn-musterloesung {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.6), 0 0 30px rgba(34, 197, 94, 0.3);
  animation: plasma-green 2s ease-in-out infinite alternate;
  transition: all 0.3s;
  font-family: inherit;
  font-size: 0.9rem;
}

@keyframes plasma-green {
  0% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.5), 0 0 20px rgba(34, 197, 94, 0.3); }
  100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.8), 0 0 40px rgba(34, 197, 94, 0.5), 0 0 60px rgba(34, 197, 94, 0.2); }
}

.btn-ki-fragen {
  background: #5469d4;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 0 15px rgba(249, 115, 22, 0.5);
  transition: all 0.3s;
  font-family: inherit;
  font-size: 0.9rem;
}

.btn-ki-fragen:hover {
  box-shadow: 0 0 25px rgba(249, 115, 22, 0.8);
  transform: translateY(-1px);
}

/* ── Änderung 5: KI-Hinweis Glow + Puls ───────────────────── */
.ki-hint-glow {
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.3);
  border: 1px solid rgba(249, 115, 22, 0.4);
  transition: all 0.3s;
}

@keyframes ki-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(249, 115, 22, 0.3), 0 0 15px rgba(249, 115, 22, 0.1); }
  50% { box-shadow: 0 0 20px rgba(249, 115, 22, 0.7), 0 0 35px rgba(249, 115, 22, 0.4); }
}

.ki-hint-glow.pulsing {
  animation: ki-pulse 1.5s ease-in-out infinite;
}

/* ── A2-Fix: KI-Aufgaben-Button ──────────────────────────── */
.chip-ki-aufgaben {
  background: rgba(84, 105, 212,0.12) !important;
  border-color: rgba(84, 105, 212,0.4) !important;
  color: #8796ef !important;
  font-weight: 600;
}

.chip-ki-aufgaben:hover {
  background: rgba(84, 105, 212,0.22) !important;
  border-color: #8796ef !important;
}

.chip-ki-aufgaben.active {
  background: rgba(84, 105, 212,0.3) !important;
  border-color: #8796ef !important;
  box-shadow: 0 0 8px rgba(84, 105, 212,0.4);
}

.chip-ki-gesperrt {
  opacity: 0.55;
  cursor: not-allowed !important;
}

/* ── Änderung 6: Zusatzprüfungen Checkbox (entfernt, Klassen bleiben für Kompatibilität) ──── */
.zusatz-checkbox {
  display: none; /* entfernt */
}

/* ── Lernplan Wochen-Akkordion ─────────────────────────────── */
.lp-woche { border: 1px solid #1e2233; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.lp-woche-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #1a1d2e; cursor: pointer; user-select: none; gap: 12px; }
.lp-woche-header:hover { background: #1e2436; }
.lp-woche-title { font-size: 14.5px; font-weight: 600; color: #e2e4ea; }
.lp-woche-badge { font-size: 13.5px; color: #9aa0b0; background: #252838; border-radius: 10px; padding: 2px 10px; white-space: nowrap; flex-shrink: 0; }
.lp-woche-chevron { width: 16px; height: 16px; color: #6b7280; flex-shrink: 0; transition: transform 0.25s ease; }
.lp-woche.open .lp-woche-chevron { transform: rotate(180deg); }
.lp-woche-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.lp-woche.open .lp-woche-body { max-height: 4000px; }
.lp-woche-row { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-top: 1px solid #1e2233; font-size: 14.5px; flex-wrap: wrap; }
.lp-woche-row.heute-row { background: rgba(84,105,212,0.07); }
.lp-woche-row.verpasst-row { background: rgba(232,93,74,0.05); }
.lp-woche-row-datum { min-width: 76px; font-size: 13.5px; color: #9aa0b0; flex-shrink: 0; }
.lp-woche-row-aufgabe { flex: 1; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; min-width: 0; }
.lp-fach-badge { border: 1px solid; border-radius: 4px; padding: 1px 6px; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.lp-row-quote { font-size: 13.5px; white-space: nowrap; flex-shrink: 0; }
.lp-row-quote .q-richtig { color: #4ade80; }
.lp-row-quote .q-falsch  { color: #e85d4a; }
.lp-row-btn { background: #1e2233; border: none; border-radius: 6px; color: #9aa0b0; font-size: 13.5px; padding: 4px 10px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.lp-row-btn:hover { background: #252838; color: #e2e4ea; }
.lp-verpasst-badge { display: inline-flex; align-items: center; gap: 3px; background: rgba(232,93,74,0.15); color: #e85d4a; border-radius: 10px; padding: 1px 8px; font-size: 13.5px; font-weight: 600; margin-left: 6px; }

.badge-soon {
  background: #3b82f6;
  color: white;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

/* ============================================================
   AUFGABE 1: Vorteile grün / Nachteile rot (vn-container)
   ============================================================ */
.vn-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}

.vorteile-liste {
  background: rgba(34, 197, 94, 0.1);
  border-left: 3px solid #22c55e;
  border-radius: 6px;
  padding: 10px 12px;
}

.nachteile-liste {
  background: rgba(239, 68, 68, 0.1);
  border-left: 3px solid #ef4444;
  border-radius: 6px;
  padding: 10px 12px;
}

.vorteil-label {
  color: #22c55e;
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.nachteil-label {
  color: #ef4444;
  display: block;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.vorteile-liste ul,
.nachteile-liste ul {
  margin: 0;
  padding-left: 16px;
}

.vorteile-liste li,
.nachteile-liste li {
  margin-bottom: 3px;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .vn-container {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   AUFGABE 2: Formeln als echte Brüche (formel-display)
   ============================================================ */
.formel-display {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  padding: 8px 14px;
  margin: 6px 0;
  font-family: 'Courier New', monospace;
  flex-wrap: wrap;
}

.formel-bruch {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  vertical-align: middle;
}

.zaehler,
.nenner {
  padding: 1px 4px;
  font-size: 0.85em;
}

.bruchstrich {
  width: 100%;
  height: 1px;
  background: currentColor;
  margin: 2px 0;
}

.formel-name {
  font-weight: 600;
  color: #3b82f6;
}

/* ============================================================
   AUFGABE 3: Info- und Wichtig-Boxen
   ============================================================ */
.info-box {
  background: rgba(59, 130, 246, 0.08);
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 10px 0;
  font-size: 0.9rem;
}

.wichtig-box {
  background: rgba(234, 179, 8, 0.1);
  border-left: 3px solid #eab308;
  border-radius: 4px;
  padding: 10px 14px;
  margin: 10px 0;
  font-size: 0.9rem;
}

.wichtig-box::before {
  content: "Wichtig: ";
  font-weight: 700;
  color: #eab308;
}

/* ============================================================
   NEUE FEATURES: Überschriften, Premium-Modal, Stat-Karten
   ============================================================ */

/* 1. Dashboard-Hauptüberschriften vergrößern */
.section-title {
  font-size: 1.4rem !important;
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 2px solid rgba(255,255,255,0.1);
  padding-bottom: 8px;
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
}

/* 3. Premium-Badge-Hinweis (Free-Tier Banner) */
.premium-badge-hint {
  display: inline-block;
  background: rgba(84, 105, 212, .14);   /* TBW 12.10.2026: Plattform-Blau statt Orange-Verlauf */
  color: #c8d0fb;
  font-size: 13.5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 600;
  margin-left: 0;
}

/* 4. Premium-Pakete-Modal */
.premium-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}

.premium-modal-overlay.aktiv {
  display: flex;
}

.premium-modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 2rem;
  max-width: 720px;
  width: calc(100% - 2rem);
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.premium-modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  text-align: center;
}

.premium-modal-sub {
  font-size: 14.5px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 2rem;
}

.premium-pakete-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .premium-pakete-grid { grid-template-columns: 1fr; }
}

.paket-karte {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 1.5rem;
  position: relative;
}

.paket-karte.empfohlen {
  border: 2px solid var(--accent-orange);
  box-shadow: 0 0 24px rgba(84, 105, 212,0.2);
}

.empfohlen-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #5469d4;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.paket-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.paket-preis {
  font-size: 2rem;
  font-weight: 800;
  color: var(--accent-orange);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.paket-preis small {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-muted);
}

.paket-features {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.paket-features li {
  font-size: 14.5px;
  color: var(--text-secondary);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.paket-features li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  flex-shrink: 0;
}

.paket-btn {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: none;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: all 0.15s;
}

.paket-btn.standard {
  background: var(--bg-card-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.paket-btn.standard:hover {
  background: var(--border-default);
  color: var(--text-primary);
}

.paket-btn.premium {
  background: #5469d4;
  color: #fff;
}

.paket-btn.premium:hover { opacity: 0.9; transform: translateY(-1px); }

/* 7. Stat-Karten klickbar */
.stat-card.klickbar {
  cursor: pointer;
  transition: all 0.2s ease;
}

.stat-card.klickbar:hover {
  border-color: var(--border-subtle);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* Statistik-Seite */
.statistik-grid {
  display: grid;
  /* A4-Fix: zwei Spalten bei breitem Screen, eine bei schmalem */
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

@media (max-width: 768px) {
  .statistik-grid {
    grid-template-columns: 1fr;
  }
}

.statistik-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  /* A4-Fix: min-height und padding erhöht */
  min-height: 320px;
  padding: 20px;
}

.statistik-panel-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 2px solid rgba(255,255,255,0.1);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.exam-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.exam-eintrag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-size: 14.5px;
}

.exam-eintrag-fach {
  font-weight: 600;
  color: var(--text-primary);
}

.exam-eintrag-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.exam-eintrag-score {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--accent-green);
}

/* Anki / Schwachstellen-Seite */
.anki-karte {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 2rem;
  max-width: 680px;
  margin: 0 auto 20px;
}

.anki-frage {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.anki-antworten {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1.5rem;
}

.anki-antwort-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 14.5px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
}

.anki-antwort-btn:hover {
  border-color: var(--accent-blue);
  color: var(--text-primary);
}

.anki-antwort-btn.richtig {
  border-color: var(--accent-green);
  background: rgba(74,222,128,0.1);
  color: var(--accent-green);
}

.anki-antwort-btn.falsch {
  border-color: var(--accent-red);
  background: rgba(232,93,74,0.1);
  color: var(--accent-red);
}

.anki-wiederholen-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}

.anki-btn {
  padding: 8px 18px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

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

.anki-btn.verstanden {
  background: rgba(74,222,128,0.15);
  border-color: var(--accent-green);
  color: var(--accent-green);
}

.anki-btn.verstanden:hover {
  background: rgba(74,222,128,0.25);
}

/* ── Schwachstellen KI-Buttons ────────────────────────────── */
.anki-ki-tipp-btn {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 9px 14px;
  background: rgba(59,130,246,0.07);
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 8px;
  color: #3b82f6;
  font-size: 14.5px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.anki-ki-tipp-btn:hover { background: rgba(59,130,246,0.14); }
.anki-ki-hilfe-btn {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 9px 14px;
  background: rgba(84, 105, 212,0.08);
  border: 1px solid rgba(84, 105, 212,0.3);
  border-radius: 8px;
  color: #8796ef;
  font-size: 14.5px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.anki-ki-hilfe-btn:hover { background: rgba(84, 105, 212,0.15); }
.anki-ki-panel {
  background: var(--bg-secondary);
  border: 1px solid rgba(84, 105, 212,0.25);
  border-radius: 10px;
  padding: 14px;
  margin: 8px 0;
}
.anki-leer {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
  font-size: 1rem;
}

.anki-fortschritt {
  text-align: center;
  font-size: 14.5px;
  color: var(--text-dim);
  margin-bottom: 20px;
}

/* h4 Unterüberschriften in Zusammenfassungen */
.zs-artikel h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 1.25rem 0 0.4rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--fach-color, var(--accent-blue));
}

/* ── Onboarding Spotlight-System ── */
.ob-overlay-piece {
  position: fixed;
  background: rgba(0,0,0,0.75);
  z-index: 10000;
  pointer-events: auto;
  transition: all 0.25s ease;
}
.ob-tooltip {
  position: fixed;
  z-index: 10001;
  background: #1a1d27;
  border: 1px solid #5469d4;
  border-radius: 12px;
  padding: 20px 24px;
  max-width: 320px;
  min-width: 260px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  pointer-events: auto;
  animation: ob-fadein 0.2s ease;
}
@keyframes ob-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ob-tooltip-progress { font-size:13.5px; color:#5469d4; text-align:right; margin-bottom:10px; }
.ob-tooltip-icon { font-size:2rem; margin-bottom:8px; }
.ob-tooltip-title { font-size:16px; font-weight:700; color:#fff; margin-bottom:8px; }
.ob-tooltip-text { font-size:15.5px; color:#9aa0b0; line-height:1.6; margin-bottom:20px; }
.ob-tooltip-actions { display:flex; justify-content:space-between; align-items:center; }
.ob-btn-skip { background:none; border:none; color:#5a6070; font-size:14.5px; cursor:pointer; padding:4px 0; }
.ob-btn-skip:hover { color:#9aa0b0; }
.ob-btn-next { background:#5469d4; border:none; color:#fff; border-radius:8px; padding:8px 20px; font-weight:600; font-size:15.5px; cursor:pointer; transition:background 0.15s; }
.ob-btn-next:hover { background:#d4682a; }
/* Pfeil-Dreiecke */
.ob-arrow { position:absolute; width:0; height:0; }
.ob-arrow-right  { left:-8px;   top:50%; transform:translateY(-50%); border-top:8px solid transparent; border-bottom:8px solid transparent; border-right:8px solid #5469d4; }
.ob-arrow-left   { right:-8px;  top:50%; transform:translateY(-50%); border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:8px solid #5469d4; }
.ob-arrow-bottom { top:-8px;    left:50%; transform:translateX(-50%); border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid #5469d4; }
.ob-arrow-top    { bottom:-8px; left:50%; transform:translateX(-50%); border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid #5469d4; }
/* "Tour neu starten"-Button im Profil */
.profil-tour-btn { background:transparent; border:1px solid #2a2d3a; color:#9aa0b0; border-radius:8px; padding:9px 18px; font-size:15.5px; cursor:pointer; transition:border-color 0.15s,color 0.15s; display:inline-flex; align-items:center; gap:8px; }
.profil-tour-btn:hover { border-color:#5469d4; color:#5469d4; }
/* App-Tour nur am Desktop – auf dem Handy Hinweis statt Knopf */
.profil-tour-mobil { display:none; }
@media (max-width: 768px) {
  .profil-tour-desktop { display:none !important; }
  .profil-tour-mobil { display:block; }
}

/* ── Free-User Fortschritt-Meldung ─────────────────────────── */
.fortschritt-meldung {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e293b;
  border: 1px solid rgba(240,160,60,0.4);
  border-radius: 12px;
  padding: 16px 20px;
  z-index: 9000;
  max-width: 480px;
  width: 90%;
  opacity: 0;
  transition: all 0.4s ease;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.fortschritt-meldung.sichtbar {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.fortschritt-meldung-content {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.fortschritt-meldung-icon { font-size: 1.8rem; flex-shrink: 0; }
.fortschritt-meldung strong { display: block; margin-bottom: 4px; }
.fortschritt-meldung p { font-size: 0.85rem; color: rgba(255,255,255,0.65); margin: 0; }
.fortschritt-meldung-buttons { display: flex; gap: 8px; margin-top: 10px; flex-shrink: 0; }
.fortschritt-meldung-buttons button { padding: 6px 14px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.85rem; }
.fortschritt-meldung-buttons button:first-child { background: #3b82f6; color: white; font-weight: 600; }
.btn-dismiss { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); }

/* ── Grafik-Zoom-Overlay ─────────────────────────────────────── */
#grafik-zoom-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.92); cursor: zoom-out;
  justify-content: center; align-items: center; padding: 20px;
}
#grafik-zoom-overlay.active { display: flex; }

/* ══════════════════════════════════════════════════════════════
   Formelsammlung – Gruppen-Layout
   ══════════════════════════════════════════════════════════════ */

/* ── Suchfeld ────────────────────────────────────────────────── */
.formel-suche-wrap {
  margin-bottom: 16px;
}

.formel-suche-input {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card, #131520);
  border: 1px solid var(--border-subtle, #2a2d42);
  border-radius: var(--radius-lg, 10px);
  color: var(--text-secondary, #e2e4ea);
  font-size: 14.5px;
  padding: 9px 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.formel-suche-input:focus {
  border-color: var(--accent-blue, #3b82f6);
}

.formel-suche-input::placeholder {
  color: var(--text-dim, #6b6f82);
}

/* ── Gruppen-Block ───────────────────────────────────────────── */
.formel-gruppe {
  background: var(--bg-card, #131520);
  border: 1px solid var(--border-default, #1e2030);
  border-bottom: 1px solid #1e2233;
  border-radius: 12px;
  margin-bottom: 48px;
  overflow: hidden;
}

.formel-gruppe-header {
  padding: 32px 20px 16px;
  border-bottom: 1px solid var(--border-default, #1e2030);
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 28px;
  color: var(--text-primary, #ffffff);
  background: var(--bg-card-hover, #1a1c2e);
  letter-spacing: -0.4px;
}

.formel-gruppe-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.formel-gruppe-name {
  flex: 1;
}

.formel-gruppe-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim, #6b6f82);
  background: var(--bg-secondary, #0a0b12);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border-default, #1e2030);
  flex-shrink: 0;
}

/* ── Formel-Eintrag ──────────────────────────────────────────── */
/* Jede Formel ist ein geschlossener Kasten. Zwei Spalten:
   links Grafik + Formel + Legende + Rechner, rechts die Rechenbeispiele.
   Ohne Rechenbeispiele bleibt die zweite Spalte leer (auto = 0 breit). */
.formel-eintrag {
  padding: 20px;
  margin: 20px;   /* bündig zum Gruppen-Header */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  background: var(--bg-card-hover, #1a1c2e);
  border: 1px solid var(--border-default, #1e2030);
  border-radius: 10px;
}

.formel-eintrag-inner {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

/* ── Grafik (links, streckt sich auf Block-Höhe) ─────────────── */
/* ── Grafik (links, klickbar) ────────────────────────────────── */
.formel-grafik-klein {
  flex: 0 0 320px;
  min-height: 240px;
  background: #1e2130;
  border: 1px solid var(--border-default, #1e2030);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  cursor: zoom-in;
  position: relative;
  transition: border-color 0.15s;
}

.formel-grafik-klein:hover {
  border-color: #4ade80;
}

.formel-grafik-klein::after {
  content: '🔍';
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 14.5px;
  opacity: 0.5;
}

.formel-grafik-klein:hover::after {
  opacity: 1;
}

.formel-grafik-klein svg {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* ── Grafik Zoom-Lightbox ─────────────────────────────────────── */
#formel-zoom-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0,0,0,0.85);
  cursor: zoom-out;
}

#formel-zoom-overlay.aktiv {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#formel-zoom-panel {
  position: relative;
  background: #1e2130;
  border: 1px solid #2a2d3e;
  border-radius: 14px;
  padding: 20px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* kein Slide-in mehr — direkt zentriert */
}

#formel-zoom-close {
  align-self: flex-end;
  background: none;
  border: 1px solid #2a2d3e;
  border-radius: 6px;
  color: #8b8fa6;
  cursor: pointer;
  font-size: 14.5px;
  padding: 4px 12px;
  flex-shrink: 0;
  font-family: inherit;
}

#formel-zoom-close:hover {
  border-color: #e85d4a;
  color: #e85d4a;
}

#formel-zoom-inhalt {
  display: flex;
  align-items: center;
  justify-content: center;
}

#formel-zoom-inhalt svg {
  width: min(80vw, 900px);
  height: auto;
  display: block;
}

/* ── Inhalt (rechts) ─────────────────────────────────────────── */
.formel-inhalt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.formel-eintrag-titel {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #ffffff);
  text-decoration: underline;
  text-underline-offset: 4px;
  margin-bottom: 4px;
}

/* ── Formel-Zeilen (gestapelt) ───────────────────────────────── */
.formel-formeln {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.formel-zeile {
  font-family: 'Courier New', monospace;
  font-size: 15.5px;
  color: var(--text-primary, #ffffff);
  line-height: 1.9;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}

/* Hauptformel (erste Variante) — groß und mittig, das Herzstück des Kastens */
.formel-zeile.formel-haupt {
  font-size: 30px;
  font-weight: 700;
  color: #e2e4ea;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--accent-blue, #3b82f6);
  padding: 22px 20px;
  border-radius: 4px;
  margin-bottom: 10px;
  justify-content: center;
  text-align: center;
}

/* Umgestellte Formeln — ebenfalls mittig, eine Stufe kleiner */
.formel-zeile.formel-neben {
  font-size: 19px;
  font-weight: 400;
  color: var(--text-muted, #8b8fa6);
  padding: 6px 12px;
  justify-content: center;
  text-align: center;
}

/* Bruch-Darstellung (unverändert, kompatibel) */
.formel-teil {
  font-family: 'Courier New', monospace;
  font-size: 15.5px;
}

.formel-bruch {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin: 0 4px;
}

.formel-bruch-zaehler,
.formel-bruch-nenner {
  padding: 0 4px;
  font-size: 13.5px;
  line-height: 1.3;
}

.formel-bruch-linie {
  width: 100%;
  border-top: 1.5px solid var(--text-primary, #ffffff);
  margin: 2px 0;
}

/* ── Variablen-Legende ───────────────────────────────────────── */
.formel-variablen {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 12px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--text-muted, #8b8fa6);
  align-items: baseline;
  margin-top: 12px;
}

.formel-var-sym {
  font-family: 'Courier New', monospace;
  color: #4ade80;
  font-weight: 600;
}

.formel-var-name {
  color: var(--text-muted, #8b8fa6);
}

/* Einheit direkt hinter dem Namen — kein separates Griditem mehr */
.formel-var-einheit {
  display: none; /* wird in JS an nameEl angehängt */
}

/* ── Rechner-Toggle ──────────────────────────────────────────── */
.formel-rechner-toggle {
  background: rgba(84, 105, 212, 0.12);
  border: 1px solid #8796ef;
  border-radius: 6px;
  color: #8796ef;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  align-self: flex-start;
  font-family: inherit;
  animation: rechner-puls 2.4s ease-in-out infinite;
}

@keyframes rechner-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(84, 105, 212, 0.0); }
  50%       { box-shadow: 0 0 0 5px rgba(84, 105, 212, 0.25); }
}

.formel-rechner-toggle:hover {
  background: rgba(84, 105, 212, 0.22);
  border-color: #8796ef;
  color: #f0c060;
  animation: none;
}

.formel-rechner-toggle.open {
  background: rgba(74, 222, 128, 0.12);
  border-color: #4ade80;
  color: #4ade80;
  animation: none;
}

.formel-rechner-toggle .chevron {
  transition: transform 0.2s;
  font-size: 10px;
  line-height: 1;
}

.formel-rechner-toggle.open .chevron {
  transform: rotate(90deg);
}

/* ── Rechner-Body (zugeklappt / aufgeklappt) ─────────────────── */
.formel-rechner-body {
  display: none;
  padding: 14px;
  background: #0d0f1c;
  border-radius: 8px;
  border: 1px solid var(--border-default, #1e2030);
}

.formel-rechner-body.open {
  display: block;
}

/* ── Pin-Button im neuen Layout ──────────────────────────────── */
.formel-eintrag .pin-btn {
  position: static;
  align-self: flex-start;
  font-size: 12px;
  padding: 4px 10px;
}

/* ── TOC-Pill Fach-Farbe ─────────────────────────────────────── */
.toc-pill:hover {
  border-color: var(--toc-farbe, var(--accent-blue));
  color: var(--toc-farbe, var(--accent-blue));
}

/* ── Responsive ──────────────────────────────────────────────── */
/* Zu schmal für zwei Spalten: Rechenbeispiele rutschen unter die Formel.
   Die zugehörigen .rechenbeispiel-*-Regeln stehen weiter unten direkt
   hinter den Basis-Regeln — von hier aus würden sie sonst wieder
   überschrieben werden. */
@media (max-width: 1450px) {
  .formel-eintrag {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .formel-eintrag-inner {
    flex-direction: column;
    gap: 10px;
  }

  /* Handy: Überschrift → Bild → Formel (04.10.2026). Der Inhaltsbereich
     löst sich auf, damit der Titel per order vor die Grafik rutscht. */
  .formel-inhalt {
    display: contents;
  }

  .formel-eintrag-titel {
    order: -1;
    margin-bottom: 0;
  }

  .formel-grafik-klein {
    flex: none;
    width: 100%;
    min-height: 160px;
    align-self: auto;
  }

  .formel-variablen {
    font-size: 12px;
    gap: 2px 8px;
  }
}
#grafik-zoom-overlay svg { max-width: 95vw; max-height: 90vh; width: auto; height: auto; }

/* ── MusterlösungStepper ─────────────────────────────────── */
.ml-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.ml-header-titel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 600;
  color: #4ade80;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ml-header-schritte {
  font-size: 14.5px;
  color: #6b7280;
}
.ml-schritt {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  align-items: flex-start;
}
.ml-schritt-nummer {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: #1a2029;
  border: 1px solid #252d3a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14.5px;
  font-weight: 600;
  color: #4ade80;
  margin-top: 2px;
}
.ml-schritt.ml-letzter .ml-schritt-nummer {
  background: #0a2a1a;
  border-color: #4ade80;
}
.ml-schritt-inhalt {
  flex: 1;
  min-width: 0;
}
.ml-schritt-titel {
  font-size: 16px;
  font-weight: 600;
  color: #eaecef;
  margin-bottom: 8px;
}
.ml-schritt-box {
  background: #1a2029;
  border: 1px solid #252d3a;
  border-radius: 8px;
  padding: 14px 18px;
}
.ml-schritt.ml-letzter .ml-schritt-box {
  background: #0a2a1a;
  border-color: #166534;
}
.ml-zeile {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.ml-zeile:last-child {
  margin-bottom: 0;
}
.ml-label {
  font-size: 14.5px;
  color: #6b7280;
  min-width: 76px;
  flex-shrink: 0;
}
.ml-wert {
  font-size: 16.5px;
  color: #b7bdc6;
  font-family: 'Courier New', Consolas, monospace;
  word-break: break-word;
}
.ml-trenner {
  border: none;
  border-top: 1px solid #252d3a;
  margin: 8px 0;
}
.ml-ergebnis-wert {
  font-size: 16px;
  font-weight: 600;
  color: #4ade80;
  font-family: 'Courier New', Consolas, monospace;
}
.ml-text-inhalt {
  font-size: 16px;
  color: #c9ced6;
  line-height: 1.65;
  white-space: pre-line;
}
/* Jeder Aufzählungspunkt der Musterlösung ist ein eigener Absatz mit klarem Abstand */
.ml-absatz + .ml-absatz {
  margin-top: 12px;
}
/* Aufzählungspunkte mit Zeichen: → Erklärung, = Schlussfolgerung/richtig, • falsche Option */
.ml-absatz-erklaer, .ml-absatz-schluss, .ml-absatz-richtig, .ml-absatz-falsch {
  display: flex;
  gap: 10px;
  align-items: baseline;
  white-space: normal;
}
.ml-marke {
  flex: 0 0 16px;
  text-align: center;
  font-weight: 700;
}
.ml-absatz-text { flex: 1; min-width: 0; }
.ml-absatz-erklaer .ml-marke,
.ml-absatz-schluss .ml-marke,
.ml-absatz-richtig .ml-marke { color: #86efac; }
.ml-absatz-falsch .ml-marke { color: #f5a3a3; }
.ml-label-falsch { color: #f5a3a3; font-weight: 600; }
.ml-label-richtig { color: #86efac; font-weight: 600; }
/* Falsche Antwortoptionen zugeklappt hinter der Begründung (04.10.2026) */
.ml-falsch-klappe { margin-top: 12px; border-top: 1px dashed rgba(245,163,163,.3); padding-top: 10px; white-space: normal; }
.ml-falsch-klappe > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: #f5a3a3; user-select: none;
}
.ml-falsch-klappe > summary::-webkit-details-marker { display: none; }
.ml-falsch-klappe > summary::before { content: '▸'; transition: transform .15s; }
.ml-falsch-klappe[open] > summary::before { transform: rotate(90deg); }
.ml-falsch-klappe > summary:hover { color: #fbc4c4; }
.ml-falsch-liste { margin-top: 10px; }
.ml-antwort-zeile {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #1e3a2e;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ml-antwort-label {
  font-size: 14.5px;
  color: #6b7280;
  min-width: 76px;
  flex-shrink: 0;
}
.ml-antwort-wert {
  font-size: 20px;
  font-weight: 700;
  color: #4ade80;
  font-family: 'Courier New', Consolas, monospace;
}
/* Block-Stil entfernt — kompakte Darstellung via .zs-antwort-kompakt gilt für alle Fächer */
/* Kompakte Antwort-Zeile für Textaufgaben (RBH, ZIB, MIKP) */
.zs-antwort-kompakt .ml-antwort-wert {
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  color: #4ade80;
  background: none;
  padding: 0;
  margin-top: 0;
}
.zs-antwort-kompakt.ml-antwort-zeile {
  align-items: center;
}

/* KI-Hilfe Button unter Musterlösung */
.ml-ki-btn {
  width: 100%;
  margin-top: 18px;
  padding: 12px 16px;
  background: rgba(84, 105, 212,0.08);
  border: 1px solid rgba(84, 105, 212,0.3);
  border-radius: 10px;
  color: #8796ef;
  font-size: 15.5px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
  font-family: inherit;
}
.ml-ki-btn:hover {
  background: rgba(84, 105, 212,0.14);
}

/* ── KI-Tipp / KI-Hilfe Buttons im Thema-Modal ───────────── */
/* Modal-Aktionsleiste: KI-Tipp + Lösung anzeigen */
.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* KI-Button im Hilfe-Modus (nach Antwort) — gilt in Quiz + Modal */
.ki-hilfe-modus {
  border-color: rgba(84, 105, 212, 0.4) !important;
  color: #8796ef !important;
  box-shadow: none !important;
  animation: none !important;
}

/* ── KaTeX in Musterlösungen ─────────────────────────────── */
.ml-wert .katex,
.ml-ergebnis-wert .katex {
  color: inherit;
}
.ml-wert .katex-html,
.ml-ergebnis-wert .katex-html {
  color: inherit;
}

/* ==================== D2: GAST-BANNER ==================== */
/* Dauerhafter Banner für nicht-angemeldete User */
.gast-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #5469d4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  font-size: 14.5px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(84, 105, 212,0.4);
  transition: padding 0.25s ease, max-height 0.25s ease;
}

/* Minimierter Zustand: nur noch ein schmaler Streifen */
.gast-banner.minimiert {
  padding: 4px 20px;
}

.gast-banner.minimiert .gast-banner-inhalt {
  display: none;
}

.gast-banner-inhalt {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.gast-banner-text {
  color: #fff;
}

.gast-banner-link {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.gast-banner-link:hover { opacity: 0.85; }

.gast-banner-toggle {
  background: rgba(255,255,255,0.25);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.gast-banner-toggle:hover { background: rgba(255,255,255,0.4); }

/* Sidebar und Main-Content nach unten schieben wenn Banner sichtbar */
body:has(.gast-banner) .sidebar {
  top: 42px;
}

body:has(.gast-banner) .main,
body:has(.gast-banner) .app-main {
  padding-top: 70px;
}

/* Bei minimiertem Banner nur minimalen Versatz */
body:has(.gast-banner.minimiert) .sidebar {
  top: 28px;
}

body:has(.gast-banner.minimiert) .main,
body:has(.gast-banner.minimiert) .app-main {
  padding-top: 56px;
}

/* ── Achievements-Seite ─────────────────────────────────────── */
.ach-section { margin-bottom: 36px; }
.ach-section-title { font-size: 14.5px; font-weight: 600; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ach-card { background: #151820; border: 1px solid #1e2233; border-radius: 12px; padding: 18px 12px; text-align: center; transition: border-color 0.2s; }
.ach-card.unlocked { border-color: #5469d4; background: rgba(84,105,212,0.05); }
.ach-card.locked { opacity: 0.45; }
.ach-icon { font-size: 2.2rem; margin-bottom: 8px; }
.ach-titel { font-size: 14.5px; font-weight: 600; color: #e2e4ea; margin-bottom: 4px; }
.ach-beschreibung { font-size: 12px; color: #6b7280; line-height: 1.4; }
.ach-datum { font-size: 12px; color: #5469d4; margin-top: 6px; }

/* ── Streak-Widget auf dem Dashboard ────────────────────────── */
.streak-widget { display: flex; align-items: center; gap: 10px; background: #151820; border: 1px solid #1e2233; border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.streak-flame { font-size: 1.8rem; transition: filter 0.3s; }
.streak-flame.orange { filter: drop-shadow(0 0 6px #5469d4); }
.streak-flame.gold   { filter: drop-shadow(0 0 10px #f59e0b); }
.streak-zahl { font-size: 1.5rem; font-weight: 700; color: #fff; }
.streak-label { font-size: 14.5px; color: #6b7280; }

/* ── Badge-Unlock-Popup ─────────────────────────────────────── */
.badge-unlock-popup {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  background: #1a1d27; border: 1px solid #5469d4; border-radius: 14px;
  padding: 16px 20px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 8px 32px rgba(84,105,212,0.25);
  animation: badge-slide-in 0.4s ease, badge-slide-out 0.4s ease 3.6s forwards;
  max-width: 320px;
}
.badge-unlock-icon { font-size: 2rem; }
.badge-unlock-titel { font-size: 12px; color: #5469d4; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.badge-unlock-name { font-size: 16.5px; font-weight: 700; color: #fff; }
@keyframes badge-slide-in { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }
@keyframes badge-slide-out { from { opacity:1; } to { opacity:0; transform: translateY(10px); } }

/* ── Lernplan ────────────────────────────────────────────────────────────── */
.lp-setup { max-width: 560px; margin: 0 auto; }
.lp-setup h2 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.lp-setup p { color: #6b7280; margin-bottom: 28px; }
.lp-field { margin-bottom: 20px; }
.lp-field label { display: block; font-size: 14.5px; font-weight: 600; color: #9aa0b0; margin-bottom: 8px; }
.lp-field input[type=date], .lp-field select { width: 100%; background: #151820; border: 1px solid #1e2233; color: #e2e4ea; border-radius: 8px; padding: 10px 14px; font-size: 15.5px; }
.lp-fach-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-fach-label { display: flex; align-items: center; gap: 6px; background: #151820; border: 1px solid #1e2233; border-radius: 8px; padding: 8px 14px; font-size: 14.5px; color: #9aa0b0; cursor: pointer; }
.lp-fach-label input { accent-color: #5469d4; }
.lp-schwachstellen-label { display: flex; align-items: center; gap: 8px; font-size: 15.5px; color: #9aa0b0; cursor: pointer; }
.lp-schwachstellen-label input { accent-color: #5469d4; }
.lp-erstellen-btn { background: #5469d4; color: #fff; border: none; border-radius: 8px; padding: 12px 28px; font-size: 16.5px; font-weight: 600; cursor: pointer; margin-top: 8px; width: 100%; }
.lp-erstellen-btn:hover { background: #d4682a; }
.lp-erstellen-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Fortschrittsbalken */
.lp-fortschritt-bar-wrap { background: #1a1d2e; border-radius: 8px; height: 8px; margin-bottom: 8px; overflow: hidden; }
.lp-fortschritt-fill { height: 100%; background: #5469d4; border-radius: 8px; transition: width 0.4s ease; }
.lp-stats { font-size: 14.5px; color: #6b7280; margin-bottom: 20px; }
/* Tag-Karten */
.lp-tag-card { background: #151820; border: 1px solid #1e2233; border-radius: 10px; padding: 14px 16px; margin-bottom: 8px; }
.lp-tag-card.heute { border-color: #5469d4; background: rgba(84,105,212,0.05); }
.lp-tag-card.erledigt { opacity: 0.6; }
.lp-tag-card.verpasst { border-color: #e85d4a; }
.lp-tag-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lp-tag-datum { font-size: 14.5px; font-weight: 600; color: #e2e4ea; }
.lp-tag-typ { font-size: 12px; color: #6b7280; background: #1e2233; border-radius: 4px; padding: 2px 8px; margin-left: auto; }
.lp-tag-icon { font-size: 1.1rem; }
.lp-check-btn { background: none; border: 1px solid #2a2d42; color: #6b7280; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: 15.5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lp-check-btn.done { background: #4ade80; border-color: #4ade80; color: #000; }
.lp-tag-aufgaben { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-tag-aufgabe { font-size: 12px; border: 1px solid; border-radius: 6px; padding: 3px 8px; }
.lp-start-btn { display: inline-block; margin-top: 12px; background: #5469d4; color: #fff; text-decoration: none; border-radius: 8px; padding: 8px 18px; font-size: 14.5px; font-weight: 600; }
.lp-loeschen-btn { background: none; border: 1px solid #2a2d42; color: #6b7280; border-radius: 8px; padding: 8px 16px; font-size: 14.5px; cursor: pointer; margin-top: 24px; }
.lp-loeschen-btn:hover { border-color: #e85d4a; color: #e85d4a; }

/* Update-Hinweis für Pläne aus der alten Generator-Logik.
   Farbsprache wie die Warn-Toasts: dunkler Orangeton + Akzentkante. */
.lp-update-banner { background: #2a1e08; border: 1px solid #4a3510; border-left: 4px solid #f0a03c; border-radius: 10px; padding: 16px 18px; margin-bottom: 20px; }
.lp-update-banner-titel { font-size: 16.5px; font-weight: 700; color: #f0a03c; margin-bottom: 8px; }
.lp-update-banner-text { font-size: 14.5px; line-height: 1.6; color: #c9ccd6; margin: 0 0 10px; }
.lp-update-banner-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lp-update-banner-btn { background: none; border: 1px solid #4a3510; color: #9aa0b0; border-radius: 8px; padding: 8px 16px; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.lp-update-banner-btn:hover { border-color: #f0a03c; color: #f0a03c; }
.lp-update-banner-btn.primaer { background: #f0a03c; border-color: #f0a03c; color: #1a1200; }
.lp-update-banner-btn.primaer:hover { background: #ffb35c; border-color: #ffb35c; }

/* Dashboard-Widget */
.lp-dashboard-widget { background: #151820; border: 1px solid #1e2233; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp-dashboard-widget-text { font-size: 14.5px; color: #9aa0b0; }
.lp-dashboard-widget-title { font-size: 15.5px; font-weight: 600; color: #fff; margin-bottom: 2px; }
.lp-dashboard-widget-btn { background: #5469d4; color: #fff; border: none; border-radius: 8px; padding: 7px 14px; font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; }

/* ── Toast-Benachrichtigungen ──────────────────────────────── */
.mk-toast { position:fixed; top:20px; right:20px; z-index:99999; padding:12px 18px; border-radius:10px; font-size:15.5px; color:#e2e4ea; max-width:340px; word-break:break-word; box-shadow:0 4px 24px rgba(0,0,0,0.5); animation:toastIn 0.2s ease; pointer-events:none; }
.mk-toast.info    { background:#1e2233; border-left:4px solid #3b82f6; }
.mk-toast.error   { background:#2a1010; border-left:4px solid #e85d4a; }
.mk-toast.success { background:#0a2a1a; border-left:4px solid #4ade80; }
.mk-toast.warning { background:#2a1e08; border-left:4px solid #f0a03c; }
@keyframes toastIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* ==================== MOBILE BOTTOM NAVIGATION ==================== */
.mobile-bottom-nav {
  display: none;
}

/* Leiste und Blatt gibt es nur am Handy. Ohne diese Regel staende das Blatt
   am Desktop sichtbar unten im Bild — dort greifen die Regeln aus der
   Media-Query darunter nicht, auch nicht die Verschiebung aus dem Bild. */
.mobil-mehr-blatt,
.mobil-mehr-schleier {
  display: none;
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #0a0c10;
    border-top: 1px solid #1e2233;
    justify-content: space-between;
    align-items: stretch;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Platz unter dem Seiteninhalt, damit die feste Leiste nicht das Letzte
     verdeckt. Ohne das lag auf /lernplan der Knopf „Üben →" des untersten
     Eintrags hinter der Leiste und war nicht antippbar, auf /statistik und
     /schwachstellen die Fusszeile mit Impressum und Datenschutz.
     Der Abstand gehoert an den Inhaltsbereich, nicht an den body: auf Seiten
     mit Seitenleiste ist der body ein Flex-Container in Zeilenrichtung, dort
     bliebe ein body-Abstand wirkungslos. Die body-Regel faengt die wenigen
     Seiten ohne eigenes main ab. */
  body:has(.mobile-bottom-nav) > main,
  body:has(.mobile-bottom-nav) > .main {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  body:has(.mobile-bottom-nav):not(:has(> main)) {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  /* Alle Items einheitlich — auch .nav-btn-Elemente überschreiben */
  .mobile-bottom-nav .mobile-nav-item,
  .mobile-bottom-nav .nav-btn.mobile-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: 100% !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
    color: #5a6070 !important;
    font-size: 11px !important;
    font-family: inherit;
    text-decoration: none;
    padding: 6px 0 !important;
    margin-bottom: 0 !important;
    text-align: center !important;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    border-radius: 0 !important;
  }

  .mobile-bottom-nav .mobile-nav-item:hover,
  .mobile-bottom-nav .mobile-nav-item:focus,
  .mobile-bottom-nav .nav-btn.mobile-nav-item.active {
    color: #5469d4 !important;
    background: none !important;
    outline: none;
  }

  /* Icons und Labels immer sichtbar — 900px-Breakpoint (.nav-btn span display:none) überschreiben */
  .mobile-bottom-nav .mobile-nav-icon {
    font-size: 22px;
    line-height: 1;
    display: block !important;
  }

  .mobile-bottom-nav .mobile-nav-label {
    display: block !important;
    font-size: 11px;
    line-height: 1.2;
  }

  /* Verstecken muss ueber eine Klasse laufen: die Regel oben setzt
     `display: flex !important`, ein Inline-`display:none` kam dagegen nie an.
     Deshalb war der Eintrag „Raum 2B" mobil auch dann sichtbar, wenn der
     Raum geschlossen war. */
  .mobile-bottom-nav .mobile-nav-item.nav-verborgen,
  .mobile-bottom-nav .nav-btn.mobile-nav-item.nav-verborgen {
    display: none !important;
  }

  /* Die Symbole sind jetzt dieselben SVGs wie in der Seitenleiste statt
     Emojis: gleiche Darstellung auf jedem Geraet und in der Akzentfarbe. */
  .mobile-bottom-nav .mobile-nav-icon svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  /* Sammelpunkt am Knopf „Mehr" — zeigt, dass im Blatt ein Hinweis wartet
     (Lernplan-Erinnerung, neue Forumsbeitraege, MEP-Abzeichen). */
  .mobile-bottom-nav .mobile-nav-mehr { position: relative; }

  .mobile-nav-sammelpunkt {
    position: absolute;
    top: 7px;
    right: calc(50% - 17px);
    width: 8px;
    height: 8px;
    background: #f0a03c;
    border-radius: 50%;
  }

  /* ── Blatt hinter „Mehr" ─────────────────────────────────────────────
     Frueher standen hier 14 Eintraege in einer waagerecht scrollbaren
     Leiste; sichtbar waren sechs. Jetzt vier feste Plaetze, der Rest in
     einem Blatt, das von unten hereinfaehrt. */
  /* Sichtbarkeit über `visibility`, nicht über das hidden-Attribut: ein
     Element, das gerade aus `display: none` kommt, faehrt nicht herein —
     der Browser hat dafuer noch kein Layout und ueberspringt den Uebergang. */
  .mobil-mehr-schleier {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .mobil-mehr-schleier.offen {
    opacity: 1;
    pointer-events: auto;
  }

  .mobil-mehr-blatt {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1002;
    max-height: 72vh;
    overflow-y: auto;
    background: #0f1119;
    border-top: 1px solid #1e2233;
    border-radius: 18px 18px 0 0;
    padding: 8px 12px calc(84px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    pointer-events: none;
    transition: transform 0.22s ease;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
  }

  .mobil-mehr-blatt.offen {
    transform: translateY(0);
    pointer-events: auto;
  }

  .mobil-blatt-griff {
    width: 38px;
    height: 4px;
    background: #2a2f45;
    border-radius: 2px;
    margin: 4px auto 10px;
  }

  .mobil-blatt-kopf {
    font-size: 14.5px;
    font-weight: 700;
    color: #e8e8f0;
    padding: 0 8px 6px;
  }

  .mobil-blatt-gruppe {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5a6070;
    padding: 12px 8px 4px;
  }

  .mobil-blatt-punkt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 10px;
    border: none;
    background: none;
    color: #c7ccd8;
    font-size: 16.5px;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
  }

  .mobil-blatt-punkt svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .mobil-blatt-punkt.active {
    color: #5469d4;
    background: rgba(84,105,212, 0.10);
  }

  .mobil-blatt-punkt:active { background: rgba(255, 255, 255, 0.06); }

  /* Angeheftete Formeln sind eine Bildschirm-Funktion: Am Handy nimmt die
     schwebende Leiste zu viel vom ohnehin knappen Platz und liegt zwischen
     Inhalt und Navileiste. Deshalb bleiben hier sowohl die Leiste als auch
     die „Anheften"-Knöpfe aus — ein Knopf ohne sichtbares Ergebnis wäre
     schlimmer als keiner. Bereits angeheftete Formeln bleiben gespeichert
     und erscheinen am Rechner unverändert. */
  #global-formel-leiste,
  .formel-eintrag .pin-btn,
  .pin-btn {
    display: none !important;
  }

  /* Gast-Banner auf Mobile ausblenden */
  .gast-banner { display: none !important; }
  body:has(.gast-banner) .sidebar { top: 0 !important; }
  body:has(.gast-banner) .main,
  body:has(.gast-banner) .app-main { padding-top: 0 !important; }

  /* Free-Tier-Banner auf Mobile: vertikal stapeln, Button als echter Button */
  #free-banner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  #free-banner > span {
    line-height: 1.5;
  }
  #free-banner button {
    width: 100% !important;
    padding: 10px 16px !important;
    font-size: 15.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-align: center !important;
  }
  .premium-badge-hint {
    display: block !important;
    margin-left: 0 !important;
    margin-top: 5px !important;
  }

  /* ── KI-Chat Panel: Mobile Bottom Sheet ── */
  .ki-chat-panel {
    position: fixed !important;
    bottom: 70px !important;
    left: 0 !important;
    right: 0 !important;
    height: 60vh !important;
    max-height: 60vh !important;
    background: #12161f !important;
    border-radius: 16px 16px 0 0 !important;
    border-top: 2px solid #5469d4 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    margin: 0 !important;
    z-index: 1200 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .ki-chat-panel.hidden {
    display: none !important;
  }

  .ki-chat-header {
    flex-shrink: 0;
    border-radius: 16px 16px 0 0;
  }

  .ki-chat-verlauf {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .ki-chat-eingabe {
    flex-shrink: 0 !important;
    position: sticky;
    bottom: 0;
    padding-bottom: calc(env(safe-area-inset-bottom) + 8px) !important;
  }

  /* ── Zusammenfassungen: Grid auf Mobile → 1 Spalte ── */
  .zs-grid,
  .zs-karten-grid,
  .zs-card-grid,
  .zs-schema,
  .zs-pyramid,
  .zs-diagram,
  [class*="zs-"][class*="grid"],
  [class*="zs-"][class*="cols"] {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .zs-artikel .zs-box,
  .zs-artikel .zs-karte,
  .zs-artikel .zs-card {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    position: static !important;
  }

  /* Kein position: absolute auf Karten-Inhalt */
  .zs-artikel .zs-box *,
  .zs-artikel .zs-karte *,
  .zs-artikel .zs-card * {
    position: static !important;
  }

  /* ── Tabellen: Horizontal scrollbar + Hinweistext ── */
  .zs-artikel table,
  .zs-artikel .zs-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Tabellen-Wrapper mit Scroll-Hinweis (::after via Wrapper-Klasse) */
  .zs-artikel .zs-table-wrapper {
    position: relative;
    overflow: visible;
    margin-bottom: 24px;
  }

  .zs-artikel .zs-table-wrapper::after {
    content: "← Nach rechts scrollen →";
    display: block;
    font-size: 12px;
    color: #5a6070;
    text-align: center;
    margin-top: 4px;
    padding: 2px 0;
  }

  /* Hinweistext per Wrapper-Klasse .zs-table-wrapper (kein direktes table::after — browserinkompatibel) */
  /* Verwendung: <div class="zs-table-wrapper"><table ...>...</table></div> */

  /* ── Mobile Bottom Nav: scrollbar mit 10 Items ── */
  .mobile-bottom-nav {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 0;
    padding: 0 8px;
    scrollbar-width: none;
    height: calc(58px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    justify-content: flex-start;
    align-items: stretch;
  }

  .mobile-bottom-nav::-webkit-scrollbar {
    display: none;
  }

  /* Nav-Items teilen sich die Breite. Früher standen hier feste 64 px mit
     `flex: 0 0` und Scroll-Einrastung — das gehörte zur scrollbaren Leiste
     mit 14 Einträgen. Mit fünf festen Plätzen wäre die Leiste sonst rechts
     angeschnitten: die Einträge endeten bei 328 px, egal wie breit das
     Gerät ist. */
  .mobile-bottom-nav .mobile-nav-item,
  .mobile-bottom-nav .nav-btn.mobile-nav-item {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    width: auto !important;
  }

  /* Aktive Seite: oranger Punkt unter Icon */
  .mobile-bottom-nav .mobile-nav-item.active .mobile-nav-icon::after,
  .mobile-bottom-nav .nav-btn.mobile-nav-item.active .mobile-nav-icon::after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background: #5469d4;
    border-radius: 50%;
    margin: 2px auto 0;
  }

  /* ── Fix 1: KI-Knopf kollidiert mit der Leiste unten (60 px hoch) ── */
  .ki-widget { bottom: 76px; right: 16px; }
  .ki-panel {
    height: min(480px, calc(100dvh - 170px));
    width: min(380px, calc(100vw - 32px));
  }

  /* ── Fix 4: iOS zoomt bei Eingabefeldern unter 16 px automatisch ── */
  .ki-textarea, .ki-chat-textarea, .quiz-ki-textarea,
  .formel-suche-input, .lp-field input, .lp-field select,
  .frage-melden-body textarea {
    font-size: 16px !important;
  }

  /* ── Nachtrag (Redesign): Inhalt darf nicht unter der Leiste liegen ── */
  .main, .app-main {
    padding-bottom: calc(60px + env(safe-area-inset-bottom) + 16px);
  }

  /* ── Nachtrag: aktiver Punkt war nur für <button> hervorgehoben.
     Auf allen Unterseiten sind es <a>-Elemente — die blieben grau. ── */
  .mobile-bottom-nav .mobile-nav-item.active {
    color: #5469d4 !important;
  }

}

/* ── Frage melden Button ─────────────────────────────── */
.btn-frage-melden {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid #c0392b44;
  background: transparent;
  color: #e74c3c;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  margin-right: auto;         /* schiebt alle anderen Buttons nach rechts */
  transition: background 0.15s, border-color 0.15s;
}
.btn-frage-melden:hover {
  background: #e74c3c18;
  border-color: #e74c3c;
}
.btn-frage-melden svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

/* ── Frage melden Modal ──────────────────────────────── */
.frage-melden-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.frage-melden-overlay.hidden { display: none; }

.frage-melden-dialog {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  width: min(420px, 92vw);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.frage-melden-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-default);
  font-weight: 600;
  font-size: 0.95rem;
  color: #e74c3c;
}
.frage-melden-header button {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.frage-melden-header button:hover { color: var(--text-primary); }

.frage-melden-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.frage-melden-body label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.frage-melden-body select,
.frage-melden-body textarea {
  background: var(--bg-input, #1a1a2e);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  color: var(--text-primary);
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.frage-melden-body select:focus,
.frage-melden-body textarea:focus {
  outline: none;
  border-color: #e74c3c;
}
.frage-melden-body textarea { resize: vertical; }

.frage-melden-status {
  font-size: 0.83rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  margin-top: 0.25rem;
}
.frage-melden-status.ok     { background: #0a2a1a; color: #4ade80; }
.frage-melden-status.fehler { background: #2a0a0a; color: #e74c3c; }

.frage-melden-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid var(--border-default);
}

/* ── Rechenbeispiele-Box ────────────────────────────────────── */
/* Rechenbeispiele stehen rechts neben der Formel (zweite Grid-Spalte) */
.rechenbeispiel-box {
  grid-column: 2;
  width: 400px;
  margin: 0;
  padding: 0 0 0 20px;
  background: transparent;
  border-left: 1px solid var(--border-default, #2a2f45);
  box-sizing: border-box;
}

.rechenbeispiel-ueberschrift {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  margin-bottom: 12px;
}

/* Karten untereinander statt nebeneinander — sie stehen jetzt in der
   schmalen rechten Spalte */
.rechenbeispiel-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rechenbeispiel-karte {
  flex: none;
  min-width: 0;
  max-width: none;
  width: 100%;
  background: var(--bg-card-hover, #252a3d);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-subtle, #2a2f45);
}

.rechenb-kopf {
  padding: 8px 12px;
  font-weight: 600;
  font-size: 15.5px;
  /* Hintergrund und Farbe werden inline per fachFarbe gesetzt */
}

.rechenb-body {
  padding: 12px;
}

.rechenb-gegeben {
  font-size: 14.5px;
  color: var(--text-muted, #6b7280);
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.rechenb-gegeben-label {
  font-weight: 600;
  color: var(--text-secondary, #9ca3af);
  margin-right: 2px;
  white-space: nowrap;
}

.rechenb-formel {
  margin: 8px 0;
  font-size: 16.5px;
  line-height: 1.5;
}

/* KaTeX innerhalb der Karte nicht zu groß */
.rechenb-formel .katex {
  font-size: 1em;
}

.rechenb-einsetzen {
  font-size: 15.5px;
  color: var(--text-secondary, #9ca3af);
  font-family: 'Courier New', Courier, monospace;
  margin: 4px 0;
  word-break: break-word;
}

.rechenb-ergebnis {
  font-size: 17px;
  font-weight: 700;
  color: #4ade80;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(74, 222, 128, 0.2);
}

/* ── Rechenbeispiele: aufklappbar ────────────────────────────── */
/* Die Überschrift wird zum Schalter. Auf großen Bildschirmen ist der
   Bereich offen, auf Tablet/Handy zugeklappt (siehe Responsive unten). */
.rechenbeispiel-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  text-align: left;
}
.rechenbeispiel-toggle:hover { color: var(--text-secondary, #9ca3af); }
.rechenbeispiel-toggle .chevron {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.rechenbeispiel-toggle.open .chevron { transform: rotate(90deg); }
.rechenbeispiel-toggle .anzahl {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim, #6b6f82);
  background: var(--bg-card-hover, #252a3d);
  border-radius: 999px;
  padding: 2px 8px;
}
.rechenbeispiel-grid.zu { display: none; }

/* ── Responsive Rechenbeispiele ──────────────────────────────── */
/* WICHTIG: Diese Blöcke müssen NACH den Basis-Regeln stehen. Vorher lagen
   sie weiter oben in der Datei und wurden von der Basis-Regel wieder
   überschrieben — dadurch behielt die Box auf dem Handy grid-column: 2
   und width: 400px und lag über der Formel. */
@media (max-width: 1450px) {
  .rechenbeispiel-box {
    grid-column: 1;
    width: 100%;
    max-width: 100%;
    padding: 16px 0 0;
    border-left: none;
    border-top: 1px solid var(--border-default, #2a2f45);
  }
  .rechenbeispiel-grid {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .rechenbeispiel-karte {
    flex: 1;
    min-width: 220px;
    max-width: 340px;
    width: auto;
  }
}

@media (max-width: 700px) {
  .rechenbeispiel-box {
    grid-column: 1;
    width: 100%;
    max-width: 100%;
    padding: 14px 0 0;
    margin-top: 4px;
    border-left: none;
    border-top: 1px solid var(--border-default, #2a2f45);
  }
  /* Karten untereinander — nebeneinander wird auf dem Handy unlesbar */
  .rechenbeispiel-grid {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .rechenbeispiel-karte {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  /* Lange Formeln dürfen die Seite nicht seitlich aufziehen */
  .rechenb-formel,
  .rechenb-einsetzen {
    overflow-x: auto;
    max-width: 100%;
  }
  .rechenb-formel .katex-display { margin: 4px 0; }
  .rechenbeispiel-toggle { font-size: 13.5px; padding: 4px 0; }
}

/* ==================== SIDEBAR COLLAPSE (manuell) ==================== */

.sidebar-collapse-btn {
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: var(--bg-card, #1e2233);
  border: 1px solid var(--border-default, #2a2d45);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  color: var(--text-muted, #8b8fa6);
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.sidebar-collapse-btn:hover {
  background: var(--bg-card-hover, #252840);
  color: var(--text-primary, #e8eaf0);
}
.sidebar-collapse-btn .sb-icon-expand { display: none; }

html.sb-collapsed .sidebar,
body.sb-collapsed .sidebar {
  width: 60px;
  overflow: visible;
  /* Seitliches Padding zurücknehmen, sonst bleiben von 60px nur 32px Inhalt */
  padding-left: 8px;
  padding-right: 8px;
}
html.sb-collapsed .sidebar-logo-text,
html.sb-collapsed .sidebar-logo-sub,
html.sb-collapsed .sidebar-section-label,
html.sb-collapsed .nav-btn > span,
html.sb-collapsed .nav-item > span,
html.sb-collapsed .nav-badge,
html.sb-collapsed .referral-badge,
html.sb-collapsed .sidebar-footer > div:last-child,
html.sb-collapsed .sidebar-footer-item .sidebar-footer-text,
html.sb-collapsed .sidebar-footer-item span:last-child,
body.sb-collapsed .sidebar-logo-text,
body.sb-collapsed .sidebar-logo-sub,
body.sb-collapsed .sidebar-section-label,
body.sb-collapsed .nav-btn > span,
body.sb-collapsed .nav-item > span,
body.sb-collapsed .nav-badge,
body.sb-collapsed .referral-badge,
body.sb-collapsed .sidebar-footer > div:last-child,
body.sb-collapsed .sidebar-footer-item .sidebar-footer-text,
body.sb-collapsed .sidebar-footer-item span:last-child {
  display: none !important;
}
html.sb-collapsed .sidebar-logo,
body.sb-collapsed .sidebar-logo {
  justify-content: center;
  padding: 16px 0;
}
html.sb-collapsed .nav-btn,
html.sb-collapsed .nav-item,
body.sb-collapsed .nav-btn,
body.sb-collapsed .nav-item {
  justify-content: center;
  padding: 10px;
}
html.sb-collapsed .sidebar-collapse-btn .sb-icon-collapse,
body.sb-collapsed .sidebar-collapse-btn .sb-icon-collapse { display: none; }
html.sb-collapsed .sidebar-collapse-btn .sb-icon-expand,
body.sb-collapsed .sidebar-collapse-btn .sb-icon-expand { display: flex; }
html.sb-collapsed .main,
html.sb-collapsed .app-main,
html.sb-collapsed .zs-content,
html.sb-collapsed .profil-main,
html.sb-collapsed .ach-main,
body.sb-collapsed .main,
body.sb-collapsed .app-main,
body.sb-collapsed .zs-content,
body.sb-collapsed .profil-main,
body.sb-collapsed .ach-main {
  margin-left: 60px !important;
}

/* Tooltip für eingeklappte Sidebar-Symbole — via JS positioniert (#sb-tooltip) */
#sb-tooltip {
  position: fixed;
  background: #1e2233;
  border: 1px solid #2a2d45;
  border-radius: 6px;
  padding: 5px 12px;
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: 500;
  color: #e8eaf0;
  z-index: 99999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  pointer-events: none;
  display: none;
}

@media (max-width: 900px) {
  .sidebar-collapse-btn { display: none; }
}

/* ============================================================
   DASHBOARD-REDESIGN (Phase 2) — Layout nach design-referenz.html
   Alle Klassen mit Praefix "db-", damit sie nicht mit den
   bestehenden Klassen (.stat, .chip, .video …) kollidieren.
   ============================================================ */

/* ── Tastaturbedienung ─────────────────────────────────────────
   Sichtbarer Fokusring für alle interaktiven Elemente. :focus-visible
   greift nur bei Tastatursteuerung, Mausklicks bleiben unverändert. */
:focus-visible {
  outline: 2px solid var(--orange-hi);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .db-video, .db-row, .db-weak, .db-task, .db-tab, .db-stat { transition: none; }
  .db-video:hover { transform: none; }
  .db-skeleton { animation: none; }
}

/* ── Kopfzeile ─────────────────────────────────────────────── */
#view-dashboard .dashboard-header { align-items: flex-end; margin-bottom: 22px; }
#view-dashboard .dashboard-header-title { font-size: 25px; letter-spacing: -.02em; color: var(--tx); }
#view-dashboard .dashboard-header-subtitle { font-size: 15px; color: var(--tx-3); }

/* ── Grundraster ───────────────────────────────────────────── */
.db-grid { display: grid; gap: 14px; margin-bottom: 14px; }
.db-g-hero { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.db-g-two  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.db-g-main { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }

/* ── Karte ─────────────────────────────────────────────────── */
.db-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
}
.db-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.db-card-head h2, .db-h2 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--tx); }
.db-link {
  font-size: 14.5px; color: var(--tx-3); background: none; border: none;
  padding: 0; cursor: pointer; font-family: inherit; transition: color .12s;
}
.db-link:hover { color: var(--orange-hi); }
.db-eyebrow {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-3); margin-bottom: 7px;
}

/* ── Buttons (nur im Dashboard) ────────────────────────────── */
#view-dashboard .btn {
  padding: 10px 17px; border-radius: 9px; font-size: 15.5px; font-weight: 500;
  display: inline-flex; gap: 8px;
}
#view-dashboard .btn svg { width: 16px; height: 16px; stroke-width: 1.9; }
#view-dashboard .btn-primary { background: var(--orange); color: #ffffff; }
#view-dashboard .btn-primary:hover { background: var(--orange-hi); opacity: 1; }
.db-btn-ghost { border: 1px solid var(--line-hi); color: var(--tx); background: none; }
.db-btn-ghost:hover { background: var(--surface-hi); border-color: rgba(255,255,255,.24); }

/* ── Hero "Weiter lernen" ──────────────────────────────────── */
.db-hero { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.db-hero-body { flex: 1 1 260px; min-width: 0; }
.db-hero-title { font-size: 20px; font-weight: 600; letter-spacing: -.015em; margin: 2px 0 6px; color: var(--tx); }
.db-hero-meta { font-size: 15px; color: var(--tx-2); }
.db-hero-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.db-ring { position: relative; width: 92px; height: 92px; flex: 0 0 auto; }
.db-ring svg { transform: rotate(-90deg); }
.db-ring-val {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--tx);
}
.db-ring-val small { font-size: 13.5px; font-weight: 600; }

/* ── "Heute"-Karte ─────────────────────────────────────────── */
.db-today { display: flex; flex-direction: column; gap: 2px; }
.db-task {
  display: flex; align-items: center; gap: 12px; padding: 11px 4px;
  border-bottom: 1px solid var(--line); transition: background .12s;
  color: inherit; text-decoration: none;
}
.db-today > *:last-child .db-task, .db-task:last-child { border-bottom: none; }
/* letzter sichtbarer Eintrag der Heute-Karte — Klasse wird von app.js gesetzt */
.db-last, .db-last .db-task, .db-last .db-streak { border-bottom: none; }
.db-task-ico {
  width: 32px; height: 32px; border-radius: 8px; background: var(--orange-dim);
  color: var(--orange-hi); display: grid; place-items: center; flex: 0 0 auto;
}
.db-task-ico svg { width: 16px; height: 16px; stroke-width: 1.9; fill: none; stroke: currentColor; }
.db-task-txt { flex: 1; min-width: 0; }
.db-task-txt b { display: block; font-size: 15.5px; font-weight: 500; color: var(--tx); }
.db-task-txt span { font-size: 14px; color: var(--tx-3); }
.db-task-go { font-size: 14.5px; color: var(--orange-hi); white-space: nowrap; }
a.db-task:hover .db-task-go, button.db-task:hover .db-task-go { text-decoration: underline; }
button.db-task { width: 100%; background: none; border: none; border-bottom: 1px solid var(--line); font-family: inherit; cursor: pointer; text-align: left; }
.db-streak {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 4px 13px; border-bottom: 1px solid var(--line);
}
.db-streak-num { font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--orange-hi); }
.db-streak-txt { font-size: 14.5px; color: var(--tx-2); }
.db-dots { display: flex; gap: 5px; margin-left: auto; }
.db-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.1); }
.db-dot.on { background: var(--orange); }
.db-today-leer { font-size: 14.5px; color: var(--tx-3); padding: 14px 4px; }

/* ── Statistik-Leiste ──────────────────────────────────────── */
.db-stats {
  /* Seit 04.10.2026 nur noch zwei Kacheln (Bearbeitet, Richtige Antworten) – auch auf dem Handy nebeneinander */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0; margin-bottom: 14px;
}
.db-stat { padding: 16px 20px; border-right: 1px solid var(--line); }
.db-stat:last-child { border-right: none; }
.db-stat.klickbar { cursor: pointer; transition: background .12s; }
.db-stat.klickbar:hover { background: var(--surface-hi); }
.db-stat-label { font-size: 14px; color: var(--tx-3); margin-bottom: 5px; }
.db-stat-val { font-size: 24px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; color: var(--tx); }
.db-stat-val small { font-size: 15.5px; font-weight: 400; color: var(--tx-3); letter-spacing: 0; }
.db-stat-note { font-size: 13.5px; color: var(--tx-3); margin-top: 4px; }
.db-up { color: var(--ok); }

/* ── Pruefungs-Ticker ──────────────────────────────────────── */
.db-hint { font-size: 13.5px; color: var(--tx-3); font-style: italic; margin: -4px 0 16px; }
.db-ticker { display: flex; gap: 20px; align-items: flex-start; }
.db-ticker-num { display: flex; align-items: baseline; gap: 7px; }
.db-ticker-num b { font-size: 44px; font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--orange-hi); }
.db-ticker-num span { font-size: 15.5px; color: var(--tx-2); }
.db-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 11px; }
.db-chip {
  font-size: 12px; font-weight: 600; letter-spacing: .05em; padding: 3px 8px;
  border-radius: 5px; background: rgba(255,255,255,.06); color: var(--tx-2);
}
/* Fachfarben nach der Konvention aus CLAUDE.md (RBH/BWH/MIKP/ZIB/NTG) */
.db-chip-rbh  { background: rgba(232,93,74,.14);  color: #e85d4a; }
.db-chip-bwh  { background: rgba(59,130,246,.14); color: #3b82f6; }
.db-chip-mikp { background: rgba(240,160,60,.14); color: #f0a03c; }
.db-chip-zib  { background: rgba(167,139,250,.14);color: #a78bfa; }
.db-chip-ntg  { background: rgba(74,222,128,.14); color: #4ade80; }
.db-bar { height: 5px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin: 14px 0 9px; }
.db-bar i { display: block; height: 100%; border-radius: 4px; background: var(--orange); }
.db-ticker-date { font-size: 15.5px; font-weight: 500; color: var(--tx); }
.db-ticker-alt {
  font-size: 14px; color: var(--tx-3); margin-top: 8px;
  padding-top: 9px; border-top: 1px solid var(--line);
}

/* ── Themenhaeufigkeit ─────────────────────────────────────── */
.db-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.db-tab {
  padding: 6px 14px; border-radius: 7px; font-size: 14.5px; font-weight: 500;
  color: var(--tx-2); border: 1px solid transparent; background: none;
  cursor: pointer; font-family: inherit; transition: .12s;
}
.db-tab:hover { background: var(--surface-hi); color: var(--tx); }
.db-tab[aria-selected="true"] { background: var(--orange); color: #ffffff; }
.db-note {
  display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--tx-2);
  background: rgba(240,160,60,.07); border: 1px solid rgba(240,160,60,.16);
  border-radius: 9px; padding: 10px 13px; margin: 14px 0 18px;
}
.db-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; stroke-width: 1.9; color: var(--warn); }
.db-rows { display: flex; flex-direction: column; }
.db-row {
  display: grid; grid-template-columns: 16px minmax(120px, 1.1fr) minmax(0, 2fr) 40px;
  align-items: center; gap: 13px; padding: 8px; border-radius: 8px;
  transition: background .12s; width: 100%; text-align: left;
  background: none; border: none; font-family: inherit; color: inherit; cursor: pointer;
}
.db-row:hover { background: var(--surface-hi); }
.db-rank { font-size: 13.5px; color: var(--tx-3); text-align: right; }
.db-row-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx); }
.db-row-bar { height: 9px; border-radius: 5px; background: rgba(255,255,255,.055); overflow: hidden; }
.db-row-bar i { display: block; height: 100%; border-radius: 5px; background: var(--orange); }
.db-row-pct { font-size: 14.5px; font-weight: 500; text-align: right; color: var(--tx); }
.db-row.is-b .db-row-name, .db-row.is-b .db-row-pct { color: var(--tx-3); }
.db-row.is-b .db-row-bar i { background: rgba(255,255,255,.16); }
.db-row-schwach { font-size: 11px; color: #f07b7a; margin-left: 6px; }
.db-split { display: flex; align-items: center; gap: 12px; margin: 14px 0 10px; }
.db-split-line { flex: 1; height: 1px; background: var(--line); }
.db-split-tx { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }

/* ── Schwachstellen ────────────────────────────────────────── */
.db-weak {
  display: flex; align-items: center; gap: 12px; padding: 12px 8px;
  border-radius: 9px; transition: background .12s; width: 100%;
  background: none; border: none; font-family: inherit; text-align: left;
  color: inherit; cursor: pointer; text-decoration: none;
}
.db-weak:hover { background: var(--surface-hi); }
.db-weak-bd { flex: 1; min-width: 0; }
.db-weak-bd b { display: block; font-size: 15.5px; font-weight: 500; color: var(--tx); }
.db-weak-bd span { font-size: 14px; color: var(--tx-3); }
.db-score {
  font-size: 13.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px;
  background: rgba(226,75,74,.14); color: #f07b7a;
}
.db-score.warn { background: rgba(240,160,60,.14); color: var(--warn); }
.db-empty { text-align: center; padding: 26px 12px; }
.db-empty b { font-size: 15.5px; font-weight: 500; color: var(--tx); }
.db-empty p { font-size: 15px; color: var(--tx-3); margin-top: 5px; }

/* ── Erklaervideos ─────────────────────────────────────────── */
.db-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; }
.db-video {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--surface-hi); cursor: pointer; text-align: left;
  transition: border-color .12s, transform .12s; padding: 0; font-family: inherit;
}
.db-video:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.db-thumb { aspect-ratio: 16/9; position: relative; display: grid; place-items: center; background: #1b1206; }
.db-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.db-play {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(12,14,18,.72);
  display: grid; place-items: center; position: relative; z-index: 1;
}
.db-play svg { width: 15px; height: 15px; margin-left: 2px; fill: var(--tx); }
.db-video-bd { padding: 11px 13px 13px; }
.db-video-bd .db-eyebrow { margin-bottom: 4px; }
.db-video-bd b { font-size: 15.5px; font-weight: 500; color: var(--tx); }
.db-done { color: var(--ok); }

/* ── Skeleton beim Laden ───────────────────────────────────── */
.db-skeleton {
  height: 132px; border-radius: var(--r);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hi) 50%, var(--surface) 75%);
  background-size: 200% 100%; animation: db-shimmer 1.4s infinite;
}
@keyframes db-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ── Responsiv ─────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .db-g-hero, .db-g-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .db-g-two { grid-template-columns: minmax(0, 1fr); }
  .db-row { grid-template-columns: 16px minmax(0, 1fr) 40px; }
  .db-row-bar { display: none; }
}

/* ============================================================
   MOBILE-FIXES (Fix 2, 3, 5, 6)
   Bewusst gebündelt statt an vier Stellen verstreut — funktional
   identisch, weil es reine Ergänzungen mit eigener Spezifität sind.
   ============================================================ */

/* ── Fix 2: KaTeX läuft auf schmalen Displays seitlich aus dem Bild ── */
.katex-display { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.quiz-loesung-text, .ml-schritt, .quiz-frage, .frage-text {
  overflow-x: auto;
  max-width: 100%;
}

/* ── Fix 3: Abschluss-Karte sprengte auf kleinen Geräten die Breite ── */
@media (max-width: 480px) {
  .abschluss-card { min-width: 0; width: 100%; padding: 1.5rem; }
}

/* ── Fix 5: lange Themennamen in der Statistik ── */
@media (max-width: 600px) {
  .themen-meistgeubt-label, .fp-label {
    min-width: 110px;
    max-width: 130px;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
  }
}

/* ── Fix 6: Toast über die volle Breite ── */
@media (max-width: 480px) {
  .mk-toast { left: 16px; right: 16px; max-width: none; }
}

/* ============================================================
   MOBILE INHALTS-NAVIGATION (Formeln + Zusammenfassungen)
   Gehört zu public/js/mobil-toc.js.
   Muss am Dateiende stehen: die Regel `.zs-toc-panel { display: none }`
   bei max-width 900px steht weiter oben und würde sonst gewinnen.
   ============================================================ */

/* Schaltfläche — auf dem Desktop unsichtbar */
.mk-toc-schalter { display: none; }
.mk-toc-backdrop { display: none; }

@media (max-width: 900px) {
  .mk-toc-schalter {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 60;
    margin: 0 0 1rem;
    padding: 12px 14px;
    background: var(--bg-card, #1a1c2e);
    border: 1px solid var(--border-default, #2a2d45);
    border-radius: 10px;
    color: var(--text-primary, #e8eaf0);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  }
  .mk-toc-schalter:active { background: var(--bg-card-hover, #252840); }

  /* Drei Striche als Symbol */
  .mk-toc-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 16px;
    flex-shrink: 0;
  }
  .mk-toc-icon span {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: var(--accent-orange, #f0a03c);
  }
  .mk-toc-icon span:nth-child(2) { width: 70%; }
  .mk-toc-icon span:nth-child(3) { width: 85%; }

  .mk-toc-text { flex: 1; text-align: left; }
  .mk-toc-pfeil {
    font-size: 12px;
    color: var(--text-muted, #8b8fa6);
    transition: transform 0.2s;
  }
  .mk-toc-schalter[aria-expanded="true"] .mk-toc-pfeil { transform: rotate(180deg); }

  /* Die Navigationsspalte wird zur Schublade von links */
  .zs-toc-panel.mk-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 86vw);
    height: 100%;
    max-height: 100%;
    z-index: 1200;
    border-right: 1px solid var(--border-default, #2a2d45);
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.55);
    transform: translateX(-102%);
    transition: transform 0.25s ease;
    /* Der Panel-Rahmen bleibt fest, gescrollt wird die Liste darin */
    overflow: hidden;
  }
  .zs-toc-panel.mk-drawer.offen { transform: translateX(0); }

  /* Die Eintragsliste ist der eigentliche Scrollbereich. Suchfeld und
     Fach-Filter bleiben dabei oben stehen. */
  .zs-toc-panel.mk-drawer .zs-toc-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Platz, damit die letzten Einträge nicht unter der unteren
       Navigationsleiste der App verschwinden */
    padding-bottom: 96px;
  }
  .zs-toc-panel.mk-drawer .zs-search-box,
  .zs-toc-panel.mk-drawer .zs-toc-chips { flex: 0 0 auto; }

  .mk-toc-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1150;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .mk-toc-backdrop.sichtbar { opacity: 1; pointer-events: auto; }

  /* Hintergrund nicht mitscrollen, solange die Schublade offen ist */
  body.mk-toc-offen { overflow: hidden; }

  /* Einträge auf dem Handy größer antippbar */
  .zs-toc-panel.mk-drawer .zs-toc-link {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 15.5px;
  }
  .zs-toc-panel.mk-drawer .zs-toc-chip {
    padding: 7px 13px;
    font-size: 14.5px;
  }
}

/* Der Schalter „Inhalt wählen" muss beim Scrollen oben stehen bleiben.
   Er ist `position: sticky` und sitzt in `.zs-content`. Dessen Basis-Regel
   setzt `overflow-y: auto`; ab 768 px kommt `height: auto` dazu. Damit ist
   .zs-content ein Scroll-Container, der selbst nie scrollt — sticky hat
   keinen Bezugspunkt und der Schalter rutscht aus dem Bild.
   Nur unterhalb von 768 px darf `overflow` freigegeben werden: dort ist
   auch `.zs-page` auf `height:auto; overflow:visible` gestellt, die Seite
   selbst scrollt. Zwischen 769 und 900 px scrollt .zs-content dagegen
   wirklich selbst (height:100vh) — dort wuerde `overflow: visible` den
   Inhalt abschneiden, weil .zs-page dann `overflow: hidden` hat. */
@media (max-width: 768px) {
  .zs-content { overflow: visible; }
  /* Etwas Abstand nach oben, damit der haftende Schalter den Inhalt
     nicht direkt beruehrt */
  .mk-toc-schalter { top: 8px; margin-bottom: 1.25rem; }
}

/* ── Leiste scrollt nicht mehr ────────────────────────────────────────────
   Mit fünf festen Plätzen gibt es nichts mehr zu wischen. Bliebe das
   Scrollen erlaubt, entstünde auf 320-px-Geräten (iPhone SE) ein
   Teufelskreis: der Scrollbalken nimmt Platz, dadurch passen die Einträge
   nicht mehr, dadurch erscheint der Scrollbalken. */
@media (max-width: 768px) {
  .mobile-bottom-nav {
    overflow-x: hidden;
  }
}

@media (max-width: 360px) {
  .mobile-bottom-nav {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Zusammenfassungen am Handy: Platz, Raster, KI-Knopf
   Bewusst am Dateiende, damit keine spaetere Regel sie wieder aushebelt.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 1. Platz. Vorher blieben von 390 px Bildbreite nur 272 px fuer Text:
     16 px Seitenpolster und noch einmal 40 px Artikelpolster je Seite.
     Jetzt rund 342 px — ein Viertel mehr Zeile, ohne dass es gedraengt wirkt. */
  #zs-content {
    padding-left: 10px;
    padding-right: 10px;
  }

  .zs-artikel {
    padding: 16px 14px;
  }

  /* 2. Raster brechen um, statt rechts abgeschnitten zu werden.
     „Rechte & Pflichten im Arbeitsverhaeltnis" etwa legte vier Kacheln in
     zwei Spalten zu 312 px in einen 270 px breiten Kasten — die rechte
     Spalte (Verschwiegenheit, Treue- & Sorgfaltspflicht) war nicht lesbar
     und wegen `overflow: hidden` auch nicht erreichbar. Betroffen waren 15
     Vier-Felder-Raster plus Pyramide, Bilanz, Matrix und Merkmalsreihen. */
  .zs-artikel .zs-vier-felder,
  .zs-artikel .zs-matrix2x2,
  .zs-artikel .zs-bilanz,
  .zs-artikel .zs-m-row,
  .zs-artikel .zs-pyr-row {
    grid-template-columns: minmax(0, 1fr);
    flex-wrap: wrap;
  }

  .zs-artikel .zs-vier-felder > *,
  .zs-artikel .zs-matrix2x2 > *,
  .zs-artikel .zs-bilanz > *,
  .zs-artikel .zs-m-row > *,
  .zs-artikel .zs-pyr-row > * {
    min-width: 0;
  }

  /* 3. Der KI-Knopf nahm mit 270 x 48 px siebzig Prozent der Bildbreite ein
     und schwebte quer ueber dem Text. Am Handy nur noch das Symbol. */
  .ki-fab {
    width: 52px !important;
    height: 52px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    justify-content: center !important;
  }

  .ki-fab-text {
    display: none !important;
  }

  /* 4. Pyramidenspitzen: in der schmalsten Stufe (40 px) steht ein langes
     Wort wie „Voelkerrecht" oder „Selbstverwirklichung". Ohne Umbruch ragt
     es aus der Stufe heraus. */
  .zs-artikel .zs-pyr-row,
  .zs-artikel .zs-m-row {
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .zs-artikel .zs-pyr-row,
  .zs-artikel .zs-m-row,
  .zs-artikel .zs-pyr-row *,
  .zs-artikel .zs-m-row * {
    font-size: 11px;
    line-height: 1.25;
  }

  /* 5. Diagramme wachsen mit ihrem Inhalt.
     `.zs-diagram` hatte `height/max-height: 350px` bei `overflow: hidden`.
     Am Handy stehen die Raster einspaltig und werden dadurch hoeher als
     350 px — 33 Diagramme waren unten abgeschnitten, bis zu 172 px. Bei
     „Faelle der Entgeltfortzahlung ohne Arbeitsleistung" fehlte so die
     ganze letzte Kachel („Feiertage"), und scrollen liess sie sich wegen
     `overflow: hidden` auch nicht. Am Desktop passt die feste Hoehe, dort
     bleibt sie unveraendert. */
  .zs-artikel .zs-diagram {
    height: auto !important;
    max-height: none !important;
  }
}

/* ── Discord-Community-Kachel im Dashboard ────────────────────
   Eigener Blurple-Akzent (#5865F2), passend zum dunklen
   Dashboard-Design. Wegklickbar wie die Klassenzimmer-Kachel,
   Logik in dashboard-discord.js. */
.dd-card {
  position: relative;
  margin-top: 18px;
  background: linear-gradient(135deg, rgba(88,101,242,.14), var(--surface));
  border-color: rgba(88,101,242,.35);
}
.dd-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.dd-logo {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(88,101,242,.18);
  color: #5865F2;
}
.dd-body { flex: 1 1 260px; min-width: 0; }
.dd-title { font-size: 16px; font-weight: 600; color: var(--tx); margin-bottom: 4px; }
.dd-text { font-size: 15px; color: var(--tx-2); line-height: 1.5; margin: 0; }
#view-dashboard .dd-btn.btn-primary {
  flex: none;
  background: #5865F2;
  color: #fff;
}
#view-dashboard .dd-btn.btn-primary:hover { background: #4752c4; opacity: 1; }
.dd-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--tx-3);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
.dd-close:hover { color: var(--tx); }

@media (max-width: 820px) {
  .dd-inner { flex-wrap: wrap; }
  .dd-btn.btn-primary { width: 100%; justify-content: center; }
}

/* ── C1: Bewertungs-Kachel im Dashboard ─────────────────────────────────── */
.bwk-card {
  position: relative;
  margin-top: 18px;
  background: linear-gradient(135deg, rgba(84,105,212,.12), var(--surface));
  border-color: rgba(84,105,212,.35);
}
.bwk-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 4px 28px 4px 4px;
}
.bwk-sterne {
  font-size: 26px;
  color: #5469d4;
  letter-spacing: 2px;
  flex-shrink: 0;
  line-height: 1;
}
.bwk-body { flex: 1 1 260px; min-width: 0; }
.bwk-title { font-size: 16px; font-weight: 600; color: var(--tx); margin-bottom: 4px; }
.bwk-text { font-size: 15px; color: var(--tx-2); line-height: 1.5; margin: 0; }
.bwk-aktionen { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
#view-dashboard .bwk-btn.btn-primary {
  background: #5469d4;
  border: none;
  white-space: nowrap;
}
#view-dashboard .bwk-btn.btn-primary:hover { background: #d4641c; opacity: 1; }
.bwk-spaeter {
  background: none;
  border: none;
  color: var(--tx-2);
  font-size: 14.5px;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 4px;
  text-decoration: underline;
}
.bwk-spaeter:hover { color: var(--tx); }
.bwk-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--tx-3, var(--tx-2));
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.bwk-close:hover { color: var(--tx); }

@media (max-width: 820px) {
  .bwk-inner { flex-wrap: wrap; }
  .bwk-aktionen { width: 100%; justify-content: space-between; }
  .bwk-btn.btn-primary { flex: 1; justify-content: center; }
}

/* ==================== LOGO BQ + HQ (Seitenleiste, Entwurf A, 26.09.2026) ====================
   BQ-Icon vorne unten links, HQ-Icon versetzt dahinter oben rechts. Steht bewusst am Dateiende,
   damit es die Einklapp-Regeln (max-width 900px, sb-collapsed) sicher überschreibt. */
.sidebar-logo-stapel {
  position: relative;
  width: 52px;
  height: 42px;
  flex-shrink: 0;
  display: block;
}
.sidebar-logo-stapel img {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: block;
}
.sidebar-logo-stapel .sidebar-logo-hq { right: 0; top: 0; }
.sidebar-logo-stapel .sidebar-logo-bq { left: 0; bottom: 0; box-shadow: 0 0 0 2.5px var(--bg); }

/* Schrift links (etwas größer), Icons rechts (Walied 26.09.) */
.sidebar .sidebar-logo { justify-content: space-between; }
.sidebar .sidebar-logo-text { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.sidebar .sidebar-logo-sub { margin-top: 1px; }
html.sb-collapsed .sidebar .sidebar-logo,
body.sb-collapsed .sidebar .sidebar-logo { justify-content: center; }
html.sb-collapsed .sidebar-logo-schrift,
body.sb-collapsed .sidebar-logo-schrift { display: none; }

/* Eingeklappt bleiben 44 px Innenbreite → Stapel etwas kleiner */
@media (max-width: 900px) {
  .sidebar .sidebar-logo { justify-content: center; }
  .sidebar-logo-schrift { display: none; }
  .sidebar-logo-stapel { width: 44px; height: 38px; }
  .sidebar-logo-stapel img { width: 25px; height: 25px; border-radius: 7px; }
}
html.sb-collapsed .sidebar-logo-stapel,
body.sb-collapsed .sidebar-logo-stapel { width: 44px; height: 38px; }
html.sb-collapsed .sidebar-logo-stapel img,
body.sb-collapsed .sidebar-logo-stapel img { width: 25px; height: 25px; border-radius: 7px; }


/* ── Eigene Filter (Üben) – Neugestaltung 05.10.2026 ─────────────────
   Prinzip wie /training: eine Karte mit nummerierten Schritten, Fächer mit
   Farbpunkt in ihrer Fachfarbe, Anzahl als Umschalter, Live-Zähler unten,
   flache Hinweisleiste. IDs/data-val unverändert (app.js-Logik bleibt). */
.uf.ueben-panel { max-width: 760px; padding-top: 0.5rem; }
.uf .uf-zurueck { display: inline-block; font-size: 14.5px; font-weight: 600; color: #818cf8; text-decoration: none; margin-bottom: 10px; }
.uf h2 { font-size: 1.75rem; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.01em; }
.uf .uf-unter { font-size: 15.5px; color: #9aa0b0; margin: 0 0 20px; line-height: 1.5; }
.uf .uf-karte {
  position: relative; border-radius: 16px; border: 1px solid #262b3f; overflow: hidden;
  background: linear-gradient(160deg, rgba(99,102,241,0.12), transparent 55%), #13161f;
}
.uf .uf-karte::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: #6366f1; }
.uf .ueben-optionen { padding: 22px 22px 6px; gap: 22px; }
.uf .option-group label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #9aa0b0; margin-bottom: 10px; }
.uf .uf-nr {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
  background: rgba(99,102,241,0.18); color: #a5b4fc; font-size: 12px; font-weight: 800; letter-spacing: 0;
}
.uf .chip { font-size: 14px; padding: 7px 13px; border-color: #2a2f45; background: #161a26; color: #c4c8d4; }
.uf .chip.uf-alle { --fach-color: #6366f1; }
.uf .chip.active { background: var(--fach-color); border-color: var(--fach-color); color: #fff; font-weight: 700; }
.uf .uf-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fach-color); margin-right: 7px; vertical-align: 1px; }
.uf .chip.active .uf-punkt { background: #fff; }
/* Fächer in einer Zeile, am Handy seitlich wischbar */
.uf .uf-leiste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; padding-bottom: 2px; }
.uf .uf-leiste::-webkit-scrollbar { display: none; }
.uf .uf-leiste .chip { flex: 0 0 auto; white-space: nowrap; }
.uf .uf-jahre .chip { font-size: 13.5px; padding: 6px 11px; }
.uf .uf-jahre .chip:not(.chip-ki-aufgaben) { --fach-color: #6366f1; }
/* Anzahl als Umschalter */
.uf .uf-schalter { display: inline-flex; flex-wrap: nowrap; gap: 3px; padding: 3px; border: 1px solid #262b3f; border-radius: 11px; background: #0f1119; }
.uf .uf-schalter .chip { border: none; border-radius: 8px; background: transparent; min-width: 52px; }
.uf .uf-schalter .chip.active { background: #6366f1; color: #fff; }
/* Fuß mit Live-Zähler und Start */
.uf .uf-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding: 16px 22px; border-top: 1px solid #23283a; background: rgba(15,17,25,0.55);
}
.uf .uf-summe { font-size: 14.5px; color: #9aa0b0; line-height: 1.5; min-width: 0; }
.uf .uf-summe b { color: #e8eaf0; }
.uf .uf-summe .uf-null { color: #f0a03c; font-weight: 600; }
.uf .uf-start {
  border: none; border-radius: 10px; padding: 12px 22px; font: inherit; font-size: 15.5px; font-weight: 700;
  background: #6366f1; color: #fff; cursor: pointer; transition: background .2s, transform .15s;
}
.uf .uf-start:disabled { background: #2a2f45; color: #8b8fa6; cursor: not-allowed; }
/* Flache Hinweisleiste: Text links, Knopf rechts */
.uf .uf-hinweis {
  margin: 14px 0 0; padding: 12px 16px; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-radius: 12px; border: 1px solid rgba(84, 105, 212, .5); font-size: 14px; color: #c4c8d4;
  background: linear-gradient(90deg, rgba(84, 105, 212,.14), rgba(84, 105, 212,.03));
}
.uf .uf-hinweis.hidden { display: none; }
.uf .uf-hinweis strong { color: #8796ef; }
.uf .uf-hinweis > span { flex: 1 1 280px; min-width: 0; line-height: 1.5; }
.uf .uf-hinweis .uf-hinweis-knopf {
  flex-shrink: 0; padding: 7px 14px; border-radius: 8px; background: #5469d4; color: #fff; font-weight: 700; text-decoration: none;
}
@media (hover: hover) {
  .uf .uf-zurueck:hover { text-decoration: underline; }
  .uf .uf-start:not(:disabled):hover { background: #4f46e5; transform: translateY(-1px); }
  .uf .uf-hinweis .uf-hinweis-knopf:hover { filter: brightness(1.08); text-decoration: none; }
}
@media (max-width: 560px) {
  .uf h2 { font-size: 1.45rem; }
  .uf .ueben-optionen { padding: 18px 16px 4px; }
  .uf .uf-fuss { padding: 14px 16px; }
  .uf .uf-start { width: 100%; }
  .uf .uf-schalter { display: flex; }
  .uf .uf-schalter .chip { flex: 1; min-width: 0; }
}

/* ── Neues Design – gemeinsame Basis für alle App-Seiten (05.10.2026) ─────────
   Kopf wie /training, Fach-Chips mit Farbpunkt, Themenkarten in Fachfarbe. */
.view-header h2 { font-size: 2rem; font-weight: 800; letter-spacing: -0.01em; color: #f3f4f8; }
.view-header .nd-unter { width: 100%; margin: -6px 0 0; font-size: 15.5px; color: #9aa0b0; line-height: 1.5; }
.view-header .nd-zurueck { width: 100%; order: -1; font-size: 14.5px; font-weight: 600; color: #818cf8; text-decoration: none; margin-bottom: -6px; }
@media (max-width: 768px) { .view-header h2 { font-size: 1.6rem; } }

/* Fach-Chips: Farbpunkt, gewählt in Fachfarbe, „Alle Fächer“ lila */
.chip-row .chip.chip-rbh::before, .chip-row .chip.chip-bwh::before, .chip-row .chip.chip-mikp::before,
.chip-row .chip.chip-zib::before, .chip-row .chip.chip-ntg::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--fach-color);
}
.chip-row .chip.active::before { background: currentColor; }
.jahr-fach-chips .chip[data-val="all"], .themen-fach-chips .chip[data-val="all"] { --fach-color: #6366f1; }
.jahr-fach-chips, .themen-fach-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; padding-bottom: 2px; }
.jahr-fach-chips::-webkit-scrollbar, .themen-fach-chips::-webkit-scrollbar { display: none; }
.jahr-fach-chips .chip, .themen-fach-chips .chip { flex: 0 0 auto; white-space: nowrap; font-size: 14px; padding: 7px 13px; }
.chip-row .chip.chip-mikp.active, .chip-row .chip.chip-zib.active, .chip-row .chip.chip-ntg.active { color: #0f1119; }

/* Themenkarten: Fachrand 4 px, Balken in Fachfarbe (Farbe setzt app.js je Karte) */
.thema-card { border-left: 4px solid var(--fach-color); padding: 16px 16px 14px; }
.thema-card-name { font-weight: 800; color: #f3f4f8; }
.thema-card-meta { font-size: 13px; color: #8b91a3; }
.thema-card-bar { height: 5px; border-radius: 99px; }
.thema-card-bar-fill { background: var(--fach-color); border-radius: 99px; }

/* Jahres-Blöcke */
.jahr-header h3 { font-weight: 800; color: #f3f4f8; }
@media (hover: none) { .thema-card:hover { transform: none; } }

/* Übungskarte: Oberkante und Fortschritt in der Fachfarbe der aktuellen Aufgabe */
#ueben-quiz .quiz-card { border-top: 3px solid var(--fach-color); }
#ueben-quiz .progress-bar { height: 6px; border-radius: 99px; }
#ueben-quiz .progress-fill { background: var(--fach-color); border-radius: 99px; }

/* ── Neues Design: Seitenkopf für eigenständige Seiten (05.10.2026) ──
   <div class="nd-kopf"><a class="nd-zurueck">← …</a><h1>…</h1><p>…</p><div class="nd-pillen"><span>…</span></div></div> */
.nd-kopf { margin: 0 0 24px; }
.nd-kopf .nd-zurueck { display: inline-block; font-size: 14.5px; font-weight: 600; color: #818cf8; text-decoration: none; margin-bottom: 10px; }
.nd-kopf h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.01em; color: #f3f4f8; margin: 0 0 6px; line-height: 1.2; }
.nd-kopf p { font-size: 15.5px; color: #9aa0b0; line-height: 1.5; margin: 0; }
.nd-pillen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nd-pillen span {
  font-size: 13px; font-weight: 700; color: #dfe2ea; padding: 4px 11px; border-radius: 999px;
  border: 1px solid #2c3146; background: rgba(255,255,255,0.04); white-space: nowrap;
}
@media (hover: hover) { .nd-kopf .nd-zurueck:hover { text-decoration: underline; } }
@media (max-width: 768px) { .nd-kopf h1 { font-size: 1.6rem; } }

/* Übungsplaner anlegen: Karte mit nummerierten Schritten wie „Eigene Filter“ */
#lp-setup.lp-setup {
  position: relative; overflow: hidden; border-radius: 16px; border: 1px solid #262b3f;
  background: linear-gradient(160deg, rgba(99,102,241,0.12), transparent 55%), #13161f; counter-reset: lp-schritt;
  padding: 24px; margin-left: 0;
}
#lp-setup.lp-setup::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: #6366f1; }
#lp-setup h2 { font-size: 1.35rem; font-weight: 800; color: #f3f4f8; }
#lp-setup .lp-field > label:first-child:not(:has(input)) { display: flex; align-items: center; gap: 8px; counter-increment: lp-schritt; }
#lp-setup .lp-field > label:first-child:not(:has(input))::before {
  content: counter(lp-schritt); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px;
  background: rgba(99,102,241,0.18); color: #a5b4fc; font-size: 12px; font-weight: 800;
}
.lp-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 6px 0 2px; vertical-align: 1px; }
.lp-woche { border-color: #262b3f; border-radius: 14px; }
.lp-woche-header { background: #13161f; }

/* Zusammenfassungen + Formeln: Fach-Chips wie überall (Farbpunkt, „Alle“ lila), großer Titel */
.zs-toc-chip { font-size: 13.5px; }
.zs-toc-chip.rbh::before, .zs-toc-chip.bwh::before, .zs-toc-chip.mikp::before, .zs-toc-chip.zib::before, .zs-toc-chip.ntg::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--zs-punkt);
}
.zs-toc-chip.rbh { --zs-punkt: #e85d4a; } .zs-toc-chip.bwh { --zs-punkt: #3b82f6; } .zs-toc-chip.mikp { --zs-punkt: #f0a03c; }
.zs-toc-chip.zib { --zs-punkt: #a78bfa; } .zs-toc-chip.ntg { --zs-punkt: #4ade80; }
.zs-toc-chip.active { background: #6366f1; border-color: #6366f1; color: #fff; }
.zs-toc-chip.rbh.active, .zs-toc-chip.bwh.active, .zs-toc-chip.mikp.active, .zs-toc-chip.zib.active, .zs-toc-chip.ntg.active {
  background: var(--zs-punkt); border-color: var(--zs-punkt); color: #0f1119;
}
.zs-toc-chip.active::before { background: currentColor; }
.zs-page .dashboard-header-title { font-size: 2rem; font-weight: 800; letter-spacing: -0.01em; color: #f3f4f8; }
.zs-page .dashboard-header-subtitle { font-size: 15.5px; color: #9aa0b0; }
@media (max-width: 768px) { .zs-page .dashboard-header-title { font-size: 1.6rem; } }

/* ── Weiche Seitenwechsel (06.10.2026) ─────────────────────────
   Chrome/Edge zeigen die alte Seite, bis die neue gezeichnet ist, und
   blenden dann kurz über – statt weißem Blitz und sichtbarem Aufbau.
   Seitenleiste und Handy-Leiste bleiben dabei stehen (eigener Name).
   Browser ohne Unterstützung ignorieren das und wechseln wie bisher.
   Gilt nur zwischen Seiten, die style.css laden (beide müssen zustimmen). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  nav.sidebar { view-transition-name: mk-seitenleiste; }
  .mobile-bottom-nav { view-transition-name: mk-handyleiste; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .16s; }
}

/* ── Ruhiger Dashboard-Aufbau (06.10.2026) ─────────────────────
   1) Die Kacheln bleiben unsichtbar, bis dashboard-neu.js die gespeicherte
      Reihenfolge angewendet hat (sonst springt alles einmal um).
   2) „Weiter lernen“ zeigt Schimmer-Balken statt „Lade deine Übersicht…“,
      bis app.js die Karte füllt.
   Sicherheitsnetz: Läuft ein Skript nicht, blendet die Animation den
   Inhalt nach spätestens 2 bzw. 4 Sekunden trotzdem ein. */
#dash-kacheln.db-layout-wartet {
  opacity: 0;
  animation: db-notfall-zeigen 0s linear 2s forwards;
}
#dash-kacheln { transition: opacity .15s ease-out; }
#dash-weitermachen.db-laedt .db-hero-title,
#dash-weitermachen.db-laedt .db-hero-meta {
  color: transparent;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hi) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: db-shimmer 1.4s infinite, db-notfall-text 0s linear 4s forwards;
}
#dash-weitermachen.db-laedt .db-hero-title { max-width: 420px; }
#dash-weitermachen.db-laedt .db-hero-meta { max-width: 300px; min-height: 1.2em; }
#dash-weitermachen.db-laedt .db-hero-actions,
#dash-weitermachen.db-laedt .db-ring-val {
  visibility: hidden;
  animation: db-notfall-sichtbar 0s linear 4s forwards;
}
@keyframes db-notfall-zeigen { to { opacity: 1; } }
@keyframes db-notfall-text { to { color: inherit; background: none; } }
@keyframes db-notfall-sichtbar { to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  #dash-weitermachen.db-laedt .db-hero-title,
  #dash-weitermachen.db-laedt .db-hero-meta { animation: db-notfall-text 0s linear 4s forwards; }
}

/* ── Aufgabenverlauf (/app?view=verlauf, seit 09.10.2026) ───────────────── */
.verlauf-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.verlauf-filter .themen-fach-chips { margin-bottom: 0; flex: 1 1 auto; }
.chip.verlauf-schalter { --fach-color: #f87171; flex: 0 0 auto; white-space: nowrap; font-size: 14px; padding: 7px 13px; }
.verlauf-hinweis { font-size: 13.5px; color: #8b91a3; margin: 0 0 18px; }
.verlauf-gruppe { margin-bottom: 26px; }
.verlauf-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.verlauf-kopf h3 { font-size: 1.15rem; font-weight: 800; color: #f3f4f8; margin: 0; }
.verlauf-kopf h3 span { font-size: 14px; font-weight: 600; color: #8b91a3; margin-left: 6px; }
.verlauf-start {
  font: inherit; font-size: 14.5px; font-weight: 700; color: #fff; cursor: pointer;
  background: #6366f1; border: 1px solid #6366f1; border-radius: 9px; padding: 7px 14px;
}
.verlauf-mehr {
  font: inherit; font-size: 14px; font-weight: 700; color: #818cf8; cursor: pointer;
  background: none; border: none; padding: 8px 0 0;
}
.verlauf-leer {
  display: flex; flex-direction: column; gap: 6px; padding: 26px 22px; border-radius: 12px;
  background: #13161f; border: 1px solid #23273a; color: #a7adbd; font-size: 15px; line-height: 1.5;
}
.verlauf-leer strong { color: #f3f4f8; font-size: 16px; }
.verlauf-leer a { color: #818cf8; font-weight: 700; text-decoration: none; margin-top: 6px; }
@media (hover: hover) {
  .verlauf-start:hover { background: #4f46e5; border-color: #4f46e5; }
  .verlauf-mehr:hover, .verlauf-leer a:hover { text-decoration: underline; }
}
@media (max-width: 560px) {
  .verlauf-kopf { align-items: flex-start; flex-direction: column; gap: 8px; }
  .verlauf-start { width: 100%; }
}

/* Rechtliche Links im mobilen Mehr-Blatt (Seitenleiste ist am Handy ausgeblendet) */
.mobil-blatt-recht { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 14px 6px 4px; margin-top: 10px; border-top: 1px solid #1e2233; }
.mobil-blatt-recht a { font-size: 13px; color: #8b91a3; text-decoration: none; }

/* ════════════════════════════════════════════════════════════
   ZUSAMMENFASSUNGEN — Darstellung (TBW 10.10.2026, übernommen aus Fachwirte-WQ)
   Inhalte kommen aus inhalte/zusammenfassungen/*.md:
   h3 = Abschnitt, h4 = Unterpunkt, Tabellen in .zs-tabelle-wrap.
   Steht bewusst am Dateiende, damit ältere IM-BQ-Regeln überstimmt werden.
   ════════════════════════════════════════════════════════════ */
.zs-fach[data-fach="VWL"] { --zs-fach-farbe: #6c8ebf; }
.zs-fach[data-fach="REWE"] { --zs-fach-farbe: #c29a4b; }
.zs-fach[data-fach="FININV"] { --zs-fach-farbe: #4f9d8f; }
.zs-fach[data-fach="MPA"] { --zs-fach-farbe: #b07a63; }
.zs-fach[data-fach="SA1"] { --zs-fach-farbe: #8f86c9; }
.zs-fach[data-fach="SA2"] { --zs-fach-farbe: #8796ad; }

/* Abschnitt: farbiger Balken links in Fachfarbe */
.zs-page .zs-artikel h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 2.5rem 0 1rem;
  padding: 0.3rem 0 0.55rem 0.7rem;
  border-left: 3px solid var(--zs-fach-farbe, var(--accent-blue));
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
  letter-spacing: 0;
}
.zs-page .zs-artikel .zs-artikel-untertitel + h3 { margin-top: 1.5rem; }

/* Unterpunkt: kleiner, ohne Balken */
.zs-page .zs-artikel h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 1.75rem 0 0.6rem;
  padding: 0;
  border: none;
  line-height: 1.4;
}

.zs-page .zs-artikel .zs-artikel-untertitel {
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

/* Tabellen: Rahmen, Kopfzeile, fette erste Spalte, am Handy seitlich scrollbar */
.zs-page .zs-artikel .zs-tabelle-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0 1.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.zs-page .zs-artikel .zs-tabelle-wrap table {
  display: table;
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.zs-page .zs-artikel .zs-tabelle-wrap th {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.zs-page .zs-artikel .zs-tabelle-wrap td {
  color: var(--text-secondary);
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.6;
}
.zs-page .zs-artikel .zs-tabelle-wrap th + th,
.zs-page .zs-artikel .zs-tabelle-wrap td + td {
  border-left: 1px solid var(--border);
}
.zs-page .zs-artikel .zs-tabelle-wrap td:first-child {
  color: var(--text-primary);
  font-weight: 600;
}
.zs-page .zs-artikel .zs-tabelle-wrap tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02);
}

/* Listen: Aufzählungszeichen in Fachfarbe */
.zs-page .zs-artikel ul li::marker,
.zs-page .zs-artikel ol li::marker {
  color: var(--zs-fach-farbe, var(--accent-blue));
}

@media (max-width: 720px) {
  .zs-page .zs-artikel .zs-tabelle-wrap table { font-size: 0.8125rem; }
  .zs-page .zs-artikel .zs-tabelle-wrap th,
  .zs-page .zs-artikel .zs-tabelle-wrap td { padding: 0.55rem 0.65rem; }
  .zs-page .zs-artikel .zs-tabelle-wrap th { white-space: normal; }
}

/* Zusammenfassungen: Inhalt 1,5 px größer (Vorgabe aus Fachwirte-WQ),
   Zwischenüberschriften deutlich größer — Menü und Themenliste unverändert */
.zs-page .zs-fach-kuerzel,
.zs-page .zs-fach-header h1        { font-size: calc(1.5rem + 1.5px); }
.zs-page .zs-fach-subtitle         { font-size: calc(0.9rem + 1.5px); }
.zs-page .zs-artikel h2            { font-size: calc(1.5rem + 1.5px); }
.zs-page .zs-artikel h3            { font-size: 1.3rem; }
.zs-page .zs-artikel h4            { font-size: calc(0.95rem + 1.5px); }
.zs-page .zs-artikel p,
.zs-page .zs-artikel li            { font-size: calc(0.9375rem + 1.5px); }
.zs-page .zs-artikel .zs-formel    { font-size: calc(1rem + 1.5px); }

/* ── TBW 10.10.2026: Fach-Chips Teil A (Lernseiten aus IM BQ übernommen, Farben Vorschlag) ── */
.chip-vwl    { --fach-color: #6c8ebf; }
.chip-rewe   { --fach-color: #c29a4b; }
.chip-fininv { --fach-color: #4f9d8f; }
.chip-mpa    { --fach-color: #b07a63; }
.chip-row .chip.chip-vwl::before, .chip-row .chip.chip-rewe::before,
.chip-row .chip.chip-fininv::before, .chip-row .chip.chip-mpa::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: var(--fach-color);
}
.chip-row .chip.chip-vwl.active, .chip-row .chip.chip-rewe.active,
.chip-row .chip.chip-fininv.active, .chip-row .chip.chip-mpa.active { color: #0f1119; }
.db-chip-vwl    { background: rgba(108,142,191,.14);  color: #6c8ebf; }
.db-chip-rewe   { background: rgba(194,154,75,.14);  color: #c29a4b; }
.db-chip-fininv { background: rgba(79,157,143,.14);  color: #4f9d8f; }
.db-chip-mpa    { background: rgba(176,122,99,.14);   color: #b07a63; }
.db-chip-sa1    { background: rgba(143,134,201,.14);  color: #8f86c9; }
.db-chip-sa2    { background: rgba(135,150,173,.14);  color: #8796ad; }
.zs-toc-chip.vwl::before, .zs-toc-chip.rewe::before, .zs-toc-chip.fininv::before,
.zs-toc-chip.mpa::before, .zs-toc-chip.sa1::before, .zs-toc-chip.sa2::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--zs-punkt);
}
.zs-toc-chip.vwl { --zs-punkt: #6c8ebf; } .zs-toc-chip.rewe { --zs-punkt: #c29a4b; } .zs-toc-chip.fininv { --zs-punkt: #4f9d8f; }
.zs-toc-chip.mpa { --zs-punkt: #b07a63; } .zs-toc-chip.sa1 { --zs-punkt: #8f86c9; } .zs-toc-chip.sa2 { --zs-punkt: #8796ad; }

/* ── TBW 10.10.2026: „Nochmal üben“ → Fehlerfragen als Aufgabenliste (Teil A) ── */
.nu-tbw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.nu-tbw-kopf span { font-size: 15px; color: #9aa0b0; }
.nu-tbw-start, .nu-tbw-ueben {
  font: inherit; font-size: 14.5px; font-weight: 700; color: #fff; cursor: pointer;
  background: #6366f1; border: 1px solid #6366f1; border-radius: 9px; padding: 8px 15px;
}
.nu-tbw-liste { display: flex; flex-direction: column; gap: 10px; }
.nu-tbw-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: #13161f; border: 1px solid #262b3f; border-left: 4px solid var(--fach); border-radius: 14px; padding: 14px 16px;
}
.nu-tbw-text { flex: 1 1 320px; min-width: 0; }
.nu-tbw-meta { font-size: 13px; color: #8b91a3; }
.nu-tbw-meta b { color: var(--fach); }
.nu-tbw-titel { font-size: 15.5px; font-weight: 700; color: #f3f4f8; margin-top: 3px; line-height: 1.4; }
.nu-tbw-punkte { font-size: 13.5px; color: #f87171; margin-top: 4px; }
.nu-tbw-knoepfe { display: flex; gap: 8px; flex-shrink: 0; }
.nu-tbw-ok {
  font: inherit; font-size: 14px; font-weight: 600; color: #c4c8d4; cursor: pointer;
  background: transparent; border: 1px solid #2c3146; border-radius: 9px; padding: 8px 13px;
}
@media (hover: hover) {
  .nu-tbw-start:hover, .nu-tbw-ueben:hover { background: #4f46e5; border-color: #4f46e5; }
  .nu-tbw-ok:hover { border-color: #4ade80; color: #4ade80; }
}
@media (max-width: 560px) {
  .nu-tbw-start { width: 100%; }
  .nu-tbw-knoepfe { width: 100%; }
  .nu-tbw-knoepfe button { flex: 1; }
}

/* ── TBW 11.10.2026 (Handy-Durchgang): längere Fachkürzel wie „VWL/BWL“ und lange Gruppennamen ──
   Die IM-Kürzel hatten 3–4 Buchstaben; „VWL/BWL“ lief im Kopf der Zusammenfassungen über den Titel,
   „Gesamtwirtschaftliche Kennzahlen“ wurde in der Formelsammlung am Rand abgeschnitten. */
.zs-fach-kuerzel { flex: none; white-space: nowrap; }
.zs-fach-header > div { min-width: 0; }
.formel-gruppe-name { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 768px) {
  .zs-fach-header { flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 1.1rem; }
  .zs-page .zs-fach-kuerzel, .zs-fach-kuerzel { min-width: 0; font-size: 0.95rem; letter-spacing: 0.04em; text-align: left; }
  .formel-gruppe-header { font-size: 21px; padding: 24px 16px 14px; flex-wrap: wrap; }
}

/* ════════════════════════════════════════════════════════════
   ZUSAMMENFASSUNGEN – LESBARKEIT (TBW 11.10.2026)
   Rückmeldung Walied: „Zwischenüberschriften zu klein, Abstand überall zu gering“.
   Drei klar unterscheidbare Ebenen (h2 Kapitel, h3 Abschnitt, h4 Unterpunkt), mehr Luft
   zwischen den Blöcken, Einleitungssätze und Beispiele heben sich vom Fließtext ab.
   Steht am Dateiende und überstimmt die älteren Regeln.
   ════════════════════════════════════════════════════════════ */
.zs-page .zs-artikel {
  padding: 2.75rem 3rem 2.5rem;
  margin-bottom: 3rem;
}
.zs-page .zs-artikel h2 {
  font-size: 2rem;
  line-height: 1.25;
  margin: 0 0 0.6rem;
  padding-bottom: 1rem;
}
.zs-page .zs-artikel .zs-artikel-untertitel {
  font-size: 1.05rem;
  margin: 0.9rem 0 0.5rem;
}

/* h3 = Abschnitt: groß, mit Fläche in Fachfarbe – der deutlichste Einschnitt im Kapitel */
.zs-page .zs-artikel h3 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 3.75rem 0 1.5rem;
  padding: 0.7rem 1rem 0.75rem 1.05rem;
  border-left: 4px solid var(--zs-fach-farbe, var(--accent-blue));
  border-bottom: 0;
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--zs-fach-farbe, #5469d4) 11%, transparent);
  letter-spacing: -0.005em;
}
.zs-page .zs-artikel .zs-artikel-untertitel + h3,
.zs-page .zs-artikel h2 + h3 { margin-top: 2rem; }

/* h4 = Unterpunkt: klar größer als der Fließtext, mit Linie darunter */
.zs-page .zs-artikel h4 {
  font-size: 1.22rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--text-primary);
  margin: 2.9rem 0 1.05rem;
  padding: 0 0 0.55rem;
  border: 0;
  border-bottom: 1px solid var(--border);
}
.zs-page .zs-artikel h4::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 0.6rem;
  border-radius: 2px;
  background: var(--zs-fach-farbe, var(--accent-blue));
  vertical-align: 0.06em;
}
.zs-page .zs-artikel h3 + h4 { margin-top: 1.6rem; }

/* Fließtext und Listen: mehr Luft */
.zs-page .zs-artikel p {
  line-height: 1.8;
  margin: 0 0 1.25rem;
}
.zs-page .zs-artikel ul,
.zs-page .zs-artikel ol {
  margin: 0.2rem 0 1.6rem;
  padding-left: 1.6rem;
}
.zs-page .zs-artikel li {
  line-height: 1.75;
  margin-bottom: 0.7rem;
}
.zs-page .zs-artikel li:last-child { margin-bottom: 0; }

/* Tabellen und Formeln: Abstand nach oben und unten */
.zs-page .zs-artikel .zs-tabelle-wrap { margin: 1.4rem 0 2.2rem; }
.zs-page .zs-artikel .zs-formel {
  margin: 1rem 0 1.9rem;
  padding: 1.15rem 1.5rem 1.15rem 1.6rem;
  border-left-width: 3px;
  border-left-color: var(--zs-fach-farbe, var(--accent-blue));
  background: rgba(255, 255, 255, 0.025);
  border-radius: 0 10px 10px 0;
}
.zs-page .zs-artikel .zs-formel + .zs-formel { margin-top: -0.9rem; }
.zs-page .zs-artikel .zs-formel .katex-display { margin: 0.35em 0; }
.zs-page .zs-artikel .zs-formel + p,
.zs-page .zs-artikel .zs-tabelle-wrap + p { margin-top: 0.4rem; }

/* Einleitungssatz vor Formel, Tabelle oder Liste („Wichtige Lagerkennzahlen:“) – wirkt wie eine kleine Überschrift */
.zs-page .zs-artikel p.zs-einleitung {
  margin: 2.3rem 0 0.75rem;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.005em;
}
.zs-page .zs-artikel h3 + p.zs-einleitung,
.zs-page .zs-artikel h4 + p.zs-einleitung { margin-top: 0.4rem; }

/* Beispiel-Absatz („Durchgerechnetes Beispiel: …“) – als Kasten, damit er nicht untergeht */
.zs-page .zs-artikel p.zs-beispiel {
  margin: 2.4rem 0 1rem;
  padding: 1rem 1.25rem 1.05rem;
  border: 1px solid color-mix(in srgb, #4f9d8f 40%, transparent);
  border-left: 4px solid #4f9d8f;
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, #4f9d8f 9%, transparent);
}
.zs-page .zs-artikel p.zs-beispiel > strong:first-child {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7cc4b6;
}
/* Merksatz/Hinweis-Absätze („Merke: …“, „Wichtig: …“, „Prüfungstipp: …“) */
.zs-page .zs-artikel p.zs-merke {
  margin: 1.9rem 0 1.6rem;
  padding: 0.95rem 1.25rem 1rem;
  border-left: 4px solid #c29a4b;
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, #c29a4b 9%, transparent);
}
.zs-page .zs-artikel p.zs-merke > strong:first-child { color: #dcb96e; }

@media (max-width: 768px) {
  .zs-page .zs-artikel { padding: 1.6rem 1.15rem 1.5rem; margin-bottom: 2rem; }
  .zs-page .zs-artikel h2 { font-size: 1.55rem; }
  .zs-page .zs-artikel h3 { font-size: 1.25rem; margin: 2.8rem 0 1.2rem; padding: 0.6rem 0.8rem; }
  .zs-page .zs-artikel h4 { font-size: 1.1rem; margin: 2.3rem 0 0.9rem; }
  .zs-page .zs-artikel .zs-formel { padding: 0.9rem 0.9rem 0.9rem 1rem; }
  .zs-page .zs-artikel p.zs-beispiel,
  .zs-page .zs-artikel p.zs-merke { padding: 0.85rem 0.95rem; }
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD – AUFMACHER FALLSTUDIEN (TBW 11.10.2026)
   ════════════════════════════════════════════════════════════ */
.db-fall {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 36px; align-items: center;
  margin: 0 0 22px; padding: 28px 30px; border-radius: 18px;
  border: 1px solid rgba(143, 134, 201, .45);
  background:
    radial-gradient(900px 260px at 100% 0%, rgba(143, 134, 201, .22), transparent 60%),
    linear-gradient(135deg, rgba(84, 105, 212, .20), rgba(84, 105, 212, .05) 55%, rgba(19, 22, 31, 1));
}
.db-fall[hidden] { display: none; }
.db-fall-marke { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #b9bfe0; margin: 0 0 10px; }
.db-fall-marke span { display: inline-block; margin-right: 8px; padding: 3px 9px; border-radius: 6px; background: #8f86c9; color: #fff; letter-spacing: .06em; }
.db-fall-titel { margin: 0 0 10px; font-size: 25px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.db-fall-absatz { margin: 0 0 16px; max-width: 70ch; font-size: 15.5px; line-height: 1.65; color: #c5c9d6; }
.db-fall-punkte { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.db-fall-punkte li { padding: 7px 12px; border-radius: 999px; font-size: 13.5px; color: #c5c9d6; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); }
.db-fall-punkte b { color: #fff; font-weight: 600; }
.db-fall-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.db-fall-los {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 10px;
  background: #5469d4; color: #fff; font-size: 15.5px; font-weight: 600; text-decoration: none; transition: background .15s;
}
.db-fall-los:hover { background: #6074dc; }
.db-fall-weiter {
  display: inline-flex; align-items: center; min-height: 46px; max-width: 100%; padding: 0 18px; border-radius: 10px;
  border: 1px solid #454c6e; color: #e2e4ea; font-size: 15px; font-weight: 500; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.db-fall-weiter[hidden] { display: none; }
.db-fall-weiter:hover { background: rgba(255, 255, 255, .05); border-color: #5b6390; }
.db-fall-hinweis { font-size: 13.5px; color: #b9bfe0; }
.db-fall-zahlen { display: flex; gap: 14px; }
.db-fall-zahl {
  min-width: 150px; padding: 16px 18px; border-radius: 14px; background: rgba(10, 11, 18, .55); border: 1px solid rgba(255, 255, 255, .08);
}
.db-fall-zahl strong { display: block; font-size: 34px; line-height: 1; font-weight: 700; color: #fff; }
.db-fall-zahl span { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; color: #c8d0fb; }
.db-fall-zahl small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: #8b8fa6; max-width: 170px; }
@media (max-width: 1100px) {
  .db-fall { grid-template-columns: 1fr; }
  .db-fall-zahlen { order: 2; }
}
@media (max-width: 640px) {
  .db-fall { padding: 20px 16px; border-radius: 14px; }
  .db-fall-titel { font-size: 21px; }
  .db-fall-zahlen { flex-direction: column; }
  .db-fall-zahl { min-width: 0; }
  .db-fall-zahl small { max-width: none; }
  .db-fall-los, .db-fall-weiter { width: 100%; justify-content: center; }
}