/* =========================================================================
   Kalender – Termine je Klasse und für die Schule

   Farbtoken aus dem Praktikum, damit die Module von lehrerland.de erkennbar
   zusammengehören. Abweichung: die Marke ist das Grün-Blau des
   Kalender-Katalogeintrags (#2f6d7a) statt des Praktikums-Blau – sonst wären
   zwei Modulfenster nebeneinander nicht auseinanderzuhalten.

   Für das iPad ausgelegt. Vier Dinge, die dabei zählen und nicht offen-
   sichtlich sind:

   1. **Eingabefelder tragen 16 px.** Ist die Schrift kleiner, zoomt Safari
      beim Antippen automatisch in das Feld hinein – die Seite springt, und
      man muss von Hand zurückzoomen. Deshalb 16 px, nicht 15.
   2. **Berührungsziele sind mindestens 44 px hoch** (--tap). Alles darunter
      trifft man mit dem Finger nicht zuverlässig. Die Tagesfelder des
      Monatsrasters sind deshalb 96 px hoch, nicht 60.
   3. **`:hover` nur, wo es Zeigegeräte gibt.** Auf Touch bleibt ein
      Hover-Zustand nach dem Tippen „kleben", bis man woanders hintippt.
   4. **`dvh` statt `vh`.** Bei `100vh` schiebt die ein- und ausfahrende
      Adressleiste den Inhalt; `dvh` rechnet mit der tatsächlichen Höhe.
   ========================================================================= */

