/* ==============================================================
   Schul-App – Design-System (Sprint 1)
   Tokens, Basiselemente, Komponenten. Keine Inline-Styles,
   damit die CSP (style-src 'self') eingehalten wird.
   ============================================================== */

:root {
  /* Farben (Ticket #1209): Das dunkle Design steht auf einem tiefen Marineblau
     statt auf Waldgrün – „dunkel, aber edel". Grund, Flächen und Navigation sind
     Blau in drei Tiefen; Knöpfe und Eingabefelder liegen eine Stufe **heller**,
     damit man sie als bedienbar erkennt. Die Leitfarbe bleibt Gold.
     Der helle Modus (unten) ist unverändert. Alle Paare sind auf ≥ 4.5:1 geprüft
     (tools/a11y.mjs); die Werte stehen dort im Kontrastbericht. */
  --farbe-akzent: #e3b755;
  --farbe-akzent-dunkel: #c99f3f;
  --farbe-akzent-hell: #3a3418;
  /* Grund: tiefes Marineblau. Fläche: eine Stufe heller (Karten, Kopfzeile). */
  --farbe-hintergrund: #152238;
  --farbe-flaeche: #1e2f4d;
  --farbe-flaeche-leise: #1a2942;
  /* Eingabefelder: deutlich heller als die Fläche, damit sie als Feld erkennbar sind. */
  --farbe-feld: #2a4066;
  --farbe-linie: #3a5580;
  --farbe-linie-sekundaer: #4a6b9c;
  /* Navigation (Seitenleiste): die dunkelste Stufe. */
  --farbe-navigation: #0f1a2b;
  --farbe-navigation-text: #d7e0ec;
  --farbe-navigation-leise: #a3b4ca;
  --farbe-navigation-linie: #1d2c45;
  --farbe-navigation-hover: #142336;
  /* Knöpfe: helleres Blau als die Fläche, „hover" noch einen Schritt heller. */
  --farbe-hover: #2b4570;
  --farbe-hover-stark: #365486;
  --farbe-text: #f4f6fb;
  --farbe-text-leise: #c2cee0;
  /* Rückmeldungen bleiben grün/gelb/rot – sie bedeuten etwas, das ist keine Deko. */
  --farbe-erfolg: #7fe0b3;
  --farbe-erfolg-flaeche: #123a2c;
  --farbe-warnung: #e8c87a;
  --farbe-warnung-flaeche: #3d3218;
  --farbe-fehler: #ffb3c3;
  --farbe-fehler-flaeche: #3d1a26;
  --farbe-gefahr: #ff8fa8;
  /* Höhe der farbigen Welle in Kopf und Fuß (Tickets #1198, #1203). */
  --welle-hoehe: 44px;
  --farbe-kopf-hintergrund: #1e2f4d;
  --farbe-kopf-text: #f4f6fb;
  --farbe-kopf-text-leise: #c2cee0;
  /* Schrift auf der Leitfarbe (Knöpfe, aktiver Eintrag). Ein Schullayout (B.9)
     setzt diesen Wert passend zu seiner Leitfarbe – hell oder dunkel. */
  --farbe-akzent-text: #1a1405;

  /* Abstände (4er-Raster) */
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;

  /* Radien, Schatten */
  --radius-1: 10px;
  --radius-2: 12px;
  --radius-3: 14px;
  --radius-gross: 20px;
  --schatten-1: 0 1px 2px rgba(0, 0, 0, .25);
  --schatten-2: 0 8px 20px rgba(0, 0, 0, .32);

  /* Typografie */
  --schrift: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Schriftgrade aus dem Entwurf (Ticket #1095/#1099): 30 / 19 / 15 px */
  --schrift-titel: 1.875rem;
  --schrift-untertitel: 1.1875rem;
  --schrift-text: 0.9375rem;
  --schrift-klein: 0.82rem;
  --schrift-mini: 0.72rem;

  /* Fokus */
  --fokus: 3px solid var(--farbe-akzent);

  /* Dunkel ist der Standard (Ticket #1098). Die Systemeinstellung entscheidet
     nicht mehr mit – die Darstellung schaltet die Nutzerin über die Schaltfläche
     in der Kopfzeile um; die Wahl liegt lokal im Browser. */
  color-scheme: dark;
}

/* Helle Fassung: Creme und Weiß, dieselbe Leitfarbe.
   Gilt, wenn <html data-theme="light"> gesetzt ist (Schaltfläche in der Kopfzeile). */
:root[data-theme="light"] {
  color-scheme: light;
  --farbe-akzent: #e3b755;
  --farbe-akzent-dunkel: #d5a83f;
  --farbe-akzent-hell: #f6efd9;
  --farbe-hintergrund: #f8f4ea;
  --farbe-flaeche: #ffffff;
  --farbe-flaeche-leise: #f3f0e6;
  --farbe-feld: #fffdf8;
  --farbe-linie: #cad5ce;
  --farbe-linie-sekundaer: #a8b5ac;
  --farbe-navigation: #efede3;
  --farbe-navigation-text: #1e2d27;
  --farbe-navigation-leise: #55645c;
  --farbe-navigation-linie: #d8d1bf;
  --farbe-navigation-hover: #e3ddcd;
  --farbe-hover: #edeade;
  --farbe-hover-stark: #e3dfcf;
  --farbe-text: #1e2d27;
  --farbe-text-leise: #55645c;
  --farbe-erfolg: #17603f;
  --farbe-erfolg-flaeche: #dff3e6;
  --farbe-warnung: #8a6410;
  --farbe-warnung-flaeche: #f7ecd2;
  --farbe-fehler: #a32a44;
  --farbe-fehler-flaeche: #fbe3e8;
  --farbe-gefahr: #a32a44;
  --farbe-kopf-hintergrund: #ffffff;
  --farbe-kopf-text: #1e2d27;
  --farbe-kopf-text-leise: #55645c;
  --farbe-akzent-text: #1a1405;
  --schatten-1: 0 1px 2px rgba(30, 45, 39, .06);
  --schatten-2: 0 8px 20px rgba(30, 45, 39, .08);
  --fokus: 3px solid #8a6a12;
}

/* ---------- Basis ---------- */

* { box-sizing: border-box; }

/* Sicherheitszonen (Notch/Home-Indikator): der Entwurf reserviert oben und
   unten einen Streifen, damit Kopfzeile und Inhalt nicht unter der Statusleiste
   liegen. Auf Geräten ohne Notch sind die Werte 0 px. */
:root {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px);
  background: var(--farbe-kopf-hintergrund); z-index: 10;
}

body {
  margin: 0;
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-size: var(--schrift-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--schrift-titel); margin: 4px 0 4px; letter-spacing: -.02em; }
/* Überschriften brauchen Luft zum nächsten Block – 4 px klebten (gemessen
   auf allen 21 Seiten). Der Abstand in der Kopfzeile einer Karte bleibt 0. */
h2 { font-size: var(--schrift-untertitel); margin: 0 0 var(--abstand-3); letter-spacing: -.01em; }
p { margin: 0 0 var(--abstand-4); }

code {
  background: var(--farbe-flaeche-leise);
  border: 1px solid var(--farbe-linie);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: .88em;
}

:focus-visible { outline: var(--fokus); outline-offset: 2px; }

/* ---------- Kopfbereich ---------- */

.kopf {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--farbe-kopf-hintergrund);
  color: var(--farbe-kopf-text);
  padding: var(--abstand-3) var(--abstand-5);
  /* Ticket #1203: Die Welle liegt **im** Kopf, nicht darüber hinaus. Dadurch
     bleibt sie beim Scrollen hinter der Kopfzeile und schiebt sich nicht über
     den mittleren Bereich. Der untere Abstand schafft ihr den Platz. */
  padding-bottom: calc(var(--abstand-3) + var(--welle-hoehe));
  border-bottom: 1px solid var(--farbe-linie);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-4);
  flex-wrap: wrap;
}
.marke { font-weight: 700; }
.marke small {
  display: block; font-weight: 400; font-size: 0.8125rem;
  color: var(--farbe-kopf-text-leise);
}
.marke-name { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }

/* Platzhalter für das Schullogo: der Entwurf zeigt links ein goldenes Quadrat.
   Liegt eine Bilddatei vor, setzt der Server sie an diese Stelle ein. */
.marke-logo-platz {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--farbe-akzent); flex: none;
}
.kopf-rechts { display: flex; align-items: center; gap: var(--abstand-3); }
.wer { font-size: 0.84375rem; color: var(--farbe-kopf-text-leise); }

/* ---------- Layout ---------- */

/* Ticket #1371: Die Seite nutzt die Breite des Fensters. Vorher stand hier
   1280 px – auf großen Bildschirmen blieb links und rechts viel Raum leer. */
.huelle { max-width: min(100%, 1840px); margin: 0 auto; padding: var(--abstand-5); }

/* ---------- Arbeitsplatz: Baum links, Inhalt rechts ---------- */

.arbeitsplatz {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.inhalt { min-width: 0; }
/* Tickets #1250–#1252: Der Block „Mein Bereich" (Überschrift + Mandantenzeile)
   ist aus der Ansicht entfernt. Damit der Inhalt ganz oben beginnt, hat die
   Kopfzeile ohne den Menü-Knopf keine Höhe mehr; auf schmalen Fenstern bleibt
   der Menü-Knopf stehen und bekommt seinen Abstand. */
.inhalt-kopf { display: flex; align-items: flex-start; gap: var(--abstand-3); }
.inhalt-kopf h1 { margin: 0; }
.menue-knopf { display: none; flex-shrink: 0; }

/* ---------- Seitenleiste / Baum ---------- */

.seitenleiste {
  position: sticky;
  top: 96px;
  background: var(--farbe-navigation);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-gross);
  padding: 14px;
  color: var(--farbe-navigation-text);
  max-height: calc(100vh - 112px);
  overflow: auto;
}

.seitenleiste-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 10px;
}
.seitenleiste-titel {
  font-size: 0.8125rem; font-weight: 600; color: var(--farbe-akzent);
}
.seitenleiste-schliessen { display: none; }
.seitenleiste .seitenleiste-fuss { margin: 14px 10px 4px; font-size: 0.75rem; color: var(--farbe-navigation-leise); }

.baum, .baum-unterebene { list-style: none; margin: 0; padding: 0; }
.baum-unterebene {
  margin: 0 0 6px 14px; padding-left: 10px;
  border-left: 1px solid var(--farbe-navigation-linie);
}

.baum-eintrag, .baum-gruppe {
  display: flex; align-items: flex-start; gap: var(--abstand-2);
  width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: var(--schrift-text);
  border: 0; background: transparent; color: var(--farbe-navigation-text);
  /* Ticket #1199: Die Beschriftung muss im Feld bleiben. Ohne min-width: 0 kann
     ein flexibles Element nicht unter seine Mindestbreite schrumpfen – dann läuft
     ein langes Wort aus der farbigen Box heraus. */
  min-width: 0;
}
.baum-symbol, .baum-nr, .baum-pfeil, .baum-zahl { flex: none; }
.baum-text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
  /* Lange Wörter umbrechen, statt aus der Box zu laufen. */
  overflow-wrap: anywhere;
  hyphens: auto;
}
.baum-eintrag { padding: 8px 12px; border-radius: 9px; }
.baum-gruppe { padding: 10px; border-radius: var(--radius-1); font-weight: 600; color: var(--farbe-text); }
.baum-eintrag:hover, .baum-gruppe:hover { background: var(--farbe-navigation-hover); }
.baum-gruppe[aria-expanded="true"] .baum-pfeil { transform: rotate(90deg); }
.baum-pfeil { display: inline-block; width: 12px; font-size: 11px; opacity: .6; transition: transform .2s ease; }
.baum-symbol { width: 14px; color: var(--farbe-navigation-leise); }

.baum-eintrag[aria-current="page"] {
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
  font-weight: 700;
}
.baum-eintrag[aria-current="page"] .baum-symbol { color: var(--farbe-akzent-text); }
.baum-eintrag:focus-visible, .baum-gruppe:focus-visible { outline: var(--fokus); outline-offset: 1px; }

/* Klassen im Baum (dynamisch gefüllt) – Rückmeldung: Nichts darf sich überlappen.
   Vorher klebten der goldene Oberpunkt (2.1) und die goldene Klasse (3a) ohne
   Abstand aneinander: zwei gleiche Flächen wirkten wie ein einziger Balken, und
   die kleinen ▸-Knöpfe stießen an die Pillen und aneinander.
   Jetzt gilt: Abstand zwischen allen Zeilen, die Klasse ist kleiner und eingerückt,
   und die **gewählte** Klasse wird nicht mehr flächig gold gefüllt – Gold bleibt
   dem aktiven Oberpunkt vorbehalten, die Klasse trägt Gold als Kante und Schrift. */
#baum-klassen { margin: 6px 0 8px; padding: 0 0 0 var(--abstand-3); list-style: none; }
#baum-klassen > li { margin: 0 0 4px; }
#baum-klassen > li:last-child { margin-bottom: 0; }
.baum-klasse { display: flex; align-items: center; gap: 6px; }
.baum-klasse .baum-eintrag {
  flex: 1; min-width: 0;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: var(--schrift-klein);
}
.baum-klasse .baum-eintrag[aria-current="page"] {
  background: var(--farbe-navigation-hover);
  /* Schrift bleibt in der Textfarbe der Leiste (in hell und dunkel gut lesbar);
     Gold markiert die Auswahl als Kante – ein goldener Text auf heller Fläche
     wäre im hellen Modus zu schwach. */
  color: var(--farbe-navigation-text);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--farbe-akzent);
}
.baum-klasse .baum-klasse-oeffnen {
  flex: none;
  width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--schrift-mini); line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--farbe-linie); background: var(--farbe-flaeche);
  color: var(--farbe-navigation-text);
  cursor: pointer;
}
.baum-klasse .baum-klasse-oeffnen:hover { background: var(--farbe-hover); }
.baum-kinder { list-style: none; margin: 0 0 4px; padding: 0 0 0 var(--abstand-3); }
.baum-kinder button { width: 100%; text-align: left; font: inherit; font-size: var(--schrift-mini);
  border: 0; background: transparent; padding: 3px 6px; border-radius: var(--radius-1); cursor: pointer;
  color: var(--farbe-navigation-text); }
.baum-kinder button:hover { background: var(--farbe-hover); }
.baum-kinder button[aria-current="true"] { background: var(--farbe-hover); font-weight: 700; box-shadow: inset 3px 0 0 var(--farbe-akzent); }

/* Schmale Bildschirme: Baum wird zur Schublade */
@media (max-width: 900px) {
  .arbeitsplatz { grid-template-columns: 1fr; }
  .menue-knopf { display: inline-block; }
  /* Tickets #1250–#1252: Der Block „Mein Bereich" ist aus der Ansicht entfernt.
     Nur hier – wo der Menü-Knopf steht – braucht die Kopfzeile Luft nach unten. */
  .inhalt-kopf { margin-bottom: var(--abstand-3); }
  /* Kopfzeile wie im Entwurf enger, Kontoname entfällt */
  .kopf { padding: 10px 16px; padding-bottom: calc(10px + var(--welle-hoehe)); }
  .wer { display: none; }
  .seitenleiste {
    position: fixed; z-index: 20; top: 0; left: 0; bottom: 0;
    width: 288px; max-height: none; border-radius: 0;
    transform: translateX(-102%); transition: transform .16s ease;
  }
  .seitenleiste-schliessen { display: inline-block; }
  body.seitenleiste-offen .seitenleiste { transform: translateX(0); }
  body.seitenleiste-offen::after {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 10;
  }
}
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .zwei { grid-template-columns: 1fr; } }

/* Wochenplan-Kopf (Ticket #1156): drei Felder nebeneinander, auf schmalen
   Geräten untereinander. */
.drei { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .drei { grid-template-columns: 1fr; } }

/* Wissensdatenbank (Punkt 6.3, Ticket #1366): Fließtext der Einträge und
   Statusfarben – Grün gültig, Gelb Entwurf, Grau archiviert. */
