/* =============================================================
   NLL — Haupt-Stylesheet
   Phase 1.54: Aus index.php ausgelagert (war 7.7k Zeilen Inline-CSS).
   Wird nun vom Browser gecacht (Cache-Buster via filemtime).
   Bei Bedarf in mehrere Files splitten.
   ============================================================= */

:root {
  /* NLL-Designsprache "Klar" — hell (Standard) */
  --bg: #fafbfc;
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --text: #101319;
  --text-muted: #6b7382;
  --text-soft: #98a0ad;
  --accent: #1f49ff;
  --accent-dark: #143bd6;
  --accent-soft: #eef1ff;
  --accent-bg: #e2e8ff;
  --border: #e6e8ee;
  --border-strong: #d4d8e0;
  --header-bg: rgba(255,255,255,0.82);    /* Klar: dezent weiße, leicht durchscheinende Kopfleiste */
  --panel-bg: #ffffff;                    /* Klar: weiße Karten mit weichem Schatten */
  --red: #b73e3a;
  --red-soft: #fbe8e7;
  --red-bg: #fdf3f3;
  --amber: #c78a00;
  --amber-soft: #fbf0d4;
  --amber-bg: #fdf7e5;
  --blue: #2f6bb3;
  --blue-soft: #e3ecf8;
  --blue-bg: #eff4fb;
  --green: #4a7d3a;
  --green-soft: #e5f0df;
  --green-bg: #eff6eb;
  --purple: #7548a6;
  --purple-soft: #efe7f7;
  --purple-bg: #f5eff9;
  --shadow-sm: 0 1px 3px rgba(16,19,25,0.05), 0 7px 16px -8px rgba(16,19,25,0.16);
  --shadow-md: 0 2px 4px rgba(16,19,25,0.05), 0 12px 28px -10px rgba(16,19,25,0.18);
  --shadow-lg: 0 4px 8px rgba(16,19,25,0.06), 0 22px 48px -14px rgba(16,19,25,0.22);
  --radius: 10px;
  --radius-lg: 14px;
  /* Phase 1.56: Semantische Vars fuer 'Warnung'-Boxen (Achtung/Tipp/Hör-den-Text)
     und 'Info'-Akzent (Plattform-Zahlen, Lehrer-Modus-Toggles).
     Im Light-Mode 1:1 zu den alten Hex-Werten in JS-Files (kein optischer Bruch).
     Im Dark-Mode dunkel + heller Text. */
  --warn-bg: #fef3c7;
  --warn-text: #92400e;
  --warn-text-strong: #78350f;
  --warn-border: #f59e0b;
  --warn-border-soft: #fde68a;
  --warn-bg-soft: #fffbeb;
  --info-blue: #1e40af;
  --info-blue-text: #2563eb;
}

/* =============================================================
 * Phase 1.56 — DARK MODE
 * Aktiviert via <html data-theme="dark"> (gesetzt von app.php
 * EARLY-Init-Script aus localStorage 'nll_theme'). Variablen-
 * Overrides — wirkt automatisch auf alles was --bg/--text/etc.
 * verwendet (also fast die ganze Plattform). Sonderbereiche
 * (Chat-Themes, Probensystem) haben eigene Stile und sind nicht
 * betroffen.
 * ============================================================= */
html[data-theme="dark"] {
  --bg:             #0e1424;
  --surface:        #161d2e;
  --surface-2:      #1d2638;
  --text:           #e8ecf3;
  --text-muted:     #9aa3b4;
  --text-soft:      #6b7689;
  --accent:         #5b7cff;
  --accent-dark:    #4361e8;
  --accent-soft:    #1c2748;
  --accent-bg:      #16213f;
  --border:         #283143;
  --border-strong:  #38445c;
  --header-bg:      rgba(22,29,46,0.82);
  --panel-bg:       #161d2e;
  --red:            #f87171;
  --red-soft:       #4c1d1d;
  --red-bg:         #2a0f0f;
  --amber:          #fbbf24;
  --amber-soft:     #4d3a10;
  --amber-bg:       #2d220a;
  --blue:           #60a5fa;
  --blue-soft:      #1e3a8a;
  --blue-bg:        #112349;
  --green:          #4ade80;
  --green-soft:     #14532d;
  --green-bg:       #0a3018;
  --purple:         #c084fc;
  --purple-soft:    #4c1d95;
  --purple-bg:      #2e1065;
  --shadow-sm:      0 1px 2px rgba(0,0,0,0.30);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.40);
  --shadow-lg:      0 10px 30px rgba(0,0,0,0.55);
  /* Warnung/Info im Dark Mode: dunkel-amber Bg mit hellem amber-Text */
  --warn-bg:           #2d220a;
  --warn-text:         #fbbf24;
  --warn-text-strong:  #fcd34d;
  --warn-border:       #f59e0b;
  --warn-border-soft:  #78350f;
  --warn-bg-soft:      #1f1505;
  --info-blue:         #60a5fa;
  --info-blue-text:    #93c5fd;
}
/* Body-Background im Dark Mode (manche Komponenten setzen background:#fff explizit) */
html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}
/* Bilder leicht abdunkeln im Dark Mode (User-uploaded Fotos koennen sonst grell wirken) */
html[data-theme="dark"] img:not(.no-dark-dim):not(.chat-empty-logo):not(.header-logo) {
  filter: brightness(0.92);
}
/* Form-Inputs im Dark Mode lesbar */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--text-soft);
}
/* Browser-Autofill: Chrome/Edge faerben Inputs hellgelb. Im Dark Mode
   verhindern + Text-Farbe anpassen. */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
}
/* Auch im Light Mode: bei input mit class="slk-cell-input correct" sieht
   Browser-Autofill (gelb) hässlich aus auf grünem Background */
.slk-cell-input.correct:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--green-bg) inset !important;
  -webkit-text-fill-color: var(--green) !important;
}
/* Modals: dunkler Hintergrund + Inhalt */
html[data-theme="dark"] .modal-overlay {
  background: rgba(0,0,0,0.75);
}
html[data-theme="dark"] .modal {
  background: var(--surface);
  color: var(--text);
}
/* Header bleibt im Dark Mode dunkel-grau (Nullkontrast statt grell-weiss) */
html[data-theme="dark"] header {
  background: var(--surface);
  border-color: var(--border);
}
/* =============================================================
 * DARK MODE — gezielte Overrides fuer Module mit hardcoded Farben
 * (dashboard.js + selbstlernkurs.js + eltern-mgmt.js injizieren
 * inline-Style, daher !important).
 * ============================================================= */

/* === DASHBOARD (dashboard.js: #dash-tabs, #dash-body, .dash-tab, .dash-card) === */
html[data-theme="dark"] #dash-tabs {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] #dash-body {
  background: var(--bg) !important;
  color: var(--text);
}
html[data-theme="dark"] .dash-tab {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .dash-tab:hover {
  color: var(--text) !important;
  background: var(--surface-2) !important;
}
html[data-theme="dark"] .dash-tab.active {
  color: var(--accent) !important;
  background: var(--accent-bg) !important;
  border-color: var(--accent) !important;
}
html[data-theme="dark"] .dash-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .dash-card h4,
html[data-theme="dark"] .dash-card h3,
html[data-theme="dark"] .dash-card-title {
  color: var(--text) !important;
}
html[data-theme="dark"] .dash-card .dash-card-sub,
html[data-theme="dark"] .dash-card-meta {
  color: var(--text-muted) !important;
}
html[data-theme="dark"] #dash-body table {
  background: var(--surface) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] #dash-body th,
html[data-theme="dark"] #dash-body td {
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: transparent !important;
}
html[data-theme="dark"] #dash-body th {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] #dash-body tr:hover td {
  background: var(--surface-2) !important;
}

/* === SELBSTLERNKURS (selbstlernkurs.js: viele inline-styled Container) === */
html[data-theme="dark"] [class*="slk-"] {
  border-color: var(--border) !important;
}
html[data-theme="dark"] .slk-chapter-content,
html[data-theme="dark"] .slk-aufgabe-card,
html[data-theme="dark"] .slk-aufgabe,
html[data-theme="dark"] .slk-kapitel-list,
html[data-theme="dark"] .slk-content-area,
html[data-theme="dark"] [id^="slk-"] {
  background: var(--surface) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .slk-merke,
html[data-theme="dark"] .slk-merke-box,
html[data-theme="dark"] .slk-info,
html[data-theme="dark"] .slk-info-box {
  background: var(--blue-bg) !important;
  border-color: var(--blue-soft) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .slk-beispiel,
html[data-theme="dark"] .slk-beispiel-box,
html[data-theme="dark"] .slk-example {
  background: var(--amber-bg) !important;
  border-color: var(--amber-soft) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .slk-achtung,
html[data-theme="dark"] .slk-achtung-box,
html[data-theme="dark"] .slk-warning,
html[data-theme="dark"] .slk-warnung {
  background: var(--red-bg) !important;
  border-color: var(--red-soft) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .slk-tipp,
html[data-theme="dark"] .slk-tipp-box,
html[data-theme="dark"] .slk-hint {
  background: var(--green-bg) !important;
  border-color: var(--green-soft) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .slk-loesung-content,
html[data-theme="dark"] .slk-loesung-box {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .slk-kapitel-btn {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .slk-kapitel-btn:hover {
  background: var(--accent-bg) !important;
}
html[data-theme="dark"] .slk-kapitel-btn.active {
  background: var(--accent-soft) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .slk-chapter-content table th {
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
}
html[data-theme="dark"] .slk-chapter-content table td {
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .slk-mc-option,
html[data-theme="dark"] .slk-tf-option {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .slk-mc-option:hover,
html[data-theme="dark"] .slk-tf-option:hover {
  background: var(--accent-bg) !important;
}

/* HINWEIS: aggressive Catch-Alls fuer [class*="slk-"] * wurden entfernt
 * (verursachten Kollateralschaeden auf hellen Sub-Boxen wie Audio-Player).
 * Stattdessen: dashboard.js + selbstlernkurs.js verwenden jetzt die
 * CSS-Variablen direkt — Dark Mode wirkt automatisch.
 */

/* === Inline-styled Container in Kurs-Daten (z.B. Englisch-Probe-Vorbereitung) ===
 * Manche Aufgaben haben in inhalt.frage_html hardcoded Backgrounds wie
 *   <div style="background:#FEF7E0;border-left:4px solid #F59E0B;...">🎧 Höre den Text:</div>
 *   <div style="background:#EFF6FF;border-left:4px solid #3B82F6;...">📌 Lies zuerst...</div>
 * Wir koennen die JSON-Daten nicht refactoren (wuerde alle 63 Englisch-Aufgaben
 * neu speichern), also matchen wir per Attribute-Selektor und uebersteuern im
 * Dark Mode mit semantischen Vars. */
html[data-theme="dark"] [style*="background:#FEF7E0"],
html[data-theme="dark"] [style*="background: #FEF7E0"],
html[data-theme="dark"] [style*="background:#fef7e0"],
html[data-theme="dark"] [style*="background: #fef7e0"] {
  background: var(--warn-bg) !important;
  color: var(--warn-text) !important;
}
html[data-theme="dark"] [style*="background:#FEF7E0"] *,
html[data-theme="dark"] [style*="background: #FEF7E0"] *,
html[data-theme="dark"] [style*="background:#fef7e0"] *,
html[data-theme="dark"] [style*="background: #fef7e0"] * {
  color: var(--warn-text) !important;
}
html[data-theme="dark"] [style*="background:#EFF6FF"],
html[data-theme="dark"] [style*="background: #EFF6FF"],
html[data-theme="dark"] [style*="background:#eff6ff"],
html[data-theme="dark"] [style*="background: #eff6ff"] {
  background: var(--blue-bg) !important;
  color: var(--blue) !important;
}
html[data-theme="dark"] [style*="background:#EFF6FF"] *,
html[data-theme="dark"] [style*="background: #EFF6FF"] *,
html[data-theme="dark"] [style*="background:#eff6ff"] *,
html[data-theme="dark"] [style*="background: #eff6ff"] * {
  color: var(--blue) !important;
}
/* Inline 'color:#6B7280' (Tailwind grey-500) kommt in Daten als Subtitle.
   Im Dark Mode auf hellbarem var(--text-muted) bringen. */
html[data-theme="dark"] [style*="color:#6B7280"],
html[data-theme="dark"] [style*="color: #6B7280"],
html[data-theme="dark"] [style*="color:#6b7280"],
html[data-theme="dark"] [style*="color: #6b7280"] {
  color: var(--text-muted) !important;
}
/* Englisch-Lernkurs Pin-Banner: hat hardcoded color:#1E40AF (Tailwind blue-700)
   im Inline-style. Auf dunkelblauem Bg (--blue-bg) unsichtbar. */
html[data-theme="dark"] [style*="color:#1E40AF"],
html[data-theme="dark"] [style*="color: #1E40AF"],
html[data-theme="dark"] [style*="color:#1e40af"],
html[data-theme="dark"] [style*="color: #1e40af"] {
  color: var(--info-blue) !important;
}
html[data-theme="dark"] [style*="color:#92400E"],
html[data-theme="dark"] [style*="color: #92400E"] {
  color: var(--warn-text) !important;
}
/* === Verbleibende inline-Hex-Codes in m9_englisch_probe.json (komplett-Audit) === */
/* #F9FAFB (Tailwind grey-50) — Cloze-Container "Lily says..." / Frage-Container */
html[data-theme="dark"] [style*="background:#F9FAFB"],
html[data-theme="dark"] [style*="background: #F9FAFB"],
html[data-theme="dark"] [style*="background:#f9fafb"],
html[data-theme="dark"] [style*="background: #f9fafb"] {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] [style*="background:#F9FAFB"] *,
html[data-theme="dark"] [style*="background: #F9FAFB"] *,
html[data-theme="dark"] [style*="background:#f9fafb"] *,
html[data-theme="dark"] [style*="background: #f9fafb"] * {
  color: var(--text) !important;
}
/* #DCFCE7 (hellgrün) — Success-Container */
html[data-theme="dark"] [style*="background:#DCFCE7"],
html[data-theme="dark"] [style*="background: #DCFCE7"],
html[data-theme="dark"] [style*="background:#dcfce7"],
html[data-theme="dark"] [style*="background: #dcfce7"] {
  background: var(--green-bg) !important;
}
html[data-theme="dark"] [style*="background:#DCFCE7"] *,
html[data-theme="dark"] [style*="background: #DCFCE7"] *,
html[data-theme="dark"] [style*="background:#dcfce7"] *,
html[data-theme="dark"] [style*="background: #dcfce7"] * {
  color: var(--green) !important;
}
/* #FEE2E2 (hellrot) — Error-Container */
html[data-theme="dark"] [style*="background:#FEE2E2"],
html[data-theme="dark"] [style*="background: #FEE2E2"],
html[data-theme="dark"] [style*="background:#fee2e2"],
html[data-theme="dark"] [style*="background: #fee2e2"] {
  background: var(--red-bg) !important;
}
html[data-theme="dark"] [style*="background:#FEE2E2"] *,
html[data-theme="dark"] [style*="background: #FEE2E2"] *,
html[data-theme="dark"] [style*="background:#fee2e2"] *,
html[data-theme="dark"] [style*="background: #fee2e2"] * {
  color: var(--red) !important;
}
/* color:#991B1B (dunkelrot) — Error-Text */
html[data-theme="dark"] [style*="color:#991B1B"],
html[data-theme="dark"] [style*="color: #991B1B"],
html[data-theme="dark"] [style*="color:#991b1b"],
html[data-theme="dark"] [style*="color: #991b1b"] {
  color: var(--red) !important;
}
/* Pinnwand-Karten mit user-defined Background-Bild (has-custom-bg):
   im Dark Mode etwas abdunkeln und Text aufhellen. */
html[data-theme="dark"] .pinnwand-card.has-custom-bg,
html[data-theme="dark"] .panel.has-custom-bg {
  filter: brightness(0.55) contrast(1.05);
}
html[data-theme="dark"] .pinnwand-card.has-custom-bg:hover,
html[data-theme="dark"] .panel.has-custom-bg:hover {
  filter: brightness(0.65) contrast(1.05);
}

/* === ELTERN-VERWALTUNG === */
html[data-theme="dark"] .eltern-toolbar {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .eltern-loading,
html[data-theme="dark"] .eltern-empty {
  color: var(--text-muted);
}
html[data-theme="dark"] .eltern-group-title,
html[data-theme="dark"] .eltern-count {
  color: var(--text);
  background: var(--surface-2);
}
html[data-theme="dark"] .eltern-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text);
}
html[data-theme="dark"] .eltern-card-name,
html[data-theme="dark"] .eltern-card-child {
  color: var(--text) !important;
}
html[data-theme="dark"] .eltern-card-rolelabel,
html[data-theme="dark"] .eltern-card-meta,
html[data-theme="dark"] .eltern-child-label {
  color: var(--text-muted) !important;
}

/* === GENERIC TABELLEN (catch-all fuer hardcoded weisse Backgrounds) === */
html[data-theme="dark"] .modal table {
  background: var(--surface);
  color: var(--text);
}
html[data-theme="dark"] .modal th {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--border);
}
html[data-theme="dark"] .modal td {
  border-color: var(--border);
  color: var(--text);
}

/* === Buttons mit hardcoded Farben (z.B. .btn ohne Variable) === */
html[data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success) {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):hover {
  background: var(--accent-bg);
}

/* Theme-Toggle-Button im Header */
.nll-theme-toggle {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  margin-left: 4px;
  transition: all 0.15s;
}
.nll-theme-toggle:hover {
  transform: scale(1.08);
  border-color: var(--accent);
}
@media (max-width: 600px) {
  .nll-theme-toggle { width: 32px; height: 32px; font-size: 15px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Klar-Hintergrund: fast-weiss + dezentes Punkt-Raster + sehr langsam driftender Kobalt-Glow. */
  background: var(--bg);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  font-size: 15px;
  position: relative;
}
body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 540px at 15% 6%,  rgba(31,73,255,0.055), transparent 60%),
    radial-gradient(580px 500px at 88% 94%, rgba(31,73,255,0.045), transparent 60%),
    radial-gradient(500px 440px at 74% 16%, rgba(99,102,241,0.035), transparent 62%);
  animation: nllDrift 46s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes nllDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-1.6%, 1.4%, 0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* === DARK MODE: Klar-Dunkel — dunkler Grund + dezentes helles Raster + hellerer Glow === */
html[data-theme="dark"] body {
  background: var(--bg);
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
}
html[data-theme="dark"] body::before {
  background:
    radial-gradient(640px 540px at 15% 6%,  rgba(91,124,255,0.12), transparent 60%),
    radial-gradient(580px 500px at 88% 94%, rgba(91,124,255,0.09), transparent 60%),
    radial-gradient(500px 440px at 74% 16%, rgba(99,102,241,0.07), transparent 62%);
}

/* === Buttons === */
.btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.btn:hover { background: var(--surface-2); border-color: var(--accent); }
.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-sm { font-size: 12px; padding: 5px 10px; }
.btn-danger { color: var(--red); }
.btn-danger:hover { background: var(--red-soft); border-color: var(--red); }
.btn-icon {
  padding: 6px 8px;
  font-size: 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
}
.btn-icon:hover { background: var(--surface-2); color: var(--text); }

/* === Form === */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-group textarea { min-height: 90px; resize: vertical; }

.alert {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 14px;
}
.alert-error { background: var(--red-soft); color: var(--red); border: 1px solid var(--red); }
.alert-info { background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent); }

/* === Login/Setup Screen === */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
}
.auth-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.auth-logo {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  margin: 0 auto 18px;
}
.auth-logo .auth-mark {
  width: 54px; height: 54px; border-radius: 15px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 28px; line-height: 1;
  box-shadow: 0 8px 20px -6px rgba(31,73,255,0.55);
}
.auth-logo .auth-name { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.auth-logo .logo-dot {
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
}
.auth-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 28px;
}

/* Legal-Footer auf Login-Seite (Datenschutz / Impressum) */
.auth-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 12px;
}
.auth-footer a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 8px;
}
.auth-footer a:hover { color: var(--text); text-decoration: underline; }
.auth-footer-sep { color: var(--text-muted); opacity: 0.4; }

/* App-Legal-Footer für eingeloggte Nutzer (klein und dezent) */
.app-legal-footer {
  margin-top: 32px;
  padding: 16px 0 24px;
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.7;
}
.app-legal-footer a {
  color: inherit;
  text-decoration: none;
  padding: 0 8px;
}
.app-legal-footer a:hover { text-decoration: underline; opacity: 1; }
.app-legal-footer span { opacity: 0.5; }

/* ================================================================
   🎂 GEBURTSTAGS-BANNER & POP-UP
   ================================================================ */

/* Banner oberhalb von "Aktuelles" und "Termine" */
.birthday-banner {
  position: relative;
  margin: 0 0 24px;
  padding: 22px 28px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(251, 191, 36, 0.25);
  overflow: hidden;
  animation: birthday-pulse 4s ease-in-out infinite;
}

@keyframes birthday-pulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(251, 191, 36, 0.25); }
  50%      { box-shadow: 0 8px 32px rgba(251, 191, 36, 0.45); }
}

.birthday-banner-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  position: relative;
  z-index: 2;
}

.birthday-cake {
  font-size: 56px;
  line-height: 1;
  flex-shrink: 0;
  animation: cake-bounce 2s ease-in-out infinite;
}

@keyframes cake-bounce {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-8px) rotate(3deg); }
}

.birthday-text {
  flex: 1;
  min-width: 0;
}

.birthday-title {
  font-size: 14px;
  font-weight: 600;
  color: #78350f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.birthday-names {
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
  margin-bottom: 6px;
}

.birthday-names strong {
  color: #b45309;
}

.birthday-wish {
  font-size: 15px;
  color: #78350f;
  font-weight: 500;
}

/* Konfetti-Animation im Banner-Hintergrund */
.birthday-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -10px;
  left: calc((var(--i) * 5.5%) + 1%);
  width: 8px;
  height: 14px;
  background: hsl(calc(var(--i) * 23deg), 80%, 60%);
  opacity: 0.7;
  animation: confetti-fall 4s linear infinite;
  animation-delay: calc(var(--i) * -0.22s);
  border-radius: 2px;
}

.confetti-piece:nth-child(odd) {
  width: 6px; height: 10px;
  border-radius: 50%;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 0.7;
  }
  100% {
    transform: translateY(180px) rotate(360deg);
    opacity: 0;
  }
}

/* Mobile-Anpassung */
@media (max-width: 600px) {
  .birthday-banner { padding: 16px 18px; }
  .birthday-cake { font-size: 42px; }
  .birthday-names { font-size: 18px; }
  .birthday-wish { font-size: 13px; }
  .birthday-banner-inner { gap: 14px; }
}

/* === Pop-up für das Geburtstagskind selbst === */

.birthday-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: popup-overlay-in 0.3s ease-out;
  padding: 20px;
}

.birthday-popup-overlay.closing {
  animation: popup-overlay-out 0.3s ease-out forwards;
}

@keyframes popup-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes popup-overlay-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.birthday-popup {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #fef3c7 100%);
  border-radius: 24px;
  padding: 50px 40px 36px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  animation: popup-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

@keyframes popup-pop {
  0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.birthday-popup-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.birthday-popup-confetti .confetti-piece {
  left: calc((var(--i) * 3.3%) + 1%);
  animation-duration: 3s;
}

.birthday-popup > *:not(.birthday-popup-confetti) {
  position: relative;
  z-index: 2;
}

.birthday-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  color: #64748b;
  z-index: 3;
  transition: background 0.2s;
}

.birthday-popup-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #0f172a;
}

.birthday-popup-cake {
  font-size: 96px;
  line-height: 1;
  margin-bottom: 18px;
  animation: cake-bounce 1.5s ease-in-out infinite;
}

.birthday-popup-title {
  font-size: 30px;
  font-weight: 800;
  color: #b45309;
  margin-bottom: 10px;
  line-height: 1.2;
}

.birthday-popup-subtitle {
  font-size: 16px;
  color: #78350f;
  margin-bottom: 14px;
}

.birthday-popup-emojis {
  font-size: 28px;
  letter-spacing: 6px;
  margin-bottom: 24px;
}

.birthday-popup-ok {
  min-width: 140px;
  font-size: 16px;
}

@media (max-width: 600px) {
  .birthday-popup { padding: 40px 24px 28px; }
  .birthday-popup-cake { font-size: 72px; }
  .birthday-popup-title { font-size: 24px; }
  .birthday-popup-subtitle { font-size: 14px; }
}

/* ================================================================
   🎂 GEBURTSTAGS-BUTTON in Schülerverwaltung
   ================================================================ */

.birthday-cell {
  text-align: center;
  white-space: nowrap;
}

