/* TeacherOS – Benotungstool: Styles
   Ruhiges, iPad-freundliches "Apple-Health"-Design, Dark-Mode-fähig. */

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #e2e6ea;
  --text: #1c2430;
  --text-dim: #667085;
  --accent: #2f7d6e;          /* Bio-grün, passend zum Fachfarbschema */
  --accent-soft: #e3f1ee;
  --shadow: 0 1px 3px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  --radius: 16px;
  --radius-sm: 10px;

  /* Notenfarben (1 gut … 5 schlecht) */
  --g1: #34a853;
  --g2: #7cb342;
  --g3: #f6b73c;
  --g4: #f28c38;
  --g5: #e5484d;

  /* Kategorie-Farben (alternierend, subtil) */
  --cat-1-bg: #eef0ff;       /* Blau */
  --cat-1-fg: #4a5fd1;
  --cat-2-bg: #eef6ee;       /* Grün */
  --cat-2-fg: #2d6a3e;
  --cat-3-bg: #fff6ea;       /* Orange */
  --cat-3-fg: #c87f1a;
  --cat-divider: #b9c0cc;    /* Trennlinie zwischen obersten Kategorien */
  --row-shade: rgba(30,42,60,.16);   /* Schraffur-Linien der geraden Zeilen */

  /* Frei wählbare Spaltenfarben (Palette): je Ton nur der Akzent (-fg). Tönung, Punkte
     und Bandkante werden im CSS per color-mix daraus abgeleitet (bewusst dezent, keine
     deckende Fläche). Schlüssel werden in categoryDialog/gradeColDialog gewählt. */
  --cc-blau-fg:#4a5fd1;
  --cc-gruen-fg:#2d6a3e;
  --cc-tuerkis-fg:#0f8f86;
  --cc-violett-fg:#7a53d1;
  --cc-bernstein-fg:#c07d15;
  --cc-rot-fg:#cc3b52;
  --cc-rosa-fg:#d43f86;
  --cc-schiefer-fg:#5a6b7d;
}
:root[data-theme="dark"] {
  --bg: #0f141a;
  --surface: #171e26;
  --surface-2: #1f2831;
  --border: #2a343f;
  --text: #e7edf3;
  --text-dim: #93a1b0;
  --accent: #4fb3a1;
  --accent-soft: #16302b;
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);

  /* Dark mode kategorie-farben */
  --cat-1-bg: #1a1e3f;
  --cat-1-fg: #9daeff;
  --cat-2-bg: #1a2415;
  --cat-2-fg: #6ec586;
  --cat-3-bg: #3a2a0f;
  --cat-3-fg: #ffb857;
  --cat-divider: #3d4a5c;
  --row-shade: rgba(255,255,255,.12);

  /* Spaltenfarben (dunkel / HUD): nur leuchtende Akzente; Tönung/Punkte/Kante werden
     daraus abgeleitet. Greift auch im TeacherOS-Embed, weil :root[data-theme=dark] dort
     zu :host wird. */
  --cc-blau-fg:#9daeff;
  --cc-gruen-fg:#6ec586;
  --cc-tuerkis-fg:#3fded0;
  --cc-violett-fg:#b79dff;
  --cc-bernstein-fg:#ffc879;
  --cc-rot-fg:#ff8090;
  --cc-rosa-fg:#ff8fbf;
  --cc-schiefer-fg:#9fb2c4;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* ---- Layout ---- */
.app { display: grid; grid-template-columns: 300px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.main { padding: 22px 26px 60px; max-width: 1180px; }

.brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; }
.brand .logo {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), #6fd0bf);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px;
}
/* Das Zeichen ist ein Inline-SVG und erbt seine Farbe ueber currentColor. */
.brand .logo svg { display: block; }
/* Eigenes Bild (opts.brandLogo): ohne Farbverlauf darunter, sonst steht ein
   freigestelltes Motiv auf einem tuerkisen Kaestchen. */
.brand img.logo.bild { background: none; object-fit: contain; padding: 1px; }
.brand h1 { font-size: 16px; margin: 0; font-weight: 650; }
.brand small { color: var(--text-dim); font-size: 11.5px; display: block; }