.wissen-inhalt p { margin: 0 0 8px; font-size: var(--schrift-text); line-height: 1.55; }
.liste li.ist-gueltig { border-left: 3px solid #3f8f5f; padding-left: var(--abstand-3); }
.liste li.ist-entwurf { border-left: 3px solid #f0c14b; padding-left: var(--abstand-3); }
.liste li.ist-neu .jg { color: #6fbf8b; }

/* Materialbibliothek (Punkt 8.4, Ticket #1357): links Filter und Hochladen,
   rechts die Treffer als Kacheln mit Vorschaubild. */
.zwei-spalten { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .zwei-spalten { grid-template-columns: 1fr; } }

.bib-kacheln {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px;
}
.bib-kacheln li {
  border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 12px;
  background: rgba(255,255,255,.04); cursor: pointer;
  /* Gleiche Höhe in einer Reihe (Ticket #1360). */
  display: flex; flex-direction: column;
}
.bib-kacheln li .bib-marken { margin-top: auto; padding-top: 8px; }
.bib-kacheln li.ist-gewaehlt { border-color: #f0c14b; background: rgba(240,193,75,.12); }
.bib-kacheln .bib-vorschau {
  height: 92px; border-radius: 8px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.07); font-size: 30px; color: #f0c14b;
  overflow: hidden;
}
.bib-kacheln .bib-vorschau img { width: 100%; height: 100%; object-fit: cover; }
.bib-kacheln .bib-titel { font-weight: 600; font-size: var(--schrift-text); }
.bib-kacheln .bib-zeile { font-size: var(--schrift-klein); color: var(--farbe-text-leise); }
.bib-kacheln .bib-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bib-kacheln .bib-marke {
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); color: var(--farbe-text-leise);
}
.bib-kacheln .bib-marke.ist-favorit { border-color: #f0c14b; color: #f0c14b; }

/* Materialwerkstatt (Punkt 8.2, Ticket #1355): drei Spalten – Bausteine,
   A4-Seite, Eigenschaften. Auf schmalen Geräten untereinander. */
/* Tickets #1360 und #1361: Die drei Boxen sind gleich breit und gleich hoch.
   `align-items: stretch` lässt sie die Höhe der höchsten Box annehmen; die
   Karten selbst geben ihren Inhalt nach unten frei, damit die Kanten bündig
   bleiben. */
.drei-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.drei-spalten > .karte {
  display: flex; flex-direction: column; min-height: 520px; margin: 0;
}
.drei-spalten > .karte > :last-child { margin-bottom: 0; }
@media (max-width: 1100px) {
  .drei-spalten { grid-template-columns: 1fr; }
  .drei-spalten > .karte { min-height: 0; }
}

/* Die Seite als Blatt: weißes A4 mit Rand, damit die Vorschau wie Papier wirkt. */
.wst-seite {
  background: #fdfbf5; color: #22201c; border: 1px solid rgba(0,0,0,.15);
  border-radius: 6px; padding: 22px 20px; min-height: 520px;
  box-shadow: 0 2px 10px rgba(0,0,0,.18); font-size: 13px; line-height: 1.5;
}
.wst-kopf-schule { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin: 0; color: #6a6355; }
.wst-kopf-titel { font-size: 18px; font-weight: 700; margin: 4px 0 2px; }
.wst-kopf-angaben { font-size: 11px; margin: 0 0 14px; color: #6a6355; }
.wst-zeile { margin: 0 0 8px; }
.wst-zeile-abschnitt { font-weight: 700; margin-top: 12px; }
.wst-zeile-untertitel { font-size: 11px; color: #6a6355; }
.wst-zeile-fett { font-weight: 700; }
.wst-zeile-titel { font-size: 16px; font-weight: 700; }

/* Bausteine in der Reihenfolge: je Zeile ein Knopf zum Auswählen. */
.wst-bausteine { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.wst-bausteine li {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 8px; cursor: grab;
  background: rgba(255,255,255,.05);
}
.wst-bausteine li.ist-gewaehlt { border-color: #f0c14b; background: rgba(240,193,75,.14); }
.wst-bausteine li.ist-ziehend { opacity: .4; }
.wst-bausteine .wst-nr { min-width: 20px; color: #f0c14b; font-variant-numeric: tabular-nums; }
.wst-bausteine .wst-typ { font-size: 11px; opacity: .75; }
.wst-palette { display: flex; flex-wrap: wrap; gap: 8px; }

/* Vier Felder nebeneinander (Elternsprechzeiten und Schulmitteilungen,
   Tickets #1350 und #1352): auf schmalen Geräten zwei, darunter eine Spalte. */
.vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .vier { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vier { grid-template-columns: 1fr; } }

/* Ja/nein-Schalter als ganze Zeile zum Antippen (Ticket #1156). */
.wahl {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 6px; font-size: var(--schrift-klein);
  min-height: 44px; cursor: pointer;
}
.wahl input { width: 22px; height: 22px; min-height: 0; }

/* ---------- Tagesplan (Ticket #1156) ---------- */
.tagesplan {
  /* `auto-fit` mit Mindestbreite: Die Tage teilen sich die Karte genau auf und
     brechen um, statt rechts aus der Karte zu laufen (Ticket #1213). */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-top: 14px;
}
@media (max-width: 1100px) { .tagesplan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tagesplan { grid-template-columns: 1fr; } }

/* ---------- Tageskarten (Ticket #1215: symmetrisch und ruhig) ----------
   Jede Karte ist ein Block mit drei Teilen: Kopf (Wochentag + Datum, mit
   Trennlinie), Inhalt (wächst) und einem Hinweis, der unten sitzt. Dadurch
   stehen die Hinweise aller Karten auf einer Linie, und leere wie gefüllte Tage
   sehen gleich aufgebaut aus. */
.tag {
  display: flex;
  flex-direction: column;
  background: var(--farbe-flaeche-leise);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  padding: 12px;
  min-height: 150px;
}
.tag-frei { opacity: .72; }
.tag-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--farbe-linie);
}
.tag-kopf b { font-size: var(--schrift-klein); }
.tag-inhalt { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.tag-ferien { margin: 0; font-size: var(--schrift-mini); color: var(--farbe-warnung); }
/* Der Hinweis sitzt unten in der Karte – nicht direkt unter dem Ferientext. */
.tag-leer {
  margin: auto 0 0;
  font-size: var(--schrift-mini);
  color: var(--farbe-text-leise);
}
.tag-einheit {
  border: 1px solid var(--farbe-linie);
  border-left: 3px solid var(--farbe-akzent);
  border-radius: var(--radius-1);
  background: var(--farbe-flaeche);
  padding: 8px 9px;
  font-size: var(--schrift-mini);
}
.tag-einheit b { display: block; font-size: var(--schrift-klein); margin-bottom: 2px; }
.tag-einheit > span { display: block; color: var(--farbe-text-leise); }
/* Zwei Reihen: „erledigt" + ✕ nebeneinander, darunter das Datum in voller Breite. */
.tag-aktionen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-top: 8px;
}
.tag-aktionen .knopf-klein { flex: 1 1 auto; }
.tag-termin { margin-top: 6px; }
.tag-termin input[type="date"] { width: 100%; min-width: 0; font-size: var(--schrift-mini); }

/* Ferien in der Wochenansicht sichtbar machen. */
.woche-ferien {
  font-size: var(--schrift-mini); color: var(--farbe-warnung);
  margin-bottom: 6px;
}
.woche-tag-frei { opacity: .62; }

/* ---------- Komponenten ---------- */

.karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-top: 3px solid var(--farbe-akzent);
  border-radius: var(--radius-3);
  padding: 22px;
  margin-bottom: 20px;
}

.knopf {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--radius-1);
  border: 1px solid var(--farbe-linie-sekundaer);
  padding: 9px 16px;
  background: var(--farbe-hover);
  color: var(--farbe-text);
  transition: background .15s ease, border-color .15s ease;
}
.knopf:hover { background: var(--farbe-hover-stark); border-color: var(--farbe-akzent); }
.knopf:disabled { opacity: .55; cursor: not-allowed; }
.knopf-akzent { background: var(--farbe-akzent); border-color: var(--farbe-akzent); color: var(--farbe-akzent-text); }
.knopf-akzent:hover { filter: brightness(1.1); }
.knopf-leise {
  background: transparent; border-color: var(--farbe-linie-sekundaer); color: var(--farbe-kopf-text);
  padding: 6px 12px; font-size: var(--schrift-klein);
}
.knopf-gefahr { border-color: var(--farbe-fehler); color: var(--farbe-fehler); background: transparent; }
.knopf-reihe {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: var(--abstand-3) 0 var(--abstand-3);
}

/* ---------- Abstände in Karten (Rückmeldung Holger Ernst) ----------
   Fund im Bild „Bereitstellen": Die Aktionszeile `.reihe` hatte in dieser
   Stilvorlage **keine** Regel – Eingabefeld und der goldene Knopf standen ohne
   jeden Abstand untereinander, der Hinweis klebte am Knopf. Statt jede Stelle
   einzeln zu richten, gilt jetzt eine Regel für Blöcke in Karten und eine
   richtige Aktionszeile. `:where()` hält die Spezifität bei 0, damit einzelne
   Komponenten weiter ihre eigenen Abstände setzen können. */
.karte > :where(* + *) { margin-top: var(--abstand-3); }

/* Aktionszeile: Felder und Knöpfe in einer Reihe – mit Abstand und Umbruch.
   Felder nehmen nur so viel Breite, wie sie brauchen; Knöpfe behalten ihre. */
.reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-3);
  margin: 0 0 var(--abstand-3);
}

/* Was auf eine Liste, ein Formular oder eine Aktionszeile folgt, bekommt Luft –
   die Bausteine selbst setzen `margin: 0`, sonst klebte der Hinweis daran.
   Meldungsblöcke erscheinen erst bei einem Fehler und stehen trotzdem im Weg;
   deshalb zählen sie als „dazwischen" und geben den Abstand weiter. */
.liste + .hinweis,
.liste + p,
form + .hinweis,
.knopf-reihe + .hinweis,
.reihe + .hinweis,
.meldung + .hinweis,
.meldung + p,
form + .meldung + .hinweis { margin-top: var(--abstand-3); }
.reihe > input, .reihe > select { width: auto; flex: 1 1 200px; min-width: 150px; }
.reihe > input[type="date"] { flex: 0 0 auto; min-width: 172px; }
.reihe > .knopf, .reihe > a.knopf { flex: none; }

/* Einzelne Gruppe im Formular („Verteiler") bekommt einen eigenen Rahmen. */
.feldgruppe {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  padding: var(--abstand-3);
  margin: 0 0 var(--abstand-4);
}
.feldgruppe legend { padding: 0 var(--abstand-2); font-weight: 600; }

/* Ticket #1204: Die Textvorschläge im Zeugnis („Bausteine") standen bisher als
   Knopfreihe da – jeder Knopf so breit wie sein Text, die Zeilen dadurch
   ungleichmäßig. Jetzt liegen sie in einem Raster aus zwei gleich breiten
   Spalten; die Knöpfe einer Zeile sind gleich hoch und der Text steht links.
   Steht am Ende ein einzelner Baustein, nimmt er die Mitte in Spaltenbreite ein –
   so bleibt das Bild symmetrisch. */
#zeugnis-bausteine.bausteine-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
#zeugnis-bausteine .knopf {
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
#zeugnis-bausteine .knopf:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - 10px) / 2);
}
@media (max-width: 760px) {
  #zeugnis-bausteine.bausteine-raster { grid-template-columns: 1fr; }
  /* Eine Spalte: der einzelne Baustein steht dann in voller Breite. */
  #zeugnis-bausteine .knopf:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100%;
  }
}

/* Schullayout (B.9): Farbfelder als kleine Muster. Ein <input type="color"> nimmt
   sonst die volle Breite ein und sieht wie ein leerer Balken aus. */
.marke-farben {
  border: 0; padding: 0; margin: var(--abstand-4) 0 0;
  display: flex; gap: var(--abstand-4); flex-wrap: wrap;
}
.marke-farben legend { padding: 0; margin-bottom: var(--abstand-2); }
.marke-farben .feld { flex: 0 0 auto; margin: 0; }
.marke-farben input[type="color"] { width: 72px; height: 40px; padding: 2px; cursor: pointer; }
.marke-farben output {
  display: block; margin-top: 2px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--schrift-mini); color: var(--farbe-text-leise);
}

/* ---------- Zugangskarten für Kinder (Druckblatt) ----------
   Eigene Seite, die der Browser aus dem Arbeitsspeicher öffnet (Blob). Sie lädt
   diese Stilvorlage über ihre absolute Adresse – Inline-CSS wäre von der CSP
   blockiert (style-src 'self'), und ein Blob erbt die Richtlinie der Seite. */
.zugangskarten {
  background: #fff;
  color: #1c1714;
  padding: 14mm;
  font-family: var(--schrift);
}
.zugangskarten h1 { font-size: 1.2rem; margin: 0 0 4mm; }
.zugangskarten .einleitung { font-size: .85rem; margin: 0 0 8mm; color: #55524e; max-width: 150mm; }
.zugangskarten .karte-kind {
  border: 2px solid #1c1714;
  border-radius: 5mm;
  padding: 5mm 6mm 4mm;
  margin: 0 0 7mm;
  max-width: 120mm;
  break-inside: avoid;
  page-break-inside: avoid;
}
.zugangskarten .karte-kind h2 { margin: 0 0 3mm; font-size: 1.05rem; }
.zugangskarten .symbole { display: flex; gap: 5mm; margin: 0 0 3mm; }
.zugangskarten .zeichen {
  display: grid; place-items: center;
  border: 1px solid #b9b3a8; border-radius: 3mm;
  padding: 2mm; width: 20mm; height: 20mm;
}
.zugangskarten .zeichen img { width: 100%; height: 100%; display: block; }
.zugangskarten .namen { margin: 0 0 3mm; font-size: .95rem; }
.zugangskarten .hinweis { margin: 0; font-size: .75rem; color: #55524e; }
@media print {
  .zugangskarten { padding: 10mm; }
}

/* ---------- Werkzeugkasten (Ticket #1207) ----------
   Statt einer Reihe von Textknöpfen eine Leiste aus Symbolen mit kurzer
   Beschriftung. Die Symbole sind eingebettetes SVG (kein externer Abruf). */
.werkzeug-box {
  display: flex; flex-wrap: wrap; gap: var(--abstand-2);
  /* Ticket #1207 (Rückmeldung): Die Symbole stehen zentriert in der Box. */
  justify-content: center;
  padding: var(--abstand-2);
  margin: var(--abstand-3) 0 var(--abstand-2);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche-leise, rgba(255, 255, 255, .04));
}
.werkzeug {
  /* Symbol und Beschriftung mittig im Werkzeug (waagerecht und senkrecht). */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  gap: 4px;
  min-width: 84px; min-height: 64px; padding: 8px 10px;
  font: inherit; font-size: var(--schrift-mini); font-weight: 600;
  color: var(--farbe-text);
  background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-1);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.werkzeug:hover { background: var(--farbe-hover); border-color: var(--farbe-linie-sekundaer); }
.werkzeug:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.werkzeug:disabled { opacity: .55; cursor: not-allowed; }
.werkzeug-symbol {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Beschäftigt-Zustand für lange Erzeugungen (2026-11-06) ----------
   Beim Erzeugen einer neuen Version oder eines Blattes ruft der Server ein
   Sprachmodell – das dauert einige Sekunden. Solange gearbeitet wird, ist der
   Knopf gesperrt, gedimmt und zeigt eine drehende Uhr; die Beschriftung sagt
   „Erzeugt …". So entstehen keine Doppelklicks und keine mehrfachen Versionen. */

.ist-beschaeftigt,
.ist-beschaeftigt:disabled {
  opacity: .7;
  cursor: progress;
}
/* Uhr: ein Ring mit einer Lücke, der sich dreht. */
.spinner {
  display: inline-block;
  width: 15px; height: 15px;
  margin-right: 6px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spinner-drehen .8s linear infinite;
}
@keyframes spinner-drehen {
  to { transform: rotate(360deg); }
}
/* Im Werkzeug (Symbol über der Beschriftung) tritt die Uhr an die Stelle des Symbols. */
.werkzeug .spinner { width: 22px; height: 22px; margin: 0 0 2px; }
.werkzeug.ist-beschaeftigt .werkzeug-symbol { display: none; }
/* Wer „Bewegung reduzieren" eingestellt hat, bekommt einen stehenden Ring. */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: currentColor; opacity: .8; }
}