.birthday-btn {
  background: none;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  color: inherit;
}

.birthday-btn:hover {
  background: #fef3c7;
  border-color: #fbbf24;
}

.birthday-btn.birthday-empty {
  color: #94a3b8;
  opacity: 0.7;
}

.birthday-btn.birthday-set {
  background: #fef3c7;
  border-color: #fbbf24;
  color: #92400e;
  font-weight: 600;
}

/* ================================================================
   🔄 REFRESH-BUTTON — Animation
   ================================================================ */

.refresh-spinning {
  display: inline-block;
  animation: refresh-spin 0.7s linear infinite;
}

@keyframes refresh-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.header-tile-refresh:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* ================================================================
   🚪 LOGOUT-BESTÄTIGUNG — Animationen
   ================================================================ */

@keyframes logout-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes logout-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes logout-pop {
  0%   { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.auth-card h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  color: var(--text);
}
.role-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.role-option {
  padding: 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--surface);
}
.role-option:hover { border-color: var(--accent); background: var(--surface-2); }
.role-option.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}
.role-option .icon { font-size: 24px; margin-bottom: 4px; }
.role-option .label { font-size: 13px; }
.setup-note {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 20px;
  line-height: 1.5;
}
.btn-block {
  width: 100%;
  justify-content: center;
  padding: 12px;
  font-size: 15px;
}

/* ============================================================
   LOGIN-SEITE - 3-Kachel-Picker + großer M9-Klassentitel
   (immer geladen, auch wenn nicht authentifiziert)
   ============================================================ */
.role-picker {
  grid-template-columns: 1fr 1fr 1fr !important;
}
.auth-classtitle {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 42px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
  color: var(--text);
  letter-spacing: -1px;
  line-height: 1.1;
  display: block;
}
.auth-classtitle .logo-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 12px;
  margin-top: -6px;
}
.auth-logo {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  margin: 0 auto 18px;
}
@media (max-width: 480px) {
  .auth-logo { gap: 10px; }
  .auth-logo .auth-mark { width: 46px; height: 46px; font-size: 24px; }
  .auth-logo .auth-name { font-size: 19px; }
}
.auth-platform {
  text-align: center;
  font-size: 17px;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.form-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.4;
}

@media (max-width: 480px) {
  .auth-classtitle { font-size: 30px; }
  .auth-platform { font-size: 14px; }
  .role-picker { grid-template-columns: 1fr 1fr 1fr !important; gap: 6px; }
  .role-option { padding: 10px 4px; }
  .role-option .icon { font-size: 20px; }
  .role-option .label { font-size: 11px; }
}

<?php if ($is_authenticated): ?>
/* === Header === */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 7px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-wrap: nowrap;
  gap: 12px;
}
@media (max-width: 900px) {
  .site-header { flex-wrap: wrap; }
}
/* Klar-Marke: Kobalt-"N" + Wortmarke (ersetzt das alte Wortmark-Bild) */
.nll-brand { display: flex; align-items: center; gap: 11px; }
.nll-brand-mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 20px; line-height: 1;
  box-shadow: 0 4px 12px -4px rgba(31,73,255,0.55);
}
.nll-brand-wm { display: flex; flex-direction: column; line-height: 1.12; }
.nll-brand-wm b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.nll-brand-wm i { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); }
.site-header h1 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.site-header h1 .logo-dot {
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}
.site-header h1 .site-logo {
  height: 50px;
  width: auto;
  flex-shrink: 0;
  border-radius: 10px;
  filter: drop-shadow(0 3px 9px rgba(40,30,12,0.20));
}
@media (max-width: 720px) {
  .site-header h1 .site-logo {
    height: 40px;
    width: auto;
    border-radius: 8px;
  }
}
.site-header h1 .title-main {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.site-header h1 .title-line {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}
.site-header h1 .title-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.03em;
  margin-top: 2px;
}
.site-header .subtitle {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}
.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  /* Phase 1.56: erzwingt rechte Ausrichtung auch wenn site-header umbricht
     (sonst rutschen Tiles unter dem Logo nach LINKS). */
  margin-left: auto;
  justify-content: flex-end;
}
.user-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.user-pill.lehrer { background: var(--amber-soft); color: var(--amber); }

/* Kachel-Gruppe (aneinanderliegende Buttons wie ein Panel) */
.header-tile-group {
  display: inline-flex;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  flex-wrap: nowrap;
}
.header-tile {
  background: var(--panel-bg);
  border: none;
  border-right: 1px solid var(--border);
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 84px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  font-family: inherit;
  position: relative;
  white-space: nowrap;
}
.header-tile:last-child { border-right: none; }
.header-tile:hover {
  background: var(--surface-2);
  color: var(--accent, #0891b2);
}
.header-tile:active { background: var(--surface-2); transform: scale(0.97); }
/* Dunkelmodus: per-Kachel-Hover-Spezialfarben (helle Gradienten) neutralisieren */
html[data-theme="dark"] .header-tile:hover { background: var(--surface-2); color: var(--accent); }
html[data-theme="dark"] .header-tile-ico { filter: none; }
.header-tile-ico {
  font-size: 24px;
  line-height: 1;
  /* Klar: Icons wieder farbig (Joachim) — kein Filter */
}
.header-tile-lbl {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Spezial-Farben für einzelne Kacheln */
.header-tile-chat:hover {
  background: linear-gradient(135deg, #ecfeff, #cffafe);
  color: #0891b2;
}
.header-tile-notenheft:hover {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #b45309;
}
.header-tile-logout {
  color: #6b7280;
}
.header-tile-logout:hover {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #b91c1c;
}
.header-tile-ai:hover {
  background: linear-gradient(135deg, #ede9fe, #ddd6fe);
  color: #6d28d9;
}

/* Chat-Badge in Kachel */
.header-tile-chat .chat-btn-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #ef4444;
  color: white;
  border-radius: 12px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid white;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* Mobile: Kacheln bleiben aneinander, horizontal scrollbar */
@media (max-width: 760px) {
  .header-actions { width: 100%; }
  .header-tile-group {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .header-tile {
    min-width: 72px;
    padding: 10px 12px;
  }
  .header-tile-ico { font-size: 20px; }
  .header-tile-lbl { font-size: 11px; }
}

main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 28px 60px;
}

/* === Top Grid === */
.top-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 28px;
}
@media (max-width: 900px) {
  .top-grid { grid-template-columns: 1fr; }
}

/* Sequenz-Ausbau 2026-08 (Variante D): Schueler-Startseite hat ein drittes Panel
   "Meine Blaetter". Ab 1180px drei Spalten, darunter zwei, ganz schmal eine —
   sonst quetschen sich drei Panels auf einem Tablet zu unlesbaren Saeulen. */
.top-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1180px) { .top-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px)  { .top-grid-3 { grid-template-columns: 1fr; } }
.top-grid .panel { min-width: 0; }   /* sonst sprengt der breiteste Inhalt die Spalte */

/* --- Panel "Meine Blaetter" --------------------------------------------- */
.mb-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
.mb-z { border-radius: 13px; padding: 11px 8px; text-align: center; border: 1.5px solid var(--border);
        background: var(--panel-bg); cursor: pointer; text-decoration: none; display: block; }
.mb-z b { font-size: 25px; display: block; line-height: 1; font-weight: 700; }
.mb-z span { font-size: 10.5px; font-weight: 700; display: block; margin-top: 3px; letter-spacing: .2px; }
.mb-z.offen  { border-color: rgba(192,88,79,.45);  background: rgba(192,88,79,.09); }
.mb-z.offen b, .mb-z.offen span   { color: #a4433b; }
.mb-z.teil   { border-color: rgba(191,138,42,.5);  background: rgba(191,138,42,.10); }
.mb-z.teil b, .mb-z.teil span     { color: #8a6212; }
html[data-theme="dark"] .mb-z.offen b, html[data-theme="dark"] .mb-z.offen span { color: #e39a93; }
html[data-theme="dark"] .mb-z.teil b,  html[data-theme="dark"] .mb-z.teil span  { color: #e0c06a; }
.mb-zeile { display: flex; align-items: center; gap: 9px; padding: 7px 4px 7px 10px;
            border-top: 1px solid var(--border); position: relative; text-decoration: none; color: inherit; }
.mb-zeile:first-of-type { border-top: none; }
.mb-zeile:before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; }
.mb-zeile.offen:before { background: #c0584f; }
.mb-zeile.teil:before  { background: #bf8a2a; }
.mb-zeile:hover { background: var(--hover-bg, rgba(31,73,255,.05)); border-radius: 8px; }
.mb-tx { flex: 1; min-width: 0; }
.mb-tx b { display: block; font-size: 13px; font-weight: 600; line-height: 1.25;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-tx span { display: block; font-size: 10.5px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-streifen { display: flex; gap: 2px; flex: none; }
.mb-feld { width: 16px; height: 19px; border-radius: 4px; display: grid; place-items: center;
           font-size: 9px; font-weight: 700; }
.mb-feld.ja   { background: #3f8f5c; color: #fff; }
.mb-feld.teil { background: #bf8a2a; color: #fff; }
.mb-feld.nein { background: transparent; border: 1.5px dashed var(--border); opacity: .8; }
.mb-alle { display: block; width: 100%; margin-top: 12px; text-align: center; padding: 9px;
           border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; font-weight: 600;
           text-decoration: none; color: inherit; }
.mb-alle:hover { background: var(--hover-bg, rgba(31,73,255,.05)); }
.mb-fertig { text-align: center; padding: 14px 8px; font-size: 13px; opacity: .75; }
/* Im Leer-Zustand sind die Zaehler keine Links — gleiche Optik, aber nicht klickbar,
   damit ein Klick auf "0" nicht ins Leere fuehrt. */
span.mb-z { cursor: default; }

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: 0 6px 20px rgba(16,19,25,0.11), 0 1px 3px rgba(16,19,25,0.07);
}
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.panel-header h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-header h2 .accent-bar {
  width: 4px;
  height: 18px;
  background: var(--accent);
  border-radius: 2px;
}

/* === News === */
.news-list, .termine-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 440px;
  overflow-y: auto;
  padding-right: 4px;
}
.news-item {
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent);
  position: relative;
  transition: all 0.15s ease;
}
.news-item:hover { background: var(--accent-soft); border-left-width: 5px; }
.news-item-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.news-item-text { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 6px; }
.news-item-date { font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.news-item-actions {
  position: absolute;
  top: 8px; right: 8px;
  opacity: 0;
  transition: opacity 0.15s;
}
.news-item:hover .news-item-actions { opacity: 1; }

/* === Termine === */
.termin-item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: all 0.15s ease;
  position: relative;
}
.termin-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.termin-date {
  flex-shrink: 0;
  min-width: 48px;
  width: auto;
  padding: 0 8px;
  height: 52px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  text-align: center;
}
.termin-date-day { font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.termin-date-month { font-size: 10px; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; letter-spacing: 0.05em; font-weight: 600; white-space: nowrap; }
.termin-date-range { font-size: 13px; font-weight: 700; line-height: 1.4; text-align: center; white-space: nowrap; }
.termin-date-range .range-month { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
/* padding statt margin: die Vorlage in app.js setzt links und rechts KEIN
   Leerzeichen um das Wort ("1. Aug<span>bis</span>14. Sep"), sonst klebt es
   an beiden Daten. Faellt in der Termin-Karte der neuen Startseite auf. */
.range-separator { display: inline; font-weight: 400; font-size: 13px; color: var(--text-muted); padding: 0 4px; }
.termin-body { flex: 1; min-width: 0; }
.termin-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.termin-infos { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; line-height: 1.35; white-space: pre-wrap; }
.termin-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.termin-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.type-probe { background: var(--red-soft); color: var(--red); }
.type-ausflug { background: var(--blue-soft); color: var(--blue); }
.type-sprechtag { background: var(--amber-soft); color: var(--amber); }
.type-schulfrei { background: var(--green-soft); color: var(--green); }
.type-sonstiges { background: var(--purple-soft); color: var(--purple); }
.type-schulveranstaltung { background: var(--accent-soft); color: var(--accent); }
.termin-class { font-size: 12px; color: var(--text-muted); }
.termin-actions {
  position: absolute;
  top: 6px; right: 6px;
  opacity: 0;
  transition: opacity 0.15s;
}
.termin-item:hover .termin-actions { opacity: 1; }
.termin-item.past { opacity: 0.55; }

.empty-state { text-align: center; padding: 28px 16px; color: var(--text-soft); font-size: 13px; }

/* === Pinnwände === */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 12px;
}
.section-header h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.section-header .section-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}
.pinnwaende-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

/* === Phase 1.34: Lehrer-2x2-Grid + Abhaklisten === */
.lehrer-2x2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
  margin-bottom: 28px;
}
@media (max-width: 900px) {
  .lehrer-2x2-grid { grid-template-columns: 1fr; }
}
.lehrer-2x2-grid .panel { display: flex; flex-direction: column; min-height: 0; }
.lehrer-2x2-grid .news-list,
.lehrer-2x2-grid .termine-list,
.lehrer-2x2-grid .abhaklisten-grid,
.lehrer-2x2-grid .pinnwaende-grid-cell { max-height: 440px; overflow-y: auto; }
.pinnwaende-grid-cell {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.abhaklisten-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.abhakliste-card {
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--radius);
  border-left: 3px solid #1f49ff;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.abhakliste-card:hover { background: var(--accent-soft); border-left-width: 5px; }

/* Klassen-Umschalter ueber den Abhaklisten — erscheint nur, wenn es mehr als
   eine Klasse gibt (Systemcheck 2026-08-02, vorher war "M9" festverdrahtet). */
.abhak-klassen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; grid-column: 1 / -1; }
.abhak-klasse-btn {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.abhak-klasse-btn:hover { background: var(--accent-soft); }
.abhak-klasse-btn.aktiv { background: #1f49ff; border-color: #1f49ff; color: #fff; }
.abhakliste-card-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.abhakliste-card-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.abhakliste-card-counter {
  font-size: 11px; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;
}
.abhakliste-card-progress {
  margin-top: 6px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden;
}
.abhakliste-card-progress-fill {
  height: 100%; background: #1f49ff; transition: width .25s ease;
}

/* Detail-Modal (Matrix) */
.abh-detail-wrap { padding: 14px 18px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.abh-detail-meta { font-size: 13px; color: #6b7280; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.abh-detail-table-wrap { flex: 1; overflow: auto; border: 1px solid var(--border); border-radius: 8px; min-height: 0; }
/* table-layout:fixed + colgroup (app.js): alle Listenspalten gleich breit,
   unabhaengig von der Laenge des Titels. Die Tabelle traegt dazu eine
   min-width aus der Zahl der Listen — passen sie nicht mehr, scrollt der
   Wrapper horizontal, statt die Spalten zusammenzuquetschen. */
.abh-detail-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; table-layout: fixed; }
.abh-detail-table th, .abh-detail-table td { padding: 8px 10px; vertical-align: middle; }
.abh-detail-table thead th { background: #f8fafc; border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 2; }
.abh-detail-th-name { text-align: left; min-width: 180px; left: 0; position: sticky; z-index: 3; background: #f8fafc; border-right: 1px solid var(--border); }
.abh-detail-th-liste { text-align: center; min-width: 130px; }
/* Lange Titel brechen in der Kopfzeile um (die Spaltenbreite steht durch
   table-layout:fixed fest); ein ueberlanges Wort bricht notfalls mitten drin,
   statt aus der Spalte zu laufen. */
.abh-detail-th-liste-title {
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
  overflow-wrap: anywhere;
}
.abh-detail-th-liste-counter { font-size: 11px; color: #6b7280; margin-top: 2px; font-variant-numeric: tabular-nums; }
.abh-detail-th-liste-archive { background: none; border: none; color: #b91c1c; cursor: pointer; font-size: 11px; padding: 2px 6px; text-decoration: underline; margin-top: 2px; }
.abh-detail-table tbody tr:nth-child(odd) { background: #fafafa; }
.abh-detail-table tbody tr:hover { background: #f0f9ff; }
.abh-detail-name { left: 0; position: sticky; z-index: 1; background: inherit; border-right: 1px solid var(--border); }
.abh-detail-cell-td { text-align: center; cursor: pointer; user-select: none; }
.abh-detail-cell-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; font-weight: 700; font-size: 14px; transition: all .15s ease; }
.abh-detail-cell-td.abgegeben .abh-detail-cell-icon { background: #dcfce7; color: #166534; }
.abh-detail-cell-td.offen .abh-detail-cell-icon { background: #f3f4f6; color: #9ca3af; }
.abh-detail-cell-td:hover .abh-detail-cell-icon { transform: scale(1.1); }
@media (max-width: 640px) {
  .abh-detail-th-name, .abh-detail-name { min-width: 130px; }
  .abh-detail-th-liste { min-width: 90px; }
}
.pinnwand-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pinnwand-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--accent);
}
.pinnwand-card.color-blue::before { background: var(--blue); }
.pinnwand-card.color-green::before { background: var(--green); }
.pinnwand-card.color-amber::before { background: var(--amber); }
.pinnwand-card.color-red::before { background: var(--red); }
.pinnwand-card.color-purple::before { background: var(--purple); }
.pinnwand-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.pinnwand-card h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.pinnwand-card .pinnwand-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; flex: 1; }
.pinnwand-card .pinnwand-stats {
  display: flex;
  gap: 14px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
}
.pinnwand-actions {
  position: absolute;
  top: 12px; right: 12px;
  opacity: 0;
  transition: opacity 0.15s;
  display: flex;
  gap: 4px;
}
.pinnwand-card:hover .pinnwand-actions { opacity: 1; }
/* Touch-Geräte (kein Hover möglich): Aktions-Buttons immer sichtbar */
@media (hover: none), (pointer: coarse) {
  .pinnwand-actions { opacity: 1 !important; }
}
.pinnwand-card.add-new {
  border-style: dashed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
  background: transparent;
}
.pinnwand-card.add-new::before { display: none; }
.pinnwand-card.add-new:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}
.pinnwand-card.add-new .plus { font-size: 28px; font-weight: 300; margin-bottom: 4px; }

/* Pinnwand-Drag&Drop-Feedback (Lehrer) */
.pinnwand-card.dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.pinnwand-card.drop-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  transform: scale(1.02);
}
.pinnwand-card .drag-hint {
  color: var(--text-soft);
  font-size: 14px;
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
  padding: 0 2px;
}
.pinnwand-card:active .drag-hint { cursor: grabbing; }

/* === Modal === */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  /* 2026-09-09 von 100 auf 1000: die gemeinsame Kopfzeile liegt auf 900
     (nll-topbar.css:12) und lag damit UEBER jedem Modal. Gemessen am
     erzwungenen Passwort-Fenster: das Fenster liess sich zwar nicht
     schliessen, die Kopfzeile darueber nahm aber Klicks an und fuehrte den
     Schueler weg. Reihenfolge darueber bleibt unveraendert:
     Vollbild-Seite 1500, Chat 15000, Hinweise 99999. */
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(2px);
}
.modal-overlay.active { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.2s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
}
.modal-close {
  background: transparent;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 10px;
  border-radius: 6px;
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-body { padding: 22px 26px; }

/* === Phase 1.49: Vollbild-Modal-Klasse (Modal optisch wie eine eigene Seite) ===
   Anwendung: <div class="modal-overlay modal-fullscreen-page" ...>
   Container-Massnahmen wie height/border-radius werden mit !important durchgesetzt,
   damit auch Modals mit eigenen inline-styles sauber vollbildig werden. */
.modal-overlay.modal-fullscreen-page {
  background: #fff;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 1500;
  align-items: stretch;
  justify-content: stretch;
}

/* Belehrungen des KI-Lernhelfers ueber der Vollbild-Seite.
   2026-09-09: Der Lernhelfer oeffnet sich als Vollbild-Seite (1500, deckend
   weiss), seine beiden Belehrungs-Fenster sind gewoehnliche Overlays und lagen
   damit DAHINTER — unsichtbar und nicht anklickbar. Ein Schueler konnte die
   Datenschutz-Belehrung nie bestaetigen und den Lernhelfer deshalb nie
   benutzen; beim ersten "Senden" passierte sichtbar gar nichts. */
#modal-ai-belehrung.modal-overlay,
#modal-ai-text-belehrung.modal-overlay {
  z-index: 1600;
}
.modal-overlay.modal-fullscreen-page > .modal {
  max-width: 100vw !important;
  width: 100vw !important;
  max-height: 100vh !important;
  height: 100vh !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.modal-overlay.modal-fullscreen-page > .modal > .modal-header {
  border-radius: 0 !important;
}
/* Phase 1.57 + 1.65 — robust: Chat / Lernhelfer / Notenheft / Selbstlernkurs
   sind IMMER vollbild, wenn .active gesetzt ist. Unabhaengig vom JS-Helper.
   Damit funktioniert es auch wenn die JS-Datei noch aus dem Cache kommt.
   Selektoren matchen die Modal-IDs aus chat.js / ai-helper.js / selbstlernkurs.js / app.php */
#nll-chat-modal.modal-overlay.active,
#modal-ai-helper.modal-overlay.active,
#modal-notenheft.modal-overlay.active,
#modal-selbstlernkurs.modal-overlay.active {
  background: #fff !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 1500 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
#nll-chat-modal.modal-overlay.active > .modal,
#modal-ai-helper.modal-overlay.active > .modal,
#modal-notenheft.modal-overlay.active > .modal,
#modal-selbstlernkurs.modal-overlay.active > .modal {
  max-width: 100vw !important;
  width: 100vw !important;
  max-height: 100vh !important;
  height: 100vh !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  /* iPad/iPhone Safe-Area: Statusbar/Notch nicht ueberlappen */
  padding-top: env(safe-area-inset-top, 0) !important;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
  padding-left: env(safe-area-inset-left, 0) !important;
  padding-right: env(safe-area-inset-right, 0) !important;
  box-sizing: border-box !important;
}
/* Modal-Body soll den restlichen Platz fuellen */
#nll-chat-modal.modal-overlay.active > .modal > .modal-body,
#modal-ai-helper.modal-overlay.active > .modal > .modal-body,
#modal-notenheft.modal-overlay.active > .modal > .modal-body,
#modal-selbstlernkurs.modal-overlay.active > .modal > .modal-body,
#modal-selbstlernkurs.modal-overlay.active > .modal > #slk-body {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: auto !important;
}
/* Im Dark Mode: Modal-Hintergrund auf Surface-Farbe statt hartem weiss */
html[data-theme="dark"] #nll-chat-modal.modal-overlay.active,
html[data-theme="dark"] #modal-ai-helper.modal-overlay.active,
html[data-theme="dark"] #modal-notenheft.modal-overlay.active {
  background: var(--surface) !important;
}

/* Zurueck-Knopf links im Modal-Header */
.modal-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.85); border: 1px solid rgba(203,213,225,0.8);
  border-radius: 8px;
  padding: 8px 14px; font-size: 14px; font-weight: 600; color: #1e293b;
  cursor: pointer; transition: all .15s; white-space: nowrap;
  margin-right: 10px;
  text-decoration: none;
}
.modal-back-btn:hover {
  background: #fff; border-color: #94a3b8;
  transform: translateX(-2px);
}
.modal-back-btn:active { transform: translateX(0); }
/* Body-Scroll-Lock fuer Vollbild-Modals (verhindert Hintergrund-Scroll auf Mobile) */
body.fullscreen-modal-open,
html.fullscreen-modal-open { overflow: hidden; }
@media (max-width: 640px) {
  .modal-back-btn { padding: 6px 10px; font-size: 13px; }
}

.modal-footer {
  padding: 16px 26px 22px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
}

.color-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.color-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
}
.color-swatch.selected { border-color: var(--text); transform: scale(1.1); }

/* === Pinnwand Detail === */
.pinnwand-detail {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg);
  /* 2026-09-09 von 90 auf 1000: die Ansicht beansprucht die ganze Seite ab
     top:0, die gemeinsame Kopfzeile liegt aber auf 900. Titel und
     "Zurueck"-Knopf der Pinnwand lagen vollstaendig darunter — gemessen
     nahm die Kopfzeile den Klick auf "Zurueck" entgegen.
     2026-09-10 auf 950: bei 1000 lag die Ansicht GLEICHAUF mit .modal-overlay
     (1000) und deckte die frueher im DOM stehenden Modale (#modal-karte,
     #modal-pinnwand-share) ab — "+ Karte hinzufuegen" oeffnete unsichtbar.
     950 = ueber der Kopfzeile, unter jedem Modal. */
  z-index: 950;
  overflow-y: auto;
  display: none;
}
.pinnwand-detail.active { display: block; }
.pinnwand-detail-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
  gap: 12px;
}
.pinnwand-detail-header .back-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pinnwand-detail-header .back-btn:hover { background: var(--surface-2); color: var(--text); }
.pinnwand-detail-header h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.pinnwand-detail-body {
  padding: 24px 28px;
  max-width: 1600px;
  margin: 0 auto;
}

.columns-container {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  min-height: calc(100vh - 180px);
  align-items: flex-start;
}
.column {
  flex-shrink: 0;
  width: 300px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.column-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 4px;
}
.column-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  border: none;
  padding: 4px 6px;
  border-radius: 6px;
  width: 100%;
}
.column-title:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px var(--accent); }
.column-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  min-width: 22px;
  text-align: center;
  margin-left: 8px;
}
.cards-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 40px;
}