:root {
  /* Flächen */
  --bg: #f0ece3;
  --surface: #fffdf9;
  --surface-2: #f6f1e8;
  --surface-inset: #f3eee4;

  /* Text */
  --ink: #211f1a;
  --ink-soft: #453f37;
  --muted: #7a736a;
  --faint: #9c968c;

  /* Linien */
  --line: #e7e0d3;
  --line-strong: #dbd2c1;

  /* Marke */
  --brand: #2f6d7a;
  --brand-strong: #265a65;
  --brand-soft: #d8e8ea;
  --brand-tint: #ecf4f5;
  --brand-ink: #1d454e;

  /* Statusfarben */
  --ok: #3c8a5f;
  --ok-soft: #e2efe6;
  --info: #3f6fa8;
  --info-soft: #e3ebf5;
  --warn: #b07420;
  --warn-soft: #f4e9d5;
  --danger: #a8452f;
  --danger-soft: #f3e0d8;
  --neutral: #7c756c;
  --neutral-soft: #ece6da;

  /* Terminkategorien. Sie stehen hier und nicht in der Datenbank: Es sind
     Anzeigefarben, keine Fachdaten – und eine Farbe, die in einer Tabelle
     steht, ändert niemand mehr, ohne alle Zeilen anzufassen.

     ⚠️ Diese acht Werte sind **Flächenfarben mit weißer Schrift darauf**
     (siehe `.ev`). Jeder von ihnen hält mindestens 4.5:1 gegen Weiß – die
     Grenze, ab der kleine Schrift lesbar bleibt. Wer hier aufhellt, weil eine
     Farbe „freundlicher" aussehen soll, macht den Terminnamen unlesbar, und
     zwar zuerst am Beamer und auf dem iPad in der Sonne.

     Zwei Werte sind deshalb dunkler als die verwandte Statusfarbe weiter oben,
     und nur diese zwei: Ausflug lag als Fläche bei 4.21, Ferien bei 3.91.
     Nachgemessen, nicht geschätzt – die restlichen sechs waren schon in
     Ordnung und bleiben unangetastet. Gemessene Werte, Reihenfolge wie unten:
     5.90 · 6.97 · 4.66 · 5.18 · 5.54 · 4.89 · 4.89 · 4.55. */
  --kat-klassenarbeit: #a8452f;
  --kat-pruefung: #8a3f6d;
  --kat-ausflug: #398258;
  --kat-elternabend: #3f6fa8;
  --kat-konferenz: #6b5ea8;
  --kat-ferien: #9c651b;
  --kat-feiertag: #9c651b;
  --kat-sonstiges: #7c756c;

  /* Ferien und Feiertage sind **keine Kategorien** und keine Termine – sie sind
     der Hintergrund eines Tagesfeldes. Deshalb zwei ganz andere Werte: sehr
     helle Flächen, auf denen die normale Textfarbe liegen bleibt.

     ⚠️ Sie müssen hell genug bleiben, dass ein Termin darauf lesbar ist. Ein
     Tagesfeld in den Ferien trägt trotzdem Termine (die Skifreizeit liegt in
     den Ferien), und deren weiße Schrift auf der Kategoriefläche darf nicht
     gegen einen kräftigen Grund antreten müssen. Gemessen gegen `--ink`:
     15.3 (Ferien) und 13.9 (Feiertag) – beide weit über der Grenze.

     Der Feiertag ist der kräftigere von beiden: Er ist der stärkere Einschnitt,
     und wo beides zusammenfällt, gewinnt er (siehe ferienProTag()). */
  --frei-ferien: #f4efe0;
  --frei-ferien-rand: #ddd0a8;
  --frei-feiertag: #f7e6de;
  --frei-feiertag-rand: #e2bcae;
  --frei-schrift: #7a6a4d;

  /* Tage des Vor- und Folgemonats im Raster: ein echtes Grau, kein Beige
     (22.09.2026). Deutlich dunkler als das Wochenende, hell genug für einen
     Termin darauf. */
  --fremd: #e3e1dd;
  --fremd-schrift: #8f8a82;

  /* Die Linien zwischen den Tagesfeldern – deutlich dunkler als `--line`. */
  --raster-linie: #cfc6b3;

  /* Klassenarbeiten: gelbe Fläche, gewünscht am 19.09.2026 („Hintergrund gelb,
     Schrift bleibt"). Hell genug, dass die normale Textfarbe darauf liegen
     bleibt – gemessen gegen `--ink` weit über 10:1. */
  --ka-flaeche: #fff1a8;
  --ka-rand: #d9b93a;

  /* Form */
  --r-xl: 20px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(60, 45, 25, 0.05);
  --shadow: 0 10px 30px rgba(70, 50, 25, 0.07);
  --shadow-pop: 0 18px 44px rgba(50, 35, 18, 0.16);

  --sidebar-w: 236px;
  --tap: 44px;
  --gap: clamp(0.9rem, 2vw, 1.3rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 12% -8%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(900px 500px at 108% 4%, rgba(47, 109, 122, 0.07), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(47, 109, 122, 0.12);
}

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  line-height: 1.18;
  margin: 0 0 .4em;
  font-weight: 600;
  letter-spacing: -0.011em;
}
h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
h2 { font-size: clamp(1.14rem, 1.05rem + 0.5vw, 1.35rem); }
h3 { font-size: 1.02rem; }
p { margin: 0 0 .8em; }
a { color: var(--brand-strong); text-underline-offset: 2px; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .87rem; }
.tiny  { font-size: .78rem; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: .75rem; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.row.tight { gap: .35rem; }
.grow { flex: 1 1 auto; }

/* Termintitel kommen aus einer Eingabe – sie dürfen nie aus ihrem Kasten
   laufen. „Schulentwicklungstagbesprechung" ist ein Wort ohne Trennstelle. */
.card, td, li, .ev { overflow-wrap: anywhere; }

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

.wrap {
  max-width: 1220px;
  margin: 0 auto;
  padding: var(--gap) clamp(0.9rem, 3vw, 1.6rem) 4rem;
  padding-left: max(clamp(0.9rem, 3vw, 1.6rem), env(safe-area-inset-left));
  padding-right: max(clamp(0.9rem, 3vw, 1.6rem), env(safe-area-inset-right));
}
.wrap.narrow { max-width: 760px; }
.wrap.wide { max-width: 1360px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .75rem clamp(0.9rem, 3vw, 1.6rem);
  padding-top: max(.75rem, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
  background: rgba(255, 253, 249, 0.88);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.topbar__brand { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.topbar__brand strong {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 1.05rem; letter-spacing: -0.01em;
}
.topbar__brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__spacer { flex: 1 1 auto; }

/* Begrüßungs- und Anmeldebild.
 *
 * Das Bild sitzt oben, der Text darunter – nicht darüber. Ein Textblock auf
 * dem Bild wäre hier nicht lesbar: Die Vorlage hat helle und dunkle Stellen
 * nebeneinander.
 *
 * `aspect-ratio` statt fester Höhe, damit der Ausschnitt auf jeder Breite
 * gleich wirkt. `height: auto` ist dabei Pflicht, nicht Geschmack: Solange
 * das height-Attribut aus dem Markup die Höhe festlegt, greift
 * `aspect-ratio` gar nicht – das Bild wird 900 px hoch und schiebt das
 * Anmeldeformular aus dem Bild.
 */
.hero { border-radius: var(--r-xl); border: 1px solid var(--line);
        background: var(--surface); box-shadow: var(--shadow-sm);
        margin-bottom: var(--gap); overflow: hidden; }
.hero__bild {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 6.4; object-fit: cover; object-position: center 42%;
  background: var(--brand-tint);
}
.hero__text { padding: clamp(1.1rem, 3vw, 1.7rem); }
.hero__text > :last-child { margin-bottom: 0; }
.hero h1 { margin-bottom: .18em; }
@media (max-width: 560px) { .hero__bild { aspect-ratio: 16 / 8.5; } }

.panel {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 980px) { .panel { grid-template-columns: minmax(0, 1fr); } }

/* Die Filterleiste: seitlich am Schreibtisch, als Reiterleiste auf dem Tablet.

   Sie hieß bis zum 12.09.2026 Kalenderwahl und trug Knöpfe - einer davon war
   der gewählte Kalender. Jetzt liegen alle Kalender in einem Raster, und hier
   stehen Häkchen zum Ein- und Ausblenden. Die Knopf-Regeln darunter bleiben
   stehen: Der Adminbereich benutzt dieselbe Leiste noch nicht, aber die
   Auszeichnung `aria-current` gibt es in der Druckansicht weiter. */
.sidenav {
  display: flex; flex-direction: column; gap: .12rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: .45rem;
  position: sticky; top: calc(3.6rem + env(safe-area-inset-top));
  box-shadow: var(--shadow-sm);
  max-height: calc(100dvh - 5rem); overflow-y: auto; overflow-x: hidden;
  /* Schmale Rollleiste: Die breite nahm dem Gruppenkopf so viel, dass „keine"
     rechts angeschnitten war (iPad-Maß quer, 23.09.2026). */
  scrollbar-width: thin;
}
.sidenav button {
  display: flex; align-items: center; gap: .5rem;
  min-height: var(--tap);
  text-align: left; border: 0; background: transparent; cursor: pointer;
  padding: .5rem .7rem; border-radius: var(--r-sm); color: var(--ink-soft);
  font-weight: 500; width: 100%;
}
@media (hover: hover) { .sidenav button:hover { background: var(--surface-2); } }
.sidenav button[aria-current="true"] {
  background: var(--brand-soft); color: var(--brand-ink); font-weight: 650;
}
.sidenav__punkt {
  flex: 0 0 auto; width: .72rem; height: .72rem; border-radius: 50%;
  background: var(--muted);
  /* Ein feiner Rand in der Flächenfarbe: Ohne ihn verschwindet ein heller
     Punkt (Ocker, Oliv) auf dem hellen Grund der Karte fast. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) inset;
}
/* Ein Häkchen in der Filterleiste. Dieselbe Höhe und derselbe Abstand wie ein
   Knopf darüber: Die Leiste soll nicht danach aussehen, als wären zwei
   verschiedene Dinge hineingeraten. */
.sidenav__wahl {
  display: flex; align-items: center; gap: .5rem;
  min-height: var(--tap);
  padding: .5rem .7rem; border-radius: var(--r-sm);
  color: var(--ink-soft); font-weight: 500; cursor: pointer;
  width: 100%;
}
@media (hover: hover) { .sidenav__wahl:hover { background: var(--surface-2); } }
/* Das Kästchen ist seit 23.09.2026 selbst gezeichnet: abgerundet, Rand in der
   Kalenderfarbe, gesetzt ganz in ihr gefüllt mit weißem Haken. Das
   Browser-Häkchen (`accent-color`) sah je Browser anders aus und ließ sich nicht
   runden. `--kal-farbe` sitzt am <label>; Ferien/Feiertage haben keine und
   fallen auf `--muted` zurück.

   ⚠️ Mit Attributselektor, nicht nur `input`: Weiter unten in dieser Datei
   steht `input[type="checkbox"] { … }` mit derselben Spezifität (0,1,1) –
   bei Gleichstand gewinnt die SPÄTERE Regel. */
.sidenav__wahl input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  display: grid; place-content: center;
  margin: 0; flex: 0 0 auto;
  width: 1.15rem; height: 1.15rem; border-radius: 6px;
  border: 1.5px solid var(--line-strong);
  border-color: color-mix(in srgb, var(--kal-farbe, var(--muted)) 55%, var(--line-strong));
  background: var(--surface); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.sidenav__wahl input[type="checkbox"]::before {
  content: ''; width: .62rem; height: .62rem; background: #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0); transition: transform .12s ease;
}
.sidenav__wahl input[type="checkbox"]:checked {
  background: var(--kal-farbe, var(--muted)); border-color: var(--kal-farbe, var(--muted));
}
.sidenav__wahl input[type="checkbox"]:checked::before { transform: scale(1); }
/* Ein ausgeblendeter Kalender bleibt lesbar, tritt aber zurück - sonst sucht
   man in einer Liste aus drei gleich aussehenden Zeilen, welche gerade gilt. */
.sidenav__wahl:has(input:not(:checked)) { color: var(--faint); }
.sidenav__wahl:has(input:not(:checked)) .sidenav__punkt { opacity: .35; }
.sidenav__gruppe {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); font-weight: 700; padding: .8rem .7rem .25rem;
}
/* Über der Klassengruppe stehen „alle" und „keine". Bei 24 Klassen ist das kein
   Beiwerk: Wer seine drei Klassen sehen will, drückt einmal „keine" und setzt
   drei Häkchen - sonst sind es 21 Klicks. */
.sidenav__gruppe--mit-tat { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.sidenav__tat { display: flex; gap: .5rem; }
/* Seit 23.09.2026 kleine Tasten statt unterstrichener Wörter – unterstrichen
   sahen sie nach Verweis aus, nicht nach Schalter. */
.sidenav__tat button {
  border: 0; background: var(--brand-tint); padding: .22rem .34rem; margin: 0;
  min-height: 0; width: auto; border-radius: 7px;
  font: inherit; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand-ink); font-weight: 700; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease;
}
@media (hover: hover) { .sidenav__tat button:hover { background: var(--brand-soft); color: var(--brand-ink); } }

/* Ferien und Feiertage stehen in derselben Leiste, sind aber keine Kalender.
   Statt eines Farbpunkts tragen sie ein Band in ihrer Flächenfarbe - damit
   fragt niemand nach der Abo-Adresse dazu. */
.sidenav__band {
  flex: 0 0 auto; width: .72rem; height: .72rem; border-radius: 3px;
  border: 1px solid var(--line-strong);
}
.sidenav__band--ferien    { background: var(--frei-ferien);    border-color: var(--frei-ferien-rand); }
.sidenav__band--feiertage { background: var(--frei-feiertag);  border-color: var(--frei-feiertag-rand); }
.sidenav__band--klassenarbeiten { background: var(--ka-flaeche); border-color: var(--ka-rand); }
.sidenav__wahl--hintergrund input[type="checkbox"] { accent-color: var(--muted); }
/* Auf dem Tablet steht die Leiste über dem Raster. Seit die Gruppen sich
   zuklappen lassen, ist sie dort kurz genug für einen normalen Block – die
   frühere waagerechte Rollleiste versteckte die Gruppenköpfe. */
@media (max-width: 980px) {
  .sidenav { position: static; max-height: none; }
}

/* Auf- und zuklappbare Gruppen der Leiste (13.09.2026). Der Kopf nennt, wie
   viele eingeblendet sind, und zeigt zugeklappt ihre Farbpunkte.
   ⚠️ Die Selektoren tragen `.sidenav` vorn: `.sidenav button` weiter oben hat
   (0,1,1) und gewönne sonst gegen jede einfache Klasse. */
.sidenav__block + .sidenav__block { border-top: 1px solid var(--line); margin-top: .15rem; padding-top: .15rem; }
.sidenav .sidenav__gruppe { display: flex; align-items: center; gap: .25rem; padding: 0; }
.sidenav .sidenav__klappe {
  flex: 1 1 auto; width: auto; min-width: 0; min-height: 40px; gap: .3rem;
  padding: .35rem .3rem .35rem .4rem; border-radius: var(--r-sm);
  font: inherit; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--muted);
}
.sidenav .sidenav__klappe > span:nth-of-type(1) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sidenav__pfeil { flex: 0 0 auto; transition: transform .15s ease; }
.sidenav__klappe[aria-expanded="true"] .sidenav__pfeil { transform: rotate(90deg); }
.sidenav__stand {
  margin-left: auto; display: inline-flex; align-items: center; gap: .22rem;
  padding: .1rem .38rem; border-radius: 999px; background: var(--surface-inset);
  text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted);
  font-size: .68rem; line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.sidenav .sidenav__tat { gap: .12rem; padding-right: .1rem; flex: 0 0 auto; }
.sidenav__inhalt { display: flex; flex-direction: column; gap: .12rem; padding-bottom: .3rem; }

/* Kalendertasten: die Klassen in der Leiste und alle Kalender im Termindialog.
   Eine Reihe je Jahrgang. Seit 23.09.2026 abgerundete Kacheln statt Pillen:
   ruhige Fläche, die Kalenderfarbe als Punkt vor dem Namen (vorher ein Strich
   am unteren Rand, der wie ein Lächeln aussah). Gewählt heißt: zarte Fläche
   und Rand in der Kalenderfarbe, Punkt mit Hof, dunkle Schrift – weiße Schrift
   auf der Kalenderfarbe hielte bei den helleren Tönen der Palette die 4.5:1
   nicht. */
.chips { display: flex; flex-direction: column; gap: .35rem; padding: .2rem .5rem .4rem; }
.chips__reihe { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips__titel {
  margin: .2rem .5rem .15rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); font-weight: 700;
}
.chip, .sidenav .chip {
  display: inline-flex; align-items: center; justify-content: center; gap: .34rem;
  width: auto; min-width: 2.9rem; min-height: 34px;
  padding: .25rem .6rem; margin: 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--ink-soft);
  font: inherit; font-size: .84rem; font-weight: 600; line-height: 1.2;
  font-variant-numeric: tabular-nums;
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.chip::before {
  content: ''; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
  background: var(--kal-farbe, var(--brand)); opacity: .5;
  transition: opacity .15s ease, box-shadow .15s ease;
}
.chip[aria-pressed="true"], .sidenav .chip[aria-pressed="true"] {
  background: var(--brand-tint);
  background: color-mix(in srgb, var(--kal-farbe, var(--brand)) 15%, var(--surface));
  border-color: var(--kal-farbe, var(--brand));
  border-color: color-mix(in srgb, var(--kal-farbe, var(--brand)) 60%, var(--surface));
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(60, 45, 25, .10);
}
.chip[aria-pressed="true"]::before {
  opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kal-farbe, var(--brand)) 22%, transparent);
}
@media (hover: hover) {
  .sidenav .chip:hover, .chip:hover { background: var(--neutral-soft); border-color: var(--line-strong); }
  .sidenav .chip[aria-pressed="true"]:hover, .chip[aria-pressed="true"]:hover {
    background: color-mix(in srgb, var(--kal-farbe, var(--brand)) 24%, var(--surface));
    border-color: var(--kal-farbe, var(--brand));
  }
}
.chip:active:not(:disabled) { transform: scale(.95); }
.chip:disabled { opacity: .55; cursor: not-allowed; }
/* In der Leiste stehen die Tasten auf einem gemeinsamen Raster: gleich breit,
   die 5d genau unter der 6d, auch wenn die 7. Klasse nur drei hat.
   ⚠️ Fest vier Spalten, nicht `auto-fill`: Rollt die Leiste (iPad quer, 660 px
   hoch), frisst eine sichtbare Rollleiste 15 px, und `auto-fill` fiel auf drei
   Spalten – die 5d stand dann allein in einer Zeile. Vier Spalten zu 43 px
   tragen „10a" samt Punkt noch. Eine fünfte Klasse bricht in die Folgezeile. */
.sidenav .chips__reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sidenav .chip { min-width: 0; padding: .25rem .15rem; }
/* Steht die Leiste über dem Raster (iPad hoch, unter 980 px), ist sie so breit
   wie die Seite. Die Jahrgänge untereinander ließen drei Viertel leer und
   machten die Leiste 290 px hoch – jetzt stehen sie nebeneinander, bei 820 px
   drei je Zeile. */
@media (max-width: 980px) {
  .sidenav .chips {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    column-gap: 1.2rem; row-gap: .35rem;
  }
}
/* Im Termindialog enger: Der kompakte iPad-Dialog lässt die Tasten fließen und
   ist auf die Höhe ausgemessen – mit Punkt und alter Innenweite wären die
   21 Tasten 18 % breiter geworden, so sind es 2 %. */
.ev-klassen .chip { gap: .28rem; min-width: 2.6rem; padding: .2rem .42rem; }
.ev-klassen .chip::before { width: 6px; height: 6px; }
@media (pointer: coarse) { .chip, .sidenav .chip { min-height: 42px; } }
@media (prefers-reduced-motion: reduce) {
  .chip, .chip::before,
  .sidenav__wahl input[type="checkbox"], .sidenav__wahl input[type="checkbox"]::before { transition: none; }
}

/* ----------------------------------------------------------------- Karten */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  margin-bottom: var(--gap);
  overflow: hidden;
}
.card__head {
  padding: .85rem 1.05rem;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: var(--surface-2);
}
.card__head h2, .card__head h3 { margin: 0; }
.card__body { padding: clamp(.9rem, 2.2vw, 1.2rem); }
.card__body > :last-child { margin-bottom: 0; }

.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* ------------------------------------------------------------- Formulare */

.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; }
.field label { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.field .hint, .hint { font-size: .8rem; color: var(--muted); line-height: 1.45; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="time"], input[type="search"], input[type="number"], select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: .55rem .7rem;
  /* 16 px – alles darunter lässt Safari beim Antippen hineinzoomen. */
  font-size: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); }