/* Ticket #1249: Die Werkzeugleiste der Material-Detailansicht hebt das
   Hauptwerkzeug (PDF) und die gefährliche Aktion (Papierkorb) hervor – wie in
   den Reitern des Klassenbereichs, nur mit zwei zusätzlichen Rollen. */
.werkzeug-akzent {
  /* Wie der Hauptknopf (`.knopf-akzent`): Leitfarbe mit dunkler Schrift. Auf der
     dunklen Fläche ist `--farbe-akzent-hell` zu dunkel für `--farbe-akzent-text`. */
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
}
.werkzeug-akzent:hover { filter: brightness(1.08); border-color: var(--farbe-akzent); }
.werkzeug-gefahr { color: var(--farbe-gefahr); }
.werkzeug-gefahr:hover {
  background: var(--farbe-fehler-flaeche);
  border-color: var(--farbe-gefahr);
  color: var(--farbe-gefahr);
}

/* Dialog für den Versand (Ticket #1207) – gleiche Form wie der Suchdialog. */
.werkzeug-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid var(--farbe-linie);
  border-top: 3px solid var(--farbe-akzent);
  border-radius: var(--radius-3);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  box-shadow: var(--schatten-2);
}
.werkzeug-dialog::backdrop { background: rgba(12, 20, 17, .68); }
.werkzeug-dialog form { display: grid; gap: var(--abstand-2); }
.werkzeug-dialog h2 { margin: 0 0 var(--abstand-2); font-size: var(--schrift-untertitel); }

/* Kontaktdaten im Fuß (Ticket #1198): eigener Block im Schullayout, damit die
   vier Felder nicht mit Farbe und Schrift verwechselt werden. */
.marke-kontakt {
  border: 0; padding: 0; margin: var(--abstand-5) 0 0;
}
.marke-kontakt legend { padding: 0; margin-bottom: var(--abstand-3); }

label { display: block; font-size: 0.84375rem; font-weight: 600; margin: 0 0 6px; }
input, select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-1);
  font: inherit;
  font-size: var(--schrift-text);
  background: var(--farbe-feld);
  color: var(--farbe-text);
}
/* Felder, die direkt unter ihrer Beschriftung stehen, bekommen den Abstand der
   Entwurfs (.f): 16 px nach unten – die Formulare im Portal sind flach aufgebaut. */
label + input, label + select, label + textarea { margin-bottom: 16px; }
input:focus, select:focus, textarea:focus {
  border-color: var(--farbe-akzent);
  box-shadow: 0 0 0 3px var(--farbe-hover);
}
textarea { min-height: 110px; resize: vertical; }

.hinweis { color: var(--farbe-text-leise); font-size: 0.84375rem; margin: 0 0 20px; }

/* Bild zum Arbeitsblatt */
.material-bild {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: var(--radius-2);
  border: 1px solid var(--farbe-linie);
  margin: var(--abstand-4) 0;
}

/* KI-Status im Kopf: Vorlage (grau) oder aktives Modell (grün) */
.ki-status { font-size: var(--schrift-mini); padding: 2px var(--abstand-2); border-radius: var(--radius-1); }
.ki-status:empty { display: none; }
.ki-vorlage { background: var(--farbe-flaeche-leise); color: var(--farbe-text-leise); border: 1px solid var(--farbe-linie); }
.ki-aktiv {
  background: var(--farbe-erfolg-flaeche); color: var(--farbe-erfolg);
  border-radius: 999px; padding: 5px 12px; font-weight: 600; font-size: 0.78125rem;
}
/* Lokale KI (qwen3.8 auf einem eigenen TUOMI-Server): sichtbar anders als die
   Cloud-Anbieter, weil es für einen selbst betriebenen Server keine
   Auftragsverarbeitung mit einem Dritten gibt – und keine Zusage zur Aufbewahrung. */
.ki-lokal {
  background: var(--farbe-warnung-flaeche); color: var(--farbe-warnung);
  border-radius: 999px; padding: 5px 12px; font-weight: 600; font-size: 0.78125rem;
}

/* Sichtbarer Fehlerhinweis (statt „es passiert nichts") */
.app-fehler {
  margin: 0;
  padding: var(--abstand-2) var(--abstand-3);
  background: var(--farbe-fehler-flaeche);
  color: var(--farbe-fehler);
  font-weight: 600;
}

/* Hinweisleiste für die öffentliche Demo (nur eingeblendet, wenn der Server sie meldet) */
.demo-hinweis {
  margin: 0;
  padding: var(--abstand-2) var(--abstand-3);
  background: var(--farbe-flaeche);
  color: var(--farbe-text-leise);
  border-bottom: 1px solid var(--farbe-linie);
  border-left: 3px solid var(--farbe-akzent);
  font-size: 0.78125rem;
}
.demo-hinweis code { font-size: inherit; }
.klein { font-size: 0.78125rem; }

.meldung { font-size: var(--schrift-klein); font-weight: 600; margin: var(--abstand-3) 0 0; }
.meldung-fehler { color: var(--farbe-fehler); }
.meldung-erfolg { color: var(--farbe-erfolg); }

.badge {
  display: inline-block; font-size: var(--schrift-mini); font-weight: 700;
  padding: 2px 9px; border-radius: 999px; background: var(--farbe-flaeche-leise);
  border: 1px solid var(--farbe-linie); color: var(--farbe-text-leise);
}
.badge-erfolg { color: var(--farbe-erfolg); border-color: currentColor; }
.badge-warnung { color: var(--farbe-warnung); border-color: currentColor; }

.liste { list-style: none; padding: 0; margin: 0; }
.liste li {
  display: flex; justify-content: space-between; gap: var(--abstand-3);
  padding: 13px 0; border-bottom: 1px solid var(--farbe-linie);
  font-size: var(--schrift-text); font-weight: 500;
}
.liste li:last-child { border-bottom: none; }
.liste .jg { color: var(--farbe-text-leise); font-size: var(--schrift-klein); }

/* Punkt 8.3 (Ticket #1356): Aufgaben unter 50 Prozent richtiger Antworten sind
   rot markiert – als Balken links und in der Zahl, nicht als grelle Fläche. */
.liste li.ist-rot {
  border-left: 3px solid #c8503c; padding-left: var(--abstand-3);
}
.liste li.ist-rot .jg { color: #e08270; font-weight: 600; }

/* ---------- Zugänge der Kinder: Code-Ausgabe und Aktionsreihe ----------
   Der Bildcode der Kinder existiert nur einmal im Klartext – in der Ausgabe
   direkt nach dem Erzeugen. Deshalb steht er dort groß: Bild, Name des Bildes
   und das Pseudonym, damit man ihn abschreiben oder drucken kann. */
.zug-codes { margin: var(--abstand-3) 0; }
.zug-code-karte { border-color: var(--farbe-akzent); }
.zug-code-karte h3 { margin: 0 0 var(--abstand-2); }
.zug-code-liste {
  list-style: none; padding: 0; margin: var(--abstand-3) 0 0;
  display: grid; gap: var(--abstand-3);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.zug-code-zeile {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche-leise);
  padding: var(--abstand-2) var(--abstand-3);
}
.zug-code-kind {
  margin: 0 0 6px; font-weight: 700; font-size: var(--schrift-text);
  letter-spacing: .02em;
}
.zug-code-bilder { display: flex; gap: 6px; }
.zug-code-bilder img {
  width: 56px; height: 56px; border-radius: 10px;
  background: #f8fafb; border: 1px solid var(--farbe-linie);
}
.zug-code-namen {
  margin: 6px 0 0; font-size: var(--schrift-klein); color: var(--farbe-text-leise);
}

/* Text und Aktionen in einer Zeile: der Text darf schrumpfen, die Knöpfe nicht. */
.liste-text { flex: 1; min-width: 0; }
.liste-aktionen { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }
.zug-liste li { align-items: center; }
.zug-liste-titel { margin: var(--abstand-5) 0 var(--abstand-3); font-size: var(--schrift-text); }
.zug-eltern { margin: var(--abstand-4) 0 0; }
.zug-eltern label { display: block; margin-bottom: 4px; }

/* ---------- Unterrichtsplanung: Formular über die volle Breite (Ticket #1229) ----------
   Die Karte „Neue Sequenz" stand in einer zweispaltigen Umhüllung neben der
   Detailkarte; rechts blieb eine leere Fläche. Jetzt nimmt sie die ganze Breite
   ein, und die Felder stehen in Zeilen nebeneinander – sonst wären die Eingaben
   unnötig breit. Unter 900 px Breite bleiben die Felder untereinander. */

.seq-wahl-spalte { align-self: center; }
.seq-hinweis-spalte > .hinweis { margin: 0; }
.seq-knopf-spalte { display: flex; align-items: flex-end; justify-content: flex-end; }
@media (max-width: 900px) {
  .seq-knopf-spalte { justify-content: flex-start; }
}

/* ---------- Formulare (Punkt 3.3, Ticket #1242) ----------
   Übersicht als Karten (Titel, Kategorie, Feldzahl) mit einem Knopf zum Öffnen;
   das ausgefüllte Formular steht in einer ruhigen Spalte, damit die Felder unter-
   und die Pflichtmarke direkt am Feld sichtbar ist. Fehlende Pflichtfelder werden
   rot umrandet und benannt – Farbe allein genügt nicht, deshalb steht der Hinweis
   zusätzlich in der Fortschrittszeile. */

.frm-kategorie {
  font-size: var(--schrift-klein); color: var(--farbe-text-leise);
  white-space: nowrap;
}

/* ---------- Schulorganisation (Punkt 3.7, Ticket #1246) ----------
   Die Übersicht nutzt die vorhandenen Dashboard-Flächen; die Detailansichten
   die vorhandenen Listen und Karten. Neu ist nur das Zielgruppen-Feldset im
   Formular und die Beschriftung des Artfilters. */
.org-filter {
  font-size: var(--schrift-klein); color: var(--farbe-text-leise);
  white-space: nowrap;
}
#org-termin-art-filter {
  flex: 0 0 auto; width: auto; min-width: 150px; max-width: 220px;
}
.org-zielgruppen {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  padding: var(--abstand-2) var(--abstand-4) var(--abstand-4);
  margin: var(--abstand-4) 0 0;
}
.org-zielgruppen legend {
  padding: 0 var(--abstand-2);
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}
.org-zielgruppen .wahl { margin: var(--abstand-1) 0; }
#org-suche { width: 100%; max-width: none; }
/* Das Suchfeld nimmt den Platz, die Kategorie-Auswahl nur so viel, wie sie braucht –
   sonst schrumpft das Feld durch `select { width: 100% }` auf einen Strich. */
#frm-suche { flex: 1 1 260px; min-width: 180px; }
#frm-kategorie { flex: 0 0 auto; width: auto; min-width: 150px; max-width: 220px; }
@media (max-width: 640px) {
  #frm-suche, #frm-kategorie { flex-basis: 100%; max-width: none; }
}

.frm-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-2); }
.frm-karte {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--abstand-3); flex-wrap: wrap;
  padding: var(--abstand-2) var(--abstand-3);
  border: 1px solid var(--farbe-linie); border-radius: var(--radius-2);
  background: var(--farbe-flaeche);
}
.frm-karte-mitte { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }

/* Die Felder des ausgefüllten Formulars: eine Spalte, großzügige Abstände. */
.frm-felder { display: grid; gap: var(--abstand-3); max-width: 720px; }
.frm-feld { display: grid; gap: var(--abstand-1); }
/* Fehlendes Pflichtfeld: roter Rahmen **und** ein Balken links – ein Ankreuzfeld
   allein am Rahmen wäre kaum zu erkennen. */
.frm-feld-fehlt input,
.frm-feld-fehlt select {
  border-color: var(--farbe-fehler);
  box-shadow: inset 0 0 0 1px var(--farbe-fehler);
}
.frm-feld-fehlt {
  border-left: 3px solid var(--farbe-fehler);
  padding-left: var(--abstand-2);
}
.frm-feld-fehlt > label { color: var(--farbe-fehler); }
.frm-wahl { font-size: var(--schrift-klein); }
.frm-vorbelegt { opacity: .85; }

/* Vorlagen-Editor: je Feld eine Zeile mit Bezeichnung, Typ, Optionen und Rest. */
.frm-v-felder { display: grid; gap: var(--abstand-3); margin-bottom: var(--abstand-3); }
.frm-editor-feld {
  display: grid; gap: var(--abstand-2);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  padding: var(--abstand-2);
  border: 1px solid var(--farbe-linie); border-radius: var(--radius-2);
  background: var(--farbe-flaeche-leise);
}
.frm-editor-rest {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--abstand-2); flex-wrap: wrap;
}
.frm-editor-rest .wahl { font-size: var(--schrift-klein); }
@media (max-width: 720px) {
  .frm-editor-feld { grid-template-columns: minmax(0, 1fr); }
  .frm-felder { max-width: none; }
}

/* ---------- Planeintrag direkt aus dem Raster (Ticket #1225, Nachtrag) ----------
   Wer den Plan bearbeiten darf, klickt auf eine Zelle und legt den Eintrag mit
   vorgegebenem Tag und vorgegebener Stunde an. Die Zelle zeigt das durch Zeiger
   und Rahmen; über Enter/Leertaste geht es auch ohne Maus. */

.std-koerper-klickbar .std-zelle { cursor: pointer; }
.std-koerper-klickbar .std-zelle:hover { box-shadow: inset 0 0 0 2px var(--farbe-akzent); }
.std-koerper-klickbar .std-zelle:focus-within { box-shadow: inset 0 0 0 2px var(--farbe-akzent); }
@media (hover: none) {
  /* Ohne Zeiger bleibt der Rahmen als Hinweis weg – die Zelle bleibt antippbar. */
  .std-koerper-klickbar .std-zelle:hover { box-shadow: none; }
}

/* ---------- Kalenderwoche mittig in der Box (Ticket #1247) ----------
   Die Leiste bestand aus drei Blätter-Knöpfen und der Wochenangabe dahinter; die
   Angabe hing rechts am Ende der Knöpfe und stand je nach Textlänge an anderer
   Stelle. Jetzt ist die Leiste ein Raster aus drei gleich breiten Bereichen: die
   Knöpfe links, die Wochenangabe in der Mitte (dadurch unabhängig von ihrer
   Länge genau mittig) und ein leerer Platz rechts, der die Mitte ausgleicht. */

.kw-reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--abstand-2);
}
.kw-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.kw-badge { justify-self: center; text-align: center; }
.kw-platz { display: block; }
/* Schmale Fenster: alles untereinander, die Wochenangabe linksbündig. */
@media (max-width: 720px) {
  .kw-reihe { grid-template-columns: minmax(0, 1fr); }
  .kw-badge { justify-self: start; }
  .kw-platz { display: none; }
}

/* ---------- Stunden- und Dienstpläne (Punkt 3.2, Ticket #1225) ----------
   Wochenraster Montag bis Freitag: links die Schulstunde mit ihrer Zeit, rechts je
   Tag die Einträge. Vertretungen und Aufsichten sind farblich **und** mit Text
   markiert – Farbe allein wäre nicht barrierefrei. Der heutige Tag ist an Kopf
   und Zellen hervorgehoben. */

.std-kopf {
  display: flex; flex-direction: column; gap: var(--abstand-3);
  margin-bottom: var(--abstand-3);
}
.std-filter > div { min-width: 0; }

.std-raster-rahmen { overflow-x: auto; margin-top: var(--abstand-2); }

.std-raster {
  width: 100%; border-collapse: collapse; font-size: var(--schrift-klein);
  min-width: 620px;
}
.std-raster caption {
  text-align: left; font-size: var(--schrift-mini); color: var(--farbe-text-leise);
  padding-bottom: var(--abstand-2);
}
.std-raster th, .std-raster td {
  border: 1px solid var(--farbe-linie);
  vertical-align: top;
  padding: 6px 8px;
}
.std-raster thead th {
  background: var(--farbe-flaeche-leise);
  font-size: var(--schrift-mini); text-transform: uppercase; letter-spacing: .05em;
  color: var(--farbe-text-leise); font-weight: 600;
}
/* Erste Spalte: die Schulstunde mit ihrer Zeit. */
.std-stunde {
  background: var(--farbe-flaeche-leise);
  text-align: left; white-space: nowrap;
  font-weight: 600; font-variant-numeric: tabular-nums;
  width: 128px;
}
.std-zelle { min-width: 96px; }
.std-leer { background: transparent; }
/* Der heutige Tag – gleiche Kennzeichnung wie im Tagesplan. */
.std-heute { background: var(--farbe-hover); }
.std-raster thead .std-heute { box-shadow: inset 0 3px 0 var(--farbe-akzent); }