/* ---- Buttons ---- */
button, .btn {
  font: inherit; cursor: pointer; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  padding: 8px 12px; border-radius: var(--radius-sm);
  transition: .15s; display: inline-flex; align-items: center; gap: 6px;
}
button:hover, .btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn-primary:hover { filter: brightness(1.06); background: var(--accent); }
.btn-sm { padding: 5px 9px; font-size: 13px; border-radius: 8px; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-danger { color: var(--g5); }
.btn-block { width: 100%; justify-content: center; }

/* ---- Kursliste ---- */
.course-list { display: flex; flex-direction: column; gap: 4px; }
.sidebar-tools { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.sidebar-tools summary { padding: 9px 10px; cursor: pointer; font-size: 12px; font-weight: 650; color: var(--text-dim); }
.sidebar-tools-body { display: flex; flex-direction: column; gap: 6px; padding: 0 8px 8px; }
.course-item {
  padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent; display: flex; justify-content: space-between; align-items: center;
}
.course-item:hover { background: var(--surface-2); }
.course-item.active { background: var(--accent-soft); border-color: var(--accent); }
.course-item .ci-name { font-weight: 600; }
.course-item .ci-meta { font-size: 12px; color: var(--text-dim); }

.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 6px 6px 2px; font-weight: 650; }

/* ---- Cards & Tabs ---- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 18px; }
.card h2 { margin: 0 0 12px; font-size: 17px; }
.tabs { display: flex; gap: 4px; margin-bottom: 18px; flex-wrap: wrap; }
.tab { padding: 8px 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); font-weight: 550; }
.tab.active { background: var(--accent); color: #fff; border-color: transparent; }

.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head h2 { margin: 0; font-size: 22px; }
.page-head .sub { color: var(--text-dim); font-size: 13px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Noten-Matrix ---- */
.matrix-sortbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.matrix-sortbar .field { margin: 0; width: min(360px, 100%); }
.matrix-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table.matrix { border-collapse: collapse; width: 100%; font-size: 14px; }
table.matrix th, table.matrix td { border-bottom: 1px solid var(--border); padding: 0; text-align: center; }
table.matrix thead th { background: var(--surface-2); position: sticky; top: 0; z-index: 2; font-weight: 600; padding: 8px 6px; vertical-align: bottom; }
table.matrix th.col-cat { font-size: 11px; color: var(--text-dim); border-left: 1px solid var(--border); }
table.matrix th.leaf { min-width: 66px; }
table.matrix th.leaf small { display: block; color: var(--text-dim); font-weight: 400; font-size: 10.5px; }
.stu-name { text-align: left !important; padding: 6px 12px !important; white-space: nowrap; position: sticky; left: 0; background: var(--surface); z-index: 1; }
table.matrix tbody tr:hover .stu-name { background: var(--surface-2); }
/* ---- Schmale, zweizeilige Namensspalte in der Noten-Matrix (Notenbuch-Stil) ----
   Nachname (fett) oben, Vorname darunter. Gedeckelte Breite spart beim Rechtsscrollen
   enorm Platz (vorher ~230px einzeilig → jetzt ~170px zweizeilig, mobil ~118px). Nur
   in der Matrix (`table.matrix`), damit die breite Schüler-Tabelle unberührt bleibt. */
table.matrix td.stu-name, table.matrix th.stu-name { padding: 4px 10px !important; white-space: normal; min-width: 152px; max-width: 200px; }
table.matrix td.stu-name .stu-cell { gap: 9px; align-items: center; width: 100%; min-width: 0; }
table.matrix td.stu-name .avatar { width: 30px; height: 30px; }
.mx-nm { display: grid; gap: 0; line-height: 1.15; min-width: 0; }
.mx-nm .ln { font-weight: 650; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-nm .fn { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-nm .student-label { margin-right: 5px; box-shadow: none; }
/* Laufschrift: bei Hover/Apple-Pencil läuft nur ein tatsächlich gekürzter Name (.clip, per
   JS gesetzt) sanft durch; --ov = Überhang, --dur = Dauer (aus dem Überhang berechnet). */
table.matrix td.stu-name .stu-cell:hover .mx-nm .clip {
  text-overflow: clip;
  animation: mxNameScroll var(--dur, 1400ms) linear .3s infinite alternate;
}
@keyframes mxNameScroll { from { text-indent: 0; } to { text-indent: calc(-1 * var(--ov, 0px)); } }

/* ================= Format-Optionen (global, `format.js`) =================
   Nutzerwunsch 21.09.2026. Die App-Wurzel traegt `data-fmt-…`, hier stehen die
   Folgen. Vorgabe ist immer das, was ohne Attribut gilt — wer die Datei liest,
   sieht oben die normale Darstellung und hier nur die Abweichungen.

   Die Regeln haengen bewusst NICHT an `.app`: dieselben Attribute traegt auch
   die Vorschau im Format-Fenster. Sie mit `.app` zu markieren, brachte ihr
   das ganze Seitenlayout mit — 720 px hohe Vorschau in einem 630 px hohen
   Fenster.

   Absichtlich NUR Darstellung: keine Regel hier darf etwas ein- oder
   ausblenden, das eine Bewertung ist. Ein verstecktes Foto ist Geschmack,
   eine versteckte Note waere ein Fehler. */

/* --- Namen --- */
[data-fmt-nachname="normal"] .mx-nm .ln { font-weight: 450; }
[data-fmt-nachname="gross"]  .mx-nm .ln { text-transform: uppercase; letter-spacing: .02em; }
[data-fmt-vorname="normal"]  .mx-nm .fn {
  font-size: inherit; color: inherit; font-weight: inherit;
}
/* Einzeilig: der zweite Name steht im selben `b`, darum hier kein Grid-Umbruch. */
.mx-nm .ln.einzeilig { font-weight: inherit; }
.mx-nm .ln.einzeilig .fn { display: inline; }
[data-fmt-nachname="fett"]   .mx-nm .ln.einzeilig { font-weight: 650; }
[data-fmt-nachname="fett"]   .mx-nm .ln.einzeilig .fn { font-weight: 450; }
[data-fmt-nachname="gross"]  .mx-nm .ln.einzeilig { font-weight: 650; }
[data-fmt-nachname="gross"]  .mx-nm .ln.einzeilig .fn { text-transform: none; font-weight: 450; }
[data-fmt-namensform="vornach"] .mx-nm .ln.einzeilig { text-transform: none; }
[data-fmt-namensform="vornach"][data-fmt-nachname="gross"] .mx-nm .ln.einzeilig .fn {
  text-transform: uppercase;
}
/* Ohne Fotos wird die Namensspalte schmaler — das ist der halbe Grund fuer
   die Option, also gehoert die Breite dazu. */
[data-fmt-foto="aus"] .mx-av,
[data-fmt-foto="aus"] table.matrix td.stu-name .avatar { display: none; }
[data-fmt-foto="aus"] table.matrix td.stu-name,
[data-fmt-foto="aus"] table.matrix th.stu-name { min-width: 112px; }
[data-fmt-foto="klein"] table.matrix td.stu-name .avatar { width: 22px; height: 22px; }
[data-fmt-foto="gross"] table.matrix td.stu-name .avatar { width: 40px; height: 40px; }

/* Die Klasse am Namen: klein, blass, nicht umbrechend — sie ist ein Hinweis,
   kein Teil des Namens. In der zweizeiligen Form haengt sie hinter dem
   zweiten Namen, einzeilig hinter dem ganzen Namen. */
.mx-nm .kl {
  margin-left: 5px; font-size: 9.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 5px; padding: 0 3px; white-space: nowrap;
}
[data-fmt-volljaehrig="aus"] .adult-badge { display: none; }

/* Breite der Namensspalte. Schmal kuerzt frueher — der volle Name steht
   weiterhin im Tooltip und laeuft bei Hover durch. */
[data-fmt-spalte="schmal"] table.matrix td.stu-name,
[data-fmt-spalte="schmal"] table.matrix th.stu-name { min-width: 118px; max-width: 148px; }
[data-fmt-spalte="breit"] table.matrix td.stu-name,
[data-fmt-spalte="breit"] table.matrix th.stu-name { min-width: 210px; max-width: 280px; }

/* --- Tabelle --- */
[data-fmt-dichte="kompakt"] table.matrix td.stu-name,
[data-fmt-dichte="kompakt"] table.matrix th.stu-name { padding: 1px 8px !important; }
[data-fmt-dichte="kompakt"] table.matrix td.stu-name .avatar { width: 24px; height: 24px; }
[data-fmt-dichte="kompakt"] .mx-nm { line-height: 1.08; }
[data-fmt-dichte="luftig"] table.matrix td.stu-name,
[data-fmt-dichte="luftig"] table.matrix th.stu-name { padding: 10px 12px !important; }
[data-fmt-dichte="luftig"] .mx-nm { line-height: 1.3; }

[data-fmt-schrift="klein"] table.matrix { font-size: 12.5px; }
[data-fmt-schrift="klein"] .mx-nm .ln { font-size: 12.5px; }
[data-fmt-schrift="klein"] .mx-nm .fn { font-size: 10.5px; }
[data-fmt-schrift="gross"] table.matrix { font-size: 15.5px; }
[data-fmt-schrift="gross"] .mx-nm .ln { font-size: 15px; }
[data-fmt-schrift="gross"] .mx-nm .fn { font-size: 13px; }

/* Jede zweite Zeile. Die feine Schraffur gibt es hier laengst (oben bei
   `tr:nth-child(even)`); die Option schaltet sie um oder ab, statt eine
   zweite Markierung darueberzulegen. */
[data-fmt-zeilen="toenung"] table.matrix tbody tr:nth-child(even) td {
  background-image: linear-gradient(var(--row-shade), var(--row-shade));
}
[data-fmt-zeilen="keine"] table.matrix tbody tr:nth-child(even) td {
  background-image: none;
}
[data-fmt-zeilen="toenung"] table.matrix tbody tr.mx-group-row td,
[data-fmt-zeilen="keine"] table.matrix tbody tr.mx-group-row td { background-image: none; }

/* Breite der Notenspalten: `th.leaf` gibt die Spaltenbreite vor, die Zellen
   folgen ihr von selbst. */
[data-fmt-spaltenbreite="schmal"] table.matrix th.leaf { min-width: 52px; }
[data-fmt-spaltenbreite="breit"] table.matrix th.leaf { min-width: 88px; }

/* Gitterlinien. Nur die waagrechte Linie wird gedreht — die senkrechten
   trennen Kategorien und tragen Bedeutung, die soll keine Option schlucken. */
[data-fmt-gitter="kraeftig"] table.matrix th,
[data-fmt-gitter="kraeftig"] table.matrix td {
  border-bottom-color: color-mix(in srgb, var(--text-dim) 55%, transparent);
}
[data-fmt-gitter="dezent"] table.matrix th,
[data-fmt-gitter="dezent"] table.matrix td {
  border-bottom-color: color-mix(in srgb, var(--border) 45%, transparent);
}

[data-fmt-endnote="normal"] .grade-pill { font-weight: 500; }

/* Der Dialog: eine echte Matrixzeile als Vorschau, damit man die Wirkung
   sieht, bevor man sie uebernimmt. `.app` traegt dort dieselben Attribute. */
.fmt-vorschau {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 4px 2px; margin-bottom: 14px;
}
/* Schmal halten, aber nicht die Tabelle schrumpfen lassen: die Namenszelle
   ist ein Grid mit `min-width: 0`, ohne Breitenvorgabe faellt sie auf null
   zusammen. Also volle Breite im gedeckelten Kasten. */
.fmt-vorschau { max-width: 320px; }
.fmt-vorschau table.matrix { width: 100%; }
.fmt-vorschau table.matrix td { border-bottom: 0; }
.fmt-vorschau table.matrix td:last-child { padding: 0 12px; width: 1%; }
.fmt-vorschau .stu-name { position: static; }
.fmt-vorschau .avatar {
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: var(--text-dim);
}
/* Vorlagenreihe ganz oben im Fenster: ein Klick setzt mehrere Optionen. */
.fmt-vorlagen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fmt-vorlagen .btn small { display: block; font-weight: 400; font-size: 9.5px; color: var(--text-dim); }

h4.fmt-gruppe {
  margin: 16px 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-dim);
}
h4.fmt-gruppe:first-of-type { margin-top: 4px; }

/* Foto-Wrapper + 18+-Plakette (volljährig), wie im Original-Notenbuch: kleines Badge
   unten links am Bild. Erscheint nur, wenn aus `birthday` ein Alter ≥ 18 berechenbar ist. */
.mx-av { position: relative; flex: none; display: inline-flex; line-height: 0; }
.adult-badge {
  position: absolute; left: -4px; bottom: -4px;
  min-width: 15px; padding: 1px 3px; border-radius: 7px;
  background: var(--accent); color: #fff;
  font-size: 8.5px; font-weight: 800; line-height: 1.35; letter-spacing: -.03em;
  text-align: center; border: 1.5px solid var(--surface); pointer-events: none;
}
.mx-group-row td {
  position: sticky; left: 0; z-index: 1; padding: 8px 12px !important; text-align: left !important;
  background: var(--accent-soft) !important; background-image: none !important;
  border-top: 2px solid var(--accent); border-bottom: 1px solid var(--accent) !important;
  color: var(--text); box-shadow: none !important;
}
.mx-group-row td span { color: var(--accent); }
.mx-group-row td small { margin-left: 10px; color: var(--text-dim); font-size: 11.5px; }
/* ---- Zeilen-Schraffur (Notenbuch-Anlehnung): SPALTEN erkennt man an den
   Kategorie-Farbbändern (unten), ZEILEN an einer feinen diagonalen Schraffur auf
   jeder zweiten Zeile. background-image legt sich über die background-color der
   Bänder (die data-top-Regeln setzen nur die Farbe) → beide Signale bleiben lesbar,
   auch in der sticky Namensspalte. */
table.matrix tbody tr:nth-child(even) td {
  background-image: repeating-linear-gradient(45deg, var(--row-shade) 0 1px, transparent 1px 7px);
}
/* Hover als leichte Abdunklung per Overlay – überlagert die Farbbänder, ohne mit der
   data-top-Spezifität zu kämpfen. */
table.matrix tbody tr:hover td { box-shadow: inset 0 0 0 999px rgba(0,0,0,.028); }
:root[data-theme="dark"] table.matrix tbody tr:hover td { box-shadow: inset 0 0 0 999px rgba(255,255,255,.045); }
.final-col { font-weight: 700; border-left: 1px solid var(--border); padding: 4px 8px !important; }
.final-dec { display: block; font-size: 10.5px; font-weight: 500; color: var(--text-dim); margin-top: 2px; }
.calc-grade-btn, .final-grade-btn { width: 100%; min-height: 38px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; cursor: pointer; position: relative; }
.calc-grade-btn:hover, .final-grade-btn:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.calc-grade-btn.manual, .final-grade-btn.manual { box-shadow: inset 0 0 0 1px var(--amber); }
.manual-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; margin-left: 4px; padding: 0 3px; border-radius: 999px; background: var(--amber); color: #241600; font-size: 11px; font-weight: 800; vertical-align: middle; }
.manual-mark.derived { background: var(--surface-2); color: var(--accent); border: 1px solid var(--accent); }

.gcell { width: 100%; height: 100%; border: none; background: transparent; text-align: center; font: inherit; color: var(--text); padding: 9px 4px; outline: none; }
.gcell:focus { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); border-radius: 6px; }
.gcell.absent { color: var(--text-dim); font-style: italic; opacity: .55; }
.gcell.override { text-decoration: underline dotted; }

/* ---- Matrix: Farbbänder je oberster Kategorie (Semester bzw. Säule) ----
   data-top = Index der obersten Kategorie (mod 3). Kopf UND Zellen einer Spalte
   tragen dasselbe Band → man sieht durchgängig, zu welcher Kategorie eine Spalte gehört. */
table.matrix th[data-top="0"], table.matrix td[data-top="0"] { background: var(--cat-1-bg); }
table.matrix th[data-top="1"], table.matrix td[data-top="1"] { background: var(--cat-2-bg); }
table.matrix th[data-top="2"], table.matrix td[data-top="2"] { background: var(--cat-3-bg); }
/* Kategorie-Titel in der Akzentfarbe ihres Bandes (wie Notenbuch) */
table.matrix th.mx-cat[data-top="0"] { color: var(--cat-1-fg); }
table.matrix th.mx-cat[data-top="1"] { color: var(--cat-2-fg); }
table.matrix th.mx-cat[data-top="2"] { color: var(--cat-3-fg); }
/* Namensspalte klar von den Notenspalten abgesetzt */
table.matrix .stu-name { border-right: 2px solid var(--cat-divider); }
/* Spaltenstriche: JEDE Notenspalte fein abgegrenzt (z. B. die einzelnen Termine
   unter „Referate") — abgeschwächter Ton des Kategorie-Trenners. Die stärkeren
   top-start/cat-start-Regeln stehen weiter unten und gewinnen an Kategorie-Grenzen. */
table.matrix td, table.matrix th.leaf {
  border-left: 1px solid color-mix(in srgb, var(--cat-divider) 45%, transparent);
}
table.matrix .stu-name, table.matrix .final-col { border-left-color: var(--cat-divider); }
/* Dicke Trennlinie am Beginn jedes obersten Bandes – klare Abgrenzung. */
table.matrix th.top-start, table.matrix td.top-start { border-left: 3px solid var(--cat-divider); }
/* Dünne Trennlinie an Unterkategorie-Grenzen (z. B. Mündlich|Schriftlich im selben Semester). */
table.matrix th.cat-start, table.matrix td.cat-start { border-left: 1px solid var(--cat-divider); }

th.mx-cat {
  font-weight: 700; padding: 10px 12px !important; white-space: nowrap;
  font-size: 13px;
  letter-spacing: .2px;
}
/* Oberste Kategorie-Köpfe (data-top gesetzt + Band-Start) kräftiger */
th.mx-cat[data-top] .mx-toggle { color: var(--text); }
th.mx-cat.collapsed .mx-toggle { font-style: italic; opacity: .85; }

/* ---- Frei gewählte Spaltenfarbe (überschreibt die automatische data-top-Rotation) ----
   Bewusst nur ein AKZENT, keine deckende Fläche: die Akzentfarbe kommt als Inline-Variable
   --cc-fg (aus der Palette oben). Körperzellen bekommen nur einen Hauch Tönung, der Kopf
   ein etwas kräftigeres Band + eine feine Punkt-Textur, dazu die farbige Bandkante links und
   der Titel in der Akzentfarbe. background-COLOR (nicht das -shorthand) lässt die
   Zeilen-Schraffur der geraden Zeilen intakt. */
table.matrix td[data-catcolor] { background-color: color-mix(in srgb, var(--cc-fg) 7%, transparent); }
table.matrix th[data-catcolor] {
  background-color: color-mix(in srgb, var(--cc-fg) 13%, transparent);
}
/* Farbige Kante am Beginn der obersten Kategorie (statt neutralem Trenner) */
table.matrix th.top-start[data-catcolor], table.matrix td.top-start[data-catcolor] { border-left-color: var(--cc-fg); }
/* Kategorie-/Spaltentitel in der Akzentfarbe */
table.matrix th.mx-cat[data-catcolor] .mx-toggle { color: var(--cc-fg); }
table.matrix th.leaf[data-catcolor] .mx-toggle { color: var(--cc-fg); }

/* Farbwähler im Dialog */
.cc-pick { display: flex; flex-wrap: wrap; gap: 7px; }
.cc-sw { width: 30px; height: 30px; border-radius: 8px; border: 2px solid var(--border); cursor: pointer;
  padding: 0; position: relative; transition: transform .1s, box-shadow .15s; }
.cc-sw:hover { transform: translateY(-1px); }
.cc-sw.sel { border-color: var(--text); box-shadow: 0 0 0 2px var(--accent-soft); }
.cc-sw.sel::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: 14px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.cc-sw.cc-auto { background: repeating-linear-gradient(45deg, var(--surface-2) 0 5px, var(--surface) 5px 10px);
  color: var(--text-dim); font-size: 15px; display: grid; place-items: center; }

.mx-toggle { cursor: pointer; user-select: none; font-weight: 700; }
.mx-toggle:hover { opacity: .7; text-decoration: underline; }
.mx-toggle small { display: block; color: var(--text-dim); opacity: .85; font-weight: 500; font-size: 10.5px; }
.mx-add, .mx-menu { border: 1px solid var(--border); background: rgba(255,255,255,.5); border-radius: 6px; cursor: pointer; font-size: 12px; padding: 2px 6px; margin-left: 5px; color: var(--text); opacity: .8; transition: .15s; }
.mx-random { display: inline-grid; place-items: center; width: 27px; height: 27px; margin: 5px 0 0; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 15px; cursor: pointer; opacity: .82; transition: transform .16s, opacity .16s, border-color .16s; }
.mx-random:hover, .mx-random:focus-visible { transform: rotate(-12deg) scale(1.12); opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
:root[data-theme="dark"] .mx-add, :root[data-theme="dark"] .mx-menu { background: rgba(255,255,255,.08); }
.mx-add:hover { background: var(--accent); color: #fff; border-color: transparent; opacity: 1; }
.mx-menu:hover { opacity: 1; background: var(--surface); }
th.mx-cat .badge { font-size: 10.5px; color: var(--text-dim); background: rgba(255,255,255,.5); border: 1px solid var(--border); padding: 0 6px; border-radius: 999px; margin-left: 6px; }
:root[data-theme="dark"] th.mx-cat .badge { background: rgba(255,255,255,.08); }

.gcell-btn { width: 100%; min-width: 70px; border: none; background: transparent; font: inherit; color: var(--text); padding: 11px 4px; cursor: pointer; border-radius: 6px; position: relative; font-weight: 600; }
.gcell-btn:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.gcell-btn.absent { color: var(--text-dim); font-style: italic; opacity: .55; }
.gcell-btn.has-com::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.gcell-btn.has-history::before { content: '🕒'; position: absolute; right: 3px; bottom: 2px; font-size: 9px; line-height: 1; opacity: .7; }
.stu-cell.random-arrival { animation: randomNameArrival 1.35s ease-out; border-radius: 8px; }
.gcell-btn.random-target-cell { animation: randomCellTarget 1.4s ease-out; }

/* ---- Zufallsauswahl je Notenspalte ---- */
.random-pick-overlay { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; overflow: hidden; background: rgba(8,12,18,.62); backdrop-filter: blur(5px); }
.random-picker { position: relative; z-index: 2; min-width: min(430px, 86vw); max-width: 86vw; padding: 25px 30px 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--text); box-shadow: 0 22px 70px rgba(0,0,0,.32); text-align: center; transform-origin: center; }
.random-kicker { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.random-reel { min-height: 90px; margin: 10px 0 6px; display: flex; align-items: center; justify-content: center; gap: 15px; font-size: clamp(23px,4vw,38px); font-weight: 800; line-height: 1.12; }
.random-reel.tick { color: var(--accent); transform: translateY(-2px); }
.random-column { color: var(--text-dim); font-size: 13px; }
.random-avatar { width: 88px; height: 88px; border-radius: 50%; font-size: 24px; box-shadow: 0 0 0 5px var(--accent-soft); }
.random-fx { position: absolute; inset: 0; pointer-events: none; }

.random-skin-terminal { background: color-mix(in srgb,#020b07 86%,transparent); }
.random-skin-terminal .random-picker { border-color: var(--accent); border-radius: 4px; background: color-mix(in srgb,var(--surface) 92%,#001b0e); box-shadow: 0 0 28px var(--accent-soft), inset 0 0 26px rgba(0,255,120,.04); }
.random-skin-terminal .random-picker::before { content: '> SELECT_STUDENT --RANDOM'; display: block; margin-bottom: 8px; color: var(--text-dim); font: 10px/1.2 monospace; text-align: left; }
.random-skin-terminal .random-fx { opacity: .24; background: repeating-linear-gradient(180deg,transparent 0 4px,rgba(80,255,155,.18) 5px); animation: randomTerminalScan .55s linear infinite; }
.random-skin-terminal .random-picker.picked { animation: randomTerminalLock .58s steps(5,end); }

.random-skin-classic { background: rgba(235,243,238,.68); }
.random-skin-classic .random-picker { border-color: color-mix(in srgb,var(--accent) 38%,var(--border)); background: color-mix(in srgb,var(--surface) 96%,white); box-shadow: 0 24px 80px rgba(34,77,58,.2); }
.random-skin-classic .random-fx { background: radial-gradient(circle at 50% 45%,rgba(255,255,255,.92),transparent 32%),linear-gradient(115deg,transparent 20%,rgba(255,255,255,.58) 46%,transparent 70%); animation: randomLightSweep 1.35s ease-in-out infinite alternate; }
.random-skin-classic .random-picker.picked { animation: randomElegantPop .7s cubic-bezier(.2,.8,.2,1); }

.random-skin-kawaii { background: rgba(255,232,244,.7); }
.random-skin-kawaii .random-picker { border: 3px solid #f19ac2; border-radius: 28px; background: linear-gradient(145deg,#fff8fc,#f5f0ff); color: #53364d; box-shadow: 0 20px 70px rgba(215,91,151,.28); }
.random-skin-kawaii .random-kicker { color: #d64f91; }
.random-skin-kawaii .random-column { color: #89657f; }
.random-skin-kawaii .random-fx::before { content: '♡  ✿  ★  ♡  ✦  ♡  ✿  ☆  ♡'; position: absolute; inset: 12% 5% auto; color: #e86ba7; font-size: clamp(20px,5vw,46px); letter-spacing: 2.4vw; text-align: center; animation: randomKawaiiFloat 1.1s ease-in-out infinite alternate; }
.random-skin-kawaii .random-fx::after { content: '✦  ♡  ☆  ✿  ♡  ★  ♡'; position: absolute; inset: auto 8% 13%; color: #9b78d1; font-size: clamp(18px,4vw,38px); letter-spacing: 2.8vw; text-align: center; animation: randomKawaiiFloat 1.35s ease-in-out infinite alternate-reverse; }
.random-skin-kawaii .random-picker.picked { animation: randomKawaiiPop .82s cubic-bezier(.22,1.35,.4,1); }

@keyframes randomNameArrival { 0%{box-shadow:0 0 0 0 var(--accent);transform:scale(.96)} 32%{box-shadow:0 0 0 8px var(--accent-soft);transform:scale(1.05)} 100%{box-shadow:0 0 0 0 transparent;transform:none} }
@keyframes randomCellTarget { 0%,28%{background:var(--accent);color:#fff;box-shadow:0 0 0 6px var(--accent-soft)} 100%{background:transparent;color:inherit;box-shadow:none} }
@keyframes randomTerminalScan { from{transform:translateY(-7px)} to{transform:translateY(7px)} }
@keyframes randomTerminalLock { 0%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 100%{transform:none} }
@keyframes randomLightSweep { from{transform:translateX(-8%) scale(1)} to{transform:translateX(8%) scale(1.08)} }
@keyframes randomElegantPop { 0%{transform:scale(.86);opacity:.55} 55%{transform:scale(1.045);opacity:1} 100%{transform:scale(1)} }
@keyframes randomKawaiiFloat { from{transform:translateY(-7px) rotate(-2deg)} to{transform:translateY(8px) rotate(2deg)} }
@keyframes randomKawaiiPop { 0%{transform:scale(.72) rotate(-4deg)} 46%{transform:scale(1.12) rotate(3deg)} 72%{transform:scale(.97) rotate(-1deg)} 100%{transform:scale(1)} }
.catcol { color: var(--text-dim); font-style: italic; display: inline-block; padding: 11px 4px; font-weight: 500; }
tr.mx-cur td { background: rgba(47, 125, 110, .08) !important; }
tr.mx-cur .stu-name { background: rgba(47, 125, 110, .08) !important; }

/* ---- WebUntis-Klassenauswahl ---- */
.untis-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; }
.untis-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; cursor: pointer; }
.untis-row:hover { background: var(--surface-2); }
.untis-row .u-name { font-weight: 600; }
.untis-row .u-meta { margin-left: auto; font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }

/* ---- Kursanlage aus der SuS-Datenbank ---- */
.sus-groups { max-height: 46vh; overflow-y: auto; margin-top: 4px; }
.sus-grp { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; background: var(--surface-2); }
.sus-grp-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.sus-warn { color: var(--g4); margin-bottom: 6px; }
.sus-ks { display: flex; flex-wrap: wrap; gap: 6px; }
.sus-k { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 13.5px; }
.sus-k:hover { border-color: var(--accent); }
.sus-k input { accent-color: var(--accent); }

.sus-hits { max-height: 190px; overflow-y: auto; margin: -6px 0 10px; }
.sus-hit { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--border); background: transparent; padding: 8px 10px; cursor: pointer; color: var(--text); font: inherit; }
.sus-hit:hover { background: var(--accent-soft); }
.sus-picked { display: flex; flex-wrap: wrap; gap: 6px; max-height: 130px; overflow-y: auto; }
.sus-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent); font-size: 13px; }
.sus-chip button { border: none; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; color: var(--text-dim); }
.sus-chip button:hover { color: var(--g5); }

/* ---- Kontextmenü (Kategorie-„+") ---- */
.popmenu { position: fixed; z-index: 80; min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 10px 34px rgba(0,0,0,.24); padding: 6px; }
.popmenu-item { display: block; width: 100%; text-align: left; border: none; background: transparent; padding: 9px 11px; border-radius: 8px; font: inherit; color: var(--text); cursor: pointer; }
.popmenu-item:hover { background: var(--accent-soft); }
.popmenu-sep { height: 1px; background: var(--border); margin: 5px 4px; }

/* ---- Menü am Namen: EIN kleiner Knopf statt vier Symbolen ----------------
   Seit 15.09.2026. Vorher hing an jeder Namenszelle ein Knopf je Modul
   (Fehlzeit, zu spät, WH, Vermerk); bei vieren blieb vom Vornamen nichts mehr
   übrig. Jetzt ein „⋯“ in der freien Ecke — es kostet 24 px auf der
   Vornamen-Zeile und sonst nichts. Der Punkt darauf zeigt, ob etwas anliegt. */
.kind-menu-button {
  position: absolute; right: 2px; bottom: 1px; display: grid; place-items: center;
  box-sizing: border-box; width: 18px; height: 18px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--text-dim);
  font: 400 13px/1 system-ui; opacity: .45; cursor: pointer; letter-spacing: 0;
}
/* Unsichtbar vergrößertes Tippziel (~38 px), ohne Layoutkosten. */
.kind-menu-button::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; }
.kind-menu-button:hover, .kind-menu-button:focus-visible { opacity: 1; background: var(--accent-soft); }
.kind-menu-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.stu-cell:hover .kind-menu-button { opacity: .85; }
/* Der Punkt: liegt etwas an, ist der Knopf nicht mehr zu übersehen. */
.kind-menu-button > i { display: none; position: absolute; top: -1px; right: -1px; width: 6px; height: 6px; border-radius: 50%; }
.kind-menu-button[data-ton] > i { display: block; }
.kind-menu-button[data-ton=""] > i { display: none; }
.kind-menu-button[data-ton="alarm"] { opacity: 1; }
.kind-menu-button[data-ton="alarm"] > i { background: #c0392f; }
.kind-menu-button[data-ton="warn"] { opacity: 1; }
.kind-menu-button[data-ton="warn"] > i { background: #bc7220; }
.kind-menu-button[data-ton="info"] > i { background: var(--text-dim); }
/* Platz auf der Vornamen-Zeile — genau ein Knopf. Der Nachname bleibt voll. */
.stu-cell:has(.kind-menu-button) .mx-nm .fn { padding-right: 22px; }
.stu-cell:has(.kind-menu-button):not(:has(.mx-nm)) { padding-right: 22px; }

.popmenu.kind-menu { min-width: 246px; }
.popmenu.kind-menu .popmenu-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; }
.popmenu.kind-menu .km-sym { flex: none; width: 17px; text-align: center; font-size: 13px; line-height: 1.35; }
.popmenu.kind-menu .km-text { display: block; line-height: 1.3; font-size: 13.5px; }
.popmenu.kind-menu .km-text small { display: block; font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.popmenu.kind-menu .km-kopf {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-dim); font-weight: 600; cursor: default;
}
.popmenu.kind-menu .popmenu-item:has(.km-kopf) { cursor: default; padding: 8px 10px 3px; }
.popmenu.kind-menu .popmenu-item:has(.km-kopf):hover { background: none; }
@media (max-width: 480px) {
  .kind-menu-button { width: 22px; height: 22px; font-size: 15px; }
  .stu-cell:has(.kind-menu-button) .mx-nm .fn { padding-right: 26px; }
  .popmenu.kind-menu { min-width: min(280px, calc(100vw - 24px)); }
  .popmenu.kind-menu .popmenu-item { padding: 11px 10px; }
}

.pad { position: fixed; right: 26px; bottom: 26px; z-index: 70; width: 350px; max-width: calc(100vw - 24px); max-height: calc(100vh - 36px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.28); padding: 14px; }
.pad-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pad-title { flex: 1; line-height: 1.25; }
.pad-title small { display: block; color: var(--text-dim); }
.pad-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.pad-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.pad-choice { font: inherit; font-weight: 650; padding: 9px 0; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); cursor: pointer; color: var(--text); }
.pad-choice:hover { border-color: var(--accent); }
.pad-choice.sel { background: var(--accent); color: #fff; border-color: transparent; }
.pad-com { width: 100%; font: inherit; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); resize: vertical; margin-bottom: 10px; }
.pad-history { border-top: 1px solid var(--border); padding-top: 9px; margin: 1px 0 11px; }
.pad-history-title { color: var(--text-dim); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.pad-history-empty { color: var(--text-dim); font-size: 11.5px; padding: 5px 1px; }
.pad-history-row { display: flex; align-items: center; gap: 7px; padding: 7px 5px; border-radius: 8px; }
.pad-history-row + .pad-history-row { border-top: 1px solid color-mix(in srgb,var(--border) 68%,transparent); }
.pad-history-row:hover { background: var(--surface-2); }
.pad-history-main { min-width: 0; flex: 1; display: grid; gap: 1px; }
.pad-history-main b { font-size: 12px; font-weight: 650; }
.pad-history-main span, .pad-history-main small { color: var(--text-dim); font-size: 10.5px; line-height: 1.35; }
.pad-history-actions { display: flex; gap: 3px; flex: none; }
.pad-history-actions .btn { min-width: 28px; padding: 4px 6px; }
.pad-foot { display: flex; justify-content: space-between; align-items: center; }
.pad-nav { display: flex; gap: 4px; }

.dup-values-option { display: flex; align-items: flex-start; gap: 10px; margin: 13px 0; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); cursor: pointer; }
.dup-values-option input { margin-top: 3px; accent-color: var(--accent); }
.dup-values-option span { display: grid; gap: 3px; }
.dup-values-option b { font-size: 13px; }
.dup-values-option small { color: var(--text-dim); font-size: 11.5px; line-height: 1.4; }

/* Notenampel */
.grade-pill { display: inline-block; min-width: 26px; padding: 2px 8px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 13px; }
.g-1 { background: var(--g1); } .g-2 { background: var(--g2); } .g-3 { background: var(--g3); color: #3a2c00;}
.g-4 { background: var(--g4); } .g-5 { background: var(--g5); } .g-0 { background: var(--surface-2); color: var(--text-dim); }

/* ---- Notenbaum-Editor ---- */
.tree { list-style: none; margin: 0; padding: 0; }
.tree ul { list-style: none; margin: 0; padding-left: 22px; border-left: 1px dashed var(--border); }
.node-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-sm); margin: 3px 0; background: var(--surface-2); }
.node-row.cat { background: var(--accent-soft); }
.node-row .nm { font-weight: 600; flex: 1; }
.node-row .badge { font-size: 11.5px; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); padding: 1px 7px; border-radius: 999px; }
.node-row .badge.share { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.node-row input.inline, .node-row select.inline { font: inherit; border: 1px solid var(--border); background: var(--surface); border-radius: 7px; padding: 3px 6px; }
.node-row .w-input { width: 54px; text-align: center; }

/* ---- Statistik / Klassenspiegel ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.stat .k { font-size: 12px; color: var(--text-dim); }
.stat .v { font-size: 26px; font-weight: 700; margin-top: 2px; }

.histo { display: flex; align-items: flex-end; gap: 14px; height: 220px; padding: 10px 6px 0; }
.histo .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.histo .bar { width: 100%; max-width: 70px; border-radius: 8px 8px 0 0; transition: height .4s; min-height: 3px; }
.histo .bar-val { font-weight: 700; }
.histo .bar-lbl { font-size: 12px; color: var(--text-dim); text-align: center; }

/* ---- Schüler-Analyse ---- */
.analysis-bar { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.analysis-bar .lbl { width: 200px; font-size: 13.5px; }
.analysis-bar .track { flex: 1; height: 20px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.analysis-bar .fill { height: 100%; border-radius: 6px; }
.analysis-bar .val { width: 54px; text-align: right; font-weight: 600; }
.analysis-bar.sub .lbl { padding-left: 22px; color: var(--text-dim); }

/* ---- Schüler-Analyse (Notenbuch-Stil) ---- */
.an-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.an-endnote { display: flex; align-items: center; gap: 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; text-align: left; padding: 7px; cursor: pointer; }
.an-endnote:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.an-endnote.manual { box-shadow: inset 0 0 0 1px var(--amber); }
.an-endnote .grade-pill { font-size: 24px; padding: 6px 18px; }

.an-graph-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; flex: none; }
.seg-btn { border: none; background: var(--surface); color: var(--text-dim); font-size: 12.5px; padding: 6px 12px; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.active { background: var(--accent); color: #fff; }

.an-graph-wrap { position: relative; }
.an-svg { width: 100%; height: auto; display: block; }
.an-grid { stroke: var(--border); stroke-width: 1; }
.an-gridlbl { fill: var(--text-dim); font-size: 11px; text-anchor: end; }
.an-ref { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.an-reflbl { fill: var(--accent); font-size: 11px; font-weight: 600; }
.an-line-path { fill: none; stroke: var(--text-dim); stroke-width: 2; stroke-linejoin: round; opacity: .7; }
.an-dotpt { cursor: pointer; }
.an-dotpt:hover, .an-dotpt:focus { r: 7; }
.an-tooltip {
  position: absolute; transform: translate(-50%, -110%); pointer-events: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: 12px; line-height: 1.5; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 5;
}
.an-tooltip.show { opacity: 1; visibility: visible; }

.an-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.an-tile { border: 1.5px solid; border-radius: var(--radius-sm); overflow: hidden; min-width: 150px; flex: 1 1 170px; background: var(--surface); }
.an-tile-head { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 11px; color: #fff; font: inherit; font-size: 13px; border: 0; text-align: left; }
.an-tile-head:not(:disabled) { cursor: pointer; }
.an-tile-head:not(:disabled):hover { filter: brightness(1.08); }
.an-tile-head.manual { box-shadow: inset 0 0 0 2px var(--amber); }
.an-tile-head b { font-size: 15px; }
.an-tile-dec { padding: 3px 11px; font-size: 11.5px; color: var(--text-dim); }
.an-subtiles { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 10px 10px; }
.an-subtile { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 7px; border-radius: 7px; color: #fff; font-size: 10.5px; min-width: 52px; }
.an-subtile b { font-size: 13px; }
.an-subtile span { opacity: .92; max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.an-toolbar .field { width: min(340px, 100%); margin: 0; }
.an-toolbar > .btn { flex: none; }
.an-group-membership { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 14px; padding: 11px 0; border-top: 1px solid var(--border); }
.an-group-membership:first-of-type { border-top: 0; padding-top: 0; }
.an-group-label { display: grid; gap: 3px; align-content: start; }
.an-group-label span { color: var(--text-dim); font-size: 11.5px; }
.an-group-label b { color: var(--accent); font-size: 15px; }
.an-group-members { display: flex; flex-wrap: wrap; gap: 7px; }
.an-member-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 5px 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.an-member-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.an-member-chip.current { border-color: var(--accent); cursor: default; }
.an-member-chip .avatar { width: 28px; height: 28px; }
.an-member-chip > span { display: grid; text-align: left; }
.an-member-chip small { color: var(--text-dim); font-size: 9.5px; }
.an-entry { padding: 7px 0 9px; border-bottom: 1px solid var(--border); }
.an-entry.calc-analysis .an-line-main { cursor: pointer; border-radius: 7px; }
.an-entry.calc-analysis .an-line-main:hover { background: var(--accent-soft); }
.an-entry.manual { box-shadow: inset 3px 0 0 var(--amber); padding-left: 7px; }
.an-line-main { display: flex; align-items: center; gap: 8px; padding: 3px 5px; }
.an-entry-meta { padding: 3px 5px 0 23px; display: grid; gap: 5px; }
.an-facts { display: flex; flex-wrap: wrap; gap: 5px; }
.an-facts span { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); border-radius: 999px; padding: 2px 7px; font-size: 10.5px; }
.an-note, .an-import-note { font-size: 11.5px; line-height: 1.45; color: var(--text-dim); white-space: pre-wrap; }
.an-note.manual { color: var(--amber); }
.an-import-note { font-style: italic; }
.an-history { font-size: 11.5px; }
.an-history summary { color: var(--accent); cursor: pointer; font-weight: 650; width: fit-content; }
.an-history > div { margin-top: 5px; display: grid; gap: 5px; }
.an-history-event { display: grid; gap: 1px; border-left: 2px solid var(--border); padding: 4px 8px; background: var(--surface-2); border-radius: 0 6px 6px 0; }
.an-history-event b { font-size: 11.5px; }
.an-history-event span { color: var(--text-dim); font-size: 10.5px; }

.an-line { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.an-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.an-nm { flex: 1; font-size: 13.5px; }
.an-avg { font-weight: 600; font-size: 13.5px; }

/* ---- Avatare / klickbare Personen ---- */
.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex: none; }
.avatar-ph { display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.avatar-lg { width: 64px; height: 64px; font-size: 20px; }
.stu-cell { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 2px; border-radius: 8px; }
.stu-cell:hover { color: var(--accent); }
.stu-cell:hover .avatar { outline: 2px solid var(--accent); }

/* ---- Aufzeichnungen ---- */
.rec-add { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; }
.rec-add textarea { flex: 1; font: inherit; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); resize: vertical; }
.rec-list { display: flex; flex-direction: column; gap: 8px; }
.rec-item { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 34px 9px 12px; }
.rec-ts { font-size: 11.5px; color: var(--text-dim); margin-bottom: 2px; }
.rec-txt { white-space: pre-wrap; font-size: 14px; }
.rec-del { position: absolute; top: 5px; right: 5px; }

/* ---- Schüler-Gruppierungen / Notenbuch-Schemata ---- */
.group-schemes-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.group-schemes-head h2 { margin-bottom: 3px; }
.group-empty { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 16px; color: var(--text-dim); font-size: 13px; }
.group-scheme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; }
.group-scheme-card { display: grid; gap: 10px; width: 100%; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.group-scheme-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.group-scheme-title { display: grid; gap: 2px; }
.group-scheme-title b { font-size: 15px; }
.group-scheme-title small { color: var(--text-dim); font-size: 11.5px; }
.group-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.group-chips > span { padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); font-size: 11.5px; }
.group-chips > span b { color: var(--text); margin-left: 3px; }
.group-chips > span.unassigned { border: 1px dashed var(--border); background: transparent; }
.group-edit { color: var(--accent); font-size: 11.5px; font-weight: 650; }
.modal.modal-wide { max-width: 850px; }
.group-editor-label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 16px 0 8px; }
.group-editor-groups { display: grid; gap: 7px; }
.group-editor-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 7px; }
.group-editor-row > span { color: var(--text-dim); font-size: 11px; text-align: center; }
.group-editor-row > input, .group-assignment-row select { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.group-assignment-title { margin-top: 21px; }
.group-assignment-list { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; max-height: 42vh; overflow-y: auto; }
.group-assignment-row { display: grid; grid-template-columns: minmax(210px, 1fr) minmax(180px, .8fr); align-items: center; gap: 12px; padding: 6px 9px; border-bottom: 1px solid var(--border); }
.group-assignment-row:last-child { border-bottom: 0; }
.group-assignment-row .stu-cell { cursor: default; }
.group-assignment-row .avatar { width: 30px; height: 30px; }

/* ---- Schüler-Markierungen / Geburtstage ---- */
.student-label { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; box-shadow: 0 0 0 2px var(--surface); }

/* ---- Händisch ergänzt · Kurs-Papierkorb · WebUntis-Abgleich (28.09.2026) ----
   „händisch" = nicht über WebUntis geladen. In der Matrix nur ein kleines Zeichen
   oben rechts am Foto (Gegenstück zur 18+-Plakette unten links), ausgeschrieben
   im Schüler-Reiter, im Abgleich und im Klassendossier. */
.manual-pill {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--accent) 70%, var(--border));
  color: var(--accent); background: var(--accent-soft);
  font-size: 10.5px; font-weight: 650; line-height: 1.6; vertical-align: 1px; white-space: nowrap;
}
.manual-badge {
  position: absolute; right: -5px; top: -5px;
  width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  border: 1.5px solid var(--surface);
  font-size: 9.5px; font-weight: 800; line-height: 1; pointer-events: auto; cursor: help;
}
.mx-av:has(.manual-badge) .avatar { outline: 2px dashed var(--accent); outline-offset: 1px; }
.trash-card { border-style: dashed; }
.trash-card summary { cursor: pointer; list-style: none; }
.trash-card summary::-webkit-details-marker { display: none; }
.trash-card summary h2 { display: inline; margin: 0 8px 0 0; font-size: 15px; }
.trash-card summary .hint { display: block; margin-top: 4px; }
.trash-list { display: grid; gap: 0; margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.trash-row { display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(150px, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.trash-row:last-child { border-bottom: 0; }
.trash-row .stu-cell { cursor: default; opacity: .8; }
.trash-row .avatar { width: 30px; height: 30px; filter: grayscale(.6); }
.trash-meta { font-size: 12px; color: var(--text-dim); line-height: 1.35; }
.trash-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.modal.roster-modal { max-width: 760px; }
.roster-dlg { display: grid; gap: 12px; }
.roster-source { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.roster-source .btn { margin-left: 4px; }
.roster-ok, .roster-warn { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; margin-right: 4px; }
.roster-ok { background: color-mix(in srgb, var(--g1) 16%, transparent); color: var(--g1); }
.roster-warn { background: color-mix(in srgb, var(--g4) 18%, transparent); color: var(--g4); }
.roster-sum { position: sticky; top: -1px; z-index: 1; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13.5px; }
.roster-sum .is-in, .roster-state.is-in { color: var(--g1); font-weight: 650; }
.roster-sum .is-out, .roster-state.is-out { color: var(--g5); font-weight: 650; }
.roster-sec { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.roster-sec-head { padding: 7px 11px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 13px; }
.roster-sec.is-leave { border-color: color-mix(in srgb, var(--g5) 45%, var(--border)); }
.roster-sec.is-leave .roster-sec-head { background: color-mix(in srgb, var(--g5) 9%, var(--surface-2)); }
.roster-sec.is-add { border-color: color-mix(in srgb, var(--g1) 45%, var(--border)); }
.roster-sec.is-add .roster-sec-head { background: color-mix(in srgb, var(--g1) 9%, var(--surface-2)); }
.roster-sec.is-manual { border-style: dashed; }
.roster-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 11px; border-bottom: 1px solid var(--border); cursor: pointer; }
.roster-row:last-child { border-bottom: 0; }
.roster-row input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.roster-row .stu-cell { cursor: pointer; min-width: 0; }
.roster-row .avatar { width: 30px; height: 30px; }
.roster-row.off .stu-cell { opacity: .5; }
.roster-row.disabled { cursor: not-allowed; opacity: .6; }
.roster-state { font-size: 12px; color: var(--text-dim); white-space: nowrap; }
.roster-search { border-top: 1px solid var(--border); padding-top: 12px; }
.roster-search label { display: block; margin-bottom: 6px; font-size: 13px; }
.roster-search input { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.roster-hits { max-height: 220px; overflow-y: auto; margin-top: 4px; }
.roster-hit { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--border); background: transparent; padding: 6px 8px; cursor: pointer; color: var(--text); font: inherit; }
.roster-hit:hover:not([disabled]) { background: var(--accent-soft); }
.roster-hit[disabled] { cursor: default; opacity: .55; }
.roster-hit .avatar { width: 28px; height: 28px; }
@media (max-width: 640px) {
  .trash-row { grid-template-columns: 1fr; gap: 5px; }
  .trash-actions { justify-content: flex-start; }
  .roster-row { grid-template-columns: 22px minmax(0, 1fr); }
  .roster-state { grid-column: 2; }
  /* Am Handy nur Änderungen zeigen — „bleibt" macht sonst jede Zeile doppelt hoch. */
  .roster-state:not(.is-in):not(.is-out) { display: none; }
}
.birthday-card { border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.birthday-list { display: flex; flex-wrap: wrap; gap: 8px; }
.birthday-person { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.birthday-person:hover { border-color: var(--accent); background: var(--accent-soft); }
.birthday-person .avatar { width: 32px; height: 32px; }
.birthday-person .stu-cell { display: grid; gap: 0; padding: 0; }
.birthday-person .stu-cell small { color: var(--text-dim); font-size: 10.5px; }

/* ---- Statistik direkt an einem Notenknoten ---- */
.node-statistics { margin-top: 14px; padding: 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.node-stat-summary { display: flex; flex-wrap: wrap; gap: 6px; }
.node-stat-summary span { padding: 3px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); font-size: 11px; }
.node-stat-summary b { color: var(--text); }
.node-stat-bars { height: 92px; display: flex; align-items: end; justify-content: space-around; gap: 8px; margin-top: 10px; }
.node-stat-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 3px; color: var(--text-dim); font-size: 10px; }
.node-stat-bar i { display: block; width: min(34px, 100%); min-height: 2px; border-radius: 5px 5px 0 0; background: var(--accent); }
.node-stat-bar b { color: var(--text); font-size: 10.5px; }
.gcell-btn.locked { cursor: not-allowed; opacity: .72; background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, color-mix(in srgb, var(--border) 32%, transparent) 6px, color-mix(in srgb, var(--border) 32%, transparent) 8px); }

/* ---- Checklisten ---- */
.section-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 19px 0 9px; }
.section-title h2, .section-title h3 { margin: 0; }
.checklist-card { margin-bottom: 14px; }
.checklist-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.checklist-head h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 3px; }
.check-favorite { color: var(--amber); }
.check-progress { height: 8px; margin: 12px 0; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.check-progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
.checklist-students { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-y: auto; max-height: 48vh; }
.check-student { display: grid; grid-template-columns: 34px minmax(190px, 1fr) minmax(180px, 1fr); align-items: center; gap: 8px; padding: 6px 9px; border-bottom: 1px solid var(--border); }
.check-student:last-child { border-bottom: 0; }
.check-student.done { background: color-mix(in srgb, var(--g1) 8%, transparent); }
.check-student.done .stu-cell { opacity: .68; }
.check-toggle { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-dim); cursor: pointer; }
.check-student.done .check-toggle { border-color: var(--g1); background: var(--g1); color: #fff; }
.check-student > input { width: 100%; font: inherit; font-size: 12px; padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }

/* ---- Forms / Modal ---- */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 4px; }
.field input, .field select, .field textarea { width: 100%; font: inherit; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.modal-back { position: fixed; inset: 0; background: rgba(10,16,22,.45); display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-width: 460px; padding: 22px; max-height: 88vh; overflow-y: auto; }
.modal h3 { margin: 0 0 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.override-warning { border: 1px solid var(--amber); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--amber) 11%, transparent); padding: 10px 12px; margin-bottom: 14px; font-size: 13px; line-height: 1.45; }
.override-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.override-compare > div { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 9px 11px; display: grid; gap: 2px; }
.override-compare span, .override-compare small { color: var(--text-dim); font-size: 11px; }
.override-compare b { font-size: 18px; }

.empty { text-align: center; color: var(--text-dim); padding: 60px 20px; }
.hint { font-size: 12.5px; color: var(--text-dim); }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 18px; border-radius: 999px; box-shadow: var(--shadow); z-index: 60; opacity: 0; transition: .25s; pointer-events: none; }
.toast.show { opacity: 1; }

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .an-toolbar { align-items: stretch; flex-direction: column; }
  .an-toolbar .field { width: 100%; }
  .an-group-membership { grid-template-columns: 1fr; gap: 8px; }
  .group-schemes-head { align-items: stretch; flex-direction: column; }
  .group-assignment-row { grid-template-columns: 1fr; gap: 5px; }
  .check-student { grid-template-columns: 34px 1fr; }
  .check-student > input { grid-column: 2; }
}

/* ---- Noten-Matrix am Handy: alles kompakter, damit statt einer Spalte mehrere
   Notenspalten neben der (schmaleren) Namensspalte sichtbar sind. ---- */
@media (max-width: 640px) {
  table.matrix { font-size: 13px; }
  table.matrix td.stu-name, table.matrix th.stu-name { min-width: 118px; max-width: 148px; padding: 4px 7px !important; }
  table.matrix td.stu-name .stu-cell { gap: 6px; }
  table.matrix td.stu-name .avatar { width: 25px; height: 25px; }
  .mx-nm .ln { font-size: 12px; }
  .mx-nm .fn { font-size: 10px; }
  .gcell-btn { min-width: 52px; padding: 9px 2px; }
  .gcell-btn.locked { min-width: 52px; }
  table.matrix th.leaf { min-width: 50px; }
  th.mx-cat { padding: 8px 6px !important; font-size: 12px; }
  .final-col { padding: 3px 5px !important; }
}

/* Rückgängig-Knopf: ohne Verlauf ausgegraut */
.btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }

/* ---- Zusammengerechnete Spalte am Ende einer Kategorie (z. B. Semesternote) ----
   Ergaenzt 04.09.2026. Sie zeigt denselben Wert wie die eingeklappte Kategorie,
   steht aber NEBEN dem aufgeklappten Inhalt — wie die Endnote, nur je Abschnitt.
   Optisch deshalb an die Endnote angelehnt: eigene Kante, halbfett, ruhiger Grund. */
table.matrix th.sum-col,
table.matrix td.sum-col {
  border-left: 2px solid var(--cat-divider);
  background-color: color-mix(in srgb, var(--cat-divider) 12%, transparent);
}
table.matrix th.sum-col .mx-toggle {
  font-weight: 700;
  cursor: default;          /* nichts zum Auf-/Zuklappen */
}
table.matrix td.sum-col .calc-grade-btn { font-weight: 700; }

/* Genauer Wert in Klammern neben der gerundeten Note einer eingeklappten
   Kategorie (04.09.2026). 4+ kann 3,51 oder 3,83 sein — der Unterschied
   entscheidet, ob man noch eingreifen muss. */
.catcol-dec {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-dim);
  margin-top: 1px;
}

/* ---- Entfallene Unterrichtsstunde (04.09.2026) ----
   Die Spalte bleibt stehen — man soll sehen, dass an dem Tag Unterricht
   geplant war und ausfiel. Sie zaehlt aber nicht (Gewicht 0) und ist gesperrt.
   Optisch zurueckgenommen und diagonal schraffiert, damit sie sich beim
   Ueberfliegen von einer bloss leeren Spalte unterscheidet. */
table.matrix th.entfall,
table.matrix td.entfall {
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--text-dim) 22%, transparent) 0 1px,
    transparent 1px 6px
  );
}
table.matrix th.entfall .mx-toggle {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
table.matrix th.entfall .mx-toggle small { text-decoration: none; font-style: italic; }
table.matrix td.entfall .gcell-btn { opacity: .45; }

/* ==== Muster als zweite Unterscheidung neben der Farbe (04.09.2026) ====
   Vorher trug jeder gefaerbte Kopf dasselbe Punktraster — nebeneinander waren
   Unterkategorien dadurch kaum auseinanderzuhalten, und wer Farben schlecht
   unterscheidet, hatte gar kein Signal. Das Muster ist frei waehlbar, wird an
   die Spalten darunter vererbt und funktioniert auch ohne eigene Farbe: dann
   greift es auf die Textfarbe zurueck.
   Die Musterfarbe leitet sich immer aus --cc-fg ab, damit Hintergrund,
   Schraffur und Text zusammenpassen statt sich zu beissen. */
table.matrix th[data-catpattern],
table.matrix td[data-catpattern] {
  --pat: color-mix(in srgb, var(--cc-fg, currentColor) 30%, transparent);
  --pat-zart: color-mix(in srgb, var(--cc-fg, currentColor) 16%, transparent);
}
/* Zellen bekommen das Muster zarter als die Koepfe — die Noten sollen lesbar
   bleiben, das Muster ist Orientierung, kein Selbstzweck. */
table.matrix td[data-catpattern] { --pat: var(--pat-zart); }

table.matrix th[data-catpattern="punkte"],
table.matrix td[data-catpattern="punkte"] {
  background-image: radial-gradient(var(--pat) 1px, transparent 1.6px);
  background-size: 7px 7px;
}
table.matrix th[data-catpattern="schraeg"],
table.matrix td[data-catpattern="schraeg"] {
  background-image: repeating-linear-gradient(45deg, var(--pat) 0 1px, transparent 1px 8px);
}
table.matrix th[data-catpattern="gitter"],
table.matrix td[data-catpattern="gitter"] {
  background-image:
    repeating-linear-gradient(0deg,  var(--pat) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, var(--pat) 0 1px, transparent 1px 9px);
}
table.matrix th[data-catpattern="zickzack"],
table.matrix td[data-catpattern="zickzack"] {
  background-image:
    repeating-linear-gradient(45deg,  var(--pat) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, var(--pat) 0 1px, transparent 1px 7px);
}
table.matrix th[data-catpattern="dicht"],
table.matrix td[data-catpattern="dicht"] {
  background-image: repeating-linear-gradient(90deg, var(--pat) 0 1px, transparent 1px 4px);
}

/* Musterwaehler im Dialog — dieselben Muster, damit man vorher sieht, was kommt */
.cp-sw {
  width: 40px; height: 30px; border-radius: 8px; border: 2px solid var(--border);
  cursor: pointer; padding: 0; background-color: var(--surface-2);
  color: var(--text-dim); font-size: 13px; line-height: 1;
  --cc-fg: var(--text); --pat: color-mix(in srgb, var(--text) 42%, transparent);
  transition: transform .1s, box-shadow .15s;
}
.cp-sw:hover { transform: translateY(-1px); }
.cp-sw.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.cp-sw[data-catpattern="punkte"]  { background-image: radial-gradient(var(--pat) 1px, transparent 1.6px); background-size: 7px 7px; }
.cp-sw[data-catpattern="schraeg"] { background-image: repeating-linear-gradient(45deg, var(--pat) 0 1px, transparent 1px 8px); }
.cp-sw[data-catpattern="gitter"]  { background-image: repeating-linear-gradient(0deg, var(--pat) 0 1px, transparent 1px 9px), repeating-linear-gradient(90deg, var(--pat) 0 1px, transparent 1px 9px); }
.cp-sw[data-catpattern="zickzack"]{ background-image: repeating-linear-gradient(45deg, var(--pat) 0 1px, transparent 1px 7px), repeating-linear-gradient(-45deg, var(--pat) 0 1px, transparent 1px 7px); }
.cp-sw[data-catpattern="dicht"]   { background-image: repeating-linear-gradient(90deg, var(--pat) 0 1px, transparent 1px 4px); }

/* ==== Farbe und Symbol je Kurs (04.09.2026) ====
   Ein Dutzend Kurse untereinander unterscheiden sich sonst nur im Namen
   ("1a Biologie", "1d Biologie", …). Die Farbkante links faellt beim
   Ueberfliegen zuerst auf, das Symbol traegt die Bedeutung. */
.course-item { position: relative; }
.course-item.has-color {
  border-left: 3px solid var(--cc-fg);
  padding-left: 9px;
  background-color: color-mix(in srgb, var(--cc-fg) 6%, transparent);
}
.course-item.has-color.active {
  background-color: color-mix(in srgb, var(--cc-fg) 14%, transparent);
}
.course-item.has-color .ci-name { color: var(--cc-fg); }
.course-item { display: flex; align-items: flex-start; gap: 8px; }
.ci-icon {
  flex: none; font-size: 17px; line-height: 1.25; margin-top: 1px;
  filter: saturate(.92);
}

/* Symbolwaehler im Kursdialog */
.ci-sw {
  min-width: 34px; height: 30px; border-radius: 8px; border: 2px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 4px;
  transition: transform .1s, box-shadow .15s;
}
.ci-sw:hover { transform: translateY(-1px); }
.ci-sw.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ---- Fassungen einer Note (26.09.2026) ----
   Geraet und Server hatten Verschiedenes: winziges „!" oben links in der
   Zelle, im Pad die Fassungen zur Wahl. Bernstein statt Rot — es ist nichts
   verloren, es wartet nur auf eine Entscheidung. */
.var-mark {
  display: inline-grid; place-items: center; width: 12px; height: 12px; border-radius: 50%;
  background: #d99100; color: #fff; font-size: 9px; font-weight: 800; line-height: 1;
}
.gcell-btn .var-mark { position: absolute; top: 3px; left: 3px; pointer-events: none; }
.pad-var { border: 1px solid var(--border); border-radius: 10px; padding: 8px 9px; margin: 0 0 10px; }
.pad-var.offen { border-color: #d99100; background: color-mix(in srgb, #d99100 9%, var(--surface)); }
.pad-var-kopf { display: grid; gap: 2px; margin-bottom: 6px; }
.pad-var-kopf b { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.pad-var-kopf small { color: var(--text-dim); font-size: 11.5px; line-height: 1.35; }
.pad-var-row { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-radius: 8px; }
.pad-var-row + .pad-var-row { border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent); }
.pad-var-row.gilt { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pad-var-note { min-width: 38px; text-align: center; font-size: 18px; font-weight: 800; }
.pad-var-info { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 12px; }
.pad-var-info span, .pad-var-info small { color: var(--text-dim); overflow-wrap: anywhere; }
.pad-var-row .btn { min-height: 36px; white-space: nowrap; }

/* ---- Tägliche MA als Saldo: Einstellungen + Erklärung (02.10.2026) ---- */
.modal.modal-wide { max-width: 860px; }
.saldo-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.saldo-mode label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.saldo-mode label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.saldo-mode input { margin-top: 3px; }
.saldo-mode span { display: grid; gap: 2px; }
.saldo-mode small { color: var(--text-dim); font-size: 12px; }
.saldo-ctl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; margin-bottom: 6px; }
.saldo-ctl label { display: grid; gap: 6px; font-size: 13px; color: var(--text-dim); }
.saldo-ctl label b { color: var(--text); }
.saldo-ctl.is-off { opacity: .45; }
.saldo-satz { font-size: 13px; margin: 6px 0 10px; }
.saldo-tab-wrap { max-height: 42vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.saldo-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.saldo-tab th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.saldo-tab td { padding: 5px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.saldo-tab td:first-child { white-space: normal; min-width: 140px; }
.saldo-tab td small { color: var(--text-dim); margin-left: 3px; }
.saldo-tab td.is-on { background: var(--accent-soft); }
.saldo-tab td.is-alt { opacity: .55; }
.explain-modal { display: flex; flex-direction: column; }
.explain-frame { width: 100%; height: min(70vh, 900px); border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
@media (max-width: 640px) {
  .saldo-mode, .saldo-ctl { grid-template-columns: 1fr; }
  .modal.modal-wide { padding: 16px; }
}