.card-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 13px;
  cursor: grab;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s;
  position: relative;
  border-left: 3px solid var(--accent);
}
.card-item.color-blue { border-left-color: var(--blue); }
.card-item.color-green { border-left-color: var(--green); }
.card-item.color-amber { border-left-color: var(--amber); }
.card-item.color-red { border-left-color: var(--red); }
.card-item.color-purple { border-left-color: var(--purple); }

/* Farbige Karten-Hintergründe (bg_style: "farbig") */
.card-item.bg-farbig.color-accent { background: var(--accent-bg); }
.card-item.bg-farbig.color-blue { background: var(--blue-bg); }
.card-item.bg-farbig.color-green { background: var(--green-bg); }
.card-item.bg-farbig.color-amber { background: var(--amber-bg); }
.card-item.bg-farbig.color-red { background: var(--red-bg); }
.card-item.bg-farbig.color-purple { background: var(--purple-bg); }

.card-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  border-color: var(--border-strong);
}
.card-item.dragging { opacity: 0.4; cursor: grabbing; }
.column.drag-over { background: var(--accent-soft); border-color: var(--accent); }

/* === Datei-Drop auf Spalten (Lehrer) === */
.column.file-drag-over {
  background: var(--accent-bg) !important;
  border: 2px dashed var(--accent) !important;
  position: relative;
}
.column.file-drag-over::before {
  content: '📎 Datei hier ablegen → neue Karte';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  color: white;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  pointer-events: none;
  box-shadow: var(--shadow-md);
  z-index: 5;
}

/* Upload-Fortschritts-Overlay beim Datei-Drop */
.column-upload-progress {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  padding: 10px;
  text-align: center;
  font-size: 13px;
  color: var(--amber);
  font-weight: 500;
  z-index: 4;
}

.card-item-title { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.card-item-text { font-size: 13px; color: var(--text-muted); line-height: 1.45; }

.card-attachments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.card-attachment {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
  transition: all 0.15s;
}
.card-attachment:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.card-attachment .file-icon { font-size: 15px; }
.card-attachment .file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-attachment .file-size { font-size: 10px; color: var(--text-soft); }

.card-yt-embed {
  margin-top: 8px;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
.card-yt-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

.card-link-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.15s;
}
.card-link-preview:hover { background: var(--accent-soft); border-color: var(--accent); }
.card-link-preview .link-icon { font-size: 16px; }
.card-link-preview .link-domain { color: var(--text-muted); font-size: 11px; }

.card-item-actions {
  position: absolute;
  top: 6px; right: 6px;
  opacity: 0;
  display: flex;
  gap: 2px;
}
.card-item:hover .card-item-actions { opacity: 1; }

.add-card-btn {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
  padding: 9px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  margin-top: 8px;
  transition: all 0.15s;
  display: block;
  width: 100%;
  text-align: center;
  user-select: none;
  box-sizing: border-box;
}
.add-card-btn:hover { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); border-style: solid; }
.add-card-btn.file-drag-over {
  background: var(--accent-soft);
  border-color: var(--accent);
  border-style: solid;
  border-width: 2px;
  color: var(--accent-dark);
  transform: scale(1.02);
}

.add-column-btn {
  flex-shrink: 0;
  width: 300px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  padding: 20px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  transition: all 0.15s;
  align-self: flex-start;
}
.add-column-btn:hover { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); }

/* === File-Upload-Zone im Karten-Modal === */
.file-upload-zone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--surface-2);
}
.file-upload-zone:hover { border-color: var(--accent); background: var(--accent-soft); }
.file-upload-zone.drag-over { border-color: var(--accent); background: var(--accent-soft); }
.file-upload-zone input { display: none; }
.file-upload-zone .upload-icon { font-size: 28px; margin-bottom: 4px; color: var(--text-muted); }
.file-upload-zone .upload-text { font-size: 13px; color: var(--text-muted); }
.file-upload-zone .upload-hint { font-size: 11px; color: var(--text-soft); margin-top: 4px; }

.uploaded-files-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.uploaded-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
.uploaded-file .file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uploaded-file .remove-file {
  background: transparent;
  border: none;
  color: var(--red);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 14px;
}
.upload-progress {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.upload-progress-bar {
  height: 100%;
  background: var(--accent);
  transition: width 0.2s;
}


/* === Altes Chat-DOM (legacy, versteckt, aber im DOM, damit app.js nicht crasht) === */
.legacy-chat-dom,
.legacy-chat-dom * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
}

/* === Altes Chat-CSS entfernt, neues Chat-CSS weiter unten === */

/* === Termin-Link-Button === */
.termin-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-dark);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.15s;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.termin-link-btn:hover {
  background: var(--accent);
  color: white;
  transform: scale(1.1);
}

/* === News: Mehrere Link-Pillen === */
.news-item-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* === News-Modal: Link-Liste === */
.news-links-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.news-link-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.news-link-row input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  min-width: 0;
}
.news-link-row input.url-input { flex: 2; }
.news-link-row .remove-link-btn {
  background: transparent;
  border: none;
  color: var(--red);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.news-link-row .remove-link-btn:hover { background: var(--red-soft); }
.add-link-btn {
  background: transparent;
  border: 1px dashed var(--border-strong);
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  margin-top: 4px;
  align-self: flex-start;
}
.add-link-btn:hover {
  color: var(--accent-dark);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.add-link-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* === Reactions-Tooltip (für Lehrer: zeigt Namen) === */
.reaction-btn[data-names]:hover::after {
  content: attr(data-names);
  position: absolute;
  background: rgba(0,0,0,0.85);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  max-width: 240px;
  z-index: 50;
  margin-top: 28px;
  pointer-events: none;
}
.reaction-btn { position: relative; }

@media (max-width: 600px) {
  .site-header { padding: 12px 16px; }
  .site-header h1 .title-line { font-size: 22px; }
  .site-header h1 .title-sub { font-size: 10px; }
  main { padding: 18px 16px 40px; }
  .panel { padding: 16px; }
  .pinnwaende-grid { grid-template-columns: 1fr; }
  .pinnwand-detail-header { padding: 12px 16px; }
  .pinnwand-detail-body { padding: 18px 16px; }
  .section-header h2 { font-size: 22px; }
  .chat-panel { width: 100%; right: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .card-pdf-preview .pdf-iframe-wrapper { height: 400px; }
}


/* === Paket Quiz 1: Quiz-System === */

/* ========== QUIZ SETTINGS CARDS (neue UI) ========== */
.quiz-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 4px;
}
.quiz-setting-card {
  position: relative;
  display: block;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s ease;
  margin: 0;
}
.quiz-setting-card:hover {
  border-color: var(--accent);
  background: #f8fafb;
}
.quiz-setting-card.active {
  border-color: var(--accent);
  background: #e8f5f5;
  box-shadow: 0 2px 8px rgba(0, 128, 128, 0.08);
}
.quiz-setting-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.quiz-setting-card-content {
  display: flex;
  align-items: center;
  gap: 10px;
}
.quiz-setting-card-icon {
  font-size: 22px;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quiz-setting-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.quiz-setting-card-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 2px;
  text-transform: none;
  letter-spacing: normal;
}
.quiz-setting-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.3;
}
.quiz-setting-card.active .quiz-setting-card-title {
  color: var(--accent);
}
.quiz-setting-card.active::before {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 10px;
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
}

/* ========== QUIZ MANAGEMENT CARDS ========== */
.quiz-mgmt-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  transition: all 0.15s ease;
}
.quiz-mgmt-card:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  border-color: #d0d7de;
}
.quiz-mgmt-card.quiz-mgmt-active {
  border-left: 4px solid #ef4444;
  background: #fffafa;
}
.quiz-mgmt-card.quiz-mgmt-draft {
  border-left: 4px solid #f59e0b;
  background: #fffbf0;
}
.quiz-mgmt-card.quiz-mgmt-closed {
  border-left: 4px solid #9ca3af;
  opacity: 0.85;
}
.quiz-mgmt-card-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.quiz-mgmt-card-icon {
  font-size: 28px;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-radius: 10px;
}
.quiz-mgmt-card-body {
  flex: 1 1 auto;
  min-width: 0;
}
.quiz-mgmt-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.quiz-mgmt-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.quiz-mgmt-meta-item {
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--surface-2);
  border-radius: 12px;
}
.quiz-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.quiz-badge-active {
  background: #fee2e2;
  color: #b91c1c;
}
.quiz-badge-draft {
  background: #fef3c7;
  color: #92400e;
}
.quiz-badge-closed {
  background: var(--border);
  color: #4b5563;
}
.quiz-mgmt-stats {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.quiz-mgmt-stats-empty {
  font-style: italic;
  color: #9ca3af;
}
.quiz-mgmt-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

@media (max-width: 600px) {
  .quiz-settings-grid { grid-template-columns: 1fr; }
  .quiz-mgmt-card-actions .btn { font-size: 12px; padding: 6px 10px; }
}

/* =============================================================
   === Paket Chat - Premium Design (WhatsApp-inspired, cleaner) ===
   ============================================================= */

/* Farbpalette */
:root {
  --wa-primary: #008069;
  --wa-primary-dark: #005c4b;
  --wa-primary-grad: linear-gradient(135deg, #00a884 0%, #008069 100%);
  --wa-mine: #d9fdd3;
  --wa-mine-dark: #c7f4bd;
  --wa-other: #ffffff;
  --wa-green: #25d366;
  --wa-unread: #25d366;
  --wa-read: #53bdeb;
  --wa-chat-bg: #efeae2;
  --wa-sidebar: #ffffff;
  --wa-sidebar-head: #f0f2f5;
  --wa-border: #e9edef;
  --wa-text: #111b21;
  --wa-text-sub: #667781;
  --wa-text-mute: #8696a0;
  --wa-hover: #f5f6f6;
  --wa-active: #f0f2f5;
}

/* Chat-Button-Badge */
.chat-btn-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444;
  color: white;
  border-radius: 10px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid white;
}

/* Modal-Hülle */
.chat-overlay {
  z-index: 15000;
  background: rgba(11, 20, 26, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.chat-modal {
  max-width: 1400px;
  width: 95vw;
  height: 92vh;
  max-height: 960px;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--wa-sidebar);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.4);
}
.chat-wrap { display: flex; flex: 1; min-height: 0; height: 100%; }

/* Phase 1.56 — Chat als Vollbild-Seite: dezente Header-Leiste oben.
   Verwendet Theme-Variablen (default: NLL-Teal), die ueber JS pro Theme gesetzt werden. */
.chat-page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--chat-theme-primary, #1f49ff), var(--chat-theme-dark, #143bd6));
  color: #fff;
  border-radius: 14px 14px 0 0;
  flex: 0 0 auto;
  position: relative;
  z-index: 10;
}
/* Phase 1.56 — "Design wählen"-Button in der Sidebar (links neben "Chats") */
.chat-theme-side-btn {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.08);
  color: #1f2937;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  transition: all 0.15s;
  margin-right: 8px;
}
.chat-theme-side-btn:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

/* =================================================================
 * THEME-OVERRIDES — pro Theme alle relevanten --wa-Variablen setzen.
 * Wirkt automatisch durch das ganze Chat-Layout (Sidebar, Items,
 * Bubbles, Eingabe, Send-Button, Hover-State, ...) weil das Chat-CSS
 * konsequent var(--wa-*) verwendet.
 * ================================================================= */

/* 🟢 NLL Default — Teal-Grün, M9-Logo-Farben */
#nll-chat-modal.theme-m9-default {
  --wa-primary:        #1f49ff;
  --wa-primary-dark:   #143bd6;
  --wa-primary-grad:   linear-gradient(135deg, #5b7cff 0%, #1f49ff 100%);
  --wa-mine:           #ccfbf1;
  --wa-mine-dark:      #99f6e4;
  --wa-other:          #ffffff;
  --wa-green:          #10b981;
  --wa-unread:         #5b7cff;
  --wa-read:           #06b6d4;
  --wa-chat-bg:        #f0fdfa;
  --wa-sidebar:        #ffffff;
  --wa-sidebar-head:   #f0fdfa;
  --wa-border:         var(--border);
  --wa-text:           #134e4a;
  --wa-text-sub:       #5e7570;
  --wa-text-mute:      #94a3b8;
  --wa-hover:          #f0fdfa;
  --wa-active:         #ccfbf1;
}

/* 🔵 Cool Ocean — Blau-Töne, sachlich */
#nll-chat-modal.theme-cool-ocean {
  --wa-primary:        #2563eb;
  --wa-primary-dark:   #1d4ed8;
  --wa-primary-grad:   linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --wa-mine:           #dbeafe;
  --wa-mine-dark:      #bfdbfe;
  --wa-other:          #ffffff;
  --wa-green:          #06b6d4;
  --wa-unread:         #2563eb;
  --wa-read:           #0ea5e9;
  --wa-chat-bg:        #eff6ff;
  --wa-sidebar:        #ffffff;
  --wa-sidebar-head:   #eff6ff;
  --wa-border:         #e0e7ff;
  --wa-text:           #1e3a8a;
  --wa-text-sub:       #475569;
  --wa-text-mute:      #94a3b8;
  --wa-hover:          #eff6ff;
  --wa-active:         #dbeafe;
}

/* 🟣 Sunset — Lila/Pink, warm */
#nll-chat-modal.theme-sunset {
  --wa-primary:        #c026d3;
  --wa-primary-dark:   #a21caf;
  --wa-primary-grad:   linear-gradient(135deg, #e879f9 0%, #c026d3 50%, #db2777 100%);
  --wa-mine:           #fae8ff;
  --wa-mine-dark:      #f5d0fe;
  --wa-other:          #ffffff;
  --wa-green:          #ec4899;
  --wa-unread:         #c026d3;
  --wa-read:           #a78bfa;
  --wa-chat-bg:        #fdf4ff;
  --wa-sidebar:        #ffffff;
  --wa-sidebar-head:   #fdf4ff;
  --wa-border:         #f3e8ff;
  --wa-text:           #581c87;
  --wa-text-sub:       #6b21a8;
  --wa-text-mute:      #a78bfa;
  --wa-hover:          #fdf4ff;
  --wa-active:         #f3e8ff;
}

/* 🟠 Citrus — Orange/Gelb, energetisch */
#nll-chat-modal.theme-citrus {
  --wa-primary:        #ea580c;
  --wa-primary-dark:   #c2410c;
  --wa-primary-grad:   linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
  --wa-mine:           #fef3c7;
  --wa-mine-dark:      #fde68a;
  --wa-other:          #ffffff;
  --wa-green:          #16a34a;
  --wa-unread:         #ea580c;
  --wa-read:           #f59e0b;
  --wa-chat-bg:        #fffbeb;
  --wa-sidebar:        #ffffff;
  --wa-sidebar-head:   #fffbeb;
  --wa-border:         #fed7aa;
  --wa-text:           #7c2d12;
  --wa-text-sub:       #9a3412;
  --wa-text-mute:      #c2965f;
  --wa-hover:          #fffbeb;
  --wa-active:         #fef3c7;
}

/* ⚫ Dark Mode — komplett dunkel, helle Akzente */
#nll-chat-modal.theme-dark-mode {
  --wa-primary:        #38bdf8;
  --wa-primary-dark:   #0ea5e9;
  --wa-primary-grad:   linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  --wa-mine:           #1e40af;
  --wa-mine-dark:      #1e3a8a;
  --wa-other:          #334155;
  --wa-green:          #22d3ee;
  --wa-unread:         #38bdf8;
  --wa-read:           #67e8f9;
  --wa-chat-bg:        #0f172a;
  --wa-sidebar:        #1e293b;
  --wa-sidebar-head:   #0f172a;
  --wa-border:         #334155;
  --wa-text:           #f1f5f9;
  --wa-text-sub:       #cbd5e1;
  --wa-text-mute:      #94a3b8;
  --wa-hover:          #334155;
  --wa-active:         #1e293b;
}
/* Dark-Mode Spezialfaelle: Eingabefelder + Search lesbar machen */
#nll-chat-modal.theme-dark-mode .chat-input,
#nll-chat-modal.theme-dark-mode .chat-search {
  background: #334155;
  color: #f1f5f9;
  border-color: #475569;
}
#nll-chat-modal.theme-dark-mode .chat-input::placeholder,
#nll-chat-modal.theme-dark-mode .chat-search::placeholder {
  color: #94a3b8;
}
#nll-chat-modal.theme-dark-mode .chat-modal,
#nll-chat-modal.theme-dark-mode .chat-main,
#nll-chat-modal.theme-dark-mode .chat-messages {
  background: var(--wa-chat-bg);
}
/* Bubbles im Dark-Mode: helle Schrift auf dunklem Bg */
#nll-chat-modal.theme-dark-mode .chat-msg-bubble {
  color: #f1f5f9;
}
/* In allen Light-Themes: Chat-Mitte (messages-Bereich) bekommt Theme-Bg */
#nll-chat-modal[class*="theme-"]:not(.theme-dark-mode) .chat-messages,
#nll-chat-modal[class*="theme-"]:not(.theme-dark-mode) .chat-main {
  background: var(--wa-chat-bg);
}
.chat-page-brand {
  display: flex; align-items: baseline; gap: 8px;
  flex: 1;
  margin-left: 6px;
  user-select: none;
}
.chat-page-brand-mark {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: #fff;
  background: rgba(255,255,255,0.18);
  padding: 4px 10px;
  border-radius: 8px;
}
.chat-page-brand-sub {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.85;
}
.chat-page-actions {
  display: flex; align-items: center; gap: 8px;
}
/* Im Vollbild-Modus: Header-Leiste ohne abgerundete Ecken */
.modal-overlay.modal-fullscreen-page .chat-page-header {
  border-radius: 0;
}
/* Im Vollbild-Modus: Back-Button im Header sieht auf weissem Bg gut aus.
   Bei chat-page-header ist Bg gruen → invertieren */
.modal-overlay.modal-fullscreen-page .chat-page-header .modal-back-btn {
  background: rgba(255,255,255,0.92);
  color: #134e4a;
}
.modal-overlay.modal-fullscreen-page .chat-page-header .modal-back-btn:hover {
  background: #fff;
}
/* Bei mobilen Geraeten: Brand-Sub ausblenden, mehr Platz */
@media (max-width: 640px) {
  .chat-page-brand-sub { display: none; }
  .chat-page-header { padding: 8px 10px; gap: 8px; }
}

/* ===========================================================
   SIDEBAR
   =========================================================== */
.chat-sidebar {
  width: 370px;
  min-width: 320px;
  max-width: 420px;
  border-right: 1px solid var(--wa-border);
  display: flex;
  flex-direction: column;
  background: var(--wa-sidebar);
  position: relative;
}

.chat-sidebar-head {
  padding: 12px 18px;
  background: var(--wa-primary-grad);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 62px;
  position: relative;
}
.chat-sidebar-head::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0,0,0,0.1);
}
.chat-sidebar-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-sidebar-head-actions { display: flex; gap: 4px; align-items: center; }
.chat-reports-btn {
  background: #ef4444;
  color: white;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-weight: 700;
  animation: reportPulse 2s ease-in-out infinite;
}
.chat-reports-btn:hover { background: #dc2626; transform: scale(1.05); }
@keyframes reportPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}
.chat-close-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  font-size: 18px;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: background 0.15s;
}
.chat-close-btn:hover { background: rgba(255,255,255,0.28); }

/* Status-Banner (Lehrer: Erreichbar/Nicht erreichbar) */
.chat-sidebar-status {
  padding: 10px 18px;
  background: #fffbea;
  border-bottom: 1px solid #fbdf88;
}
.chat-status-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #78350f;
  font-weight: 600;
}
.chat-status-toggle input[type="checkbox"] { display: none; }
.chat-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.2s;
  position: relative;
}
.chat-status-dot.online {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
}
.chat-status-dot.online::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.4);
  animation: pulseDot 1.6s ease-out infinite;
}
@keyframes pulseDot {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}
.chat-status-dot.offline { background: #94a3b8; }

/* Suchleiste */
.chat-search-wrap {
  padding: 8px 12px;
  background: var(--wa-sidebar);
}
.chat-search {
  width: 100%;
  padding: 10px 14px 10px 42px;
  border: none;
  border-radius: 12px;
  background: var(--wa-active);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238696a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
  background-repeat: no-repeat;
  background-position: 14px center;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  color: var(--wa-text);
  transition: all 0.2s;
}
.chat-search::placeholder { color: var(--wa-text-mute); }
.chat-search:focus {
  background-color: white;
  box-shadow: 0 0 0 2px var(--wa-primary);
}

.chat-sidebar-actions {
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--wa-border);
  background: var(--wa-sidebar);
}
.chat-sidebar-actions .btn {
  background: var(--wa-primary-grad);
  border: none;
  color: white;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 2px 6px rgba(0, 128, 105, 0.3);
}
.chat-sidebar-actions .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 128, 105, 0.4);
}

.chat-list {
  flex: 1;
  overflow-y: auto;
  background: var(--wa-sidebar);
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.chat-list::-webkit-scrollbar { width: 6px; }
.chat-list::-webkit-scrollbar-track { background: transparent; }
.chat-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

.chat-loading, .chat-empty-list {
  padding: 50px 20px;
  text-align: center;
  color: var(--wa-text-mute);
  font-size: 14px;
}

/* List-Item - WhatsApp-like */
.chat-li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.12s;
  position: relative;
  user-select: none;
}
.chat-li:hover { background: var(--wa-hover); }
.chat-li.active { background: var(--wa-hover); }
.chat-li.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--wa-primary);
}

/* Avatar */
.chat-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  flex-shrink: 0;
  text-transform: uppercase;
  user-select: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
  letter-spacing: 0.5px;
}
.chat-avatar-sm {
  width: 40px;
  height: 40px;
  font-size: 14px;
}
.chat-avatar-group {
  font-size: 22px !important;
  background: var(--wa-primary-grad) !important;
}

.chat-li-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chat-li-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.chat-li-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--wa-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat-li-time {
  font-size: 12px;
  color: var(--wa-text-mute);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.chat-li.has-unread .chat-li-time { color: var(--wa-primary); font-weight: 700; }
.chat-li-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.chat-li-preview {
  font-size: 14px;
  color: var(--wa-text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  line-height: 1.35;
}
.chat-li-preview.empty {
  font-style: italic;
  opacity: 0.6;
}
.chat-li-preview-prefix {
  color: var(--wa-text-mute);
  font-weight: 500;
}
.chat-li-typing {
  font-size: 14px;
  color: var(--wa-primary);
  font-style: italic;
  font-weight: 500;
}
.chat-li-unread {
  background: var(--wa-unread);
  color: white;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(37, 211, 102, 0.35);
}
.chat-li-muted {
  font-size: 13px;
  opacity: 0.55;
}

/* ===========================================================
   MAIN-BEREICH (rechts)
   =========================================================== */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--wa-chat-bg);
  /* Subtiles Doodle-Pattern (WhatsApp-like) */
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.25) 1.5px, transparent 2px),
    radial-gradient(circle at 85% 60%, rgba(255,255,255,0.2) 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,0.15) 1.5px, transparent 2px),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.18) 1px, transparent 2px),
    linear-gradient(var(--wa-chat-bg), var(--wa-chat-bg));
  background-size: 120px 120px, 100px 100px, 80px 80px, 140px 140px, 100% 100%;
  background-position: 0 0, 50px 30px, 20px 60px, 80px 80px, 0 0;
}

.chat-main-head {
  padding: 12px 18px;
  border-bottom: 1px solid var(--wa-border);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  background: var(--wa-sidebar-head);
  min-height: 62px;
}
.chat-back-btn {
  display: none;
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--wa-text-sub);
}
.chat-back-btn:hover { background: #e9edef; }
.chat-main-head-info { flex: 1; min-width: 0; }
.chat-main-head-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--wa-text);
  line-height: 1.2;
}
.chat-main-head-meta {
  font-size: 13px;
  color: var(--wa-text-sub);
  margin-top: 2px;
}
.chat-main-head-actions { display: flex; gap: 4px; flex-shrink: 0; }
.chat-icon-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wa-text-sub);
  transition: background 0.15s;
}
.chat-icon-btn:hover { background: #e9edef; }

/* Nachrichten-Scrollcontainer */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 6%;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: #9ca3af transparent;
  position: relative;
}
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 3px; }