.std-eintrag {
  display: grid; gap: 2px;
  padding: 5px 7px; margin-bottom: 4px;
  border: 1px solid var(--farbe-linie); border-left: 3px solid var(--farbe-akzent);
  border-radius: var(--radius-1);
  background: var(--farbe-flaeche);
}
.std-eintrag b { font-weight: 700; }
.std-zeile { font-size: var(--schrift-mini); color: var(--farbe-text-leise); }
.std-hinweis { font-style: italic; }
/* Vertretung: eigene Fläche und ein Text, der es ausspricht. */
.std-vertretung { border-left-color: var(--farbe-warnung); background: var(--farbe-warnung-flaeche); }
.std-marke {
  font-size: var(--schrift-mini); font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid currentColor;
  justify-self: start;
}
.std-marke-vertretung { color: var(--farbe-warnung); }
.std-ferien {
  display: block; font-size: var(--schrift-mini);
  text-transform: none; letter-spacing: 0; color: var(--farbe-warnung);
}

.std-abschnitt-titel {
  margin: var(--abstand-5) 0 var(--abstand-2);
  font-size: var(--schrift-text);
}
.std-aufsichten {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--abstand-2);
}
.std-aufsicht-tag {
  display: grid; gap: 3px; align-content: start;
  padding: var(--abstand-2);
  border: 1px solid var(--farbe-linie); border-radius: var(--radius-2);
  background: var(--farbe-flaeche-leise);
  font-size: var(--schrift-mini);
}
.std-aufsicht-tag b { font-size: var(--schrift-klein); }
@media (max-width: 860px) {
  .std-aufsichten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Dashboard (Tickets #1196, #1208, #1228) ----------
   Ticket #1228: Die Themenblöcke (Termine, Wochenübersicht, Dokumente) standen ohne
   sichtbare Grenze untereinander in einer Spalte. Jetzt ist jeder Block eine eigene
   Fläche mit eigener Überschrift und farbigem Merkstrich; der Kopf des Dashboards
   ist durch eine Linie abgesetzt, die beiden Aktionen stehen in einem eigenen Fuß. */

.dash-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--abstand-3); flex-wrap: wrap;
  margin-bottom: var(--abstand-4);
  padding-bottom: var(--abstand-3);
  border-bottom: 1px solid var(--farbe-linie);
}
.dash-kopf h2 { margin: 0; }
.dash-kopf .hinweis { margin: 0; }

/* Ticket #1376: Ein Raster für alle Bausteine – die Reihenfolge bestimmt die
   Konfiguration, die Breite die gewählte Größe. Vier Spalten, damit „kompakt",
   „normal" und „groß" ohne Layout-Einstellungen unterscheidbar sind. */
.dash-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--abstand-4);
  align-items: start;
}
.dash-spalte { display: grid; gap: var(--abstand-4); min-width: 0; }

.dash-block,
.wochen-uebersicht {
  background: var(--farbe-flaeche-leise);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-3);
  padding: var(--abstand-4);
  min-width: 0;
  /* „Normal" ist die halbe Breite (zwei von vier Spalten). */
  grid-column: span 2;
}

/* Die drei Größen: kompakt = eine Spalte, normal = zwei, groß = alle vier. */
.dash-block.dash-groesse-kompakt,
.wochen-uebersicht.dash-groesse-kompakt { grid-column: span 1; padding: var(--abstand-3); }
.dash-block.dash-groesse-kompakt .dash-block-titel { margin-bottom: var(--abstand-2); }
.dash-block.dash-groesse-normal,
.wochen-uebersicht.dash-groesse-normal { grid-column: span 2; }
.dash-block.dash-groesse-gross,
.wochen-uebersicht.dash-groesse-gross { grid-column: span 4; }
.dash-block-titel {
  display: flex; align-items: center; gap: var(--abstand-2);
  margin: 0 0 var(--abstand-3);
  font-size: var(--schrift-klein);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--farbe-text-leise);
}
/* Merkstrich in der Leitfarbe: gleiche Stelle, gleiche Bedeutung in jedem Block. */
.dash-block-titel::before {
  content: "";
  width: 4px; height: 16px; flex: none;
  border-radius: 2px;
  background: var(--farbe-akzent);
}

.dash-fuss {
  margin-top: var(--abstand-4);
  padding-top: var(--abstand-3);
  border-top: 1px solid var(--farbe-linie);
}
.dash-fuss .hinweis { margin: var(--abstand-2) 0 0; }

/* ---------- Tickets #1368 und #1369: Aufgaben und Kacheln im Dashboard ----------
   Aufgabe je Zeile: Text, Marken und zwei Knöpfe. Gestrichene Aufgaben bleiben
   stehen und werden nur durchgestrichen – sie sind nicht erledigt. */
/* Umbruch statt fester Spalten: Ein langer Titel und mehrere Marken dürfen den
   Text nicht zusammendrücken (er würde sonst Buchstabe für Buchstabe umbrechen). */
.dash-aufgaben { gap: var(--abstand-3); }
.dash-auf-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2) var(--abstand-3);
  align-items: center;
  padding-bottom: var(--abstand-2);
  border-bottom: 1px solid var(--farbe-linie);
}
.dash-auf-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
/* Der Text nimmt nur so viel Platz wie nötig: sonst liefe die Durchstreichung
   über die ganze Zeile hinaus und träfe leeren Raum. */
.dash-auf-zeile .liste-text { flex: 0 1 auto; min-width: 0; max-width: 100%; word-break: break-word; }
.dash-auf-zeile .hinweis { flex: 1 1 100%; margin: 0; }
.dash-auf-knoepfe { flex: 0 0 auto; margin-left: auto; flex-wrap: wrap; }
/* Durchgestrichen heißt „nicht mehr nötig" – sichtbar, aber nicht erledigt. */
.gestrichen-text {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.75;
}
.dash-auf-zeile.ist-gestrichen { opacity: 0.9; }

.dash-verschieben {
  margin-top: var(--abstand-3);
  padding: var(--abstand-3);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche-leise);
}
.dash-verschieben .zwei-spalten { margin-bottom: var(--abstand-2); }

/* Aufgaben, die aus dem Dashboard in den Tages- oder Wochenplan geschoben
   wurden (Ticket #1368). */
.dash-plan-aufgabe .dash-plan-zeit { color: var(--farbe-akzent); }
.dash-plan-aufgabe { font-style: italic; }

/* ---------- Persönliche Dashboard-Konfiguration (Ticket #1376) ----------
   Die Einstellungsseite 0.2: ausklappbare Bereiche, scrollbare Menüauswahl,
   Reihenfolge zum Ziehen und die Gestaltung je Baustein. */

.dash-abschnitt {
  margin-top: var(--abstand-4);
  padding: var(--abstand-3) var(--abstand-4);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche-leise);
}
.dash-abschnitt + .dash-abschnitt { margin-top: var(--abstand-3); }
.dash-abschnitt-titel { margin: 0; font-size: 1rem; }
/* Ticket #1374: Die Wahlfelder stecken nicht mehr hinter einem Extra-Knopf.
   Sie erscheinen, sobald die Maus über den Bereich fährt – und ebenso, sobald
   der Tastaturfokus im Bereich ist. Anklicken der Überschrift hält den Bereich
   offen (für Tastatur, Touch und zum Arbeiten ohne Maus). */
.dash-abschnitt-kopf {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  width: 100%;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--radius-2);
  min-height: 32px;
  padding: var(--abstand-2) 0;
}
.dash-abschnitt-kopf::after {
  content: "▾";
  margin-left: auto;
  color: var(--farbe-text-leise);
  transition: transform 0.15s ease;
}
.dash-abschnitt:hover .dash-abschnitt-kopf::after,
.dash-abschnitt:focus-within .dash-abschnitt-kopf::after,
.dash-abschnitt.ist-offen .dash-abschnitt-kopf::after { transform: rotate(180deg); }
.dash-abschnitt-kopf:hover { color: var(--farbe-akzent); }
.dash-abschnitt-kopf:focus-visible { outline: var(--fokus); outline-offset: 2px; }
.dash-abschnitt-inhalt {
  display: none;
  margin-top: var(--abstand-2);
}
.dash-abschnitt:hover .dash-abschnitt-inhalt,
.dash-abschnitt:focus-within .dash-abschnitt-inhalt,
.dash-abschnitt.ist-offen .dash-abschnitt-inhalt { display: block; }

.dash-suchfeld { margin-top: var(--abstand-2); }
/* Der Hinweis unter der Menüauswahl klebte am Rahmen (Ticket #1374). */
.dash-auswahl-rahmen + .hinweis,
.dash-auswahl-rahmen + [hidden] + .hinweis { margin-top: var(--abstand-2); }
.dash-auswahl-rahmen {
  max-height: 320px;
  overflow-y: auto;
  margin-top: var(--abstand-2);
  padding: var(--abstand-2) var(--abstand-3);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche);
}
.dash-auswahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--abstand-1) var(--abstand-3);
}
.dash-marke {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--farbe-akzent-hell);
  color: var(--farbe-akzent);
  font-size: var(--schrift-mini);
}

.dash-reihenfolge {
  list-style: none;
  margin: var(--abstand-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--abstand-2);
}
.dash-reihenfolge-zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  padding: var(--abstand-2) var(--abstand-3);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche);
}
.dash-reihenfolge-zeile.dash-zieht { opacity: 0.6; }
.dash-reihenfolge-zeile.dash-ziel { border-color: var(--farbe-akzent); }
.dash-griff {
  flex: 0 0 auto;
  cursor: grab;
  color: var(--farbe-text-leise);
  letter-spacing: 2px;
}
.dash-reihenfolge-name { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.dash-reihenfolge-zeile .knopf-reihe { flex: 0 0 auto; gap: var(--abstand-1); }

.dash-gestaltung { display: grid; gap: var(--abstand-2); margin-top: var(--abstand-2); }
.dash-gestaltung-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(140px, 180px) auto minmax(160px, 220px);
  gap: var(--abstand-2) var(--abstand-3);
  align-items: center;
  padding: var(--abstand-2) var(--abstand-3);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche);
}
.dash-gestaltung-name { min-width: 0; word-break: break-word; }
.dash-gestaltung-label { color: var(--farbe-text-leise); font-size: var(--schrift-klein); }
.dash-gestaltung-zeile select { width: 100%; }

/* Hervorhebung: schmaler Streifen und eine leichte Tönung. Die Textfarbe bleibt
   unverändert – die Kontraste sind deshalb dieselben wie ohne Hervorhebung. */
.dash-hervor-gold {
  border-left: 6px solid #e3b755;
  background: color-mix(in srgb, #e3b755 10%, var(--farbe-flaeche-leise));
}
.dash-hervor-blau {
  border-left: 6px solid #4f8ff3;
  background: color-mix(in srgb, #4f8ff3 10%, var(--farbe-flaeche-leise));
}
.dash-hervor-gruen {
  border-left: 6px solid #57b894;
  background: color-mix(in srgb, #57b894 10%, var(--farbe-flaeche-leise));
}
.dash-hervor-rot {
  border-left: 6px solid #e0705f;
  background: color-mix(in srgb, #e0705f 10%, var(--farbe-flaeche-leise));
}
.dash-hervor-lila {
  border-left: 6px solid #9b7fe0;
  background: color-mix(in srgb, #9b7fe0 10%, var(--farbe-flaeche-leise));
}

.dash-einstellungen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--abstand-2) var(--abstand-3);
  margin-top: var(--abstand-3);
}
.dash-einstellungen-kopf {
  grid-column: 1 / -1;
  margin: var(--abstand-2) 0 0;
  font-weight: 700;
}
.dash-einstellung {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  min-width: 0;
}
/* Das Kästchen darf nicht die ganze Spalte füllen: Das allgemeine Feld-Maß
   (Breite 100 %) gilt für Textfelder, nicht für Ankreuzfelder. */
.dash-einstellung input {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}
.dash-einstellung span { min-width: 0; word-break: break-word; }

/* ---------- Punkt 2.8 „Befragung" (Ticket #1370) ---------- */
.befr-vorlage {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-2);
  padding: var(--abstand-3);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
}
.befr-vorlage-titel { margin: 0; font-weight: 700; }
.befr-vorlage .knopf-reihe { margin-top: auto; }
.befr-marken { display: flex; flex-wrap: wrap; gap: var(--abstand-1); margin: 0; }
.befr-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2) var(--abstand-3);
  align-items: center;
  padding-bottom: var(--abstand-2);
  border-bottom: 1px solid var(--farbe-linie);
}
.befr-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.befr-zeile .liste-text { flex: 1 1 260px; min-width: 0; }
.befr-zeile .knopf-reihe { flex: 0 0 auto; margin-left: auto; flex-wrap: wrap; }
.befr-ergebnis { display: grid; gap: var(--abstand-2); margin-top: var(--abstand-3); }
.befr-ergebnis h3 { margin: var(--abstand-3) 0 0; }
.befr-zusammenfassung { margin: 0; font-weight: 600; }
.befr-frage {
  padding: var(--abstand-2) var(--abstand-3);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
}
.befr-frage-titel { margin: 0 0 4px; font-weight: 600; }
.befr-ki { margin: 0; white-space: pre-wrap; }
.befr-upload-text {
  max-height: 240px;
  overflow: auto;
  padding: var(--abstand-2);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  font-size: var(--schrift-klein);
  white-space: pre-wrap;
}

/* Mittlere Breite (Tablet): zwei Spalten – kompakt ist halb, alles andere ganz.
   Das ist die Anpassung an die Bildschirmgröße aus dem Konzept (Punkt 10). */
@media (max-width: 1200px) {
  .dash-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-block.dash-groesse-kompakt,
  .wochen-uebersicht.dash-groesse-kompakt,
  .dash-block.dash-groesse-normal,
  .wochen-uebersicht.dash-groesse-normal { grid-column: span 1; }
  .dash-block.dash-groesse-gross,
  .wochen-uebersicht.dash-groesse-gross { grid-column: span 2; }
  .dash-gestaltung-zeile {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 160px);
  }
  .dash-gestaltung-name { grid-column: 1 / -1; }
}