/* Datum und Uhrzeit: Safari (iPad) gibt diesen Feldern eine eigene
   Mindestbreite und übergeht dafür `width: 100%` – in den schmalen
   Rasterzellen des Termindialogs ragten Datum, Beginn und Ende ineinander.
   `appearance: none` nimmt die Eigenbreite, `min-width: 0` lässt das Feld in
   seine Zelle schrumpfen; der Wert steht dann linksbündig wie im Textfeld. */
input[type="date"], input[type="time"] {
  -webkit-appearance: none; appearance: none;
  display: block; min-width: 0; max-width: 100%;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; min-width: 0; }
.field { min-width: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
textarea { min-height: 5rem; resize: vertical; line-height: 1.5; }
input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; min-height: 0;
  accent-color: var(--brand); flex: 0 0 auto;
}
label.row { min-height: var(--tap); cursor: pointer; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--tap);
  padding: .55rem 1.05rem;
  border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
  font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(29, 69, 78, .18);
  transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}
@media (hover: hover) {
  .btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
  .btn.secondary:hover { background: var(--surface-2); }
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn.secondary {
  background: var(--surface); color: var(--ink-soft);
  border-color: var(--line-strong); box-shadow: none;
}
.btn.danger { background: var(--danger); border-color: var(--danger); }
.btn.small { min-height: 36px; padding: .3rem .7rem; font-size: .86rem; font-weight: 550; }
.btn.link {
  min-height: 32px; background: none; border: 0; color: var(--brand-strong);
  text-decoration: underline; padding: .15rem 0; box-shadow: none;
  font-weight: 500; white-space: normal; text-align: left; justify-content: flex-start;
}
@media (pointer: coarse) { .btn.link { min-height: var(--tap); padding-block: .55rem; } }

/* ==================================================== Das Monatsraster ==== */

.kalenderkopf {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .8rem;
}
.kalenderkopf h2 { margin: 0 0 0 .3rem; }
.blaettern { display: inline-flex; gap: .3rem; flex: 0 0 auto; }
/* Das Datumsfeld hinter dem Kalendersymbol: unsichtbar, aber gezeichnet –
   `showPicker()` braucht ein Feld, das im Layout steht, und das Kalenderblatt
   des Browsers öffnet sich an seiner Stelle, also unter dem Symbol. */
.datum-wahl { position: relative; display: inline-flex; }
.datum-wahl input[type="date"] {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; min-height: 0;
  padding: 0; border: 0; opacity: 0; pointer-events: none;
}
.kalenderkopf .monat { font-variant-numeric: tabular-nums; }
/* Genau eine Klasse eingeblendet: ihr Name groß in der Kalenderfarbe (22.09.2026).
   Die Kalender der Schule stehen als kleine Marke daneben. */
#kalender-marke { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.marke-klasse {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  font-size: 1.45rem; font-weight: 700; line-height: 1; letter-spacing: -0.01em;
  color: var(--ink);
  padding: .3rem .8rem; border-radius: 999px;
  border: 2px solid var(--kal-farbe, var(--brand));
  background: color-mix(in srgb, var(--kal-farbe, var(--brand)) 18%, var(--surface));
  box-shadow: inset 0 -3px 0 -1px var(--kal-farbe, var(--brand));
  white-space: nowrap;
}

/* Die Wochentagsleiste sitzt über dem Raster und benutzt DASSELBE
   Spaltenraster – zwei getrennte Grids laufen sonst um ein Pixel auseinander,
   und das sieht man auf einem 7-spaltigen Kalender sofort. */