/* Empty-State - richtig schön */
.chat-empty-main, .chat-empty-messages {
  text-align: center;
  padding: 40px 20px;
  margin: auto;
  color: var(--wa-text-sub);
  animation: fadeInUp 0.4s ease;
}
.chat-empty-ico {
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.3));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
}
/* Phase 1.56 — M9-Logo statt Sprechblase im Empty-State */
.chat-empty-logo {
  width: 180px;
  height: auto;
  max-height: 180px;
  margin: 0 auto 22px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,0.12));
  animation: chatLogoFloat 3s ease-in-out infinite;
}
@keyframes chatLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (max-width: 640px) {
  .chat-empty-logo { width: 130px; max-height: 130px; margin-bottom: 16px; }
}
.chat-empty-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--wa-text);
  margin: 0 0 6px;
}
.chat-empty-sub {
  font-size: 14px;
  color: var(--wa-text-sub);
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.5;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Datums-Trenner */
.chat-date-separator {
  text-align: center;
  margin: 14px 0 10px;
  display: flex;
  justify-content: center;
}
.chat-date-separator span {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(225, 245, 254, 0.92);
  color: var(--wa-text-sub);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  text-transform: capitalize;
}

/* ===========================================================
   NACHRICHTEN-BUBBLES (vereinfacht, robust, schön)
   =========================================================== */
.chat-msg {
  margin-bottom: 4px;
  max-width: 72%;
  display: flex;
  flex-direction: column;
  position: relative;
  animation: msgIn 0.18s ease-out;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.other { align-self: flex-start; align-items: flex-start; }
.chat-msg.deleted { opacity: 0.7; max-width: 60%; }

.chat-msg.chat-msg-highlight .chat-msg-bubble {
  animation: highlightPulse 1.8s ease;
}
@keyframes highlightPulse {
  0%, 100% { box-shadow: 0 1px 1px rgba(0,0,0,0.1); }
  40% { box-shadow: 0 0 0 8px rgba(251, 191, 36, 0.45); transform: scale(1.02); }
}

.chat-msg-sender {
  font-size: 13px;
  font-weight: 600;
  margin: 0 12px 3px;
  letter-spacing: 0.1px;
}
.chat-msg-broadcast {
  display: inline-block;
  font-size: 10px;
  color: #b45309;
  background: #fef3c7;
  padding: 3px 9px;
  border-radius: 10px;
  font-weight: 700;
  margin: 0 0 4px 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chat-msg-bubble {
  padding: 8px 12px 8px 12px;
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  position: relative;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  line-height: 1.4;
}

/* Eigene Nachricht (grüne Bubble rechts) */
.chat-msg.mine .chat-msg-bubble {
  background: var(--wa-mine);
  color: var(--wa-text);
  border-radius: 10px 10px 3px 10px;
}
/* Fremde Nachricht (weiße Bubble links) */
.chat-msg.other .chat-msg-bubble {
  background: var(--wa-other);
  color: var(--wa-text);
  border-radius: 3px 10px 10px 10px;
}

.chat-msg.deleted .chat-msg-bubble.deleted-bubble {
  background: rgba(255,255,255,0.7) !important;
  color: var(--wa-text-mute);
  font-style: italic;
  border: 1px dashed var(--wa-border);
}

.chat-msg-text {
  font-size: 14.5px;
  line-height: 1.42;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--wa-text);
}
.chat-msg-text a {
  color: #027eb5;
  text-decoration: underline;
  word-break: break-all;
}

.chat-msg-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--wa-text-mute);
  line-height: 14px;
}
.chat-msg-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chat-msg-edited { font-style: italic; font-size: 10px; opacity: 0.8; }
.chat-msg-read {
  color: var(--wa-text-mute);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  margin-left: 2px;
}
.chat-msg-read.read { color: var(--wa-read); }

/* Zitat innerhalb Bubble */
.chat-msg-quote {
  padding: 7px 12px 7px 14px;
  border-left: 4px solid var(--wa-primary);
  background: rgba(0, 128, 105, 0.07);
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.15s;
}
.chat-msg-quote:hover { background: rgba(0, 128, 105, 0.15); }
.chat-msg-quote-author {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wa-primary);
  margin-bottom: 2px;
}
.chat-msg-quote-text {
  font-size: 13px;
  color: var(--wa-text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-msg-quote.chat-msg-quote-missing {
  font-style: italic;
  color: var(--wa-text-mute);
  font-size: 12px;
  border-left-color: #cbd5e1;
}
.chat-msg.mine .chat-msg-quote {
  background: rgba(0, 0, 0, 0.05);
}
.chat-msg.mine .chat-msg-quote:hover { background: rgba(0, 0, 0, 0.1); }

/* Reaktionen */
.chat-msg-reactions {
  display: flex;
  gap: 3px;
  margin-top: -6px;
  margin-left: 6px;
  margin-right: 6px;
  flex-wrap: wrap;
  z-index: 2;
  position: relative;
}
.chat-reaction-badge {
  padding: 2px 8px;
  background: white;
  border: 1px solid var(--wa-border);
  border-radius: 14px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: transform 0.1s;
}
.chat-reaction-badge span {
  font-size: 11px;
  color: var(--wa-text-sub);
  font-weight: 600;
}
.chat-reaction-badge:hover { transform: scale(1.08); border-color: var(--wa-primary); }

/* Action-Menü */
.chat-msg-actions {
  display: none;
  position: absolute;
  top: -18px;
  right: 4px;
  background: white;
  border: 1px solid var(--wa-border);
  border-radius: 22px;
  padding: 3px 5px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  gap: 0;
  z-index: 5;
}
.chat-msg.mine .chat-msg-actions { right: auto; left: 4px; }
.chat-msg:hover .chat-msg-actions { display: flex; }
.chat-msg-action {
  background: transparent;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1;
}
.chat-msg-action:hover { background: var(--wa-active); }
.chat-msg-action.chat-msg-del:hover { background: #fee2e2; }
.chat-msg-action.chat-msg-report:hover { background: #fff7ed; }

.chat-reaction-picker {
  position: absolute;
  top: 24px;
  right: 4px;
  background: white;
  border: 1px solid var(--wa-border);
  border-radius: 26px;
  padding: 4px 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  display: flex;
  gap: 2px;
  z-index: 10;
  animation: reactionPopIn 0.15s ease;
}
@keyframes reactionPopIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-msg.mine .chat-reaction-picker { right: auto; left: 4px; }
.chat-reaction-picker-btn {
  background: transparent;
  border: none;
  padding: 6px 8px;
  font-size: 22px;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.12s;
  line-height: 1;
}
.chat-reaction-picker-btn:hover { background: var(--wa-active); transform: scale(1.3); }

.chat-typing-msg {
  align-self: flex-start;
  background: white;
  padding: 10px 16px;
  border-radius: 16px;
  border-top-left-radius: 4px;
  font-size: 13px;
  color: var(--wa-primary);
  font-style: italic;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  margin: 4px 0;
  max-width: 180px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.chat-typing-msg::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--wa-primary);
  border-radius: 50%;
  animation: typingDot 1s ease-in-out infinite;
}
@keyframes typingDot {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Quote-Preview oberhalb Input */
.chat-quote-preview {
  padding: 0;
  display: none;
  background: var(--wa-sidebar-head);
  border-top: 1px solid var(--wa-border);
}
.chat-quote-inner {
  padding: 10px 18px;
  background: white;
  border-left: 4px solid var(--wa-primary);
  margin: 8px 14px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.chat-quote-inner.edit { border-left-color: #0891b2; background: #ecfeff; }
.chat-quote-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--wa-primary);
  margin-bottom: 3px;
}
.chat-quote-inner.edit .chat-quote-label { color: #0891b2; }
.chat-quote-text-preview {
  font-size: 13px;
  color: var(--wa-text-sub);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}
.chat-quote-cancel {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  padding: 6px 12px;
  border-radius: 50%;
  color: var(--wa-text-sub);
  transition: background 0.15s;
}
.chat-quote-cancel:hover { background: var(--wa-active); }

/* Input-Bereich */
.chat-input-wrap {
  padding: 10px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-end;
  background: var(--wa-sidebar-head);
  flex-shrink: 0;
  border-top: 1px solid var(--wa-border);
}
.chat-input {
  flex: 1;
  padding: 11px 16px;
  border: none;
  border-radius: 22px;
  font-family: inherit;
  font-size: 15px;
  resize: none;
  max-height: 120px;
  line-height: 1.4;
  background: white;
  outline: none;
  color: var(--wa-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: box-shadow 0.15s;
}
.chat-input:focus {
  box-shadow: 0 0 0 2px rgba(0, 128, 105, 0.3);
}
.chat-input::placeholder { color: var(--wa-text-mute); }

.chat-send-btn {
  background: var(--wa-primary-grad);
  color: white;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  box-shadow: 0 3px 10px rgba(0, 128, 105, 0.4);
}
.chat-send-btn:hover { transform: scale(1.08) rotate(-5deg); box-shadow: 0 5px 14px rgba(0, 128, 105, 0.5); }
.chat-send-btn:active { transform: scale(0.96); }
.chat-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Error-Banner */
.chat-error-banner {
  background: #fef2f2;
  color: #991b1b;
  border-top: 1px solid #fecaca;
  padding: 12px 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: errorSlideIn 0.3s ease;
}
@keyframes errorSlideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Members-Modal */
.chat-members-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 400px;
  overflow-y: auto;
}
.chat-member-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 0.15s;
}
.chat-member-item:hover { background: var(--wa-hover); }

/* Reports */
.chat-report-item {
  border: 1px solid #fecaca;
  background: #fef2f2;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
}
.chat-report-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.chat-report-reason {
  font-size: 13px;
  color: #7f1d1d;
  margin: 8px 0;
  font-style: italic;
  padding: 6px 10px;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 6px;
}
.chat-report-snapshot {
  padding: 10px 14px;
  background: white;
  border-radius: 8px;
  font-size: 14px;
  margin: 10px 0;
  border-left: 3px solid #ef4444;
  line-height: 1.4;
}
.chat-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

/* Broadcast */
.chat-bc-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border, var(--border));
}
.chat-bc-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border, var(--border));
  border-radius: 10px;
  padding: 10px;
  background: #fafafa;
}
.chat-bc-classgroup { margin-bottom: 12px; }
.chat-bc-class-label {
  font-weight: 700;
  color: var(--wa-primary);
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chat-bc-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.chat-bc-user:hover { background: #f3f4f6; }
.chat-bc-user input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--wa-primary);
}

/* Mobile (< 760px) */
@media (max-width: 760px) {
  .chat-overlay { padding: 0 !important; }
  .chat-modal {
    width: 100vw !important;
    /* 100dvh = dynamic viewport height: berücksichtigt Browser-Toolbars (iOS Safari, Android Chrome).
       Fallback 100vh für ältere Browser, 100dvh für neuere. */
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    margin: 0 !important;
    /* Notch & Safe-Area-Schutz für iPhones (Notch oben, Home-Indikator unten) */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
  }
  .chat-sidebar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-right: none;
  }
  .chat-main { display: none; }
  .chat-mobile-main .chat-sidebar { display: none; }
  .chat-mobile-main .chat-main { display: flex; }
  .chat-back-btn { display: block; }
  .chat-msg { max-width: 88%; }
  .chat-messages { padding: 12px 3%; }
  /* Header & Footer: Mindesthöhen damit sie nicht zerquetscht werden */
  .chat-main-head { padding: 10px 14px; flex-shrink: 0; }
  .chat-sidebar-head { padding: 12px 14px; flex-shrink: 0; }
  .chat-input-wrap {
    padding: 8px 10px;
    flex-shrink: 0;
    /* Extra Abstand unten falls Browser-Tab-Bar unten reinragt */
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
  }
  .chat-search-wrap { padding: 8px 10px; flex-shrink: 0; }
  .chat-input { font-size: 16px; } /* iOS Zoom-Schutz */
  .chat-msg-actions {
    display: flex;
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    margin-top: 3px;
    opacity: 0.55;
  }
  .chat-msg:hover .chat-msg-actions { opacity: 1; }
  .chat-msg-action { padding: 4px 10px; font-size: 13px; }
  .chat-avatar { width: 48px; height: 48px; font-size: 16px; }
  .chat-li { padding: 11px 14px; gap: 12px; }
  .chat-empty-ico { width: 110px; height: 110px; font-size: 48px; }
  .chat-empty-title { font-size: 18px; }
}

/* === Paket Lehrer-ToDos === */
/* === Paket Lehrer-ToDos === */

.lt-card {
  background: var(--accent-soft);
  border: 1px solid var(--accent-bg);
  border-left: 4px solid var(--accent);
  padding: 14px 16px;
  margin-bottom: 10px;
}

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

.lt-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  color: var(--accent-dark);
}

.lt-icon {
  font-size: 20px;
}

.lt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  background: var(--accent);
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
}

.lt-add-btn {
  flex-shrink: 0;
}

.lt-empty {
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  opacity: 0.9;
  font-size: 13px;
}

.lt-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lt-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: white;
  border: 1px solid #fde68a;
  border-radius: 8px;
  transition: all 0.15s;
}

.lt-item:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  border-color: #fbbf24;
}

.lt-item.lt-done {
  opacity: 0.55;
  background: #fafaf9;
}

.lt-item.lt-done .lt-text {
  text-decoration: line-through;
  color: #78716c;
}

.lt-item.lt-prio-high {
  border-left: 4px solid #ef4444;
  background: linear-gradient(90deg, #fef2f2 0%, white 30%);
}

.lt-item.lt-due-overdue {
  border-left: 4px solid #dc2626;
  background: linear-gradient(90deg, #fee2e2 0%, white 30%);
}

.lt-item.lt-due-today {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(90deg, #fef3c7 0%, white 30%);
}

.lt-item.lt-due-soon {
  border-left: 4px solid #eab308;
}

/* Wenn high-prio UND überfällig: rot gewinnt */
.lt-item.lt-prio-high.lt-due-overdue {
  border-left: 4px solid #dc2626;
}

/* Checkbox */
.lt-check-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
  margin-top: 1px;
}

.lt-check-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
}

.lt-checkmark {
  width: 22px;
  height: 22px;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  background: white;
  display: inline-block;
  position: relative;
  transition: all 0.15s;
}

.lt-check-wrap:hover .lt-checkmark {
  border-color: #f59e0b;
}

.lt-check-wrap input[type="checkbox"]:checked ~ .lt-checkmark {
  background: #22c55e;
  border-color: #22c55e;
}

.lt-check-wrap input[type="checkbox"]:checked ~ .lt-checkmark::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 7px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.lt-content {
  flex: 1;
  min-width: 0;
}

.lt-text {
  font-size: 14px;
  color: #1f2937;
  word-wrap: break-word;
  line-height: 1.4;
}

.lt-prio-flag {
  display: inline-block;
  margin-right: 2px;
}

.lt-due {
  font-size: 12px;
  color: #6b7280;
  margin-top: 3px;
}

.lt-item.lt-due-overdue .lt-due {
  color: #dc2626;
  font-weight: 600;
}

.lt-item.lt-due-today .lt-due {
  color: #b45309;
  font-weight: 600;
}

.lt-actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s;
}

.lt-item:hover .lt-actions {
  opacity: 1;
}

.lt-action-btn {
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
}

.lt-action-btn:hover {
  background: #f3f4f6;
}

.lt-action-btn.lt-del:hover {
  background: #fee2e2;
}

/* Done-Sektion */
.lt-done-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #fde68a;
}

.lt-done-toggle {
  background: transparent;
  border: none;
  color: #92400e;
  cursor: pointer;
  font-size: 13px;
  padding: 4px 0;
  font-weight: 500;
}

.lt-done-toggle:hover {
  color: #78350f;
}

.lt-list-done {
  margin-top: 8px;
}

/* Editor-Modal */
.lt-prio-picker {
  display: flex;
  gap: 8px;
}

.lt-prio-btn {
  flex: 1;
  padding: 10px 8px;
  border: 2px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
}

.lt-prio-btn:hover {
  border-color: #f59e0b;
}

.lt-prio-btn.active[data-prio="normal"] {
  background: #e0f2fe;
  border-color: #0891b2;
  color: #0e7490;
}

.lt-prio-btn.active[data-prio="high"] {
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
}

.lt-quick-dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.lt-quick-dates small {
  margin-right: 6px;
}

/* Mobile */
@media (max-width: 600px) {
  .lt-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .lt-add-btn {
    align-self: stretch;
  }
  .lt-actions {
    opacity: 1;
  }
}

/* === Paket Quiz 2: Wettkampfmodus (Kahoot-Style) === */

/* WK Modal */
.wk-overlay .wk-modal {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: white;
}
.wk-overlay .wk-header {
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: white;
}
.wk-overlay .wk-header h3 { color: white; }
.wk-overlay .modal-body { color: white; }
.wk-overlay .modal-footer {
  background: rgba(255,255,255,0.05);
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Nickname-Input */
.wk-nickname-input {
  width: 100%;
  max-width: 320px;
  padding: 16px;
  font-size: 22px;
  text-align: center;
  border: 3px solid #0891b2;
  border-radius: 12px;
  background: white;
  color: #1e293b;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(8,145,178,0.3);
}
.wk-nickname-input:focus {
  outline: none;
  border-color: #22c55e;
  box-shadow: 0 4px 25px rgba(34,197,94,0.4);
}

/* Lobby */
.wk-lobby-count {
  display: inline-block;
  padding: 8px 20px;
  background: rgba(34,197,94,0.15);
  border: 1px solid #22c55e;
  border-radius: 20px;
  color: #86efac;
  font-weight: 600;
  margin-bottom: 15px;
}
.wk-lobby-players {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 15px;
  max-height: 200px;
  overflow-y: auto;
}
.wk-lobby-player {
  padding: 6px 14px;
  background: rgba(255,255,255,0.1);
  border-radius: 16px;
  font-size: 14px;
  color: white;
}
.wk-lobby-player.is-me {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1e293b;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(245,158,11,0.4);
}

/* Countdown-Bar (Schüler) */
.wk-countdown-bar {
  position: relative;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
}
.wk-countdown-fill {
  height: 100%;
  width: 100%;
  background: #22c55e;
  transition: width 0.2s linear, background 0.3s ease;
  border-radius: 20px;
}
.wk-countdown-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: white;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}

/* Frage im WK-Modus */
.wk-question-wrap {
  padding: 10px 0;
}
.wk-question-title {
  font-size: 22px;
  font-weight: 700;
  color: white;
  margin: 0 0 8px;
  line-height: 1.3;
}
.wk-question-meta {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 18px;
}
.wk-answer-area {
  margin-bottom: 14px;
}
.wk-answer-area .quiz-mc-label {
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.15);
  color: white;
}
.wk-answer-area .quiz-mc-label:hover {
  background: rgba(255,255,255,0.15);
  border-color: #22c55e;
}
.wk-answer-area .quiz-mc-label:has(input:checked) {
  background: rgba(34,197,94,0.2);
  border-color: #22c55e;
}
.wk-answer-area .quiz-ft-input-big {
  background: white;
  color: #1e293b;
}
.wk-answer-area .quiz-cloze-text,
.wk-answer-area .quiz-matching-left,
.wk-answer-area .quiz-ordering-label {
  background: rgba(255,255,255,0.1);
  color: white;
}
.wk-answer-area select {
  background: white;
  color: #1e293b;
}

.wk-btn-submit {
  width: 100%;
  padding: 16px;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: none;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.wk-btn-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #f59e0b, #b45309);
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(245,158,11,0.4);
}

/* Warten-Bildschirm */
.wk-waiting {
  text-align: center;
  padding: 40px 20px;
  color: white;
}
.wk-countdown-mini {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(245,158,11,0.2);
  border: 1px solid #f59e0b;
  border-radius: 20px;
  color: #fcd34d;
  font-weight: 600;
  margin-bottom: 15px;
}

/* Reveal-Phase Schüler */
.wk-reveal-wrap {
  padding: 10px 0;
  color: white;
}
.wk-answer-result {
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.wk-answer-result.correct {
  background: linear-gradient(135deg, rgba(34,197,94,0.2), rgba(22,163,74,0.2));
  border: 2px solid #22c55e;
}
.wk-answer-result.wrong {
  background: linear-gradient(135deg, rgba(239,68,68,0.2), rgba(220,38,38,0.2));
  border: 2px solid #ef4444;
}
.wk-answer-result.skipped {
  background: rgba(107,114,128,0.2);
  border: 2px solid #9ca3af;
}
.wk-points-badge {
  display: inline-block;
  padding: 8px 20px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1e293b;
  border-radius: 20px;
  font-weight: 700;
  font-size: 18px;
  margin-top: 10px;
  box-shadow: 0 2px 10px rgba(245,158,11,0.3);
}
.wk-points-badge.wrong {
  background: rgba(107,114,128,0.3);
  color: white;
  box-shadow: none;
}

.wk-my-score {
  text-align: center;
  padding: 14px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
}
.wk-my-score-label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 4px;
}
.wk-my-score-val {
  font-size: 24px;
  font-weight: 700;
  color: #fbbf24;
}