/* Schmale Geräte (Smartphone): eine Spalte, alle Größen gleich breit. */
@media (max-width: 900px) {
  .dash-raster { grid-template-columns: minmax(0, 1fr); }
  .dash-block,
  .dash-block.dash-groesse-kompakt,
  .wochen-uebersicht.dash-groesse-kompakt,
  .dash-block.dash-groesse-normal,
  .wochen-uebersicht.dash-groesse-normal,
  .dash-block.dash-groesse-gross,
  .wochen-uebersicht.dash-groesse-gross { grid-column: span 1; }
  .dash-gestaltung-zeile { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Wochenübersicht im Dashboard (Ticket #1208) ----------
   Montag bis Freitag untereinander: links der Tag mit Datum, rechts die Aufgaben.
   Der heutige Tag ist hervorgehoben, damit man die Stelle schnell findet.
   Ticket #1228: Die Übersicht ist ein eigener Block (Fläche und Abstand kommen
   aus der gemeinsamen Regel oben), deshalb entfällt der Abstand nach oben. */
.wochen-uebersicht { margin-top: 0; }
.wochen-todos { list-style: none; padding: 0; margin: var(--abstand-2) 0 0; }
.wochen-tag {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--abstand-3);
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--radius-1);
  border-bottom: 1px solid var(--farbe-linie);
  font-size: var(--schrift-klein);
}
.wochen-tag:last-child { border-bottom: none; }
.wochen-tag.wochen-heute {
  background: var(--farbe-hover);
  border-left: 3px solid var(--farbe-akzent);
  border-bottom-color: transparent;
}
.wochen-tag-name { font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.wochen-tag-datum {
  font-weight: 400; font-size: var(--schrift-mini); color: var(--farbe-text-leise);
  font-variant-numeric: tabular-nums;
}
.wochen-aufgaben { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.wochen-aufgaben li { display: flex; gap: 8px; line-height: 1.35; }
.wochen-punkt { color: var(--farbe-akzent); }
@media (max-width: 560px) {
  .wochen-tag { grid-template-columns: 1fr; gap: 4px; }
  .wochen-tag-name { flex-direction: row; gap: 8px; align-items: baseline; }
}

/* Ticket #1200: Die Dokument-Kästen rechts im Dashboard sind alle gleich breit.
   Vorher saß in jeder Zeile ein Knopf, der sich nach der Länge seines Titels
   richtete – dadurch standen die Kästen in unterschiedlichen Breiten da. Jetzt
   füllt jeder Kasten seine Spalte, der Titel steht links und bricht bei Bedarf um. */
.dashboard-dokument {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.tabelle { width: 100%; border-collapse: collapse; font-size: var(--schrift-klein); }
/* Waagerechtes Scrollen, wenn eine Tabelle breiter ist als die Karte
   (Ticket #1341: die Klassentabelle bekommt je Fach eine Spalte). */
.tabelle-rolle { overflow-x: auto; margin: 0 0 var(--abstand-3); }
.tabelle th, .tabelle td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--farbe-linie);
}
.tabelle th {
  font-size: var(--schrift-mini); text-transform: uppercase; letter-spacing: .06em;
  color: var(--farbe-text-leise); font-weight: 600;
}
.tabelle tbody tr:last-child td { border-bottom: none; }

/* (Die Reiterleiste der großen Ansichten ist durch den Baum in der Seitenleiste
   ersetzt. Die Karteireiter je Kind stehen weiter unten – Ticket #1102.) */

.abschnitt { margin-top: 26px; padding-top: var(--abstand-4); border-top: 1px solid var(--farbe-linie); }

/* ---------- Karteireiter je Kind (Ticket #1102) ----------
   Die Themenbereiche eines Kindes (Beobachtungen, Noten, Förderung, Zeugnis,
   Datenauskunft) standen untereinander und machten die Seite lang. Jetzt liegen
   sie hinter Reitern: oben die Leiste, darunter genau ein Bereich als Karte.
   Der Baum in der Seitenleiste bleibt unverändert – er wechselt weiterhin die
   großen Ansichten. */

/* Der umschließende Block trug bisher die Trennlinie des Abschnitts; über der
   Reiterleiste ist sie im Entwurf nicht vorgesehen. */
#beobachtung-bereich.abschnitt { margin-top: 18px; padding-top: 0; border-top: 0; }

.kind-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.kind-reiter-knopf {
  font: inherit;
  font-size: var(--schrift-klein);
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--farbe-text-leise);
  cursor: pointer;
}
.kind-reiter-knopf:hover { background: var(--farbe-hover); color: var(--farbe-text); }
.kind-reiter-knopf[aria-selected="true"] {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
  font-weight: 600;
}
.kind-reiter-knopf[aria-selected="true"]:hover {
  background: var(--farbe-akzent-dunkel);
  border-color: var(--farbe-akzent-dunkel);
}
.kind-reiter-knopf:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }

/* Genau ein Bereich ist sichtbar; er sieht aus wie eine Karte des Entwurfs. */
.kind-panel {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie);
  border-top: 3px solid var(--farbe-akzent);
  border-radius: var(--radius-3);
  padding: 22px;
}

/* Trennlinie wie im Entwurf (hr) */
hr { border: 0; border-top: 1px solid var(--farbe-linie); margin: 26px 0; }

.versteckt { display: none !important; }

/**
 * Das `hidden`-Attribut muss auch dann wirken, wenn eine Klasse ein `display`
 * setzt.
 *
 * Browser-Standard ist `[hidden] { display: none }` – aber jede explizite
 * `display`-Regel derselben Priorität sticht sie aus. `#chat-verlauf` und
 * `.suche-feld-reihe` setzen `display: grid`; ein `hidden = true` blieb dort
 * **wirkungslos**, der Bereich stand weiter im Dialog. (Gefunden im Browser,
 * nicht im Test: Das DOM meldete „hidden", sichtbar war das Feld trotzdem.)
 *
 * Deshalb einmal zentral statt an jeder Stelle einzeln.
 */
[hidden] { display: none !important; }
.rechts { margin-left: auto; }
.monospace { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }

/* ---------- Touch-Bedienung ----------
   Ziele mindestens 44 × 44 px (Apple/Android-Empfehlung), Hover nur wo es
   wirklich einen Zeiger gibt, und Eingabefelder mit 16px gegen den iOS-Zoom. */

button, .knopf, .symbol-knopf, .bib-reiter, .baum-eintrag, .baum-gruppe {
  min-height: 44px;
  touch-action: manipulation;
}
/* 16 px auf dem Smartphone verhindert das automatische Zoomen von iOS; auf
   größeren Geräten gilt die Schriftgröße des Entwurfs (15 px). */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }
}
@media (hover: hover) and (pointer: fine) {
  .bib-eintrag:hover { border-color: var(--farbe-akzent); }
}

/* Kopfzeile der Listenansichten (Bibliothek, Papierkorb)
   Ticket #1227: mit Trennlinie und etwas Luft – der Bereich wirkt dadurch
   aufgeräumter als eine Überschrift, die direkt an der Liste klebt. */
.bib-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--abstand-3); flex-wrap: wrap; margin-bottom: var(--abstand-3);
  padding-bottom: var(--abstand-3); border-bottom: 1px solid var(--farbe-linie);
}
.bib-kopf h2 { margin: 0; }
.bib-an-zahl { font-weight: 400; color: var(--farbe-text-leise); }

/* Zähler im Baum (Bibliothek, Papierkorb) */
.baum-zahl { margin-left: auto; font-size: 0.75rem; opacity: .8; color: inherit; }
.baum-eintrag[aria-current="page"] .baum-zahl { color: var(--farbe-akzent-text); opacity: .85; }
.bib-korb-seit { background: var(--farbe-akzent-hell); border-color: var(--farbe-warnung); color: var(--farbe-warnung); }

/* ---------- Klickbare Listeneinträge ----------
   Der Eintrag selbst ist die Schaltfläche: Klick oder Doppelklick öffnet ihn,
   Enter/Leertaste ebenso. Deshalb sieht er aus wie eine Zeile, verhält sich
   aber wie ein Knopf (Zeiger, Fokusrahmen). */

.eintrag-klickbar { cursor: pointer; }
.eintrag-klickbar:focus-visible { outline: var(--fokus); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .eintrag-klickbar:hover { background: var(--farbe-hover); }
  .eintrag-klickbar:hover span:first-child { text-decoration: underline; }
}

/* ---------- Materialbibliothek (Übersicht) ----------
   Ticket #1227: Der Hauptbereich war eine schlichte Liste grauer Zeilen. Jetzt ist
   er eine Sammlung von Karten: ruhiger Kopf mit Trennlinie (oben), eine
   Werkzeugleiste für Suche und Auswahl und Einträge mit eigener Fläche, Rand,
   Schatten und Vorschau. Der Eintrag hebt sich beim Überfahren leicht an – nur wo
   es einen Zeiger gibt und nur ohne „Bewegung reduzieren". */

/* Werkzeugleiste: Suche, „alle" und Zähler stehen zusammen in einer ruhigen Fläche
   statt frei zwischen Überschrift und Liste. */
.bib-leiste {
  display: flex; align-items: center; gap: var(--abstand-3);
  margin: 0 0 var(--abstand-4);
  padding: var(--abstand-2) var(--abstand-3);
  background: var(--farbe-flaeche-leise);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
}
.bib-suche {
  flex: 1; min-width: 0; font: inherit; font-size: var(--schrift-klein);
  padding: 10px var(--abstand-3); border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-1); background: var(--farbe-feld); color: var(--farbe-text);
}
.bib-suche:focus-visible { border-color: var(--farbe-akzent); }
.bib-alle { display: flex; align-items: center; gap: var(--abstand-1); font-size: var(--schrift-klein); }
.bib-zaehler {
  font-size: var(--schrift-mini); color: var(--farbe-text-leise); white-space: nowrap;
  padding: 4px 10px; border-radius: 999px;
  background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie);
  font-variant-numeric: tabular-nums;
}

.bib-aktionen {
  display: flex; align-items: center; gap: var(--abstand-2); flex-wrap: wrap;
  padding: var(--abstand-2) var(--abstand-3); margin-bottom: var(--abstand-3);
  background: var(--farbe-flaeche-leise); border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2); font-size: var(--schrift-klein); font-weight: 600;
}

.bib-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand-3); }

.bib-eintrag {
  display: flex; align-items: center; gap: var(--abstand-3);
  padding: var(--abstand-3) var(--abstand-4);
  border: 1px solid var(--farbe-linie); border-radius: var(--radius-3);
  background: linear-gradient(180deg, var(--farbe-flaeche), var(--farbe-flaeche-leise));
  box-shadow: var(--schatten-1);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bib-eintrag:hover { border-color: var(--farbe-akzent); }
.bib-eintrag:focus-within { border-color: var(--farbe-akzent); box-shadow: var(--schatten-2); }
.bib-gewaehlt { background: var(--farbe-flaeche-leise); box-shadow: inset 3px 0 0 var(--farbe-akzent); }

.bib-wahl { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--farbe-akzent); }

.bib-vorschau {
  flex-shrink: 0; width: 76px; height: 52px; object-fit: cover;
  border-radius: var(--radius-2); border: 1px solid var(--farbe-linie);
  background: var(--farbe-flaeche-leise);
}

.bib-mitte { flex: 1; min-width: 0; display: grid; gap: 6px; }

.bib-titel {
  font: inherit; font-size: var(--schrift-text); font-weight: 700; text-align: left;
  border: 0; background: transparent; color: var(--farbe-text); cursor: pointer;
  padding: 0; letter-spacing: -0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bib-titel:hover { color: var(--farbe-akzent); text-decoration: underline; }

.bib-kennung { display: flex; flex-wrap: wrap; gap: 6px; }
.bib-marke {
  font-size: var(--schrift-mini); padding: 2px 8px; border-radius: 999px;
  background: var(--farbe-flaeche-leise); color: var(--farbe-text-leise);
  border: 1px solid var(--farbe-linie);
}
.bib-ki { background: var(--farbe-erfolg-flaeche); color: var(--farbe-erfolg); border-color: currentColor; }
.bib-vorlage { background: var(--farbe-flaeche-leise); }

.bib-aktionen-einzeln { flex-shrink: 0; display: flex; gap: var(--abstand-1); }

/* Anheben nur mit Zeiger und nur ohne „Bewegung reduzieren". */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .bib-eintrag:hover { transform: translateY(-1px); box-shadow: var(--schatten-2); }
}

/* Kleine Symbol-Schaltfläche (Löschen) – Beschriftung nur im Tooltip/Aria-Label */
.symbol-knopf {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: var(--schrift-klein); line-height: 1; cursor: pointer;
  border: 1px solid var(--farbe-linie); border-radius: 9px;
  background: var(--farbe-flaeche); color: var(--farbe-text-leise);
}
.symbol-knopf:hover, .symbol-knopf:focus-visible { border-color: var(--farbe-fehler); color: var(--farbe-fehler); }
.symbol-gefahr:hover, .symbol-gefahr:focus-visible { background: var(--farbe-fehler); color: var(--farbe-hintergrund); }

@media (max-width: 620px) {
  .bib-vorschau { display: none; }
}

/* ---------- Smartphone: alles untereinander, große Ziele ---------- */

@media (max-width: 640px) {
  .huelle { padding: var(--abstand-4) var(--abstand-4) 80px; }

  /* Kopf: Marke und Abmelden umbrechen statt quetschen */
  .kopf {
    flex-wrap: wrap; gap: var(--abstand-2); padding: var(--abstand-3);
    padding-bottom: calc(var(--abstand-3) + var(--welle-hoehe));
  }
  /* Vier Knöpfe (Suche, Senden, Darstellung, Abmelden) plus Status: lieber
     umbrechen als aus dem Bildschirm schieben. */
  .kopf-rechts { width: 100%; justify-content: space-between; flex-wrap: wrap; row-gap: var(--abstand-2); }

  .inhalt-kopf { flex-direction: column; align-items: stretch; gap: var(--abstand-2); }
  .inhalt-kopf h1 { font-size: 1.35rem; }
  .menue-knopf { width: 100%; justify-content: center; min-height: 48px; }

  /* Bibliothek: Zeile wird zum Block, Aktionen unten rechts */
  .bib-leiste { flex-wrap: wrap; gap: var(--abstand-2); }
  .bib-suche { flex-basis: 100%; min-height: 44px; }
  .bib-eintrag { flex-wrap: wrap; align-items: flex-start; gap: var(--abstand-2); padding: var(--abstand-3); }
  .bib-wahl { width: 22px; height: 22px; }
  .bib-mitte { flex-basis: calc(100% - 34px); }
  .bib-titel { white-space: normal; font-size: var(--schrift-klein); }
  .bib-aktionen-einzeln { margin-left: auto; }
  .symbol-knopf { width: 44px; height: 44px; font-size: 1rem; }

  /* Aktionsleiste klebt unten, damit sie mit dem Daumen erreichbar ist */
  .bib-aktionen {
    position: sticky; bottom: 0; z-index: 5;
    box-shadow: 0 -2px 10px rgba(0,0,0,.08);
  }
  .bib-aktionen .knopf { flex: 1; min-height: 44px; }

  /* Tabellen (Audit) als Liste: Überschrift wird zum Feldlabel */
  .tabelle thead { display: none; }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle tr {
    border: 1px solid var(--farbe-linie); border-radius: var(--radius-2);
    padding: var(--abstand-2) var(--abstand-3); margin-bottom: var(--abstand-2);
    background: var(--farbe-flaeche);
  }
  .tabelle td { border: 0; padding: 2px 0; font-size: var(--schrift-klein); }
  .tabelle td:first-child { font-weight: 700; }

  /* Formulare: volle Breite, große Felder */
  .zwei { grid-template-columns: 1fr; }
  .knopf-reihe { flex-direction: column; }
  .knopf-reihe .knopf { width: 100%; min-height: 44px; }
  textarea { min-height: 96px; }

  /* Wochenansicht: eine Spalte */
  .woche { grid-template-columns: 1fr; }

  /* Seitenleiste als Vollbild-Schublade */
  .seitenleiste { width: min(88vw, 320px); padding-bottom: 64px; }
  .baum-eintrag, .baum-gruppe { min-height: 46px; font-size: 1rem; }
}

/* ---------- Detailansicht eines Arbeitsblatts ---------- */

.detail-kopf {
  display: flex; align-items: flex-start; gap: var(--abstand-3);
  margin-bottom: var(--abstand-3); flex-wrap: wrap;
}
.detail-titel { min-width: 0; }
.detail-titel h2 { margin: 0 0 2px; }

.detail-raster {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--abstand-4); align-items: start; margin-top: var(--abstand-4);
}
.detail-bild { margin: 0; }
.detail-bild img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-2); border: 1px solid var(--farbe-linie);
  background: var(--farbe-flaeche-leise);
}
.detail-bild figcaption { margin-top: var(--abstand-1); }
.detail-aufgaben h3 { margin-top: 0; }

/* Aufgaben: Nummer links, Text rechts, Typ-Marke am Ende.
   `pre-line` erhält Zeilenumbrüche aus dem Modell (Unterpunkte, Lückenzeilen). */
.aufgaben { margin: 0; padding-left: var(--abstand-5); display: grid; gap: var(--abstand-3); }
.aufgaben li { line-height: 1.55; padding-left: 2px; }
.aufgaben li .bib-marke { margin-left: var(--abstand-2); }
.aufgabe-text { white-space: pre-line; display: inline; }

/* Lösungen: Aufzählung ohne Nummer – die Aufgabennummer steht als Text davor. */
.loesungen { margin: var(--abstand-2) 0 0; padding-left: var(--abstand-5); display: grid; gap: var(--abstand-2); }
.loesungen li { line-height: 1.5; }

.detail-loesungen {
  margin-top: var(--abstand-4);
  border: 1px solid var(--farbe-linie); border-radius: var(--radius-2);
  background: var(--farbe-flaeche-leise); padding: var(--abstand-2) var(--abstand-3);
}
.detail-loesungen summary {
  cursor: pointer; font-weight: 600; font-size: var(--schrift-klein);
  padding: var(--abstand-1) 0;
}
.detail-loesungen[open] summary { margin-bottom: var(--abstand-2); }

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

/* ---------- Stilhandbuch (design.html) ---------- */

