:root {
  --bg:      #0f1117;
  --surface: #181c27;
  --border:  #2a2f3e;
  --accent:  #4f8ef7;
  --accent2: #26b88a;
  --danger:  #f76f6f;
  --text:    #e4e8f0;
  --muted:   #6b7591;
  --hover:   rgba(255,255,255,0.05);
  --mono: 'JetBrains Mono', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', monospace;
  --sans: 'DM Sans', sans-serif;
  --sidebar-w: 280px;

  /* Phase-2-Durchgangsfarben.
     DG 1 = Plattform-Standard (Petrol/Blau) ueber --accent.
     DG 2 = Magenta, gleicher Ton wie die DG-Spalten-Hervorhebung im Admin. */
  --dg1-color:      var(--accent);
  --dg1-color-soft: rgba(79,142,247,0.15);
  --dg2-color:      #d633c5;
  --dg2-color-soft: rgba(214,51,197,0.15);

  /* Aktiver DG: Default 1, body.dg-2 schaltet auf Magenta. */
  --dg-active:      var(--dg1-color);
  --dg-active-soft: var(--dg1-color-soft);

  /* Bereichs-Akzent: SQL = Cyan (Default), Model = Violett */
  --modell-accent:        #8b5cf6;
  --bereich-accent:      var(--accent);
  --bereich-accent-rgb:  79, 142, 247;
}

body.dg-2 {
  --dg-active:      var(--dg2-color);
  --dg-active-soft: var(--dg2-color-soft);
}

body.light {
  --dg1-color-soft: rgba(37,99,235,0.12);
  --dg2-color-soft: rgba(214,51,197,0.12);
}

/* ── Light-Mode ──────────────────────────────────────────────────────────── */
body.light {
  --bg:      #eceef4;
  --surface: #ffffff;
  --border:  #b0b6c6;
  --muted:   #454d64;
  --accent:  #2563eb;
  --accent2: #169a46;
  --danger:  #dc2626;
  --text:    #1e2336;
  --hover:   rgba(0,0,0,0.05);
  --modell-accent:       #7c3aed;
  --bereich-accent-rgb: 37, 99, 235;
}

body.bereich-modell {
  --bereich-accent:     #8b5cf6;
  --bereich-accent-rgb: 139, 92, 246;
}
body.bereich-modell.light {
  --bereich-accent:     #7c3aed;
  --bereich-accent-rgb: 124, 58, 237;
  --bg:                 #faf5ff;
}