/* Leaderboard Schüler */
.wk-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
}
.wk-lb-row {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  font-size: 15px;
  color: white;
  transition: all 0.3s;
}
.wk-lb-row.is-me {
  background: linear-gradient(90deg, rgba(251,191,36,0.25), rgba(245,158,11,0.15));
  border: 2px solid #fbbf24;
}
.wk-lb-row.rank-1 { background: linear-gradient(90deg, rgba(250,204,21,0.3), rgba(251,191,36,0.15)); }
.wk-lb-row.rank-2 { background: linear-gradient(90deg, rgba(203,213,225,0.3), rgba(203,213,225,0.1)); }
.wk-lb-row.rank-3 { background: linear-gradient(90deg, rgba(217,119,6,0.3), rgba(217,119,6,0.1)); }
.wk-lb-medal {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.wk-lb-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wk-lb-score {
  font-weight: 700;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}
.wk-lb-separator {
  text-align: center;
  color: rgba(255,255,255,0.3);
}

/* Finished */
.wk-finished-wrap { color: white; }
.wk-final-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-top: 15px;
  font-size: 16px;
}
.wk-final-stats strong { color: #fbbf24; font-size: 20px; }

/* ========== BEAMER (Lehrer-Steuerung) ========== */
.wk-beamer-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #1e1b4b 100%);
  z-index: 20000;
  display: none;
  flex-direction: column;
  color: white;
  padding: 20px;
  overflow-y: auto;
}
.wk-beamer-overlay.active { display: flex; }
.wk-beamer-overlay .poll-present-close {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.1);
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 24px;
  cursor: pointer;
  z-index: 10;
}
.wk-beamer-overlay .poll-present-close:hover {
  background: rgba(239,68,68,0.3);
}
#wk-beamer-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.wk-beamer-controls {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 5;
}
.wk-beamer-btn {
  padding: 14px 28px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* Beamer Lobby */
.wk-beamer-lobby {
  text-align: center;
}
.wk-beamer-h1 {
  font-size: 48px;
  font-weight: 800;
  margin: 0 0 15px;
  color: white;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}
.wk-beamer-sub {
  font-size: 24px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 30px;
}
.wk-beamer-count-big {
  font-size: 120px;
  font-weight: 800;
  color: #fbbf24;
  line-height: 1;
  margin: 20px 0;
  text-shadow: 4px 4px 15px rgba(0,0,0,0.5);
}
.wk-beamer-count-big span {
  font-size: 32px;
  display: block;
  color: rgba(255,255,255,0.7);
  margin-top: 10px;
  font-weight: 600;
}
.wk-beamer-players {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-height: 280px;
  overflow-y: auto;
  padding: 10px;
}
.wk-beamer-player {
  padding: 10px 22px;
  background: rgba(251,191,36,0.15);
  border: 2px solid #fbbf24;
  border-radius: 24px;
  font-size: 20px;
  font-weight: 600;
  color: white;
  animation: popIn 0.4s ease;
}
@keyframes popIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Beamer Frage */
.wk-beamer-question { text-align: center; }
.wk-beamer-num {
  font-size: 22px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 15px;
}
.wk-beamer-countdown-wrap {
  max-width: 900px;
  margin: 0 auto 25px;
  position: relative;
}
.wk-beamer-countdown-bar {
  height: 35px;
  background: rgba(255,255,255,0.1);
  border-radius: 18px;
  overflow: hidden;
}
.wk-beamer-countdown-fill {
  height: 100%;
  width: 100%;
  background: #22c55e;
  border-radius: 18px;
  transition: width 0.2s linear, background 0.3s;
}
.wk-beamer-countdown-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: 800;
  color: white;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
}
.wk-beamer-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
  max-width: 1100px;
  margin: 20px auto;
}
.wk-beamer-options.wk-beamer-tf {
  grid-template-columns: 1fr 1fr;
  max-width: 700px;
}
.wk-beamer-option {
  padding: 25px 20px;
  border-radius: 14px;
  color: white;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 22px;
  font-weight: 600;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.wk-beamer-option-icon {
  font-size: 32px;
  min-width: 40px;
}
.wk-beamer-option-label {
  flex: 1;
  text-align: left;
}
.wk-beamer-freetext {
  text-align: center;
  font-size: 30px;
  color: rgba(255,255,255,0.5);
  padding: 40px;
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
  max-width: 700px;
  margin: 20px auto;
}
.wk-beamer-answered {
  text-align: center;
  font-size: 22px;
  color: #fbbf24;
  margin-top: 20px;
  font-weight: 600;
}

/* Beamer Reveal */
.wk-beamer-reveal { padding: 20px 0; }
.wk-beamer-reveal-h2 {
  text-align: center;
  color: #22c55e;
  font-size: 32px;
  margin: 0 0 20px;
}
.wk-beamer-solution {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}
.wk-beamer-solution-item {
  padding: 18px 24px;
  background: linear-gradient(90deg, rgba(34,197,94,0.2), rgba(22,163,74,0.1));
  border: 2px solid #22c55e;
  border-radius: 12px;
  font-size: 22px;
  color: white;
  font-weight: 600;
}
.wk-beamer-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 800px;
  margin: 0 auto;
}
.wk-beamer-lb-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  font-size: 20px;
  color: white;
}
.wk-beamer-lb-row.rank-1 {
  background: linear-gradient(90deg, rgba(250,204,21,0.4), rgba(251,191,36,0.2));
  border: 2px solid #fbbf24;
  font-size: 24px;
}
.wk-beamer-lb-row.rank-2 { background: linear-gradient(90deg, rgba(203,213,225,0.3), rgba(203,213,225,0.1)); }
.wk-beamer-lb-row.rank-3 { background: linear-gradient(90deg, rgba(217,119,6,0.3), rgba(217,119,6,0.1)); }
.wk-beamer-medal { font-size: 28px; text-align: center; font-weight: 700; }
.wk-beamer-name { font-weight: 600; }
.wk-beamer-score { font-weight: 700; color: #fbbf24; font-variant-numeric: tabular-nums; font-size: 22px; }

/* Beamer Finished */
.wk-beamer-finished { text-align: center; }
.wk-beamer-winners {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 30px;
  margin: 40px 0;
}
.wk-beamer-winner {
  padding: 20px 30px;
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
  min-width: 200px;
}
.wk-beamer-winner.rank-1 {
  background: linear-gradient(135deg, rgba(251,191,36,0.3), rgba(245,158,11,0.15));
  border: 3px solid #fbbf24;
  transform: scale(1.1);
  padding: 30px 40px;
  order: 2;
}
.wk-beamer-winner.rank-2 {
  background: linear-gradient(135deg, rgba(203,213,225,0.3), rgba(203,213,225,0.1));
  border: 2px solid #cbd5e1;
  order: 1;
}
.wk-beamer-winner.rank-3 {
  background: linear-gradient(135deg, rgba(217,119,6,0.3), rgba(217,119,6,0.1));
  border: 2px solid #d97706;
  order: 3;
}
.wk-beamer-winner-medal { font-size: 60px; }
.wk-beamer-winner-name { font-size: 24px; font-weight: 700; margin: 10px 0; color: white; }
.wk-beamer-winner-score { font-size: 20px; color: #fbbf24; font-weight: 700; }

@media (max-width: 700px) {
  .wk-beamer-h1 { font-size: 30px; }
  .wk-beamer-count-big { font-size: 80px; }
  .wk-beamer-winners { gap: 10px; }
  .wk-beamer-winner { min-width: 120px; padding: 12px; }
  .wk-beamer-option { font-size: 18px; padding: 18px 15px; }
}

/* Quiz-Fragen Darstellung (Schüler) */
.quiz-question-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--text);
}
.quiz-question-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.quiz-answer-area {
  margin-bottom: 14px;
}
.quiz-feedback-area {
  margin-top: 12px;
}
.quiz-feedback {
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
}
.quiz-feedback.correct {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}
.quiz-feedback.wrong {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

/* Multiple Choice */
.quiz-mc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quiz-mc-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.quiz-mc-label:hover {
  border-color: var(--accent);
  background: #f0f9fa;
}
.quiz-mc-label input { margin: 0; width: 18px; height: 18px; cursor: pointer; }
.quiz-mc-label:has(input:checked) {
  background: #e8f5f5;
  border-color: var(--accent);
}

/* True/False */
.quiz-tf-pick {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.quiz-tf-option {
  flex: 1;
  max-width: 200px;
  padding: 24px 16px;
  border: 2px solid var(--border);
  background: var(--surface);
  font-size: 18px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.quiz-tf-option:hover { border-color: var(--accent); }
.quiz-tf-option.selected.green {
  background: #dcfce7;
  border-color: #22c55e;
  color: #15803d;
}
.quiz-tf-option.selected.red {
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
}
.quiz-tf-picker {
  display: flex;
  gap: 12px;
}
.quiz-tf-btn {
  flex: 1;
  padding: 14px;
  border: 2px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}
.quiz-tf-btn.active.green {
  background: #dcfce7;
  border-color: #22c55e;
}
.quiz-tf-btn.active.red {
  background: #fee2e2;
  border-color: #ef4444;
}

/* Freetext */
.quiz-ft-input-big {
  width: 100%;
  padding: 14px;
  font-size: 18px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  margin-bottom: 6px;
}

/* Matching */
.quiz-matching-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quiz-matching-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.quiz-matching-left {
  flex: 1;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 8px;
  font-weight: 500;
}
.quiz-matching-select {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
}

/* Ordering */
.quiz-ordering-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quiz-ordering-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.quiz-ordering-select {
  width: 70px;
  padding: 8px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.quiz-ordering-label {
  flex: 1;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: 6px;
}

/* Cloze */
.quiz-cloze-text {
  font-size: 16px;
  line-height: 2;
  padding: 14px;
  background: var(--surface-2);
  border-radius: 8px;
}
.quiz-cloze-select {
  display: inline-block;
  padding: 4px 8px;
  border: 2px solid var(--accent);
  border-radius: 4px;
  background: white;
  font-family: inherit;
  font-size: 14px;
  margin: 0 2px;
}

/* Editor: Options/Pairs/Items */
.quiz-mc-option-row,
.quiz-ft-row,
.quiz-match-row,
.quiz-order-row,
.quiz-gap-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.quiz-mc-correct, .quiz-gap-correct {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.quiz-mc-input, .quiz-ft-input, .quiz-match-left, .quiz-match-right, .quiz-order-input, .quiz-gap-label {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
}
.quiz-order-num {
  font-weight: 600;
  color: var(--text-muted);
  min-width: 24px;
}
.quiz-gap-block {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  background: var(--surface-2);
}
.quiz-gap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* Ergebnis-Anzeige */
.quiz-result-wrap {
  padding: 10px 0;
}
.quiz-result-status {
  font-size: 16px;
  font-weight: 600;
  margin-top: 8px;
}
.quiz-result-status.pass { color: #15803d; }
.quiz-result-status.fail { color: #b91c1c; }
.quiz-result-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.quiz-result-item {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  border-left-width: 4px;
}
.quiz-result-item.right {
  border-left-color: #22c55e;
  background: #f0fdf4;
}
.quiz-result-item.wrong {
  border-left-color: #ef4444;
  background: #fef2f2;
}
.quiz-result-item-head {
  font-weight: 500;
  margin-bottom: 4px;
}
.quiz-result-given {
  font-size: 13px;
  color: var(--text-muted);
  padding-left: 8px;
}
.quiz-result-given ul, .quiz-result-given ol {
  margin: 4px 0 4px 18px;
  padding: 0;
}

/* Auswertung */
.quiz-eval-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.quiz-eval-stat {
  background: var(--surface-2);
  padding: 14px;
  border-radius: 8px;
  text-align: center;
}
.quiz-eval-stat-label { font-size: 12px; color: var(--text-muted); }
.quiz-eval-stat-val { font-size: 22px; font-weight: 700; color: var(--accent); }

.quiz-eval-userlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quiz-eval-userrow {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
}
.quiz-eval-userrow.pass { border-left: 4px solid #22c55e; }
.quiz-eval-userrow.fail { border-left: 4px solid #ef4444; }
.quiz-eval-userrow-name { font-weight: 600; }
.quiz-eval-userrow-attempts, .quiz-eval-userrow-status, .quiz-eval-userrow-score {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .quiz-eval-userrow { grid-template-columns: 1fr auto; font-size: 12px; }
  .quiz-eval-userrow-status, .quiz-eval-userrow-attempts { display: none; }
}

.quiz-eval-qlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quiz-eval-qrow {
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 8px;
}
.quiz-eval-qrow-head { font-weight: 500; margin-bottom: 4px; }
.quiz-eval-qrow-stats { font-size: 12px; color: var(--text-muted); }

.quiz-eval-ft-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.quiz-eval-ft-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
}
.quiz-eval-ft-row.right { background: #f0fdf4; }
.quiz-eval-ft-row.wrong { background: #fef2f2; }
.quiz-eval-ft-user { font-weight: 600; min-width: 100px; }
.quiz-eval-ft-answer { flex: 1; font-style: italic; }
.quiz-eval-manual { font-size: 11px; color: var(--accent); }

/* Korrekte Antwort im Beamer-Modus heller */
.poll-present-bar.correct-answer {
  border: 2px solid #22c55e;
  background: rgba(34, 197, 94, 0.08);
  padding: 8px;
  border-radius: 8px;
}

/* === Paket 8: Multi-Folien-Präsentationen === */

/* Größeres Modal für den Multi-Folien-Editor */
.modal-xxl {
  max-width: 1100px;
  width: 96%;
}

/* Editor-Oberbereich: Gesamt-Einstellungen */
.editor-settings {
  padding-bottom: 14px;
}
.form-group-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.form-group-row .form-group {
  flex: 1;
  min-width: 200px;
}
.editor-divider {
  border-top: 2px solid var(--border);
  margin: 10px 0 18px;
}

/* Folien-Editor: Tab-Navigation + Arbeitsbereich */
.editor-slides-wrap {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.editor-slides-nav {
  flex: 0 0 240px;
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  background: var(--surface-2);
}
.editor-slides-nav-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.editor-slide-tab {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
}
.editor-slide-tab:hover {
  border-color: var(--accent);
}
.editor-slide-tab.active {
  border-color: var(--accent);
  background: #e8f5f5;
  box-shadow: 0 0 0 2px rgba(16,19,25, 0.15);
}
.editor-slide-tab-num {
  font-weight: 700;
  color: var(--accent);
  font-size: 11px;
}
.editor-slide-tab-icon {
  display: inline-block;
  margin-right: 4px;
}
.editor-slide-tab-q {
  color: var(--text);
  margin-top: 2px;
  word-break: break-word;
}
.editor-slide-tab-actions {
  display: flex;
  gap: 3px;
  margin-top: 5px;
}
.editor-slide-tab-actions .btn-icon {
  font-size: 11px;
  width: 20px;
  height: 20px;
  padding: 0;
}
.editor-add-slide {
  width: 100%;
}
.editor-slide-area {
  flex: 1;
  min-width: 0;
}
/* Slide-Type-Picker im Editor: schöne Kacheln */
.editor-slide-type-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
  padding: 4px;
}
.editor-slide-type-picker .poll-type-btn {
  padding: 18px 10px 16px !important;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  color: var(--text);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 100px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.editor-slide-type-picker .poll-type-btn:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16,19,25, 0.12);
}
.editor-slide-type-picker .poll-type-btn.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, #e6f4f5 0%, #d1ebec 100%);
  box-shadow: 0 4px 14px rgba(16,19,25, 0.22), 0 0 0 3px rgba(16,19,25,0.10);
  transform: translateY(-1px);
}
.editor-slide-type-picker .poll-type-btn.active::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  background: white;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.editor-slide-type-picker .poll-type-btn .poll-type-icon {
  font-size: 32px;
  line-height: 1;
  filter: grayscale(0.3);
  transition: filter 0.2s, transform 0.2s;
}
.editor-slide-type-picker .poll-type-btn:hover .poll-type-icon,
.editor-slide-type-picker .poll-type-btn.active .poll-type-icon {
  filter: grayscale(0);
  transform: scale(1.08);
}
.editor-slide-type-picker .poll-type-btn .poll-type-label {
  font-weight: 600;
  font-size: 13px;
  margin: 0;
  line-height: 1.2;
}

@media (max-width: 800px) {
  .editor-slides-wrap { flex-direction: column; }
  .editor-slides-nav { flex: 0 0 auto; max-height: 250px; }
  .editor-slide-type-picker { grid-template-columns: repeat(2, 1fr); }
  .editor-slide-type-picker .poll-type-btn { min-height: 90px; padding: 14px 8px !important; }
  .editor-slide-type-picker .poll-type-btn .poll-type-icon { font-size: 26px; }
  .modal-xxl { width: 98%; }
}

/* Vote-Dialog: Frage sehr prominent */
.poll-vote-question {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.25;
  color: var(--text);
}
.poll-vote-type {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.poll-vote-indicator {
  font-size: 13px;
  color: var(--text-muted);
  flex: 1;
  text-align: center;
}
#poll-vote-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Management: kleine Vorschau der ersten Frage */
.poll-mgmt-question {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Beamer-Modus: Navigationsleiste */
.poll-present-navbar {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.poll-present-nav-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  transition: background 0.15s;
}
.poll-present-nav-btn:hover:not(:disabled) {
  background: var(--accent-dark);
}
.poll-present-nav-btn:disabled {
  background: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.5;
}
.poll-present-nav-indicator {
  font-weight: 600;
  color: var(--text);
}

/* === Ordner-Ansicht === */
.poll-section {
  margin-bottom: 20px;
}
.poll-section-title {
  margin: 0 0 10px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.poll-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.poll-section-header .poll-section-title {
  margin: 0;
  border: none;
  padding-bottom: 0;
}
.poll-section-count {
  background: var(--surface-2);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}
.poll-archive-link {
  cursor: pointer;
  transition: color 0.15s ease;
}
.poll-archive-link:hover {
  color: var(--accent);
}

.poll-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.poll-folder-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  font-family: inherit;
  color: var(--text);
  position: relative;
}
.poll-folder-card:hover {
  border-color: var(--accent);
  background: #f0f9fa;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(16,19,25,0.08);
}
.poll-folder-icon {
  font-size: 36px;
  margin-bottom: 4px;
}
.poll-folder-name {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
  word-break: break-word;
}
.poll-folder-count {
  display: inline-block;
  background: var(--surface-2);
  color: var(--text-muted);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
}

.poll-folder-empty {
  text-align: center;
  padding: 30px 20px;
  color: var(--text-muted);
}

.btn-link-back {
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 8px;
  border-radius: 4px;
}
.btn-link-back:hover {
  background: var(--surface-2);
}

.poll-draft-row {
  background: #fffbeb;
  border-color: #fde68a;
}
.poll-mgmt-badge.draft {
  background: #fef3c7;
  color: #92400e;
}

/* === UMFRAGEN & ABSTIMMUNGEN === */

/* Modal-Größen */
.modal-lg { max-width: 760px !important; width: 94vw; }

/* Live-Banner oben auf der Startseite */
#poll-banner-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.poll-banner {
  background: linear-gradient(135deg, #fff, #faf9f5);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  animation: poll-banner-pulse 3s ease-in-out infinite;
  box-shadow: 0 4px 16px rgba(16,19,25,0.10);
}
@keyframes poll-banner-pulse {
  0%,100% { box-shadow: 0 4px 16px rgba(16,19,25,0.10); }
  50%     { box-shadow: 0 4px 24px rgba(16,19,25,0.24); }
}
.poll-banner-live { border-color: #dc2626; background: linear-gradient(135deg, #fff, #fef7f7); }
/* 2026-09-10: Dunkelmodus — der hart codierte weisse Verlauf machte die
   geerbte helle Schrift (Fragetext) unsichtbar. */
html[data-theme="dark"] .poll-banner,
html[data-theme="dark"] .poll-banner-live,
html[data-theme="dark"] .news-item.is-poll { background: var(--surface); }
.poll-banner-live .poll-banner-type { color: #dc2626; }
.poll-banner-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 200px;
}
.poll-banner-icon { font-size: 30px; flex-shrink: 0; }
.poll-banner-meta { flex: 1; }
.poll-banner-type {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.poll-banner-title {
  font-weight: 600;
  font-size: 15px;
  margin-top: 2px;
  line-height: 1.3;
}
.poll-banner-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Umfrage als Karte im Aktuelles-Bereich */
.news-item.is-poll {
  background: linear-gradient(135deg, #fff, #faf9f5);
  border-left: 3px solid var(--accent);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
}

/* Verwaltungs-Liste (Lehrer) */
.poll-mgmt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  background: var(--surface);
}
.poll-mgmt-row:hover { background: var(--surface-2); }
.poll-mgmt-icon { font-size: 24px; flex-shrink: 0; }
.poll-mgmt-meta { flex: 1; min-width: 0; }
.poll-mgmt-title { font-weight: 600; font-size: 14px; }
.poll-mgmt-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.poll-mgmt-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.poll-mgmt-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.poll-mgmt-badge.active { background: #dcfce7; color: #15803d; }
.poll-mgmt-badge.closed { background: #e5e5e5; color: #525252; }

/* Typ-Auswahl beim Erstellen */
.poll-type-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.poll-type-btn {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  font-family: inherit;
  color: var(--text);
}
.poll-type-btn:hover { border-color: var(--border-strong); background: var(--surface-2); }
.poll-type-btn.active {
  border-color: var(--accent);
  background: #e6f4f5;
  box-shadow: 0 0 0 3px rgba(16,19,25,0.12);
}
.poll-type-icon { font-size: 26px; }
.poll-type-label { font-weight: 600; font-size: 13px; margin-top: 4px; }
.poll-type-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Modus-Auswahl: Live / Mit Enddatum */
.poll-mode-picker { display: flex; gap: 10px; }
.poll-mode-btn {
  flex: 1;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.poll-mode-btn:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16,19,25, 0.10);
}
.poll-mode-btn strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--text);
}
.poll-mode-btn small {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}
.poll-mode-btn.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, #e6f4f5 0%, #d1ebec 100%);
  box-shadow: 0 4px 12px rgba(16,19,25, 0.18), 0 0 0 3px rgba(16,19,25,0.10);
}
.poll-mode-btn.active::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: white;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.poll-mode-btn.active strong { color: var(--accent-dark); }

/* Poll-Settings-Cards: Toggle-Switches statt nackter Checkboxes */
.poll-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 700px) {
  .poll-settings-grid { grid-template-columns: 1fr; }
}
.poll-setting-card {
  display: block;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  position: relative;
  user-select: none;
}
.poll-setting-card:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16,19,25, 0.10);
}
.poll-setting-card.active {
  border-color: var(--accent);
  background: linear-gradient(135deg, #e6f4f5 0%, #d1ebec 100%);
  box-shadow: 0 4px 12px rgba(16,19,25, 0.18);
}
/* Echtes <input> verstecken (nur funktional) */
.poll-setting-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.poll-setting-content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.poll-setting-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
  filter: grayscale(0.4);
  transition: filter 0.2s;
}
.poll-setting-card.active .poll-setting-icon {
  filter: grayscale(0);
}
.poll-setting-text { min-width: 0; }
.poll-setting-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--text);
}
.poll-setting-card.active .poll-setting-title {
  color: var(--accent-dark);
}
.poll-setting-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
/* Toggle-Switch */
.poll-setting-toggle {
  flex-shrink: 0;
}
.poll-toggle-track {
  display: inline-block;
  position: relative;
  width: 44px;
  height: 24px;
  background: #d1d5db;
  border-radius: 12px;
  transition: background 0.2s;
  vertical-align: middle;
}
.poll-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s;
}
.poll-setting-card.active .poll-toggle-track {
  background: var(--accent);
}
.poll-setting-card.active .poll-toggle-thumb {
  transform: translateX(20px);
}

/* MC-Optionen-Eingabe */
.poll-mc-option-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.poll-mc-option-input {
  flex: 1;
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
}

/* Abstimm-Dialog */
.poll-vote-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.poll-vote-type {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.poll-vote-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.poll-vote-section {
  background: var(--surface-2);
  padding: 14px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.alert {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
}
.alert-info { background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc; }

/* MC-Abstimmen */
.poll-mc-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.poll-mc-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 14px;
}
.poll-mc-choice:hover { background: #f8fafc; border-color: var(--border-strong); }
.poll-mc-choice input { margin: 0; width: 18px; height: 18px; cursor: pointer; }
.poll-mc-choice:has(input:checked) {
  border-color: var(--accent);
  background: #e6f4f5;
}

/* Skala-Abstimmen */
.poll-scale-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--text-muted);
}
.poll-scale-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.poll-scale-btn {
  flex: 1;
  min-width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  transition: all 0.12s ease;
  color: var(--text);
}
.poll-scale-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.poll-scale-btn.selected {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Axis-Slider */
.poll-axis-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.poll-axis-slider {
  width: 100%;
  height: 30px;
}
.poll-axis-value {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  margin: 8px 0 12px;
  font-variant-numeric: tabular-nums;
}

/* Ergebnis-Anzeige */
.poll-results { margin-top: 14px; }
.poll-results h4 { margin: 0 0 10px; font-size: 15px; }
.poll-result-bar {
  display: grid;
  grid-template-columns: 140px 1fr 80px;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}
.poll-result-bar-label { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.poll-result-bar-track {
  background: var(--surface-2);
  border-radius: 10px;
  overflow: hidden;
  height: 20px;
}
.poll-result-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #6fa085);
  transition: width 0.3s ease;
}
.poll-result-bar-count {
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.poll-scale-avg, .poll-axis-avg {
  margin-bottom: 10px;
  font-size: 14px;
}
.poll-scale-dist {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 140px;
  padding: 0 4px;
}
.poll-scale-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-width: 0;
}
.poll-scale-col-count {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.poll-scale-col-bar {
  width: 100%;
  background: linear-gradient(180deg, var(--accent), #6fa085);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.3s ease;
}
.poll-scale-col-label {
  font-size: 10px;
  margin-top: 3px;
  color: var(--text-muted);
}

.poll-wordcloud {
  padding: 18px;
  background: var(--surface-2);
  border-radius: 10px;
  text-align: center;
  line-height: 1.6;
  min-height: 100px;
}
.poll-word {
  display: inline-block;
  margin: 4px 6px;
  font-weight: 600;
  color: var(--accent-dark);
}

.poll-axis-display {
  padding: 12px 6px;
  background: var(--surface-2);
  border-radius: 10px;
}
.poll-axis-track {
  position: relative;
  height: 50px;
  background: linear-gradient(90deg, #fee2e2, #fef3c7, #dcfce7);
  border-radius: 8px;
  margin: 6px 0;
}
.poll-axis-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.poll-axis-avg-mark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  background: #dc2626;
  transform: translateX(-50%);
  border-radius: 2px;
}

/* ========== BEAMER-MODUS (Vollbild) ========== */
.poll-present-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #1f49ff, #6fa085);
  color: white;
  z-index: 10000;
  display: none;
  flex-direction: column;
  padding: 40px;
  overflow-y: auto;
}
.poll-present-overlay.active { display: flex; }
.poll-present-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid white;
  color: white;
  font-size: 20px;
  cursor: pointer;
  font-family: inherit;
}
.poll-present-close:hover { background: rgba(255,255,255,0.25); }
#poll-present-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.poll-present-head { text-align: center; margin-bottom: 36px; }
.poll-present-typ {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.poll-present-live {
  background: #dc2626;
  padding: 2px 10px;
  border-radius: 12px;
  font-weight: 700;
  animation: poll-present-blink 1.5s ease-in-out infinite;
}
@keyframes poll-present-blink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.5; }
}
.poll-present-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 50px;
  font-weight: 600;
  margin: 14px 0 0;
  line-height: 1.2;
}
.poll-present-foot {
  text-align: center;
  font-size: 20px;
  opacity: 0.8;
  margin-top: 24px;
}

/* MC-Beamer-Balken */
.poll-present-bars {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.poll-present-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.poll-present-bar-label {
  font-size: 28px;
  font-weight: 500;
}
.poll-present-bar-count {
  font-size: 24px;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}
.poll-present-bar-track {
  background: rgba(255,255,255,0.2);
  border-radius: 14px;
  overflow: hidden;
  height: 36px;
}
.poll-present-bar-fill {
  height: 100%;
  background: white;
  border-radius: 14px;
  transition: width 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Skala-Beamer */
.poll-present-avg {
  text-align: center;
  font-size: 32px;
  margin-bottom: 20px;
}
.poll-present-dist {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 300px;
  padding: 0 10px;
}
.poll-present-dist-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}
.poll-present-dist-count { font-size: 22px; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.poll-present-dist-bar {
  width: 100%;
  background: white;
  border-radius: 8px 8px 0 0;
  min-height: 6px;
  transition: height 0.4s ease;
}
.poll-present-dist-label { font-size: 22px; margin-top: 6px; }

/* Wordcloud-Beamer */
.poll-present-cloud {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 20px;
  line-height: 1.4;
  gap: 8px;
}
.poll-present-word {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  margin: 4px 10px;
  display: inline-block;
  animation: poll-word-pop 0.4s ease-out;
}
@keyframes poll-word-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.poll-present-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  opacity: 0.6;
}

/* Axis-Beamer */
.poll-present-axis {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
}
.poll-present-axis-labels {
  display: flex;
  justify-content: space-between;
  font-size: 28px;
  margin-bottom: 12px;
  font-weight: 500;
}
.poll-present-axis-track {
  position: relative;
  height: 120px;
  background: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0.4), rgba(255,255,255,0.15));
  border-radius: 20px;
}
.poll-present-axis-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.poll-present-axis-avg {
  position: absolute;
  top: -10px;
  bottom: -10px;
  width: 5px;
  background: #fde047;
  transform: translateX(-50%);
  border-radius: 3px;
  box-shadow: 0 0 16px #fde047;
}

/* Responsive */
@media (max-width: 640px) {
  .poll-type-picker { grid-template-columns: repeat(2, 1fr); }
  .poll-mode-picker { flex-direction: column; }
  .poll-result-bar { grid-template-columns: 1fr; gap: 4px; }
  .poll-result-bar-count { text-align: left; }
  .poll-banner { flex-direction: column; align-items: stretch; }
  .poll-banner-actions { justify-content: stretch; }
  .poll-banner-actions .btn { flex: 1; }
}

.btn-danger { background: #dc2626; color: white; border: 1px solid #dc2626; }
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* === TO-DO-LISTE (persönlicher Bereich, integriert in Aktuelles) === */
.todo-section {
  margin-top: 18px;
}
.todo-divider {
  height: 1px;
  background: var(--border);
  margin: 0 0 14px;
}
.todo-header {
  margin-bottom: 10px;
}
.todo-header h2 {
  margin: 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.todo-accent {
  background: #a855f7; /* lila, grenzt sich von "Aktuelles"-Akzent ab */
}

/* ============================================================
   Phase 2: Aktuelles-Footer — offene Collect-Aufgaben (links) +
   zwei KLEINE Chat-Buttons (rechts unten). Ersetzt die Todo-Liste.
   Theme-sicher ueber CSS-Variablen (Light + Dark).
   ============================================================ */
.aktuelles-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.af-todos {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.af-todos-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1px;
}
.af-todo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
  transition: border-color .12s, background .12s;
}
.af-todo:hover { border-color: var(--accent); background: var(--accent-bg); }
.af-todo-dot {
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ef6c2b;            /* offen = orange (Collect-Akzent) */
}
.af-todo-feedback .af-todo-dot { background: #1f49ff; }
.af-todo-txt {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.af-todo-cta {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.af-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.af-chat-btn {
  display: inline-flex;
  /* position seit 2026-09-09: .chat-btn-badge steht absolut auf -6px/-6px und
     braucht dafuer einen positionierten Elternknopf. Ohne diese Zeile haengt
     der Ungelesen-Zaehler des Schuelers am naechsten positionierten Vorfahren
     und landet irgendwo auf der Seite. */
  position: relative;
  align-items: center;
  /* min-height 40 seit 2026-08-25: gemessen waren es 32 px. Die beiden Knoepfe
     sitzen jetzt in der Aktuelles-Leiste und werden am Tablet mit dem Finger
     getroffen, nicht mehr mit der Maus. */
  min-height: 40px;
  gap: 6px;
  padding: 7px 11px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, transform .05s;
}
.af-chat-btn:hover { border-color: var(--accent); background: var(--surface-2); }
.af-chat-btn:active { transform: translateY(1px); }
.af-chat-lehrer {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.af-chat-lehrer:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.af-chat-icon { display: inline-flex; align-items: center; }
.af-chat-icon svg { width: 16px; height: 16px; }
.af-chat-klasse .af-chat-icon { color: var(--accent); }
/* Schmal/Tablet hochkant: Aufgaben oben, Buttons darunter rechtsbuendig */
@media (max-width: 560px) {
  .aktuelles-footer { flex-direction: column; align-items: stretch; }
  .af-actions { justify-content: flex-end; }
}

.todo-input-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.todo-input-row #todo-input {
  flex: 1;
  padding: 7px 10px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  background: var(--surface);
  min-width: 0;
}
.todo-input-row #todo-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16,19,25,0.12);
}
.todo-input-row #todo-date-input {
  padding: 7px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-family: inherit;
  color: var(--text-muted);
  max-width: 130px;
}
.todo-input-row #todo-date-input:focus {
  outline: none;
  border-color: var(--accent);
}
.todo-input-row #todo-add-btn {
  padding: 7px 14px;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.todo-empty {
  padding: 14px 8px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.todo-item:hover {
  background: var(--surface-2);
}
.todo-item.todo-overdue {
  border-left: 3px solid #dc2626;
}
.todo-item.todo-done {
  opacity: 0.55;
  background: var(--surface-2);
}

.todo-checkbox {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 2px solid var(--border-strong);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  color: var(--accent);
  font-weight: 700;
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.todo-checkbox:hover {
  border-color: var(--accent);
}
.todo-checkbox.checked {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.todo-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
  padding: 1px 2px;
  border-radius: 4px;
  min-width: 0;
}
.todo-text[contenteditable="true"]:hover {
  background: rgba(16,19,25,0.04);
}
.todo-text[contenteditable="true"]:focus {
  background: white;
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}
.todo-done .todo-text {
  text-decoration: line-through;
  color: var(--text-muted);
}

.todo-due {
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 7px;
  background: var(--surface-2);
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}
.todo-due.overdue {
  background: #fef2f2;
  color: #dc2626;
  font-weight: 600;
}

.todo-delete-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  padding: 0;
  opacity: 0;
  transition: all 0.12s ease;
  flex-shrink: 0;
}
.todo-item:hover .todo-delete-btn {
  opacity: 0.6;
}
.todo-delete-btn:hover {
  opacity: 1 !important;
  background: #fee2e2;
  color: #dc2626;
}

.todo-expand-btn {
  margin-top: 4px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 6px;
  text-align: left;
  transition: background 0.12s ease;
}
.todo-expand-btn:hover {
  background: var(--surface-2);
}
.todo-expand-btn.subtle {
  color: var(--text-muted);
}

.todo-done-toggle {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}

@media (max-width: 520px) {
  .todo-input-row {
    flex-wrap: wrap;
  }
  .todo-input-row #todo-input {
    flex: 1 1 100%;
  }
  .todo-input-row #todo-date-input {
    flex: 1;
    max-width: none;
  }
  .todo-due {
    font-size: 10px;
  }
}

/* === NOTENHEFT (persönlicher Bereich) === */
.btn-notenheft {
  background: linear-gradient(135deg, #1f49ff, #6fa085);
  color: white;
  border: none;
  font-weight: 600;
}
.btn-notenheft:hover {
  background: linear-gradient(135deg, #0a5659, #158085);
  color: white;
}

.modal-xl {
  max-width: 1100px !important;
  width: 95vw;
}

.nh-loading, .nh-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.nh-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.nh-empty h3 {
  margin: 0 0 8px;
  color: var(--text);
}
.nh-empty p {
  margin: 0 0 20px;
  font-size: 14px;
}
.nh-suggestions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.nh-suggestions-title {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.nh-suggestions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.nh-suggestion-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  transition: all 0.15s ease;
}
.nh-suggestion-chip:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-dark);
}

.nh-overview-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.nh-overview-title h3 {
  margin: 0 0 4px;
}
.nh-hint {
  font-size: 12px;
  color: var(--text-muted);
}
.nh-overview-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nh-save-indicator {
  font-size: 11px;
  color: var(--text-muted);
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

.nh-overview-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.nh-overview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.nh-overview-table th,
.nh-overview-table td {
  padding: 8px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.nh-overview-table thead th {
  background: var(--surface-2);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border-strong);
}
.nh-overview-table thead tr:nth-child(2) th {
  font-size: 10px;
  padding: 4px 8px;
}
.nh-overview-table .nh-col-fach {
  text-align: left;
}
.nh-overview-table .nh-col-bereich {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.nh-overview-table .nh-col-sub {
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
}
.nh-overview-table .nh-col-endnote {
  background: var(--accent-bg);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  border-left: 2px solid var(--accent);
  color: var(--text);
}
.nh-overview-table .nh-col-hn {
  font-size: 16px;
  font-weight: 700;
  border-left: 1px solid var(--border);
}
.nh-overview-table tbody tr.nh-fach-row {
  cursor: pointer;
  transition: background 0.1s ease;
}
.nh-overview-table tbody tr.nh-fach-row:hover {
  background: var(--accent-bg, #ecf5f6);
}
.nh-overview-table .nh-col-del {
  width: 36px;
}
.nh-overview-table .nh-col-del .btn-icon {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.nh-overview-table tr:hover .nh-col-del .btn-icon {
  opacity: 0.7;
}
.nh-overview-table .nh-col-del .btn-icon:hover {
  opacity: 1;
}

/* Notenfarben für HN */
.nh-note-1 { color: #10b981; }
.nh-note-2 { color: #65a30d; }
.nh-note-3 { color: #eab308; }
.nh-note-4 { color: #f59e0b; }
.nh-note-5 { color: #dc2626; }
.nh-note-6 { color: #7f1d1d; }

.nh-gesamt-hint {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Fach-Detail */
.nh-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.nh-detail-title {
  flex: 1;
  margin: 0;
  min-width: 200px;
}
.nh-fach-rename {
  font-size: 22px;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  border: none;
  background: transparent;
  width: 100%;
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--text);
}
.nh-fach-rename:hover,
.nh-fach-rename:focus {
  background: var(--surface-2);
  outline: none;
}
.nh-detail-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nh-endnote-big {
  text-align: center;
  padding: 10px 20px;
  background: var(--surface-2);
  border-radius: var(--radius);
  border: 2px solid var(--accent);
  min-width: 120px;
}
.nh-endnote-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.nh-endnote-value {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: 'Source Serif 4', Georgia, serif;
  line-height: 1.1;
}
.nh-endnote-hn {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.nh-bereich {
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.nh-bereich-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}
.nh-bereich-head h4 {
  margin: 0;
  font-size: 15px;
  color: var(--accent-dark);
}
.nh-bereich-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.nh-bereich-gewicht {
  font-size: 13px;
  color: var(--text-muted);
}
.nh-bereich-gewicht input {
  width: 55px;
  padding: 3px 6px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 5px;
  text-align: center;
  margin-left: 4px;
  margin-right: 2px;
}
.nh-bereich-avg {
  font-size: 13px;
  color: var(--text-muted);
}
.nh-bereich-avg strong {
  color: var(--text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.nh-noten-list {
  padding: 8px;
}
.nh-noten-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

.nh-note-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 6px;
}
.nh-note-wert {
  font-size: 34px;
  font-weight: 700;
  font-family: 'Source Serif 4', Georgia, serif;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nh-note-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nh-note-fields-top,
.nh-note-fields-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nh-note-art {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface);
  font-family: inherit;
}
.nh-note-freitext {
  flex: 1;
  min-width: 120px;
  padding: 4px 8px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: inherit;
}
.nh-note-datum {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.nh-note-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nh-note-wert-picker,
.nh-gewicht-picker {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.nh-wert-btn,
.nh-gewicht-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  transition: all 0.1s ease;
  padding: 0;
  color: var(--text);
}
.nh-wert-btn:hover,
.nh-gewicht-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.nh-wert-btn.selected,
.nh-gewicht-btn.selected {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.nh-gewicht-btn {
  font-size: 11px;
}
.nh-gewicht-custom {
  width: 52px;
  height: 30px;
  padding: 3px 6px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
  margin-left: 4px;
}
.nh-note-delete {
  margin-left: auto;
}

.nh-footer-info {
  flex: 1;
  color: var(--text-muted);
  font-size: 11px;
}

@media (max-width: 720px) {
  .nh-overview-table { font-size: 11px; }
  .nh-overview-table th, .nh-overview-table td { padding: 5px 6px; }
  .nh-note-row { flex-direction: column; gap: 6px; }
  .nh-note-wert { font-size: 28px; min-width: auto; justify-content: flex-start; }
  .nh-endnote-big { min-width: 100px; padding: 8px 12px; }
  .nh-endnote-value { font-size: 22px; }
}


.chat-msg {
  position: relative;
}
.chat-msg-delete {
  position: absolute;
  top: 4px;
  right: 6px;
  background: rgba(0,0,0,0.08);
  color: var(--text-muted);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
  padding: 0;
}
.chat-msg:hover .chat-msg-delete {
  opacity: 1;
}
.chat-msg-delete:hover {
  background: var(--red);
  color: white;
}
.chat-header .chat-clear-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  margin-right: 4px;
  transition: background 0.15s ease;
}
.chat-header .chat-clear-btn:hover {
  background: rgba(183,62,58,0.12);
}

/* === Spalten-Drag-Handle (nur Lehrer) === */
.column-drag-handle {
  cursor: grab;
  padding: 2px 5px;
  color: var(--text-muted);
  user-select: none;
  font-size: 14px;
  line-height: 1;
  margin-right: 4px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.column-drag-handle:hover {
  background: var(--surface-2);
  color: var(--text);
}
.column-drag-handle:active {
  cursor: grabbing;
}
.column.column-dragging {
  opacity: 0.45;
}
.column.column-drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  background: var(--accent-bg, #ecf5f6);
}

/* "+ Karte hinzufügen" oben – etwas dezenter */
.add-card-btn.add-card-btn-top {
  margin-bottom: 8px;
  opacity: 0.7;
}
.add-card-btn.add-card-btn-top:hover {
  opacity: 1;
}

/* === Hintergrundbild-Bearbeitungs-Button (nur Lehrer, nur auf hover sichtbar) === */
.site-header,
.top-grid .panel {
  position: relative;
}
.bg-edit-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 15px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: var(--shadow-sm);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header .bg-edit-btn {
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  opacity: 0.4;
}
.site-header:hover .bg-edit-btn,
.top-grid .panel:hover .bg-edit-btn {
  opacity: 1;
}
.site-header .bg-edit-btn:hover,
.top-grid .panel .bg-edit-btn:hover {
  background: white;
  transform: translateY(-50%) scale(1.08);
}
.top-grid .panel .bg-edit-btn:hover {
  transform: scale(1.08);
}

/* === Custom Background für Elemente (ersetzt Tafel-Pattern bei Header) === */
.site-header.has-custom-bg::after,
.top-grid .panel.has-custom-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--custom-bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--custom-bg-opacity, 0.5);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.top-grid .panel.has-custom-bg::after {
  border-radius: var(--radius-lg);
}
/* Header: wenn custom-bg gesetzt, deaktiviere Tafel-Pattern */
.site-header.has-custom-bg {
  background: var(--surface);
}
.site-header.has-custom-bg::before {
  display: none;
}
/* Panels: Inhalt muss über dem Hintergrund liegen */
.top-grid .panel.has-custom-bg > * {
  position: relative;
  z-index: 1;
}
.site-header.has-custom-bg > * {
  position: relative;
  z-index: 1;
}


/* ============================================================
   Chat-Polish: X-Button rechts oben in der Modal-Ecke
   + WhatsApp-Bubble-Tails + dezentes Hintergrund-Pattern
   ============================================================ */

/* Modal muss position:relative haben, damit der X-Button absolut sitzen kann */
.chat-modal {
  position: relative;
}

/* X-Button: eigenständig, schwebend, rechts oben in der Modal-Ecke */
.chat-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 50;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2937;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transition: all 0.15s ease;
  line-height: 1;
  padding: 0;
}
.chat-modal-close:hover {
  background: white;
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.chat-modal-close:active {
  transform: scale(0.96);
}

/* Bubble-Tails (kleine Spitzen wie bei WhatsApp) */
.chat-msg.mine .chat-msg-bubble::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 8px 8px;
  border-color: transparent transparent var(--wa-mine) transparent;
}
.chat-msg.other .chat-msg-bubble::before {
  content: '';
  position: absolute;
  top: 0;
  left: -7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent var(--wa-other) transparent transparent;
}
/* Bei gelöschten/Quote-Bubbles keine Tails */
.chat-msg.deleted .chat-msg-bubble::before,
.chat-msg.deleted .chat-msg-bubble::after { display: none; }

/* Hintergrund-Pattern im Chat-Bereich (sehr dezent, wie WhatsApp) */
.chat-messages {
  background-color: #efeae2;
  background-image:
    radial-gradient(circle at 25% 35%, rgba(0,0,0,0.025) 1px, transparent 1.5px),
    radial-gradient(circle at 75% 75%, rgba(0,0,0,0.025) 1px, transparent 1.5px);
  background-size: 36px 36px, 56px 56px;
  background-position: 0 0, 18px 28px;
}

/* Mobile: X-Button etwas kleiner */
@media (max-width: 640px) {
  .chat-modal-close {
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
}

/* === Pinnwand-Karten: Lupe 🔍 für wichtige Karten === */
.karte, .pinnwand-karte, [data-karte-id], .card {
  position: relative;
}
.karte-important-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border, var(--border));
  background: white;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: all 0.15s;
  z-index: 10;
  padding: 0;
  line-height: 1;
}
.karte-important-toggle:hover {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.karte-important-toggle.active {
  opacity: 0;   /* versteckt, weil das Badge dann an seiner Stelle angezeigt wird */
  pointer-events: none;
}
.karte:hover .karte-important-toggle.active,
.pinnwand-karte:hover .karte-important-toggle.active,
.card:hover .karte-important-toggle.active {
  opacity: 1;
  pointer-events: auto;
  background: white;
  border-color: #f59e0b;
  z-index: 11;
  transform: scale(1.15);
}

.karte-important-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: white;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(245, 158, 11, 0.5);
  animation: karteImportantPulse 2s ease-in-out infinite;
  z-index: 9;
  pointer-events: none;
}
@keyframes karteImportantPulse {
  0%, 100% { box-shadow: 0 3px 8px rgba(245, 158, 11, 0.5); }
  50% { box-shadow: 0 3px 14px rgba(245, 158, 11, 0.75); }
}

/* Wichtige Karte visuell hervorheben */
.karte.karte-important,
.pinnwand-karte.karte-important,
[data-karte-id].karte-important,
.card.karte-important {
  border: 2px solid #f59e0b !important;
  background: linear-gradient(135deg, rgba(253, 230, 138, 0.35), rgba(251, 191, 36, 0.1)) !important;
  box-shadow: 0 3px 12px rgba(245, 158, 11, 0.2) !important;
}

/* === News-Features: Schüler-Erledigt === */
.news-item, .news-card, [data-news-id] {
  position: relative;
}
.news-important-toggle, .news-important-badge {
  display: none !important; /* News-Lupe deaktiviert - nur Pinnwand-Karten haben Lupe */
}

/* Schüler-Erledigt-Button */
.news-done-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 2px solid var(--border, var(--border));
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #6b7280;
  margin-top: 10px;
  transition: all 0.2s;
  font-family: inherit;
}
.news-done-btn:hover {
  border-color: #22c55e;
  color: #22c55e;
  transform: translateY(-1px);
}
.news-done-btn.done {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border-color: #22c55e;
  color: #166534;
}
.news-done-btn.done:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #6b7280;
  transform: none;
}

/* Erledigte News visuell abgehakt */
.news-item.news-done,
.news-card.news-done,
[data-news-id].news-done {
  opacity: 0.65;
}
.news-item.news-done h3,
.news-card.news-done h3,
.news-item.news-done .news-title,
[data-news-id].news-done .news-title {
  text-decoration: line-through;
  color: #9ca3af !important;
}

/* === Hintergrund-Bild-Buttons deaktiviert (per User-Wunsch) === */
.bg-edit-btn,
#modal-bg-editor,
.bg-upload-zone,
.bg-preview-wrap {
  display: none !important;
}

/* === Hintergrund-Editor-Modal === */
.bg-upload-zone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  background: var(--surface-2);
  cursor: pointer;
  transition: all 0.15s ease;
}
.bg-upload-zone:hover,
.bg-upload-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-bg, #ecf5f6);
}
.bg-upload-zone .upload-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.bg-upload-zone .upload-text {
  font-weight: 500;
  margin-bottom: 4px;
}
.bg-upload-zone .upload-hint {
  font-size: 12px;
  color: var(--text-muted);
}
.bg-preview-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fafafa;
  max-height: 200px;
}
.bg-preview-wrap img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
}
#bg-opacity-slider {
  width: 100%;
  margin-top: 8px;
}


.site-header {
  position: sticky;
  background-image: none;   /* weißer Verlauf + Teal-Kreidestriche entfernt -> Header transparent, Wallpaper laeuft durch */
}
.site-header::before {
  display: none;
}
@media (max-width: 720px) {
  .site-header::before { display: none; }
}

/* ============================================================
   PAKET v10 - APP-SEITIGE Eltern-Features (nur authentifiziert)
   ============================================================ */

/* User-Pill: Eltern-Variante */
.user-pill.eltern {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #78350f;
  border-color: #f59e0b;
}

/* News-Modal: Visibility-Häkchen */
.news-visibility-block {
  margin-top: 14px;
  padding: 14px;
  background: linear-gradient(135deg, #fffbea, #fef3c7);
  border: 1px solid #fbbf24;
  border-radius: 10px;
}
.news-visibility-block > label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #78350f;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.vis-checkboxes {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.vis-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  flex: 1;
  min-width: 110px;
  transition: all 0.15s;
  user-select: none;
}
.vis-checkbox:hover {
  border-color: #f59e0b;
  background: #fffbea;
}
.vis-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #f59e0b;
  cursor: pointer;
  flex-shrink: 0;
}
.vis-checkbox input[type="checkbox"]:checked ~ .vis-icon,
.vis-checkbox input[type="checkbox"]:checked ~ .vis-label {
  color: #78350f;
  font-weight: 600;
}
.vis-checkbox input[type="checkbox"]:checked + .vis-icon {
  color: #78350f;
}
.vis-checkbox:has(input:checked) {
  border-color: #f59e0b;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}
.vis-icon { font-size: 18px; }
.vis-label { font-size: 13px; color: #6b7280; }
.vis-templates {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #fbbf24;
}
.btn-template {
  padding: 6px 12px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  color: #374151;
  transition: all 0.15s;
}
.btn-template:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

/* Eltern-Verwaltung */
.eltern-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.eltern-loading, .eltern-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.eltern-empty .empty-icon { font-size: 48px; margin-bottom: 12px; }
.eltern-group { margin-bottom: 24px; }
.eltern-group-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.eltern-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
}
.eltern-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.eltern-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  transition: box-shadow 0.15s;
}
.eltern-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.eltern-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.eltern-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.eltern-card-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eltern-card-name strong { font-size: 14px; color: var(--text); }
.eltern-card-rolelabel { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.eltern-card-child {
  background: var(--surface-2);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 8px;
  display: flex;
  gap: 6px;
}
.eltern-child-label { color: var(--text-muted); }
.eltern-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.eltern-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.eltern-card-actions .btn { font-size: 12px; padding: 6px 10px; }

/* ═══════════════════════════════════════════════════════════════
   BULK-AKTIONS-BAR (Schüler- und Eltern-Verwaltung)
   ═══════════════════════════════════════════════════════════════ */
.sv-bulk-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  flex-wrap: wrap;
}
.sv-bulk-info {
  font-size: 14px;
  color: #1e293b;
}
.sv-bulk-info strong {
  display: inline-block;
  min-width: 24px;
  padding: 2px 8px;
  background: #1e293b;
  color: white;
  border-radius: 12px;
  text-align: center;
  margin-right: 6px;
  font-weight: 700;
}
.sv-bulk-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sv-bulk-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Schüler-Tabelle */
.sv-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.sv-users-table th {
  background: #f8fafc;
  padding: 12px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #e2e8f0;
}
.sv-users-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.sv-users-table tbody tr:hover {
  background: #f8fafc;
}
.sv-users-table .actions {
  text-align: right;
  white-space: nowrap;
}
.sv-users-table .actions .btn {
  margin-left: 4px;
}
.sv-cb-col {
  width: 38px;
  text-align: center;
  padding-left: 14px !important;
  padding-right: 6px !important;
}
.sv-cb-col input[type="checkbox"] {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: #1e293b;
}
.sv-klasse-group-header {
  background: #f1f5f9 !important;
  font-weight: 600;
  color: #334155;
  font-size: 14px;
  letter-spacing: 0.3px;
}
.sv-klasse-group-header input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin-right: 8px;
  vertical-align: middle;
  accent-color: #475569;
}
.user-username {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 4px;
  color: #475569;
}
.last-login {
  color: #64748b;
  font-size: 13px;
}
.must-change-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.sv-empty {
  text-align: center;
  padding: 40px 20px;
  color: #64748b;
  font-size: 14px;
  background: #f8fafc;
  border-radius: 10px;
  border: 2px dashed #cbd5e1;
}

/* Eltern-Bulk-Bar (nutzt sv-bulk-bar Stile) */
.el-bulk-bar {
  margin-bottom: 18px;
}
.eltern-group-title input[type="checkbox"].el-cb-klasse {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin-right: 10px;
  vertical-align: middle;
  accent-color: #475569;
}
.eltern-card-head input[type="checkbox"].el-cb-eltern {
  width: 17px;
  height: 17px;
  cursor: pointer;
  accent-color: #1e293b;
  margin-top: 2px;
}

/* Bulk-Reset-Ergebnisse-Modal: Tabelle innen */
#el-bulk-results-modal .modal-lg {
  max-width: 720px;
}
#el-bulk-results-body {
  max-height: 60vh;
  overflow-y: auto;
}
#el-bulk-results-body table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Print-Stil für Passwort-Briefe */
@media print {
  body * { visibility: hidden; }
  #el-bulk-results-modal, #el-bulk-results-modal * { visibility: visible; }
  #el-bulk-results-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
  }
  #el-bulk-results-modal .modal-overlay { background: white; }
  #el-bulk-results-modal .modal-footer { display: none; }
}

/* Parent-Role-Picker (im Anlegen-Dialog) */
.parent-role-picker {
  display: flex;
  gap: 8px;
}
.parent-role-option {
  flex: 1;
  padding: 12px;
  background: white;
  border: 2px solid var(--border);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.parent-role-option input { display: none; }
.parent-role-option:hover { border-color: var(--accent); }
.parent-role-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-weight: 600;
}

/* Form-Row für 2-spaltige Form-Groups */
.form-row {
  display: flex;
  gap: 12px;
}
.form-row > .form-group { margin-bottom: 0; }

/* Eltern-Brief (Drucklayout) */
.brief-actions {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.eltern-brief-paper {
  background: white;
  padding: 50px 60px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'Source Serif 4', Georgia, serif;
  line-height: 1.6;
  color: #1f2937;
  font-size: 15px;
  max-width: 700px;
  margin: 0 auto;
}
.brief-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 8px;
  margin-bottom: 24px;
}
.brief-classtitle {
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-dark);
  letter-spacing: 0.3px;
}
.brief-date { font-size: 13px; color: #6b7280; }
.brief-title {
  font-size: 22px;
  font-weight: 600;
  margin: 18px 0 16px;
}
.brief-credentials {
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 18px 0;
}
.brief-cred-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 6px 0;
}
.brief-cred-label { color: #6b7280; font-size: 14px; }
.brief-cred-value { font-size: 14px; }
.brief-cred-mono { font-family: 'Courier New', monospace; }
.brief-section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 22px 0 8px;
}
.brief-list { margin: 8px 0 8px 20px; }
.brief-list li { padding: 3px 0; }
.brief-footer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px dashed #d1d5db;
  font-size: 12px;
  color: #6b7280;
}