/* Rahmen für das Baumbespiel im Stilhandbuch */
.design-baum {
  max-width: 320px; padding: var(--abstand-3);
  border: 1px solid var(--farbe-linie); border-radius: var(--radius-2);
  background: var(--farbe-flaeche); margin-bottom: var(--abstand-4);
}

.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--abstand-3); }
.swatch {
  border: 1px solid var(--farbe-linie); border-radius: var(--radius-2);
  overflow: hidden; font-size: var(--schrift-mini); background: var(--farbe-flaeche);
}
.swatch span { display: block; height: 46px; }
.swatch code { display: block; padding: 6px 8px; border: 0; background: transparent; }
.sw-akzent { background: var(--farbe-akzent); }
.sw-akzent-hell { background: var(--farbe-akzent-hell); }
.sw-akzent-dunkel { background: var(--farbe-akzent-dunkel); }
.sw-hintergrund { background: var(--farbe-hintergrund); }
.sw-flaeche { background: var(--farbe-flaeche); }
.sw-linie { background: var(--farbe-linie); }
.sw-text { background: var(--farbe-text); }
.sw-akzent-text { background: var(--farbe-akzent-text); }
.sw-navigation { background: var(--farbe-navigation); }
.sw-navigation-text { background: var(--farbe-navigation-text); }
.sw-feld { background: var(--farbe-feld); }
.sw-linie-sekundaer { background: var(--farbe-linie-sekundaer); }
.sw-erfolg-flaeche { background: var(--farbe-erfolg-flaeche); }
.sw-warnung-flaeche { background: var(--farbe-warnung-flaeche); }
.sw-fehler-flaeche { background: var(--farbe-fehler-flaeche); }
.sw-erfolg { background: var(--farbe-erfolg); }
.sw-warnung { background: var(--farbe-warnung); }
.sw-fehler { background: var(--farbe-fehler); }

.proben { display: flex; flex-wrap: wrap; gap: var(--abstand-3); align-items: center; }
.balken { display: flex; gap: var(--abstand-2); align-items: flex-end; }
.balken div { background: var(--farbe-akzent); border-radius: 4px 4px 0 0; width: 26px; }
.b1 { height: 4px; } .b2 { height: 8px; } .b3 { height: 12px; }
.b4 { height: 16px; } .b5 { height: 24px; } .b6 { height: 32px; }

/* ---------- Arbeitsblatt (Export/ Druck) ---------- */

/* Auf Papier gibt es keine dunkle Darstellung: Der Ausdruck setzt die Farben
   fest, statt die Design-Variablen zu erben. Vorher waren Hinweise im Ausdruck
   fast unsichtbar (hellgrau auf weiß), wenn die Oberfläche dunkel eingestellt war. */
.arbeitsblatt {
  background: #ffffff; color: #1c1714;
  --farbe-text: #1c1714;
  --farbe-text-leise: #55524e;
  --farbe-linie: #d8ccc2;
  --farbe-akzent: #993300;
}
.arbeitsblatt main { max-width: 210mm; margin: 0 auto; padding: 16mm 15mm; }
.arbeitsblatt .blatt-kopf { border-bottom: 2px solid #1c1714; padding-bottom: 8px; margin-bottom: 18px; }
.arbeitsblatt h1 { font-size: 1.25rem; margin: 0 0 6px; }
.arbeitsblatt h2 { font-size: 1.05rem; margin: 24px 0 8px; }
.arbeitsblatt h3 { font-size: .95rem; margin: 20px 0 6px; }
/* Bild zum Arbeitsblatt (Nebenbefund): steht im Ausdruck über den Aufgaben,
   so breit wie der Satzspiegel und ohne Umbrechen. */
.arbeitsblatt .blatt-bild { margin: 0 0 16px; }
.arbeitsblatt .blatt-bild img {
  display: block; width: 100%; height: auto;
  border: 1px solid #d8ccc2; border-radius: 6px;
}
/* QR-Code im Ausdruck (Ticket #1201): unter dem Material, groß genug zum Scannen. */
.arbeitsblatt .blatt-qr { page-break-inside: avoid; margin-top: 26px; }
.arbeitsblatt .blatt-qr svg { display: block; width: 120px; height: 120px; margin-top: 8px; }
.arbeitsblatt .aufgaben { padding-left: 22px; }
.arbeitsblatt .aufgaben li { margin-bottom: 12px; font-size: .95rem; line-height: 1.7; }
.arbeitsblatt .loesungen { page-break-before: always; }
.arbeitsblatt footer { border-top: 1px solid #d8ccc2; margin-top: 26px; padding-top: 6px; }

@media print {
  .arbeitsblatt main { padding: 0; max-width: none; }
  .arbeitsblatt .loesungen { page-break-before: always; }
}

/* ---------- Einheitenlisten (Ticket #1213) ----------
   „Ungeplante Einheiten" (Wochenansicht) und „Einheiten ohne Termin" (Tagesplan)
   standen als `flex` mit `space-between`: Jede Zeile bekam ihre eigenen
   Spaltenbreiten, je nachdem wie lang der Titel war – das Fach brach mitten im
   Wort („Mathemati|k"), und nichts stand untereinander. Jetzt ein Raster mit
   festen Spalten: Titel dehnt sich, Fach und Datum haben immer dieselbe Breite,
   alle Zeilen beginnen an derselben Kante. */
.einheiten-liste > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px 176px;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-3);
}
.einheiten-liste > li > span:first-child { min-width: 0; }
.einheiten-liste .jg { white-space: nowrap; }
.einheiten-liste input[type="date"] { width: 100%; min-width: 0; }
@media (max-width: 720px) {
  .einheiten-liste > li { grid-template-columns: minmax(0, 1fr) 150px; }
  .einheiten-liste > li > input[type="date"] { grid-column: 1 / -1; }
}

/* ---------- Wochenansicht ---------- */

/* Fünf Spalten (Montag bis Freitag), die sich **die Breite der Karte teilen** –
   vorher standen die Tage in einer festen Spur und die letzte Spalte lief über den
   Rand (Ticket #1213). Ticket #1224: Samstag und Sonntag sind entfallen, deshalb
   sind es fünf statt sieben Spalten – jede Spalte wird dadurch breiter. */
.woche { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--abstand-2); margin-top: var(--abstand-4); }
@media (max-width: 860px) { .woche { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Ticket #1215: Der Tag ist ein Block wie im Tagesplan – Kopf mit Trennlinie,
   Inhalt, und „frei" sitzt unten. So beginnen die Einheiten in allen Spalten auf
   derselben Höhe, und leere Tage sehen nicht „abgeschnitten" aus. */
.woche-tag {
  display: flex;
  flex-direction: column;
  background: var(--farbe-flaeche-leise);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  padding: var(--abstand-2);
  min-height: 130px;
}
.woche-kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 4px;
  font-size: var(--schrift-mini);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--farbe-text-leise);
  padding-bottom: 6px;
  margin-bottom: var(--abstand-2);
  border-bottom: 1px solid var(--farbe-linie);
}
.woche-kopf b { font-weight: 700; }
.woche-inhalt { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.woche-frei {
  margin: auto 0 0;
  font-size: var(--schrift-mini);
  color: var(--farbe-text-leise);
  font-style: italic;
}
/* „erledigt" und Datum untereinander – die Spalte ist nur ~120 px breit. */
.woche-aktionen { display: flex; gap: 4px; margin-top: 6px; }
.woche-aktionen .knopf-klein { width: 100%; padding: 5px 6px; }
/* Datumsfeld in der schmalen Spalte: kleinere Schrift und engere Polsterung,
   damit das Datum vollständig sichtbar bleibt (sonst stand dort „11/0" und das
   Kalendersymbol – Ticket #1215). */
/* Das Feld steckt **im** Einheitenkasten, nicht direkt in der Spalte – deshalb
   ein Nachfahren-Selektor (vorher `.woche-tag > input`, das nie griff). */
.woche-tag input[type="date"] {
  width: 100%; min-width: 0;
  margin-top: 4px;
  /* 10 px und enge Polsterung: Das native Feld behält Platz für das
     Kalendersymbol, sonst wird die letzte Ziffer abgeschnitten („11/02/202"). */
  padding: 3px 3px;
  font-size: 10px;
}
.woche-einheit {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  background: var(--farbe-flaeche); border: 1px solid var(--farbe-linie); border-left: 3px solid var(--farbe-akzent);
  border-radius: var(--radius-1); padding: 6px 7px; margin-bottom: var(--abstand-2); font-size: var(--schrift-mini);
  color: var(--farbe-text);
}
.woche-einheit b { display: block; font-size: var(--schrift-klein); margin-bottom: 2px; }
.woche-einheit span { display: block; color: var(--farbe-text-leise); }
.woche-einheit:hover { background: var(--farbe-flaeche-leise); }

/* ---------- Erledigt-Markierung (Ticket #1157) ----------
   Erledigte Einheiten bleiben sichtbar, treten aber zurück. Die Durchstreichung
   sitzt am Titel, damit die Bedienelemente (erledigt, Datum) klar bleiben.
   Die Mindesthöhe der Knöpfe bleibt bei 44px – Touch-Bedienung gilt weiter. */
.ist-erledigt { opacity: .6; }
.ist-erledigt .woche-einheit-titel b,
.ist-erledigt > b { text-decoration: line-through; }

.knopf-klein { font-size: var(--schrift-mini); padding: 6px 10px; }

/* Der Titel einer Wocheneinheit ist die Schaltfläche zum Öffnen der Sequenz. */
.woche-einheit-titel {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0;
  color: inherit; font: inherit; cursor: pointer;
}
.woche-einheit-titel:hover { text-decoration: underline; }

/* ---------- Seitenansicht des Dokuments (Ticket #1176) ----------
   Der Rahmen zeigt die Seite so, wie sie gedruckt wird; gedruckt wird
   ausschließlich sein Inhalt. Deshalb bleibt er am Bildschirm weiß. */
.vorschau-rahmen {
  width: 100%; height: 620px; border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2); background: #fff; margin-top: 10px;
}
@media (max-width: 760px) { .vorschau-rahmen { height: 460px; } }

/* QR-Code unter dem Material (Tickets #1174 und #1201). Der Code braucht einen
   hellen Grund und eine ruhige Umgebung – in der dunklen Darstellung sonst nicht
   scannbar. Das SVG bringt weiße Fläche und Ruhezone mit; der Rahmen gibt Halt. */
.qr-bereich { text-align: center; }
.qr-bild {
  display: block;
  width: 220px; height: 220px;
  margin: var(--abstand-3) auto 0;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-1);
}

/* ---------- Suche in der Kopfleiste (Tickets #1178, #1212) ----------
   Vorher ein kleiner Knopf mit Lupe, jetzt ein richtiges Suchfeld: Die Suche ist
   der schnellste Weg zu allem, was die Schule hat – als Feld ist sie sofort als
   Eingabe zu erkennen, und das Lupensymbol ist entfallen (so im Ticket #1212
   gefordert). Die drei Bereiche im Dialog sind bewusst als Radiogruppe sichtbar:
   „Meine Unterlagen", „Schulbibliothek", „Web (mit KI)".

   Das Feld liegt als Pille im Kopf: eigener Grund, Leitfarbe beim Fokus, der
   Knopf rechts sitzt in derselben Rundung. */
.kopf-suche {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  flex: 0 1 340px;
  min-width: 190px;
  padding: 3px 4px 3px 15px;
  background: var(--farbe-feld);
  border: 1px solid var(--farbe-linie-sekundaer);
  border-radius: 999px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kopf-suche:focus-within {
  border-color: var(--farbe-akzent);
  box-shadow: 0 0 0 3px var(--farbe-hover);
}
.kopf-suche input {
  flex: 1 1 auto;
  align-self: center;
  width: auto;
  min-width: 0;
  border: 0;
  padding: 7px 0;
  /* `margin: 0` ist hier **nötig**: Die Regel `label + input` gibt Feldern unter
     einer Beschriftung 16 px Abstand nach unten. Unser Feld folgt der
     Vorlese-Beschriftung (.nur-vorlesen) und hing dadurch 8 px zu hoch – der
     Text stand nicht mittig in der Pille (Rückmeldung Holger Ernst, #1212). */
  margin: 0;
  background: transparent;
  font-size: var(--schrift-klein);
  line-height: 1.4;
  color: var(--farbe-text);
}
.kopf-suche input::placeholder { color: var(--farbe-text-leise); opacity: .9; }
/* Der Fokus bleibt sichtbar: Der Ring liegt innen in der Pille, damit er nicht
   doppelt zum Fokusrahmen des Feldes wirkt – aber er ist da (kein `outline: none`). */
.kopf-suche input:focus {
  border: 0;
  box-shadow: none;
  outline: 2px solid var(--farbe-akzent);
  outline-offset: -2px;
  border-radius: 999px;
}
.kopf-suche-knopf {
  flex: none;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: var(--schrift-klein);
}

/* Nur für Vorleseprogramme sichtbar – Beschriftungen, die den Platz stören
   würden, aber vorgelesen werden müssen. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Auf schmalen Fenstern bekommt das Feld eine eigene Zeile über den Knöpfen. */
@media (max-width: 900px) {
  .kopf-suche { flex: 1 1 100%; order: -1; }
}
.suche-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(86vh, 820px);
  padding: 0;
  border: 1px solid var(--farbe-linie);
  border-top: 3px solid var(--farbe-akzent);
  border-radius: var(--radius-3);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  box-shadow: var(--schatten-2);
  overflow: auto;
}
.suche-dialog::backdrop {
  background: rgba(12, 20, 17, .68);
}
.suche-form { display: grid; gap: var(--abstand-3); padding: 22px; }
.suche-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: var(--abstand-3);
}
.suche-kopf h2 { margin: 0; font-size: var(--schrift-untertitel); }
.suche-feld-reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--abstand-2) var(--abstand-3);
}
.suche-feld-reihe label { grid-column: 1 / -1; margin: 0; }
.suche-feld-reihe input { margin: 0; min-height: 44px; }
.suche-feld-reihe .knopf { min-height: 44px; }
.suche-bereich {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  padding: var(--abstand-3);
  margin: 0;
}
.suche-bereich legend { padding: 0 var(--abstand-1); font-size: var(--schrift-klein); font-weight: 700; }
.suche-wahl-reihe { display: flex; flex-wrap: wrap; gap: var(--abstand-2) var(--abstand-4); }
.suche-wahl { display: inline-flex; align-items: center; gap: var(--abstand-2); font-size: var(--schrift-klein); }
.suche-wahl input { width: 18px; height: 18px; margin: 0; accent-color: var(--farbe-akzent); }
.suche-ergebnisse { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--abstand-2); }
.suche-treffer {
  border: 1px solid var(--farbe-linie);
  border-left: 3px solid var(--farbe-akzent);
  border-radius: var(--radius-2);
  padding: var(--abstand-3);
  background: var(--farbe-flaeche-leise);
}
.suche-treffer-titel {
  display: block; width: 100%; text-align: left; font: inherit; font-weight: 700;
  color: var(--farbe-text); background: none; border: 0; padding: 0; cursor: pointer;
}
.suche-treffer-titel:hover, .suche-treffer-titel:focus-visible { text-decoration: underline; }
.suche-treffer-meta { margin: 4px 0 0; font-size: var(--schrift-mini); color: var(--farbe-text-leise); }
/* Gefundene Wörter hervorheben – im Titel und im Auszug. Kontrast: dunkler Text
   auf der Leitfarbe, geprüft von tools/a11y.mjs über die Token. */
.suche-treffer mark {
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 700;
}
.suche-treffer-auszug { margin: var(--abstand-2) 0 0; font-size: var(--schrift-klein); }
.suche-marke {
  display: inline-block; margin-left: var(--abstand-2); padding: 1px 7px;
  border: 1px solid var(--farbe-linie-sekundaer); border-radius: 999px;
  font-size: var(--schrift-mini); color: var(--farbe-text-leise);
}
.suche-ki {
  border: 1px solid var(--farbe-akzent);
  border-radius: var(--radius-2);
  padding: var(--abstand-3);
  background: var(--farbe-akzent-hell);
}
.suche-ki h3 { margin: 0 0 var(--abstand-2); font-size: var(--schrift-klein); }
.suche-ki p { margin: 0; white-space: pre-wrap; }
.suche-ki #suche-ki-hinweis { margin-top: var(--abstand-2); }
.suche-extern { font-size: var(--schrift-mini); color: var(--farbe-text-leise); margin: 0; }

