/* MySchool — Aktuelles (Prototyp)
   Ruhiges, gut lesbares Layout. Grosse Schrift bewusst gewählt (Sek B). */

:root {
  --font-basis: 18px;              /* grosszügige Grundschrift */
  --farbe-text: #1f2933;
  --farbe-text-leise: #5b6b7a;
  --farbe-bg: #eef2f6;
  --farbe-karte: #ffffff;
  --farbe-rand: #d7dee6;
  --farbe-akzent: #2f6fb0;
  --farbe-heute-bg: #fff7e6;
  --farbe-heute-rand: #e0a800;
  --radius: 12px;
  --schatten: 0 1px 3px rgba(20, 40, 60, 0.08), 0 4px 12px rgba(20, 40, 60, 0.05);
  /* v0.4.54, Layout-Regression-Fix nach dem Header-Umbau: Unterkante von
     Kopfzeile+Hauptnav im "festgeklebten" (sticky) Zustand. Dieser statische
     Wert ist nur der FALLBACK -- js/app.js#kopfNavUnterkanteAktualisieren()
     misst die echte Unterkante zur Laufzeit (Nav-sticky-top + Nav-Höhe) und
     überschreibt die Variable in px. Damit hängen Sidebar-sticky-Offset und
     Stundenplan-Popup-Position nicht mehr an hartkodierten Schätzwerten,
     die bei jeder Header-Änderung erneut driften (genau das war die von
     Beat gemeldete "in die Mitte verschoben"-Regression). */
  --kopf-nav-unterkante: 13.6rem;
  /* v0.4.54, Beat: "Schulplaner-Spalte ist momentan nicht lesbar, da die
     Spalte zu klein ist" + neues Feature (verschiebbare Trennleiste). Default
     von 19rem auf 22rem angehoben (Beat: "Standardbreite ist, dass alles
     dargestellt werden kann, links und auch rechts") -- per Drag am neuen
     Splitter (#aktuelles-splitter, js/app.js#schulplanerBreiteInitialisieren())
     frei verstellbar und in localStorage gemerkt. Siehe .aktuelles-spalten__links. */
  --schulplaner-breite: 22rem;
}

* { box-sizing: border-box; }

html { font-size: var(--font-basis); }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--farbe-text);
  background: var(--farbe-bg);
  line-height: 1.5;
}

/* ---------- Kopfzeile ---------- */
.app-header {
  background: var(--farbe-karte);
  border-bottom: 1px solid var(--farbe-rand);
  position: sticky;
  top: 0;
  z-index: 10;
}
/* Trägt dieselben Breiten-Klassen (inhalt--schmal/normal/breit) wie .inhalt
   weiter unten (siehe breiteAnwenden() in js/app.js) — dadurch hat die
   Kopfzeile denselben horizontalen Rahmen wie der Seiteninhalt, und das
   grosse Logo kann sich ungefähr an der Wochenplanung-Spalte ausrichten. */
.app-header__inhalt {
  display: flex;
  align-items: center;
  gap: 1rem;
  /* v0.4.148 (Beat, "Oberteil immer noch zu gross -- Hälfte, mehr Arbeitsfläche"):
     vertikales Padding halbiert (0.9rem -> 0.45rem). Horizontal bewusst 1.4rem
     belassen (Rahmen zur Wochenplanung-Ausrichtung). */
  padding: 0.45rem 1.4rem;
  margin: 0 auto;
}
/* Drei-Zonen-Kopfzeile: Marke links, "Dashboard"-Titel mittig, Steuerung
   rechts — alle drei flex:1, damit der mittlere Titel unabhängig von der
   Breite von links/rechts wirklich in der Mitte sitzt (Beat: "In die Mitte
   kommt das Wort 'Dashboard'."). */
.app-header__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem; /* v0.4.148: 0.5rem -> 0.25rem (kompakter Kopf) */
  flex: 1 1 0;
}
.app-header__brand-zeile { display: flex; align-items: center; gap: 0.7rem; }
.app-header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* v0.4.148: MS-Logo kleiner 2.6rem -> 2.1rem. */
  width: 2.1rem; height: 2.1rem;
  border-radius: 9px;
  background: var(--farbe-akzent);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  flex: none;
}
.app-header__title { font-size: 1.2rem; font-weight: 700; }
.app-header__meta { font-size: 1.05rem; font-weight: 600; color: var(--farbe-text-leise); }
/* "Dashboard"-Titel, mittig in der Kopfzeile (Beat: "Erstelle einen schönen
   Titel." ... Nachbesserung: "Dashboard darf noch viel kräftiger sein, viel
   grösser." — bewusst als kräftige, prominente Aussage gesetzt statt eines
   zurückhaltenden Labels). */
.app-header__dashboard-titel {
  flex: 1 1 0;
  text-align: center;
  /* v0.4.148 (Beat, grösster Platzfresser): 2.5rem -> 1.5rem, Gewicht 900 -> 800.
     Bei 1.5rem passt "Dashboard Admin Heiniger" auf Desktop wieder in EINE Zeile
     (vorher 2 Zeilen). min-width:0 verhindert horizontalen Überlauf der Flex-Zelle. */
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--farbe-text);
  line-height: 1.2;
  min-width: 0;
}

/* ---------- Grosses Schullogo (v0.4.6, Beat-Nachbesserung) ----------
   Jetzt UNTER "MySchool" statt daneben (Beat: "Das Logo unter MySchool.
   Grösse ist gut." — Grösse bewusst unverändert übernommen). */
.app-header__logo-gross-bereich {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.app-header__logo-gross { display: inline-flex; align-items: center; }
.app-header__logo-gross img {
  display: block;
  /* v0.4.148: OWO-Schullogo kleiner 3.4rem -> 2rem (halbiert den rechten
     Kopf-Stapel). */
  height: 2rem;
  max-width: 11rem;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
/* v0.4.54, Phase 1 (genehmigter Vier-Pfeiler-Plan): rechte Header-Zone ist
   jetzt eine SPALTE -- oben das OWO-Schullogo (aus der linken Marken-Spalte
   hierher umgezogen), darunter eine Zeile mit Klassen-Wahl + Breiten-Wahl. */
.app-header__rechts {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.25rem; /* v0.4.148: 0.5rem -> 0.25rem (kompakter Kopf) */
}
.app-header__rechts-zeile { display: flex; align-items: center; gap: 1rem; }
/* v0.4.54: Identitäts-Anzeige links unter der Marke ("wer ist eingeloggt"). */
.app-header__identitaet { display: flex; align-items: center; min-height: 1.35rem; } /* v0.4.148: 1.6rem -> 1.35rem */
.identitaet__zeile { display: inline-flex; align-items: center; gap: 0.55rem; }
.identitaet__text { font-size: 0.98rem; font-weight: 600; color: var(--farbe-text-leise); }
.identitaet__zeile--admin .identitaet__text { color: var(--farbe-akzent); }
.identitaet__verlassen { font-size: 0.85rem; }
/* v0.4.54: Klassen-Wahl oben rechts (Dropdown für Lehrkraft/Admin,
   statischer Text für Schüler/anonym -- dann greift .app-header__meta). */
.klassen-wahl { display: inline-flex; align-items: center; gap: 0.45rem; }
.klassen-wahl__label { font-size: 0.9rem; font-weight: 600; color: var(--farbe-text-leise); }
.klassen-wahl__select { font: inherit; font-size: 0.95rem; }
/* v0.4.55, Beat: der frühere sichtbare "🖼 Logo ändern"-Knopf ist entfernt --
   Upload läuft jetzt verdeckt über Rechtsklick/Drag&Drop direkt auf dem Logo
   (siehe logoUploadWegeInitialisieren() in js/app.js, NUR für Administrator
   wirksam). Diese Klasse ist das kurze visuelle Feedback beim Drag-over --
   die Rollenprüfung passiert in JS, hier nur Optik. */
.app-header__logo-gross-bereich--drag-ueber {
  outline: 2px dashed var(--farbe-akzent);
  outline-offset: 3px;
  border-radius: 8px;
}
.logo-paste-zone {
  border: 1px dashed var(--farbe-rand);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--farbe-text-leise);
  cursor: text;
}
.logo-paste-zone:focus { outline: 2px solid rgba(47,111,176,0.35); border-color: var(--farbe-akzent); }
.logo-dialog-vorschau { display: flex; justify-content: center; }
.logo-dialog-vorschau img {
  max-width: 100%;
  max-height: 8rem;
  border-radius: 8px;
  border: 1px solid var(--farbe-rand);
  background: #fff;
}

/* ---------- Hauptnavigation ---------- */
.hauptnav {
  display: flex;
  gap: 0.4rem;
  /* v0.4.53: Top-Padding erhöht (0.6rem -> 1.4rem), damit über "Aktuelles"/
     "Unterrichtsmaterial" Platz für die absolut positionierten
     "Für Schüler"/"Für Lehrer"-Labels (.hauptnav__ueber-label) ist, ohne dass
     diese in die Kopfzeile darüber hineinragen. */
  padding: 1.4rem 1.4rem 0;
  background: var(--farbe-karte);
  border-bottom: 1px solid var(--farbe-rand);
  position: sticky;
  /* v0.4.148 (Beat, "Oberteil halbieren"): der Desktop-Kopf wurde stark
     verkleinert (Padding 0.45rem*2, OWO-Logo 2rem, rechter Stapel ≈ 4.3rem +
     Padding ≈ 5.2rem). Die sticky Hauptnav klebt darum jetzt bei ~5.5rem statt
     8.3rem direkt unter dem kompakten Kopf. Bewusst kompakt-STICKY statt "Kopf
     scrollt weg": die Desktop-Sidebar .aktuelles-spalten__links hängt an
     --kopf-nav-unterkante (nur bei Scroll 0 gemessen); bliebe der Kopf sichtbar
     nicht sticky, entstünde beim Scrollen eine ~5rem-Lücke unter der Nav. Ist
     kein Logo gesetzt, bleibt ein kleiner, harmloser Leerraum (nur Optik). */
  top: 5.5rem;
  z-index: 9;
}
.hauptnav__tab {
  position: relative; /* v0.4.53: Anker für .hauptnav__ueber-label */
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.7rem 1.2rem;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--farbe-text-leise);
  cursor: pointer;
  border-radius: 8px 8px 0 0;
}
.hauptnav__tab.is-active {
  color: var(--farbe-akzent);
  border-bottom-color: var(--farbe-akzent);
}
.hauptnav__tab.is-disabled {
  color: #aab6c2;
  cursor: not-allowed;
}
/* v0.4.52, Beat: zwei optisch klar unterscheidbare Gruppen in der Hauptnav --
   Schüler-Bereich (Aktuelles/Unterricht) "professionell heraussteichen",
   Admin-/Lehrkraft-Bereich (Unterrichtsmaterial/Links/Kurse verwalten/
   Lernzielkontrollen) "etwas markieren". Beide Gruppen bleiben normale
   Flex-Kinder von .hauptnav (kein Einfluss auf die bestehende
   `.hauptnav__tab`/`[data-view]`-Selektorlogik in js/app.js, die über
   querySelectorAll läuft und Verschachtelung egal ist). */
.hauptnav__gruppe {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.hauptnav__gruppe--schueler {
  position: relative;
  padding: 0.2rem 0.9rem 0.2rem 0.2rem;
  margin-right: 0.6rem;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(47, 111, 176, 0.09), rgba(47, 111, 176, 0.02));
  border: 1px solid rgba(47, 111, 176, 0.18);
}
/* v0.4.53, Beat, präzisiert: nicht mehr ein Label vor der ganzen Gruppe,
   sondern leicht ÜBER dem jeweils ersten/relevanten Tab -- "Für Schüler"
   über "Aktuelles", "Für Lehrer" über "Unterrichtsmaterial". Liegt als
   Kind-Element DES jeweiligen Buttons (siehe index.html-Kommentar dort:
   wichtig für das admin-only hidden-Verhalten bei "Unterrichtsmaterial" --
   ein Geschwister-Element würde bei hidden=true trotzdem sichtbar bleiben).
   .hauptnav__tab hat dafür position:relative bekommen. */
.hauptnav__ueber-label {
  position: absolute;
  top: -1.05rem;
  left: 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--farbe-akzent);
  white-space: nowrap;
  pointer-events: none;
}
.hauptnav__tab--admin .hauptnav__ueber-label { color: #5b6b7a; }
.hauptnav__gruppe--admin {
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  background: #eef1f4;
  border: 1px solid var(--farbe-rand);
}
/* v0.4.54, Pfeiler 3: NEUE dritte Gruppe "Admin" (Kurse verwalten) --
   deutlich abgesetzt von der neutralen Lehrer-Gruppe und der blauen
   Klassen-Gruppe. Warmer Coral-Ton gemäss der von Beat freigegebenen
   Vorschau (Orientierung; feine Ausgestaltung im bestehenden Stil). */
.hauptnav__gruppe--verwaltung {
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(214, 90, 60, 0.10), rgba(214, 90, 60, 0.03));
  border: 1px solid rgba(214, 90, 60, 0.28);
}
.hauptnav__gruppe--verwaltung .hauptnav__ueber-label { color: #c05a3c; }
.hauptnav__gruppe--verwaltung .hauptnav__tab.is-active {
  color: #c05a3c;
  border-bottom-color: #c05a3c;
}
.hauptnav__soon {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  background: #e4e9ef;
  color: #8a97a4;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  margin-left: 0.35rem;
  vertical-align: middle;
}

/* ---------- Inhalt ---------- */
.inhalt {
  /* Seit v0.4.1 (Stundenplan/Ferien/Ereignisse-Spalte links) braucht der
     Inhalt spürbar mehr Breite als die ursprünglichen 1100px, sonst wird die
     rechte 3-Wochen-Spalte zu schmal gequetscht (abgeschnittener Text,
     Beat-Rückmeldung). 1400px ("normal") lässt der fixen 19rem-Spalte links +
     der Wochenübersicht rechts genug Raum, bleibt aber weiterhin zentriert. */
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.4rem;
}
/* Persönliche Anzeigebreite (v0.4.2, #breiten-wahl) — reine Darstellungssache
   pro Gerät, verändert nie geteilte Inhalte. */
.inhalt--schmal { max-width: 1100px; padding: 0.9rem; }
.inhalt--normal { max-width: 1400px; }
.inhalt--breit { max-width: 1760px; }
.status {
  font-size: 1.05rem;
  color: var(--farbe-text-leise);
  padding: 1rem;
}
.status.is-fehler {
  color: #b0201a;
  background: #fdecea;
  border: 1px solid #f5c6c2;
  border-radius: var(--radius);
}

/* ---------- Vergangene Wochen ---------- */
.vergangen {
  margin-bottom: 1.4rem;
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: 0.4rem 1rem;
}
.vergangen__summary {
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--farbe-text-leise);
  padding: 0.6rem 0.2rem;
  /* Beat: "Entferne diesen Pfeil. Nimm überall diesen Pfeil weg." — auch
     dieses <summary> zeigte bisher den nativen Browser-Pfeil (war hier
     bisher nicht extra unterdrückt), jetzt konsistent mit allen anderen
     <summary>-Elementen der App entfernt. */
  list-style: none;
}
.vergangen__summary::-webkit-details-marker { display: none; }
.vergangen[open] .wochen-liste { margin-top: 0.6rem; }

/* ---------- Wochenkarte ---------- */
.wochen-liste { display: flex; flex-direction: column; gap: 1.4rem; }

.woche {
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.woche--aktuell { border-color: var(--farbe-akzent); box-shadow: 0 0 0 2px rgba(47,111,176,0.15), var(--schatten); }

.woche__kopf {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 0.9rem 1.2rem;
  background: #f4f7fa;
  border-bottom: 1px solid var(--farbe-rand);
}
.woche__kw { font-size: 1.4rem; font-weight: 700; color: var(--farbe-akzent); }
.woche__spanne { font-size: 1rem; color: var(--farbe-text-leise); }
.woche__badge {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  background: var(--farbe-akzent);
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
}

/* ---------- Tageszeile ---------- */
.tag {
  display: grid;
  grid-template-columns: 5.5rem 1fr 20rem;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  /* Sichtbarer Trenner zwischen den Tagen (Beat-Wunsch) — etwas kräftiger als
     die ursprüngliche, sehr helle Linie. */
  border-bottom: 2px solid var(--farbe-rand);
}
.tag:last-child { border-bottom: none; }
.tag--heute { background: var(--farbe-heute-bg); }
.tag--heute .tag__label { color: #a07800; }

/* Vergangene Tage, eingeklappt (Beat: "Sobald der Wochentag durch ist, klapp
   ihn ein"). Bewusst NICHT als Grid — dieser Zustand hat keine der drei
   Spalten-Kinder, "display: flex" statt "grid" hält die Zeile einfach und
   verhindert, dass hier je wieder ein Auto-Platzierungs-Problem auftreten
   kann. Antippen klappt den Tag wieder vollständig auf (immer reversibel). */
.tag--kompakt { display: flex; padding: 0; }
.tag-kompakt-btn {
  all: unset;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  border-radius: 8px;
}
.tag-kompakt-btn:hover, .tag-kompakt-btn:focus-visible {
  background: #f2f6fa;
  outline: 2px solid rgba(47, 111, 176, 0.3);
}
.tag-kompakt-btn__label { font-weight: 700; color: var(--farbe-text-leise); }
.tag-kompakt-btn__hinweis { font-size: 0.85rem; font-style: italic; color: #aab6c2; }
.tag__einklappen {
  font: inherit;
  font-size: 0.78rem;
  border: none;
  background: none;
  color: var(--farbe-akzent);
  cursor: pointer;
  padding: 0;
  margin-top: 0.3rem;
  text-decoration: underline;
  display: block;
}

.tag__label { }
.tag__tag { font-size: 1.15rem; font-weight: 700; }
.tag__datum { font-size: 0.9rem; color: var(--farbe-text-leise); }
.tag__heute-marke {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--farbe-heute-rand);
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  margin-top: 0.2rem;
}

/* Einträge (Fächer)
   grid-column: 2 explizit gesetzt (statt implizitem auto) — Beat/Larry fanden
   per DevTools, dass .eintraege sonst fälschlich in Spalte 1 (die 99px breite
   Label-Spalte) landete: .tag__label und .tag__meldungen sitzen auf eigenen
   Zeilen, wodurch in der eigentlichen "Inhalte + Hausaufgaben"-Zeile nichts
   Spalte 1 belegt — die Grid-Auto-Platzierung sprang dadurch einen zu weit
   links ein. Explizite Spalten-Angabe ist zuverlässiger als sich auf das
   Zusammenspiel mehrerer auto-platzierter Geschwisterelemente zu verlassen. */
.eintraege { grid-column: 2; display: flex; flex-direction: column; gap: 0.55rem; }
.eintrag { display: flex; align-items: flex-start; gap: 0.6rem; }
.chip {
  flex: none;
  min-width: 3.2rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  padding: 0.25rem 0.55rem;
  border-radius: 8px;
  white-space: nowrap;
}
.eintrag__text { padding-top: 0.1rem; }
.eintrag__titel { font-size: 1.05rem; }
.eintrag__lektion { font-size: 0.85rem; color: var(--farbe-text-leise); }
.eintrag__leer { color: var(--farbe-text-leise); font-style: italic; }

/* v0.4.63, Teil A: Inline-Bearbeitung der Tages-Fach-Einträge (nur Admin). Der
   Text-Bereich nimmt die Restbreite, damit Textfeld/Anhang-Editor Platz haben. */
.eintrag--editierbar .eintrag__text { flex: 1 1 auto; min-width: 0; }
.eintrag__titel-edit {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  font: inherit;
  font-size: 1.02rem;
  line-height: 1.35;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  background: #fff;
  min-height: 2rem;
}
.eintrag__titel-edit:focus { outline: 2px solid var(--farbe-akzent); outline-offset: -1px; }
/* v0.4.133: Inline-Rich-Text-Feld (contenteditable) für Wochenplan-Einträge --
   direkt reinschreiben + Format-Menü (nur bei Fokus) + Diktat. Read-only-Anzeige
   nutzt weiter .eintrag__titel (das sanitierte HTML rendert dort). */
.eintrag-rt { position: relative; flex: 1 1 auto; min-width: 0; }
.eintrag-rt__editor {
  min-height: 1.8rem;
  box-sizing: border-box;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  background: #fff;
  font-size: 1.02rem;
  line-height: 1.35;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
}
.eintrag-rt__editor:focus { outline: 2px solid var(--farbe-akzent); outline-offset: -1px; }
.eintrag-rt__editor:empty::before { content: attr(data-placeholder); color: var(--farbe-text-leise); font-style: italic; }
/* v0.4.150 (Beat): erkannte Links -- im Editor UND in der Anzeige klickbar (Klick
   öffnet). Deutliche Link-Optik + Zeiger-Cursor als Hinweis "hier öffnet etwas". */
.eintrag-rt__editor a,
.lernziel-info__editor a,
.rt-anzeige a,
.arbeitsraum-text-anzeige a { color: var(--farbe-akzent); text-decoration: underline; cursor: pointer; }
.eintrag-rt__editor a:hover,
.lernziel-info__editor a:hover { text-decoration: underline; opacity: 0.85; }
/* Format-Menü schwebt bei Fokus über dem Feld (kein Layout-Sprung). */
.eintrag-rt__leiste {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 6;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
  margin-bottom: 0.2rem;
  padding: 0.25rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  background: #f7f9fc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.eintrag-rt:focus-within .eintrag-rt__leiste { display: flex; }
.eintrag-rt__fmt {
  min-width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--farbe-rand);
  background: #fff;
  border-radius: 5px;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.3rem;
}
.eintrag-rt__fmt:hover { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }
.eintrag-rt__fmt--fett { font-weight: 800; }
.eintrag-rt__fmt--kursiv { font-style: italic; }
.eintrag-rt__fmt--unter { text-decoration: underline; }
.eintrag-rt__swatch { min-width: 1.35rem; width: 1.35rem; padding: 0; border: 1px solid rgba(0,0,0,0.3); }
.eintrag-rt__swatch:hover { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }
.eintrag-rt__mikro.mikro-btn { min-width: 1.75rem; height: 1.75rem; }
.eintrag-anhang-toolbar { display: flex; gap: 0.25rem; margin-top: 0.35rem; }
.eintrag__anhang-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}
.eintrag__anhang-typ {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--farbe-text-leise);
  background: #eef2f6;
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
}
.eintrag__anhang-feld { flex: 1 1 8rem; min-width: 6rem; font-size: 0.85rem; }
.eintrag--editierbar.eintrag--drophover,
.ha__item--editierbar.eintrag--drophover {
  outline: 2px dashed var(--farbe-akzent);
  outline-offset: 2px;
  background: #f2f8ff;
  border-radius: 8px;
}
/* v0.4.64: Hausaufgaben inline-editierbar — der Text-Bereich nimmt die
   Restbreite, damit Textfeld/Anhang-Editoren Platz haben (wie bei Fach-Einträgen). */
.ha__item--editierbar .ha__text { flex: 1 1 auto; min-width: 0; }

/* v0.4.66: Coaching-Widget im Schulplaner (Religion/Lift/Coaching der aktuell
   gewählten Klasse, admin-only) — Inhalt des Vollbild-Dialogs. Nutzt bewusst
   die bestehende .widget/.widget-vollbild-dialog-Hülle; hier nur die inneren
   Listen-/Abschnitts-Styles. */