/* Druck */
@media print {
  body * { visibility: hidden; }
  #eltern-brief-modal, #eltern-brief-modal * { visibility: visible; }
  #eltern-brief-modal { position: absolute; left: 0; top: 0; right: 0; }
  #eltern-brief-modal .modal-overlay,
  #eltern-brief-modal .modal { all: unset; display: block; }
  #eltern-brief-modal .modal-header { display: none !important; }
  #eltern-brief-modal .no-print { display: none !important; }
  .eltern-brief-paper {
    border: none !important;
    box-shadow: none !important;
    margin: 0;
    padding: 0;
    max-width: 100%;
  }
}

/* Chat: Eltern-Chat-Item-Indikator */
.chat-li-parent-badge {
  font-size: 11px;
  margin-left: 4px;
  opacity: 0.7;
}
.chat-avatar-parent {
  font-size: 18px !important;
}

/* PDF-Vorschau-Wrapper: standardmäßig versteckt, nur .open zeigt iframe */
.pdf-iframe-wrapper {
  display: none;
  width: 100%;
  height: 0;
  border: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.pdf-iframe-wrapper.open {
  display: block;
  height: 600px;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.pdf-iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   PAKET v10.2 — Pinnwand-Schutz für Schüler + schöne Buttons
   ============================================================ */

/* Bg-Style-Toggle (Dezent / Farbig) — schöne Segmented-Button-Group */
.bg-style-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--border);
}
.bg-style-toggle .bg-option {
  flex: 1;
  padding: 8px 18px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  position: relative;
  min-width: 90px;
}
.bg-style-toggle .bg-option:hover:not(.active) {
  background: rgba(0,0,0,0.04);
  color: var(--text);
}
.bg-style-toggle .bg-option.active {
  background: var(--accent);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(13, 90, 89, 0.25);
  transform: translateY(-1px);
}
.bg-style-toggle .bg-option.active::before {
  content: '✓ ';
  font-weight: 700;
}