/* ---------- Chat mit Belegen ----------
   Der Chat liegt im Suchdialog, weil die Lehrkraft dort sucht. Er braucht mehr
   Breite als die Trefferliste – deshalb ein eigener Dialogzustand. */
.suche-dialog.hat-chat {
  width: min(920px, calc(100vw - 32px));
}
.chat { display: grid; gap: var(--abstand-3); }
.chat-titel { margin: 0; font-size: var(--schrift-klein); font-weight: 700; }
.chat-transparenz {
  margin: 0; padding: var(--abstand-2) var(--abstand-3);
  border-left: 3px solid var(--farbe-akzent);
  border-radius: var(--radius-1);
  background: var(--farbe-flaeche-leise);
  font-size: var(--schrift-mini); color: var(--farbe-text-leise);
}
.chat-zitat { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--farbe-text); }
.chat-knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.chat-knopf-reihe .knopf { min-height: 40px; }
.chat-verlauf { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--abstand-1); }
.chat-verlauf-eintrag {
  display: flex; align-items: center; gap: var(--abstand-2);
  border: 1px solid var(--farbe-linie); border-radius: var(--radius-2);
  background: var(--farbe-flaeche-leise);
}
.chat-verlauf-oeffnen {
  flex: 1 1 auto; min-height: 40px; text-align: left;
  font: inherit; font-size: var(--schrift-klein); color: var(--farbe-text);
  background: none; border: 0; padding: var(--abstand-2) var(--abstand-3); cursor: pointer;
}
.chat-verlauf-oeffnen:hover, .chat-verlauf-oeffnen:focus-visible { text-decoration: underline; }
.chat-verlauf-meta { font-size: var(--schrift-mini); color: var(--farbe-text-leise); }
.chat-verlauf-weg {
  flex: 0 0 auto; min-height: 40px; min-width: 40px;
  background: none; border: 0; color: var(--farbe-text-leise);
  font: inherit; cursor: pointer; padding: 0 var(--abstand-2);
}
.chat-verlauf-weg:hover, .chat-verlauf-weg:focus-visible { color: var(--farbe-text); }

.chat-nachrichten {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--abstand-3);
  max-height: min(46vh, 420px); overflow-y: auto;
}
.chat-nachricht { display: grid; gap: var(--abstand-2); }
.chat-nachricht-wer {
  font-size: var(--schrift-mini); font-weight: 700; color: var(--farbe-text-leise);
}
.chat-nachricht-text {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  border: 1px solid var(--farbe-linie); border-radius: var(--radius-2);
  padding: var(--abstand-3); background: var(--farbe-flaeche-leise);
  font-size: var(--schrift-klein);
}
/* Die eigene Frage hebt sich ab – sonst ist im Verlauf nicht zu sehen, wer spricht. */
.chat-nachricht.ist-frage .chat-nachricht-text {
  border-left: 3px solid var(--farbe-akzent);
  background: var(--farbe-akzent-hell);
}
.chat-nachricht.zeigt-fehler .chat-nachricht-text { border-left: 3px solid var(--farbe-warnung); }
.chat-cursor::after {
  content: "▌"; margin-left: 2px; color: var(--farbe-akzent);
  animation: chat-blinken 1s steps(2, start) infinite;
}
@keyframes chat-blinken { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  /* Wer Bewegung reduziert haben will, bekommt einen ruhigen Cursor. */
  .chat-cursor::after { animation: none; }
}

.chat-quellen {
  border: 1px solid var(--farbe-akzent); border-radius: var(--radius-2);
  padding: var(--abstand-2) var(--abstand-3); background: var(--farbe-akzent-hell);
  font-size: var(--schrift-mini);
}
.chat-quellen-titel { margin: 0 0 var(--abstand-1); font-weight: 700; }
.chat-quellen-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.chat-quellen-liste li { display: flex; gap: var(--abstand-2); }
.chat-quellen-kennung {
  flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; color: var(--farbe-text);
}
/* Quellentitel sind anklickbar: Web-Funde öffnen die Seite, Unterlagen das
   Material in der App. Als Link und als Knopf gleich aussehen – sonst wirkt eine
   Liste aus beidem wie ein Fehler. Farbe bleibt der Textton (wie bei den
   Suchtreffern); die Unterstreichung zeigt, dass es weitergeht. */
.chat-quellen-titel {
  font: inherit; font-size: var(--schrift-mini); text-align: left;
  color: var(--farbe-text); background: none; border: 0; padding: 0;
  text-decoration: underline; cursor: pointer;
}
.chat-quellen-titel:hover,
.chat-quellen-titel:focus-visible { text-decoration-thickness: 2px; }
/* Kurzes Aufleuchten, wenn eine Kennung im Text angeklickt wurde. */
.chat-quellen-eintrag.ist-hervorgehoben {
  outline: 2px solid var(--farbe-akzent); outline-offset: 2px;
  border-radius: var(--radius-1);
}
/* `[S1]` / `[W1]` im Antworttext – ein Knopf, der die Quelle zeigt. */
.chat-zitat-knopf {
  font: inherit; font-size: inherit; line-height: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--farbe-akzent); background: none; border: 0; padding: 0 1px;
  border-radius: var(--radius-1); cursor: pointer; text-decoration: underline;
}
.chat-zitat-knopf:hover,
.chat-zitat-knopf:focus-visible { text-decoration-thickness: 2px; }
.chat-zitat-badge {
  margin: var(--abstand-1) 0 0; font-size: var(--schrift-mini); color: var(--farbe-text-leise);
}
.chat-zitat-badge.ist-rot { color: var(--farbe-warnung); font-weight: 700; }
/* Hinweis des Servers unter der Antwort (Herkunft, Rückfall, wörtliche Suche). */
.chat-hinweis { margin: var(--abstand-1) 0 0; color: var(--farbe-text-leise); }

.chat-eingabe { display: grid; gap: var(--abstand-2); }
.chat-eingabe label { margin: 0; font-size: var(--schrift-klein); font-weight: 700; }
/* Wo gesucht wird, steht zwischen Frage und Knöpfen: eine Zeile mit drei
   Möglichkeiten, der Hinweis darunter. `fieldset` statt `div`, weil es eine
   Gruppe zusammengehöriger Felder ist – Vorlesehilfen sagen das dann an. */
.chat-quelle-wahl {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2) var(--abstand-3);
  margin: 0; padding: 0; border: 0; font-size: var(--schrift-klein);
}
.chat-quelle-wahl legend { padding: 0; font-weight: 700; font-size: var(--schrift-klein); }
.chat-quelle-wahl .suche-wahl { display: inline-flex; align-items: center; gap: var(--abstand-1); }
.chat-quelle-wahl input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.chat-quelle-wahl label { font-weight: 400; margin: 0; cursor: pointer; }
.chat-quelle-wahl .hinweis { flex: 1 1 100%; margin: 0; }
.chat-eingabe textarea {
  width: 100%; min-height: 64px; resize: vertical;
  font: inherit; font-size: var(--schrift-klein);
  padding: var(--abstand-2) var(--abstand-3);
  border: 1px solid var(--farbe-linie-sekundaer);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche); color: var(--farbe-text);
}
.chat-eingabe-reihe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); }
.chat-eingabe-reihe .knopf { min-height: 44px; }

@media (max-width: 640px) {
  .suche-feld-reihe { grid-template-columns: 1fr; }
  .suche-feld-reihe .knopf { width: 100%; }
  .suche-form { padding: var(--abstand-4); }
  .chat-eingabe-reihe .knopf { width: 100%; }
  .chat-nachrichten { max-height: none; }
}

/* ---------- Numerierung der Navigation (Ticket #1196) ----------
   Die Nummer steht ruhig vor dem Begriff, damit die Struktur aus der Vorlage
   wiedererkennbar bleibt. */
.baum-nr {
  display: inline-block;
  min-width: 2.2em;
  line-height: 1.25;
  color: var(--farbe-navigation-leise);
  font-variant-numeric: tabular-nums;
}
.baum-eintrag[aria-current="page"] .baum-nr,
.baum-gruppe .baum-nr { color: inherit; }

/* ---------- Typografie und Welle aus dem Design (Ticket #1198) ----------
   Der Schriftzug der Schule steht in einer Schreibschrift, die Unterzeile in
   gesperrten Großbuchstaben. Kopf und Fuß tragen eine farbige Welle; sie wird als
   SVG mitgeliefert (kein externer Abruf, keine neue Datei). */

:root { --schrift-marke: "Brush Script MT", "Snell Roundhand", "Segoe Script", "Apple Chancery", cursive; }

.marke-name {
  font-family: var(--schrift-marke);
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.1;
}
.marke small,
.marke-untertitel {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .7rem;
  font-weight: 500;
}

/* Die Welle sitzt am unteren Rand des Kopfes (Ticket #1198) und bleibt seit
   Ticket #1203 innerhalb der Kopfzeile, damit sie den Inhalt nicht überdeckt. */
.kopf { position: sticky; }
.kopf::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--welle-hoehe);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2070%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27w%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23c11f1f%27%2F%3E%3Cstop%20offset%3D%27.32%27%20stop-color%3D%27%23e2001a%27%2F%3E%3Cstop%20offset%3D%27.58%27%20stop-color%3D%27%23f07c1e%27%2F%3E%3Cstop%20offset%3D%27.8%27%20stop-color%3D%27%23f2b233%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f7df5a%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M0%2034%20C150%206%20300%2060%20450%2038%20C600%2016%20750%2054%20900%2032%20C1030%2014%201120%2036%201200%2024%20L1200%2046%20C1100%2058%201020%2040%20900%2050%20C750%2062%20600%2030%20450%2050%20C300%2068%20150%2032%200%2052%20Z%27%20fill%3D%27url%28%23w%29%27%2F%3E%3C%2Fsvg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.fuss { margin-top: 40px; }
.fuss-welle {
  height: var(--welle-hoehe);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2070%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27w%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23c11f1f%27%2F%3E%3Cstop%20offset%3D%27.32%27%20stop-color%3D%27%23e2001a%27%2F%3E%3Cstop%20offset%3D%27.58%27%20stop-color%3D%27%23f07c1e%27%2F%3E%3Cstop%20offset%3D%27.8%27%20stop-color%3D%27%23f2b233%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23f7df5a%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%27M0%2034%20C150%206%20300%2060%20450%2038%20C600%2016%20750%2054%20900%2032%20C1030%2014%201120%2036%201200%2024%20L1200%2046%20C1100%2058%201020%2040%20900%2050%20C750%2062%20600%2030%20450%2050%20C300%2068%20150%2032%200%2052%20Z%27%20fill%3D%27url%28%23w%29%27%2F%3E%3C%2Fsvg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: scaleY(-1);
}
.fuss-band {
  background: var(--farbe-navigation);
  color: var(--farbe-navigation-text);
  padding: 18px var(--abstand-5) 22px;
  text-align: center;
}
.fuss-zeile { margin: 0 0 4px; font-size: .8125rem; }
.fuss-zeile.klein { font-size: .72rem; color: var(--farbe-navigation-leise); }
.fuss-trenner { opacity: .5; }
/* Kontaktangaben der Schule (Ticket #1198): Telefon, E-Mail, Impressum,
   Datenschutz. Sie stehen unter der Copyright-Zeile und sind antippbar. */
.fuss-kontakt { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fuss-kontakt[hidden] { display: none; }
.fuss-link { color: var(--farbe-navigation-text); text-underline-offset: 3px; }
.fuss-link:hover { color: var(--farbe-akzent); }
.fuss-link:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: 2px; }
.marke-name-klein {
  font-family: var(--schrift-marke);
  font-size: 1.15rem;
  letter-spacing: .01em;
}
@media (max-width: 640px) {
  .fuss-band { padding: 16px var(--abstand-4) 20px; }
}

/* ---------- Räume und Ausstattung (3.6, Ticket #1245) ----------
   Tagesübersicht als Tabelle: Ressourcen in Zeilen, Schulstunden in Spalten.
   Die Zellfarben folgen den vorhandenen Flächen-Tokens, damit sie in beiden
   Darstellungen (dunkel und hell) lesbar bleiben. Auf schmalen Bildschirmen
   scrollt nur die Tabelle waagerecht, nicht die ganze Seite. */
.raum-legende { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--abstand-3); }
.raum-marke {
  font-size: var(--schrift-mini); padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--farbe-linie); background: var(--farbe-flaeche-leise);
  color: var(--farbe-text-leise);
}
.raum-frei { color: var(--farbe-erfolg); border-color: currentColor; }
.raum-gebucht { color: var(--farbe-akzent); border-color: currentColor; }
.raum-stundenplan { color: var(--farbe-warnung); border-color: currentColor; }
.raum-gesperrt { color: var(--farbe-fehler); border-color: currentColor; }

.raum-raster { overflow-x: auto; margin: 0 0 var(--abstand-3); }
.raum-tabelle { width: 100%; border-collapse: collapse; min-width: 720px; }
.raum-tabelle th,
.raum-tabelle td {
  border: 1px solid var(--farbe-linie);
  padding: 4px;
  text-align: center;
  vertical-align: middle;
  font-size: var(--schrift-mini);
}
.raum-tabelle thead th {
  background: var(--farbe-flaeche-leise);
  color: var(--farbe-text-leise);
  font-weight: 600;
  padding: 6px 4px;
}
.raum-tabelle .raum-stunden-kopf { white-space: nowrap; }
.raum-tabelle .raum-name { text-align: left; min-width: 180px; padding: 8px 10px; }
.raum-name-titel {
  display: block; font-size: var(--schrift-klein); font-weight: 600;
  color: var(--farbe-text);
}
.raum-name-meta {
  display: block; color: var(--farbe-text-leise); font-size: var(--schrift-mini);
}
.raum-zelle { min-width: 56px; height: 44px; }
.raum-zelle-frei { color: var(--farbe-erfolg); }
.raum-zelle-gebucht { background: var(--farbe-akzent-hell); color: var(--farbe-akzent); font-weight: 600; }
.raum-zelle-stundenplan { background: var(--farbe-warnung-flaeche); color: var(--farbe-warnung); }
.raum-zelle-gesperrt { background: var(--farbe-fehler-flaeche); color: var(--farbe-fehler); }
.raum-zelle-knopf {
  width: 100%; min-height: 44px; border: none; background: transparent;
  color: inherit; font: inherit; font-weight: 600; cursor: pointer;
  border-radius: var(--radius-1);
}
.raum-zelle-knopf:hover { background: var(--farbe-hover); }
.raum-zelle-knopf:focus-visible { outline: 2px solid var(--farbe-akzent); outline-offset: -2px; }
.raum-zelle-klein { display: block; font-size: 0.68rem; font-weight: 500; }

.raum-maengel-liste { display: grid; gap: var(--abstand-3); margin: 0 0 var(--abstand-3); }
.raum-mangel-karte {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  padding: var(--abstand-3);
  background: var(--farbe-flaeche-leise);
}
.raum-mangel-kopf { display: flex; flex-wrap: wrap; gap: var(--abstand-2); align-items: center; }
.raum-mangel-text { margin: var(--abstand-2) 0; }
.raum-mangel-meta { color: var(--farbe-text-leise); font-size: var(--schrift-mini); }
.raum-mangel-aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-2); align-items: center; }
/* Die Statusauswahl bleibt so breit wie ihr Inhalt – die globale Regel
   select { width: 100% } würde sie über die ganze Karte ziehen. */
.raum-mangel-aktionen select { width: auto; min-width: 200px; }
.raum-mangel-foto { display: block; max-width: 220px; height: auto; margin-top: var(--abstand-2);
  border: 1px solid var(--farbe-linie); border-radius: var(--radius-2); }

@media (max-width: 640px) {
  .raum-tabelle { min-width: 560px; }
  .raum-tabelle .raum-name { min-width: 140px; }
}

/* ---------- Aufgaben und Fristen (Punkt 3.5, Ticket #1244) ----------
   Die Hauptansicht gruppiert nach Überfällig, Diese Woche und Später. Jede Zeile
   beginnt mit dem Ankreuzfeld zum Erledigen, danach stehen Titel, Frist und
   Absender; Marken nennen Art und Wiederholung. Der Fortschritt verteilter
   Aufgaben ist ein echter Balken mit Zahl daneben – Farbe allein genügt nicht. */