/* Hardcoded dark backgrounds that don't use variables */
body.light .theorie-pg pre,
body.light .theory-content pre { background: #e8ebf4; }
body.light .theory-content { background: #f1fff7; border-left-color: var(--accent2); border-bottom-color: var(--accent2); color: #878d97; }
body.light .theory-content code { background: transparent; }
body.light .theory-content pre { background: transparent; color: var(--accent2); border-left-color: var(--accent2); }
body.light .theory-content strong:first-child, body.light .theory-content big strong { color: var(--accent2); }
body.light .task-desc { background: #e6edfc; border-left-color: #2563eb; border-bottom-color: #2563eb; color: #878d97; }
body.light .task-aufgabe { color: #b45309; }
body.light .er-col { color: #2d3142; }
body.light .er-col .pk { color: #b45309; }
body.light .btn-loesung { color: #d97706; border-color: #d97706; box-shadow: 0 0 0 1px #d97706; }
body.light .btn-loesung:hover:not(:disabled) { background: rgba(217,119,6,.12); }
body.light .theorie-tbl .col-pk { color: #b45309; }
body.light .theorie-tbl .col-fk { color: var(--accent2); }

/* Hint-box text was designed for dark backgrounds — re-color for light */
body.light .hint-box.info    { background: rgba(37,99,235,.07);  color: #1d4ed8; }
body.light .hint-box.correct { background: rgba(5,150,105,.07);  color: #065f46; }
body.light .hint-box.wrong   { background: rgba(220,38,38,.07);  color: #991b1b; }
body.light .hint-box.solution{ background: rgba(217,119,6,.07);  border-color: #d97706; color: #92400e; }

/* CodeMirror autocomplete tooltip */
.cm-tooltip { z-index: 150 !important; }
.cm-completionIcon::after { font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif !important; }
.cm-tooltip,
.cm-tooltip-autocomplete { background: #1e2336 !important; border-color: #2a2f3e !important; color: #e4e8f0 !important; }
.cm-tooltip-autocomplete > ul > li[aria-selected] { background: rgba(37,99,235,.25) !important; color: #e4e8f0 !important; }
body.light .cm-tooltip,
body.light .cm-tooltip-autocomplete { background: #ffffff !important; border-color: #dde1ec !important; color: #1e2336 !important; }
body.light .cm-tooltip-autocomplete > ul > li[aria-selected] { background: rgba(37,99,235,.15) !important; color: #1e2336 !important; }
* { box-sizing: border-box; margin: 0; padding: 0; font-variant-ligatures: none; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }

/* Header */
header { display: flex; align-items: center; height: 52px; background: var(--surface); flex-shrink: 0; padding: 0; border-bottom: 1px solid var(--border); position: relative; overflow: visible; }
.header-left { width: var(--sidebar-w); flex-shrink: 0; padding: 0 24px; display: flex; align-items: center; border-right: 1px solid var(--border); height: 100%; }
.header-right { flex: 1; padding: 0 16px; display: flex; align-items: center; gap: 6px; }
.logo { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--accent); letter-spacing: .04em; }
.logo span { color: var(--accent2); }
.logo-dropdown { position: relative; }
.logo-btn { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--accent); letter-spacing: 0; background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; gap: 0; }
.logo-btn .logo-dot { color: var(--accent2); }
.logo-caret { font-size: 16px; color: var(--muted); margin-left: 6px; transition: transform .15s; }
.logo-dropdown.open .logo-caret { transform: rotate(180deg); }
.logo-menu { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; min-width: 110px; z-index: 300; box-shadow: 0 4px 18px rgba(0,0,0,.28); }
.logo-dropdown.open .logo-menu { display: block; }
body.bereich-modell .logo-btn { color: var(--bereich-accent); }
.logo-menu-item { display: block; padding: 8px 16px; font-family: var(--mono); font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.logo-menu-item:hover { color: var(--bereich-accent); background: rgba(var(--bereich-accent-rgb),.08); }
.logo-menu-item.active { color: var(--bereich-accent); font-weight: 600; background: rgba(var(--bereich-accent-rgb),.06); }

/* Nav */
.hdr-nav { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; min-width: fit-content; }
.task-badge { font-family: var(--mono); font-size: 11px; background: rgba(var(--bereich-accent-rgb),.15); color: var(--bereich-accent); border: 1px solid rgba(var(--bereich-accent-rgb),.3); padding: 3px 4px; border-radius: 3px; letter-spacing: .06em; height: 28px; display: inline-flex; align-items: center; justify-content: center; width: 48px; min-width: 48px; max-width: 48px; text-align: center; white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.btn-nav { background: none; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); padding: 0; font-size: 12px; cursor: pointer; font-family: var(--sans); height: 28px; width: 36px; min-width: 36px; max-width: 36px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.btn-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn-nav:disabled { opacity: 0.3; cursor: default; }
.btn-nav-ghost { opacity: 0 !important; pointer-events: none; cursor: default; }
.btn-help { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); padding: 0.3rem 0.7rem; font-size: 0.8rem; cursor: pointer; }
.btn-help:hover { color: var(--accent); border-color: var(--accent); }
.hdr-btn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px; border-radius: 5px; border: 1px solid var(--border); background: transparent; font-size: 12px; cursor: pointer; white-space: nowrap; color: var(--muted); font-family: var(--sans); text-decoration: none; }
.hdr-btn:hover { border-color: var(--accent); color: var(--accent); }
body:not(.light) .hdr-btn, body:not(.light) .btn-help { border-color: #4a5170; }
body:not(.light) .hdr-btn:hover, body:not(.light) .btn-help:hover { border-color: var(--accent); color: var(--accent); }
.hdr-btn-active { box-shadow: inset 0 0 0 2px currentColor; font-weight: 500; opacity: 1; }
.hdr-btn-theorie { color: #3B6D11; border-color: #C0DD97; background: #EAF3DE; }
.hdr-btn-video   { color: #0F766E; border-color: #99E9DF; background: #CCFBF1; }
.hdr-btn-ref     { color: #515a74; border-color: #d0d4e0; background: #f0f2f6; }
.hdr-btn-joker   { color: #854F0B; border-color: #FAC775; background: #FAEEDA; }
.hdr-btn-punkte  { color: #3B6D11; border-color: #C0DD97; background: #EAF3DE; }
.hdr-btn-results { color: #993C1D; border-color: #F5C4B3; background: #FAECE7; }
.hdr-btn-quiz    { color: #5B21B6; border-color: #C4B5FD; background: #EDE9FE; }
.hdr-divider { width: 1px; height: 20px; background: var(--border); margin: 0 clamp(6px, 2vw, 36px); flex-shrink: 0; }
/* Dark-mode overrides (default theme, no body.light) */
body:not(.light) .hdr-btn-theorie { background: rgba(59,109,17,0.15);  border-color: rgba(99,153,34,0.4);   color: #97C459; }
body:not(.light) .hdr-btn-video   { background: rgba(15,118,110,0.18);  border-color: rgba(45,212,191,0.45);  color: #5EEAD4; }
body:not(.light) .hdr-btn-video:hover { color: #99F6E4; border-color: rgba(45,212,191,0.75); background: rgba(15,118,110,0.28); }
body:not(.light) .hdr-btn-ref     { background: rgba(24,95,165,0.15);  border-color: rgba(55,138,221,0.4);  color: #85B7EB; }
body:not(.light) .hdr-btn-joker   { background: rgba(133,79,11,0.15);  border-color: rgba(186,117,23,0.4);  color: #EF9F27; }
body:not(.light) .hdr-btn-punkte  { background: rgba(59,109,17,0.15);  border-color: rgba(99,153,34,0.4);   color: #97C459; }
body:not(.light) .hdr-btn-theorie:hover { color: #b5d87a; border-color: rgba(99,153,34,0.7);  background: rgba(59,109,17,0.25); }
body:not(.light) .hdr-btn-ref:hover     { color: #aad0f5; border-color: rgba(55,138,221,0.7); background: rgba(24,95,165,0.25); }
body:not(.light) .hdr-btn-joker:hover   { color: #f5b94a; border-color: rgba(186,117,23,0.7); background: rgba(133,79,11,0.25); }
body:not(.light) .hdr-btn-punkte:hover  { color: #b5d87a; border-color: rgba(99,153,34,0.7);  background: rgba(59,109,17,0.25); }
body:not(.light) .hdr-btn-results { background: rgba(153,60,29,0.15);  border-color: rgba(216,90,48,0.4);   color: #F0997B; }
body:not(.light) .hdr-btn-quiz    { background: rgba(91,33,182,0.15);  border-color: rgba(139,92,246,0.4);  color: #A78BFA; }
body:not(.light) .hdr-btn-quiz:hover { color: #c4b5fd; border-color: rgba(139,92,246,0.7); background: rgba(91,33,182,0.25); }
.user-name { font-size: 0.85rem; color: var(--muted); }
.logout-link { font-size: 0.78rem; color: var(--muted); text-decoration: none; opacity: 0.7; }
.logout-link:hover { opacity: 1; }
.hdr-avatar-wrap { position: relative; margin-left: auto; }
.hdr-avatar-menu { position: fixed; top: 52px; right: 8px; left: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; min-width: 140px; z-index: 200; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.hdr-avatar-name { padding: 8px 12px; font-size: 0.8rem; color: var(--muted); border-bottom: 1px solid var(--border); }
.hdr-avatar-item { display: block; padding: 8px 12px; font-size: 0.85rem; color: var(--text); text-decoration: none; }
.hdr-avatar-item:hover { background: var(--bg); }

/* Layout */
.workspace { display: flex; flex: 1; overflow: hidden; min-height: 0; }

/* Sidebar */
.sidebar { width: var(--sidebar-w); border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; overflow-y: hidden; flex-shrink: 0; }
.sidebar-section { padding: 10px 14px; border-bottom: 1px solid var(--border); } .sidebar-section:last-child { flex: 1; overflow-y: auto; min-height: 0; }
.sidebar-title { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.schema-toggle { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 0; }
.schema-toggle:hover { color: var(--accent); }
/* Sidebar-Header mit zwei Toggles nebeneinander (Schema + ERM). Beide
   eigene Klick-Bereiche, Pfeile zeigen den jeweiligen Open-State. */
.sidebar-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sidebar-title-row .sidebar-title { margin-bottom: 0; }
.erm-toggle    { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 0; }
.erm-toggle:hover { color: var(--accent); }
.erm-toggle.open  { color: var(--accent); }
.er-diagram { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px; font-family: var(--mono); font-size: 11px; margin-top: 8px; }
.er-table { margin-bottom: 6px; }
.er-table:last-child { margin-bottom: 0; }
.er-table-name { color: var(--accent); font-weight: 600; font-size: 12px; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.er-table-name::before { content: '▤'; color: var(--accent2); }
.er-col { color: var(--muted); padding-left: 14px; line-height: 1.6; font-size: 11px; }
.er-col .pk { color: #f7c948; }
.er-col .fk { color: var(--accent2); }
.task-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; }
.task-item { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 8px; transition: background .15s; border: 1px solid transparent; }
.task-item:hover { background: var(--bg); }
.task-item.active { background: rgba(var(--bereich-accent-rgb),.1); border-color: rgba(var(--bereich-accent-rgb),.3); }
.task-status { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.task-status.done { background: var(--accent2); border-color: var(--accent2); color: #000; }
.task-status.done::after { content: '✓'; }
.task-num { color: var(--muted); font-size: 11px; font-family: var(--mono); }
.task-schwierigkeit { font-size: 10px; color: var(--muted); white-space: nowrap; margin-left: 4px; }
.task-sterne { margin-left: auto; font-size: 0.75rem; }
.task-schwierigkeit-header { display: inline-block; margin-left: 0.5rem; font-size: 0.78em; color: var(--muted); font-weight: 500; vertical-align: middle; }
.task-pts { font-size: 0.75rem; }
.task-pts.pts-full { color: #22C55E; }
.task-pts.pts-low  { color: #fca5a5; }
.task-pts.pts-zero { color: #9CA3AF; }
.task-pts.pts-partial { color: #e08a3a; }
.block-header { font-size: 11px; font-weight: 600; color: var(--bereich-accent); text-transform: uppercase; letter-spacing: .08em; padding: 10px 10px 4px; display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.block-header.block-locked { opacity: .4; cursor: default; }
.block-header.block-playground { color: var(--accent2); }
.block-header.block-active { background: rgba(45,212,160,.1); border-radius: 6px; }
.theorie-pg h3 { margin-top: 0; color: var(--accent2); }
.theorie-pg h4 { color: var(--accent); margin-top: 1.2rem; margin-bottom: 0.4rem; }
.theorie-pg pre { background: var(--bg); border-radius: 6px; padding: 0.8rem 1rem; font-family: var(--mono); font-size: 0.85rem; overflow-x: auto; }
.theorie-pg code { color: var(--accent2); }
.theorie-tables { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.theorie-tbl { border-collapse: collapse; font-size: 0.82rem; min-width: 220px; }
.theorie-tbl thead th { background: rgba(79,142,247,0.12); color: var(--accent); font-family: var(--mono); padding: 0.3rem 0.7rem; text-align: left; border-bottom: 1px solid var(--border); }
.theorie-tbl td { padding: 0.2rem 0.7rem; border-bottom: 1px solid var(--border); }
.theorie-tbl .col-pk { color: #fab387; font-family: var(--mono); font-size: 0.78rem; }
.theorie-tbl .col-fk { color: var(--accent2); font-family: var(--mono); font-size: 0.78rem; }
.block-arrow { font-size: 0.75rem; }
.history-empty { font-size: 12px; color: var(--muted); font-style: italic; }
.btn-pdf-block { width: calc(100% - 28px); margin: 4px 14px 10px; padding: 0.35rem 0.7rem; background: none; border: 1px solid var(--accent); border-radius: 6px; color: var(--accent); font-size: 0.78rem; cursor: pointer; text-align: left; }
.btn-pdf-block:disabled { border-color: var(--border); color: var(--muted); cursor: not-allowed; opacity: 0.5; }
.btn-pdf-block:not(:disabled):hover { background: var(--accent); color: #fff; }

/* Main */
.main { flex: 1; display: flex; flex-direction: column; overflow: visible; min-height: 0; }
.task-panel { padding: 10px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.task-desc { font-size: 0.95rem; line-height: 1.4; color: #9ba8c0; margin-top: 6px; border-left: 5px solid var(--accent); border-bottom: 2px solid var(--accent); background: #111827; padding: 1.2rem 1.6rem; }
.task-desc kbd, .task-desc code { font-family: var(--mono); font-size: 0.88rem; color: var(--accent); background: rgba(79,142,247,0.12); border: 1px solid rgba(79,142,247,0.3); border-radius: 3px; padding: 1px 5px; }
.task-desc br + br { display: block; margin-top: 0.4rem; content: ""; }
.task-desc small { display: block; margin-top: 0.8rem; color: var(--muted); font-size: 0.82rem; line-height: 1.6; border-left: 2px solid var(--border); padding-left: 0.7rem; }

/* Theorie */
.theory-content { padding: 0.8rem 1.4rem; background: #151c2c; font-size: 0.92rem; line-height: 1.7; color: #9ba8c0; border-bottom: 2px solid var(--accent2); border-left: 5px solid var(--accent2); overflow-y: auto; }
.theory-content strong:first-child, .theory-content big strong { color: var(--accent2); }
.theory-content pre { background: transparent; color: var(--accent2); border-radius: 0; border-left: 2px solid var(--accent2); padding: 0.4rem 0.8rem; overflow-x: auto; font-family: var(--mono); font-size: 0.85rem; margin: 0.5rem 0; }
.theory-content code { background: transparent; padding: 0; border-radius: 0; }
.theory-content h3 { margin: 0 0 0.5rem; color: var(--accent); font-size: 0.95rem; }

/* ER-Diagramm-Streifen (analog Theorie-Streifen, Akzentfarbe statt accent2).
   Blendet das ER-Bild fuer das aktive Universum oberhalb des Aufgabenbereichs
   ein. Das Bild wird per max-width auf Containerbreite proportional einge-
   passt. Ein zusaetzlicher horizontaler Scroll bleibt nicht noetig, weil
   img + max-width:100% genuegt. Schliess-Button rechts oben. */
.erm-content { position: relative; padding: 0.2rem 0 0; background: #151c2c; border-bottom: 2px solid var(--accent); border-left: 5px solid var(--accent); }
.erm-content .erm-img-wrap { overflow-x: auto; text-align: center; }
.erm-content img { display: inline-block; max-width: 100%; height: auto; }
.erm-content .erm-close { position: absolute; top: 0.4rem; right: 0.6rem; background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.2rem 0.4rem; border-radius: 3px; }
.erm-content .erm-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }
body.light .erm-content { background: #f0f6ff; border-left-color: var(--accent); border-bottom-color: var(--accent); }
/* Bild-Skalierung pro Viewport-Stufe (siehe bestehende Breakpoints 1680 / 1380 / 1200).
   Default unter 1200px ist max-width:100% (siehe oben). */
@media (min-width: 960px) { .erm-content img { max-width: 90%; } }
@media (min-width: 1200px) { .erm-content img { max-width: 70%; } }
@media (min-width: 1380px) { .erm-content img { max-width: 60%; } }
@media (min-width: 1680px) { .erm-content img { max-width: 50%; } }
.erm-esport img { max-width: 100% !important; }

/* Sidebar-Button "ERM anzeigen" — default nur Text mit Akzent-Outline,
   blau hinterlegt sobald der Streifen offen ist (.active wird von app.js
   per toggleErm() gesetzt). */
.btn-erm-toggle { padding: 0.35rem 0.7rem; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; font-size: 0.8rem; cursor: pointer; font-family: var(--sans); }
.btn-erm-toggle:hover { background: rgba(79,142,247,0.08); }
.btn-erm-toggle.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-erm-toggle.active:hover { background: var(--accent); opacity: 0.92; }

/* Durchgangs-Toggle im Header (Phase 2). Zeigt DG 1 und DG 2 als zwei kleine
   Buttons, der aktive ist akzent-blau hinterlegt. Sichtbar nur wenn
   klasse_freigabe.max_durchgang >= 2 fuer die Klasse des Schuelers. */
.hdr-dg-toggle { display: inline-flex; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px; gap: 0; height: 28px; }
.hdr-dg-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--muted); border: none; border-radius: 999px; padding: 0 0.7rem; font-size: 0.78rem; font-weight: 600; line-height: 1; cursor: pointer; height: 22px; font-family: var(--sans); transition: background 0.12s, color 0.12s; }
.hdr-dg-btn:hover { color: var(--text); }
.hdr-dg-btn.active { background: var(--dg-active); color: #ffffff; cursor: default; }
.hdr-dg-btn.active:hover { color: #ffffff; }

/* DG-Spalte im Admin-Fortschritt (Phase 2): zeigt aktueller_durchgang des
   Schuelers, unabhaengig vom Tab-Filter. „—" gedaempft wenn die Klasse DG 2
   noch nicht freigeschaltet hat, „2" magenta hervorgehoben wenn der Schueler
   schon umgeschaltet hat. */
.dg-cell-disabled { color: var(--muted); }
.dg-cell-active   { color: var(--dg2-color); font-weight: 700; }

/* Schmaler Indikator-Balken oben am Viewport: zeigt die aktive DG-Farbe
   immer an, unabhaengig vom Toggle-Status. 3 px hoch, fixiert auf der
   Spitze damit auch bei langen Seiten der DG sichtbar bleibt. */
.dg-indikator-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--dg-active); z-index: 1000; pointer-events: none; }

/* Punkte-Badge im Header: in DG-Farbe einfaerben, ueberschreibt den alten
   Gruenton. DG 1 = Plattform-Akzent (Petrol/Blau), DG 2 = Magenta. */
.hdr-btn-punkte                       { color: var(--dg-active); border-color: var(--dg-active); background: var(--dg-active-soft); }
.hdr-btn-punkte:hover                 { color: var(--dg-active); border-color: var(--dg-active); background: var(--dg-active-soft); opacity: 0.85; }
body:not(.light) .hdr-btn-punkte      { color: var(--dg-active); border-color: var(--dg-active); background: var(--dg-active-soft); }
body:not(.light) .hdr-btn-punkte:hover{ color: var(--dg-active); border-color: var(--dg-active); background: var(--dg-active-soft); opacity: 0.85; }

/* Modal-Header „Stand: Durchgang N" — Wert farbig in DG-Farbe. */
.fp-dg-kontext.fp-dg-1 strong { color: var(--dg1-color); }
.fp-dg-kontext.fp-dg-2 strong { color: var(--dg2-color); }

/* Admin-Modal mit eigenem DG-Toggle: das Overlay-Element bekommt eine dg-N-
   Klasse, die --dg-active im Modal-Scope umschaltet. So sind die Pillen und
   der Titel-Akzent immer in der gerade gewaehlten Modal-DG-Farbe, auch wenn
   die Body-Klasse anders ist (z.B. Tab-DG vs. Modal-DG). */
.fp-overlay.dg-1 { --dg-active: var(--dg1-color); --dg-active-soft: var(--dg1-color-soft); }
.fp-overlay.dg-2 { --dg-active: var(--dg2-color); --dg-active-soft: var(--dg2-color-soft); }

/* Editor */
.editor-area { flex: 1; display: flex; flex-direction: column; overflow: visible; min-height: 0; }
.editor-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 16px; background: var(--surface); flex-shrink: 0; }
.editor-label { font-size: 11px; font-family: var(--mono); color: var(--muted); }
.btn { padding: 6px 14px; border-radius: 5px; border: none; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 500; transition: all .15s; display: flex; align-items: center; gap: 6px; }
.btn-run { background: var(--accent); color: #fff; }
.btn-run:hover { background: #6fa3ff; }
.btn-hint { background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 6px 14px; border-radius: 5px; font-size: 13px; cursor: pointer; font-family: var(--sans); transition: all .15s; }
.btn-hint:disabled { opacity: 0.35; cursor: default; }
.btn-hint:not(:disabled):not(.hint-used) { border-color: var(--bereich-accent); color: var(--bereich-accent); box-shadow: 0 0 0 1px var(--bereich-accent); }
.btn-hint.hint-used { border-color: var(--accent2); color: var(--accent2); opacity: 0.7; }
.btn-hint.hint-used:hover { opacity: 1; background: rgba(45,212,160,.1); }
/* Reset-Button (nur in DML-Block 12 sichtbar): warnender Akzent */
.btn-reset { background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 6px 14px; border-radius: 5px; font-size: 13px; cursor: pointer; font-family: var(--sans); transition: all .15s; }
.btn-reset:hover { border-color: #f7c948; color: #f7c948; background: rgba(247,201,72,.08); }
/* Attention-State: nach falschem DML-Versuch pulsiert der Reset-Button im Warnton */
.btn-reset.attention { border-color: #f7c948; color: #f7c948; background: rgba(247,201,72,.12); animation: btn-reset-pulse 1.6s ease-in-out infinite; }
@keyframes btn-reset-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247,201,72,.0); }
  50%      { box-shadow: 0 0 0 4px rgba(247,201,72,.35); }
}
.btn-loesung { background: transparent; color: #f7c948; border: 1px solid #f7c948; padding: 6px 14px; border-radius: 5px; font-size: 13px; cursor: pointer; font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', var(--sans); transition: all .15s; }
.btn-loesung:not(:disabled) { box-shadow: 0 0 0 1px #f7c948; }
.btn-loesung:hover:not(:disabled) { background: rgba(247,201,72,.15); }
.btn-loesung:disabled { opacity: 0.35; cursor: default; }

.attempts-counter { font-size: 13px; color: var(--muted); padding: 6px 14px; border-radius: 5px; background: var(--bg); white-space: nowrap; border: 1px solid var(--border); font-family: var(--sans); }
.attempts-counter.has-attempts { color: var(--accent); }
.attempts-counter.solved { color: var(--accent2); font-weight: 600; }

/* CodeMirror 6 — Editor-Styling und Syntax-Farben sind via EditorView.theme() / HighlightStyle in app.js definiert */

/* Editor + Feedback nebeneinander */
.editor-with-notes { display: flex; align-items: stretch; overflow: visible; flex: 0 0 auto; }
.editor-wrap { flex: 1; display: flex; flex-direction: column; overflow: visible; min-height: 0; }
.notes-wrap { flex: 0 0 320px; display: flex; flex-direction: column; overflow: hidden; border-left: 1px solid var(--border); }
.notes-wrap .hint-box { margin: 0; min-height: 60px; overflow-y: auto; border-radius: 0; border-left: 3px solid; border-top: none; border-bottom: none; border-right: none; }

/* Feedback */
.hint-box { padding: 12px 14px; font-size: 0.88rem; line-height: 1.6; border-left: 3px solid; }
.hint-box.info     { background: rgba(79,142,247,.08);  border-color: var(--accent);  color: #a8c4ff; }
.hint-box.correct  { background: rgba(45,212,160,.08);  border-color: var(--accent2); color: #7eedd0; }
.hint-box.wrong    { background: rgba(247,111,111,.08); border-color: var(--danger);  color: #ffaaaa; }
.hint-box.solution { background: rgba(247,201,72,.08);  border-color: #f7c948;        color: #f7e29a; }
.hidden { display: none; }

/* Ergebnis */
.result-area { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.result-bar { display: block; padding: 8px 16px; font-size: 13px; font-family: var(--mono); border-bottom: 1px solid var(--border); background: var(--surface); flex-shrink: 0; white-space: normal; word-break: break-word; line-height: 1.5; }
.result-bar.success { color: var(--accent2); }
.result-bar.error   { color: var(--danger); }
.result-bar .mysql-original { color: var(--muted); font-size: 1em; display: block; width: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.result-bar.empty   { color: var(--muted); }
.result-table-wrap  { overflow: auto; flex: 1; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--mono); font-size: 12px; }
thead tr { background: var(--surface); border-bottom: 2px solid var(--border); }
.result-table-wrap th { text-align: left; padding: 8px 16px; color: var(--accent); font-weight: 600; font-size: 11px; letter-spacing: .06em; white-space: nowrap; position: sticky; top: 0; z-index: 1; background: var(--surface); }
td { padding: 7px 16px; border-bottom: 1px solid var(--border); color: var(--text); }
tbody tr:hover { background: var(--hover); }

/* Rechte Notizen-Sidebar */
.sidebar-right { width: 220px; flex-shrink: 0; border-left: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; }
.sidebar-right.hidden { display: none; }
.sidebar-right-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 0.82rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.notizen-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; }
.notizen-close:hover { color: var(--text); }
#notes-area { flex: 1; resize: none; background: var(--surface); color: var(--text); border: none; padding: 0.7rem; font-family: var(--mono); font-size: 0.8rem; line-height: 1.5; }
#notes-area:focus { outline: none; }

/* Wizard Modal */
.modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.6); display: flex; align-items: flex-start; justify-content: center; padding-top: 20px; }
.modal-overlay.hidden { display: none; }
.modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; max-width: 520px; width: 90%; position: relative; }
.wizard-close { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; color: var(--muted); font-size: 0.95rem; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.wizard-close:hover { color: var(--text); background: var(--hover); }
.wizard-step { display: none; }
.wizard-step.active { display: block; }
.wizard-icon { font-size: 2.2rem; margin-bottom: 0.7rem; }
.modal-box h2 { margin: 0 0 0.9rem; color: var(--accent); font-size: 1.15rem; padding-right: 2rem; }
.wizard-text { color: var(--muted); font-size: 0.88rem; line-height: 1.75; }
.wizard-text p { margin-bottom: 0.55rem; }
.wizard-text p:last-child { margin-bottom: 0; }
.wizard-list { list-style: none; padding: 0; margin: 0.4rem 0; display: flex; flex-direction: column; gap: 0.3rem; }
.wizard-list li { font-size: 0.88rem; color: var(--muted); line-height: 1.6; padding-left: 1.2rem; position: relative; }
.wizard-list li::before { content: '→'; color: var(--accent); position: absolute; left: 0; }
.wizard-footer { margin-top: 1.6rem; }
.wizard-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 1.1rem; }
.wizard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background .2s; }
.wizard-dot.active { background: var(--accent); }
.wizard-nav { display: flex; gap: 0.6rem; }
#wizard-back { background: none; border: 1px solid var(--border); color: var(--muted); border-radius: 5px; padding: 0.45rem 1rem; font-size: 0.85rem; cursor: pointer; font-family: var(--sans); }
#wizard-back:hover { border-color: var(--accent); color: var(--accent); }
#wizard-next { flex: 1; justify-content: center; }
kbd { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0.1rem 0.4rem; font-family: var(--mono); font-size: 0.78rem; }

/* Hilfe-Übersichtsseite */
.hilfe-box { max-width: 560px; max-height: 95vh; margin: 2vh auto; overflow-y: auto; }
.hilfe-box h2 { margin: 0 0 1.2rem; color: var(--accent); font-size: 1.15rem; padding-right: 2rem; }
.hilfe-content { display: flex; flex-direction: column; gap: 0.7rem; }
.hilfe-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.6rem 0.7rem; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); }
.hilfe-icon { font-size: 1.3rem; flex-shrink: 0; width: 1.6rem; text-align: center; }
.hilfe-item div { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }
.hilfe-item strong { color: var(--text); }

.tipp-spacer { flex: 1; }

/* ── Header-Breakpoints: 3-Stufen-Kaskade (1350 → 1150 → 1060) ───────────── */

/* Stufe 1: leicht komprimiert — Punkte-Wort weg, Quiz icon-only.
   Divider-Margins bleiben über Base-clamp(6px,2vw,36px) responsiv → Gruppen wachsen auseinander. */
@media (max-width: 1480px) {
  .hdr-btn-punkte .hdr-lbl { display: none; }
  .hdr-btn-quiz .hdr-lbl { display: none; }
  .hdr-btn-quiz .quiz-badge { display: none; }
}

/* Stufe 2: mittel komprimiert — Sidebar schmaler */
@media (max-width: 1150px) {
  :root { --sidebar-w: 220px; }
  .header-left { padding: 0 16px; }
}

/* Stufe 2a: sanft komprimieren 1350px→1200px (clamp: 12px bei 1350, 5px bei 1200) */
@media (max-width: 1350px) {
  .hdr-divider { margin: 0 clamp(5px, -51px + 4.667vw, 12px); }
  .header-right { gap: 5px; padding: 0 12px; }
}

/* Stufe 2b: Divider-Gaps + Header-Padding komprimieren, Task-Badge weg (spart ~50px; nötig wenn Video-Button sichtbar) */
@media (max-width: 1200px) {
  .hdr-divider { margin: 0 5px; }
  .header-right { gap: 4px; padding: 0 10px; }
  :root { --sidebar-w: 260px; }
  .task-badge { display: none; }
  .task-aufgabe { font-size: 0.92rem; }
  .task-desc { font-size: 0.88rem; line-height: 1.25;}
}

/* Stufe 3: icon-only — alle Labels weg, Touch-Targets, Divider füllen freien Raum */
@media (max-width: 1151px) {
  .hdr-lbl { display: none; }
  .btn-nav { min-height: 44px; }
  .hdr-btn { min-height: 44px; }
  .hdr-avatar-wrap { padding-left: 10px; }  /* NEU */
  .hdr-divider { flex: 1; margin: 0; background: transparent; position: relative; }
  .hdr-divider::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1px; height: 20px; background: var(--border); }
}

/* Stufe 4: sehr schmal — Divider ohne Margins (Strich bleibt) */
@media (max-width: 900px) {
  .hdr-divider { margin: 0; }
}

/* Stufe 5: ultra-schmal — Joker/Punkte-Zahl weg, Lösungs-Button ohne Icon.
   Untergrenze des unterstützten Bereichs: 800px (iPad Mini Landscape, kleine Tablets quer).
   Darunter (≤755px ≈ iPad Mini Portrait) bricht das Layout: Lösungs-Button rutscht aus
   der Toolbar, Header-Buttons überlagern sich. Bewusst NICHT gefixt — die App ist für
   Laptop/Desktop und iPad Pro Landscape (≥1024px) gedacht; SQL-Eingabe auf Geräten mit
   <800px CSS-Breite ist kein realistisches Nutzungsszenario. Falls echtes Schüler-Feedback
   das ändert, wären die billigsten Hebel: Tipps icon-only + .header-left auf 160px. */
@media (max-width: 800px) {
  .joker-zahl, .punkte-zahl { display: none; }
  .btn-loesung .btn-icon { display: none; }
}

/* ── Notes-Backdrop (nur auf Tablet sichtbar) ───────────────────────────── */
.notes-backdrop { display: none; }

/* ── Responsive: Tablet Portrait / iPad Mini+ (< 1024px) ─────────────────── */
@media (max-width: 1023px) {

  /* Bug 2: Zoom/Viewport-Fix für iOS/iPadOS */
  body { height: 100dvh; }


  /* Rechte Notizen-Sidebar als Overlay */
  .sidebar-right {
    position: fixed;
    top: 52px;
    right: 0;
    bottom: 0;
    z-index: 200;
    width: 280px;
    box-shadow: -4px 0 24px rgba(0,0,0,0.35);
  }

  /* Backdrop hinter der Notizen-Sidebar */
  .notes-backdrop {
    display: block;
    position: fixed;
    top: 52px;
    inset-inline: 0;
    bottom: 0;
    z-index: 199;
    background: rgba(0,0,0,0.4);
  }
  .notes-backdrop.hidden { display: none; }

  /* Referenz-Panel auf iPad */
  .referenz-panel { flex: 0 0 360px; }
  .referenz-content { -webkit-overflow-scrolling: touch; }

  /* Header: Abmelden ausblenden (Username-Element existiert nicht mehr) */
  .logout-link { display: none; }

  /* Touch-Targets: Mindesthöhe 44px */
  .btn-help  { min-height: 44px; }
  .btn       { min-height: 44px; }
  .btn-hint  { min-height: 44px; }
  .btn-loesung { min-height: 44px; }
  .task-item { min-height: 44px; }
  .block-header { min-height: 44px; }

  /* Editor-Toolbar: Spacer weg, wrap als Sicherheitsnetz */
  .tipp-spacer { display: none; }
  .editor-toolbar { flex-wrap: wrap; }

  /* Zoom-Fix: Verhindert Auto-Zoom beim Antippen des Editors (iOS/iPadOS) */
  .cm-editor .cm-content { font-size: 1rem; }
}

/* Theorieblock: scrollbar auf kleinen/mittleren Bildschirmen (Höhe) */
@media (max-height: 768px) {
  .theory-content { max-height: 20vh; overflow-y: auto; }
}

@media (max-height: 600px) {
  .theory-content { max-height: 15vh; overflow-y: auto; }
}

/* ── Fortschritt-Modal (fp- prefix) ─────────────────────────────────────── */
.fp-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; backdrop-filter: blur(3px);
}
.fp-modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  width: min(600px, 94vw); max-height: 94vh; overflow-y: auto; padding: 22px;
  position: relative;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  animation: fpSlideUp .2s ease;
}
@keyframes fpSlideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.fp-header { display: flex; align-items: center; margin-bottom: 15px; }
.fp-close {
  position: absolute; top: 14px; right: 14px;
  background: var(--border); border: none; color: var(--muted);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  font-size: 1rem; display: flex; align-items: center; justify-content: center;
}
.fp-close:hover { background: var(--danger); color: white; }
.fp-title { font-size: 1rem; font-weight: 700; margin-bottom: 16px; }
.fp-summary { display: flex; gap: 8px; margin-bottom: 20px; }
.fp-item {
  flex: 1; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; text-align: center;
}
.fp-item .fp-val { font-size: 1.3rem; font-weight: 700; line-height: 1; }
.fp-item .fp-lbl { font-size: .68rem; color: var(--muted); margin-top: 4px; }
.fp-item.s-blue  .fp-val { color: var(--accent); }
.fp-item.s-green .fp-val { color: var(--accent2); }
.fp-item.s-muted .fp-val { color: var(--muted); }
.fp-item.s-gold  .fp-val { color: #f5c842; }
.fp-item.s-dim   .fp-val { color: var(--muted); }
.fp-progress-section { margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.fp-progress-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.fp-progress-label { font-size: .82rem; font-weight: 600; }
.fp-progress-count { font-size: .82rem; color: var(--muted); }

/* Zwei Balken untereinander: Label linksbündig oben, Balken volle Breite darunter */
.fp-bar-row { display: flex; flex-direction: column; gap: 4px; }
.fp-bar-label {
  font-size: .82rem; font-weight: 700; color: var(--muted);
  letter-spacing: .02em; text-align: left;
}
.fp-bar-outer {
  width: 100%; height: 24px; background: var(--bg); border-radius: 6px;
  border: 1px solid var(--border); overflow: hidden; position: relative;
}
.fp-bar-inner {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%);
  position: relative; min-width: 0;
  transform: translateZ(0); /* Firefox-Compositing-Bug: Balken erscheint sonst nicht bei bestimmten Pixel-Breiten */
}
.fp-bar-quiz {
  background: linear-gradient(90deg, #f5c842 0%, #e0913a 100%);
}
.fp-bar-text {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  font-size: .75rem; font-weight: 700; color: var(--fg);
  text-align: center; white-space: nowrap;
  mix-blend-mode: difference; pointer-events: none;
  filter: invert(1) grayscale(1) contrast(9);
}
.fp-pct {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: .72rem; font-weight: 700; color: white; white-space: nowrap;
}
.fp-legend {
  display: flex; gap: 20px; margin-bottom: 14px; justify-content: center; flex-wrap: nowrap;
  padding: 8px 12px; background: var(--bg); border-radius: 7px; border: 1px solid var(--border);
}
.fp-legend-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .65rem; color: var(--muted); text-align: center; min-width: 70px; }
.fp-sym { font-size: .82rem; font-weight: 700; }
.fp-sym.l-strike        { color: var(--accent2); }
.fp-sym.l-high          { color: #5de0c8; }
.fp-sym.l-abgeschlossen { color: #5db0e0; }
.fp-sym.l-pot           { color: #e08a3a; }
.fp-blocks-label { font-size: .72rem; color: var(--muted); margin-bottom: 8px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.fp-blocks { display: flex; flex-direction: column; gap: 5px; }
.fp-block-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
  padding: 9px 12px; display: grid;
  grid-template-columns: 22px 1fr 110px 100px; align-items: center; gap: 10px;
}
.fp-block-card.strike       { border-color: rgba(38,184,138,.4); }
.fp-block-card.high         { border-color: rgba(93,224,200,.4); }
.fp-block-card.abgeschlossen{ border-color: rgba(93,176,224,.4); }
.fp-block-card.potenzial    { border-color: rgba(224,138,58,.4); }
.fp-block-card.loesungen { opacity: .5; }
.fp-block-card.locked    { opacity: .3; }
.fp-block-num   { font-size: .7rem; color: var(--muted); text-align: center; }
.fp-block-title { font-size: .84rem; font-weight: 600; }
.fp-pts-row { display: flex; align-items: baseline; gap: 3px; }
.fp-pts-val { font-size: .9rem; font-weight: 700; }
.fp-pts-max { font-size: .72rem; color: var(--muted); }
.c-strike    { color: var(--accent2); }
.c-pts-full  { color: #22C55E; }
.c-pts-low   { color: var(--muted); }
.c-pts-zero  { color: #9CA3AF; }
.c-high      { color: #5de0c8; }
.c-potenzial { color: #e08a3a; }
.fp-bar-wrap  { display: flex; align-items: center; gap: 6px; }
.fp-mini-bar  { flex: 1; height: 4px; background: var(--border); border-radius: 2px; min-width: 40px; }
.fp-mini-fill { height: 100%; border-radius: 2px; background: var(--accent); }
.fp-tasks     { font-size: .72rem; color: var(--muted); white-space: nowrap; }
.fp-block-sym { font-size: .95rem; text-align: center; font-weight: 700; }
.fp-block-sym.sym-strike       { color: var(--accent2); }
.fp-block-sym.sym-high         { color: #5de0c8; }
.fp-block-sym.sym-abgeschlossen{ color: #5db0e0; }
.fp-block-sym.sym-potenzial    { color: #e08a3a; }
.fp-block-sym.sym-loesungen    { color: #9CA3AF; }
.fp-sym.l-loes                 { color: #9CA3AF; }
.fp-badge {
  font-size: .65rem; padding: 3px 6px; border-radius: 20px; font-weight: 600;
  white-space: nowrap; text-align: center; width: 100%; display: inline-block; box-sizing: border-box;
}
.fp-badge.b-progress { background: rgba(79,142,247,.1); color: var(--accent); border: 1px solid rgba(79,142,247,.25); }
.fp-badge.b-locked   { background: var(--border); color: var(--muted); }

/* ── SQL-Referenz-Panel ─────────────────────────────────────────────────── */
.referenz-panel { width: 480px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; min-height: 0; }
.referenz-panel.hidden { display: none; }
.referenz-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; font-size: 0.82rem; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.referenz-content { flex: 1; overflow-y: auto; min-height: 0; }
.referenz-abschnitt { border-bottom: 1px solid var(--border); }
.referenz-abschnitt-header { padding: 8px 12px; font-size: 0.78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; touch-action: manipulation; }
.referenz-abschnitt-header:hover { color: var(--text); background: var(--hover); }
.referenz-arrow { display: inline-block; transition: transform 0.18s ease; font-size: 0.8rem; }
.referenz-abschnitt.collapsed .referenz-arrow { transform: rotate(-90deg); }
.referenz-abschnitt-body { overflow: hidden; }
.referenz-abschnitt.collapsed .referenz-abschnitt-body { display: none !important; }
.referenz-table { width: 100%; border-collapse: collapse; font-size: 0.72rem; font-family: var(--mono); }
.referenz-table th { padding: 5px 8px; color: var(--accent); font-weight: 600; font-size: 0.78rem; letter-spacing: .06em; text-align: left; background: var(--surface); border-bottom: 1px solid var(--border); white-space: nowrap; position: static; }
.referenz-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; word-break: break-word; }
.referenz-table td:first-child { white-space: nowrap; }
.referenz-table tbody tr:hover { background: var(--hover); }
.referenz-abschnitt.referenz-locked { opacity: 0.4; cursor: not-allowed; }
.referenz-abschnitt.referenz-locked .referenz-abschnitt-header { cursor: not-allowed; pointer-events: none; }
.referenz-abschnitt.referenz-locked .referenz-abschnitt-body { display: none; }
.referenz-abschnitt.referenz-locked::after { content: "wird in Block " attr(data-ab-block) " eingeführt"; display: block; padding: 3px 12px 8px; font-size: 0.68rem; color: var(--muted); font-style: italic; font-family: var(--sans); }

/* ── Task-Text-Klassen ───────────────────────────────────────────────────── */
.task-title   { display: block; margin-bottom: 6px; }
.task-sql     { display: inline-block; margin-bottom: 20px; color: var(--accent2); font-family: var(--mono); font-size: 0.85rem; border-left: 2px solid var(--accent2); padding: 0.4rem 0.8rem; }
.task-hint    { color: inherit; font-size: inherit; font-style: normal; }
.task-aufgabe { color: #e0913a; font-weight: 500; font-size: 1.02rem; border-left: 3px solid var(--accent); padding-left: 8px; display: block; margin-top: 10px; margin-bottom: 4px; }
.db-term { font-family: var(--mono); color: var(--text); font-weight: 600; font-size: 0.9em; }
.db-table { font-family: var(--mono); color: var(--accent);  font-size: 0.9em; }
.db-attr  { font-family: var(--mono); color: var(--accent2); font-size: 0.9em; }
.db-value { font-family: var(--mono); color: #c084fc;         font-size: 0.9em; }
body.light .db-value { color: #7c3aed; }

/* ── Klausur-Modus ────────────────────────────────────────────────────────── */
.klausur-body { overflow: hidden; }

/* Header */
.klausur-header { display:flex; align-items:center; justify-content:space-between; height:52px; background:var(--surface); border-bottom:1px solid var(--border); padding:0 20px; flex-shrink:0; }
.klausur-header-left { display:flex; align-items:center; gap:12px; }
.klausur-header-right { display:flex; align-items:center; gap:12px; }
.klausur-badge { font-family:var(--mono); font-size:0.72rem; background:rgba(247,111,111,.15); color:var(--danger); border:1px solid rgba(247,111,111,.3); padding:2px 8px; border-radius:3px; letter-spacing:.06em; }
.klausur-titel { font-size:0.88rem; color:var(--muted); }
.klausur-user { font-size:0.83rem; color:var(--muted); }
.klausur-timer { font-family:var(--mono); font-size:1.05rem; font-weight:600; color:var(--text); background:rgba(79,142,247,.1); border:1px solid rgba(79,142,247,.25); padding:4px 14px; border-radius:6px; min-width:70px; text-align:center; }
.klausur-timer.klausur-timer-warn { color:#F59E0B; border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.08); }
.klausur-timer.klausur-timer-expired { color:var(--danger); border-color:rgba(247,111,111,.4); background:rgba(247,111,111,.08); }

/* Workspace */
.klausur-workspace { display:flex; flex:1; overflow:hidden; height:calc(100vh - 52px); }

/* Sidebar */
.klausur-sidebar { width:260px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; display:flex; flex-direction:column; }
.klausur-sidebar-section { border-bottom:1px solid var(--border); padding:0; }
.klausur-sidebar-title { font-size:0.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; padding:10px 16px; }
.klausur-toggle-title { cursor:pointer; user-select:none; }
.klausur-toggle-title:hover { color:var(--text); }

/* Task list */
.klausur-task-list { padding:4px 0; }
.klausur-task-item { display:flex; align-items:center; gap:8px; padding:7px 16px; cursor:pointer; font-size:0.85rem; }
.klausur-task-item:hover { background:var(--hover); }
.klausur-task-item.active { background:rgba(79,142,247,.12); border-left:3px solid var(--accent); padding-left:13px; }
.klausur-task-item.marked-orange { border-left:3px solid #f59e0b; padding-left:13px; }
.klausur-task-item.marked-gruen  { border-left:3px solid #22c55e; padding-left:13px; }
.klausur-task-item.marked-orange.marked-gruen { border-left:3px solid #f59e0b; box-shadow:inset 3px 0 0 #22c55e; padding-left:13px; }
.klausur-task-num { font-family:var(--mono); font-size:0.75rem; color:var(--muted); min-width:16px; }
.klausur-task-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.klausur-task-status { font-size:0.8rem; min-width:14px; text-align:center; }
.status-ok { color:var(--accent2); }
.status-wrong { color:var(--danger); }

/* Schema in sidebar */
.klausur-schema { padding:0 12px 10px; }
.klausur-schema .er-table { margin-bottom:0; }

/* SQL ref */
.klausur-sqlref { padding:6px 12px 10px; }
.sqlref-entry { font-family:var(--mono); font-size:0.77rem; color:var(--text); padding:2px 0; }
.sqlref-entry code { color:var(--accent); }

/* Notepad */
.klausur-notiz { width:100%; min-height:100px; background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:var(--mono); font-size:0.78rem; padding:6px 8px; resize:vertical; border-radius:4px; box-sizing:border-box; }

/* Main area */
.klausur-main { flex:1; overflow-y:auto; display:flex; flex-direction:column; padding:0; }
.klausur-task-desc { background:rgba(79,142,247,.07); border-bottom:1px solid var(--border); padding:16px 20px; font-size:0.9rem; flex-shrink:0; }
.klausur-task-heading { font-weight:600; color:var(--accent); margin-bottom:8px; font-size:0.95rem; }
/* Aufgaben-Text wie im Lernblock (.task-aufgabe): orange/braun, mit Strich vorne. */
.klausur-task-body { color:#e0913a; font-weight:500; font-size:1.02rem; border-left:3px solid var(--accent); padding-left:10px; line-height:1.5; white-space:pre-wrap; }
body.light .klausur-task-body { color:#b45309; }
.klausur-no-task { color:var(--muted); font-style:italic; }

/* Editor */
.klausur-editor-wrap { padding:12px 20px 8px; flex-shrink:0; }
.klausur-editor-actions { display:flex; align-items:center; gap:10px; margin-top:8px; }
.klausur-spinner { color:var(--muted); font-size:0.85rem; }

/* Feedback */
.klausur-fb-correct { background:rgba(45,212,160,.1); border:1px solid rgba(45,212,160,.3); color:var(--accent2); }
.klausur-fb-wrong { background:rgba(247,111,111,.1); border:1px solid rgba(247,111,111,.3); color:var(--danger); }
.klausur-fb-error { background:rgba(247,111,111,.1); border:1px solid rgba(247,111,111,.3); color:var(--danger); }

/* Result table */
.klausur-result-wrap { margin:0 20px 12px; flex-shrink:0; }
.klausur-result-info { font-size:0.78rem; color:var(--muted); margin-bottom:4px; }
.klausur-result-table-wrap { overflow-x:auto; max-height:260px; overflow-y:auto; border:1px solid var(--border); border-radius:6px; }
.klausur-result-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.klausur-result-table th { background:var(--surface); padding:6px 10px; text-align:left; font-size:0.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border); position:sticky; top:0; }
.klausur-result-table td { padding:5px 10px; border-bottom:1px solid var(--border); font-family:var(--mono); font-size:0.8rem; }
.klausur-result-table tbody tr:last-child td { border-bottom:none; }

/* Submit bar */
.klausur-submit-bar { padding:16px 20px; border-top:1px solid var(--border); margin-top:auto; display:flex; justify-content:flex-end; background:var(--surface); flex-shrink:0; }

/* Preview-Mode (klausur.php?preview=ID): VORSCHAU-Banner sticky am Top nimmt
   etwa 42px Hoehe weg. Die Workspace berechnet ihre Hoehe sonst nur ab dem
   Header, dadurch wuerde der Submit-Bar aus dem Viewport rutschen. */
body.kl-preview-mode .klausur-workspace { height: calc(100vh - 94px); }

/* SQL-Funktionen (ROUND, LENGTH, YEAR, MONTH, DAY, NOW, CONCAT, UPPER, LOWER,
   TRIM, ABS, FLOOR, CEIL, CEILING) im Klausur-Editor blau hervorheben.
   lang-sql tagt Built-in-Funktionen je nach Dialekt unterschiedlich, daher
   wird das per MatchDecorator gesetzt (siehe sqlFnPlugin in klausur.php). */
.cm-sql-fn { color: #7dd3fc; font-weight: 600; }
body.light .cm-sql-fn { color: #1e40af; }

/* Buttons */
.klausur-btn { background:none; border:1px solid var(--border); border-radius:6px; color:var(--text); padding:6px 18px; font-family:var(--sans); font-size:0.88rem; cursor:pointer; }
.klausur-btn:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.klausur-btn:disabled { opacity:.4; cursor:default; }
.klausur-btn-run { border-color:var(--accent); color:var(--accent); }
.klausur-btn-run:hover:not(:disabled) { background:rgba(79,142,247,.1); }
.klausur-btn-submit { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.klausur-btn-submit:hover:not(:disabled) { opacity:.88; }

/* Overlay / Dialog */
.klausur-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:1000; }
.klausur-dialog { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:2rem; max-width:420px; width:90%; }
.klausur-dialog-title { font-size:1.05rem; font-weight:600; margin-bottom:0.6rem; }
.klausur-dialog-text { color:var(--muted); font-size:0.9rem; margin-bottom:1.2rem; }
.klausur-dialog-actions { display:flex; gap:0.8rem; justify-content:flex-end; }

/* Done / Confirmation */
.klausur-done-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); }
.klausur-done-box { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:2.5rem 2rem; max-width:420px; width:90%; text-align:center; }
.klausur-done-icon { font-size:2.5rem; color:var(--accent2); margin-bottom:0.8rem; }
.klausur-done-title { font-size:1.4rem; font-weight:600; margin-bottom:0.4rem; }
.klausur-done-sub { color:var(--muted); font-size:0.9rem; margin-bottom:1.2rem; }
.klausur-done-summary { display:flex; gap:1.5rem; justify-content:center; margin-bottom:1.2rem; }
.klausur-done-stat { display:flex; flex-direction:column; align-items:center; gap:4px; }
.klausur-done-val { font-size:1.5rem; font-weight:700; color:var(--accent); }
.klausur-done-lbl { font-size:0.75rem; color:var(--muted); }
.klausur-done-note { font-size:0.85rem; color:var(--muted); }

/* Admin Klausur tab */
.klausur-adm-block { border:1px solid var(--border); border-radius:8px; padding:1rem; margin-bottom:1rem; }
.klausur-adm-block-aktiv { border-color:var(--accent); background:rgba(79,142,247,.04); }
.klausur-adm-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:0.4rem; }
.klausur-adm-meta { font-size:0.8rem; color:var(--muted); margin-left:0.5rem; }
.klausur-adm-klassen { font-size:0.82rem; color:var(--muted); }
.klausur-badge-aktiv { font-size:0.68rem; font-weight:700; color:var(--accent2); background:rgba(45,212,160,.15); border:1px solid rgba(45,212,160,.3); padding:2px 7px; border-radius:3px; margin-left:8px; letter-spacing:.07em; }

/* Auswertung */
.klausur-auswertung-student { border:1px solid var(--border); border-radius:6px; margin-bottom:0.7rem; overflow:hidden; }
.klausur-auswertung-header { display:flex; align-items:center; gap:1rem; padding:8px 12px; background:var(--hover); cursor:pointer; }
.klausur-auswertung-header:hover { background:var(--hover); }
.klausur-auswertung-header span:first-child { font-weight:600; flex:1; }
.klausur-auswertung-body { padding:8px 12px; }
.klausur-auswertung-aufgabe { margin-bottom:0.8rem; }
.klausur-auswertung-atitel { display:flex; align-items:center; gap:1rem; margin-bottom:4px; font-size:0.87rem; font-weight:500; }
.klausur-auswertung-atitel span:first-child { flex:1; }
.klausur-auswertung-query { font-family:var(--mono); font-size:0.78rem; background:var(--bg); border:1px solid var(--border); padding:6px 10px; border-radius:4px; white-space:pre-wrap; }

/* ── Klausur: Panels oberhalb Editor ─────────────────────────────────────── */
.klausur-panels { display:flex; gap:0; border-bottom:1px solid var(--border); flex-shrink:0; }
.klausur-panel { flex:1; border-right:1px solid var(--border); }
.klausur-panel:last-child { border-right:none; }
.klausur-panel-header { font-size:0.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; padding:8px 16px; cursor:pointer; user-select:none; }
.klausur-panel-header:hover { color:var(--text); background:var(--hover); }
.klausur-sqlref-panel { padding:6px 16px 10px; display:grid; grid-template-columns:1fr 1fr; gap:1px 12px; }
/* Feedback: neutral style only (no green/red) */
.klausur-feedback { margin:0 20px 8px; padding:7px 14px; border-radius:6px; font-size:0.85rem; background:rgba(107,117,145,.1); border:1px solid rgba(107,117,145,.25); color:var(--muted); }

/* ── Monitoring Tab ──────────────────────────────────────────────────────── */
.mon-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.9rem; }
@media (max-width:900px) { .mon-grid { grid-template-columns:repeat(2,1fr); } }
.mon-tile { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:1rem 1.2rem; }
.mon-tile-label { font-size:0.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:0.35rem; }
.mon-tile-val { font-size:2rem; font-weight:700; color:var(--accent); line-height:1.1; }
.mon-tile-val.mon-val-warn   { color:#f59e0b; }
.mon-tile-val.mon-val-danger { color:var(--danger, #f76f6f); }
.mon-tile-sub { font-size:0.78rem; color:var(--muted); margin-top:0.3rem; }

/* ── Quiz-Modul ─────────────────────────────────────────────────────────── */

/* Layout */
.quiz-layout { display:flex; flex:1; overflow:hidden; min-height:0; height:calc(100vh - 52px); height:calc(100dvh - 52px); }
.quiz-sidebar { width:260px; flex-shrink:0; border-right:1px solid var(--border); background:var(--surface); padding:1rem 0; overflow-y:auto; }
.quiz-sidebar-title { font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:0 1rem; margin-bottom:0.8rem; }
.quiz-main { flex:1; overflow-y:auto; display:flex; flex-direction:column; align-items:center; padding:2rem 1.5rem; }

/* Block-Auswahl in Sidebar */
.quiz-block-item { display:flex; justify-content:space-between; align-items:center; padding:0.6rem 1rem; text-decoration:none; color:var(--text); border-left:3px solid transparent; transition:background .15s, border-color .15s; }
.quiz-block-item:hover { background:rgba(79,142,247,.06); }
.quiz-block-item.active { border-left-color:var(--accent); background:rgba(79,142,247,.1); }
.quiz-block-name { font-size:0.88rem; font-weight:500; }
.quiz-block-count { font-size:0.75rem; color:var(--muted); }
.quiz-block-count.quiz-low { color:var(--muted); }
.quiz-block-count.quiz-partial { color:#d97706; }
.quiz-block-count.quiz-done { color:var(--accent2); }
.quiz-check { font-weight:700; }
.quiz-check.quiz-done { color:var(--accent2); }
.quiz-check.quiz-partial { color:#d97706; }
.quiz-check.quiz-low { color:var(--muted); }
.quiz-empty { padding:1rem; font-size:0.85rem; color:var(--muted); line-height:1.5; }
.quiz-empty-main { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; color:var(--muted); font-size:0.95rem; text-align:center; }

/* Stepper */
.quiz-stepper { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; width:100%; max-width:600px; }
.quiz-progress { display:flex; gap:6px; flex:1; }
.quiz-dot { width:100%; height:4px; border-radius:2px; background:var(--border); transition:background .2s; }
.quiz-dot.active { background:var(--accent); }
.quiz-dot.answered { background:var(--accent2); }
.quiz-counter { font-size:0.8rem; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Frage-Karte */
.quiz-card { width:100%; max-width:600px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:1.8rem; }
.quiz-frage { font-size:1.05rem; font-weight:500; line-height:1.6; margin-bottom:1.4rem; color:var(--text); }
.quiz-frage .task-sql, .quiz-ergebnis-frage-text .task-sql, .quiz-option-text .task-sql, .quiz-ergebnis-option .task-sql { border-left:none; padding:0; margin:0; display:inline; }

/* Antwort-Optionen */
.quiz-optionen { display:flex; flex-direction:column; gap:0.5rem; }
.quiz-option { display:flex; align-items:flex-start; gap:0.75rem; padding:0.8rem 1rem; border-radius:8px; border:1px solid var(--border); background:transparent; cursor:pointer; text-align:left; font-family:var(--sans); font-size:0.92rem; color:var(--text); transition:border-color .15s, background .15s; width:100%; }
.quiz-option:hover { border-color:var(--accent); background:rgba(79,142,247,.05); }
.quiz-option.selected { border-color:var(--accent); background:rgba(79,142,247,.1); }
.quiz-option-radio { font-size:0.85rem; color:var(--accent); flex-shrink:0; margin-top:1px; }
.quiz-option-text { line-height:1.5; }

/* Navigation */
.quiz-nav { display:flex; justify-content:space-between; width:100%; max-width:600px; margin-top:1.2rem; }
.quiz-btn { padding:0.55rem 1.4rem; border-radius:8px; border:1px solid var(--border); font-family:var(--sans); font-size:0.88rem; font-weight:500; cursor:pointer; transition:background .15s, border-color .15s, opacity .15s; }
.quiz-btn:disabled { opacity:0.35; cursor:default; }
.quiz-btn-secondary { background:transparent; color:var(--text); }
.quiz-btn-secondary:hover:not(:disabled) { border-color:var(--accent); color:var(--accent); }
.quiz-btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.quiz-btn-primary:hover:not(:disabled) { background:#3b7ce6; border-color:#3b7ce6; }

/* Ergebnis-Ansicht */
.quiz-ergebnis { width:100%; max-width:600px; }
.quiz-ergebnis-header { text-align:center; margin-bottom:1.5rem; }
.quiz-ergebnis-score { font-size:1.6rem; font-weight:700; color:var(--text); margin-top:0.5rem; }
.quiz-ergebnis-label { font-size:1rem; color:var(--accent2); font-weight:600; margin-top:0.3rem; }

/* Fortschrittsbalken */
.quiz-ergebnis-bar-wrap { width:100%; height:8px; border-radius:4px; background:var(--border); margin-bottom:1.5rem; overflow:hidden; }
.quiz-ergebnis-bar { height:100%; border-radius:4px; background:var(--accent2); transition:width .6s ease; }

/* Einzelne Fragen im Ergebnis */
.quiz-ergebnis-detail { display:flex; flex-direction:column; gap:1rem; }
.quiz-ergebnis-frage { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1.2rem; }
.quiz-ergebnis-frage-nr { font-size:0.75rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:0.4rem; }
.quiz-ergebnis-frage-text { font-size:0.95rem; font-weight:500; line-height:1.5; margin-bottom:0.8rem; color:var(--text); }
.quiz-ergebnis-optionen { display:flex; flex-direction:column; gap:0.35rem; }
.quiz-ergebnis-option { padding:0.5rem 0.8rem; border-radius:6px; font-size:0.88rem; line-height:1.4; color:var(--text); }
.quiz-ergebnis-option.korrekt { background:rgba(38,184,138,.12); border-left:3px solid var(--accent2); color:var(--accent2); font-weight:500; }
.quiz-ergebnis-option.falsch { background:rgba(247,111,111,.1); border-left:3px solid var(--danger); color:var(--danger); }

/* Light-Mode Overrides */
body.light .quiz-option:hover { background:rgba(37,99,235,.05); }
body.light .quiz-option.selected { background:rgba(37,99,235,.08); border-color:var(--accent); }
body.light .quiz-btn-primary { background:var(--accent); }
body.light .quiz-btn-primary:hover:not(:disabled) { background:#1d4ed8; border-color:#1d4ed8; }
body.light .quiz-ergebnis-option.korrekt { background:rgba(22,154,70,.08); color:#065f46; }
body.light .quiz-ergebnis-option.falsch { background:rgba(220,38,38,.06); color:#991b1b; }

/* Quiz-Badge in der Aufgaben-Sidebar */
.quiz-badge { display:inline-flex; align-items:center; gap:3px; font-size:0.7rem; font-weight:600; padding:2px 6px; border-radius:4px; background:rgba(79,142,247,.12); color:var(--accent); border:1px solid rgba(79,142,247,.25); margin-left:auto; white-space:nowrap; }
.quiz-badge.quiz-badge-neu { background:rgba(38,184,138,.12); color:var(--accent2); border-color:rgba(38,184,138,.3); animation:quiz-pulse 2s ease-in-out 3; }
.quiz-badge-nr { display:none; }
/* quiz-badge-Umschaltung (text→nr) ist jetzt im zentralen Header-Breakpoint (Stufe 1, 1350px) */
@keyframes quiz-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

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

/* ── Light-Mode: Klausur / Monitoring / Fortschritt ────────────────────── */
body.light .fp-sym.l-high          { color: #0d9488; }
body.light .fp-sym.l-abgeschlossen { color: #2563eb; }
body.light .fp-block-sym.sym-high          { color: #0d9488; }
body.light .fp-block-sym.sym-abgeschlossen { color: #2563eb; }
body.light .c-high { color: #0d9488; }
body.light .theorie-tbl .col-pk { color: #c2410c; }
body.light .btn-hint:disabled { opacity: 0.55; }
body.light .btn-loesung:disabled { opacity: 0.55; }

/* Joker-Hinweis im Tipp-Panel */
.joker-hint-label { display: block; margin-top: 10px; color: #f5c842; font-size: 0.85em; font-weight: 600; }
body.light .joker-hint-label { color: #854F0B; }
.joker-hint-label.penalty { color: #e07b7b; }

/* KI-Tipp im Tipp-Bereich (DG-2 Magenta) */
.hint-box.ki-tipp { background: var(--dg2-color-soft); border-color: var(--dg2-color); color: #e4b8ff; }
body.light .hint-box.ki-tipp { background: rgba(214,51,197,0.07); color: #a21caf; }
.hint-box.ki-tipp code { background: rgba(214,51,197,0.18); padding: 0.1em 0.35em; border-radius: 3px; font-family: var(--mono); font-size: 0.9em; }
body.light .joker-hint-label.penalty { color: #991b1b; }