.coaching-fenster { max-width: 34rem; }
.coaching-fenster__klasse { margin: 0 0 0.25rem; font-size: 1.15rem; }
.coaching-abschnitt { margin-top: 1rem; }
.coaching-abschnitt__titel { font-weight: 700; margin-bottom: 0.35rem; }
.coaching-namensliste { margin: 0; padding-left: 1.2rem; }
.coaching-namensliste li { margin: 0.1rem 0; }
.coaching-kw-kopf { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
.coaching-kw-kopf__label { font-weight: 600; }
.coaching-schueler-liste { display: flex; flex-direction: column; gap: 0.35rem; }
.coaching-schueler-liste__eintrag { display: flex; align-items: center; gap: 0.45rem; cursor: pointer; }

/* v0.4.70: Coaching-Ausbau -- Religion/Lift je eigene Liste (Name + Daten-Spalte),
   Coaching pro Schüler ([KW ▾] Name + zugeteilte-KW-Chips), Startwochen-Feld. */
.coaching-rl-liste { display: flex; flex-direction: column; gap: 0.3rem; }
.coaching-rl-zeile { display: flex; align-items: center; gap: 0.5rem; }
.coaching-rl-zeile__name { flex: 0 0 40%; min-width: 8rem; }
.coaching-rl-zeile__daten { flex: 1 1 auto; min-width: 6rem; font-size: 0.85rem; }
.coaching-start-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; }
.coaching-start-zeile__label { display: inline-flex; align-items: center; gap: 0.35rem; }
.coaching-schueler-zeile { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.coaching-schueler-zeile__kw { flex: 0 0 auto; font-size: 0.82rem; }
.coaching-schueler-zeile__name { flex: 1 1 8rem; min-width: 6rem; }
.coaching-schueler-zeile__chips { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
/* v0.4.100 (Beat): Schülernummer vor dem Namen (Reihenfolge = Verteil-Reihenfolge). */
.coaching-schueler-zeile__nr { flex: 0 0 auto; min-width: 2.2rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--farbe-text-leise); }
.coaching-schueler-liste__kopf {
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--farbe-text-leise);
  border-bottom: 1px solid var(--farbe-rand);
  padding-bottom: 0.2rem;
  margin-bottom: 0.1rem;
}
.coaching-schueler-liste__kopf .coaching-schueler-zeile__nr { text-align: left; }
.coaching-kw-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.76rem;
  background: #e2ecfb;
  color: #1a4c8b;
  border-radius: 10px;
  padding: 0.08rem 0.45rem;
}
.coaching-kw-chip__x {
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0;
}
.coaching-kw-chip__x:hover { color: #a11d1d; }

/* v0.4.70: Coaching-Erinnerungs-Banner (Schüler, Mittwoch vor dem Gespräch),
   über der Arbeitsoberfläche, mit ✕ schliessbar. */
.coaching-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #fff5db;
  border: 1px solid #f0dfa8;
  border-left: 4px solid #e0b100;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}
.coaching-banner__x {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--farbe-text-leise);
  padding: 0.1rem 0.3rem;
}
.coaching-banner__x:hover { color: #a11d1d; }

/* v0.4.71: Arbeitsraum (Etappe 1). Auslöser sitzt über den Dossiers im
   geöffneten Thema; öffnet gross über die vollbildWidgetBauen-Hülle. Der
   Vollbild-Dialog wird grosszügig/grafisch (iPad-Gefühl). */
.widget--arbeitsraum .widget__kopf--knopf { font-size: 1rem; }
/* v0.4.97 (Beat): der Arbeitsraum ist die HAUPTSACHE -- Rahmen markant/prominent. */
.widget--arbeitsraum {
  border: 2px solid var(--farbe-akzent);
  border-radius: 12px;
  background: #f3f8ff;
  box-shadow: 0 2px 10px rgba(0,110,220,0.10);
}
.widget--arbeitsraum .widget__kopf--knopf { font-weight: 800; }
/* v0.4.97: der Ein-/Ausblenden-Umschalter ist SEKUNDÄR -- dezenter Text-Knopf
   unter dem Arbeitsraum, klein und zurückhaltend. */
.thema-arbeitsraum-toggle {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.15rem 0.3rem;
  background: transparent;
  border: none;
  color: var(--farbe-text-leise);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}
.thema-arbeitsraum-toggle:hover { color: var(--farbe-text); }
/* Font-Reset: der Auslöser sitzt in .thema-zeile__inhalt, das im geöffneten
   Thema font-size:2rem setzt (siehe .thema-zeile[open]). Der Dialog ist im DOM
   ein Kind davon und würde das erben -- hier bewusst auf normale Grösse zurück. */
.widget-vollbild-dialog--arbeitsraum { font-size: 1rem; }
/* v0.4.150 (Beat): den vollen Vollbild-Platz nutzen ("mehr nach rechts, Felder
   grösser") -- kein 1200px-Deckel mehr, nur ein schlanker Sicherheitsrand; der
   Innenabstand des Vollbild-Inhalts ist hier bewusst schmaler. */
.widget-vollbild-dialog--arbeitsraum .widget__inhalt { max-width: none; }
.widget-vollbild-dialog--arbeitsraum > .widget__inhalt { padding: 0.9rem 0.8rem 1.2rem; }
/* v0.4.150: Kopfzeile = Titel links, "Standard wiederherstellen" rechts. */
.arbeitsraum__kopfzeile { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 0.75rem; }
.arbeitsraum__titel { margin: 0; font-size: 1.25rem; flex: 1 1 auto; min-width: 0; }
.arbeitsraum__reset { flex: 0 0 auto; }
.arbeitsraum__grid {
  --ar-gutter-w: 0.85rem; /* Breite der ziehbaren Trennkanten-Tracks */
  display: grid;
  grid-template-columns: 1fr var(--ar-gutter-w) 1.8fr var(--ar-gutter-w) 1fr;
  gap: 0; /* der Abstand steckt jetzt in den Gutter-Tracks */
  /* v0.4.99 (Beat): alle drei Spalten gleich hoch -> Zusatz/Lösungen nehmen die
     volle Höhe der (durch das PDF hohen) Bearbeitung-Spalte ein. */
  align-items: stretch;
}
/* v0.4.150 (Beat): ziehbare Trennkante zwischen zwei Spalten (Breite anpassen). */
.arbeitsraum-gutter {
  position: relative;
  cursor: col-resize;
  touch-action: none; /* iPad: ziehen, nicht scrollen */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.arbeitsraum-gutter::before {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--farbe-rand);
  border-radius: 2px;
  transition: background 0.12s, width 0.12s;
}
.arbeitsraum-gutter:hover::before,
.arbeitsraum-gutter:focus-visible::before,
.arbeitsraum-gutter--aktiv::before { background: var(--farbe-akzent); width: 4px; }
.arbeitsraum-gutter:focus-visible { outline: none; }
.arbeitsraum-gutter__griff {
  position: relative;
  z-index: 1;
  color: var(--farbe-text-leise);
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
}
.arbeitsraum-gutter:hover .arbeitsraum-gutter__griff,
.arbeitsraum-gutter--aktiv .arbeitsraum-gutter__griff { opacity: 1; color: var(--farbe-akzent); }
.arbeitsraum-spalte {
  position: relative; /* v0.4.101: Positionierungs-Kontext für den mittigen Klapp-Chip */
  border: 1px solid var(--farbe-rand);
  border-radius: 12px;
  background: #fbfcfe;
  padding: 0.75rem;
  min-height: 8rem;
}
.arbeitsraum-spalte--offen { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.arbeitsraum-spalte--loesungen { background: #fdf6f6; border-color: #f0d3d3; }
.arbeitsraum-spalte__kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-weight: 700; margin-bottom: 0.5rem; }
.arbeitsraum-spalte__titel { flex: 1 1 auto; min-width: 0; }
.arbeitsraum-spalte__inhalt { display: flex; flex-direction: column; gap: 0.5rem; }
/* Eingeklappte Spalte: schmale, volle-Höhe-Leiste -- nur der mittige Chip. */
.arbeitsraum-spalte--zu { min-height: 0; align-self: stretch; }
/* v0.4.114 (Beat): klickbare Klapp-LEISTE an der inneren Kante -- die GANZE Fläche
   togglet auf/zu (grosse Touch-Fläche). Darin der Rund-Chip als Indikator, der beim
   Scrollen mitwandert (JS setzt `top` = Sichtmitte). */
.arbeitsraum-spalte__leiste {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.9rem;
  z-index: 3;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s;
  touch-action: manipulation;
}
.arbeitsraum-spalte__leiste:hover,
.arbeitsraum-spalte__leiste:focus-visible { background: rgba(0,110,220,0.07); outline: none; }
.arbeitsraum-spalte__leiste--links { right: 0.2rem; }
.arbeitsraum-spalte__leiste--rechts { left: 0.2rem; }
/* Eingeklappt: die ganze schmale Rail ist die Klickfläche. */
.arbeitsraum-spalte__leiste--zu { left: 0; right: 0; width: auto; }
.arbeitsraum-spalte__pfeil {
  position: absolute;
  top: 50%;   /* JS überschreibt beim Scrollen (mitscrollend, Sichtmitte) */
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* Klick geht an die Leiste (ganze Fläche togglet) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid var(--farbe-akzent);
  background: #eef6ff;
  color: var(--farbe-akzent);
  border-radius: 50%;
  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.arbeitsraum-spalte__leiste:hover .arbeitsraum-spalte__pfeil,
.arbeitsraum-spalte__leiste:focus-visible .arbeitsraum-spalte__pfeil { background: var(--farbe-akzent); color: #fff; }
/* Damit die Leiste im AUSGEKLAPPTEN Zustand den Inhalt/Scrollbereich nicht
   überdeckt: auf der inneren Seite Platz lassen. */
.arbeitsraum-spalte--zusatz:not(.arbeitsraum-spalte--zu) { padding-right: 3.4rem; }
.arbeitsraum-spalte--loesungen:not(.arbeitsraum-spalte--zu) { padding-left: 3.4rem; }
.arbeitsraum-zuweisen-liste { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.4rem; }
.arbeitsraum-text {
  width: 100%;
  box-sizing: border-box;
  /* v0.4.90: Auto-Höhe -- die Höhe setzt JS an den Inhalt (kein fester
     Scroll-Kasten mehr), darum kein manuelles Resize/kein Overflow-Scroll. */
  resize: none;
  overflow: hidden;
  font: inherit;
  line-height: 1.4;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  min-height: 2.6rem;
}
.arbeitsraum-text-anzeige { margin: 0; white-space: pre-wrap; }
/* v0.4.90: mehrere Textblöcke je Bereich (click-to-edit, Auto-Höhe, Drag&Drop). */
.arbeitsraum-textbloecke { display: flex; flex-direction: column; gap: 0.4rem; }
.arbeitsraum-textblock { display: flex; align-items: flex-start; gap: 0.3rem; }
.arbeitsraum-textblock__griff {
  flex: 0 0 auto;
  cursor: grab;
  touch-action: none; /* iPad: Griff zieht, scrollt nicht */
  user-select: none;
  color: var(--farbe-text-leise);
  padding: 0.4rem 0.15rem;
  line-height: 1;
}
.arbeitsraum-textblock--drag { opacity: 0.6; }
.arbeitsraum-textblock--zielmarke { box-shadow: 0 -2px 0 0 var(--farbe-akzent); }
/* v0.4.156 (Beat): Ziel-Bereich beim Verschieben eines Textblocks in einen ANDEREN
   Bereich -- dezent (Design bleibt sonst gleich). Die ganze Spalte/der ganze Abschnitt
   ist Ablagefläche (JS-Fallback), darum braucht der Container keine Mindesthöhe. */
.arbeitsraum-textbloecke--dropziel {
  outline: 2px dashed var(--farbe-akzent);
  outline-offset: 3px;
  border-radius: 8px;
  background: rgba(0, 110, 220, 0.04);
}
.arbeitsraum-textblock__inhalt { flex: 1 1 auto; min-width: 0; }
.arbeitsraum-textblock__inhalt--anzeige {
  white-space: pre-wrap;
  cursor: text;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  min-height: 1.5rem;
}
.arbeitsraum-textblock__inhalt--anzeige:hover { border-color: var(--farbe-rand); background: #fafcff; }
.arbeitsraum-textblock__leer { color: var(--farbe-text-leise); font-style: italic; }
.arbeitsraum-text-add { align-self: flex-start; margin-top: 0.1rem; }
/* v0.4.147: Eintrags-Auge am Textblock (neben dem ✕) -- Schüler-Sichtbarkeit je Block. */
.arbeitsraum-block-auge { flex: 0 0 auto; }
.arbeitsraum-block-auge--verborgen { opacity: 0.55; }
/* v0.4.147: editierbarer Pane-Titel (datalist-Vorschläge + spellcheck). Sieht als
   Text aus, zeigt beim Hover/Fokus, dass er ein Feld ist. */
.arbeitsraum-spalte__titel-input {
  font: inherit; font-weight: 700; color: inherit;
  border: 1px solid transparent; border-radius: 6px;
  padding: 0.15rem 0.35rem; background: transparent;
}
.arbeitsraum-spalte__titel-input:hover { border-color: var(--farbe-rand); background: #fafcff; }
.arbeitsraum-spalte__titel-input:focus { border-color: var(--farbe-akzent); background: #fff; outline: none; }
.arbeitsraum-ki { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.arbeitsraum-ki__btn { opacity: 0.6; cursor: not-allowed; }
.arbeitsraum-werkzeug { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.arbeitsraum-anhang-zeile { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid #eef2f6; }
.arbeitsraum-anhang-zeile__body { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; flex: 1 1 auto; min-width: 0; }
.arbeitsraum-anhang-zeile__feld { flex: 1 1 7rem; min-width: 5rem; font-size: 0.82rem; }
/* v0.4.85: Vorschau/Thumbnail (immer ein Bild). */
.arbeitsraum-vorschau {
  flex: 0 0 auto;
  width: 3.4rem;
  height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  background: #f7f9fc;
}
.arbeitsraum-vorschau__bild,
.arbeitsraum-vorschau__canvas { max-width: 100%; max-height: 100%; object-fit: cover; }
.arbeitsraum-vorschau__icon { font-size: 1.6rem; }
/* v0.4.89: Vorschau öffenbarer Dokumente (PDF/Bild) ist selbst ein Klickziel
   -> öffnet den view-only-Betrachter. */
.arbeitsraum-vorschau--klick { cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.arbeitsraum-vorschau--klick:hover,
.arbeitsraum-vorschau--klick:focus-visible {
  border-color: var(--farbe-akzent);
  box-shadow: 0 0 0 2px rgba(0, 110, 220, 0.18);
  outline: none;
}
/* v0.4.91 (Teil C): Zusatzmaterial + Lösungen als aufklappbares <details> mit
   grosser, auto-höhe Vorschau (kein fester Kasten -- Höhe wächst mit dem Bild). */
.arbeitsraum-material { border: 1px solid var(--farbe-rand); border-radius: 8px; margin: 0.35rem 0; background: #fff; }
.arbeitsraum-material__kopf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  list-style: none;
}
.arbeitsraum-material__kopf::-webkit-details-marker { display: none; }
.arbeitsraum-material__kopf::before { content: "\25B8"; color: var(--farbe-text-leise); transition: transform 0.12s; }
.arbeitsraum-material[open] > .arbeitsraum-material__kopf::before { transform: rotate(90deg); }
.arbeitsraum-material__titel { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.arbeitsraum-material__body { padding: 0.3rem 0.55rem 0.55rem; display: flex; flex-direction: column; gap: 0.5rem; }
.arbeitsraum-gross-vorschau {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  background: #f7f9fc;
  padding: 0.4rem;
}
.arbeitsraum-gross-vorschau--icon { padding: 0.8rem; }
.arbeitsraum-gross-vorschau.arbeitsraum-vorschau--klick:hover,
.arbeitsraum-gross-vorschau.arbeitsraum-vorschau--klick:focus-visible {
  border-color: var(--farbe-akzent);
  box-shadow: 0 0 0 2px rgba(0, 110, 220, 0.18);
  outline: none;
}
/* Auto-Höhe: das Medium wächst mit dem Inhalt (nur noch Icon-Fallback -- öffenbare
   Dokumente zeigen v0.4.99 die scrollbare Volldarstellung, siehe unten). */
.arbeitsraum-gross-vorschau__medium {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
/* v0.4.99 (Beat): Zusatz/Lösungen zeigen das Dokument als scrollbare, view-only
   VOLLDARSTELLUNG inline (alle Seiten, Zoom, KEIN Download). Der Scroll-Bereich
   ist so hoch wie die Bearbeitung (min(70vh,48rem)) und hat eine SICHTBARE
   Scrollleiste ("der Strahl, wo ich mich bewegen kann"). */
.arbeitsraum-inline-dok { width: 100%; }
.arbeitsraum-inline-dok .pdf-viewer,
.arbeitsraum-inline-dok .bild-viewer { margin-top: 0; }
.arbeitsraum-inline-dok .pdf-viewer__seiten,
.arbeitsraum-inline-dok .bild-viewer__flaeche {
  scrollbar-width: thin;
  scrollbar-color: var(--farbe-akzent) #e6ebf1;
  scrollbar-gutter: stable;
}
.arbeitsraum-inline-dok .pdf-viewer__seiten::-webkit-scrollbar,
.arbeitsraum-inline-dok .bild-viewer__flaeche::-webkit-scrollbar { width: 14px; }
.arbeitsraum-inline-dok .pdf-viewer__seiten::-webkit-scrollbar-track,
.arbeitsraum-inline-dok .bild-viewer__flaeche::-webkit-scrollbar-track { background: #e6ebf1; border-radius: 7px; }
.arbeitsraum-inline-dok .pdf-viewer__seiten::-webkit-scrollbar-thumb,
.arbeitsraum-inline-dok .bild-viewer__flaeche::-webkit-scrollbar-thumb {
  background: var(--farbe-akzent);
  border-radius: 7px;
  border: 3px solid #e6ebf1;
}
/* Scrollleiste aussen: Lösungen (rechts) = rechts (Standard); Zusatzmaterial
   (links) = links (direction-Trick, Inhalt bleibt LTR). */
.arbeitsraum-material--zusatz .pdf-viewer__seiten,
.arbeitsraum-material--zusatz .bild-viewer__flaeche { direction: rtl; }
.arbeitsraum-material--zusatz .pdf-viewer__seiten > *,
.arbeitsraum-material--zusatz .bild-viewer__flaeche > * { direction: ltr; }
/* v0.4.85: Drop-Ablagefeld (Datei/Bild/Link hineinziehen). */
.arbeitsraum-dropzone {
  border: 2px dashed var(--farbe-rand);
  border-radius: 10px;
  padding: 0.7rem;
  text-align: center;
  color: var(--farbe-text-leise);
  font-size: 0.85rem;
  margin-top: 0.3rem;
}
.arbeitsraum-dropzone--hover { border-color: var(--farbe-akzent); background: #eef6ff; color: var(--farbe-text); }
@media (max-width: 800px) {
  /* Einspaltig auf schmalen Geräten -- der Inline-Style (gridTemplateColumns aus JS)
     wird hier bewusst mit !important überstimmt; die Trennkanten entfallen. */
  .arbeitsraum__grid { grid-template-columns: 1fr !important; gap: 0.7rem; }
  .arbeitsraum-gutter { display: none; }
}
/* v0.4.150 (Beat): kompakte "+ Link"-Blöcke -- kein grosser 🔗-Platzhalter, nur
   die schlanke Titel/URL-Zeile. */
.arbeitsraum-anhang-zeile--link { align-items: center; }

/* v0.4.157 (Beat): EIN einklappbarer „Links"-Bereich pro Pane -- bündelt die
   manuell hinzugefügten Links UND die im Text erkannten. Schmal: ein Kopf +
   kompakte Zeilen (kein grosser „▼ Link | Link"-Block je Link mehr). */
.arbeitsraum-links { border: 1px solid var(--farbe-rand); border-radius: 8px; margin: 0.35rem 0; background: #fff; }
.arbeitsraum-links__kopf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.55rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.arbeitsraum-links__kopf::-webkit-details-marker { display: none; }
.arbeitsraum-links__kopf::before { content: "\25B8"; color: var(--farbe-text-leise); transition: transform 0.12s; }
.arbeitsraum-links[open] > .arbeitsraum-links__kopf::before { transform: rotate(90deg); }
.arbeitsraum-links__titel { flex: 1 1 auto; min-width: 0; }
.arbeitsraum-links__zahl {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  background: #eef2f6;
  color: var(--farbe-text-leise);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}
.arbeitsraum-links__body { padding: 0.15rem 0.55rem 0.5rem; display: flex; flex-direction: column; gap: 0.2rem; }
/* Kompakte Zeilen im Links-Bereich -- ohne die Trennlinie/Extra-Höhe der normalen
   Anhang-Zeile (die Bündelung liefert die Gruppierung). */
.arbeitsraum-links__body .arbeitsraum-anhang-zeile { border-bottom: none; padding: 0.2rem 0; }
.arbeitsraum-links__textzeile { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0; }
.arbeitsraum-links__quelle-tag { flex: 0 0 auto; }
.arbeitsraum-links__link { overflow-wrap: anywhere; min-width: 0; }
.arbeitsraum-links__add { align-self: flex-start; margin-top: 0.15rem; }
.arbeitsraum-links__leer { color: var(--farbe-text-leise); font-style: italic; margin: 0.1rem 0; font-size: 0.85rem; }

/* v0.4.151 (Beat): Titel-Kopf = Symbol-Feld (getrennt, änderbar) + editierbarer Text.
   Das Symbol geht beim Umbenennen nicht verloren; der kleine Picker ändert es. */
.arbeitsraum-titelkopf { display: flex; align-items: center; gap: 0.35rem; flex: 1 1 auto; min-width: 0; }
.arbeitsraum-titel-symbol { flex: 0 0 auto; font-size: 1.05rem; line-height: 1; }
.arbeitsraum-symbol-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.arbeitsraum-symbol-btn:hover,
.arbeitsraum-symbol-btn:focus-visible { border-color: var(--farbe-akzent); box-shadow: 0 0 0 2px rgba(0, 110, 220, 0.15); outline: none; }
.arbeitsraum-symbol-btn--leer { opacity: 0.55; }
/* Emoji-Picker-Popover (dezent, über dem Symbol-Feld). */
.arbeitsraum-symbol-pop {
  position: fixed;
  z-index: 1200;
  background: #fff;
  border: 1px solid var(--farbe-rand);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  padding: 0.55rem;
  max-width: min(20rem, 92vw);
}
.arbeitsraum-symbol-pop__gitter {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
}
.arbeitsraum-symbol-pop__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.15rem;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.arbeitsraum-symbol-pop__opt:hover,
.arbeitsraum-symbol-pop__opt:focus-visible { border-color: var(--farbe-akzent); background: #eef6ff; outline: none; }
.arbeitsraum-symbol-pop__opt--aktiv { border-color: var(--farbe-akzent); background: #dcecff; }
.arbeitsraum-symbol-pop__reihe { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }

/* v0.4.152 (Beat): dynamische Custom-Abschnitte -- volle Breite UNTER dem 3-Spalten-
   Grid. Optik wie eine Pane-Karte, aber über die ganze Breite gestapelt. */
.arbeitsraum-abschnitte { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.85rem; }
.arbeitsraum-abschnitt {
  border: 1px solid var(--farbe-rand);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 0.75rem;
}
.arbeitsraum-abschnitt--gesperrt { background: #fbfcfe; border-style: dashed; }
.arbeitsraum-abschnitt__kopf { margin-bottom: 0.5rem; }
.arbeitsraum-abschnitt__inhalt { display: flex; flex-direction: column; gap: 0.5rem; }
.arbeitsraum-abschnitt-add { align-self: flex-start; }
/* v0.4.156 (Beat): "Arbeitsplan öffnen"-Leiste OBEN in der Bearbeitung + das Overlay,
   das ÜBER dem Zusatzmaterial aufgeht (spart vertikalen Platz -- kein Stapeln nach unten). */
.arbeitsraum-arbeitsplan-leiste { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.5rem; }
.arbeitsraum-arbeitsplan-oeffnen { font-weight: 700; }
.arbeitsraum-arbeitsplan-oeffnen--offen { background: #eef6ff; border-color: var(--farbe-akzent); color: var(--farbe-akzent); }
.arbeitsraum-arbeitsplan-leiste__hinweis { font-size: 0.78rem; color: var(--farbe-text-leise); }
.arbeitsraum-arbeitsplan {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 6; /* über der Klapp-Leiste (z-index 3) und dem Spalteninhalt */
  max-height: min(80vh, 46rem);
  overflow: auto;
  background: #fff;
  border: 2px solid var(--farbe-akzent);
  border-radius: 12px;
  padding: 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.arbeitsraum-arbeitsplan--gesperrt { border-style: dashed; }
.arbeitsraum-arbeitsplan__kopf { margin-bottom: 0.5rem; }
.arbeitsraum-arbeitsplan__schliessen { flex: 0 0 auto; margin-left: auto; }
.arbeitsraum-arbeitsplan__inhalt { display: flex; flex-direction: column; gap: 0.5rem; }
.arbeitsraum-video-block__titel { font-weight: 600; margin-bottom: 0.3rem; overflow-wrap: anywhere; }
/* v0.4.150 (Beat): sichere Inline-Video-Zelle (YouTube/Vimeo) -- 16:9-Rahmen,
   gesandboxtes iframe, Vollbild-Knopf. */
.arbeitsraum-video { margin: 0.25rem 0; }
.arbeitsraum-video__rahmen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--farbe-rand);
  border-radius: 10px;
  overflow: hidden;
}
.arbeitsraum-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Im echten Vollbild (requestFullscreen auf dem Rahmen) das Seitenverhältnis lösen. */
.arbeitsraum-video__rahmen:fullscreen { aspect-ratio: auto; border-radius: 0; }
.arbeitsraum-video__rahmen:-webkit-full-screen { aspect-ratio: auto; border-radius: 0; }
.arbeitsraum-video__leiste { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.arbeitsraum-video__badge { font-size: 0.8rem; color: var(--farbe-text-leise); }
/* Hinweis: die Hervorhebung des GEÖFFNETEN Themas (Akkordeon fährt darunter
   aus, prominent) ist bereits über die bestehende .thema-zeile[open]-Regel
   weiter unten umgesetzt -- hier bewusst nichts Doppeltes ergänzt. */

/* v0.4.75: Master-Detail (Unterricht/Schüler-Ansicht). LINKS eine feste Spalte
   (Links-Kachel oben + Oberthemen-Liste nach Fach), RECHTS die Unterthemen des
   gewählten Oberthemas als Karten-Raster. Beat: nicht mehr eng nebeneinander +
   darunter, sondern Navigation links / Inhalt rechts. */
.master-detail {
  display: grid;
  grid-template-columns: minmax(15rem, 21rem) 1fr;
  gap: 1.2rem;
  align-items: start;
}
.master-detail__liste {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: sticky;
  top: var(--kopf-nav-unterkante, 1rem);
  max-height: calc(100vh - var(--kopf-nav-unterkante, 6rem) - 1rem);
  overflow-y: auto;
  padding-right: 0.3rem;
}
.master-detail__inhalt { min-width: 0; }
.md-links-kachel { margin-bottom: 0; }
/* v0.4.82: einklappbare Links-Kachel (Default zu). Der Details-Kopf ist der
   Toggle; der eigene Kachel-Kopf innen wird ausgeblendet (kein doppeltes
   "Links"), Rahmen/Schatten flach, damit es wie ein Abschnitt wirkt. */
.md-links-details { border: 1px solid var(--farbe-rand); border-radius: 10px; margin-bottom: 0.4rem; }
.md-links-details__kopf { cursor: pointer; font-weight: 700; padding: 0.4rem 0.6rem; }
.md-links-details[open] .md-links-details__kopf { border-bottom: 1px solid var(--farbe-rand); }
.md-links-details .kachel-links-kopf { display: none; }
.md-links-details .kachel-karte--links { border: none; box-shadow: none; margin: 0; }
.md-fach-kopf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  margin-top: 0.7rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--farbe-rand);
}
.md-fach-kopf:first-child { margin-top: 0; }
.md-zeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  width: 100%;
  border: 1px solid var(--farbe-rand);
  border-radius: 10px;
  background: #fff;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
}
.md-zeile:hover { background: #f2f8ff; }
.md-zeile--aktiv {
  border-color: var(--farbe-akzent);
  background: #eaf2fb;
  box-shadow: inset 3px 0 0 var(--farbe-akzent);
}
.md-zeile__icon { font-size: 1.1rem; flex: 0 0 auto; }
.md-zeile__box { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.md-zeile__titel { font-weight: 600; }
.md-zeile__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--farbe-text-leise); }
.md-status { border-radius: 999px; padding: 0.02rem 0.4rem; font-size: 0.72rem; font-weight: 700; }
.md-status--sichtbar { background: #e2f2e6; color: #1e6b3a; }
.md-status--versteckt { background: #f3e3e3; color: #a11d1d; }
.md-status--optional { background: #fff0c8; color: #7a5c00; }
.md-detail__kopf { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.8rem; }
.md-detail__titel { margin: 0; font-size: 1.3rem; }

/* v0.5.0-a17 (Beat: "Alle Titel sollten bearbeitbar sein"): Inline-Umbenennen von
   Titeln (Thema/Kachel). Nur Lehrkraft/Admin -- der ✎-Ausloeser wird per JS gar
   nicht erst erzeugt, wenn istMindestensLehrkraft() false ist (Schueler/Vorschau). */
.titel-inline__stift {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.82em;
  line-height: 1;
  padding: 0 0.15rem;
  margin-left: 0.35rem;
  opacity: 0.45;
  color: inherit;
  vertical-align: baseline;
}
.titel-inline__stift:hover,
.titel-inline__stift:focus-visible { opacity: 1; color: var(--farbe-akzent); }
.titel-inline--aktiv .titel-inline__stift { display: none; }
.titel-inline__input {
  font: inherit;
  color: inherit;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--farbe-akzent);
  border-radius: 6px;
  background: #fff;
  min-width: 6rem;
  max-width: 100%;
  box-sizing: border-box;
}
/* v0.4.84: Zurück-/Abwähl-Knopf im Detail-Kopf (schliesst das Oberthema). */
.md-detail__zurueck {
  flex: 0 0 auto;
  border: 1px solid var(--farbe-rand);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.25rem 0.55rem;
  min-width: 2.6rem;
  min-height: 2.4rem;
}
.md-detail__zurueck:hover { background: #eef4fb; border-color: var(--farbe-akzent); }
.md-themen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 0.9rem;
  align-items: start;
  position: relative; /* Verankerung für die Overlay-Karte (v0.4.76) */
}
@media (max-width: 760px) {
  .master-detail { grid-template-columns: 1fr; }
  .master-detail__liste { position: static; max-height: none; overflow: visible; }
}

/* v0.4.79: verschachtelte linke Nav der Material-Master-Detail-Ansicht
   (Fach -> Kursjahr -> Semester -> Kachel-Zeilen). */
.md-mat-fach { border-bottom: 1px solid var(--farbe-rand); }
.md-mat-fach__kopf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.4rem 0.2rem;
}
.md-mat-fach__verschieben { margin-left: auto; display: inline-flex; gap: 0.15rem; }
/* v0.4.122: Admin-Leiste (＋ Neue Kachel) oben in der Unterricht-View. */
.unterricht-admin-leiste { margin: 0.2rem 0 0.6rem; }
/* v0.4.126: linkes Auswahlfenster (Erstellen-Picker) oben in der Material-Nav. */
.material-picker {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 10px;
  background: #f7fbff;
}
.material-picker__titel { font-size: 0.78rem; font-weight: 800; color: var(--farbe-text-leise); text-transform: uppercase; letter-spacing: 0.03em; }
.material-picker__btn { width: 100%; text-align: left; }
.material-picker__btn:disabled { opacity: 0.5; cursor: default; }
/* v0.4.154 (Beat, Feature B): kompaktes Übersichts-Panel „Aktuell bearbeitet" ganz
   oben im Unterrichtsmaterial. Kleine, anklickbare Themen-Tiles pro Fach; Schliessen
   nur über das ✕, Wiedereinblenden über den kleinen „Übersicht"-Knopf. Bewusst KLEIN
   gehalten -- der eigentliche Stoff (Master-Detail darunter) bleibt im Vordergrund. */
.material-uebersicht {
  border: 1px solid var(--farbe-rand);
  border-radius: 12px;
  background: #f7fbff;
  padding: 0.5rem 0.7rem 0.65rem;
  margin-bottom: 0.9rem;
}
.material-uebersicht__kopf { display: flex; align-items: center; gap: 0.5rem; }
.material-uebersicht__titel {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--farbe-text-leise);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.material-uebersicht__x {
  margin-left: auto;
  border: none;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--farbe-text-leise);
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
}
.material-uebersicht__x:hover { color: #a11d1d; background: rgba(161,29,29,0.08); }
.material-uebersicht__leer { margin: 0.4rem 0 0.1rem; font-size: 0.85rem; color: var(--farbe-text-leise); }
.material-uebersicht__body { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.material-uebersicht__fach { display: flex; flex-direction: column; gap: 0.3rem; }
.material-uebersicht__fachkopf { display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 700; }
.material-uebersicht__tiles { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.material-uebersicht__tile {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 15rem;
  text-align: left;
  border: 1px solid var(--farbe-rand);
  border-radius: 9px;
  background: #fff;
  padding: 0.3rem 0.5rem 0.3rem 0.3rem;
  cursor: pointer;
}
.material-uebersicht__tile:hover { border-color: var(--farbe-akzent); background: #eef4fb; }
.material-uebersicht__tile-medium {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border-radius: 6px;
  overflow: hidden;
  background: #f2f6fb;
}
.material-uebersicht__tile-bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.material-uebersicht__tile-text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.material-uebersicht__tile-fach { font-size: 0.65rem; font-weight: 800; color: var(--farbe-text-leise); text-transform: uppercase; letter-spacing: 0.03em; }
.material-uebersicht__tile-titel {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 11rem;
}
.material-uebersicht-zu { margin-bottom: 0.9rem; }
/* v0.4.126 (Beat): Pro-Tile-Aktionen (✏/⧉/🗑) unter der Nummer am kompakten
   Themen-Tile. Zentriert unter dem Kopf, kleine Icon-Buttons. */
.thema-tile-aktionen { display: flex; gap: 0.3rem; justify-content: flex-start; margin-top: 0.4rem; }
/* v0.4.126: Themen-Tiles als horizontaler Streifen -- schmalere Tiles, damit
   mehrere nebeneinander stehen (statt breiter Karten untereinander). */
.md-themen-grid--streifen { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.md-themen-grid--streifen.md-themen-grid--hat-offen { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.md-mat-fach__inhalt { padding: 0.2rem 0 0.4rem 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.md-mat-kursjahr__kopf { cursor: pointer; font-weight: 600; font-size: 0.9rem; padding: 0.3rem 0.2rem; }
.md-mat-kursjahr > div { padding-left: 0.4rem; display: flex; flex-direction: column; gap: 0.4rem; }
/* v0.4.132: "🔗 Links" als gleichwertiger Kursjahr-Ebenen-Eintrag -- innere
   Links-Kachel flach (kein doppelter "Links"-Kopf, kein eigener Rahmen). */
.md-mat-kursjahr--links .kachel-links-kopf { display: none; }
.md-mat-kursjahr--links .kachel-karte--links { border: none; box-shadow: none; margin: 0; }
/* v0.4.132: eingeklappte "Nicht der Klasse zugeteilt"-Gruppe unten in der Fach-Nav
   (nur bei gewählter Klasse; Fächer bleiben inkl. Auge reaktivierbar). */
.md-mat-nicht-zugeteilt { margin-top: 0.6rem; border-top: 1px dashed var(--farbe-rand); padding-top: 0.4rem; }
.md-mat-nicht-zugeteilt__kopf { cursor: pointer; font-weight: 700; font-size: 0.85rem; color: var(--farbe-text-leise); padding: 0.3rem 0.2rem; }
.md-mat-nicht-zugeteilt__inhalt { opacity: 0.85; }
.md-mat-semester { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.2rem 0; }
.md-mat-semester__titel { font-size: 0.78rem; color: var(--farbe-text-leise); font-weight: 700; }

/* v0.4.76: Unterthema-Karte im Raster; Klick öffnet sie als grösseres Overlay
   über die anderen (Beat: "vergrössert sich ums Doppelte, andere werden
   überblendet"). Schliessen per weiterem Klick auf den Kopf, ✕ oder Backdrop. */
.thema-karte {
  border: 1px solid var(--farbe-rand);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20,40,60,0.06);
}
.thema-karte__kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
}
/* v0.5.0-a19 (Beat: "Die Titel sollten in der Kachel sein"): Tile-Titel bricht
   VOLLSTAENDIG um und bleibt komplett in der Kachel -- kein Clipping am rechten
   Rand mehr. Ursache war nicht die ✎-Regel selbst (a17 aenderte nur .titel-inline*),
   sondern die seit v0.4.76 bestehende Kombination flex:1 1 auto + min-width:0 OHNE
   overflow-wrap: lange Einzelwort-Titel ("Achsensymmetrie") konnten mangels
   Bruchstelle nicht umbrechen, schrumpften unter Wortbreite und liefen ueber den
   Kachelrand (vom Nachbar-Tile ueberdeckt -> wirkt abgeschnitten). Das ✎ (a17)
   addierte Inline-Breite und machte den latenten Clip sichtbar. overflow-wrap:
   anywhere (dasselbe Muster wie .arbeitsraum-material__titel/.disziplin-eintrag__text)
   laesst lange Woerter im Tile brechen; die Kachel waechst in der Hoehe mit
   (md-themen-grid: align-items:start). Das ✎ bleibt als letztes Inline-Kind beim
   Titel und wandert bei Bedarf auf die naechste Zeile. */
.thema-karte__kopf .thema-zeile__titel { font-weight: 600; font-size: 1.05rem; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.thema-karte:not(.thema-karte--offen):hover { border-color: var(--farbe-akzent); background: #f7fbff; }
.thema-karte__x {
  margin-left: auto;
  border: none;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--farbe-text-leise);
  padding: 0.15rem 0.35rem;
}
.thema-karte__x:hover { color: #a11d1d; }
.thema-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20,40,60,0.28);
  border-radius: 12px;
  z-index: 4;
}
.thema-karte--offen {
  position: absolute;
  top: 0;
  left: 0;
  width: min(100%, 46rem);
  max-height: 82vh;
  overflow: auto;
  z-index: 5;
  cursor: default;
  border-color: var(--farbe-akzent);
  box-shadow: 0 14px 44px rgba(20,40,60,0.32);
}
.thema-karte--offen .thema-karte__kopf {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid var(--farbe-rand);
  border-radius: 12px 12px 0 0;
  z-index: 1;
}
.thema-karte__inhalt { display: flex; flex-direction: column; gap: 0.85rem; padding: 0.85rem; }
.thema-karte__infozeilen { display: flex; flex-direction: column; gap: 0.3rem; }
/* v0.4.103: Rich-Text-Feld "Information zur Lernzielkontrolle". */
.lernziel-info { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.4rem 0; }
.lernziel-info__titel { font-weight: 700; font-size: 0.9rem; }
/* v0.5.0-a12 (Beat): "🎯 Information zur Lernzielkontrolle" ist jetzt einklappbar
   (default ZU) -- dasselbe <details>/<summary>-Amber-Caret-Muster (▸/▾) wie Stoffplan/
   Notizen (.thema-lehrernotiz__kopf, v0.5.0-a10). Editor + F/K/U/A-Leiste + Speichern
   (blur) bleiben unverändert, nur die Einklapp-Verpackung ist neu. */
.lernziel-info__kopf { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; font-weight: 700; font-size: 0.9rem; }
.lernziel-info__kopf::-webkit-details-marker { display: none; }
.lernziel-info__kopf::before { content: "▸"; color: #8a6d00; font-size: 0.8rem; line-height: 1; }
.lernziel-info--klapp[open] .lernziel-info__kopf::before { content: "▾"; }
.lernziel-info__inhalt { line-height: 1.4; overflow-wrap: anywhere; }
.lernziel-info__inhalt p { margin: 0.15rem 0; }
.lernziel-info__leiste { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.lernziel-info__fmt { min-width: 2.2rem; min-height: 2.2rem; line-height: 1; touch-action: manipulation; }
.lernziel-info__fmt--fett { font-weight: 900; }
.lernziel-info__fmt--kursiv { font-style: italic; }
.lernziel-info__fmt--unter { text-decoration: underline; }
.lernziel-info__fmt--klein { font-size: 0.75rem; }
.lernziel-info__fmt--normal { font-size: 0.95rem; }
.lernziel-info__fmt--gross { font-size: 1.2rem; }
.lernziel-info__editor {
  min-height: 3.2rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  line-height: 1.4;
  background: #fff;
  overflow-wrap: anywhere;
}
.lernziel-info__editor:focus { outline: 2px solid var(--farbe-akzent); outline-offset: 1px; }
.thema-feld { display: flex; flex-direction: column; gap: 0.25rem; }
.thema-feld__label { font-weight: 700; font-size: 0.9rem; }
.thema-feld__edit {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
  line-height: 1.4;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  min-height: 2.6rem;
}
.thema-feld__anzeige { margin: 0; white-space: pre-wrap; }
/* v0.5.0-a9 (Beat): das Feld "🔗 Link zur Lernzielkontrolle" trägt nur EINE URL
   -> bewusst schmal + niedrig (einzeilig), nicht die volle Detailspalten-Breite.
   Nur die Grösse geändert, Funktion (Eingabe/Speichern bei blur) unverändert. */
.thema-feld__linkedit { width: 100%; max-width: 26rem; box-sizing: border-box; font-size: 0.85rem; padding: 0.25rem 0.45rem; }
/* v0.5.0-a12 (Beat): "🔗 Link zur Lernzielkontrolle" ist jetzt einklappbar (default
   ZU) -- dasselbe <details>/<summary>-Amber-Caret-Muster (▸/▾) wie Stoffplan/Notizen
   (.thema-lehrernotiz__kopf, v0.5.0-a10). Sichtbarkeit + Speichern (blur) unverändert. */
.thema-feld__kopf { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; font-weight: 700; font-size: 0.9rem; }
.thema-feld__kopf::-webkit-details-marker { display: none; }
.thema-feld__kopf::before { content: "▸"; color: #8a6d00; font-size: 0.8rem; line-height: 1; }
.thema-feld--klapp[open] .thema-feld__kopf::before { content: "▾"; }
/* v0.4.145: privates LEHRER-Notizfeld (nur Admin/Lehrkraft). Bewusst dezent,
   aber unverkennbar als Lehrer-Notiz abgesetzt vom blauen Akzent — warmer
   Amber-Ton + Schloss-Label signalisieren "privat, nur für dich". */
.thema-lehrernotiz {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-left: 3px solid #d1a300;
  background: rgba(209, 163, 0, 0.06);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
}
.thema-lehrernotiz__label { font-weight: 700; font-size: 0.9rem; color: #8a6d00; }
/* v0.4.154 (Beat, Feature C): Kopfzeile (Label + „⤢ vergrössern") des Notizfelds. */
/* v0.5.0-a10 (Beat): Kopf ist jetzt der <summary>-Aufklapp-Header (Feld default
   eingeklappt). display:flex unterdrückt den nativen Marker -> eigener Amber-Caret. */
.thema-lehrernotiz__kopf { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; }
.thema-lehrernotiz__kopf::-webkit-details-marker { display: none; }
.thema-lehrernotiz__kopf::before { content: "▸"; color: #8a6d00; font-size: 0.8rem; line-height: 1; }
.thema-lehrernotiz[open] .thema-lehrernotiz__kopf::before { content: "▾"; }
.thema-lehrernotiz__gross {
  margin-left: auto;
  border: 1px solid rgba(209, 163, 0, 0.5);
  background: rgba(209, 163, 0, 0.08);
  color: #8a6d00;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.15rem 0.4rem;
}
.thema-lehrernotiz__gross:hover { background: rgba(209, 163, 0, 0.18); }
.thema-lehrernotiz__edit {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
  line-height: 1.4;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  min-height: 3.4rem;
  background: var(--farbe-karte);
}
.thema-lehrernotiz__edit:focus { outline: 2px solid #d1a300; outline-offset: -1px; }
/* v0.4.154 (Beat, Feature C): grosser (Vollbild-)Editor für die private Lehrer-Notiz.
   Über allem liegender Dialog mit grossem Textfeld; Schliessen über das ✕ (auch
   Escape/Backdrop). Warmer Amber-Ton wie das kleine Notizfeld -- klar als „privat". */
.notiz-gross-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 40, 60, 0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2vh 2vw;
}
.notiz-gross {
  display: flex;
  flex-direction: column;
  width: min(100%, 60rem);
  height: min(92vh, 52rem);
  background: #fff;
  border-radius: 12px;
  border-top: 4px solid #d1a300;
  box-shadow: 0 18px 54px rgba(20, 40, 60, 0.4);
  overflow: hidden;
}
.notiz-gross__kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--farbe-rand);
  background: rgba(209, 163, 0, 0.06);
}
.notiz-gross__titel { font-weight: 700; color: #8a6d00; }
.notiz-gross__x {
  margin-left: auto;
  border: none;
  background: transparent;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--farbe-text-leise);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}
.notiz-gross__x:hover { color: #a11d1d; background: rgba(161, 29, 29, 0.08); }
.notiz-gross__edit {
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  border: none;
  resize: none;
  font: inherit;
  line-height: 1.5;
  padding: 0.9rem 1rem;
  background: var(--farbe-karte);
}
.notiz-gross__edit:focus { outline: none; }
/* v0.4.155 (Beat): Das Notiz-Feld nutzt jetzt den Rich-Text-Editor (dieselbe Leiste
   wie alle Textfelder). Inline: etwas höher als die Standard-Zeile, warmer Karten-
   Grund wie zuvor die Textarea. Die Format-Leiste schwebt bei Fokus (wie überall). */
.thema-lehrernotiz__rt { width: 100%; }
.thema-lehrernotiz__rt .eintrag-rt__editor {
  min-height: 3.4rem;
  background: var(--farbe-karte);
}
/* Grosser (Vollbild-)Notiz-Editor: die Format-Leiste ist IMMER sichtbar (statisch,
   oben), der Editor füllt den Rest des Dialogs und scrollt selbst. */
.notiz-gross__rt {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0.7rem 0.9rem 0.9rem;
}
.notiz-gross__rt .eintrag-rt__leiste {
  display: flex;
  position: static;
  margin: 0 0 0.5rem;
  box-shadow: none;
}
.notiz-gross__rt .eintrag-rt__editor {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  font-size: 1.05rem;
  background: var(--farbe-karte);
}
/* v0.4.78: Prüfungsbereich (Prüfungs-Feld + Info-Zeilen gruppiert) + eingeklappte
   Lernziele. */
.thema-pruefungsbereich {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-left: 3px solid var(--farbe-akzent);
  padding-left: 0.6rem;
}
.thema-lernziele { border: 1px solid var(--farbe-rand); border-radius: 8px; }
.thema-lernziele__kopf { cursor: pointer; font-weight: 700; padding: 0.5rem 0.7rem; }
.thema-lernziele[open] .thema-lernziele__kopf { border-bottom: 1px solid var(--farbe-rand); }
.thema-lernziele > .thema-feld { padding: 0.6rem 0.7rem; }
/* v0.5.0-a14 (Beat): "🎯 Lernzielkontrolle" -- EINE einklappbare Sektion, die die
   früheren Einzelfelder B ("Information zur Lernzielkontrolle") und C ("Link zur
   Lernzielkontrolle") bündelt. Header/Pfeil EXAKT wie .thema-lernziele /
   .thema-dossiers (natives <details>-Dreieck, gleiche Grösse) -> die drei Sektionen
   sehen konsistent aus. Die beiden Felder im Body haben KEIN eigenes <details> mehr. */
.thema-lernzielkontrolle { border: 1px solid var(--farbe-rand); border-radius: 8px; }
.thema-lernzielkontrolle__kopf { cursor: pointer; font-weight: 700; padding: 0.5rem 0.7rem; }
.thema-lernzielkontrolle[open] .thema-lernzielkontrolle__kopf { border-bottom: 1px solid var(--farbe-rand); }
.thema-lernzielkontrolle__inhalt { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.5rem 0.7rem 0.7rem; }
.thema-lzk-feld { display: flex; flex-direction: column; gap: 0.25rem; }
.thema-lzk-feld__label { font-weight: 700; font-size: 0.85rem; }
.thema-dossiers { border: 1px solid var(--farbe-rand); border-radius: 8px; }
.thema-dossiers__kopf { cursor: pointer; font-weight: 700; padding: 0.5rem 0.7rem; }
/* v0.5.0-a9 (Beat): 👁-Freigabe-Auge (nur Admin) rechts im Kopf des Dokumente-/
   Dossiers-Bereichs -- Thema-Detail UND Fach-Nav-Kachel "📄 Dokumente (N)". */
.thema-dossiers__kopf .dokumente-bereich-auge,
.md-mat-kursjahr__kopf .dokumente-bereich-auge { margin-left: 0.5rem; vertical-align: middle; }
.thema-dossiers__inhalt { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.2rem 0.7rem 0.7rem; }
/* v0.4.146: Drag&Drop-Ziel "📎 Dokumente / Dossiers" (Datei/Link direkt ablegen). */
.thema-dossiers--drophover { border-color: var(--farbe-akzent); background: #eef6ff; box-shadow: inset 0 0 0 2px rgba(47, 111, 176, 0.25); }
.thema-dossiers__drophinweis { margin: 0.1rem 0 0; font-size: 0.8rem; font-style: italic; color: var(--farbe-text-leise); border: 1px dashed var(--farbe-rand); border-radius: 8px; padding: 0.4rem 0.5rem; text-align: center; }

/* v0.4.67: Schüler-Ansicht (Vorschau/Sandbox) — auffälliger Demo-Hinweis oben,
   damit beim Vorführen klar ist, dass hier nichts Echtes verändert wird. */
.schueler-vorschau-hinweis {
  border: 1px solid var(--farbe-rand);
  border-left: 4px solid var(--farbe-akzent);
  background: #f2f8ff;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.85rem;
  font-size: 0.92rem;
  line-height: 1.4;
}

/* v0.4.117 (Beat): Schüler-Ansicht -- Top-Leiste (Logo + Klasse + Tabs). */
/* v0.4.125 (Beat): Umschalt-Tabs "Aktuelles/Unterricht" sitzen jetzt RECHTS neben
   der Fächer-Schiene, über der Inhalts-Spalte -- Logo + Klasse bleiben als "Marke"
   links (über der Schiene). Eine Stellschraube: --schueler-schiene-breite (~ Breite
   der Master-Detail-Schiene, grid minmax(15rem,21rem)); Larry justiert live. */
.schueler-bereich-leiste {
  --schueler-schiene-breite: 21rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem; /* = master-detail-Grid-gap */
  margin-bottom: 0.6rem;
}
.schueler-bereich-leiste__marke {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  min-width: var(--schueler-schiene-breite);
}
.schueler-bereich-leiste__logo { height: 2.2rem; width: auto; border-radius: 6px; }
.schueler-bereich-leiste__logo--emoji { font-size: 1.8rem; line-height: 1; }
.schueler-bereich-leiste__klasse { font-weight: 800; font-size: 1.1rem; }
.schueler-bereich-leiste__tabs { display: flex; gap: 0.4rem; flex: 1 1 12rem; flex-wrap: wrap; }
.schueler-bereich-tab {
  border: 1px solid var(--farbe-rand);
  background: #f4f6f9;
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 2.4rem;
  touch-action: manipulation;
}
.schueler-bereich-tab--aktiv { background: var(--farbe-akzent); color: #fff; border-color: var(--farbe-akzent); }
/* Mobil (einspaltig, Schiene stapelt ohnehin): Marke + Tabs wieder untereinander,
   volle Breite. */
@media (max-width: 900px) {
  .schueler-bereich-leiste__marke { min-width: 0; flex: 1 1 100%; }
  .schueler-bereich-leiste__tabs { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .schueler-bereich-tab { flex: 1 1 auto; text-align: center; }
}

/* Anhang */
.anhang {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: var(--farbe-akzent);
  text-decoration: none;
  background: #eef4fb;
  border: 1px solid #d3e2f3;
  border-radius: 8px;
  padding: 0.2rem 0.5rem;
}
.anhang--info { color: #7a5c00; background: #fff5db; border-color: #f0dfa8; }
/* v0.4.123: Wrapper "Dokument-Anzeige + 🗑" (Einzelfeld-Dokumente wie
   Kriterienraster/Lehrplanbezug) -- hält den Anhang und den Löschknopf inline. */
.anhang-mit-loeschen { display: inline-flex; align-items: center; gap: 0.25rem; }
/* v0.4.68: Typ-Badges für Anhänge -- Word/Excel/PPT/PDF/TXT/Datei auf einen
   Blick erkennbar (Beat), farbig codiert (Farbe NIE einziger Bedeutungsträger,
   der Badge-Text steht immer dabei). */
.anhang__icon {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.06rem 0.32rem;
  border-radius: 4px;
  background: #dbe6f4;
  color: #274b73;
}
.anhang__icon--pdf   { background: #fbe3e3; color: #a11d1d; }
.anhang__icon--word  { background: #e2ecfb; color: #1a4c8b; }
.anhang__icon--excel { background: #e2f2e6; color: #1e6b3a; }
.anhang__icon--ppt   { background: #fdeadd; color: #b5471f; }
.anhang__icon--text  { background: #eceef1; color: #444; }
.anhang__icon--datei { background: #e9ecef; color: #333; }
.anhang__icon--info  { background: #fff0c8; color: #7a5c00; }
/* v0.4.43: "nurAnsicht"-Anhänge (Lösungs-Download-Sperre) -- Knopf statt Link,
   deutlich als "nur ansehen" markiert. */
.anhang--nur-ansicht { cursor: pointer; }
.anhang--nur-ansicht:hover, .anhang--nur-ansicht:focus { background: #e2edfa; outline: none; }
.anhang__nur-ansicht-abzeichen {
  font-size: 0.78rem;
  color: var(--farbe-text-leise);
  margin-left: 0.15rem;
}
/* v0.4.74: früherer Iframe-Betrachter (.anhang-nur-ansicht-iframe) ist durch den
   PDF.js-Canvas-Betrachter ersetzt -- Styles hierfür: */
.pdf-viewer { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }
.pdf-viewer__leiste {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: #fff;
  padding: 0.25rem 0;
  z-index: 1;
}
.pdf-viewer__zoom { min-width: 3.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.pdf-viewer__seiten {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  max-height: min(70vh, 48rem);
  overflow: auto;
  background: #f2f4f7;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.8rem;
}
.pdf-viewer__canvas {
  background: #fff;
  box-shadow: 0 1px 6px rgba(20,40,60,0.18);
  max-width: 100%;
}

/* v0.4.89: Bild-Betrachter im view-only-Dialog (gleiche Optik wie PDF-Betrachter). */
.bild-viewer { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }
.bild-viewer__flaeche {
  max-height: min(70vh, 48rem);
  overflow: auto;
  background: #f2f4f7;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.8rem;
  text-align: center;
}
.bild-viewer__bild {
  display: inline-block;
  background: #fff;
  box-shadow: 0 1px 6px rgba(20,40,60,0.18);
  -webkit-user-drag: none;
  user-select: none;
}

/* v0.4.92 (Teil B, Etappe 1): Bearbeitungs-Editor (read-only Dokument + eigene
   Annotations-Ebene). Grosse Touch-Knöpfe fürs iPad. */
.ar-editor { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.3rem; }
.ar-editor__leiste {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: #fff;
  padding: 0.35rem 0;
  z-index: 2;
  border-bottom: 1px solid var(--farbe-rand);
}
.ar-editor__btn {
  min-height: 2.6rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.95rem;
  touch-action: manipulation;
}
.ar-editor__btn--aktiv { background: var(--farbe-akzent); color: #fff; border-color: var(--farbe-akzent); }
.ar-editor__trenner { width: 1px; align-self: stretch; background: var(--farbe-rand); margin: 0 0.15rem; }
.ar-editor__farbe {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--farbe-rand);
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
}
.ar-editor__farbe--aktiv { box-shadow: 0 0 0 2px var(--farbe-akzent); transform: scale(1.12); }
.ar-editor__seiten {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-height: min(70vh, 48rem);
  overflow: auto;
  background: #f2f4f7;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.8rem;
}
.ar-editor__seite { position: relative; line-height: 0; box-shadow: 0 1px 6px rgba(20,40,60,0.18); }
.ar-editor__medium { display: block; background: #fff; max-width: 100%; }
.ar-editor__annot {
  position: absolute;
  top: 0;
  left: 0;
  touch-action: none; /* iPad: der Stift zeichnet, scrollt nicht */
  cursor: crosshair;
}
.ar-editor__hinweis { margin: 0; }
/* v0.4.102 (Schritt 1): Stiftdicke-Selektor (5 Stufen). */
.ar-editor__dicke {
  min-width: 2.4rem;
  min-height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.35rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  touch-action: manipulation;
}
.ar-editor__dicke--aktiv { border-color: var(--farbe-akzent); background: #eef6ff; }
.ar-editor__dicke-punkt { display: inline-block; background: var(--farbe-text); border-radius: 50%; }
.ar-editor__dicke--aktiv .ar-editor__dicke-punkt { background: var(--farbe-akzent); }
/* v0.4.102 (Schritt 1): Inline-Textfeld für die Editor-Text-Eingabe (spellcheck an). */
.ar-editor__textinput {
  position: absolute;
  z-index: 5;
  min-width: 6rem;
  max-width: 90%;
  padding: 1px 3px;
  border: 1px solid var(--farbe-akzent);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.96);
  font-family: sans-serif;
  line-height: 1.2;
  resize: none;
  overflow: hidden;
}

/* v0.4.94: "→ Arbeitsraum"-Knopf + persistente Zuweisungs-Chips an der Dossier-Zeile. */
.dossier-ar { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; }
.dossier-ar-chips { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.dossier-ar-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.2rem 0.1rem 0.45rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  background: #eef6ff;
  font-size: 0.78rem;
  line-height: 1.4;
  white-space: nowrap;
}
.dossier-ar-chip__label { color: var(--farbe-text); }
.dossier-ar-chip__entfernen {
  border: none;
  background: transparent;
  color: var(--farbe-text-leise);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 0.15rem;
  border-radius: 50%;
}
.dossier-ar-chip__entfernen:hover { color: #c0392b; background: rgba(192,57,43,0.12); }

/* v0.4.115: Klassen-Zugriff-Chips einer Kachel (welche Klassen sehen sie). */
.kachel-klassen-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.35rem 0; }
.kachel-klassen-chips__label { font-size: 0.82rem; font-weight: 700; color: var(--farbe-text-leise); }
.kachel-klassen-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.2rem 0.12rem 0.5rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  background: #eef6ff;
  font-size: 0.8rem;
  white-space: nowrap;
}
.kachel-klassen-chip--alle {
  padding: 0.12rem 0.5rem;
  background: #f4f6f9;
  color: var(--farbe-text-leise);
  font-style: italic;
}
.kachel-klassen-chip__x {
  border: none;
  background: transparent;
  color: var(--farbe-text-leise);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0 0.15rem;
  border-radius: 50%;
}
.kachel-klassen-chip__x:hover { color: #c0392b; background: rgba(192,57,43,0.12); }
/* v0.5.0-a21: „＋ Klassen wählen"-Auslöser (Chip-Optik, aber anklickbar/aktionsfarbig). */
.kachel-klassen-chip--waehlen {
  cursor: pointer;
  background: #eafaf1;
  border-color: #56a978;
  color: #1f6b3f;
  font-weight: 600;
}
.kachel-klassen-chip--waehlen:hover { background: #d7f2e2; }
/* v0.5.0-a21: Klassen-Auswahlfenster — Modus-Zeilen, Liste, Status. */
.kachel-klassen-modus { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.kachel-klassen-auswahl-liste { margin-left: 1.4rem; }
.kachel-klassen-auswahl-liste--aus { opacity: 0.45; }
.kachel-klassen-status { font-size: 0.85rem; color: var(--farbe-text-leise); margin: 0.15rem 0 0; }

/* v0.4.116: Fach-Auge (per-Klasse-Fach-Sichtbarkeit) neben dem Fach-Titel. */
.fach-klassen-auge {
  margin-left: 0.4rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.1rem 0.4rem;
  min-height: 1.7rem;
  touch-action: manipulation;
}
.fach-klassen-auge--sichtbar { color: #18794e; border-color: #9fd8bb; background: #eafaf1; }
.fach-klassen-auge--verborgen { color: #b23b2e; border-color: #e6b3ab; background: #fdecea; }
.fach-klassen-auge:disabled { opacity: 0.5; cursor: default; }

/* v0.4.95: Bearbeitung-Pane -- Inline-Editor + Auge-Edit-Sperre im Pane-Kopf.
   v0.4.97: Auge auch auf Zusatz/Lösungen (Sichtbarkeits-Gate). Kein margin-left:
   auto mehr -- der Titel (flex:1) schiebt das Auge nach rechts, robust neben dem
   Collapse-Pfeil. */
.arbeitsraum-edit-sperre {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  min-height: 2rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  background: #fff;
  touch-action: manipulation;
}
.arbeitsraum-edit-sperre--frei { color: #18794e; border-color: #9fd8bb; background: #eafaf1; }
.arbeitsraum-edit-sperre--gesperrt { color: #b23b2e; border-color: #e6b3ab; background: #fdecea; }
.arbeitsraum-bearbeitung-dok { border: 1px solid var(--farbe-rand); border-radius: 8px; margin: 0.4rem 0; background: #fff; }
.arbeitsraum-bearbeitung-dok__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.35rem 0.5rem; border-bottom: 1px solid #eef2f6; }
.arbeitsraum-bearbeitung-dok__titel { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.ar-editor__gesperrt-hinweis {
  margin: 0;
  padding: 0.3rem 0.5rem;
  color: #b23b2e;
  background: #fdecea;
  border-radius: 6px;
  font-size: 0.85rem;
}
.ar-editor--gesperrt .ar-editor__leiste { opacity: 0.5; pointer-events: none; }
.ar-editor--gesperrt .ar-editor__annot { pointer-events: none; cursor: default; }

/* Hausaufgaben-Spalte
   grid-column: 3 explizit gesetzt — gleicher Bug/gleicher Fix wie bei
   .eintraege oben: landete sonst fälschlich in Spalte 2 statt 3. */
.ha {
  grid-column: 3;
  background: #f7faf7;
  border: 1px solid #e0ebe0;
  /* Deutlicherer Trenner zwischen Lektionentafel/Inhalte und Hausaufgaben
     (Beat-Wunsch) — zusätzlich zur eigenen Karten-Umrandung eine kräftigere
     linke Trennlinie, damit die Spalten klar auseinanderfallen. */
  border-left: 3px solid var(--farbe-rand);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
}
.ha__titel {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #2e8b57;
  margin-bottom: 0.4rem;
}
.ha__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.ha__item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 1rem; }
.ha__leer { font-size: 0.95rem; color: var(--farbe-text-leise); font-style: italic; }

/* v0.4.127 (#3): private "Meine Aufgaben" -- klar getrennt unterhalb der geteilten
   Hausaufgaben, eigener Farbton (violett, nicht das Grün der geteilten HA). */
.meine-aufgaben { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 2px dashed #c9b6e8; }
.meine-aufgaben__titel {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: #6b4fa0; margin-bottom: 0.4rem;
}
.meine-aufgaben__badge {
  text-transform: none; letter-spacing: 0; font-size: 0.72rem; font-weight: 600;
  color: #6b4fa0; background: #f1ebfb; border: 1px solid #d9c9f2; border-radius: 999px; padding: 0.05rem 0.5rem;
}
/* v0.4.129: Vorschau-Marker (flüchtig) am "Meine Aufgaben"-Titel in der admin-Vorschau. */
.meine-aufgaben__badge--vorschau { color: #8a6d1f; background: #fdf3d7; border-color: #efdca0; }
.meine-aufgaben__leer { font-size: 0.9rem; color: var(--farbe-text-leise); font-style: italic; }
.meine-aufgaben__liste { list-style: none; margin: 0 0 0.4rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.meine-aufgaben__item { display: flex; align-items: center; gap: 0.4rem; }
.meine-aufgaben__item--erledigt .meine-aufgaben__text { text-decoration: line-through; opacity: 0.6; }
.meine-aufgaben__check { width: 1.1rem; height: 1.1rem; flex: none; }
.meine-aufgaben__text { flex: 1 1 auto; min-width: 0; }
.meine-aufgaben__formular { display: flex; align-items: center; gap: 0.4rem; }
.meine-aufgaben__formular .sch-input { flex: 1 1 auto; min-width: 0; }

/* ---------- Fusszeile ---------- */
.app-footer {
  max-width: 1400px;
  margin: 1rem auto 2rem;
  padding: 0 1.4rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--farbe-text-leise);
}
.app-footer.inhalt--schmal { max-width: 1100px; }
.app-footer.inhalt--normal { max-width: 1400px; }
.app-footer.inhalt--breit { max-width: 1760px; }
.app-footer__rechts { display: flex; align-items: center; gap: 0.7rem; }

/* Breitenwahl im Kopf (v0.4.2) */
.breitenwahl { display: flex; align-items: center; gap: 0.45rem; }
.breitenwahl__label { font-size: 0.9rem; color: var(--farbe-text-leise); }
.breitenwahl__select {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  background: #fff;
  color: var(--farbe-text);
}

/* Admin-Zugang: bewusst unauffällig (v0.4.0, ersetzt das öffentliche Dropdown) */
.admin-zugang__link {
  font: inherit;
  font-size: 0.85rem;
  color: var(--farbe-text-leise);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.admin-zugang__link:hover { color: var(--farbe-akzent); }
.admin-zugang__status {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--farbe-akzent);
}

/* ---------- Konto-Zugang (Schüler-Login/Kontoeinstellungen, v0.4.27) ---------- */
.konto-zugang__link {
  font: inherit;
  font-size: 0.85rem;
  color: var(--farbe-text-leise);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.konto-zugang__link:hover { color: var(--farbe-akzent); background: #eef2f6; }
.konto-zugang__link--angemeldet { font-weight: 600; color: var(--farbe-text); }
/* Freundlicher Profil-Kreis mit Initialen statt Foto/externem Dienst (Beat:
   das schwarze Silhouetten-Icon aus dem LearningView-Vorbild war ihm nicht
   sympathisch) — Farbe wird deterministisch aus dem Namen abgeleitet, siehe
   avatarFarbeFuer() in js/app.js. */
.avatar-kreis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  flex: none;
}

/* ---------- Kopf: rechts + Rollenwahl ---------- */
/* v0.4.54: die frühere zweite .app-header__rechts-Definition (display:flex;
   align-items:center) ist ENTFERNT -- sie überschrieb per Kaskade das neue
   Spalten-Layout (align-items: flex-end) aus dem Kopfzeilen-Block oben.
   Die eine, massgebliche Definition lebt jetzt ausschliesslich dort. */
.rollenwahl { display: flex; align-items: center; gap: 0.45rem; }
.rollenwahl__label { font-size: 0.9rem; color: var(--farbe-text-leise); }
.rollenwahl__select {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  background: #fff;
  color: var(--farbe-text);
}
.hauptnav__tab--admin.is-active { color: var(--farbe-akzent); border-bottom-color: var(--farbe-akzent); }

/* ---------- Ansichts-Umschaltung ---------- */
.view[hidden] { display: none; }

/* Blaue Bereichs-Navigation (.lv-nav, Learning-View-Stil) entfernt (v0.4.10)
   — Beat: "die braucht es nicht", duplizierte den bereits aktiven "Kurse
   verwalten"-Tab in der Hauptnavigation. Siehe index.html-Kommentar. */

/* ---------- Speicherband ---------- */
.speicherband {
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}
.speicherband--ok { background: #e7f6ec; border: 1px solid #b7e0c4; color: #1c6b39; }
.speicherband--warn { background: #fff5db; border: 1px solid #f0dfa8; color: #7a5c00; }

/* ---------- Kurse verwalten: Master-Detail-Layout (v0.4.55) ----------
 * Beat: "Kann man das nicht auch senkrecht machen, sodass es immer noch
 * links zusammenklappt, wenn man etwas ausgewählt hat? ... auf einer Seite
 * die Kurse, die Lehrperson, und dann rechts kommt jetzt die Schüler(innen)."
 * Ersetzt die frühere horizontale Tab-Leiste + darunter gestapelte Karten.
 * Links: schmale, feste Spalte mit der Kurs-Liste (js/kurse.js#
 * renderKursListe()) -- jeder Kurs ist eine eigene Zeile, der ausgewählte
 * wird hervorgehoben (reiner Kurs-Umschalter). Rechts: breiter Hauptbereich
 * mit dem Detail des ausgewählten Kurses (renderKursDetail()); seit v0.4.153
 * in drei Reiter gegliedert (Schüler(innen)/Lehrpersonen/Einstellungen).
 * Bekommt den meisten Platz, genau
 * wie von Beat gewünscht. Feste rem-Breite bewusst statt eines weiteren
 * Splitters (anders als der Schulplaner-Splitter oben) -- die Kurs-Liste
 * selbst braucht keine variable Breite, ihr Inhalt ist immer kompakt
 * (Kursname, ggf. Aktionen+Lehrpersonen einer einzigen Karte).
 */
.kurs-verwaltung-layout { display: flex; gap: 1.4rem; align-items: flex-start; }
.kurs-verwaltung__liste { flex: 0 0 20rem; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.kurs-verwaltung__schueler { flex: 1 1 auto; min-width: 0; }

.kurs-listen-eintrag {
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.kurs-listen-eintrag.ist-aktiv { border-color: var(--farbe-akzent); box-shadow: var(--schatten); }
.kurs-listen-eintrag__kopf {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border: none;
  background: none;
  color: var(--farbe-text);
  cursor: pointer;
  text-align: left;
}
.kurs-listen-eintrag.ist-aktiv > .kurs-listen-eintrag__kopf {
  background: var(--farbe-akzent);
  color: #fff;
}
.kurs-listen-eintrag:not(.ist-aktiv) > .kurs-listen-eintrag__kopf:hover { background: #f2f6fa; }
.kurs-listen-eintrag__name { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.kurs-listen-eintrag__pfeil { flex: none; font-size: 0.85rem; }
.kurs-listen-eintrag__rumpf { padding: 0.9rem 0.9rem 1rem; border-top: 1px solid var(--farbe-rand); }
.kurs-listen-eintrag__rumpf .karte { box-shadow: none; border: none; padding: 0; margin-bottom: 0; }
.kurs-listen-eintrag__neu {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.kurs-tab {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border: 1px solid var(--farbe-rand);
  background: #fff;
  color: var(--farbe-text-leise);
  border-radius: 20px;
  cursor: pointer;
}
.kurs-tab--archiviert { font-style: italic; opacity: 0.75; }
.kurs-tab--neu {
  border-style: dashed;
  color: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
}

/* ---------- Aktionszeile (innerhalb des aufgeklappten Kurs-Eintrags) ---------- */
.kurs-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.7rem 0.9rem;
  background: #f4f7fa;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  margin-bottom: 1.4rem;
}
/* Schmale Spalte -- Aktions-Icons ohne Text-Label würden zu unklar; stattdessen
   volle Breite je Zeile (Kurs-Einstellungen/Kurscode/Archivieren/Entfernen
   passen bei 20rem Spaltenbreite nicht mehr nebeneinander). */
.kurs-verwaltung__liste .kurs-aktionen { flex-direction: column; align-items: stretch; }
.kurs-verwaltung__liste .aktion { justify-content: flex-start; }

/* v0.4.153 (Beat): "Kurse verwalten" pro Kurs in drei Reiter gegliedert
   (Schueler / Lehrpersonen / Einstellungen). Reiterleiste oben im rechten
   Detail-Bereich; die Kurs-Liste links bleibt reiner Kurs-Umschalter. */
.kursverw-reiter {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--farbe-rand);
  margin-bottom: 1rem;
}
.kursverw-reiter__tab {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border: 1px solid var(--farbe-rand);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: #f4f7fa;
  color: var(--farbe-text-leise);
  cursor: pointer;
  margin-bottom: -2px;
}
.kursverw-reiter__tab:hover { background: #eef3f8; }
.kursverw-reiter__tab.ist-aktiv {
  background: #fff;
  color: var(--farbe-akzent);
  border-bottom: 2px solid #fff;
}
.kursverw-reiter-panel { min-width: 0; }

/* v0.4.153 (Beat): vorhandenen Zugangscode direkt in der Schuelerzeile zeigen
   ("immer griffbereit"). Klick kopiert -- reine Anzeige, keine Generierung. */
.sch-code {
  flex: none;
  font-family: Consolas, "SF Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 6px;
  background: #f4f7fa;
  color: var(--farbe-text);
  cursor: pointer;
  line-height: 1.2;
}
.sch-code:hover { background: #e9f0f7; border-color: var(--farbe-akzent); }
.sch-code--leer {
  cursor: default;
  color: var(--farbe-text-leise);
  background: transparent;
  border-style: dashed;
}
.aktion {
  font: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--farbe-akzent);
  background: none;
  border: none;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.aktion:hover { background: #e7eff8; }
.aktion--gefahr { color: #b0201a; }
.aktion--gefahr:hover { background: #fdecea; }
.aktion__icon { font-size: 1.05rem; }
.kurscode {
  font-family: "Consolas", "SF Mono", ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 1px;
  background: #fff;
  border: 1px solid #cfe0f0;
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
}

/* ---------- Karten ---------- */
.karte {
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.1rem 1.3rem 1.3rem;
  margin-bottom: 1.4rem;
}
.karte__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.karte__kopf-links { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.karte__kopf-rechts { display: flex; align-items: center; gap: 0.6rem; }
.karte__titel { font-size: 1.2rem; margin: 0; }
.stern { font-size: 1.2rem; }
.leer-hinweis { color: var(--farbe-text-leise); font-style: italic; }

/* ---------- Buttons ---------- */
.btn {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--farbe-rand);
  background: #fff;
  color: var(--farbe-text);
  border-radius: 8px;
  cursor: pointer;
}
.btn:hover { background: #f2f6fa; }
.btn--primary {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: #fff;
}
.btn--primary:hover { background: #285f97; }

/* ---------- Lehrpersonen ---------- */
.lp-liste { display: flex; flex-direction: column; gap: 0.2rem; }
.lp-zeile {
  display: flex;
  align-items: flex-start; /* v0.4.60: Avatar oben, Info-Spalte stapelt Name/Mail/Rolle darunter */
  gap: 0.8rem;
  padding: 0.6rem 0.2rem;
  border-bottom: 1px solid #eef2f6;
}
.lp-zeile:last-child { border-bottom: none; }
.avatar {
  flex: none;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: #dbe4ee;
  color: #4a6076;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}
.avatar--sm { width: 2rem; height: 2rem; font-size: 0.8rem; }
.lp-info { flex: 1 1 auto; min-width: 0; }
.lp-name { font-weight: 600; }
.lp-mail { font-size: 0.9rem; color: var(--farbe-text-leise); }
.lp-freigabe-badge {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #8a5a2b;
  background: #fdf1e0;
  border: 1px solid #f0dfa8;
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
}
.lp-rolle { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.45rem; flex-wrap: wrap; }
.rollen-select {
  font: inherit;
  font-size: 0.92rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  background: #fff;
  max-width: 15rem;
}
.rollen-select:disabled { background: #eef2f6; color: #4a6076; font-weight: 600; }
.info-icon {
  flex: none;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-akzent);
  cursor: help;
  font-size: 1.05rem;
}
.info-icon:hover, .info-icon:focus { background: #e7eff8; outline: none; }

/* ---------- Berechtigungsstufen-Übersicht (v0.4.33) ---------- */
.berecht-zurueck { margin-bottom: 1rem; }
.berecht-hinweis {
  background: #fff8e6;
  border: 1px solid #f0dfa8;
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-size: 0.92rem;
  color: #5a4a1e;
  margin: 0.6rem 0 1.2rem;
  line-height: 1.5;
}
.berecht-liste { display: flex; flex-direction: column; gap: 1rem; }
.berecht-karte {
  background: #fff;
  border: 1px solid var(--farbe-rand);
  border-radius: 12px;
  padding: 1rem 1.2rem;
}
.berecht-karte__titel { margin: 0 0 0.6rem; font-size: 1.1rem; }
.berecht-abschnitt { margin-bottom: 0.7rem; }
.berecht-abschnitt:last-child { margin-bottom: 0; }
.berecht-abschnitt__titel {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--farbe-text-leise);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.3rem;
}
.berecht-punkte { margin: 0; padding-left: 1.3rem; }
.berecht-punkte li { margin-bottom: 0.25rem; line-height: 1.45; }
.berecht-punkte--umgesetzt li { color: #2e5c3a; }

/* ---------- Berechtigungsstufen: editierbare Punkte + Administrator-Verwaltung (v0.4.43) ---------- */
.berecht-punkte-edit { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }
.berecht-punkt-zeile { display: flex; align-items: center; gap: 0.5rem; border-radius: 8px; }
.berecht-punkt-zeile .sch-input { flex: 1 1 auto; }
/* v0.4.86: 🟢/🔴-Toggle + Drag-Griff + Zeilen-Zustände (Berechtigungs-Kriterien). */
.berecht-toggle {
  flex: 0 0 auto;
  border: 1px solid var(--farbe-rand);
  background: #fff;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
}
.berecht-toggle:disabled { cursor: default; opacity: 0.85; }
.berecht-drag {
  flex: 0 0 auto;
  border: 1px solid transparent;
  background: transparent;
  cursor: grab;
  font-size: 1rem;
  line-height: 1;
  color: var(--farbe-text-leise);
  padding: 0.2rem 0.35rem;
  touch-action: none; /* Pointer-Drag auf Touch nicht als Scrollen werten */
}
.berecht-drag:active { cursor: grabbing; }
.berecht-punkt-zeile--aus .sch-input { opacity: 0.6; text-decoration: line-through; }
.berecht-punkt-zeile--drag { opacity: 0.6; }
.berecht-punkt-zeile--zielmarke { box-shadow: inset 0 2px 0 var(--farbe-akzent); }
.berecht-admin-abschnitt { border-top: 1px dashed var(--farbe-rand); padding-top: 0.7rem; margin-top: 0.9rem; }
.berecht-admin-zeile { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.berecht-admin-hinzu { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.berecht-admin-hinzu .sch-input { flex: 1 1 auto; max-width: 18rem; }

/* ---------- Berechtigungen: Freigabe-Matrix (v0.4.153, nur Anzeige) ---------- */
.berecht-matrix-box {
  background: #fff;
  border: 1px solid var(--farbe-rand);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
}
.berecht-matrix-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.6rem 0 0.9rem;
  font-size: 0.9rem;
  color: var(--farbe-text-leise);
}
.berecht-matrix-legende__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.berecht-matrix-legende .berecht-zelle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 5px;
  border: 1px solid var(--farbe-rand);
}
.berecht-matrix-scroll { overflow-x: auto; }
.berecht-matrix {
  border-collapse: collapse;
  width: 100%;
  min-width: 40rem;
  font-size: 0.92rem;
}
.berecht-matrix th, .berecht-matrix td {
  border: 1px solid var(--farbe-rand);
  padding: 0.4rem 0.55rem;
  text-align: center;
  vertical-align: middle;
}
.berecht-matrix__eck { text-align: left; background: #f4f7fa; }
.berecht-matrix__rollenkopf { background: #f4f7fa; font-size: 0.82rem; line-height: 1.2; min-width: 4.5rem; }
.berecht-matrix__bereich th {
  text-align: left;
  background: var(--farbe-akzent);
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.berecht-matrix__zeilenkopf {
  text-align: left;
  background: #fafcff;
  font-weight: 600;
  max-width: 22rem;
}
.berecht-matrix__aktion { display: block; }
.berecht-matrix__hinweis {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--farbe-text-leise);
  margin-top: 0.15rem;
  line-height: 1.3;
}
.berecht-zelle { font-size: 1rem; }
.berecht-zelle--ja { background: #e7f6ec; color: #1f7a3d; }
.berecht-zelle--nein { background: #fbeceb; color: #b0403a; }
.berecht-zelle--ansehen { background: #fff6e2; color: #9a6b12; }
.berecht-zelle--bedingt { background: #fdf0da; color: #9a5b12; }
.berecht-zugang { margin-top: 1rem; }

/* ---------- Sortierung ---------- */
.sort-select {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  background: #fff;
}

/* ---------- Schülerliste (v0.4.28: einspaltig/untereinander statt
   zweispaltig -- Beat: "Schreibe die Namen untereinander. Es sieht besser
   aus... je nach Bildschirm macht das auch mehr Sinn." Auch responsiver
   bei schmaleren Bildschirmen als die vorherige feste 2-Spalten-Grid.) ---------- */
.schueler-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sch-zeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid #f0f3f7;
}
.sch-nr { flex: none; width: 1.8rem; text-align: right; color: var(--farbe-text-leise); font-weight: 600; }
.sch-input {
  font: inherit;
  font-size: 0.98rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  background: #fff;
  min-width: 0;
  flex: 1 1 6rem;
}
.sch-input:focus { outline: 2px solid rgba(47,111,176,0.35); border-color: var(--farbe-akzent); }
.icon-btn {
  font: inherit;
  flex: none;
  width: 2.2rem; height: 2.2rem;
  border: 1px solid transparent;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
}
.icon-btn:hover { background: #f2f6fa; }
.icon-btn--gefahr:hover { background: #fdecea; }
.icon-btn--gross { width: 2.6rem; height: 2.6rem; font-size: 1.3rem; border-color: var(--farbe-rand); background: #fff; }

/* v0.4.52, Beat: farbiger Status-Punkt statt Schloss-Icon für den
   Sperren/Entsperren-Schnellschalter in der Schüler-Zeile (ganz am Ende der
   Icon-Zeile). Grün = aktiv, Rot = gesperrt (klickbarer Umschalter), Grau =
   noch nie eingeloggt (rein informativ, siehe js/kurse.js). */
/* v0.4.61, Beat: der frühere separate .schueler-status-punkt (ganz rechts) ist
   entfernt -- seine Aktiv-Anzeige + Sperr-Toggle sind auf den vorderen
   Initialen-Avatar umgezogen (.avatar--status* unten). */

/* v0.4.61, Beat: Initialen-Avatar VORNE als Status-Anzeige + Sperr-Toggle.
   "leuchtet" grün = aktiv (im System, eingeloggt), rot = gesperrt, neutral =
   angelegt/noch nie eingeloggt. Als <button>, darum Button-Reset (font/align). */
.avatar--status {
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  border: none;
}
.avatar--status:hover { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08); }
.avatar--status-aktiv { background: #2e9e4f; color: #fff; } /* leuchtet grün */
.avatar--status-gesperrt { background: #d63b3b; color: #fff; }
/* --neu: neutrales Standard-Avatar-Aussehen (aus .avatar geerbt) -- kein Override */

/* v0.4.61, Teil D (Beat, umgestellt): Religion/Lift-Programm-Punkte -- zwei
   kleine Punkte pro Schülerzeile, grün = im Programm, grau = nicht, mit
   Buchstabe R/L zur Unterscheidung. Gleiche Grün-/Grau-Töne wie sonst. */
.schueler-programm-punkt {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 1px solid var(--farbe-rand);
  padding: 0;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-left: 0.15rem;
}
.schueler-programm-punkt--aus { background: #eef2f6; color: #90a0b0; }
.schueler-programm-punkt--aktiv { background: #2e9e4f; color: #fff; border-color: #2e9e4f; }
.schueler-programm-punkt:hover { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08); }

/* ---------- Schüler-Fusszeile ---------- */
.sch-fuss {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--farbe-rand);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.sch-neu { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sch-neu__label { font-weight: 600; color: var(--farbe-text-leise); }
.sch-aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Modaler Dialog ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,40,60,0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
  z-index: 100;
  overflow-y: auto;
}
.modal {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(20,40,60,0.3);
  width: 100%;
  max-width: 32rem;
  padding: 1.4rem;
}
/* Breiterer Dialog NUR für Formulare mit dem Anhang-Editor (Thema/Aufgabe
   bearbeiten, v0.4.22) -- siehe dialog(...,{breit:true}) in js/kurse.js.
   48rem gibt der 5-spaltigen Anhang-Zeile (Typ/Beschreibung/Quelle/
   Sichtbarkeit/Aktionen) genug Platz, damit das Sichtbarkeits-Dropdown
   vollständig lesbar ist, statt gequetscht/abgeschnitten zu wirken. */
.modal--breit { max-width: 48rem; }
.modal__titel { margin: 0 0 1rem; font-size: 1.25rem; }
.modal__koerper { display: flex; flex-direction: column; gap: 0.7rem; }
.modal__fuss { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.3rem; }
.dialog-textarea {
  font: inherit;
  font-size: 0.98rem;
  padding: 0.6rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  resize: vertical;
  width: 100%;
}
.dialog-hilfe { font-size: 0.9rem; color: var(--farbe-text-leise); margin: 0; }
/* Abschnittstitel über der Stärke-Einstufungsliste (v0.4.28) -- etwas
   deutlicher als der normale .dialog-hilfe-Fliesstext. */
.schueler-grid__titel { font-weight: 700; margin: 0.6rem 0 0.2rem; }
/* v0.4.30: globaler KI-Unterstützung-Schalter direkt neben dem Titel. */
.schueler-grid__titelzeile { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.schueler-grid__titelzeile .schueler-grid__titel { margin: 0.6rem 0 0.2rem 0; }
.sch-ki-optout { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--farbe-text-leise); white-space: nowrap; flex: none; }
.dialog-label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 600; }
.uebernahme-liste {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.6rem;
}
.uebernahme-item { display: flex; align-items: center; gap: 0.4rem; }

/* ---------- Druckansicht: Anmeldecodes + QR ---------- */
.druck-overlay {
  position: fixed;
  inset: 0;
  background: #e7ecf1;
  z-index: 200;
  overflow-y: auto;
}
.druck-leiste {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.4rem;
  background: #fff;
  border-bottom: 1px solid var(--farbe-rand);
}
.druck-leiste__titel { font-size: 1.2rem; font-weight: 700; }
.druck-leiste__aktionen { display: flex; gap: 0.6rem; }
.druck-karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  padding: 1.4rem;
  max-width: 900px;
  margin: 0 auto;
}
.qr-karte {
  background: #fff;
  border: 1px solid #cbd5df;
  border-radius: 10px;
  padding: 0.9rem;
  text-align: center;
  page-break-inside: avoid;
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.qr-karte__schule { font-size: 0.75rem; color: var(--farbe-text-leise); text-transform: uppercase; letter-spacing: 0.5px; }
.qr-karte__name { font-size: 1.05rem; font-weight: 700; }
.qr-karte__bild { width: 100%; max-width: 8rem; margin: 0.3rem auto; }
.qr-karte__bild svg { width: 100%; height: auto; display: block; }
.qr-karte__code {
  font-family: "Consolas", "SF Mono", ui-monospace, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 2px;
}
.qr-karte__mail { font-size: 0.78rem; color: var(--farbe-text-leise); word-break: break-all; }
.qr-karte__passwort {
  font-family: "Consolas", "SF Mono", ui-monospace, monospace;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.qr-karte__hinweis { font-size: 0.72rem; color: var(--farbe-text-leise); }
.qr-fehler { color: #b0201a; font-size: 0.8rem; }

/* ---------- Aktuelles: Admin-Bearbeitung (v0.3.0) ---------- */
.zeile-aktionen {
  display: flex;
  gap: 0.2rem;
  flex: none;
  margin-left: auto;
  align-self: flex-start;
}
.icon-btn--klein { width: 1.9rem; height: 1.9rem; font-size: 0.92rem; }
.eintrag { align-items: flex-start; }
.ha__item { justify-content: space-between; }
.ha__text { flex: 1 1 auto; min-width: 0; }

/* Leere, aber immer sichtbare Lektionentafel-Zeile */
.eintrag--leer { color: var(--farbe-text-leise); }
button.periode-leer {
  all: unset;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
  padding: 0.15rem 0.3rem;
  margin: -0.15rem -0.3rem;
}
button.periode-leer:hover, button.periode-leer:focus-visible {
  background: #f2f6fa;
  outline: 2px solid rgba(47, 111, 176, 0.3);
}

.periode-gruppe { display: flex; flex-direction: column; gap: 0.4rem; }

.eintraege-extra {
  margin-top: 0.3rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--farbe-rand);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.eintraege-extra__titel {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--farbe-text-leise);
}

.btn--klein { font-size: 0.85rem; padding: 0.35rem 0.7rem; }
.tag-admin-btn {
  align-self: flex-start;
  margin-top: 0.3rem;
  border-style: dashed;
  color: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  background: none;
}
.tag-admin-btn:hover { background: #e7eff8; }

.dialog-anhang {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  background: #f4f7fa;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
}

/* ---------- Diktieren: Mikro-Button (v0.4.0) ---------- */
.feld-mit-mikro { display: flex; gap: 0.4rem; align-items: stretch; }
.feld-mit-mikro .sch-input,
.feld-mit-mikro .dialog-textarea { flex: 1 1 auto; }
.mikro-btn {
  flex: none;
  font-size: 1.1rem;
  width: 2.6rem;
  border: 1px solid var(--farbe-rand);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
}
.mikro-btn:hover { background: #f2f6fa; }
.mikro-btn--aktiv {
  background: #fdecea;
  border-color: #e2a39d;
  color: #b0201a;
  animation: mikro-puls 1.2s ease-in-out infinite;
}
@keyframes mikro-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176, 32, 26, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(176, 32, 26, 0); }
}

/* ---------- Zwei-Spalten-Layout: Ereignisse links, Rest rechts (v0.4.0) ---------- */
/* v0.4.54: gap auf der linken Seite jetzt vom Splitter übernommen (siehe
   .aktuelles-spalten__splitter unten) -- kein doppelter Abstand. */
.aktuelles-spalten { display: flex; gap: 0; align-items: flex-start; }
.aktuelles-spalten__links {
  flex: 0 0 var(--schulplaner-breite);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  position: sticky;
  /* Beat: "Fixiere den Bereich Stundenplan, Ferien, Ereignisse ... Die 3
     Wochen kann ich dann rechts scrollen." top muss die Seitenleiste im
     "festgeklebten" Zustand exakt UNTER Kopfzeile+Hauptnav halten.
     v0.4.54, Regression-Fix (Beat: Sidebar "in die Mitte verschoben"): der
     frühere hartkodierte Wert (12rem) stimmte nach dem Header-3-Zonen-Umbau
     nicht mehr mit der realen Header+Nav-Höhe überein. Jetzt an die zentral
     gemessene Unterkante gebunden (--kopf-nav-unterkante, siehe :root +
     js/app.js#kopfNavUnterkanteAktualisieren()) -- driftet damit bei
     künftigen Header-Umbauten nicht mehr. */
  top: calc(var(--kopf-nav-unterkante) + 0.4rem);
  /* v0.4.54, Regression-Fix Nr. 2 (Beat: "der Schulplaner reicht beim
     Scrollen in die oberen Menüs rein"): das frühere z-index:15 (v0.4.51,
     Stundenplan-Popup-Schliessen-Fix) hob die GANZE sticky-Seitenleiste
     über Kopfzeile (10) und Hauptnav (9) -- Nebenwirkung: beim Scrollen
     schob sich die Leiste sichtbar ÜBER die Menüs. Das z-index ist jetzt
     ENTFERNT (auto): die Seitenleiste verschwindet beim Scrollen wieder
     sauber unter Header/Nav. Der ursprüngliche v0.4.51-Bug (✕ im
     Stundenplan-Popup nicht klickbar, weil das Popup im Sticky-Stacking-
     Context der Leiste gefangen unter dem Header lag) kommt trotzdem nicht
     zurück, weil das Popup jetzt GEOMETRISCH vollständig unterhalb der
     Header+Nav-Zone positioniert wird (top: gleiche --kopf-nav-unterkante,
     siehe .widget--stundenplan[open] > .widget__inhalt): wo keine
     Überlappung existiert, gibt es keinen Stacking-Konflikt -- unabhängig
     davon, ob der Browser für position:sticky einen eigenen
     Stacking-Context anlegt oder nicht. */
  /* v0.4.49, Beat (dringend, 2x betont): "ich sehe nicht alle Infos, weil
     sich der Schulplaner-Bereich nicht verschieben/scrollen lässt". Eigener,
     sinnvoll begrenzter Scrollbereich; das Stundenplan-Popup ist
     position:fixed und damit immun gegen dieses overflow (siehe dort). */
  max-height: calc(100vh - var(--kopf-nav-unterkante) - 1.4rem);
  overflow-y: auto;
}
.aktuelles-spalten__links .widget-reihe { margin-bottom: 0; }
/* v0.4.54, neues Feature: per Maus/Touch ziehbare Trennleiste zwischen
   Schulplaner (links) und Wochenübersicht (rechts) -- Beat: "damit der User
   selber einstellen kann, wie breit das sein soll". Natives Pointer-Events-
   Drag (js/app.js#schulplanerBreiteInitialisieren()), kein externer Code.
   flex:none + eigene Breite ersetzt den früheren .aktuelles-spalten-gap
   (siehe dort) -- der Griff IST jetzt der Abstand zwischen den Spalten. */
.aktuelles-spalten__splitter {
  flex: none;
  align-self: stretch;
  width: 1.1rem;
  margin: 0 0.3rem;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  touch-action: none; /* verhindert Scroll-Konflikte beim Ziehen auf dem iPad */
}
.aktuelles-spalten__splitter:hover,
.aktuelles-spalten__splitter:focus-visible,
.aktuelles-spalten__splitter.ist-aktiv {
  background: rgba(47, 111, 176, 0.12);
}
.aktuelles-spalten__splitter__griff {
  width: 0.3rem;
  height: 2.6rem;
  border-radius: 3px;
  background: var(--farbe-rand);
}
.aktuelles-spalten__splitter:hover .aktuelles-spalten__splitter__griff,
.aktuelles-spalten__splitter:focus-visible .aktuelles-spalten__splitter__griff,
.aktuelles-spalten__splitter.ist-aktiv .aktuelles-spalten__splitter__griff {
  background: var(--farbe-akzent);
}
.aktuelles-spalten__rechts { flex: 1 1 auto; min-width: 0; }
/* v0.4.128: statischer Splitter in der Schüler-Ansicht "Aktuelles" -- nur visuelle
   Parität zum Admin (gleicher Spalten-Abstand), NICHT ziehbar (kein col-resize-
   Cursor, kein Hover-Highlight; die Breite --schulplaner-breite bleibt die vom Lehrer). */
.aktuelles-spalten__splitter--statisch { cursor: default; pointer-events: none; }

/* ---------- LEITLINIE für ALLE künftigen UI-Bauteile (v0.4.34) ----------
 * Beat, wörtlich, zur Bedeutung der "Breite"-Auswahl (Schmal/Normal/Breit,
 * #breiten-wahl): "Bei der schmalen Ansicht muss das informative Feld im
 * Vordergrund stehen, das heisst die linke und rechte Seite sind nur knapp
 * ersichtlich. Gedacht für Handy oder iPad, so dass der Platz möglichst
 * optimal genutzt werden kann. Sowie der künftige Arbeitsbereich." Und:
 * "Bitte berücksichtige das beim Erstellen deines Materials." Zielgeräte:
 * Schmal = Handy/iPad, Normal = MacBook/Convertible (>11"), Breit = grössere
 * Bildschirme.
 *
 * KONKRET, verbindlich für jedes künftige mehrspaltige Bauteil (Seitenleisten,
 * Panels, der künftige KI-/Dokument-Arbeitsbereich):
 *   - "Schmal" ist KEINE proportional verkleinerte Kopie von "Normal" (keine
 *     blosse max-width-Reduktion). Der HAUPTINHALT (das "informative Feld" —
 *     z. B. Wochenübersicht, künftig auch der Arbeitsbereich) muss fast die
 *     gesamte verfügbare Breite bekommen.
 *   - Seitenleisten/Nebenpanels werden auf einen SCHMALEN STREIFEN minimiert
 *     (siehe .aktuelles-spalten__links unten, ~5.4rem), nicht einfach
 *     mitverkleinert und nicht (wie früher) untereinander gestapelt.
 *   - Braucht ein Nebenpanel beim Öffnen mehr Platz, als der schmale Streifen
 *     hergibt: als Overlay über den Hauptinhalt legen (siehe
 *     .widget--stundenplan[open] weiter unten für das Grundmuster, seit
 *     v0.4.34 auf ALLE .widget-Elemente in "Schmal" verallgemeinert) statt
 *     den Inhalt in die schmale Spalte zu quetschen.
 *   - Diese Regeln gelten für den manuellen "Schmal"-Modus (.inhalt--schmal)
 *     UND für die automatische Bildschirmgrössen-Erkennung (@media
 *     (max-width: 760px) weiter unten) GLEICHERMASSEN — beide Wege müssen
 *     zum selben Ergebnis führen. Bei Änderungen an einem der beiden Orte
 *     IMMER den jeweils anderen mit nachziehen (kein Preprocessor/keine
 *     echten CSS-Partials in diesem Projekt, darum bewusst zwei
 *     synchron gehaltene Stellen statt einer gemeinsamen Quelle).
 *
 * v0.4.54-ERGÄNZUNG (neuer Splitter, siehe .aktuelles-spalten__splitter):
 * BEIDE automatischen Verengungs-Regeln unten bekommen jetzt zusätzlich
 * :not(.aktuelles-spalten__links--eigene-breite) -- sobald der Nutzer die
 * Trennleiste einmal von Hand gezogen hat (persistiert in localStorage,
 * js/app.js#schulplanerBreiteInitialisieren()), setzt js/app.js diese Klasse
 * dauerhaft und "der Nutzer bestimmt selbst" gewinnt konsequent gegenüber
 * BEIDEN Auto-Verengungen (manuelles "Schmal" UND die 760px-Erkennung) --
 * keine der beiden Regeln wird gelöscht (Handy-Erstnutzer ohne je gezogene
 * Trennleiste bekommen weiterhin automatisch den schmalen Streifen), sie
 * werden nur sauber VERDRÄNGT, statt parallel um dieselbe Eigenschaft zu
 * konkurrieren (keine !important-Krücke nötig).
 */
#inhalt.inhalt--schmal .aktuelles-spalten__links:not(.aktuelles-spalten__links--eigene-breite) {
  flex: 0 0 5.4rem;
}
/* v0.4.54: dieselbe :not(...)-Ergänzung wie oben -- die zentrierte
   Mini-Kopfzeile ist nur für den ULTRA-schmalen 5.4rem-Streifen gedacht;
   sobald der Nutzer per Splitter breiter gezogen hat, soll .widget__kopf
   wieder normal lesbar sein (die generische Basis-Regel bei .widget__kopf
   weiter unten übernimmt dann automatisch). */
#inhalt.inhalt--schmal .aktuelles-spalten__links:not(.aktuelles-spalten__links--eigene-breite) .widget__kopf {
  padding: 0.6rem 0.4rem;
  font-size: 0.8rem;
  line-height: 1.2;
  text-align: center;
}
/* Verallgemeinert das Overlay-Prinzip von .widget--stundenplan[open] (siehe
   unten) auf ALLE Seitenleisten-Widgets mit demselben <details class="widget">-
   Muster (Ferien, Ereignisse, Unterrichtslinks) -- NUR innerhalb von "Schmal"
   (im breiteren Normal/Breit-Modus bleibt das bisherige Verhalten, dort ist
   genug Platz). .widget--stundenplan bewusst per :not() ausgeschlossen: es
   hat weiter unten seine EIGENE, breitere Overlay-Regel (58rem statt 26rem,
   der echte Stundenplan ist zu dicht für weniger) -- die darf hier nicht
   überschrieben werden. */
#inhalt.inhalt--schmal .widget[open] {
  position: relative;
  overflow: visible;
  z-index: 40;
}
#inhalt.inhalt--schmal .widget[open]:not(.widget--stundenplan) > .widget__inhalt {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  width: max-content;
  max-width: min(26rem, calc(100vw - 2rem));
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-rand);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 14px 34px rgba(20, 40, 60, 0.28);
  padding-bottom: 1.1rem;
}
/* v0.4.55: gleiche bewusste Abweichung wie bei der 760px-Erkennung weiter
   unten (siehe dortiger Kommentar bei .kurs-verwaltung-layout) -- "Kurse
   verwalten" stapelt in "Schmal" statt auf einen unlesbaren Streifen zu
   schrumpfen. */
#inhalt.inhalt--schmal .kurs-verwaltung-layout { flex-direction: column; }
#inhalt.inhalt--schmal .kurs-verwaltung__liste { flex: 1 1 auto; width: 100%; }
/* "Schulplaner"-Titel über Stundenplan/Ferien (Beat: "Über den Stundenplan
   kommt der Titel 'Schulplaner'. Gut lesbar. In Schwarz.") — bewusst fest
   auf #000 statt der sonst üblichen --farbe-text-Variable, weil Beat
   ausdrücklich "in Schwarz" wollte. */
.schulplaner-titel { margin: 0; font-size: 1.1rem; font-weight: 700; color: #000; }
/* "Wochenübersicht"-Titel — war früher der Kopfzeilen-Untertitel, steht jetzt
   direkt über "Vergangene Wochen anzeigen" (Beat-Nachbesserung v0.4.6). */
.wochenuebersicht-titel { margin: 0 0 0.7rem; font-size: 1.15rem; font-weight: 700; color: var(--farbe-text); }

/* ---------- Ereignisse-Panel (v0.4.0; ab v0.4.4 als <details class="widget">
   genau wie Stundenplan/Ferien einklappbar — siehe .widget/.widget__inhalt
   weiter unten für die gemeinsame Box-/Kopf-/Schliessen-Optik) ---------- */
.ereignisse-scroll {
  /* Eigener, begrenzter Scroll-Container für den Ereignisse-Inhalt: behebt
     den von Beat gemeldeten Bug ("Zudem sollte ich auch bei den Ereignissen
     herunterfahren können. Irgendwie geht das nicht.") — ohne max-height +
     overflow-y hier gibt es lokal nichts zu scrollen, darum reichte der
     Browser das Mausrad-Scrollen bisher korrekt, aber unerwünscht, an die
     Seite/Wochenplanung weiter. */
  max-height: min(60vh, 34rem);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.3rem;
}
/* v0.4.59: im Vollbild-<dialog> scrollt das Vollbild-.widget__inhalt selbst --
   die 60vh-Begrenzung der Sidebar-Variante hier aufheben, damit die Ereignisse
   die volle Höhe nutzen statt in einem zweiten, kleinen Scrollkasten zu sitzen. */
.widget-vollbild-dialog .ereignisse-scroll { max-height: none; }
.ereignisse-quartal { margin-bottom: 0.7rem; }
.ereignisse-quartal__kopf {
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--farbe-text-leise);
  padding: 0.35rem 0.3rem;
  border-radius: 6px;
}
.ereignisse-quartal__kopf::-webkit-details-marker { display: none; }
.ereignisse-quartal[open] > .ereignisse-quartal__kopf { color: var(--farbe-akzent); background: #eef4fb; }
.ereignisse-quartal .ereignisse-liste { padding: 0.5rem 0.2rem 0; }
.ereignisse-panel__unsicher-titel {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--farbe-text-leise);
  margin: 0.9rem 0 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--farbe-rand);
}
.ereignisse-liste { display: flex; flex-direction: column; gap: 0.5rem; }

/* ---------- Unterrichtslinks (v0.4.18) ---------- */
/* Favicon direkt von der Zieldomain, mit onerror-Fallback auf 🔗 (siehe
   unterrichtslinkFaviconElement() in js/app.js) — kein Drittanbieter-Dienst. */
.unterrichtslink-favicon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; flex: none; font-size: 0.9rem; }
.unterrichtslink-favicon img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Widget in "Aktuelles" — read-only, gruppiert, für Schüler UND Admin gleich. */
.unterrichtslinks-gruppe { margin-bottom: 0.8rem; }
.unterrichtslinks-gruppe:last-child { margin-bottom: 0; }
/* v0.4.46, Bugfix (Beat-Screenshot: eine rohe, mehrzeilige OAuth-URL landete
   fälschlich im titel-Feld statt eines Namens -> überlappte das
   Schliessen-X und liess die Seite kaum noch scrollen). Der EINE konkrete
   Fall wurde als Datenfehler behoben (data/unterrichtslinks.json), aber das
   Layout selbst muss JEDEN künftigen zu langen Titel abfangen können, egal
   woher er kommt -- darum hier hart auf eine Zeile mit Ellipsis begrenzt,
   plus rechts Platz für das absolut positionierte .widget__schliessen (Ø
   1.8rem + 1.1rem Abstand) reserviert, damit der Titel nie mehr darunter
   wandert. */
.unterrichtslinks-gruppe__titel {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--farbe-text-leise);
  margin-bottom: 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  /* .widget__schliessen: width 1.8rem, right 1.1rem -> sein linker Rand
     liegt bei 2.9rem vom Container-Rand -- hier mit etwas Luft freihalten. */
  padding-right: 3.2rem;
}
.unterrichtslinks-liste { display: flex; flex-direction: column; gap: 0.4rem; }
.unterrichtslink-zeile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  min-width: 0; /* v0.4.46: sonst kann ein zu langer Titel die ganze Zeile (und damit die Widget-Spalte) sprengen, siehe Kommentar oben */
}
.unterrichtslink-zeile__titel {
  font-weight: 600;
  color: var(--farbe-akzent);
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unterrichtslink-zeile__titel:hover { text-decoration: underline; }
/* v0.4.50, Beat (dringend, 2x betont): gelber Favoriten-Stern LINKS vom
   Titel, NUR für Lehrkraft/Administrator (siehe unterrichtslinkFavoritSternBauen()
   in js/app.js -- Schüler bekommen das Element gar nicht erst ins DOM). ☆
   (unfavorisiert, gedeckte Farbe) vs. ★ (favorisiert, kräftiges Gelb) --
   Farbe + Symbolwechsel zusammen, nicht nur Farbe (Zugänglichkeit). */
.unterrichtslink-favorit-stern {
  flex: none;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.1rem 0.15rem;
  color: #b8b0a0;
}
.unterrichtslink-favorit-stern:hover { color: #d4a900; }
.unterrichtslink-favorit-stern--aktiv { color: #f0b400; }

/* Verwaltungsansicht in "Kurse verwalten" — admin-only, zeigt ALLE Links
   (auch versteckte), scrollbare "Schiene" mit fester Höhe (Beat: "damit ich
   bei vielen Links von oben nach unten scrollen kann, statt dass die Seite
   endlos wächst"). */
/* v0.4.140 (Beat, "Auge pro Fach"): Fächer-Leiste im Kopf der Links-Verwaltung --
   pro Fach ein Klassen-Fach-Auge (dieselbe SSOT wie Unterricht/Material). */
/* v0.4.141 (Beat, Fach-Abschnitte): die Links-Verwaltung ist nach FACH
   gegliedert. Ein Abschnitt = ein Drop-Ziel (Fach zuordnen) mit Kopf
   (Chip + Name + Auge). Ersetzt die frühere obere Fächer-Leiste (0.4.140). */
.unterrichtslinks-abschnitt {
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.55rem 0.6rem;
  margin-bottom: 0.7rem;
  background: #fff;
}
.unterrichtslinks-abschnitt:last-child { margin-bottom: 0; }
.unterrichtslinks-abschnitt--fach { background: #f7f9fc; }
.unterrichtslinks-abschnitt--gruppe { background: #fdfdfb; border-style: dashed; }
/* Drop-Ziel-Hervorhebung während des Ziehens */
.unterrichtslinks-abschnitt--dropziel {
  border-color: var(--farbe-akzent);
  box-shadow: 0 0 0 2px rgba(47, 111, 176, 0.25) inset;
  background: #eef4fb;
}
/* v0.4.142: Abschnitts-Umsortierung (Kopf-Griff). Griff erbt Optik von
   .unterrichtslink-drag; hier nur die Zustände beim Ziehen des ganzen
   Abschnitts (vertikal -> Ziel-Markierung an der oberen Kante). */
.unterrichtslinks-abschnitt__griff { flex: 0 0 auto; }
.unterrichtslinks-abschnitt--sortier-drag { opacity: 0.55; }
.unterrichtslinks-abschnitt--sortier-ziel { box-shadow: 0 -3px 0 0 var(--farbe-akzent); }
.unterrichtslinks-abschnitt__kopf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.unterrichtslinks-abschnitt__titel {
  font-weight: 700;
  font-size: 0.95rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unterrichtslinks-abschnitt__anzahl { font-size: 0.8rem; color: var(--farbe-text-leise); white-space: nowrap; }
.unterrichtslinks-abschnitt__gruppe-icon { font-size: 0.95rem; }
.unterrichtslinks-abschnitt__leer {
  font-size: 0.85rem;
  color: var(--farbe-text-leise);
  font-style: italic;
  margin: 0.2rem 0 0.1rem;
}
.unterrichtslinks-abschnitt-trenner {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.9rem;
  color: var(--farbe-text-leise);
  border-top: 1px solid var(--farbe-rand);
  padding-top: 0.7rem;
}
/* v0.4.141: entfernbarer Fach-Chip am Link (Klick entfernt das Fach) */
.unterrichtslink-fach-chip-entf {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.05rem 0.3rem 0.05rem 0.15rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.unterrichtslink-fach-chip-entf:hover { border-color: #b23b2e; background: #fdecea; }
.unterrichtslink-fach-chip-entf__label { font-size: 0.72rem; color: var(--farbe-text-leise); }
.unterrichtslink-fach-chip-entf__x { font-size: 0.72rem; color: #b23b2e; font-weight: 700; }

.unterrichtslinks-verwaltung-schiene {
  /* v0.4.141: mehr sichtbare Höhe -> beim Ziehen über die Fach-Abschnitte sind
     mehr Ziel-Abschnitte gleichzeitig sichtbar (plus Auto-Scroll an den Kanten). */
  max-height: min(70vh, 44rem);
  overflow-y: auto;
  padding-right: 0.4rem;
  margin: 0.8rem 0;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.8rem;
}
.unterrichtslink-verwaltung-gruppe { margin-bottom: 1rem; }
.unterrichtslink-verwaltung-gruppe:last-child { margin-bottom: 0; }
.unterrichtslink-verwaltung-gruppe__kopf { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.unterrichtslink-verwaltung-gruppe__titel {
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.unterrichtslink-verwaltung-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  margin-bottom: 0.4rem;
}
/* Beat: "Zeilen-Hintergrund weiss wenn sichtbar, orange wenn versteckt —
   auf einen Blick sehen, was schon freigegeben ist." */
.unterrichtslink-verwaltung-zeile--sichtbar { background: #fff; }
.unterrichtslink-verwaltung-zeile--versteckt { background: #ffe8cc; border-color: #f0c98a; }
.unterrichtslink-verwaltung-zeile__text { flex: 1 1 12rem; min-width: 0; }
/* v0.4.46: siehe Kommentar bei .unterrichtslinks-gruppe__titel oben — gleiche
   Ellipsis-Absicherung jetzt auch in der Admin-Verwaltungsansicht.
   v0.4.52, Beat (dringend, "bei allen Links"): der Titel ist jetzt selbst
   der klickbare Link (kein separates "↗ Öffnen" mehr, siehe
   js/app.js#unterrichtslinkVerwaltungZeile) -- Link-Optik (Akzentfarbe +
   Hover-Unterstreichung) direkt hier statt in der jetzt entfernten
   .unterrichtslink-verwaltung-zeile__oeffnen-Klasse. Gilt für BEIDE Fälle
   (echtes <a>, wenn eine URL gesetzt ist; reiner <div>-Text sonst) gleich,
   die Linkfarbe wirkt bei einem <div> einfach nicht (kein :hover-Ziel). */
.unterrichtslink-verwaltung-zeile__titel {
  font-weight: 600;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  color: var(--farbe-akzent);
  text-decoration: none;
}
a.unterrichtslink-verwaltung-zeile__titel:hover { text-decoration: underline; }
.unterrichtslink-verwaltung-zeile__sichtbar { font-size: 0.82rem; display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
/* v0.4.47: Fach-Zugehörigkeits-Chips (siehe js/app.js#unterrichtslinkVerwaltungZeile) */
.unterrichtslink-verwaltung-zeile__faecher { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }

/* ---------- v0.4.47: zentrales Link-Verzeichnis ("Links"-Hauptnav-Tab) ---------- */
#view-links #links-seite-inhalt { display: flex; flex-direction: column; gap: 0.6rem; }
.links-seite-abschnitt-titel { margin: 1.2rem 0 0.4rem; font-size: 1rem; color: var(--farbe-text-leise); }
/* v0.4.48, Beat (dringend): "Aus Themen" jetzt eine eigene, zugeklappte
   Kachel PRO Fach statt einer langen Flachliste -- gleiches "gross+lesbar+
   scrollbar bei viel Inhalt"-Prinzip wie bei geöffneten Themen (siehe
   .thema-zeile[open] weiter oben), hier auf Fach-Ebene angewendet. */
.links-fach-kachel {
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.links-fach-kachel__kopf {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  font-weight: 600;
}
.links-fach-kachel__kopf::-webkit-details-marker { display: none; }
.links-fach-kachel__anzahl { font-size: 0.8rem; font-weight: 400; color: var(--farbe-text-leise); margin-left: auto; }
.links-fach-kachel__inhalt {
  padding: 0.6rem 0.8rem 0.8rem;
  border-top: 1px solid #eef2f6;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.links-fach-kachel[open] .links-fach-kachel__kopf { font-size: 1.05rem; }
.links-fach-kachel[open] .links-fach-kachel__inhalt {
  font-size: 1rem;
  padding: 0.9rem 1.1rem 1.1rem;
  max-height: 65vh;
  overflow-y: auto;
}
/* Fach-Links-Kachel: optisch wie eine normale Kachel-Karte, minimal
   akzentuiert (gestrichelter statt durchgezogener linker Rand), damit sie
   als "besondere", nicht normal-planbare Kachel erkennbar bleibt. */
.kachel-karte--links { border-left-style: dashed; }
.kachel-grid--fach-links { margin-top: 0.6rem; }
/* Herkunfts-Hinweis bei gespiegelten Themen-Links (NUR Lehrkraft/Admin,
   siehe themaLinkMirrorZeile()) -- klein, dezent, kein Ersatz für die URL
   (die bleibt weiterhin nirgends sichtbar). */
.unterrichtslink-zeile__herkunft { font-size: 0.72rem; color: var(--farbe-text-leise); flex: 1 1 100%; }
.unterrichtslink-zeile--thema-spiegel { flex-wrap: wrap; }

/* v0.4.48, Beat (dringende Vereinfachung): Fach-Links-Kachel zeigt ihren
   Inhalt jetzt IMMER direkt (kein <details>/Aufklappen mehr) -- Kopf sieht
   trotzdem wie der Kopf der übrigen Kachel-Karten aus, nur ohne
   Aufklapp-Cursor/Pfeil (kein <summary>, siehe fachLinksKachelBauen()). */
.kachel-links-kopf { cursor: default; }
.kachel-links-inhalt { display: flex; flex-direction: column; gap: 0.3rem; }
/* Eine Zeile pro Fach-Hauptlink: Icon + direkt klickbarer Titel (KEIN
   separater "Öffnen"-Text mehr), Stift NUR für Lehrkraft/Admin ganz rechts. */
.fach-link-minimal-zeile { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0; }
.fach-link-minimal-zeile .unterrichtslink-zeile__titel { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fach-link-minimal-zeile--versteckt { opacity: 0.55; }

/* "Vergangene Ereignisse anzeigen (N)" (v0.4.12) — gleiches Prinzip wie
   "Vergangene Wochen anzeigen": zugeklappt per Default, Daten bleiben immer
   im DOM, nur die Standardansicht blendet sie aus. */
.ereignisse-vergangene {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--farbe-rand);
}
.ereignisse-vergangene__kopf {
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--farbe-text-leise);
  padding: 0.35rem 0.3rem;
  border-radius: 6px;
}
.ereignisse-vergangene__kopf::-webkit-details-marker { display: none; }
.ereignisse-vergangene[open] > .ereignisse-vergangene__kopf { color: var(--farbe-akzent); background: #eef4fb; }
.ereignisse-vergangene .ereignisse-liste { padding: 0.5rem 0.2rem 0; }

/* ---------- Unterricht: Fach -> Kurs-Jahr -> Semester (v0.4.6) ----------
   Gleiches Drill-down-Muster wie die Ereignisse-Quartale oben: <details>
   verschachtelt, standardmässig zugeklappt, Inhalt bleibt im DOM. */
.unterricht-fach {
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  margin-bottom: 0.8rem;
  overflow: hidden;
}
.unterricht-fach__kopf {
  cursor: pointer;
  list-style: none;
  padding: 0.8rem 1.1rem;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.unterricht-fach__kopf::-webkit-details-marker { display: none; }
/* Auf/Ab-Knöpfe zum Verschieben der Fach-Reihenfolge (v0.4.11) — direkt im
   Fach-Titel, rechts ausgerichtet (margin-left: auto schiebt sie ans Ende
   der flex-Zeile, unabhängig vom Fach-Namen-Text davor). */
.unterricht-fach__verschieben { display: flex; gap: 0.3rem; margin-left: auto; }
.unterricht-fach__verschieben-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.unterricht-fach__inhalt { padding: 0 1.1rem 1rem; border-top: 1px solid #eef2f6; }

/* v0.4.57, Punkt 2 (Beat): Kontext-Anzeige IM Unterricht-View -- "welche
   Klasse/welchen Kurs bearbeite ich hier". Prominent, direkt unter dem
   "Klasse/Kurs:"-Umschalter. Nur Lehrkraft (JS gated). */
.unterricht-kontext {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.3rem 0 1rem;
  padding: 0.6rem 0.9rem;
  background: #eef4fa;
  border: 1px solid var(--farbe-rand);
  border-left: 4px solid var(--farbe-akzent);
  border-radius: var(--radius);
}
.unterricht-kontext__label { font-size: 0.9rem; color: var(--farbe-text-leise); }
.unterricht-kontext__wert { font-size: 1.15rem; color: var(--farbe-akzent); }
.unterricht-kontext__detail { font-size: 0.8rem; color: var(--farbe-text-leise); }

/* v0.4.60, Beat (Design-Kehrtwende): der rechte "Lehrer-Bereich" (v0.4.57/58)
   ist zurückgebaut -- zugehörige Regeln (.unterricht-fach__zeile,
   .unterricht-lehrer*) entfernt. Stattdessen nimmt die GEÖFFNETE Kachel im
   Unterricht-View die volle Breite ein: sie überspannt alle Grid-Spalten,
   damit ihr Detailbereich den Platz nutzt, den vorher der Lehrer-Bereich
   belegte. Siehe .kachel-karte[open] weiter unten. */

/* .unterricht-kursjahr/-semester/-eintrag* (früheres data/unterricht.json-
   Skelett) entfernt (v0.4.19) — das Kachel-System nutzt eigene, ähnliche
   Klassen (.kachel-kursjahr/.kachel-semester-abschnitt), siehe unten. */

/* ---------- Kachel-System (v0.4.14): Fach -> Kachel -> Thema -> Aufgabe ----------
   Nachgebaut nach Beats echtem LearningView-Konto. Gleiches <details>-
   Drill-down-Prinzip wie überall sonst in der App. */
.kachel-kursjahr { margin-bottom: 1rem; }
.kachel-kursjahr__kopf {
  cursor: pointer;
  list-style: none;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.4rem 0.3rem;
}
.kachel-kursjahr__kopf::-webkit-details-marker { display: none; }
.kachel-kursjahr__inhalt { display: flex; flex-direction: column; gap: 1rem; padding-left: 0.3rem; }
.kachel-semester-abschnitt__titel { font-size: 0.82rem; font-weight: 700; color: var(--farbe-text-leise); margin-bottom: 0.5rem; }
.kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  /* v0.4.26: Beat "Schau, dass die Kacheln gleichgross sind." -- minmax()
     sorgt für eine einheitliche MINDESThöhe pro Zeile (kein Umbruch-Chaos
     durch unterschiedlich lange Titel), wächst aber automatisch weiter,
     falls eine Kachel aufgeklappt ist und mehr Platz braucht. */
  grid-auto-rows: minmax(9rem, auto);
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}
.kachel-karte {
  border: 1px solid var(--farbe-rand);
  border-left: 5px solid var(--farbe-akzent); /* Fallback, überschrieben per Inline-style.borderLeftColor (siehe js/app.js) */
  border-radius: var(--radius);
  background: var(--farbe-karte);
  box-shadow: var(--schatten);
  overflow: hidden;
  /* v0.4.26: bewusst KEIN align-self:start mehr -- die Karte soll die
     einheitliche Zeilenhöhe von .kachel-grid (grid-auto-rows) ausfüllen,
     nicht nur ihre eigene, kürzere Inhaltshöhe behalten. */
  display: flex;
  flex-direction: column;
}
.kachel-karte--versteckt { opacity: 0.6; border-style: dashed; }
/* v0.4.60/61, Beat: im Unterricht-View nimmt die GEÖFFNETE Kachel die volle
   Grid-Breite ein (überspannt alle Spalten). Ihre tatsächliche Breite ist per
   Breiten-Schieber am rechten Aussenrand einstellbar (--kachel-open-breite,
   global + localStorage; Standard 100%). Präzise nur auf die direkt im
   Unterricht-Fach liegende Kachel-Reihe gescoped (NICHT die verschachtelten
   Grids des Unterrichtsmaterial-Tabs). position:relative als Anker für den
   absolut positionierten Griff; padding-right schafft Platz für ihn. */
.unterricht-fach__inhalt > .kachel-grid > .kachel-karte[open] {
  grid-column: 1 / -1;
  width: var(--kachel-open-breite, 100%);
  justify-self: start;
  position: relative;
}
/* Breiten-Schieber: nur an der OFFENEN Kachel sichtbar (geschlossene <details>
   verstecken Nicht-summary-Kinder ohnehin). Sitzt am rechten Aussenrand. */
.kachel-breiten-griff { display: none; }
.unterricht-fach__inhalt > .kachel-grid > .kachel-karte[open] > .kachel-breiten-griff {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 0.75rem;
  cursor: col-resize;
  background:
    linear-gradient(to right, transparent 0, transparent 40%, #c3ccd4 40%, #c3ccd4 46%, transparent 46%, transparent 54%, #c3ccd4 54%, #c3ccd4 60%, transparent 60%);
  z-index: 2;
}
.unterricht-fach__inhalt > .kachel-grid > .kachel-karte[open] > .kachel-breiten-griff:hover,
.kachel-breiten-griff.ist-aktiv { background-color: #eef4fa; }
.kachel-breiten-griff:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: -2px; }

/* v0.4.61, Beat: Zwei-Spalten INNERHALB des geöffneten Themas -- Infos links,
   Daten/Material rechts, FESTER Split (kein Handle dazwischen). */
.thema-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}
.thema-split__infos,
.thema-split__material {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.thema-split__material { border-left: 1px solid #eef2f6; padding-left: 0.9rem; }
@media (max-width: 760px) {
  .thema-split { grid-template-columns: 1fr; gap: 0.5rem; }
  .thema-split__material { border-left: none; padding-left: 0; }
}
.kachel-karte__kopf {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 0.9rem;
  flex-wrap: wrap;
  /* Konsistente Kopf-Höhe unabhängig von der Titel-Länge (1-2-zeilige
     Titel sollen nicht zu sichtbar unterschiedlich hohen Karten führen). */
  min-height: 4.4rem;
}
.kachel-karte__nummer {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #eef2f6;
  color: var(--farbe-text-leise);
  font-size: 0.76rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kachel-karte__kopf::-webkit-details-marker { display: none; }
.kachel-karte__icon { font-size: 1.4rem; flex: none; }
.kachel-karte__titelbox { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1 1 8rem; }
.kachel-karte__titel { font-weight: 700; font-size: 1.02rem; }
.kachel-karte__badge { font-size: 0.78rem; color: var(--farbe-text-leise); }
.kachel-karte__inhalt { padding: 0 0.9rem 0.9rem; border-top: 1px solid #eef2f6; padding-top: 0.7rem; display: flex; flex-direction: column; gap: 0.6rem; }
.kachel-karte__aktionen { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.kachel-abzeichen {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  background: #eef2f6;
  color: var(--farbe-text-leise);
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  white-space: nowrap;
}
.kachel-abzeichen--versteckt { background: #fdecea; color: #b0201a; }
.kachel-abzeichen--optional { background: #fff3cf; color: #7a5c00; }
.kachel-admin-notiz {
  font-size: 0.82rem;
  color: #7a5c00;
  background: #fff8e1;
  border: 1px dashed #f0dfa8;
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
}

.themen-liste { display: flex; flex-direction: column; gap: 0.5rem; }
.thema-zeile { border: 1px solid var(--farbe-rand); border-radius: 8px; overflow: hidden; }
.thema-zeile__kopf {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.thema-zeile__kopf::-webkit-details-marker { display: none; }
.thema-zeile__nr {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--farbe-akzent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* v0.4.47: Sichtbarkeits-Schnellschalter direkt neben der blauen
   Themen-Nummer (Beat, explizit: "gleich neben der blauen Nummer", NICHT am
   Zeilenende). Icon + Begriff STÄNDIG sichtbar in beiden Zuständen,
   Begriff UNTER dem Icon gestapelt (nicht daneben) -- beides nach Beats
   Live-Check-Korrektur. NUR im DOM, wenn istMindestensLehrkraft() true ist
   (siehe js/app.js), Schüler bekommen dieses Element nie. */
.thema-sichtbarkeit-schnellschalter {
  flex: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border-radius: 6px;
  font-family: inherit;
  line-height: 1.1;
}
.thema-sichtbarkeit-schnellschalter:hover { background: #eef2f6; }
.thema-sichtbarkeit-schnellschalter__icon { font-size: 1rem; position: relative; display: inline-block; }
.thema-sichtbarkeit-schnellschalter__text { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.01em; }
.thema-sichtbarkeit-schnellschalter--sichtbar .thema-sichtbarkeit-schnellschalter__text { color: #2e7d32; }
.thema-sichtbarkeit-schnellschalter--versteckt .thema-sichtbarkeit-schnellschalter__text { color: #c0392b; }
/* "Geschlossenes Auge": kein plattformübergreifend zuverlässig einheitliches
   Closed-Eye-Emoji im selben Stil verfügbar -- deshalb dasselbe 👁 wie im
   sichtbar-Zustand, im versteckt-Zustand per CSS diagonal durchgestrichen
   (klassisches "durchgestrichenes Auge"-Muster, sofort als Gegenteil von 👁
   erkennbar, zero-dependency, kein externer Icon-Dienst). */
.thema-sichtbarkeit-schnellschalter--versteckt .thema-sichtbarkeit-schnellschalter__icon::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 2px;
  background: #c0392b;
  transform: rotate(-45deg);
  border-radius: 2px;
}
.thema-zeile__titel { flex: 1 1 12rem; font-weight: 600; }
.thema-zeile__inhalt { padding: 0.5rem 0.7rem 0.7rem; border-top: 1px solid #eef2f6; display: flex; flex-direction: column; gap: 0.5rem; }
/* v0.4.48, Beat: geöffnetes Thema "deutlich grösser ... damit der Inhalt
   besser lesbar ist" -- NACH Rückmeldung mit echten LearningView-Screenshots
   zunächst bewusst NICHT als starre "4x"-Regel umgesetzt (Beat: "Themengrösse
   sollte proportional zu den Anderen sein"), UND ein eigener, begrenzter
   Scrollbereich für den Inhalt (Beat: "braucht eine Verschiebungsmöglichkeit
   in der Leiste rechts"), damit ein Thema mit vielen Dokumenten/Aufgaben
   nicht unbegrenzt in die Höhe wächst und die ganze Seite unübersichtlich
   macht. Alle anderen, nicht geöffneten Themen bleiben unverändert kompakt.

   v0.4.52, Beat, Nachschärfung (harte Vorgabe, explizit "mindestens
   verdoppelt", nicht nur "etwas mehr"): die erste, moderate Vergrösserung
   reichte nicht. Schriftgrösse UND Innenabstände jetzt exakt beim
   Doppelten der geschlossenen Basiswerte (.thema-zeile__kopf: 0.9rem/
   0.5rem 0.7rem -> 1.8rem/1rem 1.4rem; .thema-zeile__inhalt: Basis erbt
   ~1rem Fliesstext/0.5rem 0.7rem 0.7rem -> 2rem/1rem 1.4rem 1.4rem) --
   bewusst als HARTE Untergrenze exakt beim Faktor 2 gewählt, nicht knapp
   darunter, damit "mindestens verdoppelt" auch wirklich zutrifft. Nummer-
   Badge und Sichtbarkeits-Schnellschalter ebenfalls mitskaliert, sonst
   wirken sie neben dem jetzt deutlich grösseren Text unpassend klein. */
.thema-zeile[open] {
  border-color: var(--farbe-akzent);
  box-shadow: 0 0 0 2px rgba(47, 111, 176, 0.15);
}
.thema-zeile[open] > .thema-zeile__kopf { font-size: 1.8rem; padding: 1rem 1.4rem; gap: 1rem; }
.thema-zeile[open] > .thema-zeile__kopf .thema-zeile__nr { width: 3.2rem; height: 3.2rem; font-size: 1.56rem; }
.thema-zeile[open] > .thema-zeile__kopf .thema-sichtbarkeit-schnellschalter__icon { font-size: 2rem; }
.thema-zeile[open] > .thema-zeile__kopf .thema-sichtbarkeit-schnellschalter__text { font-size: 1.2rem; }
.thema-zeile[open] > .thema-zeile__inhalt {
  padding: 1rem 1.4rem 1.4rem;
  font-size: 2rem;
  max-height: 65vh;
  overflow-y: auto;
}
.thema-lehrplanbezug { border: 1px dashed var(--farbe-rand); border-radius: 6px; }
.thema-lehrplanbezug__kopf {
  cursor: pointer;
  list-style: none;
  font-size: 0.8rem;
  color: var(--farbe-text-leise);
  padding: 0.3rem 0.5rem;
}
.thema-lehrplanbezug__kopf::-webkit-details-marker { display: none; }
.thema-lehrplanbezug > div { padding: 0 0.5rem 0.5rem; }

.aufgaben-liste { display: flex; flex-direction: column; gap: 0.4rem; }
.aufgabe-zeile { border: 1px solid var(--farbe-rand); border-radius: 8px; overflow: hidden; }
.aufgabe-zeile--erledigt { opacity: 0.65; }
.aufgabe-zeile--erledigt .aufgabe-zeile__titel { text-decoration: line-through; }
.aufgabe-zeile__kopf {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.88rem;
  flex-wrap: wrap;
}
.aufgabe-zeile__kopf::-webkit-details-marker { display: none; }
.aufgabe-zeile__icon { flex: none; }
.aufgabe-zeile__titel { flex: 1 1 10rem; font-weight: 600; }
.aufgabe-zeile__meta { font-size: 0.78rem; color: var(--farbe-text-leise); }
.aufgabe-zeile__inhalt { padding: 0.5rem 0.6rem 0.6rem; border-top: 1px solid #eef2f6; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.88rem; }
.aufgabe-zeile__metazeile { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-size: 0.8rem; color: var(--farbe-text-leise); }
/* v0.4.44: Abgabeform-Mehrfachauswahl (Checkbox-Liste statt <select multiple>
   -- besser bedienbar auf dem iPad, dem Hauptgerät der Schüler). */
.aufgabe-abgabeform-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.3rem 0.8rem;
  margin-bottom: 0.6rem;
}
.aufgabe-abgabeform-eintrag { display: flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; }
.aufgabe-anhaenge { display: flex; flex-direction: column; gap: 0.3rem; }
/* v0.4.48, Punkt 1 von Beats Auftrag (mit LearningView-Referenzbild
   nachgeschärft): KOMPAKTE Dokumentzeile -- eine Zeile hoch, Titel links gut
   lesbar/nicht gequetscht, rechts klein Status-Icon + Dropdown + Papierkorb
   (nicht die ganze Zeile einnehmend). */
.aufgabe-anhang-zeile { display: flex; align-items: center; gap: 0.4rem; flex-wrap: nowrap; }
.aufgabe-anhang-zeile--versteckt { opacity: 0.6; }
.aufgabe-anhang-zeile .anhang { flex: 1 1 auto; min-width: 0; }
.aufgabe-anhang-zeile .anhang__icon,
.aufgabe-anhang-zeile .anhang { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v0.5.0-a15 (Beat): Mehrfach-Auswahl + Sammel-Zuteilung in der 📎-Dokumentliste.
   Häkchen pro Zeile + Sammel-Leiste oben -- NUR Lehrkraft/Admin (im JS gated,
   Schüler bekommen die Elemente gar nicht erst). */
.anhang-auswahl-checkbox { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin: 0; cursor: pointer; accent-color: var(--farbe-akzent); }
.anhaenge-sammelleiste {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  padding: 0.35rem 0.5rem; margin-bottom: 0.4rem;
  background: #eef0f2; border: 1px solid #d6dade; border-radius: 8px;
}
.anhaenge-sammelleiste__master { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; user-select: none; }
.anhaenge-sammelleiste__zaehler { font-size: 0.85rem; color: var(--farbe-text); }
.anhaenge-sammelleiste__aktionen { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
.anhaenge-sammelleiste__aktionen[hidden] { display: none; }
.anhaenge-sammelleiste__label { font-size: 0.85rem; color: var(--farbe-text); font-weight: 600; }
.anhaenge-sammelleiste__aufheben { margin-left: 0.15rem; }

/* v0.4.48, Punkt 2 von Beats Auftrag: Farb-/Icon-Schema pro Sichtbarkeitsstufe
   (siehe ANHANG_SICHTBARKEIT_FARBKLASSE/-_ICON in js/app.js). Farbe NUR als
   dezenter Hintergrund-/Rahmen-Akzent -- Titel/Text bleiben immer in der
   normalen Textfarbe, gut lesbar (Beat, oberste Priorität), nie farbig
   eingefärbt. "alle" bewusst OHNE eigene Akzentfarbe (neutral = Standard).
   "nach_zuteilung": Beat hat hier selbst keine Farbe vorgegeben ("wähle eine
   gut unterscheidbare") -- Violett gewählt, in dieser App sonst nirgends als
   Bedeutungsfarbe verwendet. */
.anhang-sichtbarkeit--lehrpersonen { background: #eef0f2; border-color: #d6dade; }
.anhang-sichtbarkeit--nach-loesung { background: #e8f6ec; border-color: #bfe4c9; }
.anhang-sichtbarkeit--passwort { background: #fff8dc; border-color: #f0dfa0; }
.anhang-sichtbarkeit--auf-anfrage { background: #e6f4fb; border-color: #b9dcef; }
.anhang-sichtbarkeit--nach-zuteilung { background: #f1eaf9; border-color: #d9c5ef; }
.aufgabe-anhang-zeile.anhang-sichtbarkeit--lehrpersonen,
.aufgabe-anhang-zeile.anhang-sichtbarkeit--nach-loesung,
.aufgabe-anhang-zeile.anhang-sichtbarkeit--passwort,
.aufgabe-anhang-zeile.anhang-sichtbarkeit--auf-anfrage,
.aufgabe-anhang-zeile.anhang-sichtbarkeit--nach-zuteilung {
  border-radius: 8px;
  padding: 0.15rem 0.4rem;
}
/* v0.4.48, Bugfix (Beat, Screenshot): das Status-Icon ist jetzt ein echter
   <button> (klickbar, schaltet direkt um) statt eines reinen <span>
   (Anzeige) -- Browser-Standardrahmen zurückgesetzt, damit es weiterhin wie
   ein einfaches Icon aussieht, nicht wie ein Formular-Button. */
.anhang-sichtbarkeit-status-icon {
  flex: none;
  font-size: 0.9rem;
  padding: 0.1rem 0.3rem;
  border-radius: 6px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.anhang-sichtbarkeit-status-icon:hover { background: rgba(0, 0, 0, 0.06); }
/* "Nur für Lehrpersonen" nutzt bewusst dasselbe 👁-Symbolpaar wie der
   Themen-Sichtbarkeits-Schnellschalter (Beat, ausdrücklich: "gleiches
   Symbol-Paar ... wiederverwenden") -- Durchstreichung per CSS statt eines
   eigenen Emojis, siehe .thema-sichtbarkeit-schnellschalter--versteckt. */
.anhang-sichtbarkeit-status-icon.anhang-sichtbarkeit--lehrpersonen { position: relative; }
.anhang-sichtbarkeit-status-icon.anhang-sichtbarkeit--lehrpersonen::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 2px;
  background: #6b7280;
  transform: rotate(-45deg);
  border-radius: 2px;
}
.anhang-sichtbarkeit-dropdown {
  font-size: 0.78rem;
  padding: 0.1rem 0.3rem;
  border-radius: 6px;
  border: 1px solid var(--farbe-rand);
  background: #fff;
  max-width: 11rem;
  flex: none;
}
.anhang-anfrage-status { font-size: 0.85rem; color: var(--farbe-text-leise); }
.anhang-anfrage-status--abgelehnt { color: #b0201a; }

/* v0.4.48: auffälliges, MUSS-bestätigt-werden-Modal für neue Dokument-
   Anfragen (Beat: "muss in den Vordergrund kommen") -- bewusst KEIN
   Schliessen-X/Klick-ausserhalb/Escape (siehe dokumentAnfrageModalZeigen()
   in js/app.js), damit es nicht versehentlich weggeklickt wird. */
.dokument-anfrage-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 30, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.dokument-anfrage-overlay__karte {
  background: #fff;
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  max-width: 26rem;
  width: calc(100% - 2rem);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  border-top: 4px solid #2e8fd6;
}
.dokument-anfrage-overlay__kopf { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.6rem; }
.dokument-anfrage-overlay__text { margin-bottom: 1rem; }
.dokument-anfrage-overlay__aktionen { display: flex; gap: 0.6rem; justify-content: flex-end; }

/* Dialog: Mehrfach-Anhänge-Editor (Thema/Aufgabe) */
.dialog-anhang-liste { display: flex; flex-direction: column; gap: 0.5rem; }
.anhang-mehrfach-zeilen { display: flex; flex-direction: column; gap: 0.5rem; }
.anhang-mehrfach-zeile {
  display: grid;
  /* v0.4.43: 6. Spalte für die neue "Nur ansehen"-Checkbox ergänzt. */
  grid-template-columns: 6rem 1fr 1fr auto auto auto;
  gap: 0.4rem;
  align-items: center;
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 0.4rem;
}
.anhang-mehrfach-sichtbar { font-size: 0.8rem; display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.anhang-mehrfach-nur-ansicht { font-size: 0.8rem; display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; }

/* Drag&Drop-Zone für den Anhänge-Editor (v0.4.21) — Beat kann Dateien direkt
   aus dem Windows-Explorer/Desktop hierher ziehen, statt den Pfad manuell zu
   tippen. Gestrichelter Rahmen als visuelles Feedback während des Drags. */
.dialog-anhang-liste--drophover {
  outline: 2px dashed var(--farbe-akzent, #2f6fb0);
  outline-offset: 4px;
  background: rgba(47, 111, 176, 0.06);
  border-radius: 8px;
}
.anhang-mehrfach-upload-hinweis {
  font-size: 0.8rem;
  color: var(--farbe-text-schwach, #666);
  border: 1px dashed var(--farbe-rand);
  border-radius: 8px;
  padding: 0.5rem;
  text-align: center;
}
.anhang-mehrfach-zeile--laedt {
  opacity: 0.6;
  font-style: italic;
}

.ereignis-zeile {
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  overflow: hidden;
}
.ereignis-zeile__kopf {
  cursor: pointer;
  list-style: none;
  padding: 0.5rem 0.6rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.ereignis-zeile__kopf::-webkit-details-marker { display: none; }
.ereignis-typ-chip {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: #607d8b;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  white-space: nowrap;
}
.ereignis-typ-chip--ferien { background: #d17a1f; }
.ereignis-zeile__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ereignis-zeile__titel { font-weight: 600; }
.ereignis-zeile__datum { font-size: 0.8rem; color: var(--farbe-text-leise); }
.ereignis-zeile__flag {
  flex: none;
  margin-left: auto;
  font-size: 0.72rem;
  color: #a3822f;
  cursor: help;
}
.ereignis-zeile__inhalt {
  padding: 0.5rem 0.6rem 0.7rem;
  border-top: 1px solid #eef2f6;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* ---------- Kompakte Referenz-Widgets: Stundenplan + Ferienkalender (v0.4.0) ---------- */
.widget-reihe {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.4rem;
  /* Positionierungs-Kontext für das aufgeklappte Stundenplan-Overlay unten
     (position: absolute darin verankert sich hieran, nicht an der ganzen Seite). */
  position: relative;
}
/* v0.4.88: umsortierbare Schulplaner-Kacheln (Drag&Drop-Hülle je Widget). */
.schulplaner-kachel { position: relative; }
.schulplaner-kachel--drag { opacity: 0.55; }
.schulplaner-kachel--zielmarke { box-shadow: 0 -3px 0 0 var(--farbe-akzent); }
/* v0.4.108: Werkzeuge (Griff + Auge) oben rechts an jeder Schulplaner-Kachel. */
.schulplaner-kachel__werkzeuge {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  z-index: 3;
  display: flex;
  gap: 0.25rem;
}
.schulplaner-drag,
.schulplaner-auge {
  border: 1px solid var(--farbe-rand);
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--farbe-text-leise);
  padding: 0.15rem 0.4rem;
  cursor: pointer;
  touch-action: none; /* Pointer-Drag auf Touch nicht als Scrollen werten (iPad) */
}
.schulplaner-drag { cursor: grab; }
.schulplaner-drag:active { cursor: grabbing; }
.schulplaner-auge:hover { border-color: var(--farbe-akzent); color: var(--farbe-akzent); }
/* v0.4.135: Drag-Umsortieren für Themen-Tiles (horizontaler Streifen) UND Kacheln
   (vertikale Material-Nav-Liste). Griff = ⠿, touch-action:none für iPad-Drag.
   v0.4.139: derselbe Griff/dieselbe Optik für die Links-Verwaltung
   (.unterrichtslink-drag) -- konsistente Umsortier-UX über die ganze App. */
.tile-drag, .md-zeile__drag, .unterrichtslink-drag, .aufgabe-anhang-zeile__drag {
  cursor: grab;
  touch-action: none;
  color: var(--farbe-text-leise);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  border-radius: 5px;
  user-select: none;
}
/* v0.5.0: der Dokument-Griff sitzt in einer flex-Zeile -> nicht schrumpfen. */
.aufgabe-anhang-zeile__drag { flex: 0 0 auto; }
.tile-drag:active, .md-zeile__drag:active, .unterrichtslink-drag:active, .aufgabe-anhang-zeile__drag:active { cursor: grabbing; }
.tile-drag:hover, .md-zeile__drag:hover, .unterrichtslink-drag:hover, .aufgabe-anhang-zeile__drag:hover { color: var(--farbe-akzent); background: rgba(47,111,176,0.12); }
.thema-karte--drag, .md-zeile--drag, .unterrichtslink-verwaltung-zeile--drag, .aufgabe-anhang-zeile--drag { opacity: 0.55; }
/* Ziel-Markierung: Themen-Streifen (horizontal) -> linke Kante; Kachel-Liste
   und Links-Verwaltung (vertikal) -> obere Kante. Dokumentzeilen (vertikale
   Liste, v0.5.0) -> ebenfalls obere Kante. */
.thema-karte--zielmarke { box-shadow: -3px 0 0 0 var(--farbe-akzent); }
.md-zeile--zielmarke, .unterrichtslink-verwaltung-zeile--zielmarke, .aufgabe-anhang-zeile--zielmarke { box-shadow: 0 -3px 0 0 var(--farbe-akzent); }
/* v0.5.0-a13 (Beat: "jedes Dokument per Drag&Drop ... in den Arbeitsbereich ...
   ALLE Dokumente! Bilder etc."): Griff + Ziehen/Ablegen für Arbeitsraum-Dokumente
   -- umsortieren INNERHALB und verschieben ZWISCHEN den drei Bereichen. Griff-Optik
   wie die übrigen ⠿-Griffe (.aufgabe-anhang-zeile__drag). */
.arbeitsraum-doc__drag {
  display: inline-flex;
  align-items: center;
  cursor: grab;
  touch-action: none; /* iPad: Griff zieht, scrollt nicht */
  color: var(--farbe-text-leise);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.1rem 0.3rem;
  margin-right: 0.15rem;
  border-radius: 5px;
  user-select: none;
  flex: 0 0 auto;
}
.arbeitsraum-doc__drag:active { cursor: grabbing; }
.arbeitsraum-doc__drag:hover { color: var(--farbe-akzent); background: rgba(47,111,176,0.12); }
.arbeitsraum-doc--ar-drag { opacity: 0.55; }
.arbeitsraum-doc--ar-zielmarke { box-shadow: 0 -3px 0 0 var(--farbe-akzent); }
/* Ziel-Bereich beim Verschieben ZWISCHEN Bereichen dezent hervorheben. */
.arbeitsraum-spalte__inhalt--ar-zielpane {
  outline: 2px dashed var(--farbe-akzent);
  outline-offset: -2px;
  border-radius: 6px;
  background: rgba(47,111,176,0.05);
}
/* v0.4.121: getrennter "für Schüler zeigen/verbergen"-Schalter (nur an den vier
   zugelassenen Widgets). Gleiche Basis wie .schulplaner-auge, farbige Zustände
   wie das Fach-Klassen-Auge -- 🎓 = für Schüler sichtbar, 🚫 = verborgen. */
.schulplaner-schueler-toggle {
  border: 1px solid var(--farbe-rand);
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--farbe-text-leise);
  padding: 0.15rem 0.4rem;
  cursor: pointer;
}
.schulplaner-schueler-toggle--sichtbar { color: #18794e; border-color: #9fd8bb; background: #eafaf1; }
.schulplaner-schueler-toggle--verborgen { color: #b23b2e; border-color: #e6b3ab; background: #fdecea; }
.schulplaner-schueler-toggle:disabled { opacity: 0.5; cursor: default; }
/* v0.4.136: schülerseitige Schülernummer (nur die eigene Nummer). */
.schueler-nummer-eigen { font-size: 1.5rem; font-weight: 800; color: var(--farbe-akzent); padding: 0.4rem 0; }
/* v0.4.108: "⚙ Ausgeblendet"-Leiste am Ende der Reihe. */
.schulplaner-ausgeblendet {
  border: 1px dashed var(--farbe-rand);
  border-radius: 8px;
  padding: 0.3rem 0.5rem;
  background: #f7f9fc;
}
.schulplaner-ausgeblendet__kopf { cursor: pointer; font-size: 0.82rem; color: var(--farbe-text-leise); font-weight: 600; }
.schulplaner-ausgeblendet__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.schulplaner-ausgeblendet__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.2rem 0.15rem 0.5rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  background: #fff;
  font-size: 0.8rem;
}
.schulplaner-ausgeblendet__zeigen {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 0.15rem;
  border-radius: 50%;
}
.schulplaner-ausgeblendet__zeigen:hover { background: rgba(0,110,220,0.12); }
/* v0.4.107: Disziplinar-Widget-Inhalt. */
.disziplin-liste { display: flex; flex-direction: column; gap: 0.7rem; }
.disziplin-schueler { border: 1px solid var(--farbe-rand); border-radius: 8px; padding: 0.5rem 0.6rem; background: #fff; }
.disziplin-schueler__name { font-weight: 700; margin-bottom: 0.35rem; }
.disziplin-eintrag { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0; border-bottom: 1px solid #eef2f6; }
.disziplin-eintrag__datum { flex: 0 0 auto; color: var(--farbe-text-leise); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.disziplin-eintrag__text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.disziplin-eintrag__x { flex: 0 0 auto; border: none; background: transparent; color: var(--farbe-text-leise); cursor: pointer; font-size: 0.9rem; border-radius: 50%; padding: 0 0.2rem; }
.disziplin-eintrag__x:hover { color: #c0392b; background: rgba(192,57,43,0.12); }
.disziplin-neu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.4rem; }
.disziplin-neu__datum { flex: 0 0 auto; }
.disziplin-neu__text { flex: 1 1 8rem; min-width: 7rem; }
.widget {
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}
.widget__kopf {
  cursor: pointer;
  padding: 0.8rem 1.1rem;
  font-size: 1.05rem;
  list-style: none;
}
.widget__kopf::-webkit-details-marker { display: none; }
.widget__hinweis { font-size: 0.85rem; color: var(--farbe-text-leise); font-weight: 400; }
.widget__inhalt { position: relative; padding: 0 1.1rem 1.1rem; border-top: 1px solid #eef2f6; padding-top: 0.9rem; }
/* v0.4.59: die früheren `.widget--ferien[open]`/`.widget--unterrichtslinks[open]`
   Sidebar-Scroll-Regeln sind entfallen -- alle vier Sidebar-Widgets öffnen jetzt
   im Top-Layer-<dialog> (kein `[open]`-<details> mehr, siehe
   .widget-vollbild-dialog weiter unten); der Scrollbereich ist dort das
   Vollbild-`.widget__inhalt` selbst. */
.widget__schliessen {
  position: absolute;
  top: 0.6rem;
  right: 1.1rem;
  width: 1.8rem;
  height: 1.8rem;
  border: none;
  background: #eef2f6;
  color: var(--farbe-text-leise);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.widget__schliessen:hover { background: #e4e9ef; color: var(--farbe-text); }

/* Ferien-Widget: Beat entschied sich um — statt die ganze Ansicht auf 80%
   zu verkleinern (frühere Idee, wieder verworfen), stehen die Angaben pro
   Ferienperiode jetzt gestapelt UNTER dem jeweiligen Titel (siehe
   .fk-eintrag unten in js/stundenplan.js) — das löst das Platzproblem, ohne
   etwas zu verkleinern. */

/* Stundenplan-Widget (aufgeklappt): darf auf Beats Wunsch über die schmale
   Seitenspalte hinaus in die Wochenplanung rechts hineinragen ("Dieser darf
   auch in die Wochenplanung überlappen. Sonst kann man ihn nicht lesen.") —
   der echte Stundenplan (11 Lektionen × 5 Tage) ist zu dicht, um lesbar in
   19rem gequetscht zu werden. .widget-reihe (position: relative, oben) ist
   der Verankerungspunkt; .widget--stundenplan selbst bekommt ebenfalls
   position: relative, damit sich das Overlay exakt unter SEINEM eigenen
   Titel öffnet, unabhängig davon, ob Stundenplan oder Ferien zuerst in der
   Spalte steht. overflow: visible überschreibt das geerbte overflow:hidden
   von .widget, sonst würde der eigene Rahmen den Überlauf abschneiden.
   Schliessen bleibt unverändert (Titel erneut anklicken oder ✕) — das ändert
   nur die Grösse im offenen Zustand, nicht die Öffnen/Schliessen-Logik.

   v0.4.49, Beat (dringend, Screenshot): Popup erschien zu weit unten/
   zentriert -- unterer Teil (P4-P6) ausserhalb des sichtbaren Bereichs,
   schlecht erreichbar. Von position:absolute (relativ zum eigenen Widget,
   "unter dem eigenen Titel") auf position:fixed (relativ zum VIEWPORT,
   "nahe der oberen Kante") umgestellt -- zwei Gründe zugleich: (1) löst
   genau das gemeldete Problem (immer nah an der oberen Kante, unabhängig
   davon, wie weit unten auf der Seite der Auslöser gerade steht), (2) macht
   .aktuelles-spalten__links jetzt sicher scrollbar (siehe dort) --
   position:fixed ist IMMUN gegen den overflow eines Vorfahren, position:
   absolute wäre das nicht gewesen. Kein JS-Aufwand für pixelgenaues
   "folgt dem Button" nötig -- feste, grosszügige Position + eigener
   Scrollbereich (max-height+overflow-y) als zusätzliches Sicherheitsnetz,
   falls der Bildschirm trotzdem zu klein ist. */
.widget--stundenplan { position: relative; }

/* v0.4.57, Bugfix (Larry, live per elementFromPoint): Stundenplan-Vollbild
   jetzt als natives <dialog> + showModal() statt position:fixed-Panel.
   Root-Cause des alten Bugs: das fixed-Panel (z-index:40) war im
   Stacking-Sinn in .aktuelles-spalten__links gefangen -- diese Sidebar hat
   position:sticky (eigener Stacking-Context, z-index:auto) und lag damit
   unter dem Header (z-index:10); das ganze Popup verschwand hinter dem
   Header, das ✕ war nicht erreichbar. Den Sidebar-z-index hochzusetzen ist
   keine Option (brächte den "Sidebar ragt beim Scrollen über die Menüs"-Bug
   zurück). showModal() rendert im Browser-Top-Layer, immun gegen JEDEN
   verschachtelten Stacking-Context -- keine z-index-Akrobatik mehr nötig. */
.widget__kopf--knopf {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font-family: inherit; /* font-size 1.05rem bleibt aus .widget__kopf erhalten */
  color: inherit;
}
.widget-vollbild-dialog {
  padding: 0;
  margin: 0;
  border: none;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  background: var(--farbe-karte);
  color: inherit;
  overflow: hidden; /* der innere .widget__inhalt scrollt selbst */
}
.widget-vollbild-dialog::backdrop { background: rgba(20, 40, 60, 0.35); }
.widget-vollbild-dialog > .widget__inhalt {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow-y: auto;
  background: var(--farbe-karte);
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* Das ✕ sitzt in der sticky .widget__vollbild-leiste, die ihren eigenen
     oberen Raum mitbringt -- daher kleiner Innenabstand oben. */
  padding: 0.9rem 1.6rem 1.6rem;
  box-sizing: border-box;
}
/* ✕ im Vollbild-Dialog: oben klebende In-Flow-Leiste (fester 2.8rem-Flex-
   Button -> konstruktiv nicht-null Box, bleibt beim Scrollen sichtbar). Da
   der Inhalt jetzt in einem showModal()-<dialog> (Top-Layer) liegt, kann das
   Kreuz von keinem Vorfahren-Stacking mehr verdeckt werden -- keine
   z-index-Akrobatik nötig. */
.widget-vollbild-dialog .widget__vollbild-leiste {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: var(--farbe-karte);
  padding-bottom: 0.6rem;
  margin-bottom: 0.3rem;
  z-index: 5;
}
.widget-vollbild-dialog .widget__schliessen {
  position: static;
  width: 2.8rem;
  height: 2.8rem;
  min-width: 2.8rem;
  min-height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(20, 40, 60, 0.18);
}

/* Stundenplan-Tabelle */
.sp-hinweis { font-size: 0.9rem; color: var(--farbe-text-leise); margin-bottom: 0.7rem; }
.sp-tabelle {
  display: grid;
  grid-template-columns: 5.5rem repeat(5, 1fr);
  gap: 1px;
  background: var(--farbe-rand);
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.85rem;
}
.sp-zelle { background: #fff; padding: 0.4rem 0.35rem; min-height: 2.4rem; }
.sp-zelle--kopf { background: #f4f7fa; font-weight: 700; text-align: center; }
.sp-zelle--zeit { background: #f4f7fa; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sp-periode-nr { font-weight: 700; font-size: 0.78rem; }
.sp-periode-zeit { font-size: 0.68rem; color: var(--farbe-text-leise); }
.sp-zelle--pause { background: #eef2f6; text-align: center; font-style: italic; color: var(--farbe-text-leise); display: flex; align-items: center; justify-content: center; }
.sp-zelle--leer { color: #c3ccd4; text-align: center; display: flex; align-items: center; justify-content: center; }
.sp-chip-reihe { display: flex; flex-wrap: wrap; gap: 0.2rem; justify-content: center; }
.sp-chip-reihe .chip { min-width: 0; font-size: 0.72rem; padding: 0.15rem 0.35rem; }
.sp-zelle__hinweis { font-size: 0.62rem; color: var(--farbe-text-leise); text-align: center; margin-top: 0.15rem; }

/* Ferienkalender-Liste (Widget) — Beat: alle Angaben gestapelt UNTER dem
   jeweiligen Titel (z. B. "Herbstferien"), statt in eine schmale Zeile
   gequetscht. Löst das Platzproblem, ohne irgendetwas zu verkleinern. */
.fk-liste { display: flex; flex-direction: column; gap: 0.9rem; }
.fk-eintrag {
  padding: 0.3rem 0 0.6rem;
  border-bottom: 1px solid #f0f3f7;
}
.fk-eintrag:last-child { border-bottom: none; padding-bottom: 0; }
.fk-eintrag__titel {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.98rem;
}
.fk-eintrag__schuljahr { font-weight: 400; font-size: 0.8rem; color: var(--farbe-text-leise); }
.fk-eintrag__zeile { font-size: 0.85rem; color: var(--farbe-text-leise); margin-top: 0.2rem; }

/* v0.4.72: Ferien nach Schuljahr gruppiert -- Kopf (Schuljahr links, Umschalter
   rechts), darunter die Ferien des gewählten Jahres im mehrspaltigen Raster,
   damit der breite Vollbild-Platz besser genutzt wird (Beat). */
.fk-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--farbe-rand);
}
.fk-kopf__titel { font-weight: 700; font-size: 1.15rem; }
.fk-kopf__tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fk-kopf__tab {
  border: 1px solid var(--farbe-rand);
  background: #fff;
  color: var(--farbe-text);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.fk-kopf__tab:hover { background: #eef4fb; }
.fk-kopf__tab--aktiv {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: #fff;
  font-weight: 700;
}
.fk-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 1.6rem;
}
.fk-raster .fk-eintrag { border-bottom: 1px solid #f0f3f7; }
@media (max-width: 640px) {
  .fk-raster { grid-template-columns: 1fr; }
}

/* ---------- Ferien-Balken (ersetzt die Lektionentafel während Schulferien) ---------- */
.ferien-balken {
  margin: 0.9rem 1.2rem 1.1rem;
  padding: 1.4rem 1.6rem;
  background: linear-gradient(135deg, #fff3d6, #ffe6b3);
  border: 1px solid #f0cf8a;
  border-radius: var(--radius);
  text-align: center;
}
.ferien-balken__titel { font-size: 1.35rem; font-weight: 700; color: #7a5c00; }
.ferien-balken__spanne { font-size: 1.05rem; color: #8a6a10; margin-top: 0.25rem; }
.ferien-balken__hinweis { font-size: 0.9rem; color: #8a6a10; margin-top: 0.35rem; }

/* Vorschau-Balken (nächste Ferien, unterhalb der 3-Wochen-Ansicht) — dieselbe
   Balken-Optik, etwas zurückhaltender (kein voller Rahmen um die Lektionentafel
   herum, sondern ein eigener Block am Ende der Liste). */
.ferien-balken--vorschau {
  background: linear-gradient(135deg, #fff8e8, #fff1cf);
  border-style: dashed;
}
.ferien-balken__vorschau-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #a3822f;
  margin-bottom: 0.3rem;
}

/* ---------- Druck (A4, mehrere Karten pro Seite) ---------- */
@media print {
  body.druck-modus > *:not(.druck-overlay) { display: none !important; }
  .druck-overlay { position: static; background: #fff; }
  .no-print { display: none !important; }
  .druck-karten {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0;
    max-width: none;
  }
  .qr-karte { border: 1px solid #999; }
  @page { size: A4; margin: 12mm; }
}

/* ---------- Meldungen: RU/LIFT/CO-Memo (v0.4.0) ---------- */
/* Kopf-Memo pro Tag (nur Schüler-Ansicht, ausblendbar) */
/* grid-column: 1/-1 ist der eigentliche Fix für Beats gemeldetes Überlappungs-
   Problem: .tag ist ein 3-Spalten-Grid (Label/Inhalte/Hausaufgaben). Ohne
   diese Angabe wird das Kopf-Memo (als 2. Kind nach dem Label eingefügt) in
   die MITTLERE Spalte gequetscht — und schiebt dadurch alle nachfolgenden
   Grid-Kinder (Einträge, Hausaufgaben) eine Spalte weiter, sodass die
   eigentlichen Inhalte in der falschen Spalte landen und sich überlappen.
   Mit vollem Spaltendurchlauf bekommt das Memo automatisch seine eigene Zeile. */
.tag__meldungen { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; }
.meldung {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem 0.6rem;
  background: #fff8e1;
  border: 1px solid #f0dfa8;
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  font-size: 0.92rem;
}
.meldung__text { flex: 1 1 12rem; min-width: 0; }
.meldung__aktionen {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 0 1 auto;
  align-items: flex-end;
  min-width: 0;
}
.meldung__schliessen {
  font: inherit;
  font-size: 0.85rem;
  border: none;
  background: none;
  color: #7a5c00;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  text-decoration: underline;
}
.meldung__optout {
  font-size: 0.72rem;
  color: #8a7440;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* Fuss-Hinweis am Ende eines Tages (geteilte Info, für alle sichtbar).
   grid-column: 1/-1 ist WICHTIG: .tag ist ein 3-Spalten-Grid (Label/Inhalte/
   Hausaufgaben); ohne diese Angabe würde die Grid-Auto-Platzierung dieses als
   4. Kind angehängte Element in nur EINE einzelne Zellenspur quetschen (sehr
   schmal), statt über die volle Breite der Tageszeile zu laufen. */
.tag__meldung-fuss { grid-column: 1 / -1; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; }
.meldung-fuss-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  font-size: 0.85rem;
  color: var(--farbe-text-leise);
  background: #f4f7fa;
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
}
.meldung-fuss-zeile > span:first-child { flex: 1 1 10rem; min-width: 0; }
.meldung-fuss-zeile--aus { text-decoration: line-through; opacity: 0.7; }
.meldung-fuss__admin-toggle {
  font: inherit;
  font-size: 0.78rem;
  border: 1px solid var(--farbe-rand);
  background: #fff;
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
  cursor: pointer;
  margin-left: auto;
}

/* ---------- Ereignisse im Info-Feld der Lektionentafel (v0.4.13) ----------
   Bewusst eine andere (kühlere/blaue) Farbgebung als die gelben RU/LIFT/CO-
   Meldungen (.meldung) oben — unterschiedliche Bedeutung, soll auf den ersten
   Blick unterscheidbar sein: Meldungen = "denk dran", Ereignisse = "Termin". */
.info-ereignis-box { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.4rem; }
.info-ereignis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  background: #eef4fb;
  border: 1px solid #cfe0f0;
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  font-size: 0.9rem;
}
.info-ereignis__text { flex: 1 1 12rem; min-width: 0; }
.info-ereignis__schliessen {
  font: inherit;
  font-size: 0.82rem;
  border: none;
  background: none;
  color: var(--farbe-akzent);
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  text-decoration: underline;
}

/* ---------- Persönliche Ebene (nur auf diesem Gerät, v0.4.0) ---------- */
.persoenlich-box {
  /* grid-column: 1/-1 aus demselben Grund wie bei .tag__meldung-fuss oben —
     sonst quetscht die Grid-Auto-Platzierung diese Box in eine einzelne,
     sehr schmale Spalte statt über die volle Zeilenbreite (Beat-Rückmeldung:
     "sieht cramped/squeezed aus"). */
  grid-column: 1 / -1;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #cfd8e3;
}
.persoenlich-box__titel {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #4a6076;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.persoenlich-box__hinweis-icon { cursor: help; }
.persoenlich-eintrag {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: #f2f7fc;
  border: 1px dashed #b9cfe8;
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
}
.persoenlich-eintrag__text { flex: 1 1 auto; }
.persoenlich-formular {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.persoenlich-formular .sort-select { flex: none; min-width: 8rem; }
.persoenlich-formular .sch-input { flex: 1 1 12rem; }

/* ---------- Tablet + Handy: kompakter Kopf, fixierte Nav (v0.4.137) ----------
   NUR ≤1024px (iPad-Querformat und schmaler) -- Desktop (>1024px) bleibt
   EXAKT unverändert (alle Regeln liegen ausschliesslich in diesem und dem
   engeren 760px-Block darunter). Beat hat MySchool jetzt auf iPhone + iPad im
   Einsatz; zwei Probleme:
   1. Kopfbereich viel zu hoch -> hier deutlich kompakter (kleinere
      Titel/Logos, engere Paddings; Dashboard-Titel 2.5rem -> 1.4rem,
      OWO-Logo 3.4rem -> 2rem).
   2. Nav-Balken soll beim Scrollen oben sichtbar bleiben -> der Kopf scrollt
      jetzt weg (position:static), NUR die .hauptnav bleibt fixiert
      (position:sticky; top:0) mit deckendem Hintergrund + Schatten. So kommt
      der Inhalt früh und die Navigation ist immer erreichbar.
   Hinweis: --kopf-nav-unterkante wird von js/app.js bei Scroll 0 gemessen
   (nav.getBoundingClientRect().bottom = Kopf- + Nav-Höhe). Der Kopf steht bei
   Scroll 0 weiterhin im Fluss ÜBER der Nav -> der gemessene Wert bleibt gleich,
   alle Konsumenten (Sidebar-Sticky, Stundenplan-Popup) rechnen unverändert. */
@media (max-width: 1024px) {
  /* Kopf klebt nicht mehr -> gibt beim Scrollen sofort Platz für Inhalt frei. */
  .app-header { position: static; }
  /* v0.4.148 (Beat, "auf iPad entsprechend kleiner als jetzt"): der bereits in
     0.4.137 kompaktierte Tablet-Kopf wird nochmals durchgehend geschrumpft. */
  .app-header__inhalt { padding: 0.4rem 1rem; gap: 0.6rem; }
  .app-header__brand { gap: 0.2rem; }
  .app-header__brand-zeile { gap: 0.5rem; }
  .app-header__logo {
    width: 1.9rem; height: 1.9rem;
    font-size: 0.9rem; border-radius: 8px;
  }
  .app-header__title { font-size: 1.05rem; }
  /* Dashboard-Titel: 1.4rem -> 1.2rem. */
  .app-header__dashboard-titel {
    font-size: 1.2rem;
    letter-spacing: 0.2px;
    line-height: 1.15;
  }
  /* OWO-Schullogo: 2rem -> 1.7rem Höhe. */
  .app-header__logo-gross img { height: 1.7rem; max-width: 9rem; }
  .app-header__rechts { gap: 0.3rem; }
  .app-header__identitaet { min-height: 0; }

  /* Hauptnav: oben fixiert, deckender Hintergrund (bereits var(--farbe-karte)
     = #fff, Inhalt scrollt sauber darunter durch) + dezenter Schatten zur
     Abgrenzung. z-index 50 > geöffnete Widget-Dropdowns (40), damit der Balken
     immer obenauf bleibt. Eine Zeile mit horizontalem Scrollen statt
     gequetschter Tabs. */
  .hauptnav {
    position: sticky;
    top: 0;
    z-index: 50;
    padding: 1.15rem 1rem 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 3px 10px rgba(20, 40, 60, 0.12);
  }
  /* Tabs bleiben gut tippbar (grosse Tap-Ziele), nur horizontal etwas enger;
     nicht schrumpfen/umbrechen, sondern die Reihe scrollen lassen. */
  .hauptnav__gruppe { flex: none; }
  .hauptnav__tab {
    flex: none;
    white-space: nowrap;
    font-size: 1.05rem;
    padding: 0.65rem 0.9rem;
  }
}

/* ---------- Mobil / schmale Geräte ---------- */
@media (max-width: 760px) {
  :root { --font-basis: 17px; }
  .inhalt { padding: 0.9rem; }
  .tag {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  /* .eintraege/.ha bekommen ab 761px bewusst grid-column: 2/3 (siehe oben) —
     hier auf schmalen Bildschirmen mit nur 1 Spalte zurück auf "auto"
     setzen, sonst würde die explizite Spalten-Nummer eine zusätzliche,
     nicht vorhandene Spalte erzeugen statt sauber untereinander zu stapeln. */
  .eintraege { grid-column: auto; }
  .ha { grid-column: auto; }
  .tag__label { display: flex; align-items: baseline; gap: 0.6rem; }
  .ha { margin-top: 0.2rem; }
  /* v0.4.137, iPhone / sehr schmal: Kopf bricht in kompakte Zeilen um. Die
     Hauptnav ist bereits im ≤1024px-Block oben fixiert (sticky top:0); der
     frühere hartkodierte ".hauptnav { top: 13rem }" ENTFÄLLT bewusst -- er war
     eine fragile Schätzung der Kopfhöhe, und der Kopf klebt ohnehin nicht mehr
     mit (er scrollt weg), also gibt es nichts mehr, worunter die Nav rutschen
     müsste. */
  .app-header__inhalt { flex-wrap: wrap; padding: 0.35rem 0.75rem; gap: 0.3rem 0.6rem; } /* v0.4.148: enger */
  /* Marke ("MS MySchool") + "Angemeldet: … / Verlassen" in EINE Zeile statt
     gestapelt (spart eine Kopf-Zeile). */
  .app-header__brand {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.7rem;
  }
  /* Dashboard-Titel volle Breite, linksbündig, kompakt. v0.4.148: 1.25rem -> 1.1rem. */
  .app-header__dashboard-titel { width: 100%; text-align: left; font-size: 1.1rem; }
  /* v0.4.137: rechte Zone als EINE waagrechte Zeile -- OWO-Logo + Klasse +
     Gerät nebeneinander statt gestapelt (vorher eine Spalte). */
  .app-header__rechts {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem 0.7rem;
    margin-left: 0;
  }
  /* Beat: Klasse + Gerät möglichst in EINE Zeile -> nicht umbrechen. */
  .app-header__rechts-zeile { flex-wrap: nowrap; gap: 0.6rem; }
  .app-header__logo-gross-bereich { margin-left: 0; }
  /* v0.4.148: OWO-Logo auf iPhone nochmals kleiner (1.7rem -> 1.5rem). */
  .app-header__logo-gross img { height: 1.5rem; max-width: 8rem; }
  /* .schueler-grid ist seit v0.4.28 ohnehin immer einspaltig (flex-column),
     kein Media-Query-Sonderfall mehr nötig. */
  .karte__kopf { align-items: flex-start; }
  .lp-zeile { flex-wrap: wrap; }
  .lp-rolle { width: 100%; }
  .rollen-select { max-width: none; flex: 1 1 auto; }
  .druck-karten { grid-template-columns: repeat(2, 1fr); }
  /* v0.4.34: KEIN Stapeln mehr (früher flex-direction: column, Seitenleiste
     volle Breite über der Wochenplanung) -- Beat wollte stattdessen ein
     echtes kompaktes Layout mit "informativem Feld im Vordergrund", die
     Seitenleiste bleibt als schmaler Streifen NEBEN dem Hauptinhalt stehen.
     Identische Werte wie #inhalt.inhalt--schmal weiter oben (LEITLINIE dort
     lesen) -- manuelle Auswahl und automatische Erkennung führen bewusst
     zum selben Ergebnis. Bei Änderungen HIER auch dort nachziehen.
     v0.4.54: :not(...--eigene-breite) ergänzt -- Coordinator hat live
     nachgewiesen, dass GENAU diese Regel griff, obwohl Beat "normal"
     gewählt hatte (die 760px-Erkennung reagiert bewusst auf die reale
     Fensterbreite, unabhängig von der manuellen Wahl -- das ist so
     gewollt, siehe LEITLINIE oben). Der neue Splitter erlaubt jetzt aber
     ein bewusstes Übersteuern: hat der Nutzer die Trennleiste schon einmal
     gezogen, gewinnt diese Wahl auch auf schmalen Bildschirmen. */
  .aktuelles-spalten__links:not(.aktuelles-spalten__links--eigene-breite) {
    flex: 0 0 5.4rem;
    position: sticky;
  }
  /* v0.4.54: gleiche :not(...)-Ergänzung wie beim manuellen Schmal-Modus
     oben -- nur der ultra-schmale 5.4rem-Streifen braucht die zentrierte
     Mini-Kopfzeile. */
  .aktuelles-spalten__links:not(.aktuelles-spalten__links--eigene-breite) .widget__kopf {
    padding: 0.6rem 0.4rem;
    font-size: 0.8rem;
    line-height: 1.2;
    text-align: center;
  }
  .widget[open] {
    position: relative;
    overflow: visible;
    z-index: 40;
  }
  .widget[open]:not(.widget--stundenplan) > .widget__inhalt {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 40;
    width: max-content;
    max-width: min(26rem, calc(100vw - 2rem));
    background: var(--farbe-karte);
    border: 1px solid var(--farbe-rand);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 14px 34px rgba(20, 40, 60, 0.28);
    padding-bottom: 1.1rem;
  }
  .kachel-grid { grid-template-columns: 1fr; }
  .anhang-mehrfach-zeile { grid-template-columns: 1fr; }
  /* v0.4.55, "Kurse verwalten"-Master-Detail: bewusste Abweichung von der
     obigen LEITLINIE (Seitenleiste wird sonst ein schmaler ~5.4rem-Streifen
     statt zu stapeln) -- diese Liste zeigt echte Kursnamen unterschiedlicher
     Länge (nicht nur kurze feste Labels wie "Stundenplan"/"Ferien"), ein
     5.4rem-Streifen würde sie unlesbar abschneiden. Ausserdem ist "Kurse
     verwalten" eine admin-only Verwaltungsseite, kein schüler-facing
     Inhalt, für den die LEITLINIE ursprünglich gedacht war. Stattdessen
     gestapelt: Kurs-Liste oben (volle Breite), Schüler-Bereich darunter. */
  .kurs-verwaltung-layout { flex-direction: column; }
  .kurs-verwaltung__liste { flex: 1 1 auto; width: 100%; }
}

/* ============================================================================
   Startseite / Login-Vorhang (v0.4.138, Beat)
   Bildschirmfüllendes "Deckblatt": 4 Schulfotos (Crossfade + dezenter
   Ken-Burns-Zoom) + zentrierte Login-Karte. Liegt ÜBER der App (z-index 90),
   aber UNTER den Dialogen (.modal-overlay = z-index 100), damit der Admin-/
   Schüler-Login-Dialog sauber DARÜBER aufgeht.
   EHRLICH: reiner Oberflächen-Vorhang, KEINE echte Zugriffskontrolle
   (siehe index.html + startseiteVorhangAktualisieren() in js/app.js).
   ========================================================================== */
.startseite {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
  /* Basis-Markenverlauf = Fallback, wenn die Fotos (noch) fehlen: OWO-Rot ->
     MS-Blau. Trägt die Bühne auch ganz ohne Bilder edel. */
  background: linear-gradient(135deg, #6b1f2a 0%, #7a2733 26%, #2f4f7a 68%, var(--farbe-akzent) 100%);
}
.startseite[hidden] { display: none; }
/* Kein Scrollen der App hinter dem Vorhang (iOS-Rubberband). */
body.vorhang-aktiv { overflow: hidden; }

/* ---- Bühne: 4 gestapelte Foto-Ebenen + dunkler Leseschleier ---- */
.startseite__buehne { position: absolute; inset: 0; overflow: hidden; }
.startseite__foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity, transform;
  animation: startseite-crossfade 44s ease-in-out infinite;
}
/* v0.4.138: Fotos sind .webp (von Beat geliefert), NICHT .jpg. Reihenfolge
   bewusst: schule-1 (rotes "U", sonnig = Hero) zuerst, schule-4 (Winter) zuletzt.
   Fehlt eine Datei, scheitert background-image lautlos -> Basis-Verlauf trägt. */
.startseite__foto--1 { background-image: url("../img/schule-1.webp"); animation-delay: 0s; }
.startseite__foto--2 { background-image: url("../img/schule-2.webp"); animation-delay: 11s; }
.startseite__foto--3 { background-image: url("../img/schule-3.webp"); animation-delay: 22s; }
.startseite__foto--4 { background-image: url("../img/schule-4.webp"); animation-delay: 33s; }
@keyframes startseite-crossfade {
  0%   { opacity: 0; transform: scale(1.0); }
  4%   { opacity: 1; }
  25%  { opacity: 1; transform: scale(1.07); }
  29%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1.07); }
}
.startseite__schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,22,34,0.35) 0%, rgba(12,22,34,0.55) 55%, rgba(12,22,34,0.72) 100%);
}

/* ---- Login-Karte ---- */
.startseite__karte {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 24rem;
  background: rgba(255,255,255,0.97);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(10,20,30,0.45);
  padding: 2rem 1.8rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.startseite__marke { display: flex; align-items: center; gap: 0.7rem; }
.startseite__ms {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 12px;
  background: var(--farbe-akzent);
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.5px;
  flex: none;
}
.startseite__wortmarke { font-size: 1.9rem; font-weight: 800; color: var(--farbe-text); letter-spacing: 0.3px; }
.startseite__schule { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.startseite__owo { height: 3rem; max-width: 12rem; object-fit: contain; }
.startseite__schulname { font-size: 1.05rem; font-weight: 600; color: var(--farbe-text-leise); }
.startseite__login { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; margin-top: 0.3rem; }
.startseite__btn {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--farbe-rand);
  background: #fff;
  color: var(--farbe-text);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.startseite__btn:hover { box-shadow: var(--schatten); }
.startseite__btn:active { transform: translateY(1px); }
.startseite__btn--primaer { background: var(--farbe-akzent); border-color: var(--farbe-akzent); color: #fff; }
.startseite__btn--primaer:hover { background: #2a6299; }
.startseite__fuss { margin: 0; font-size: 0.85rem; color: var(--farbe-text-leise); }

/* Ruhig bei "reduzierte Bewegung": kein Crossfade/Zoom, nur das erste Foto
   statisch (oder der Basis-Verlauf, falls es fehlt). */
@media (prefers-reduced-motion: reduce) {
  .startseite__foto { animation: none; }
  .startseite__foto--1 { opacity: 1; transform: none; }
  .startseite__foto--2,
  .startseite__foto--3,
  .startseite__foto--4 { opacity: 0; }
}

/* Handy: Karte kompakter, kein horizontaler Überlauf, Fotos bleiben cover. */
@media (max-width: 760px) {
  .startseite { padding: 1rem; }
  .startseite__karte { max-width: 22rem; padding: 1.6rem 1.3rem; gap: 0.9rem; }
  .startseite__wortmarke { font-size: 1.6rem; }
  .startseite__ms { width: 2.6rem; height: 2.6rem; font-size: 1.05rem; }
  .startseite__owo { height: 2.6rem; }
}

/* ===== v0.4.149: Tabellen + Rich-Text in Inhalts-Textfeldern (Beat) =========
   Beat migriert LearningView-Inhalte, die in Tabellen stecken. Dieselben Rich-
   Text-Felder wie eintrag-rt, jetzt mit Tabellen (selbst erstellen + Paste aus
   Word/LearningView). Editor + Anzeige lassen breite Tabellen horizontal
   scrollen (overflow-x:auto) statt das Layout zu sprengen. */
.rt-tabelle-scope { overflow-x: auto; }
.rt-anzeige { overflow-x: auto; }
.rt-tabelle-scope table,
.rt-anzeige table,
.lernziel-info__inhalt table,
.lernziel-info__editor table,
.arbeitsraum-text-anzeige table,
.thema-feld__anzeige table,
.eintrag__titel table {
  border-collapse: collapse;
  margin: 0.4rem 0;
  max-width: 100%;
}
.rt-tabelle-scope td, .rt-tabelle-scope th,
.rt-anzeige td, .rt-anzeige th,
.lernziel-info__inhalt td, .lernziel-info__inhalt th,
.lernziel-info__editor td, .lernziel-info__editor th,
.arbeitsraum-text-anzeige td, .arbeitsraum-text-anzeige th,
.thema-feld__anzeige td, .thema-feld__anzeige th,
.eintrag__titel td, .eintrag__titel th {
  border: 1px solid var(--farbe-rand);
  padding: 0.28rem 0.5rem;
  vertical-align: top;
  text-align: left;
  min-width: 2.5rem;
}
.rt-tabelle-scope th, .rt-anzeige th,
.lernziel-info__inhalt th, .lernziel-info__editor th,
.arbeitsraum-text-anzeige th, .thema-feld__anzeige th,
.eintrag__titel th {
  background: #eef3fa;
  font-weight: 700;
}
/* Format-Panel "Tabelle einfügen" (Zeilen × Spalten, in der schwebenden Leiste). */
.rt-tabpanel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--farbe-rand);
  font-size: 0.82rem;
}
.rt-tabpanel[hidden] { display: none; }
.rt-tabpanel__zahl { width: 3rem; box-sizing: border-box; }
.eintrag-rt__fmt--tabelle { font-weight: 700; }
/* Arbeitsraum-Textblock: Rich-Editor füllt die Zeile zwischen Griff und Icons. */
.arbeitsraum-textblock__feld { flex: 1 1 auto; min-width: 0; }
/* Thema-Feld als Rich-Editor (contenteditable) -- volle Breite. */
.thema-feld__rt { width: 100%; }