.wochentage, .monat-raster {
  display: grid;
  /* Vorn die schmale Spalte der Kalenderwoche. */
  grid-template-columns: 2.1rem repeat(7, minmax(0, 1fr));
  gap: 2px;
}
.kw {
  background: var(--surface-inset);
  display: flex; justify-content: center; padding-top: .45rem;
  font-size: .8rem; font-weight: 800; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.wochentage .kw-kopf { padding-left: 0; padding-right: 0; text-align: center; color: var(--faint); }
.kw-heute {
  font-size: .8rem; font-weight: 650; color: var(--muted);
  padding: .1rem .5rem; border: 1px solid var(--line-strong); border-radius: 999px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wochentage {
  margin-bottom: 2px;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700;
}
.wochentage span { padding: .35rem .5rem; }

/* Die Linien des Rasters sind der durchscheinende Grund zwischen den Feldern
   (gap 2px). Seit 22.09.2026 kräftiger als `--line` – die hellen Linien
   gingen zwischen den beigen Feldern unter (Rückmeldung). */
.monat-raster {
  background: var(--raster-linie);
  border: 1px solid var(--raster-linie);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* Ein Tagesfeld. `min-height` statt fester Höhe: Ein Tag mit fünf Terminen
   darf wachsen – die Alternative wäre ein „+3 weitere", das man antippen muss,
   um zu sehen, was man eigentlich sucht. */
.tag {
  background: var(--surface);
  min-height: 150px;
  padding: .3rem .35rem .4rem;
  display: flex; flex-direction: column; gap: .18rem;
  border: 0; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  position: relative;
}
@media (hover: hover) { .tag:hover { background: var(--brand-tint); } }
.tag:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; z-index: 2; }

.tag--wochenende { background: var(--surface-2); }

/* Ferien und Feiertage: der Tag selbst ist eingefärbt. **Kein** Termin, kein
   Eintrag, kein Abo - nur der Grund, auf dem die Termine liegen.

   ⚠️ Die Reihenfolge dieser drei Regeln ist die Sache: Sie stehen NACH
   `.tag--wochenende`, sonst gewönne bei gleicher Spezifität (0,1,0) die
   spätere - und ein Feiertag, der auf einen Samstag fällt, sähe aus wie ein
   gewöhnliches Wochenende. Genau der Fall, den man am Raster prüft. */
.tag--ferien   { background: var(--frei-ferien); }
.tag--feiertag { background: var(--frei-feiertag); }

/* Tage außerhalb des Monats bleiben sichtbar, aber zurückgenommen: Sie gehören
   zur Woche, und ein Termin am 30. September ist für die erste Oktoberwoche
   durchaus wichtig. Ausblenden wäre bequemer und falsch.

   Seit dem 22.09.2026 **richtig grau** (Wunsch): Der frühere Beigeton
   (`--surface-inset`) war vom Wochenende kaum zu unterscheiden. Grau gewinnt
   auch gegen Ferien und Feiertage – deshalb stehen diese Regeln NACH den
   Ferienregeln –, der Name des Abschnitts bleibt aber stehen. Ein ganztägiger
   Termin färbt auch hier schwarz (weiter unten, gedämpft). */
.tag--fremd,
.tag--fremd.tag--wochenende,
.tag--fremd.tag--ferien,
.tag--fremd.tag--feiertag { background: var(--fremd); }
.tag--fremd .tag__zahl { color: var(--fremd-schrift); }
.tag--fremd .tag__frei { color: var(--fremd-schrift); }
.tag--fremd .ev, .tag--fremd .ka { opacity: .8; }

/* Ganztägige Termine färben das GANZE Tagesfeld schwarz, weiße Schrift
   (Wunsch vom 19.09.2026). Ein mehrtägiger Termin färbt so jeden seiner Tage
   und wird zum Balken über die Woche. Steht NACH den Ferienregeln: Fällt der
   Termin in die Ferien, gewinnt der Termin – sonst sähe man ihn nicht. Der
   Feriename bleibt als heller Text stehen. Klassenarbeiten sind keine Termine
   und färben nichts; ihre gelbe Zeile bleibt auf Schwarz lesbar. */
.tag--ganztag,
.tag--ganztag.tag--wochenende,
.tag--ganztag.tag--ferien,
.tag--ganztag.tag--feiertag { background: #000; color: #fff; }
.tag--ganztag .tag__zahl { color: #fff; }
.tag--ganztag .tag__zahl::after { color: #ccc; }
.tag--ganztag .tag__frei { color: #ddd; }
.tag--ganztag.tag--fremd { opacity: .7; }
/* Der Heute-Kreis braucht auf Schwarz einen weißen Rand, sonst verschwindet er. */
.tag--heute.tag--ganztag .tag__zahl { box-shadow: 0 0 0 2px #fff; }

/* Der Name des Abschnitts - klein, gedeckt, und er nimmt den Terminen keinen
   Platz weg: `order` schiebt ihn unter die Tageszahl, aber über die Termine. */
.tag__frei {
  font-size: .68rem; font-weight: 650; line-height: 1.2;
  color: var(--frei-schrift);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Die Tageszahl – bei JEDEM Tag in derselben quadratischen Box.

   ⚠️ Das ist der Punkt: Beim heutigen Tag liegt in dieser Box ein farbiger
   Kreis, bei allen anderen ist sie leer. Weil es dieselbe Box ist, steht die
   Zahl überall an derselben Stelle. Zwei Fassungen davor taten es nicht:
   Erst lag der Kreis ÜBER der Zahl, dann stand die Zahl zentriert im Kreis und
   damit ein Stück weiter rechts als die Zahlen aller anderen Tage.

   `align-self: flex-start` ist dafür nötig: `.tag` ist ein Spalten-Flex, und
   ohne diese Zeile zöge sich die Box über die ganze Feldbreite – dann
   zentrierte `justify-content` die Zahl in der Mitte des Tagesfeldes.

   Der Kreis ist jetzt der HINTERGRUND der Box und kein positioniertes Kind
   mehr. Damit ist die Stapelfrage (§ A18) gar nicht mehr zu stellen, und die
   Form stimmt bei einer wie bei zwei Ziffern: Die Box ist quadratisch, nicht
   der Text. */
.tag__zahl {
  font-size: .82rem; font-weight: 650; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  align-self: flex-start;
  min-width: 1.5rem; min-height: 1.5rem;
  border-radius: 50%;
}
.tag--heute .tag__zahl {
  background: var(--brand);
  color: #fff;
}
/* In der Listenansicht (schmale Geräte) steht der lange Wochentag daneben; die
   Box ist dann keine quadratische mehr, sondern eine Pille um beides. */
@media (max-width: 620px) {
  .tag__zahl { border-radius: 999px; justify-content: flex-start; }
  .tag--heute .tag__zahl { padding: 0 .6rem; }
}

/* Ein Termin im Tagesfeld. **Die Kategorie ist die Fläche**, nicht ein
   Streifen an der Kante: Bei sieben Terminen in einer Woche ist die Farbe
   schneller zu lesen als der Text, und eine Fläche trägt bis in die letzte
   Reihe, wo ein 3-px-Streifen längst nicht mehr zu erkennen ist.

   Die Farbe steht in `--ev-farbe` und wird von dort aus benutzt, statt direkt
   in `background`. Der Umweg hat einen Grund: Der Ausdruck braucht dieselbe
   Farbe an einer **anderen** Stelle – dort ist sie wieder ein Streifen, weil
   eine volle Fläche auf Papier Toner frisst und die Schrift verschluckt (siehe
   den Druckblock am Dateiende). Ohne die Variable stünde die Liste der sieben
   Kategorien ein zweites Mal da, und die zweite wäre die, die man beim
   Hinzufügen einer achten vergisst. */
.ev {
  --ev-farbe: var(--kat-sonstiges);
  display: flex; align-items: center; gap: .3rem; width: 100%; text-align: left;
  font-size: .78rem; line-height: 1.25;
  padding: .18rem .4rem;
  border: 0;
  border-radius: 4px;
  background: var(--ev-farbe);
  color: #fff;
  cursor: pointer;
  overflow: hidden;
}
/* Der Text ist ein eigener Span (seit 22.09.2026, wegen der Nummer rechts):
   Er nimmt den Platz, wird abgeschnitten – die Uhrzeit und die Nummer nie. */
.ev__text, .ka__text {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ⚠️ Die Klassenarbeit bricht NICHT um (Rückmeldung 22.09.2026 abends): Eine
   umgebrochene Zeile war höher als ihre Nachbarn, und ungleich hohe Zeilen
   fielen mehr auf als ein abgeschnittener Text. Alle Arbeitszeilen haben
   dieselbe feste Höhe; was nicht passt, endet mit „…" und steht vollständig
   im Fenster beim Antippen. In schmalen Feldern fällt die Marke „KA" weg
   (siehe @container unten) – die gelbe Fläche und die Nummer sagen es schon. */
.ka { min-height: 1.55rem; }
/* Aufhellen statt Umfärben: Ein fester Hover-Ton würde die Kategorie genau in
   dem Moment verdecken, in dem man mit dem Zeiger auf ihr steht. */
@media (hover: hover) { .ev:hover { filter: brightness(1.15); } }
/* Der Fokusrahmen sitzt innen. Außen (der globale Wert) ragte er aus dem
   Tagesfeld heraus und wurde vom Nachbarfeld überdeckt. */
.ev:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* Die Uhrzeit trägt dasselbe Weiß wie der Titel und ist NICHT abgedunkelt.
   Ein durchscheinendes Weiß sah ruhiger aus, kam aber auf der hellsten Fläche
   nur noch auf 3.2:1 – und die Uhrzeit ist genau die Angabe, die man im Raster
   im Vorbeigehen liest. Getrennt wird über den Abstand, nicht über die Farbe. */
.ev__zeit { font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* Der Steg an der linken Kante trägt die **Kalenderfarbe** (seit dem
   12.09.2026). Die Fläche gehört der Kategorie – sie sagt, WAS ansteht; der
   Steg sagt, WEN es angeht. Beides ist nötig, seit alle Kalender in einem
   Raster liegen.

   Vorher hieß dieser Steg „das kann ich hier nicht ändern" (ein Schultermin in
   der Klassenansicht, `.ev--schule`). Diese Unterscheidung ist entfallen: Wer
   eintragen darf, darf es in allen drei Kalendern; wer nicht, in keinem. Ein
   Merkmal, das an jedem oder an keinem Termin klebt, sagt nichts. */
.ev {
  box-shadow: inset .19rem 0 0 var(--kal-farbe, transparent);
  /* Platz für den Steg: Ohne diese Zeile beginnt der Titel darunter, und bei
     einem kurzen Termin steht der erste Buchstabe halb im Farbstreifen. */
  padding-left: .64rem;
}

/* Die Einstellungen je Kalender (Adminbereich).

   Ein Block je Kalender, darin eine Zeile je Einstellung – links, WAS man
   einstellt, rechts, WIE. Nicht als Tabelle: Die müsste bei jeder weiteren
   Einstellung breiter werden, und auf dem iPad ist dafür kein Platz. So wächst
   sie nach unten.

   Unter 700 px rutscht das „Wie" unter das „Was": Ein Namensfeld, das sich
   eine Zeile mit seiner Beschriftung teilt, ist auf einem Telefon ein Feld von
   vier Zentimetern. */
.einstellungen { display: flex; flex-direction: column; gap: .9rem; }

.einstellblock {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-inset);
  padding: .75rem .85rem;
}
.einstellblock__kopf {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding-bottom: .55rem; margin-bottom: .35rem;
  border-bottom: 1px solid var(--line);
}

.einstellung {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: .3rem .9rem;
  align-items: start;
  padding: .45rem 0;
}
.einstellung + .einstellung { border-top: 1px solid var(--line); }
.einstellung__was {
  font-weight: 600; font-size: .88rem; color: var(--ink-soft);
  padding-top: .45rem;
}
.einstellung__wie { display: flex; flex-direction: column; gap: .3rem; }

/* Ein zugeklappter Abschnitt im Einstellungsfenster (Klassenkalender, Ferien).
   ⚠️ Ohne ihn wäre das Fenster an der echten Schule zwei Meter lang: 24
   Klassenblöcke mit je einem Namensfeld und zehn Farbpunkten. Zugeklappt sagt
   es, dass es sie gibt; aufgeklappt bleibt es an derselben Stelle. */
.einst-klappe {
  margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
.einst-klappe > summary {
  cursor: pointer; padding: .7rem .9rem; font-weight: 650;
  min-height: var(--tap); display: flex; align-items: center;
  border-radius: var(--r-md);
}
.einst-klappe[open] > summary { border-bottom: 1px solid var(--line); }
.einst-klappe > *:not(summary) { margin-left: .9rem; margin-right: .9rem; }
.einst-klappe > *:last-child { margin-bottom: .9rem; }
.einst-klappe > .einstellungen { margin-top: .7rem; }

/* Die Eingabezeile für einen beweglichen Ferientag: Was, von, bis, Knopf.
   Auf schmalen Geräten untereinander - drei Felder nebeneinander auf 375 px
   sind drei Felder, in die nichts hineinpasst. */
.ferien-neu {
  display: grid; gap: .6rem; align-items: end; margin-top: .8rem;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
}
.ferien-neu .field { margin: 0; }
@media (max-width: 700px) {
  .ferien-neu { grid-template-columns: minmax(0, 1fr); }
}

/* Eine Zwischenzeile in der Abo-Tabelle. Ohne sie stünden 27 gleich aussehende
   Zeilen untereinander, und die drei, die nach außen gehen, gingen unter. */
.gruppenzeile {
  background: var(--surface-inset);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); font-weight: 700;
}
@media (max-width: 700px) {
  .einstellung { grid-template-columns: minmax(0, 1fr); }
  .einstellung__was { padding-top: 0; }
}

/* Name + Knopf. Das Feld darf wachsen, der Knopf nicht – und beide bleiben
   auf einer Zeile, solange sie zusammen hineinpassen. */
.namensfeld { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.namensfeld input { flex: 1 1 14rem; min-width: 0; }
.namensfeld .btn { flex: 0 0 auto; }

.farbwahl { display: flex; gap: .35rem; flex-wrap: wrap; }
/* Berührungsziel: Der Punkt ist 1.1rem, die Schaltfläche darum herum größer –
   auf dem iPad trifft man 1.1rem nicht zuverlässig. */
.farbwahl__punkt {
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 2px var(--surface);
  cursor: pointer; padding: 0;
}
@media (hover: hover) { .farbwahl__punkt:hover { transform: scale(1.12); } }
.farbwahl__punkt.ist-gewaehlt {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--surface);
}
.farbwahl__punkt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Die Kalender-Häkchen im Termin-Dialog.

   Die Höhenbegrenzung stammt aus der Zeit der Klassenkalender (an einer Schule
   mit 34 Klassen waren das 35 Zeilen). Bei drei Kalendern greift sie nie - sie
   bleibt als Bremse stehen, damit eine vierte Kalenderart den Dialog nicht
   auseinanderschiebt und „Speichern" aus dem Bild drückt. */
.auch-wahl {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  max-height: 11rem;
  overflow-y: auto;
  padding: .3rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
}

.auch-wahl__punkt {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .26rem .3rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  /* Berührungsziel auf dem iPad: Eine Zeile von 1.6rem trifft man mit dem
     Finger nicht zuverlässig. */
  min-height: 2rem;
}

.auch-wahl__punkt:hover { background: var(--surface); }
.auch-wahl__punkt input[type="checkbox"] {
  margin: 0;
  accent-color: var(--kal-farbe, var(--brand));
}
.auch-wahl__punkt input:disabled + * { opacity: .55; }
/* Eine Zwischenüberschrift in der Kästchenliste („Kalender der Schule",
   „Klassen"). Sie nimmt die volle Breite des Flex-Behälters, damit die
   Kästchen darunter neu umbrechen. */
.auch-wahl__gruppe {
  flex: 1 0 100%; margin: .35rem 0 0;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); font-weight: 700;
}
.auch-wahl__gruppe:first-child { margin-top: 0; }
/* Bei 27 Kalendern darf die Liste im Dialog nicht das ganze Fenster füllen. */
.auch-wahl { max-height: 34vh; overflow-y: auto; }
.kalender-suche { margin-bottom: .45rem; }
/* Die Datumsfelder des Druckdialogs, solange das Monatsblatt gewählt ist: Sie
   zeigen den Monat aus der Ansicht und sind gesperrt - ein änderbares Feld,
   dessen Wert ignoriert wird, ist eine Lüge. */
.ist-gesperrt { opacity: .55; }

.ev[data-kat="Klassenarbeit"], .kat-wahl [data-kat="Klassenarbeit"] { --ev-farbe: var(--kat-klassenarbeit); }
.ev[data-kat="Prüfung"], .kat-wahl [data-kat="Prüfung"] { --ev-farbe: var(--kat-pruefung); }
.ev[data-kat="Ausflug"], .kat-wahl [data-kat="Ausflug"] { --ev-farbe: var(--kat-ausflug); }
.ev[data-kat="Elternabend"], .kat-wahl [data-kat="Elternabend"] { --ev-farbe: var(--kat-elternabend); }
.ev[data-kat="Konferenz"], .kat-wahl [data-kat="Konferenz"] { --ev-farbe: var(--kat-konferenz); }
.ev[data-kat="Ferien"], .kat-wahl [data-kat="Ferien"] { --ev-farbe: var(--kat-ferien); }
.ev[data-kat="Feiertag"], .kat-wahl [data-kat="Feiertag"] { --ev-farbe: var(--kat-feiertag); }

/* Mehrtägige Termine tragen eine Kante rechts – so sieht man im Raster, dass
   der Termin weitergeht, ohne dass Balken über Zellgrenzen gezeichnet werden
   müssten (das wäre ein eigenes Layoutverfahren). `currentColor` ist auf der
   Fläche das Weiß der Schrift und auf Papier das Schwarz – die Kante bleibt
   dadurch in beiden Fällen sichtbar, ohne zweimal genannt zu werden. */
.ev--mehrtaegig { border-right: 3px solid currentColor; }

/* Klassenarbeiten (seit 19.09.2026, aus WebUntis über Hermes): ein Hinweis im
   Klassenkalender, KEIN Termin – deshalb ein <span>, kein Knopf, und eine helle,
   gestrichelte Fläche statt der vollen Kategoriefarbe. Der Steg links trägt wie
   beim Termin die Farbe des Klassenkalenders: Er sagt, WEN es angeht. */
.ka {
  --kal-farbe: var(--kat-klassenarbeit);
  display: flex; align-items: center; gap: .3rem; width: 100%; text-align: left;
  font: inherit; font-size: .74rem; line-height: 1.25;
  padding: .12rem .4rem .12rem .64rem;
  border: 1px solid var(--ka-rand);
  border-radius: 4px;
  background: var(--ka-flaeche);
  color: var(--ink);
  cursor: pointer;
  box-shadow: inset .19rem 0 0 var(--kal-farbe);
  overflow: hidden;
}
.ka__zeit { font-variant-numeric: tabular-nums; color: var(--muted); flex: 0 0 auto; }
.ka__marke { font-weight: 700; color: var(--kat-klassenarbeit); flex: 0 0 auto; }
/* Das Tagesfeld ist ein Container: Ist es schmaler als 150 px, fällt in der
   Arbeitszeile die Marke „KA" weg, damit „5d Bio" noch hineinpasst. */
.tag { container-type: inline-size; }
@container (max-width: 150px) { .ka__marke { display: none; } }

/* Die laufende Nummer der Arbeit in der Woche ihrer Klasse (22.09.2026):
   1 grün, 2 gelb, ab 3 rot – ganz rechts, nie abgeschnitten. Auf der roten
   Terminfläche bekommt der Kreis einen weißen Ring, sonst verschwände die 3. */
.ka__nr {
  flex: 0 0 auto; margin-left: auto;
  min-width: 1.05rem; height: 1.05rem; padding: 0 .2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: .68rem; font-weight: 800; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums;
}
.ka__nr--1 { background: var(--ok); }
.ka__nr--2 { background: #e0b021; color: var(--ink); }
.ka__nr--3 { background: var(--danger); }
.ev .ka__nr { box-shadow: 0 0 0 1.5px #fff; }
/* … und auf dem Ausdruck: ein Strich statt einer Fläche, wie eine Zeile im Heft. */
.druck__ka {
  display: block; font-size: .62rem; line-height: 1.2; margin: .05rem 0;
  padding-left: .25rem; border-left: 2px solid var(--kal-farbe, #000);
  border-bottom: 1px dashed #999;
}

/* Auf schmalen Geräten wird aus dem Raster eine Liste. Ein 7-spaltiges Raster
   auf 375 px sind 50 px je Spalte – dort passt kein Terminname hinein, und
   niemand tippt zuverlässig auf das richtige Feld. */
@media (max-width: 620px) {
  .wochentage { display: none; }
  /* In der Liste steht die KW als eigene schmale Zwischenzeile vor dem Montag. */
  .kw { justify-content: flex-start; padding: .5rem .2rem 0; background: transparent; }
  .kw::before { content: "KW\00a0"; }
  .monat-raster { grid-template-columns: minmax(0, 1fr); background: transparent; border: 0; }
  .tag { min-height: 0; border-radius: var(--r-sm); border: 1px solid var(--line); }
  /* Leere Tage aus Nachbarmonaten würden die Liste verdoppeln, ohne etwas zu
     zeigen. */
  .tag--fremd:not(.tag--voll) { display: none; }
  .tag__zahl::after { content: attr(data-lang); font-weight: 500; color: var(--muted); margin-left: .3rem; }
  .ev { font-size: .85rem; }
  .ev__text { white-space: normal; }
}

/* Die Leiste „neue Fassung" (data.js). Unten, nicht oben: Oben liegt die
   Kopfzeile, und eine Meldung, die den Abmelde-Knopf verdeckt, ist eine
   Meldung, die im Weg steht. */
.fassung {
  position: fixed; z-index: 50;
  left: 50%; transform: translateX(-50%);
  bottom: calc(.8rem + env(safe-area-inset-bottom));
  max-width: min(38rem, calc(100vw - 1.6rem));
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .9rem;
  background: var(--ink); color: #fff;
  border-radius: var(--r-md);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
  font-size: .88rem; line-height: 1.35;
}
.fassung .btn { flex: 0 0 auto; }

/* ------------------------------------------------------------ Termin-Dialog */

/* Das Einstellungsfenster darf breiter sein als der Termindialog: Darin liegt
   eine Palette aus zehn Punkten neben einem Namensfeld. */
#dlg-einstellungen { width: min(720px, calc(100vw - 1.6rem)); }
#dlg-einstellungen, #dlg-weitergeben { padding: clamp(1rem, 3vw, 1.4rem); }
/* Weitergeben trägt eine Tabelle mit Adressen – so breit wie möglich. */
#dlg-weitergeben { width: min(1040px, calc(100vw - 1.6rem)); }

/* Der Termindialog: **vier Karten in zwei Reihen** (22.09.2026, nach dem
   Bildentwurf der Schuladministration). Oben Kalender und Kategorie, unten die
   Angaben und „Wer soll den Termin sehen?" (die Klassen). Eine Karte ohne
   Inhalt wird von calendar.js ausgeblendet, die Nachbarin nimmt dann die ganze
   Reihe (`.ev-karte--breit`). Unter 760 px alles untereinander. */
#dlg-event { width: min(1000px, calc(100vw - 1.6rem)); }
#dlg-event form { padding: clamp(.9rem, 2.4vw, 1.2rem) clamp(1rem, 3vw, 1.4rem); }
#dlg-event .dialog-head { margin-bottom: .6rem; }
#dlg-event .field { margin-bottom: .7rem; }
#dlg-event textarea { min-height: 3.6rem; }
#dlg-event .dialog-actions { margin-top: .6rem; padding-top: .8rem; }
.ev-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .8rem; align-items: start;
}
.ev-karte {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); padding: .85rem .95rem .6rem;
  min-width: 0;
}
.ev-karte--breit { grid-column: 1 / -1; }
.ev-karte__titel {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 0 .6rem; font-size: 1rem; color: var(--ink);
}
.ev-karte__titel svg { color: var(--brand); flex: 0 0 auto; }
.ev-karte .hint { margin: -.3rem 0 .6rem; }
/* Das kleine ⓘ neben einer Überschrift – der Text steht im title-Attribut. */
.info { color: var(--faint); font-size: .95rem; cursor: help; margin-left: .1rem; }
.pflicht { color: var(--danger); font-weight: 700; margin-left: .15rem; }

/* Die Kalender der Schule als große Karten. Gewählt: Rand und zarte Fläche in
   der Kalenderfarbe, ein Haken oben rechts. Dieselbe Bedienung wie eine Taste,
   nur größer – es sind drei, nicht 21. */
.kal-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .55rem; }
.kal-karte {
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-start;
  min-height: 5.2rem; padding: .7rem .8rem; margin: 0;
  border: 2px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink-soft);
  font: inherit; font-size: .9rem; font-weight: 600; line-height: 1.25; text-align: left;
  cursor: pointer;
}
.kal-karte__zeile { display: flex; align-items: center; justify-content: space-between; width: 100%; color: var(--kal-farbe, var(--brand)); }
.kal-karte__haken {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  border: 1.5px solid var(--line-strong); color: transparent; background: var(--surface);
}
.kal-karte__name { overflow-wrap: break-word; hyphens: auto; }
.kal-karte[aria-pressed="true"] {
  border-color: var(--kal-farbe, var(--brand)); color: var(--ink);
  background: color-mix(in srgb, var(--kal-farbe, var(--brand)) 14%, var(--surface));
}
.kal-karte[aria-pressed="true"] .kal-karte__haken {
  background: var(--kal-farbe, var(--brand)); border-color: var(--kal-farbe, var(--brand)); color: #fff;
}
@media (hover: hover) { .kal-karte:hover { background: var(--brand-tint); } }
.kal-karte:disabled { opacity: .55; cursor: not-allowed; }
.kal-karten .empty { grid-column: 1 / -1; padding: 1rem; }

/* Datum, „Bis" und die beiden Schalter in einer Zeile; die Schalter mit
   einer Unterzeile („Uhrzeit nicht erforderlich"). */
.ev-datumzeile { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-start; }
.ev-datumzeile .field { flex: 1 1 11rem; margin-bottom: .5rem; }
.ev-schalter { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 11rem; padding-top: 1.45rem; }
.ev-schalter__wahl {
  display: flex; align-items: flex-start; gap: .55rem; cursor: pointer;
  min-height: 2.2rem; padding: .15rem 0;
}
.ev-schalter__wahl input[type="checkbox"] { margin-top: .2rem; }
.ev-schalter__wahl span { display: flex; flex-direction: column; line-height: 1.2; }
.ev-schalter__wahl strong { font-weight: 600; font-size: .92rem; }
.ev-schalter__wahl small { font-size: .74rem; color: var(--muted); }
.ev-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; }
/* Solange „Ganztägig" gilt, treten Beginn und Ende zurück – auf dem iPad
   zeigt Safari ein leeres Zeitfeld ohne „--:--", und zwei leere Kästen sahen
   aus wie ein Fehler. Anfassbar bleiben sie: Eine Zeit eintragen nimmt
   „Ganztägig" weg (bindeBedienung()). */
#ev-zeiten.ist-aus { opacity: .5; }
.zaehler { align-self: flex-end; font-size: .74rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.ev-klassen { min-height: 3rem; }
.ev-klassen .chips { padding-left: 0; padding-right: 0; }
@media (max-width: 760px) {
  .ev-raster { grid-template-columns: minmax(0, 1fr); }
  .ev-karte--breit { grid-column: auto; }
  .ev-schalter { padding-top: 0; }
}

/* Das Fenster zu einer Klassenarbeit: schmal, eine Angabe je Zeile. */
.dlg-klein { width: min(440px, calc(100vw - 1.6rem)); padding: clamp(1rem, 3vw, 1.4rem); }
.ka-details { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .35rem .8rem; margin: 0 0 .8rem; }
.ka-details dt { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding-top: .1rem; }
.ka-details dd { margin: 0; overflow-wrap: anywhere; }

dialog {
  width: min(620px, calc(100vw - 1.6rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  border: 0; padding: 0;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  color: var(--ink); background: var(--surface);
}
dialog::backdrop { background: rgba(35, 32, 26, .5); backdrop-filter: blur(2px); }
dialog form { padding: clamp(1rem, 3vw, 1.4rem); }
.dialog-head { display: flex; justify-content: space-between; align-items: start; margin: -.1rem 0 1rem; gap: .5rem; }
.dialog-head h2 { margin: 0; }
.eyebrow { margin: 0 0 .15rem; text-transform: uppercase; letter-spacing: .08em;
           font-size: .72rem; font-weight: 700; color: var(--muted); }
.icon-btn { border: 0; background: transparent; color: var(--muted); font-size: 2rem;
            line-height: 1; cursor: pointer; min-width: var(--tap); min-height: var(--tap); }

/* Ein Knopf, der nur ein Zeichen trägt (das Zahnrad in der Kopfzeile). Quadratisch
   und mit dem vollen Berührungsziel: Ein 18-px-Symbol trifft man mit dem Finger
   nicht. Der Name steht in `aria-label` und `title` – ohne beides wäre der Knopf
   für einen Vorleser und für die Maus namenlos. */
.btn.icon-nur {
  padding: 0; width: var(--tap); min-width: var(--tap); height: var(--tap);
}
.btn.icon-nur svg { display: block; }
.btn.small.icon-nur { width: 36px; min-width: 36px; height: 36px; }
.dialog-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
                  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* Die Kategorienwahl als Farbknöpfe – schneller als ein Auswahlfeld und
   zeigt zugleich, welche Farbe der Termin im Raster bekommt. */
.kat-wahl { display: flex; flex-wrap: wrap; gap: .35rem; }
.kat-wahl { gap: .45rem; }
.kat-wahl button {
  --ev-farbe: var(--kat-sonstiges);
  border: 1px solid color-mix(in srgb, var(--ev-farbe) 35%, var(--line-strong));
  background: color-mix(in srgb, var(--ev-farbe) 9%, var(--surface));
  border-radius: var(--r-sm); padding: .4rem .8rem; cursor: pointer;
  font-size: .88rem; min-height: 40px; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: .45rem;
}
.kat-wahl button[aria-pressed="true"] {
  border-color: var(--ev-farbe); border-width: 2px; padding: calc(.4rem - 1px) calc(.8rem - 1px);
  background: color-mix(in srgb, var(--ev-farbe) 20%, var(--surface));
  color: var(--ink); font-weight: 650;
}
.kat-punkt { width: .65rem; height: .65rem; border-radius: 50%; background: var(--ev-farbe, var(--kat-sonstiges)); flex: 0 0 auto; }
@media (pointer: coarse) { .kat-wahl button { min-height: var(--tap); } }

/* ------------------------------------------------------------- Tabellen */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 700;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
code, .mono {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .86em;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- Marken */

.badge {
  display: inline-block; padding: .16rem .55rem; border-radius: 999px;
  font-size: .76rem; font-weight: 650; letter-spacing: .01em;
  background: var(--neutral-soft); color: var(--ink-soft);
  white-space: nowrap;
}
.badge.ok      { background: var(--ok-soft); color: var(--ok); }
.badge.info    { background: var(--info-soft); color: var(--info); }
.badge.warn    { background: var(--warn-soft); color: var(--warn); }
.badge.danger  { background: var(--danger-soft); color: var(--danger); }

.notice {
  border-radius: var(--r-md); padding: .75rem .95rem; margin-bottom: 1rem;
  border: 1px solid var(--line-strong); background: var(--surface-2);
  border-left-width: 4px;
}
.notice.ok     { background: var(--ok-soft); border-color: #bcd9c7; border-left-color: var(--ok); }
.notice.warn   { background: var(--warn-soft); border-color: #e2cfa6; border-left-color: var(--warn); }
.notice.error  { background: var(--danger-soft); border-color: #e2bcae; border-left-color: var(--danger); }

.empty { padding: 2.4rem 1rem; text-align: center; color: var(--muted); }

/* ===================================== Fingerbedienung (iPad) ====
   ⚠️ Dieser Block steht bewusst am ENDE der Bildschirmregeln: Er ändert
   Eigenschaften, die `.ev` und `.ka` weiter oben ebenfalls setzen (Schrift,
   Höhe, Abstände), und bei gleicher Spezifität gewinnt die spätere Regel.
   Bis zum 22.09.2026 abends stand er vor `.ev`/`.ka` – und griff auf dem
   iPad deshalb nur zur Hälfte (im Rahmen-Test aufgefallen).

   Auf dem iPad (grober Zeiger, 22.09.2026): Die kleinen Knöpfe im Kopf und die
   Terminzeilen im Raster waren mit dem Finger kaum zu treffen, und eine
   abgeschnittene Zeile „07:55 KA 5d …" hatte keinen Tooltip, der sie ergänzt.
   Deshalb hier: volle Berührungshöhe für kleine Knöpfe, Terminzeilen mindestens
   34 px hoch und **umbrechend** statt abgeschnitten – das Tagesfeld wächst
   mit. Am Schreibtisch bleibt alles wie gehabt. */
@media (pointer: coarse) {
  .btn.small { min-height: var(--tap); }
  .btn.small.icon-nur { width: var(--tap); min-width: var(--tap); height: var(--tap); }
  /* 30 px für Termine, 26 px für Arbeiten (Rückmeldung vom echten iPad:
     34 px waren „zu hoch"). Das Berührungsziel ist ohnehin das Tagesfeld;
     die Zeile selbst öffnet nur das Fenster mit den Angaben. */
  .ev, .ka {
    min-height: 30px; line-height: 1.3;
    font-size: .84rem; padding-top: .2rem; padding-bottom: .2rem;
  }
  /* Termine dürfen umbrechen (sie sind selten und unterschiedlich lang), die
     Arbeitszeilen bleiben einzeilig und gleich hoch. `break-word` statt
     `anywhere`: „Theater Mannheim" brach sonst als „Mannhei|m", obwohl das
     Wort in die Zeile passt. */
  .ev__text { white-space: normal; overflow-wrap: break-word; hyphens: auto; }
  .ka { font-size: .8rem; min-height: 26px; padding-top: .1rem; padding-bottom: .1rem; }
  .tag { gap: .25rem; }
}

/* ⚠️ Die beiden Container-Regeln stehen NACH dem Fingerbedienungs-Block:
   Sie setzen die Schrift der Arbeitszeile kleiner, als er sie setzt.
   Auf dem iPad sind die Felder 87–95 px breit (Rahmen-Test 22.09.2026): Dort
   fällt auch die Uhrzeit weg – „5d Bio" und die Nummer sind das, was man
   braucht; die Zeit steht im Fenster beim Antippen. */
@container (max-width: 118px) { .ka__zeit { display: none; } }
/* iPad quer mit Leiste daneben: 87 px je Feld. Dann etwas kleiner gesetzt,
   damit „5d Bio" neben der Nummer noch steht. */
@container (max-width: 100px) {
  .ka { font-size: .72rem; gap: .2rem; padding-right: .3rem; }
  .ka__nr { min-width: .95rem; height: .95rem; font-size: .6rem; padding: 0 .15rem; }
}

/* ============================ Niedrige Bildschirme: der Termindialog ====
   iPad quer (≈ 1180 × 650 sichtbar) und kleine Laptops: Die vier Karten
   rollten, „Termin speichern" lag unter der Kante (echtes iPad, 22.09.2026).
   Unter 820 px Höhe wird der Dialog dichter: Kalender als Pillen statt großer
   Karten, Kategorien kleiner, Klassen fließend statt eine Reihe je Jahrgang,
   Ort und Notiz nebeneinander, weniger Polster. Die Bedienung ist dieselbe. */
@media (max-height: 820px) {
  #dlg-event { width: min(1120px, calc(100vw - 1rem)); max-height: calc(100svh - 1rem); }
  #dlg-event form { padding: .7rem 1rem .8rem; }
  #dlg-event .dialog-head { margin: 0 0 .4rem; }
  #dlg-event .dialog-head h2 { font-size: 1.1rem; }
  #dlg-event .eyebrow { margin-bottom: .05rem; }
  .ev-raster { gap: .6rem; }
  .ev-karte { padding: .55rem .75rem .35rem; }
  .ev-karte__titel { margin-bottom: .4rem; font-size: .92rem; }
  .ev-karte .hint { margin: -.2rem 0 .4rem; }
  .kal-karten { display: flex; flex-wrap: wrap; gap: .4rem; }
  .kal-karte {
    flex-direction: row; align-items: center; gap: .4rem;
    min-height: 40px; padding: .25rem .8rem .25rem .6rem;
    border-radius: 999px; font-size: .86rem;
  }
  .kal-karte__zeile { display: contents; }
  .kal-karte__zeile > svg { width: 16px; height: 16px; order: 1; color: var(--kal-farbe, var(--brand)); }
  .kal-karte__name { order: 2; }
  .kal-karte__haken { order: 3; width: 1.05rem; height: 1.05rem; }
  .kat-wahl { gap: .35rem; }
  .kat-wahl button { min-height: 34px; padding: .2rem .6rem; font-size: .82rem; }
  .kat-wahl button[aria-pressed="true"] { padding: calc(.2rem - 1px) calc(.6rem - 1px); }
  #dlg-event .field { margin-bottom: .45rem; gap: .2rem; }
  #dlg-event .field label { font-size: .8rem; }
  #dlg-event input[type="text"], #dlg-event input[type="date"], #dlg-event input[type="time"],
  #dlg-event textarea { min-height: 40px; padding: .35rem .6rem; }
  #dlg-event textarea { min-height: 2.5rem; }
  /* Die Angaben-Karte als Raster in drei Spalten (echtes iPad: bei ≈ 610 px
     sichtbarer Höhe lag „Termin speichern" noch unter der Kante):
       Thema (2 Spalten) | Ganztägig/Mehrtägig
       Datum | Beginn | Ende          („Bis" rückt bei Mehrtägig dazu)
       Ort   | Notiz (2 Spalten)
     Die Zwischenbehälter lösen sich mit `display: contents` auf, damit ihre
     Felder direkt im Raster stehen. */
  .ev-raster { align-items: stretch; }
  #ev-angaben-feld { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 .6rem; align-content: start; }
  #ev-angaben-feld .ev-datumzeile, #ev-angaben-feld #ev-zeiten, #ev-angaben-feld .ev-ort-notiz { display: contents; }
  /* Feste Plätze in zwölf Spalten, weil die DOM-Reihenfolge (Datum, Bis,
     Schalter, Beginn, Ende) nicht die Zeilenfolge ist:
       1: Thema  ·  2: Datum | Beginn | Ende  ·  3: Schalter  ·  4: Ort | Notiz
     Mit „Mehrtägig" rückt „Bis" in Zeile 2 dazu – vier Felder à drei Spalten
     statt drei à vier; der Dialog wird dadurch nicht höher. */
  #ev-angaben-feld > .field:first-child { grid-row: 1; grid-column: 1 / -1; }
  #ev-angaben-feld .ev-datumzeile > .field:first-child { grid-row: 2; grid-column: 1 / 5; }
  #ev-angaben-feld #ev-zeiten .field:first-child { grid-row: 2; grid-column: 5 / 9; }
  #ev-angaben-feld #ev-zeiten .field:last-child { grid-row: 2; grid-column: 9 / 13; }
  #ev-angaben-feld #ev-ende-feld { grid-row: 2; grid-column: 4 / 7; }
  #ev-angaben-feld:has(#ev-ende-feld:not(.hidden)) .ev-datumzeile > .field:first-child { grid-column: 1 / 4; }
  #ev-angaben-feld:has(#ev-ende-feld:not(.hidden)) #ev-zeiten .field:first-child { grid-column: 7 / 10; }
  #ev-angaben-feld:has(#ev-ende-feld:not(.hidden)) #ev-zeiten .field:last-child { grid-column: 10 / 13; }
  /* Die zwei Schalter in EINER Zeile, ohne die Unterzeilen – „Von einem Tag
     bis zu einem anderen" brach dreifach um. */
  #ev-angaben-feld .ev-schalter { grid-row: 3; grid-column: 1 / -1; flex-direction: row; gap: 1.4rem; padding: 0 0 .4rem; align-self: center; }
  #ev-angaben-feld .ev-ort-notiz .field:first-child { grid-row: 4; grid-column: 1 / 7; }
  #ev-angaben-feld .ev-ort-notiz .field:last-child { grid-row: 4; grid-column: 7 / 13; }
  .ev-schalter__wahl { min-height: 1.8rem; align-items: center; }
  .ev-schalter__wahl input[type="checkbox"] { margin-top: 0; }
  .ev-schalter__wahl small { display: none; }
  /* Das Notizfeld einzeilig; sein Platzhalter bricht in der halben Breite um
     und zeigte sonst eine Rollleiste in einem leeren Feld. */
  #dlg-event textarea { min-height: 42px; height: 42px; }
  #dlg-event textarea:not(:focus) { overflow: hidden; }
  .ev-schalter__wahl { min-height: 1.9rem; padding: .05rem 0; }
  .ev-schalter__wahl small { font-size: .7rem; }
  .ev-klassen .chips { flex-direction: row; flex-wrap: wrap; gap: .3rem; padding: 0; }
  .ev-klassen .chips__reihe { display: contents; }
  #dlg-event .dialog-actions { margin-top: .4rem; padding-top: .5rem; }
}

/* ================================= iPad quer: der ganze Monat im Bild ====
   Im Querformat (≈ 650 px sichtbar) rollte der Monat (echtes iPad,
   22.09.2026). Jetzt füllt das Raster die Bildschirmhöhe: Zeilen teilen sich
   den Platz, ein Feld mit mehr Einträgen wächst trotzdem (minmax(0, 1fr) auf
   einem MINDEST-Maß). Im Kopf fallen die laufende KW und die kleine Marke
   neben der großen Klasse weg – sonst brach der Kopf in zwei Zeilen und
   kostete genau die Höhe, die dem Raster fehlte. `--raster-abzug` ist alles
   über und unter dem Raster (Kopfzeile, Karte, Wochentage, Hinweis), im
   Rahmen gemessen. */
@media (pointer: coarse) and (orientation: landscape) {
  :root { --raster-abzug: 232px; }
  .wrap { padding-bottom: .8rem; }
  .kw-heute { display: none; }
  #kalender-marke .marke-klasse + .badge { display: none; }
  .marke-klasse { font-size: 1.2rem; padding: .2rem .65rem; }
  .kalenderkopf { margin-bottom: .5rem; }
  /* ⚠️ `svh`, nicht `dvh`: Beim Rollen fährt Safaris Adressleiste ein, `dvh`
     wächst um ihre Höhe – und mit ihm jede Zeile des Rasters, mitten im
     Rollen (echtes iPad, 22.09.2026: „die Zeilenhöhen wachsen plötzlich").
     `svh` ist die kleinste Höhe und bleibt stehen. */
  .monat-raster { min-height: calc(100svh - var(--raster-abzug)); grid-auto-rows: minmax(0, 1fr); }
  .tag { min-height: 0; padding-top: .15rem; }
  .tag__zahl { min-height: 1.3rem; }
  .kw { padding-top: .2rem; }
  #raster-hinweis { margin-top: .4rem; }
}

/* ---------------------------------------------------------------- Druck */

/* **Gedruckt wird `#druckblatt`, nicht die Seite.**

   Der naheliegende Weg wäre, die Monatsansicht per `@media print` zurechtzu-
   biegen - und er trägt genau so weit wie der gerade gezeigte Monat. Eine Liste
   „alle Termine bis zu den Sommerferien" ist damit nicht zu machen: Der Browser
   druckt, was im Dokument steht.

   `druck.js` baut das Blatt, setzt `body.druckt` und ruft `print()`. Nach dem
   Drucken wird beides wieder weggeräumt - ein stehengebliebenes Blatt wäre beim
   nächsten Ctrl+P des Browsers der Ausdruck, mit den Terminen von vorhin. */
#druckblatt { display: none; }

@media print {
  :root { --gap: 0; }

  /* **Querformat ist die Vorgabe**, und das ist keine Vorliebe: Das
     Monatsblatt hat sieben Spalten, und hochkant sind das 25 mm je Tag - dort
     bricht ein Terminname nach zwei Zeichen um.

     Die **Liste** dagegen ist eine Spalte und stünde quer halb leer. Sie
     bekommt deshalb eine eigene benannte Seite. ⚠️ Wo `page:` nicht
     unterstützt wird (ältere Browser), druckt die Liste quer - unschön, aber
     vollständig. Ein Rückfall, der etwas weglässt, wäre der falsche. */
  @page { margin: 12mm; size: A4 landscape; }
  @page liste { size: A4 portrait; }

  body { background: #fff; background-image: none; font-size: 10pt; color: #000; }
  a { text-decoration: none; color: #000; }

  /* ⚠️ Alles außer dem Blatt verschwindet - **einschließlich** der offenen
     Dialoge. Ein `<dialog open>` liegt in der Top-Layer-Ebene des Browsers und
     ist von `display: none` am Elternteil NICHT betroffen; ohne die eigene
     Regel läge der Druckdialog über dem Ausdruck. */
  body.druckt > *:not(#druckblatt) { display: none !important; }
  body.druckt dialog { display: none !important; }
  body.druckt #druckblatt { display: block; }

  /* Der Kopf steht auf jedem Blatt der ersten Seite: Wer, was, welcher
     Zeitraum, welche Kalender. Ein Aushang ohne Absender ist ein Zettel. */
  .druck__kopf {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8mm;
    border-bottom: 1pt solid #333; padding-bottom: 2mm; margin-bottom: 3mm;
  }
  .druck__schule { margin: 0; font-size: 9pt; color: #444; }
  .druck__titel { margin: 0; font-size: 16pt; line-height: 1.1; }
  .druck__quellen { margin: 0; font-size: 8.5pt; color: #444; text-align: right; max-width: 80mm; }

  /* ---- Monatsblatt ---- */

  .druck__wochentage, .druck__raster {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
  }
  .druck__wochentage {
    font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #444; border-bottom: .5pt solid #999;
  }
  .druck__wochentage span { padding: 1mm 1.5mm; }

  .druck__tag {
    border: .5pt solid #bbb;
    /* Negative Ränder zusammenziehen, damit zwischen zwei Zellen eine Linie
       steht und nicht zwei. */
    margin: -.25pt 0 0 -.25pt;
    min-height: 24mm;
    padding: 1mm 1.5mm 1.5mm;
    break-inside: avoid;
    display: flex; flex-direction: column; gap: .6mm;
  }
  .druck__tag--fremd { background: #f4f4f2; color: #666; }
  .druck__zahl { font-size: 9pt; font-weight: 700; }

  /* Ferien und Feiertage auf Papier: ein heller Grund und der Name darüber.
     ⚠️ `print-color-adjust` ist nötig - sonst wirft der Browser beim Drucken
     jede Hintergrundfarbe weg („Hintergrundgrafiken" ist standardmäßig aus),
     und die Ferienwoche sähe aus wie jede andere. Bei einem Schwarz-Weiß-Gerät
     bleibt daraus ein sehr helles Grau; genau das ist gewollt. */
  .druck__tag--ferien,
  .druck__tag--feiertag {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .druck__tag--ferien   { background: var(--frei-ferien); }
  .druck__tag--feiertag { background: var(--frei-feiertag); }
  .druck__frei { font-size: 7.5pt; font-weight: 700; color: #6b5d42; }
  /* Ganztägige Termine: das ganze Feld schwarz, wie am Bildschirm – auch in
     Schwarz-weiß (das ist ja schon Schwarz). Kostet Toner; so bestellt. */
  .druck__tag--ganztag,
  .druckblatt--sw .druck__tag--ganztag {
    background: #000; color: #fff;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .druck__tag--ganztag .druck__frei { color: #ddd; }
  .druck__tag--ganztag .druck__ka { color: #fff; border-bottom-color: #888; }

  /* Ein Termin im Monatsblatt. **Die Kategorie ist ein Streifen, keine
     Fläche** - dreißig farbige Kästen je Seite kosten Toner, den keine Schule
     für einen Monatsplan ausgibt, und auf dem Schwarz-Weiß-Drucker im
     Lehrerzimmer wird aus der Fläche ein grauer Kasten mit weißer Schrift
     darin, also nichts. */
  .druck__ev {
    display: block; font-size: 7.5pt; line-height: 1.25;
    padding-left: 1.2mm;
    border-left: .8mm solid var(--ev-farbe, #7c756c);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    overflow-wrap: anywhere;
  }
  .druck__ev b { font-variant-numeric: tabular-nums; }

  /* ---- Liste ---- */

  .druck__liste {
    page: liste;   /* Hochformat - siehe @page oben */
    width: 100%; border-collapse: collapse; font-size: 9pt;
  }
  .druck__liste th {
    text-align: left; font-size: 7.5pt; text-transform: uppercase; letter-spacing: .04em;
    color: #444; border-bottom: .8pt solid #666; padding: 1mm 2mm 1mm 0;
    background: none;
  }
  .druck__liste td {
    padding: 1.4mm 2mm 1.4mm 0; border-bottom: .4pt solid #ccc;
    vertical-align: top; break-inside: avoid;
  }
  /* Die Kopfzeile auf jeder Folgeseite wiederholen - eine Tabelle, deren
     Spalten man auf Seite 2 raten muss, ist keine. */
  .druck__liste thead { display: table-header-group; }
  .druck__wann { white-space: nowrap; font-variant-numeric: tabular-nums; width: 34mm; }
  .druck__zeit { white-space: nowrap; font-variant-numeric: tabular-nums; width: 20mm; color: #444; }
  .druck__wo   { color: #444; width: 40mm; }
  .druck__notiz { display: block; font-size: 8pt; color: #444; }
  .druck__strich {
    display: inline-block; width: 1.4mm; height: 2.6mm; margin-right: 1.2mm;
    background: var(--ev-farbe, #7c756c); vertical-align: baseline;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .druck__zeile--frei td { background: #f6f4ee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .druck__leer { margin-top: 8mm; color: #444; }

  /* Die Wochennummer der Klassenarbeit auf Papier (22.09.2026): derselbe
     Kreis wie am Bildschirm, 1 grün, 2 gelb, ab 3 rot. Schwarz-weiß: ein
     weißer Kreis mit schwarzem Rand – die Zahl trägt die Aussage, nicht die
     Farbe. `print-color-adjust`, sonst fällt die Fläche weg. */
  .druck__nr {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 3.6mm; height: 3.6mm; padding: 0 .6mm; margin-left: 1mm;
    border-radius: 999px; font-size: 6.5pt; font-weight: 800; line-height: 1;
    color: #fff; vertical-align: middle;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .druck__nr--1 { background: var(--ok); }
  .druck__nr--2 { background: #e0b021; color: #000; }
  .druck__nr--3 { background: var(--danger); }
  .druck__tag--ganztag .druck__nr { box-shadow: 0 0 0 .4mm #fff; }

  /* ---- Schwarz-weiß ---- */

  .druckblatt--sw .druck__nr { background: #fff; color: #000; border: .4mm solid #000; }

  /* Kein `filter: grayscale` - der färbt die Streifen in fünf kaum
     unterscheidbare Grautöne um. Hier verschwindet die Farbe ganz und die
     Kategorie steht als schwarzer Streifen; unterschieden wird über den Text,
     nicht über einen Grauwert, den kein Drucker gleich wiedergibt. */
  .druckblatt--sw .druck__ev { border-left-color: #000; }
  .druckblatt--sw .druck__strich { background: #000; }
  .druckblatt--sw .druck__tag--ferien,
  .druckblatt--sw .druck__tag--feiertag { background: #f0f0f0; }
  .druckblatt--sw .druck__zeile--frei td { background: #f0f0f0; }
  .druckblatt--sw .druck__frei { color: #000; }
}