/* Pinnwand: privat / readonly Badges */
.pinnwand-private-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #78350f;
  border: 1px solid #f59e0b;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
}
.pinnwand-readonly-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
}
.pinnwand-card.private {
  border-left: 4px solid #f59e0b;
}
.pinnwand-card.readonly {
  opacity: 0.95;
}
.pinnwand-card.readonly h3::before {
  content: '👁 ';
  opacity: 0.5;
  font-size: 0.85em;
}

/* "Eigene Pinnwand"-Add-Tile (Schüler-Variante) */
.pinnwand-card.add-new.private {
  border: 2px dashed #f59e0b;
  background: linear-gradient(135deg, #fffbea, #fef3c7);
}
.pinnwand-card.add-new.private:hover {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #d97706;
}
.pinnwand-card.add-new .add-new-hint {
  font-size: 11px;
  color: #92400e;
  margin-top: 4px;
  font-style: italic;
}

/* Card-Item: Read-Only-Variante (kein Hover, kein Cursor-Pointer) */
.card-item.card-readonly {
  cursor: default !important;
}
.card-item.card-readonly:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Lösch-Button in Pinnwand-Listen-Kachel */
.btn-icon-danger {
  color: #ef4444;
  transition: all 0.15s;
}
.btn-icon-danger:hover {
  background: #fee2e2;
  color: #b91c1c;
}

/* Cleanup-Banner: verwaiste private Pinnwände aufräumen */
.cleanup-banner {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
  flex-wrap: wrap;
}
.cleanup-banner-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 280px;
}
.cleanup-icon { font-size: 32px; flex-shrink: 0; }
.cleanup-text { display: flex; flex-direction: column; gap: 2px; }
.cleanup-text strong { font-size: 15px; color: #78350f; }
.cleanup-text span { font-size: 13px; color: #92400e; }
.cleanup-btn {
  background: white;
  border: 2px solid #d97706;
  color: #78350f;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  flex-shrink: 0;
}
.cleanup-btn:hover {
  background: #d97706;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.3);
}

/* ============================================================
   KI-LERNHELFER (v11)
   ============================================================ */
.ai-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  padding: 20px;
}
.ai-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.ai-modal {
  background: white;
  width: 100%;
  max-width: 1100px;
  height: 92vh;
  max-height: 92vh;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-modal-overlay.active .ai-modal {
  transform: translateY(0) scale(1);
}
@media (max-width: 600px) {
  .ai-modal-overlay { padding: 0; }
  .ai-modal { max-width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }
}

.ai-modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.ai-modal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ai-avatar {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
}
.ai-modal-title {
  font-size: 17px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  line-height: 1.2;
}
.ai-modal-subtitle {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 2px;
}
.ai-close-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s;
}
.ai-close-btn:hover { background: rgba(255,255,255,0.3); }

.ai-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.ai-welcome {
  text-align: center;
  padding: 30px 16px;
  color: var(--text-muted);
  margin: auto 0;
}
.ai-welcome-icon { font-size: 56px; margin-bottom: 10px; }
.ai-welcome-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  font-family: 'Outfit', sans-serif;
}
.ai-welcome-text {
  font-size: 14px;
  line-height: 1.5;
  max-width: 380px;
  margin: 0 auto 18px;
}
.ai-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.ai-chip {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.ai-chip:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #6d28d9;
}

.ai-msg {
  display: flex;
  max-width: 100%;
}
.ai-msg-user { justify-content: flex-end; }
.ai-msg-assistant { justify-content: flex-start; }
.ai-msg-system { justify-content: center; }
.ai-msg-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
  word-wrap: break-word;
}
.ai-msg-user .ai-msg-bubble {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom-right-radius: 4px;
}
.ai-msg-assistant .ai-msg-bubble {
  background: white;
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.ai-msg-system-text {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #78350f;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}
.ai-msg-bubble strong { font-weight: 600; }
.ai-msg-bubble em { font-style: italic; }
.ai-msg-bubble code {
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}
.ai-msg-user .ai-msg-bubble code { background: rgba(255,255,255,0.2); }
.ai-msg-bubble pre {
  background: rgba(0,0,0,0.06);
  padding: 8px 12px;
  border-radius: 6px;
  margin: 6px 0;
  overflow-x: auto;
  font-size: 13px;
}
.ai-msg-bubble pre code {
  background: none;
  padding: 0;
}
.ai-msg-bubble ul, .ai-msg-bubble ol {
  margin: 4px 0;
  padding-left: 22px;
}
.ai-msg-bubble li { margin: 2px 0; }

.ai-typing-dots {
  display: flex;
  gap: 4px;
  padding: 4px 2px;
}
.ai-typing-dots span {
  width: 8px;
  height: 8px;
  background: #cbd5e1;
  border-radius: 50%;
  animation: aiTyping 1.4s infinite ease-in-out;
}
.ai-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-6px); opacity: 1; }
}

.ai-modal-footer {
  background: white;
  border-top: 1px solid var(--border);
  padding: 12px 14px 10px;
  flex-shrink: 0;
}
.ai-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.ai-input-row textarea {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 9px 16px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  outline: none;
  line-height: 1.4;
  max-height: 140px;
  transition: border-color 0.15s;
}
.ai-input-row textarea:focus {
  border-color: #a78bfa;
}
.ai-send-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.ai-send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.ai-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ai-footer-info {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 0 4px;
}
.ai-disclaimer { font-style: italic; }

<?php endif; ?>

/* === Bild-Vorschau in Pinnwand-Karten === */
.card-image-preview {
  margin-top: 8px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: zoom-in;
  background: var(--surface-2);
  transition: border-color 0.15s;
  max-width: 100%;
}
.card-image-preview:hover { border-color: var(--accent); }
.card-image-preview img {
  width: 100%;
  max-width: 100%;
  max-height: 220px;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 0;
  border: none;
  margin: 0;
}
.img-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}
/* Karten: alle Bilder immer begrenzen */
.card-item img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ================================================================
   LIGHTBOX
   ================================================================ */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.92); align-items: center;
  justify-content: center; cursor: zoom-out;
}
.lightbox.active { display: flex; }
.lightbox img {
  max-width: 92vw; max-height: 88vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  cursor: default; display: block;
}
.lightbox-close {
  position: fixed; top: 18px; right: 22px;
  background: rgba(255,255,255,0.15); border: none; color: white;
  font-size: 26px; width: 44px; height: 44px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: background 0.15s; z-index: 100000;
}
.lightbox-close:hover { background: rgba(255,255,255,0.3); }
.lightbox-caption {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%); color: rgba(255,255,255,0.75);
  font-size: 13px; background: rgba(0,0,0,0.5);
  padding: 6px 16px; border-radius: 20px; white-space: nowrap;
  max-width: 90vw; overflow: hidden; text-overflow: ellipsis;
}

/* ================================================================
   PDF-LINK IN PINNWAND-KARTEN
   ================================================================ */
.card-pdf-preview { margin-top: 8px; }
.card-pdf-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px;
  text-decoration: none; color: var(--text); transition: all 0.15s; cursor: pointer;
}
.card-pdf-link:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.card-pdf-icon { font-size: 24px; flex-shrink: 0; }
.card-pdf-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.card-pdf-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-pdf-meta { font-size: 11px; color: var(--text-muted); }
.card-pdf-arrow { font-size: 16px; color: var(--text-muted); flex-shrink: 0; }

/* ================================================================
   PUSH NOTIFICATIONS TOAST
   ================================================================ */