.auf-liste { display: grid; gap: var(--abstand-4); }
.auf-gruppe { display: grid; gap: 0; }
.auf-gruppe h3 { margin: 0 0 var(--abstand-2); }
/* Zeile: Haken links, Text nimmt den Platz, Marken rechts. Die allgemeine
   Listenregel setzt `justify-content: space-between` – hier soll der Text
   direkt am Haken beginnen. */
.auf-zeile { display: flex; justify-content: flex-start; align-items: center; gap: var(--abstand-2); }
.auf-haken {
  flex: none; width: 22px; height: 22px; min-height: 0;
  accent-color: var(--farbe-akzent);
}
.auf-verteilen {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  padding: var(--abstand-2) var(--abstand-4) var(--abstand-4);
  margin: var(--abstand-4) 0 0;
  display: grid;
  gap: var(--abstand-1);
  justify-items: start;
}
.auf-verteilen legend {
  padding: 0 var(--abstand-2);
  font-size: var(--schrift-klein);
  color: var(--farbe-text-leise);
}
.auf-verteilen .wahl { margin: var(--abstand-1) 0; }
/* Mehrfachauswahl und Fachfeld bleiben so breit wie nötig, aber nicht schmaler
   als lesbar – die globale Regel `select/input { width: 100% }` würde sie über
   die ganze Karte ziehen. */
#auf-personen, #auf-fach { width: 100%; max-width: 420px; }
.auf-fortschritt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-2); }
.auf-balken { width: 220px; height: 12px; accent-color: var(--farbe-akzent); }

/* ---------- Anträge (3.4, Ticket #1243) ----------
   Eine Zeile trägt Nummer, Art, Zeitraum und Antragsteller; die Statusmarke
   steht rechts neben dem Text, der Öffnen-Knopf ganz außen. Der Verlauf ist
   eine Liste mit Aktion, Person, Zeitpunkt und Kommentar. */

.ant-liste { display: grid; gap: var(--abstand-2); }
.ant-zeile {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: var(--abstand-2);
}
.ant-zeile .liste-text { flex: 1 1 320px; }
.ant-status {
  flex: none;
  padding: 2px var(--abstand-2);
  border: 1px solid var(--farbe-linie);
  border-radius: 999px;
  font-size: var(--schrift-mini);
  white-space: nowrap;
}
/* Farbe nur über data-status – ein Statusname im Klassennamen würde bei einer
   Umbenennung still verschwinden. */
.ant-status[data-status="in_pruefung"] { border-color: var(--farbe-akzent-dunkel); }
.ant-status[data-status="rueckfrage"] { border-color: var(--farbe-warnung); color: var(--farbe-warnung); }
.ant-status[data-status="genehmigt"] { border-color: var(--farbe-erfolg); color: var(--farbe-erfolg); }
.ant-status[data-status="abgelehnt"] { border-color: var(--farbe-fehler); color: var(--farbe-fehler); }
/* Gewählte Liste: gleiche Kennzeichnung wie der aktive Navigationspunkt. */
#ant-zu-meine[aria-pressed="true"],
#ant-zu-bearbeiten[aria-pressed="true"] {
  border-color: var(--farbe-akzent);
  color: var(--farbe-akzent);
}
.ant-daten {
  display: grid;
  grid-template-columns: minmax(160px, max-content) 1fr;
  gap: var(--abstand-1) var(--abstand-4);
  margin: 0 0 var(--abstand-4);
}
.ant-daten dt { font-weight: 600; color: var(--farbe-text-leise); }
.ant-daten dd { margin: 0; }
.ant-begruendung { white-space: pre-wrap; margin: var(--abstand-3) 0; }
.ant-verlauf {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--abstand-2);
}
.ant-verlauf-eintrag {
  display: grid;
  gap: 2px;
  padding-left: var(--abstand-3);
  border-left: 3px solid var(--farbe-linie);
}
@media (max-width: 720px) {
  .ant-daten { grid-template-columns: 1fr; }
}

/* ==============================================================
   Bereich 2 – Klassen-Cockpit, Übersicht, Schnellerfassung
   (Ticket #1341)
   ============================================================== */
/* Ticket #1378: Die Kacheln füllen die Seitenbreite aus. `auto-fit` mit
   kleinerem Mindestmaß lässt alle sieben Kacheln in eine Reihe passen, wenn
   Platz ist, und bricht auf schmalen Fenstern sauber um. Gleiche Höhe entsteht
   durch `stretch` – keine Kachel steht allein mit halber Höhe da. */
.cockpit-kacheln {
  list-style: none;
  margin: 0 0 var(--abstand-4);
  padding: 0;
  display: grid;
  /* Vier Spalten und die fünfte Kachel doppelt breit: Sieben Kacheln füllen
     damit zwei volle Reihen (4 + 3), ohne dass eine allein in der letzten Reihe
     steht (Ticket #1378). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--abstand-3);
}
.cockpit-kachel:nth-child(5) { grid-column: span 2; }
@media (max-width: 1100px) {
  .cockpit-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cockpit-kachel:nth-child(5) { grid-column: span 1; }
  .cockpit-kachel:last-child { grid-column: span 2; }
}
@media (max-width: 640px) {
  .cockpit-kacheln { grid-template-columns: minmax(0, 1fr); }
  .cockpit-kachel:last-child { grid-column: span 1; }
}
.cockpit-kachel {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  padding: var(--abstand-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  background: var(--farbe-flaeche-leise);
}
/* Die Kachel ist anklickbar (Ticket #1341) – das soll man auch sehen. */
.cockpit-kachel[role="button"] { cursor: pointer; }
.cockpit-kachel[role="button"]:hover,
.cockpit-kachel[role="button"]:focus-visible {
  border-color: var(--farbe-akzent);
  background: var(--farbe-hover);
}
/* Der Untermenüpunkt steht klein unter dem Wert (Ticket #1378). */
.cockpit-ziel {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: var(--farbe-text-leise);
  overflow-wrap: anywhere;
}
.cockpit-kachel[role="button"]:hover .cockpit-ziel { color: var(--farbe-text); }
.cockpit-kachel h3 {
  margin: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--farbe-text-leise);
}
.cockpit-wert { font-size: 1.35rem; font-weight: 700; }
.cockpit-zusatz { font-size: 0.85rem; color: var(--farbe-text-leise); }
.cockpit-kachel-warnung { border-left: 4px solid var(--farbe-akzent); }

/* Kinderauswahl der Schnellerfassung */
.kind-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  margin: 0 0 var(--abstand-3);
}
.kind-wahl label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Pseudonym bleibt in einer Zeile – S-001 wird nicht umbrochen. */
  white-space: nowrap;
  border: 1px solid var(--farbe-linie);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
}
.kind-wahl label:has(input:checked) {
  border-color: var(--farbe-akzent);
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
}

/* Zeitleiste im Kinderprofil */
.profil-zeit {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--abstand-2);
  align-items: baseline;
}
.profil-datum { font-variant-numeric: tabular-nums; color: var(--farbe-text-leise); }
.profil-art {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--farbe-text-leise);
}

/* Lücke in der Dokumentation – Hinweis, keine Bewertung des Kindes. */
.zelle-luecke { color: var(--farbe-akzent); font-weight: 600; }

@media (max-width: 720px) {
  .profil-zeit { grid-template-columns: 1fr; }
}

/* Ticket #1343: Zwischenzeile für einen Aufgabenbereich im Quiz. Die Nummern
   beginnen je Bereich neu, damit die Zwischenzeile nicht als Aufgabe zählt. */
.aufgaben.mit-gruppen {
  list-style: none;
  counter-reset: aufgabe;
  padding-left: 0;
}
.aufgaben.mit-gruppen > li:not(.aufgaben-gruppe) {
  counter-increment: aufgabe;
  padding-left: 1.6rem;
  position: relative;
}
.aufgaben.mit-gruppen > li:not(.aufgaben-gruppe)::before {
  content: counter(aufgabe) ".";
  position: absolute;
  left: 0;
  color: var(--farbe-text-leise);
  font-variant-numeric: tabular-nums;
}
.aufgaben.mit-gruppen > li.aufgaben-gruppe { counter-reset: aufgabe; }
.aufgaben-gruppe {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--farbe-text-leise);
  border-bottom: 1px solid var(--farbe-linie);
  margin: var(--abstand-3) 0 var(--abstand-1);
  padding-bottom: 2px;
}

/* ==============================================================
   Ticket #1345 – Tagesplan und Wochenplan im Dashboard
   ============================================================== */
.dash-schalter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-3);
  margin-top: var(--abstand-3);
  padding-top: var(--abstand-3);
  border-top: 1px solid var(--farbe-linie);
}
.dash-schalter .wahl { margin: 0; }

.dash-wochenplan {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--abstand-2);
}
.dash-plan-tag {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  padding: var(--abstand-2);
  min-height: 84px;
}
.dash-plan-heute {
  border-color: var(--farbe-akzent);
  box-shadow: inset 0 0 0 1px var(--farbe-akzent);
}
.dash-plan-tagkopf {
  margin: 0 0 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--farbe-text-leise);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dash-plan-eintrag {
  margin: 0 0 4px;
  font-size: var(--schrift-klein);
  line-height: 1.3;
}
.dash-plan-zeit {
  display: inline-block;
  min-width: 84px;
  /* Abstand zum Text daneben – sonst kleben „Deutsch" und der Titel aneinander. */
  margin-right: var(--abstand-2);
  color: var(--farbe-text-leise);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .dash-wochenplan { grid-template-columns: 1fr 1fr; }
}

.dash-plan-frei { opacity: 0.75; }
.dash-plan-tag .ist-erledigt { text-decoration: line-through; opacity: 0.7; }
#dashboard-tagesplan .ist-erledigt { text-decoration: line-through; opacity: 0.7; }

/* Ticket #1344: ausklappbare Wahl des Ausgabe-Ziels. */
.ausgabe-wahl {
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  padding: var(--abstand-2) var(--abstand-3);
  margin: 0 0 var(--abstand-3);
}
.ausgabe-wahl summary {
  cursor: pointer;
  font-weight: 600;
}
.ausgabe-wahl[open] summary { margin-bottom: var(--abstand-2); }

/* Kindgerechte Fassung im Druck/HTML (Ticket #1344). */
.arbeitsblatt.kinder { font-size: 1.25rem; }
.arbeitsblatt.kinder h1 { color: var(--farbe-akzent); }
.arbeitsblatt.kinder .aufgaben li { margin-bottom: 1.6rem; }
.arbeitsblatt.kinder .kind-linie {
  display: block;
  border-bottom: 2px dotted var(--farbe-linie);
  height: 1.4rem;
}

/* ---------- Aufgaben im Kalender (Ticket #1375) ----------
   Aufgaben stehen in der Wochenansicht und im Tagesplan. Die vier Aktionen
   erscheinen erst beim Überfahren (oder wenn der Tastaturfokus auf der Aufgabe
   liegt) – ohne Maus bleibt die Ansicht ruhig. */
.kal-tag-aufgaben {
  display: grid;
  gap: 4px;
  margin-top: var(--abstand-2);
  padding-top: var(--abstand-2);
  border-top: 1px dashed var(--farbe-linie);
  min-height: 36px;
}
.kal-tag-kopf {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--farbe-text-leise);
}
.kal-tag-leer { margin: 0; font-size: 0.78rem; color: var(--farbe-text-leise); }

.kal-aufgabe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  padding: 4px 6px;
  border: 1px solid var(--farbe-linie);
  border-left: 3px solid var(--farbe-akzent);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche);
  cursor: grab;
  position: relative;
}
.kal-aufgabe:focus-visible { outline: var(--fokus); outline-offset: 2px; }
.kal-aufgabe-titel { font-size: 0.85rem; font-weight: 600; word-break: break-word; }
.kal-aufgabe-zeit { font-size: 0.74rem; color: var(--farbe-text-leise); }
.kal-aufgabe-notiz {
  flex-basis: 100%;
  font-size: 0.74rem;
  color: var(--farbe-text-leise);
  overflow-wrap: anywhere;
}

/* Die Aktionen: unsichtbar, bis die Maus über der Aufgabe ist oder der Fokus
   darin steht. `visibility` (statt `display`) hält die Knöpfe für die Tastatur
   erreichbar. */
.kal-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-basis: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.kal-aufgabe:hover .kal-aktionen,
.kal-aufgabe:focus-within .kal-aktionen,
.kal-aufgabe.ist-gezogen .kal-aktionen {
  visibility: visible;
  opacity: 1;
}
.kal-aktion { padding: 2px 8px; font-size: 0.74rem; min-height: 26px; }

/* Ziehen: die gezogene Aufgabe und das mögliche Ziel sind deutlich markiert. */
.kal-aufgabe.ist-gezogen { opacity: 0.55; border-left-color: var(--farbe-warnung); }
.kal-zielfeld,
.kal-tag-aufgaben.kal-zielfeld {
  outline: 2px dashed var(--farbe-akzent);
  outline-offset: 2px;
  background: var(--farbe-hover);
}
/* Im Tagesplan lassen sich Aufgaben je Stunde ablegen. */
.kal-stunde {
  display: grid;
  gap: 3px;
  padding: 2px 4px;
  border-radius: var(--radius-2);
  min-height: 30px;
}
.kal-stunde-kopf {
  font-size: 0.72rem;
  color: var(--farbe-text-leise);
}

/* Rückgängig-Leiste: erscheint nach jeder Aktion, verschwindet von selbst. */
.kal-undo {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  max-width: min(90vw, 640px);
  padding: var(--abstand-2) var(--abstand-3);
  border: 1px solid var(--farbe-akzent);
  border-radius: var(--radius-2);
  background: var(--farbe-navigation);
  color: var(--farbe-text);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.kal-undo span { font-size: 0.85rem; }

/* Archiv und Papierkorb (3.1.3) */
.kal-archiv { gap: var(--abstand-2); }
.kal-archiv-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2) var(--abstand-3);
  align-items: center;
  padding-bottom: var(--abstand-2);
  border-bottom: 1px solid var(--farbe-linie);
}
.kal-archiv-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.kal-archiv-zeile .liste-text { flex: 1 1 280px; min-width: 0; }
.kal-archiv-zeile .knopf-reihe { flex: 0 0 auto; margin-left: auto; flex-wrap: wrap; }

/* Titel und Notiz direkt in der Zeile ändern (Nachtrag zu Ticket #1375) */
.kal-formular {
  flex-basis: 100%;
  display: grid;
  gap: 4px;
  margin-top: 4px;
  padding: 6px;
  border: 1px solid var(--farbe-linie-sekundaer);
  border-radius: var(--radius-2);
  background: var(--farbe-navigation);
}
.kal-formular input {
  margin: 0;
  min-height: 28px;
  font-size: 0.8rem;
}
.kal-formular .knopf-reihe { margin-top: 2px; }
.kal-formular .knopf { padding: 2px 8px; font-size: 0.74rem; min-height: 26px; }

/* Aufgaben im Stundenplan (Nachtrag zu Ticket #1375) */
.kal-zelle {
  display: grid;
  gap: 3px;
  margin-top: 4px;
}
.kal-zelle .kal-aufgabe { font-size: 0.78rem; padding: 3px 5px; }
.std-aufgaben { display: grid; gap: var(--abstand-2); margin-top: var(--abstand-2); }
.kal-ohne-stunde {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: var(--abstand-2);
  align-items: start;
}
.kal-ohne-tag { font-size: 0.78rem; color: var(--farbe-text-leise); padding-top: 4px; }
.kal-plan-aufgaben { display: grid; gap: var(--abstand-2); margin: var(--abstand-2) 0 0; }

/* Hochgeladene Datei in der Materialansicht (Nachtrag zu Ticket #1375) */
.material-datei {
  margin: var(--abstand-3) 0;
  padding: var(--abstand-3);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-2);
  background: var(--farbe-flaeche-leise);
}
.material-datei h3 { margin-top: 0; }
.material-datei-knoepfe { display: flex; flex-wrap: wrap; gap: var(--abstand-2); margin-top: var(--abstand-2); }

/* Hinweis auf eine neuere Fassung (Ticket #1379) */
.hinweis-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-3);
  margin: var(--abstand-3) 0;
  padding: var(--abstand-2) var(--abstand-3);
  border: 1px solid var(--farbe-warnung);
  border-radius: var(--radius-2);
  background: var(--farbe-warnung-flaeche);
  font-size: 0.85rem;
}