.header-tile-bell { border-color: var(--accent) !important; }
.header-tile-bell:hover { background: var(--accent-soft) !important; }
.push-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e293b; color: white; padding: 12px 22px;
  border-radius: 24px; font-size: 14px; font-weight: 500;
  opacity: 0; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  z-index: 99998; box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  white-space: nowrap; pointer-events: none;
}
.push-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.push-toast.warning { background: #d97706; }
.push-toast.error { background: #dc2626; font-weight: 600; }

/* ================================================================
   UNTERRICHT 3.0 – WIDGET, KACHEL, EDITOR, ÜBERSICHT
   ================================================================ */
.header-tile-u30 { border-color: #7c3aed !important; }
.header-tile-u30:hover { background: #ede9fe !important; }
.u30-plan-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; background: var(--surface); }
.u30-plan-card.u30-active { border-color: #7c3aed; background: #faf5ff; }
.u30-plan-card-main { flex: 1; min-width: 0; }
.u30-badge-active { color: #7c3aed; font-size: 12px; font-weight: 700; }
.u30-badge-inactive { color: var(--text-muted); font-size: 12px; }
.u30-plan-title { font-weight: 600; font-size: 15px; margin: 4px 0 2px; }
.u30-plan-desc { font-size: 13px; color: var(--text-muted); }
.u30-plan-meta { font-size: 12px; color: var(--text-soft); margin-top: 4px; }
.u30-plan-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.u30-editor-wrap { padding: 4px 0; }
.u30e-meta-row { display: flex; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.u30e-meta-row .form-group { flex: 1; min-width: 200px; }
.u30e-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin: 16px 0 10px; }
.u30e-karte { border: 1px solid var(--border); border-radius: 12px; padding: 0; margin-bottom: 12px; overflow: hidden; transition: box-shadow 0.15s; }
.u30e-karte:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.u30e-karte-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.6); flex-wrap: wrap; }
.u30e-karte-header-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.u30e-karte-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.u30e-karte-num { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: white; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.u30e-karte .u30-bereich-title { flex: 1; min-width: 0; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 600; font-family: inherit; background: white; }
.u30e-schw-toggle { display: flex; gap: 4px; }
.u30e-schw-btn { padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px; background: white; font-size: 12px; font-family: inherit; cursor: pointer; transition: all 0.12s; white-space: nowrap; }
.u30e-schw-btn[data-schw="leicht"].active { background: #dcfce7; border-color: #22c55e; color: #15803d; font-weight: 700; }
.u30e-schw-btn[data-schw="mittel"].active { background: #fef9c3; border-color: #f59e0b; color: #92400e; font-weight: 700; }
.u30e-schw-btn[data-schw="schwer"].active { background: #fee2e2; border-color: #ef4444; color: #b91c1c; font-weight: 700; }
.u30e-delete-btn { background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px 6px; border-radius: 6px; opacity: 0.4; transition: opacity 0.15s; }
.u30e-delete-btn:hover { opacity: 1; background: #fee2e2; }
.u30e-aufgaben { padding: 10px 14px 8px; }
.u30e-aufgabe-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.u30e-aufg-num { font-size: 12px; font-weight: 700; color: var(--text-muted); min-width: 22px; text-align: right; flex-shrink: 0; }
.u30e-aufgabe-input { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; font-family: inherit; background: white; }
.u30e-aufg-del { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px 6px; border-radius: 5px; font-size: 13px; opacity: 0; transition: opacity 0.12s; flex-shrink: 0; }
.u30e-aufgabe-row:hover .u30e-aufg-del { opacity: 1; }
.u30e-aufg-del:hover { background: #fee2e2; color: #b91c1c; }
.u30e-add-aufgabe-btn { background: none; border: 1px dashed var(--border); border-radius: 7px; padding: 6px 12px; font-size: 12px; color: var(--text-muted); cursor: pointer; width: 100%; text-align: left; margin-top: 4px; transition: all 0.12s; font-family: inherit; }
.u30e-add-aufgabe-btn:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent-dark); }
.u30e-self-badge { padding: 7px 14px; font-size: 11px; color: #7c3aed; background: #faf5ff; border-top: 1px solid #e9d5ff; font-weight: 600; }
.u30e-add-bereich-btn { width: 100%; padding: 12px; border: 2px dashed var(--border); border-radius: 12px; background: none; font-size: 14px; color: var(--text-muted); cursor: pointer; margin-top: 4px; transition: all 0.15s; font-family: inherit; }
.u30e-add-bereich-btn:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); }
.u30e-feedback-hint { margin-top: 14px; padding: 10px 14px; background: #faf5ff; border: 1px solid #e9d5ff; border-radius: 8px; font-size: 12px; color: #7c3aed; }
.u30-widget { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-top: 14px; }
.u30-widget-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.u30-widget-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.u30-widget-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.u30-widget-total { display: flex; align-items: center; gap: 10px; }
.u30-total-bar-wrap { width: 120px; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.u30-total-bar { height: 100%; background: #7c3aed; border-radius: 4px; transition: width 0.4s ease; }
.u30-total-pct { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.u30-bereiche-list { display: flex; flex-direction: column; gap: 10px; }
.u30-bereich { background: var(--surface-2); border-radius: var(--radius); padding: 12px 14px; }
.u30-bereich-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.u30-bereich-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.u30-bereich-name { font-weight: 600; font-size: 14px; }
.u30-schw-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.u30-bereich-count { font-size: 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.u30-bereich-count.done { color: #16a34a; }
.u30-aufgaben-grid { display: flex; flex-direction: column; gap: 6px; }
.u30-aufgabe-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; background: white; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all 0.15s; user-select: none; }
.u30-aufgabe-item:hover { border-color: #7c3aed; background: #faf5ff; }
.u30-aufgabe-item.done { background: #f0fdf4; border-color: #86efac; }
.u30-check { width: 20px; height: 20px; border: 2px solid var(--border-strong); border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; margin-top: 1px; }
.u30-check.checked { background: #16a34a; border-color: #16a34a; }
.u30-check svg { width: 12px; height: 12px; }
.u30-aufg-text { font-size: 13px; line-height: 1.4; flex: 1; }
.u30-aufgabe-item.done .u30-aufg-text { text-decoration: line-through; color: var(--text-muted); }
.u30-pinnwand-tile { background: linear-gradient(135deg, #faf5ff, #ede9fe) !important; border-top: 3px solid #7c3aed !important; cursor: pointer; }
.u30-pinnwand-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,58,237,0.2) !important; }
.u30-tile-icon { font-size: 28px; margin-bottom: 6px; }
.u30-tile-bar-wrap { width: 100%; height: 6px; background: rgba(124,58,237,0.15); border-radius: 3px; overflow: hidden; margin: 10px 0 4px; }
.u30-tile-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.u30-tile-pct { font-size: 22px; font-weight: 800; font-family: 'Outfit', sans-serif; text-align: right; }
.u30-ov-tabs { display: flex; border-bottom: 2px solid var(--border); background: var(--surface-2); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.u30-ov-tab { flex: 1; padding: 14px 20px; border: none; background: none; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.15s; font-family: inherit; }
.u30-ov-tab:hover { color: var(--text); background: var(--surface); }
.u30-ov-tab.active { color: #7c3aed; border-bottom-color: #7c3aed; background: white; }
.u30-overview-plan-title { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; }
.u30-overview-table-wrap { overflow-x: auto; }
.u30-overview-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 500px; }
.u30-overview-table th { text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom: 2px solid var(--border); white-space: nowrap; }
.u30-overview-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.u30-overview-table tr:hover td { background: var(--surface-2); }
.u30-ov-name { font-weight: 600; white-space: nowrap; }
.u30-ov-bar-wrap { width: 100px; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; display: inline-block; margin-right: 6px; vertical-align: middle; }
.u30-ov-bar { height: 100%; border-radius: 4px; }
.u30-ov-pct { font-size: 12px; color: var(--text-muted); vertical-align: middle; }
.u30-overview-legend { display: flex; gap: 10px; margin-top: 14px; font-size: 12px; flex-wrap: wrap; }

/* ===========================================================================
 * Phase 1.56 — LERNKURSE-KACHELN auf Schueler-Startseite
 * =========================================================================== */
.lernkurse-section {
  margin: 28px 0;
}
.lernkurse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.lernkurs-card {
  background: var(--surface, #fff);
  border: 1px solid var(--border, var(--border));
  border-radius: 14px;
  padding: 18px 20px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  outline: none;
}
.lernkurs-card:hover, .lernkurs-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  border-color: #cbd5e1;
}
.lernkurs-card-fach {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  align-self: flex-start;
}
.lernkurs-card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #111827);
  line-height: 1.3;
  margin: 0;
}
.lernkurs-card-subtitle {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
  margin: 0;
}
.lernkurs-card-progress {
  margin-top: auto;
}
.lernkurs-card-progress-bar {
  height: 8px;
  background: var(--surface-2, #f3f4f6);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.lernkurs-card-progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.lernkurs-card-progress-text {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  font-weight: 500;
}
.lernkurs-card-action {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent, #1f49ff);
  margin-top: 4px;
}
.lernkurs-card:hover .lernkurs-card-action {
  text-decoration: underline;
}

/* Mobile: Lernkurs-Kacheln eine Spalte, kompakter */
@media (max-width: 600px) {
  .lernkurse-grid { grid-template-columns: 1fr; gap: 12px; }
  .lernkurs-card { padding: 14px 16px; gap: 8px; }
  .lernkurs-card-title { font-size: 16px; }
  .lernkurs-card-subtitle { font-size: 13px; }
}

/* ===========================================================================
 * Phase 1.56 — SMARTPHONE-OPTIMIERUNG (Eltern + Aktuelles/Termine/Chat)
 * Konsolidierter Mobile-Block — Eltern kommen FAST NUR per Smartphone,
 * Schueler-Kernfunktionen auf Mobile = Aktuelles, Termine, Chat.
 * =========================================================================== */
@media (max-width: 600px) {
  /* === HEADER kompakter (besonders fuer Eltern, die nur Chat+Refresh+Logout sehen) === */
  body header { padding: 0; }
  .header-actions { gap: 4px !important; padding: 4px 8px; }
  .header-tile {
    padding: 7px 9px !important;
    min-height: 40px;
    border-radius: 8px;
  }
  .header-tile-lbl { display: none; }   /* nur Icons → mehr Platz */
  .header-tile-ico { font-size: 19px; }
  /* :not(.nll-tb-icon) seit 2026-08-25: In der Kopfzeile bestimmt nll-topbar.css
     die Groesse (40x40, Fingermass). Diese Regel stammt aus der alten
     Kachelleiste und drueckte den Punkt dort auf 28 px — per !important, also
     auch gegen hoehere Spezifitaet. Sie gilt nur noch ausserhalb der Kopfzeile. */
  .nll-latency-dot:not(.nll-tb-icon) { width: 28px !important; height: 28px !important; }

  /* === AKTUELLES + TERMINE: Listen-max-height aufheben (kein nested scroll) === */
  .top-grid { gap: 14px; margin-bottom: 18px; }
  .news-list, .termine-list { max-height: none; }
  .panel { padding: 14px 14px; }
  .panel-header { padding-bottom: 10px; margin-bottom: 12px; }
  .panel-header h2 { font-size: 17px; }

  /* === News-Karten: groessere Schrift + Padding fuer Touch (44px+) === */
  .news-item { padding: 14px 16px; min-height: 44px; }
  .news-item-title { font-size: 15px; margin-bottom: 4px; }
  .news-item-text { font-size: 14px; line-height: 1.55; }
  .news-item-date { font-size: 12px; }
  /* Action-Buttons (Edit/Loeschen): immer sichtbar (kein hover auf Touch) */
  .news-item-actions, .termin-actions { opacity: 0.7 !important; }
  .news-item:hover .news-item-actions,
  .termin-item:hover .termin-actions { opacity: 1 !important; }

  /* === Termin-Karten === */
  .termin-item { padding: 14px 16px; gap: 12px; min-height: 44px; }

  /* === Modals: bisher Karte mit Backdrop → automatisch Vollbild auf Mobile === */
  .modal-overlay.active > .modal:not(.modal-fullscreen-page > .modal) {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .modal-overlay.active { padding: 0 !important; }

  /* === Birthday-Banner: kleiner === */
  #birthday-banner-container { font-size: 14px; }

  /* === CHAT — WhatsApp-Pattern: Sidebar oben full-width, Klick → Main im Vordergrund === */
  .chat-modal { padding: 0; }
  .chat-wrap { flex-direction: column !important; }
  .chat-sidebar {
    width: 100% !important;
    border-right: none;
    border-bottom: 1px solid var(--wa-border);
    height: auto !important;
    max-height: none !important;
    flex: 1 1 auto;
  }
  .chat-main { width: 100% !important; flex: 1 1 auto; min-height: 0; }
  /* Wenn ein Chat aktiv: Sidebar verstecken (Klasse via JS) */
  .chat-modal.chat-mobile-main .chat-sidebar { display: none; }
  .chat-modal.chat-mobile-main .chat-main { display: flex; flex-direction: column; flex: 1; }
  /* Mobile-Back-Button im Main-Header (nur sichtbar wenn aktiv) */
  .chat-mobile-back-btn { display: none; }
  .chat-modal.chat-mobile-main .chat-mobile-back-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    color: var(--wa-text);
    font-size: 18px;
    cursor: pointer;
    margin-right: 8px;
  }
  /* Chat-Empty-Logo kleiner auf Mobile */
  .chat-empty-logo { width: 130px !important; max-height: 130px !important; }

  /* === "Design wählen"-Button kompakter === */
  .chat-theme-side-btn { font-size: 11px; padding: 4px 8px; }
}

/* === Sehr kleine Bildschirme (iPhone SE, 320-375px) === */
@media (max-width: 380px) {
  .header-tile { padding: 6px 7px !important; }
  .header-tile-ico { font-size: 17px; }
  .header-actions { gap: 2px !important; }
  .panel { padding: 12px 12px; }
  .news-item, .termin-item { padding: 12px 14px; }
}

/* ============================================================
   Startseite: Marke wandert in die globale NLL-Kopfzeile (nll-topbar).
   Alte Marke ausblenden; die funktionalen Werkzeug-Knoepfe bleiben rechts.
   (2026-06-24 — "aus einem Guss")
   ============================================================ */
.site-header .site-title { display: none; }
.site-header { justify-content: flex-end; }

/* ============================================================
   SCHUELER-STARTSEITE — Umbau 2026-08-25 (Joachims Entwurf "Klar 2")
   ------------------------------------------------------------
   Aufbau: "Aktuelles" als schmale Leiste ganz oben, darunter ein Trenner,
   dann drei Aufgaben-Karten nebeneinander und die Termine daneben.
   Alle Farben kommen aus den Klar-Tokens, damit die Seite den Hell-/Dunkel-
   Umschalter der Plattform ohne Zusatzregeln mitmacht.

   Bewusst NICHT --text-soft (#98a0ad): dieser Ton erreicht auf weissem Grund
   nur 2,4:1 und ist am iPad im hellen Klassenzimmer nicht mehr zu lesen.
   Die leisen Texte hier nutzen --text-muted (rund 4,8:1).
   ============================================================ */

/* ---- Aktuelles: Knoepfe nebeneinander, Luft, dann der Trenner ---- */
.sa-aktuell {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 0 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-strong);
}
.sa-aktuell-marke {
  flex: 0 0 auto;
  font-size: 13px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.sa-aktuell-liste {
  display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.sa-aktuell-liste::-webkit-scrollbar { height: 0; display: none; }
.sa-aktuell-leer { font-size: 14.5px; color: var(--text-muted); padding: 12px 2px; }

/* Ein Knopf je Meldung. Rahmen auch im Ruhezustand, nur durchsichtig — sonst
   waeren die neuen Meldungen 2 px hoeher und die Leiste wuerde zappeln. */
.sa-meldung {
  position: relative; flex: 0 0 auto; max-width: 300px; min-height: 44px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 15px 11px 17px;
  border: 1px solid transparent; border-radius: 9px;
  background: var(--surface-2); color: var(--text-muted);
  font: inherit; text-align: left; white-space: nowrap;
  cursor: pointer; overflow: hidden;
}
.sa-meldung b {
  min-width: 0; font-size: 14.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis;
}
.sa-meldung span { flex: 0 0 auto; font-size: 13px; color: var(--text-muted); }
.sa-meldung:hover { background: var(--border); color: var(--text); }
/* 2026-09-10: ein abgeschlossenes Quiz ohne Wiederholung ist ein toter Knopf —
   das soll man ihm ansehen, statt vergeblich zu tippen. */
.sa-meldung:disabled { opacity: .55; cursor: default; }
.sa-meldung:disabled:hover { background: var(--surface-2); color: var(--text-muted); }
/* Neu (heute/gestern): heller Grund, Rahmen und ein Farbstreifen an der linken
   Kante — die Form traegt die Information, kein zusaetzliches Symbol. */
.sa-meldung.ist-neu {
  background: var(--surface); color: var(--text); border-color: var(--border);
}
.sa-meldung.ist-neu::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
}
.sa-meldung.ist-neu b { font-weight: 700; }
.sa-meldung.ist-neu:hover { background: var(--surface); box-shadow: var(--shadow-sm); }

/* Die beiden Chat-Knoepfe sitzen am rechten Ende derselben Leiste. */
.sa-chat-slot { flex: 0 0 auto; display: flex; gap: 8px; margin-left: auto; }

/* ---- Raster: drei Aufgaben-Karten, Termine schmal daneben ---- */
.sa-haupt {
  display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 16px; align-items: start; margin: 22px 0 28px;
}
.sa-haupt > * { min-width: 0; }
.sa-drei {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; align-items: start;
}

.sa-karte {
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.sa-karte-kopf {
  display: flex; align-items: center; gap: 10px; padding: 15px 17px 11px;
}
.sa-karte-kopf h2 {
  margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -.005em;
}
.sa-karte-kopf .sa-n {
  margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--text-muted);
  background: var(--surface-2); border-radius: 999px; padding: 3px 10px;
  font-variant-numeric: tabular-nums; min-width: 26px; text-align: center;
}
.sa-karte-kopf .sa-n:empty { display: none; }
.sa-karte-kopf .sa-n.ist-dringend { background: var(--red-soft); color: var(--red); }
.sa-karte-inhalt { padding: 0 17px 17px; }

/* Symbol je Art — dieselbe Farbzuordnung wie im Entwurf. */
.sa-ico {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; background: var(--surface-2);
  background-repeat: no-repeat; background-position: center; background-size: 19px 19px;
}
.sa-ico-blatt {
  background-color: var(--accent-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f49ff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E");
}
.sa-ico-buch {
  background-color: var(--green-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a7d3a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M8 3v18'/%3E%3C/svg%3E");
}
.sa-ico-haken {
  background-color: var(--amber-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c78a00' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Ein offener Posten — gleiche Zeile in allen drei Karten. Titel, Einordnung,
   Frist untereinander: nebeneinander bliebe in einer Drittel-Spalte nur
   "Lineare Funkti…" uebrig. */
.sa-posten-e {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 11px 13px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: inherit;
}
.sa-posten-e:last-child { margin-bottom: 0; }
.sa-posten-e:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.sa-posten-e b {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 15px; font-weight: 600; line-height: 1.3;
}
.sa-posten-e .sa-unter {
  font-size: 13px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.sa-frist {
  font-size: 13.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted); white-space: nowrap;
}
.sa-frist.dringend { background: var(--red-soft); color: var(--red); }
.sa-posten-e.ist-dringend { border-color: var(--red-soft); }
/* Der Weg zur vollen Liste, unauffaellig unter den Zeilen. */
.sa-alle {
  display: block; margin-top: 10px; padding: 9px 12px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); text-decoration: none;
  font-size: 14px; font-weight: 600;
}
.sa-alle:hover { border-color: var(--border-strong); }
/* Ohne eigene Flaeche: auf --surface-2 kaeme --text-muted nur auf 4,4:1,
   auf dem weissen Kartengrund sind es 4,8:1. Der gestrichelte Rahmen grenzt
   den Bereich auch ohne Fuellung deutlich genug ab. */
.sa-leer {
  padding: 18px 14px; text-align: center; font-size: 14px; color: var(--text-muted);
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
}
/* .empty-state nutzt plattformweit --text-soft (2,6:1). In den Karten der
   Schueler-Startseite wird daraus der lesbare Ton — die Regel bleibt bewusst
   auf .sa-karte begrenzt, damit sie nichts anderes veraendert. */
.sa-karte .empty-state { color: var(--text-muted); }

/* Die Lernkurs-Sektion wird von selbstlernkurs.js in die Karte gehaengt und
   bringt ihren eigenen Aussenabstand mit — in der Karte stoert der. */
#sa-kurse-slot .slk-wm2-section { margin: 0 !important; }
/* Die Sektion bringt ihre eigene Ueberschrift "Hier kannst du weitermachen"
   mit — in der Karte steht sie schon im Kartenkopf. */
#sa-kurse-slot .slk-wm2-header { display: none; }
/* Die Kacheln werden zu denselben Zeilen wie in den beiden Nachbarkarten.
   Die Reihenfolge im Markup ist Fach, Kurs, Knopf — mit order steht der
   Kurstitel oben, ohne dass selbstlernkurs.js angefasst werden muss. */
#sa-kurse-slot .slk-wm2-grid {
  display: flex !important; flex-direction: column; gap: 8px;
}
#sa-kurse-slot .slk-wm2-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  width: 100%; padding: 11px 13px; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
#sa-kurse-slot .slk-wm2-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
#sa-kurse-slot .slk-wm2-kurs {
  order: 1; font-size: 15px; font-weight: 600; line-height: 1.3;
}
#sa-kurse-slot .slk-wm2-fach { order: 2; font-size: 13px; color: var(--text-muted); }
#sa-kurse-slot .slk-wm2-cta {
  order: 3; font-size: 13.5px; font-weight: 700; padding: 4px 9px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent);
}
/* Der Hinweis "Dein Coach hat noch keine Aufgaben freigegeben" ist hier kein
   Warnkasten, sondern der leere Zustand der Karte — wie in den Nachbarkarten. */
#sa-kurse-slot .slk-wm2-empty {
  background: none !important; border: 1px dashed var(--border-strong) !important;
  border-radius: var(--radius) !important; padding: 18px 14px !important;
  text-align: center; font-size: 14px; color: var(--text-muted) !important;
}

/* ---- iPad hoch und Handy ---- */
@media (max-width: 1000px) {
  .sa-haupt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .sa-drei { grid-template-columns: minmax(0, 1fr); }
  .sa-aktuell { flex-wrap: wrap; gap: 10px; }
  .sa-chat-slot { margin-left: 0; width: 100%; }
  .sa-karte-kopf { padding: 14px 15px 10px; }
  .sa-karte-inhalt { padding: 0 15px 15px; }
}

/* ============================================================
   SCHUELER-CHAT: Signalfeld und Schublade (2026-09-15)

   Joachims Vorgabe: Schueler schreiben nur der Lehrkraft oder im Klassenchat,
   und eine neue Nachricht muss auf der Startseite deutlich zu sehen sein — bis
   heute war sie es nicht. Seit dem Startseiten-Umbau am 2026-08-25 blieb davon
   nur ein 20 px kleiner roter Punkt an einem der beiden Chat-Knoepfe uebrig.

   Zwei Bausteine, aus Joachims Entwurf 3 ("Schublade"):
   (1) .nll-signal — ein mitlaufendes Feld unten rechts, das den Absender und
       die erste Zeile zeigt. Es existiert nur, wenn wirklich etwas ungelesen
       ist (app.js baut und entfernt es), damit die Startseite im Ruhezustand
       unveraendert bleibt.
   (2) .chat-schublade — dieselbe Chat-Maschinerie in einer anderen Huelle: ein
       Panel, das von rechts einfaehrt, statt die Seite zu verdecken.

   Alles hier ist auf .nll-signal, .hat-neu, .chat-schublade und .schub-*
   begrenzt. Die Lehrer- und Elternsicht benutzt dieselben Chat-Klassen und
   darf sich nicht veraendern — jeder Selektor ohne diese Anker waere ein
   Eingriff in eine laufende Oberflaeche.
   ============================================================ */

/* ---- (1) Das Signalfeld ---- */
.nll-signal {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  /* Unter jedem Dialog (.modal-overlay liegt auf 1000), aber ueber dem
     Seiteninhalt: ein offenes Fenster — etwa die Begruessung am Morgen — hat
     Vorrang, sonst schwebt das Feld ueber einem modalen Dialog und nimmt dort
     Klicks an (in der Sandbox gesehen, 2026-09-15). */
  z-index: 990;
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: nllSignalRein .22s ease-out;
}
@keyframes nllSignalRein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nll-signal { animation: none; }
}
/* Solange der Chat offen ist, sperrt der Vollbild-Helfer den Seiten-Scroll
   (body.fullscreen-modal-open). Genau dann ist das Signalfeld ueberfluessig —
   und es wuerde neben der Schublade stehen bleiben. */
body.fullscreen-modal-open .nll-signal { display: none; }

.nll-signal-kopf {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px 9px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--accent-soft);
}
.nll-signal-marke {
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-dark);
}
.nll-signal-zu {
  margin-left: auto;
  width: 40px; height: 40px;     /* Fingergroesse, auch wenn das Zeichen klein ist */
  display: grid; place-items: center;
  background: none; border: none; border-radius: 9px;
  color: var(--text-muted); cursor: pointer;
}
.nll-signal-zu:hover { background: rgba(0,0,0,.06); color: var(--text); }

.nll-signal-zeile {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 60px;
  padding: 11px 14px;
  background: var(--surface); border: none;
  border-top: 1px solid var(--border);
  font: inherit; text-align: left; color: inherit; cursor: pointer;
}
.nll-signal-zeile:first-of-type { border-top: none; }
.nll-signal-zeile:hover { background: var(--surface-2); }
.nll-signal-ico {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.nll-signal-ico svg { width: 20px; height: 20px; }
.nll-signal-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nll-signal-name {
  display: flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700; color: var(--text);
}
.nll-signal-n {
  flex: 0 0 auto; min-width: 21px; height: 21px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  border-radius: 999px; font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Genau eine Zeile: ein Umbruch wuerde das Feld bei jeder laengeren Nachricht
   anders hoch machen, und die Hoehe steht hier fest am Bildschirmrand. */
.nll-signal-vor {
  font-size: 13.5px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nll-signal-pfeil { flex: 0 0 auto; color: var(--text-muted); display: flex; }

/* Am Tablet hochkant und am Handy sitzt das Feld unten quer — dort, wo der
   Daumen ohnehin ist, und ohne den schmalen Inhalt weiter einzuengen. */
@media (max-width: 720px) {
  .nll-signal {
    right: 0; left: 0; bottom: 0; width: auto; max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-left: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* ---- (2) Die beiden Knoepfe in der Aktuelles-Leiste ---- */
/* Ohne .hat-neu bleibt jeder Wert so, wie er seit dem 2026-08-25 ist. */
.af-chat-btn.hat-neu {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.af-chat-btn.hat-neu:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.af-chat-btn.hat-neu .af-chat-icon { color: #fff; }
/* Der Zaehler war ein 20-px-Punkt, der halb ausserhalb des Knopfes klebte
   (.chat-btn-badge, absolut auf -6px/-6px). Im Zustand "ungelesen" steht er
   jetzt als lesbare Zahl IM Knopf. */
.af-chat-btn.hat-neu .chat-btn-badge {
  position: static;
  margin-left: 2px;
  background: #fff;
  color: var(--accent-dark);
  border: none;
  min-width: 22px; height: 22px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* ---- (3) Die Schublade ---- */
/* Gegen die Regel ab Zeile 1840, die #nll-chat-modal.active mit !important auf
   Vollbild zwingt (damit der Chat auch bei altem JS im Cache Vollbild ist).
   Dieselbe Waffe, eine Klasse mehr Spezifitaet — anders ist da nicht heranzukommen. */
#nll-chat-modal.modal-overlay.active.chat-schublade {
  background: rgba(16, 19, 25, .38) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  align-items: stretch !important;
  justify-content: flex-end !important;   /* Panel rechts andocken */
  z-index: 15000 !important;
}
#nll-chat-modal.modal-overlay.active.chat-schublade > .modal {
  width: 440px !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: -18px 0 46px -18px rgba(16, 19, 25, .45) !important;
  animation: schubRein .18s ease-out;
}
/* Eine Animation, keine Transition: das Modal wechselt von display:none auf
   flex — eine Transition wuerde dabei uebersprungen. */
@keyframes schubRein {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  #nll-chat-modal.modal-overlay.active.chat-schublade > .modal { animation: none; }
}
/* Kopf: schmaler als im Vollbild, und ohne den "Zurueck"-Knopf des
   Vollbild-Helfers — in 440 px Breite zaehlt jeder Platz, und zum Schliessen
   gibt es das Kreuz, den Klick daneben, Escape und die Zurueck-Taste. */
.chat-schublade .chat-page-header { padding: 8px 10px; border-radius: 0; }
.chat-schublade .chat-page-header .modal-back-btn { display: none !important; }
.chat-schublade .chat-page-brand-sub { display: none; }
.chat-schublade .chat-wrap { flex-direction: column; }
/* Aus der Seitenleiste wird die Kopfzone ueber dem Verlauf. */
.chat-schublade .chat-sidebar {
  width: 100%; min-width: 0; max-width: none;
  flex: 0 0 auto;
  border-right: none;
  border-bottom: 1px solid var(--wa-border, var(--border));
}
/* Der Design-Knopf sitzt jetzt oben im Kopf (chat.js, schubKopfAufraeumen),
   damit diese Zeile ganz entfallen kann. */
.chat-schublade .chat-sidebar-head { display: none; }
.chat-schublade .chat-theme-side-btn { margin-right: 0; font-size: 11.5px; padding: 5px 8px; }
/* Das Schliessen-Kreuz liegt absolut in der rechten oberen Ecke (Zeile 7279).
   Im Vollbild stoert das niemanden, in der Schublade lag es ueber dem
   Design-Knopf. Der Abstand haelt die Ecke frei. */
.chat-schublade .chat-page-actions { margin-left: auto; margin-right: 46px; }
.chat-schublade .chat-modal-close { top: 9px; right: 10px; width: 34px; height: 34px; }
.schub-kopf-titel { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
/* Zwei Chats brauchen keine Suche. */
.chat-schublade .chat-search-wrap { display: none; }
.chat-schublade .chat-list { overflow: visible; padding: 0; }
.chat-schublade .chat-main { flex: 1; min-height: 0; }
.chat-schublade .chat-messages { padding: 12px 12px 6px; }
.chat-schublade .chat-msg { max-width: 92%; }
.chat-schublade .chat-input-wrap { padding: 9px 10px; }
.chat-schublade .chat-input { font-size: 15.5px; }
/* Der Verlauf ist schmal: die Werkzeugleiste je Nachricht darf nicht ueber den
   Text rutschen, sie steht deshalb unter der Blase statt schwebend darauf. */
.chat-schublade .chat-msg-actions { position: static; background: transparent; box-shadow: none; }

/* Kopfzeile des Gespraechs: zweizeilig, damit der Mitlese-Hinweis Platz hat. */
.chat-schublade .chat-main-head { flex-wrap: wrap; min-height: 0; padding: 10px 12px; }
.schub-hinweis {
  flex: 1 0 100%;
  display: flex; align-items: center; gap: 7px;
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid var(--wa-border, var(--border));
  font-size: 13px; color: var(--text-muted);
}
.schub-hinweis svg { flex: 0 0 auto; }
.schub-hinweis span { min-width: 0; }

/* Statuszeile ueber dem Eingabefeld (Erreichbarkeit, Stummschaltung). */
.schub-status {
  padding: 8px 12px;
  background: var(--warn-bg-soft, #fffbeb);
  border-top: 1px solid var(--warn-border-soft, #fde68a);
  font-size: 13px; color: var(--warn-text, #92400e);
}
.schub-status:empty { display: none; }

/* ---- (4) Reiterleiste ---- */
.schub-reiter { display: flex; gap: 8px; padding: 10px 12px; }
.schub-tab {
  flex: 1 1 0; min-width: 0; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.schub-tab:hover { border-color: var(--accent); }
.schub-tab.an {
  background: var(--chat-theme-primary, var(--accent));
  border-color: var(--chat-theme-primary, var(--accent));
  color: #fff;
}
.schub-tab-ico { display: inline-flex; flex: 0 0 auto; }
.schub-tab-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.schub-n {
  flex: 0 0 auto; min-width: 21px; height: 21px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--accent); color: #fff;
}
.schub-tab.an .schub-n { background: #fff; color: var(--accent-dark); }

/* ---- (5) Handy-Benachrichtigungen ---- */
.schub-push {
  display: flex; align-items: center; gap: 10px;
  margin: 0 12px 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.schub-push-ico { flex: 0 0 auto; color: var(--accent); display: flex; }
.schub-push-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.schub-push-txt b { font-size: 14px; font-weight: 700; color: var(--text); }
.schub-push-txt span {
  font-size: 12.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis;
}
.schub-push-btn {
  flex: 0 0 auto; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--accent); border-radius: 9px;
  background: var(--accent); color: #fff;
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.schub-push-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
/* Ist es an, gibt es nichts mehr zu tun: die Zeile wird zur leisen Fussnote. */
.schub-push[data-zustand="an"],
.schub-push[data-zustand="nicht"] {
  border-color: transparent; background: transparent;
  padding: 4px 0; margin-bottom: 6px;
}
.schub-push[data-zustand="an"] .schub-push-txt b,
.schub-push[data-zustand="nicht"] .schub-push-txt b {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.schub-push[data-zustand="an"] .schub-push-ico,
.schub-push[data-zustand="nicht"] .schub-push-ico { color: var(--text-muted); }
.schub-push[data-zustand="an"] .schub-push-btn {
  background: none; border-color: transparent; color: var(--text-muted);
  text-decoration: underline; padding: 0 6px;
}
.schub-push[data-zustand="an"] .schub-push-btn:hover { color: var(--text); background: none; }
.schub-push-hilfe {
  margin: -4px 12px 10px;
  padding: 10px 12px 10px 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 13.5px; color: var(--text);
}
.schub-push-hilfe ol { margin: 0; padding-left: 22px; }
.schub-push-hilfe li { margin-bottom: 5px; line-height: 1.45; }
.schub-push-hilfe li:last-child { margin-bottom: 0; }

/* ---- (6) Schmaler Bildschirm: die Schublade kommt von unten ---- */
@media (max-width: 560px) {
  #nll-chat-modal.modal-overlay.active.chat-schublade {
    align-items: flex-end !important;
    justify-content: stretch !important;
  }
  #nll-chat-modal.modal-overlay.active.chat-schublade > .modal {
    width: 100vw !important;
    height: 88vh !important;
    max-height: 88vh !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    box-shadow: 0 -18px 46px -18px rgba(16, 19, 25, .5) !important;
    animation: schubRaufRein .18s ease-out;
  }
  @keyframes schubRaufRein {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
}
/* Der Chat blendet am schmalen Bildschirm sonst entweder die Liste oder den
   Verlauf aus (Zeile 3880 ff., Listen-/Detail-Umschaltung des Vollbilds). In
   der Schublade sind Reiter UND Verlauf gleichzeitig noetig — sonst sieht der
   Schueler am Handy nur eines von beidem. */
@media (max-width: 760px) {
  .chat-schublade .chat-main { display: flex !important; }
  .chat-schublade .chat-sidebar { display: flex !important; }
  .chat-schublade .chat-back-btn { display: none !important; }
}

/* ---- (7) Dunkelmodus ---- */
html[data-theme="dark"] .nll-signal { background: var(--surface); }
html[data-theme="dark"] .nll-signal-kopf { background: var(--accent-soft); }
html[data-theme="dark"] .nll-signal-zu:hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .nll-signal-zeile { background: var(--surface); }
html[data-theme="dark"] .nll-signal-zeile:hover { background: var(--surface-2); }
html[data-theme="dark"] .af-chat-btn.hat-neu .chat-btn-badge {
  background: #fff; color: var(--accent-dark);
}
/* :not(.an) ist noetig, nicht schoen: html[data-theme] plus Klasse schlaegt
   .schub-tab.an — ohne den Ausschluss sahen im Dunkelmodus beide Reiter gleich
   aus und der aktive war nicht mehr zu erkennen (gemessen 2026-09-15). */
html[data-theme="dark"] .schub-tab:not(.an) { background: var(--surface-2); }
html[data-theme="dark"] .schub-push { background: var(--surface-2); }
html[data-theme="dark"] .schub-push-hilfe { background: var(--surface-2); }
html[data-theme="dark"] .schub-status {
  background: rgba(199, 138, 0, .16);
  border-top-color: rgba(199, 138, 0, .38);
  color: var(--amber);
}