:root {
  --brand-red: #c8102e;
  --brand-red-dark: #9c0c23;
  --brand-white: #ffffff;
  --text: #2a2a2a;
  --muted: #757575;
  --border: #e8e0e1;
  --tile-bg: #ffffff;
  --tile-shadow: 0 1px 3px rgba(200, 16, 46, 0.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--brand-white);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header.topbar {
  background: var(--brand-red);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

header.topbar a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

header.topbar nav a {
  margin-left: 16px;
  font-weight: 400;
  opacity: 0.9;
}

/* Oeffentliche Kopfzeile (public/index.php, kalender/, stundenplan/,
   impressum/, datenschutz/): grosser, klickbarer Titel links (fuehrt immer
   zur Startseite) + rechts zwei Pillen-Buttons zu den beiden oeffentlichen
   Uebersichten, auf allen fuenf Seiten identisch - ersetzt den bisherigen
   reinen <span> ohne jede Navigation (Nutzer-Wunsch 25.08.2026: "rechts,
   dass man von jeder seite auf jede seite kommt"). Eigene, schmal gescopte
   Klassen statt Aenderung an .topbar-brand/.topbar-right (Admin-Bereich,
   nav.php) - dort andere Struktur (Ausklapp-Menue statt fester Buttons). */
.topbar-public {
  flex-wrap: wrap;
  row-gap: 10px;
}

/* Nutzer-Wunsch 30.08.2026: die oeffentliche Kopfzeile soll NICHT am oberen
   Bildschirmrand kleben, sondern beim Scrollen ganz normal mit dem
   Seiteninhalt nach oben aus dem Sichtbereich wandern - anders als bislang
   (header.topbar oben ist "position: sticky"). Betrifft ausdrueckl. nur die
   oeffentliche Seite - der Admin-Header (nav.php, nur Klasse "topbar" ohne
   "topbar-public") bleibt bewusst unveraendert sticky, dort ist ein eigenes
   Mobile-Redesign fuer spaeter offen. "relative" statt "static", damit der
   Header weiterhin der Positionierungs-Kontext fuer das absolut positio-
   nierte Logo (.topbar-logo-link) bleibt - mit "static" wuerde sich das
   Logo sonst am naechsten positionierten Vorfahren (z.B. body) statt am
   Header selbst ausrichten. Hoehere Spezifitaet (Element+2 Klassen) noetig,
   um das "position: sticky" von header.topbar zuverlaessig zu ueberschreiben. */
header.topbar.topbar-public {
  position: relative;
}
.topbar-public-title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.topbar-public-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.topbar-public-nav a {
  border: 1.5px solid #fff;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.topbar-public-nav a:hover,
.topbar-public-nav a.active {
  background: #fff;
  color: var(--brand-red);
}

/* Kopfbereich (nav.php): Logo links, rechts optionaler Zurueck-Link +
   Ausklapp-Menue mit Untergruppen (ersetzt die frueher je Seite einzeln und
   dadurch inkonsistent gepflegten Nav-Links). */

.topbar-brand { font-weight: 700; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-back {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.9;
}
.topbar-back:hover { opacity: 1; }

/* Briefumschlag-Icon fuer das Postfach der oeffentlichen Terminvorschlaege
   UND der Poster-Nachreichungen (s. public/admin/nav.php, Doc 11 Abschnitt
   5 + Addendum "Poster nachreichen") - Normalzustand: reines Liniensymbol
   (weisser Umriss, keine Fuellflaeche) passend zum roten Topbar-Hintergrund.
   Bei mindestens einem neuen ("pending") Terminvorschlag wird das Icon
   farblich invertiert (weisser Kreis, roter Umriss) UND zeigt oben rechts
   ein Zaehler-Badge mit der Anzahl. Bei mindestens einem abgelehnten
   Terminvorschlag zeigt das Icon zusaetzlich (unabhaengig vom
   Invertierungs-Zustand) unten rechts ein zweites Zaehler-Badge - der
   Brief-Rahmen selbst ist dabei immer sichtbar, auch wenn nur die
   "abgelehnt"-Kategorie befuellt ist (Nutzer-Wunsch 04.09.2026, s. Doc 11
   Addendum "Postfach-Icon-Neugestaltung").

   Die urspruengliche Fassung der Farbumkehr hatte einen CSS-Spezifitaets-
   Fehler: die allgemeine Regel "header.topbar a { color: #fff; }" (Klasse +
   Element = Spezifitaet 0-1-1) ueberschrieb das hier nur ueber die einzelne
   Klasse ".postfach-icon-pending" (Spezifitaet 0-1-0) gesetzte
   "color: var(--brand-red)" IMMER, unabhaengig von der Reihenfolge im
   Stylesheet - das Icon blieb dadurch bei Farbe #fff auf weissem Kreis
   stehen und war faktisch unsichtbar (nur ein blasser, wirkungslos
   aussehender Punkt zu sehen). Die jetzige Fassung nutzt stattdessen den
   zusammengesetzten Selektor ".postfach-icon.postfach-icon-pending"
   (zwei Klassen = Spezifitaet 0-2-0), der "header.topbar a" zuverlaessig
   schlaegt - dieselbe hoehere-Spezifitaet-Loesung wie an den anderen
   Stellen in diesem Projekt: die spezifischere Regel gewinnt, nicht die
   zuletzt geschriebene. */
.postfach-icon,
.sonderabfuhr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #fff;
  opacity: 0.85;
  flex-shrink: 0;
}
.postfach-icon svg,
.sonderabfuhr-icon svg { width: 23px; height: 23px; }
.postfach-icon:hover,
.sonderabfuhr-icon:hover { opacity: 1; }
.postfach-icon.postfach-icon-pending {
  background: #fff;
  color: var(--brand-red);
  opacity: 1;
}

/* Zaehler-Badges (iOS-App-Icon-Stil) - s. Kommentar oben am
   .postfach-icon-Block fuer das Gesamtkonzept. Gemeinsame Basis in
   .postfach-badge, Position je nach Zweck in den beiden Modifikator-
   Klassen. Die dunklere Rotvariante (--brand-red-dark) hebt das Badge
   farblich vom Icon selbst ab (das je nach Zustand entweder rot oder
   weiss ist); der weisse Ring (box-shadow statt border, damit die
   Badge-Groesse davon nicht beeinflusst wird) sorgt zusaetzlich fuer
   sichtbaren Abstand zum Icon-Hintergrund in beiden Faerbungen. */
.postfach-badge {
  position: absolute;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: 9px;
  background: var(--brand-red-dark);
  color: #fff;
  box-shadow: 0 0 0 2px #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.postfach-badge-pending { top: -3px; right: -3px; }
.postfach-badge-abgelehnt { bottom: -3px; right: -3px; }

/* Muelleimer-Icon (Sonder-Abfuhrtermine, s. nav.php/sonderabfuhr.php, Doc 14)
   teilt sich Groesse, Kreisform und Hover-Verhalten mit dem Brief-Icon oben -
   daher dieselben Regeln, nur um den Klassennamen erweitert. BEWUSST ohne
   Gegenstueck zu .postfach-icon-pending und ohne Badges: das Symbol ist
   entweder da oder nicht da und sieht immer gleich aus (Nutzer-Vorgabe
   13.09.2026). */

/* Arbeitsauftrag auf der Sonder-Abfuhr-Hinweisseite: fester Zeilenumbruch wie
   im Original, auf schmalen Bildschirmen horizontal scrollbar statt die Seite
   zu sprengen. */
.sonderabfuhr-prompt {
  background: #f7f6f6;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  max-width: 900px;
  margin: 0 auto 24px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre;
  text-align: left;
}

.nav-menu {
  position: relative;
}

/* "> summary": seit 21.09.2026 gibt es im Menue weitere <summary>-
   Elemente (aufklappbare Untergruppen) - diese Regeln gelten nur fuer den
   "Menü"-Knopf selbst, sonst erbten die Unter-Ueberschriften dessen
   Pfeil, Drehung und weissen Hover-Hintergrund. */
.nav-menu > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 6px;
  user-select: none;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after {
  content: '▾';
  font-size: 10px;
  opacity: 0.85;
  transition: transform 0.15s ease;
}
.nav-menu[open] > summary::after { transform: rotate(180deg); }
.nav-menu > summary:hover { background: rgba(255, 255, 255, 0.15); }

.nav-menu-user {
  font-weight: 400;
  opacity: 0.85;
}

.nav-menu nav {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 10px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  z-index: 50;
  /* Nie hoeher als das Fenster (Nutzer-Meldung 21.09.2026: auf einem
     niedrigeren Desktop-Bildschirm war "Abmelden" abgeschnitten). Bisher
     gab es diese Begrenzung nur in der Mobil-Regel weiter unten - ein
     breites, aber niedriges Fenster fiel durch das Raster. 100vh als
     Rueckfall fuer Browser ohne dvh. */
  max-height: calc(100vh - 90px);
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Hoehere Spezifitaet als "header.topbar nav a" noetig, damit die Links im
   (weissen) Dropdown nicht die weisse Kopfzeilen-Schrift erben. */
.topbar-right .nav-menu nav a {
  color: var(--text);
  font-weight: 400;
  opacity: 1;
  margin-left: 0;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 6px;
  display: block;
}
.topbar-right .nav-menu nav a:hover { background: #fdf5f6; }
.topbar-right .nav-menu nav a.active {
  color: var(--brand-red);
  font-weight: 700;
  background: #fdf5f6;
}

.nav-group {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
/* Groessere, fette Gruppen-Ueberschriften (Kalender/Einstellungen),
   optischer Umbau 29.08.2026 nach Nutzer-Vorlage: deutlich groesser/dunkler
   statt kleiner grauer Versalien, damit die Gruppen auf den ersten Blick
   erkennbar sind. */
.nav-group-title {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  padding: 4px 10px 6px;
  line-height: 1.2;
}
.nav-group a { padding-left: 20px; }

/* Unter-Ueberschriften (Dorf/Schule/Nutzer) innerhalb der "Einstellungen"-
   Gruppe, Menue-Umbau 28.08.2026: eine Ebene tiefer eingerueckt als die
   Gruppen-Ueberschrift selbst, keine eigene Aufklapp-Box. Optisch am
   29.08.2026 vergroessert/verfettet (gleiche Vorlage wie .nav-group-title,
   nur eine Stufe kleiner), Einrueckung dabei reduziert. */
.nav-subgroup { margin-top: 6px; }
/* Aufklappbare Unter-Ueberschrift (21.09.2026): dieselbe Schrift wie
   bisher, dazu ein kleiner Pfeil rechts, der beim Aufklappen nach unten
   zeigt - wie der Pfeil am "Menü"-Knopf, nur dezenter. */
.nav-subgroup > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px;
  user-select: none;
}
.nav-subgroup > summary::-webkit-details-marker { display: none; }
.nav-subgroup > summary::after {
  content: '▸';
  font-size: 13px;
  color: var(--muted);
  margin-left: 12px;
  transition: transform 0.15s ease;
}
.nav-subgroup[open] > summary::after { transform: rotate(90deg); }
.nav-subgroup > summary:hover { background: #fdf5f6; }
.nav-subgroup-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  padding: 2px 10px 4px 14px;
  line-height: 1.2;
}
.nav-subgroup a { padding-left: 28px; }

/* Gleicher Querstrich auch NACH der Stundenplaene-Gruppe, vor dem naechsten
   Punkt (Nutzer bei Admins, sonst direkt Passwort) - sonst wirkt die Gruppe
   nur nach oben, nicht nach unten abgegrenzt. */
.nav-group + a {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* "Abmelden" optisch wie eine Gruppen-Ueberschrift abgesetzt (Nutzer-
   Vorlage 29.08.2026), obwohl es technisch ein normaler Link bleibt. */
.nav-logout {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  /* Bleibt am unteren Rand des Menues stehen, auch wenn der Rest darueber
     gescrollt werden muss - "Abmelden" ist damit auf jeder Bildschirmhoehe
     ohne Suchen erreichbar (21.09.2026). Deckender Hintergrund, damit die
     darunter durchscrollenden Eintraege nicht durchscheinen. */
  position: sticky;
  bottom: 0;
  background: #fff;
}
.nav-logout:hover { background: #fdf5f6; }

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 100px;
}

/* Werkzeugleiste der Termin-Uebersicht (index.php). Seit 10.09.2026 bewusst
   ZWEI Zeilen (Nutzerwunsch mit Skizze): oben die Filter (Kalender-Auswahl,
   Vereinsfilter, Farben, Zeitraum), darunter die Suche. Vorher lag alles in
   einer einzigen umbrechenden Reihe, wodurch die Reihenfolge je nach
   Fensterbreite wechselte und die Leiste unruhig wirkte. */
.calendar-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
/* EINE gemeinsame Klasse fuer alle runden Bedienelemente der Werkzeugleiste
   (Nutzerwunsch 10.09.2026: "alle runden buttons und textfelder bitte gleich
   hoch, in der breite dem text angepasst, damit es ein einheitliches bild
   ergibt, sollte eigentlich auch die gleiche style-class sein"). Vorher hatte
   jedes Element seine eigenen Masse - Kalender-Umschalter, Vereins-/Farben-
   Popup, Zeitraum-Auswahl, Suchfeld und "Suchen" waren dadurch unterschiedlich
   hoch ("sieht noch ein wenig wie mikado aus").

   Feste Hoehe statt Innenabstand oben/unten: nur so sind <button>, <summary>,
   <select>, <input> und <a> trotz ihrer sehr verschiedenen Standardstile
   wirklich gleich hoch. Die Breite bleibt inhaltsabhaengig - Ausnahmen setzen
   die Elemente selbst (Kalender-Auswahl und Suchfeld fuellen ihre Zeile).

   Bewusst NICHT betroffen: "Kacheln"/"Liste" (.view-toggle) - die bleiben
   eckig, weil sie die Ansicht umschalten und keine Filter sind. */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: 38px;
  padding: 0 16px;
  border: 2px solid var(--brand-red);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-red);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.pill:hover {
  background: #fdf5f6;
}
/* Gefuellte Variante fuer die eine echte Aktion der Leiste ("Suchen"). */
.pill-primary {
  background: var(--brand-red);
  color: #fff;
}
.pill-primary:hover {
  background: var(--brand-red-dark);
}

.picker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Kalender-Auswahl und Suchfeld nehmen den freien Platz ihrer Zeile ein,
   die uebrigen Bedienelemente bleiben so breit wie ihr Inhalt. */
.picker-search {
  flex: 1 1 240px;
  min-width: 0;
  /* Eingabefeld statt Schaltflaeche: linksbuendiger, normal gewichteter Text. */
  justify-content: flex-start;
  font-weight: 400;
  color: var(--text);
  cursor: text;
}
.picker-search::placeholder {
  color: var(--muted);
  font-weight: 400;
}
.picker-search:hover {
  background: #fff;
}
/* Die native Auswahl-Optik des Browsers passt nicht zu den uebrigen Pillen
   (eigener Rahmen, eigene Hoehe, graue Flaeche) - deshalb abgeschaltet und
   der kleine Pfeil als Hintergrundbild nachgebaut, wie ihn auch die
   <details>-Popups daneben zeigen. */
.picker-range {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23c8102e'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}

.calendar-picker label {
  border: 2px solid var(--brand-red);
  border-radius: 999px;
  /* Gleiche Hoehe wie die Pillen daneben (s. .pill), damit das aufgeklappte
     Panel nicht aus der Reihe faellt. */
  box-sizing: border-box;
  height: 38px;
  padding: 0 16px;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.calendar-picker input[type="checkbox"] { accent-color: var(--brand-red); }

.calendar-picker label.active {
  background: var(--brand-red);
  color: #fff;
}

/* Vereinsfilter-Popup in der Termin-Uebersicht (index.php): ersetzt seit
   22.08.2026 das vorherige Einzelauswahl-Dropdown durch ein Checkbox-Popup
   fuer Mehrfachauswahl (mehrere Vereinskalender gleichzeitig vergleichen).
   Gleiches <details>/<summary>-Grundprinzip wie das Menue in nav.php
   (.nav-menu), hier aber als eigene, kleinere Pillen-Variante passend zum
   Rest der .calendar-picker-Leiste (Kalender-Chips, Zeitraum-Select). */
.verein-filter {
  position: relative;
}
.verein-filter summary {
  /* Optik kommt aus .pill (s.o.) - hier nur das, was ein <summary> zusaetzlich
     braucht: kein Aufklapp-Dreieck, keine Textauswahl, und eine Obergrenze
     fuer sehr lange Vereins-Kuerzellisten. */
  list-style: none;
  user-select: none;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.verein-filter summary::-webkit-details-marker { display: none; }
.verein-filter summary::after {
  content: '▾';
  font-size: 10px;
  opacity: 0.85;
  flex: none;
}
.verein-filter[open] summary::after { transform: rotate(180deg); }
.verein-filter[open] summary { background: var(--brand-red); color: #fff; }

.verein-filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: -15vw;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 12px;
  min-width: 260px;
  /* Breiter als der urspruengliche min-width-Wert (260px), damit laengere
     Vereinsnamen (z.B. "CHOR - Gemischter Chor Heiligendorf M.G.V. von 1868
     e. V.") einzeilig bleiben - 360px reichte dafuer noch nicht aus (Rueck-
     meldung 22.08.2026: "vereinsfilter zu schmal"), 460px passt. Per
     max-width zusaetzlich auf schmalen Bildschirmen begrenzt, damit das
     Popup dort nicht ueber den Bildschirmrand hinausragt. */
  width: 650px;
  max-width: min(650px, 90vw);
  z-index: 50;
}

/* Farben-Popup nutzt dieselbe Box-Optik wie .verein-filter-panel (Rahmen/
   Schatten/Radius/Position, s.o.), braucht aber deutlich weniger Breite
   (nur kurze Radio-Optionen + Farbwaehler) - eigene, schmalere Breite statt
   der 360px des Vereinsfilters, damit beide Popups unabhaengig voneinander
   angepasst werden koennen. */
.color-scheme-panel {
  width: 280px;
  max-width: min(280px, 90vw);
}

.verein-filter-list {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Das Popup steckt fuer die gemeinsame GET-Uebermittlung im selben <form
   class="calendar-picker"> wie die Kalender-Chips - ohne diese Regel wuerden
   die Checkbox-Zeilen hier ungewollt die Pillen-/Chip-Optik von
   ".calendar-picker label" erben (Rahmen, abgerundete Ecken, Hintergrund).
   Setzt stattdessen auf die schlichte, bereits an anderer Stelle (users.php)
   etablierte .checkbox-list-Optik zurueck. */
.verein-filter-list label {
  display: block;
  border: none;
  border-radius: 4px;
  background: none;
  /* Zusatz 10.09.2026: die Chips oben haben jetzt eine feste Hoehe (.pill),
     die hier ausdruecklich wieder aufgehoben werden muss. */
  height: auto;
  padding: 4px 6px;
  margin: 1px 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}
.verein-filter-list label:hover { background: #fdf5f6; }

.verein-filter-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.verein-filter-reset {
  /* Runder Knopf auf Pillen-Hoehe, aber bewusst unauffaellig (grauer Rahmen). */
  width: 38px;
  padding: 0;
  border-color: var(--border);
  color: var(--muted);
}
.verein-filter-reset:hover { border-color: var(--brand-red); color: var(--brand-red); }

/* "Suche zurueck­setzen"-Link in den Suchergebnissen (index.php,
   29.08.2026): bisher ein nicht gestylter Standard-Link (blau, unterstrichen)
   - jetzt als roter Pillen-Button im selben Stil wie die Vereinsfilter-/
   Farben-Buttons der Werkzeugleiste (.verein-filter summary), damit er sich
   optisch in die Seite einfuegt statt wie ein Fremdkoerper zu wirken. */
.search-reset-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 2px solid var(--brand-red);
  padding: 4px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-red);
  text-decoration: none;
  background: #fff;
}
.search-reset-link:hover { background: var(--brand-red); color: #fff; }

/* Farbschema-Popup (index.php): nutzt bewusst dieselbe .verein-filter-
   Aufmachung (Pillen-Button, Panel-Look) fuer visuelle Konsistenz - nur der
   Inhalt (Radio-Optionen statt Checkbox-Liste) unterscheidet sich. */
.color-scheme-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 220px;
}
/* Zwei Klassen (statt nur ".color-scheme-option") noetig, damit die
   Spezifitaet sicher ueber ".calendar-picker label" liegt (0,2,0 > 0,1,1) -
   sonst wuerden die Radio-Zeilen hier, wie zuvor beim Vereinsfilter-Popup
   (s. .verein-filter-list label), ungewollt dessen Pillen-/Chip-Optik
   erben, da dieses Popup aus Formular-Gruenden technisch im selben
   <form class="calendar-picker"> steckt. */
.color-scheme-options .color-scheme-option {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 4px;
  background: none;
  /* s. .verein-filter-list label: feste Chip-Hoehe hier aufheben. */
  height: auto;
  padding: 4px 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}
.color-scheme-options .color-scheme-option:hover { background: #fdf5f6; }
.color-scheme-option input[type="color"] {
  width: 32px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.month-group {
  margin-bottom: 32px;
}

.month-group h2 {
  color: var(--brand-red);
  font-size: 18px;
  border-bottom: 2px solid var(--brand-red);
  padding-bottom: 6px;
  margin-bottom: 14px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.tile {
  background: var(--tile-bg);
  border: 1px solid var(--border);
  border-left: 6px solid var(--brand-red);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--tile-shadow);
  position: relative;
  text-decoration: none;
  color: var(--text);
  display: block;
}

.tile .tile-date {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.tile .tile-name {
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0;
}

.tile .tile-meta {
  font-size: 13px;
  color: var(--muted);
}

.tile .tile-cal-badge {
  display: inline-block;
  font-size: 11px;
  border-radius: 999px;
  padding: 2px 8px;
  color: #fff;
  margin-top: 6px;
  /* Laesst rechts unten Platz fuer den Plakat-Hinweis (s.u.), damit ein
     langer Kalendername nicht darunter laeuft. */
  max-width: calc(100% - 26px);
}

/* Plakat-Hinweis (📋) in der Termin-Kachel: sitzt in der rechten UNTEREN Ecke
   (Nutzerwunsch 12.09.2026 anhand dreier Beispiel-Kacheln: "ich bevorzuge
   Beispiel 2"). Hinter dem Terminnamen im Textfluss ging das Symbol bei
   langen, mehrzeiligen Namen unter - in der Ecke sitzt es unabhaengig von der
   Textlaenge immer an derselben Stelle. Reiner Hinweis ohne Funktion, daher
   auch kein Zeigefinger-Cursor: die Kachel ist als Ganzes der Link zum
   Termin. */
.tile .tile-poster-icon {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 16px;
  line-height: 1;
}

/* Postfach-Kacheln (Nutzerwunsch 06.09.2026: "den posteingang fuer neue
   termine wuerde ich auch wie kacheln untereinander angezeigt bekommen, wie
   auch die termine im kalender. (mobil und desktop gleiches design)").
   Ersetzt die bisherige, auf schmalen Bildschirmen nur seitlich scrollbare
   Tabelle in postfach.php.

   Bewusst KEIN eigenes Kartenaussehen: die Karten tragen im Markup
   zusaetzlich die bestehende Klasse .tile und erben damit exakt die Optik
   der Termin-Kacheln aus der Kalenderuebersicht (weisser Grund, roter
   Balken links, gleiche Radien/Schatten). Hier stehen nur die
   Postfach-spezifischen Ergaenzungen.

   Anders als .tiles (mehrspaltiges Grid) ist dies bewusst eine EINSPALTIGE
   Liste - "untereinander", auf Mobil wie auf dem Desktop identisch, da eine
   Postfach-Karte deutlich mehr Inhalt traegt (Kontaktdaten + Aktionen) als
   eine reine Termin-Kachel. */
/* Karten des Postfachs (14.09.2026, zwei Nutzerwuensche nacheinander):
   ERST schmaler wie die Termin-Kacheln in index.php statt einspaltig ueber
   die vollen 900px - DANN aber wieder UNTEREINANDER statt nebeneinander
   ("breite ist gut, aber die koennen ruhig untereinander angezeigt
   werden"). Ergebnis: eine Spalte in Kachelbreite. Die 292px entsprechen
   genau dem, was das .tiles-Raster in der 900px-Spalte je Kachel ergibt
   (drei Spalten mit 12px Abstand) - so sehen Postfach-Karte und
   Termin-Kachel gleich aus, liegen hier aber in einer Liste. Auf schmalen
   Bildschirmen nutzt die Karte wie bisher die volle Breite. */
.postfach-list {
  display: grid;
  /* Handy zuerst: eine Karte ueber die volle Breite. */
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  gap: 12px;
}
@media (min-width: 701px) {
  /* Ab Tablet/Desktop auf Kachelbreite begrenzt und mittig unter der
     ebenfalls zentrierten Ueberschrift. */
  .postfach-list { grid-template-columns: minmax(0, 292px); }
}

.postfach-card .tile-name {
  /* Der Terminname ist zugleich der Link zum Uebernehmen-Formular. */
  word-break: break-word;
}
.postfach-card .tile-name a {
  color: var(--text);
  text-decoration: none;
}
.postfach-card .tile-name a:hover { text-decoration: underline; }

/* Einreicher-Kontakt: klar abgesetzt vom Termininhalt darueber - dieselbe
   inhaltliche Trennung wie im Terminformular (s. event_form.php), damit auf
   einen Blick klar ist, was zum Termin gehoert und was nur Kontaktinfo ist. */
.postfach-card-kontakt {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.postfach-card-kontakt strong {
  color: var(--text);
  font-weight: 600;
}

.postfach-card-grund {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}

.postfach-card .btn-row {
  margin-top: 12px;
}

/* Bild-Vorschauen im Tab "Poster nachreichen". */
.postfach-card-poster {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.postfach-empty {
  color: var(--muted);
  padding: 14px 2px;
}

.fab {
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(200, 16, 46, 0.35);
}

.inline-add {
  text-align: center;
  margin: 6px 0 18px;
}

.inline-add a {
  color: var(--brand-red);
  border: 1px dashed var(--brand-red);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 13px;
  text-decoration: none;
}

form.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  max-width: 520px;
}

form.card label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0 4px;
}

form.card input[type="text"],
form.card input[type="date"],
form.card input[type="time"],
form.card input[type="password"],
form.card input[type="number"],
form.card input[type="email"],
form.card input[type="tel"],
form.card select,
form.card textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 15px;
}

form.card textarea { min-height: 80px; }

.row-2 {
  display: flex;
  gap: 12px;
}
.row-2 > div { flex: 1; }
/* Fehlerbehebung 12.09.2026: Ohne diese Regel bleibt eine .row-2 trotz
   hidden-Attribut sichtbar - "display: flex" aus der Regel oben ueberstimmt
   bei Spezifitaets-Gleichstand das Browser-Standardverhalten von [hidden]
   (gleiches Muster wie .modal-overlay[hidden]/.lightbox-overlay[hidden]
   weiter unten). Aufgefallen im Excel-Export: dort standen die Von/Bis-Felder
   auch dann im Formular, wenn sie gar nicht ausgewertet wurden. */
.row-2[hidden] {
  display: none;
}

/* Adress-Autocomplete (Photon) im Termin-Formular, s. event_form.php */
.autocomplete { position: relative; }

.autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  max-height: 260px;
  overflow-y: auto;
  z-index: 60;
}
.autocomplete-list[hidden] { display: none; }

.autocomplete-list li {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}
.autocomplete-list li:hover,
.autocomplete-list li.active {
  background: rgba(200, 16, 46, 0.08);
}
.autocomplete-list li.autocomplete-empty {
  color: var(--muted);
  cursor: default;
}
.autocomplete-list li.autocomplete-empty:hover { background: none; }

.btn {
  display: inline-block;
  background: var(--brand-red);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-top: 18px;
}
.btn:hover { background: var(--brand-red-dark); }
.btn.btn-secondary {
  background: #fff;
  color: var(--brand-red);
  border: 1px solid var(--brand-red);
}
.btn.btn-danger {
  background: #fff;
  color: var(--brand-red);
  border: 1px solid var(--brand-red);
}
.btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

/* Sanduhr-Ersatz: kleiner Spinner fuer Buttons, deren Formular laenger
   dauern kann (Import/Loeschen vieler Termine, s. assets/loading.js).
   border-color: currentColor, damit er auf jedem Button (rot auf weiss,
   weiss auf rot) automatisch passend eingefaerbt ist, ohne eigene Regel je
   Button-Variante. */
.spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: kd-spin 0.6s linear infinite;
}
@keyframes kd-spin {
  to { transform: rotate(360deg); }
}

/* Reihe kompakter Buttons in Tabellenzellen (calendars.php: ICS/Excel-Import,
   Baikal-Abgleich, Inhalt loeschen) - einheitlich kleiner als .btn allein. */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.btn-row .btn {
  padding: 4px 10px;
  font-size: 12px;
  margin-top: 0;
}

.flash {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}
.flash.success { background: #fdecec; border: 1px solid var(--brand-red); color: var(--brand-red-dark); }
.flash.error { background: #fdecec; border: 1px solid var(--brand-red); color: var(--brand-red-dark); }
.flash.info { background: #eef2f7; border: 1px solid #b9c6d6; color: #33475b; }

.admin-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}
table.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table-wrap table.admin-table {
  margin-top: 0;
}
table.admin-table th, table.admin-table td {
  text-align: left;
  /* Etwas schmalere Innenabstaende als frueher (10px): bei acht Spalten wie in
     stundenplan_kalender.php summiert sich das und entscheidet darueber, ob
     die Tabelle noch in die 900px-Spalte passt oder waagerecht scrollen muss
     (Nutzerwunsch 10.09.2026: kompakte, nicht fensterbreite Tabellen). */
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
table.admin-table th { color: var(--brand-red); }
table.admin-table td { vertical-align: top; }

/* Bedienelemente IN einer Tabellenzeile (Nutzerwunsch 10.09.2026: "ich
   moechte auch keine blau unterstrichenen links, sondern alles in diesen
   schoenen buttons die die runden seiten haben"). Die Schaltflaechen
   uebernehmen die runde Pillen-Form der Werkzeugleiste (s. .pill), bleiben
   aber kompakter - in einer Tabellenzeile stehen oft zwei bis drei davon
   nebeneinander. Die Groessen stehen bewusst hier und nicht mehr als
   style="padding:..."-Angabe an jedem einzelnen Button in den Seiten. */
table.admin-table .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  margin-top: 0;
  white-space: nowrap;
}
table.admin-table .btn.btn-secondary,
table.admin-table .btn.btn-danger {
  border-width: 2px;
  border-style: solid;
}
/* Mehrere Schaltflaechen in einer Zelle bekommen automatisch Luft, auch ohne
   umschliessendes .btn-row. */
table.admin-table td .btn + .btn,
table.admin-table td .btn + form,
table.admin-table td form + form,
table.admin-table td form + .btn {
  margin-left: 4px;
}
table.admin-table td form {
  display: inline;
}

/* Verbleibende Textlinks - in Hinweiszeilen einer Tabellenzelle ebenso wie in
   den Beschreibungstexten ueber und unter einer Tabelle (Nutzerwunsch
   10.09.2026: "ich moechte auch keine blau unterstrichenen links"). Bewusst
   nur diese beiden Stellen und nicht pauschal jeder Link im Seiteninhalt -
   die Karten-Ueberschriften im Postfach z.B. haben ihre eigene Optik. */
body.admin .container > p a:not(.btn),
table.admin-table a:not(.btn) {
  color: var(--brand-red);
  font-weight: 600;
  text-decoration: none;
}
body.admin .container > p a:not(.btn):hover,
table.admin-table a:not(.btn):hover {
  text-decoration: underline;
}

.checkbox-list label {
  display: block;
  font-weight: 400;
  margin: 4px 0;
}

/* Nutzerverwaltung (users.php): eine Karte pro Nutzer, mit Avatar-Kreis
   (erster Buchstabe des Benutzernamens), Rollen-/Status-Badges und einer
   klar abgetrennten Werkzeugleiste (Rolle aendern, Sperren/Loeschen).
   Bewusst kein Grid mit mehreren Spalten (wie .tiles) - die
   Berechtigungs-Checkliste je Karte kann unterschiedlich lang werden, das
   passt besser in eine gestapelte Einzelspalte. */
.user-card {
  background: var(--tile-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--tile-shadow);
  margin-bottom: 16px;
}

.user-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.user-card-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fbe6e9;
  color: var(--brand-red-dark);
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-card-name {
  font-size: 17px;
  font-weight: 700;
}

.user-card-you {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.user-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.4;
}

.badge-role-admin { background: var(--brand-red); color: #fff; }
.badge-role-user { background: #fff; color: var(--brand-red); border: 1px solid var(--brand-red); }
.badge-role-observer { background: #f2f0f0; color: var(--muted); border: 1px solid var(--border); }

.badge-status-active { background: #e8f5e9; color: #2e7d32; }
.badge-status-locked { background: #fdecec; color: var(--brand-red-dark); }

.user-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.user-card-actions select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}

.user-card-body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.login-wrap {
  max-width: 360px;
  margin: 80px auto;
  text-align: center;
}
.login-wrap h1 { color: var(--brand-red); }

.container.wide { max-width: 1400px; }

/* "Kacheln"/"Liste" sitzen seit 10.09.2026 rechts in der ersten Zeile der
   Werkzeugleiste (Nutzer-Skizze) und bleiben bewusst eckig - sie schalten die
   Ansicht um und sind keine Filter. Gleiche Hoehe wie die Pillen daneben. */
.view-toggle {
  display: flex;
  gap: 8px;
}
/* Nur auf breiten Bildschirmen ans rechte Zeilenende schieben - auf dem Handy
   stuende der Umschalter sonst allein und weit rechts in einer eigenen Zeile. */
@media (min-width: 701px) {
  .view-toggle {
    margin-left: auto;
  }
}
.view-toggle a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border: 2px solid var(--brand-red);
  border-radius: 6px;
  color: var(--brand-red);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.view-toggle a.active {
  background: var(--brand-red);
  color: #fff;
}

.period-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}
/* Die Links tragen im Markup .pill und sehen damit aus wie die
   Bedienelemente der Werkzeugleiste darueber. */
.period-nav a:hover {
  background: var(--brand-red);
  color: #fff;
}
.period-nav-current {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.day-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}

.day-grid {
  display: grid;
}

.day-grid-cell {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  min-height: 40px;
}

.day-grid-head {
  background: #fdf5f6;
  font-weight: 700;
  font-size: 13px;
  color: var(--brand-red);
  padding-bottom: 8px;
}

.day-grid-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.3;
}
.day-grid-date .day-num { color: var(--text); }

.day-grid-cell.weekend { background: #faf6f1; }
.day-grid-cell.today { background: #fdecec; }

.day-grid-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}

.day-event {
  display: flex;
  gap: 4px;
  align-items: baseline;
  color: #fff;
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 12px;
  text-decoration: none;
  line-height: 1.3;
  max-width: 100%;
}
.day-event-time { font-weight: 700; opacity: 0.9; flex-shrink: 0; }
.day-event-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.day-grid-add {
  display: flex;
  align-items: center;
  justify-content: center;
}
.day-grid-add a {
  color: var(--brand-red);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  opacity: 0.45;
}
.day-grid-add a:hover { opacity: 1; }

/* Stundenplan-Matrix (kohorten.php / stundenplaene.php / stundenplan_form.php) */

.stundenplan-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
}

.stundenplan-grid {
  display: grid;
  grid-template-columns: 120px repeat(5, minmax(140px, 1fr));
  min-width: 720px;
}

.stundenplan-cell {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.stundenplan-head {
  background: #fdf5f6;
  font-weight: 700;
  font-size: 13px;
  color: var(--brand-red);
  justify-content: center;
}

.stundenplan-zeiten {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  font-size: 12px;
}
.stundenplan-zeiten input[type="time"] {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 12px;
}

.stundenplan-cell input[type="text"] {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 13px;
}

.stundenplan-add-row {
  text-align: center;
  margin: 10px 0 20px;
}
.stundenplan-add-row button {
  background: none;
  border: 1px dashed var(--brand-red);
  color: var(--brand-red);
  border-radius: 8px;
  padding: 4px 14px;
  font-size: 13px;
  cursor: pointer;
}

/* Schulausflug/Klassenfahrt-Zeilen (stundenplan_form.php) */

.ausflug-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 16px;
}

.ausflug-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

.ausflug-row select,
.ausflug-row input[type="date"],
.ausflug-row input[type="text"] {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}

.ausflug-row input[type="text"] {
  min-width: 140px;
}

.ausflug-row .btn {
  margin-top: 0;
}

.halbjahr-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.halbjahr-picker a {
  border: 2px solid var(--brand-red);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  text-decoration: none;
  color: var(--brand-red);
}
.halbjahr-picker a.active {
  background: var(--brand-red);
  color: #fff;
}

/* Bestaetigungs-Dialog mit Kontrollaufgabe (calendars.php: Inhalt loeschen) */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 42, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
/* Hoehere Spezifitaet als ".modal-overlay" noetig, weil Klassen- und
   Attribut-Selektoren gleich stark gewichtet werden und Autoren-CSS bei
   Gleichstand das Browser-Standardverhalten von [hidden] sonst ueberstimmt -
   ohne diese Regel waere das Popup schon beim Laden der Seite sichtbar. */
.modal-overlay[hidden] {
  display: none;
}

.modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.modal-box p {
  font-size: 14px;
  line-height: 1.5;
}

.modal-box .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Bildschirmfuellende Vorschau fuer Poster-Thumbnails (event_form.php,
   Nutzerwunsch 02.09.2026) - dunkler als .modal-overlay, da hier ein Foto
   und kein Text-Dialog im Fokus steht. */
.poster-thumb-link {
  display: inline-block;
  cursor: zoom-in;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 200;
  cursor: zoom-out;
}
.lightbox-overlay[hidden] {
  display: none;
}

.lightbox-img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Baukasten-Seite public/stundenplan/index.php (Nutzer-Vorlage/eigenes
   Design, s. Projekt-Doku "Stundenplan-Baukasten mit Klassen-/Inhalte-
   Auswahl") - Kalender-CI (var(--brand-red)) statt der Ursprungsfarbe Blau
   aus der Vorlage, sonst bewusst nah am vorgegebenen Layout/Text.
   Dieselben .sp-*-Klassen werden auch von public/feed/index.php (Baukasten
   fuer die allgemeinen Kalender) wiederverwendet. Dort gibt es aber keinen
   vorgelagerten Auswahlschritt (kein "erst Klasse waehlen" wie hier) - die
   Klasse .sp-always ersetzt dafuer .has-klasse und blendet Mini-Icons/
   Ergebnisbox von Anfang an ein. */
.sp-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 32px 32px;
  max-width: 700px;
  margin: 24px auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.sp-title {
  text-align: center;
  font-size: 26px;
  margin: 0 0 20px;
  color: var(--text);
}
.sp-notice {
  background: #f5f4f4;
  border-left: 4px solid var(--muted);
  padding: 14px 18px;
  margin-bottom: 26px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.sp-notice strong { display: block; margin-bottom: 4px; }
.sp-notice p { margin: 10px 0; }
.sp-notice p:first-child { margin-top: 0; }
.sp-notice p:last-child { margin-bottom: 0; }
.sp-intro { color: var(--text); margin-bottom: 18px; }
.sp-field-label {
  font-weight: 700;
  margin: 0 0 8px;
  font-size: 15px;
}
.sp-select {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 16px;
  border: 2px solid var(--brand-red);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  margin-bottom: 22px;
}
.sp-inhalte { margin-bottom: 22px; }
.sp-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-weight: 700;
  font-size: 15px;
}
.sp-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-red);
  flex: none;
}
.sp-mini-cal {
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  display: none;
  opacity: 0.8;
}
.has-klasse .sp-mini-cal, .sp-always .sp-mini-cal { display: inline-block; }
.sp-mini-cal:hover { opacity: 1; }
.sp-empty { color: var(--muted); font-size: 14px; }

.sp-result {
  display: none;
  background: #f5f4f4;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 26px;
}
.has-klasse .sp-result, .sp-always .sp-result { display: block; }
.sp-result h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--text);
}
.sp-result p { margin: 6px 0; font-size: 14px; }
.sp-result-empty { color: var(--muted); margin: 0; }
.sp-result-btn {
  display: block;
  text-align: center;
  margin: 14px 0 0;
}
.sp-result-url {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
  word-break: break-all;
}
.sp-result-url code {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

/* Logo oben links (Nutzerwunsch 30.08.2026): haengt bewusst ueber den
   unteren Rand des roten Balkens hinaus in den weissen Inhaltsbereich
   hinein (per Referenzbild vom Nutzer gewuenscht) - deshalb absolut
   positioniert statt im Flex-Fluss, damit der rote Balken selbst seine
   bisherige Hoehe behaelt. header.topbar ist bereits "position: sticky"
   und dient hier zugleich als Positionierungs-Kontext. Gilt fuer BEIDE
   Kopfzeilen-Varianten (admin nav.php und die oeffentlichen Seiten). */
.topbar-logo-link {
  position: absolute;
  left: 16px;
  top: 8px;
  width: 144px;
  height: 144px;
  z-index: 11;
  display: block;
}
.topbar-logo {
  display: block;
  width: 100%;
  height: 100%;
}
.topbar-brand,
.topbar-public-title {
  margin-left: 180px;
}



/* Sticky Footer (Nutzerwunsch 30.08.2026): Footer soll bei kurzen Seiten
   am unteren Bildschirmrand kleben statt mitten auf der Seite zu stehen.
   body ist oben bereits ein Flex-Container in Spaltenrichtung -
   .container/.login-wrap (der jeweilige Hauptinhalt) waechst per
   flex-grow, um den verbleibenden Platz zu fuellen; ist der Inhalt laenger
   als der Bildschirm, hat flex-grow keinen Effekt und der Footer folgt
   ganz normal danach. Gilt fuer Admin- UND oeffentliche Seiten
   gleichermassen (beide nutzen dieselbe style.css). */
.container,
.login-wrap {
  flex: 1 0 auto;
  /* WICHTIG (Fehlerbehebung 09.09.2026): Ohne explizite Breite zieht der
     Browser diese Flex-Items auf ihre INHALTSBREITE statt auf die Breite des
     Body - eine breite Tabelle machte damit die ganze Seite breiter als den
     Bildschirm. Sichtbar wurde das vor allem an den Info-Texten der
     Admin-Seiten: die brachen erst bei ~850px um und liefen auf dem Handy
     rechts aus dem Bild (Nutzer-Meldung: "der Info-Text ist viel zu breit").
     Die Tabelle selbst war nie das Problem - sie steckt in
     .admin-table-wrap (overflow-x: auto) und soll dort scrollen; genau das
     funktionierte aber nicht, solange der Container mitwuchs.

     width: 100% zwingt das Item auf die Body-Breite; max-width (900px bzw.
     1400px bei .wide) und "margin: 0 auto" bleiben davon unberuehrt, am
     Desktop aendert sich also nichts. box-sizing: border-box gilt global
     (s. oben), das Innenabstand-Padding steckt damit in den 100%. */
  width: 100%;
}
.site-footer {
  flex-shrink: 0;
  background: var(--brand-red);
  padding: 20px 16px;
  text-align: center;
}
.site-footer p {
  margin: 0;
  font-size: 13px;
}
.site-footer a {
  color: #fff;
  text-decoration: underline;
}
.site-footer a:hover {
  opacity: 0.85;
}

/* Admin-Tabellen als Karten - NUR auf schmalen Bildschirmen (Nutzerwunsch
   09.09.2026: "die tabelle macht mobil genau so wenig sinn... vllt kann man
   die tabelle auch in einzelne karten pro kalender wandeln").

   Am 10.09.2026 galten die Karten kurzzeitig auf jeder Breite ("Karten auch
   am Desktop"); der Nutzer hat das noch am selben Tag zurueckgenommen: "ich
   moechte in der desktop-version folgende seiten doch wieder mit einer
   tabelle aufgebaut haben, die karten passen nicht zu jedem seitenstil".
   Am Desktop ist es also wieder eine echte Tabelle, auf dem Handy bleiben es
   Karten.

   Die Spaltenueberschrift jeder Zelle liefert admin-table-cards.js als
   data-label (aus dem <thead> uebernommen); ohne JavaScript bleibt es die
   gewohnte, horizontal scrollbare Tabelle.

   Optik bewusst identisch zu den Termin-Kacheln (.tile) und den
   Postfach-Karten: weisser Grund, roter Balken links, gleiche Radien und
   Schatten - damit der Admin-Bereich auf dem Handy durchgehend gleich
   aussieht. */
@media (max-width: 700px) {
  /* Kein horizontales Scrollen mehr noetig - die Karten passen in die
     Bildschirmbreite. */
  .admin-table-wrap {
    overflow-x: visible;
  }

  table.admin-table,
  table.admin-table tbody,
  table.admin-table tr,
  table.admin-table td {
    display: block;
    width: auto;
  }

  /* Die Kopfzeile waere als Block nur eine sinnlose Aufzaehlung - ihre
     Inhalte stehen ja jetzt als Beschriftung in jeder Zelle. */
  table.admin-table thead {
    display: none;
  }

  table.admin-table tr {
    background: var(--tile-bg);
    border: 1px solid var(--border);
    border-left: 6px solid var(--brand-red);
    border-radius: 10px;
    box-shadow: var(--tile-shadow);
    padding: 4px 14px 10px;
    margin-bottom: 12px;
  }

  table.admin-table td {
    border-bottom: none;
    padding: 8px 0 0;
    /* Lange Abo-URLs/Token sollen die Karte nicht sprengen. */
    overflow-wrap: anywhere;
  }

  /* Trennlinie zwischen den Angaben innerhalb einer Karte, aber nicht ueber
     der ersten. */
  table.admin-table td + td {
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }

  table.admin-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 3px;
  }

  /* Erste Zelle als Karten-Titel: sie traegt auf allen betroffenen Seiten
     den Namen (Kalender, Verein, Kohorte, Geltungsbereich). */
  table.admin-table td:first-child {
    font-size: 16px;
    font-weight: 600;
  }

  /* Sammelzeilen wie "Keine Eintraege vorhanden" sind keine Karte, sondern
     ein schlichter Hinweis. */
  table.admin-table td[colspan] {
    font-size: 14px;
    font-weight: 400;
  }
  table.admin-table tr:has(td[colspan]) {
    border-left-color: var(--border);
    box-shadow: none;
  }

  /* Buttons/Formulare in einer Karte duerfen umbrechen statt zu ueberlaufen. */
  table.admin-table td .btn-row {
    flex-wrap: wrap;
  }
}

/* Kopfbereich und Karten mittig, mit Maximalbreite (Nutzerwunsch
   10.09.2026: "die ueberschriften und texte koennen in der desktop-version
   auf ALLEN adminseiten des kalenderdienstes zentriert werden ... auch die
   breite in der sich die tabellen befinden sollten mittig auf der seite
   dargestellt werden, mit einer maximalbreite, damit die bei breiten
   bildschirmen nicht unnoetig auseinander gezogen werden").

   Bewusst an body.admin gebunden: style.css teilen sich Admin- und
   oeffentliche Seiten, die oeffentlichen Uebersichten sollen unveraendert
   linksbuendig bleiben. Die Klasse setzt public/admin/header.php.

   Praezisierung 10.09.2026: NUR die Ueberschriften werden zentriert, der
   Beschreibungstext darunter ist Blocksatz auf derselben Breite wie die
   Karten/Tabellen (900px, mittig) - "die ueberschriften zentrieren und die
   beschreibungstexte als blocksatz dadrunter, auf einer maximalen breite von
   900px, so wie die karten/tabellen auch in dieser breite da drunter".
   Die frueheren inline-max-widths der Info-Texte (520-640px) wurden dafuer
   aus den Admin-Seiten entfernt, sonst haetten sie die 900px ueberstimmt.
   Absaetze, die nur einen Button enthalten (z.B. "Zurueck"), bleiben durch
   den Blocksatz automatisch linksbuendig - die letzte Zeile wird nicht
   gestreckt. */
body.admin .container > h1,
body.admin .container > h2 {
  text-align: center;
}
body.admin .container > p {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
}

/* Karten sind einspaltig und werden mit zunehmender Breite nur schlechter
   lesbar - deshalb dieselbe Maximalbreite wie beim normalen .container,
   auch innerhalb der breiten Seiten (.container.wide, z.B. Kalender-,
   Postfach- und Stundenplan-Kalenderverwaltung). */
/* Gilt nur noch fuer die Karten-Liste des Postfachs: eine einspaltige Karte
   wird mit zunehmender Breite nur schlechter lesbar. Tabellen und Meldungen
   nutzen wieder die volle Breite ihres Containers (900px, auf den breiten
   Seiten 1400px) - eine Tabelle mit acht Spalten braucht diesen Platz
   (Nutzerwunsch 10.09.2026, Rueckkehr zur Tabelle am Desktop). */
body.admin .postfach-list {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Formulare tragen bereits eine eigene Maximalbreite (520px) - hier fehlten
   nur die automatischen Seitenraender, damit sie unter der zentrierten
   Ueberschrift nicht links kleben. Einzelne Seiten setzen das bisher inline
   ("margin: 0 auto"), das bleibt wirkungsgleich. */
body.admin form.card {
  margin-left: auto;
  margin-right: auto;
}

/* Direkt im Seiteninhalt stehende Button-Reihen (z.B. die Tabs im Postfach)
   gehoeren zum Kopfbereich und werden mitzentriert; Button-Reihen INNERHALB
   einer Karte bleiben davon unberuehrt. */
body.admin .container > .btn-row {
  justify-content: center;
}

/* Mobiler Header-Fix (Nutzerwunsch 06.09.2026: "das faengt schon mit dem
   logo an, welches erstmal viel kleiner sein kann. dann erreicht man im
   header das menu gar nicht"). Ersetzt den bisherigen Fix vom 30.08.2026,
   der das 144px-Logo selbst unangetastet liess und stattdessen nur per
   Mindesthoehe Platz DANEBEN reservierte, damit der (oeffentliche) Titel
   nicht vom Logo verdeckt wird. Im Admin-Bereich (nav.php) gab es bislang
   ueberhaupt keinen Mobil-Fix - dort blieb das riesige Logo bestehen und
   drueckte Postfach-Icon und Ausklapp-Menue (.nav-menu) auf schmalen
   Bildschirmen faktisch unerreichbar nach rechts hinaus. Jetzt wird
   stattdessen das Logo selbst verkleinert (144px -> 36px) - das schafft
   gleichzeitig links Platz fuer den Titel UND rechts fuer Postfach-Icon/
   Menue/den "Öffentliche Startseite"-Link, ohne dass etwas verdeckt oder
   abgeschnitten wird. Gilt fuer BEIDE Kopfzeilen-Varianten (admin nav.php
   und die oeffentlichen Seiten, s.o. .topbar-logo-link/.topbar-brand/
   .topbar-public-title). */
@media (max-width: 700px) {
  .topbar-logo-link {
    width: 36px;
    height: 36px;
    left: 12px;
    top: 10px;
  }
  .topbar-brand,
  .topbar-public-title {
    margin-left: 56px;
    font-size: 17px;
  }
  header.topbar {
    flex-wrap: wrap;
    row-gap: 14px;
    padding: 10px 14px;
  }
  /* margin-top zusaetzlich zu row-gap (s.o.): bricht der Titel auf einer
     eigenen Zeile um (schmale Bildschirme, langer Titel), rutscht
     .topbar-right in die naechste Zeile darunter - row-gap allein reicht
     als Abstand zur Titelzeile nicht aus, da das absolut positionierte
     Logo (.topbar-logo-link, 36px hoch ab 10px von oben, s.o. = bis 46px)
     unabhaengig vom Flex-Umbruch weiterhin bis 46px in die Kopfzeile
     hineinragt und Postfach-Icon/Menue in der umgebrochenen Zeile sonst
     knapp ueberlappen wuerde. */
  .topbar-right {
    gap: 8px;
    margin-top: 6px;
  }
  /* Ausklapp-Menue (nav.php) auf schmalen Bildschirmen (Nutzer-Meldung
     06.09.2026: "das menu in der mobile-version wird nicht im bild
     angezeigt, sondern zu weit links"). Ursache: das Panel ist per
     "position: absolute; right: 0" am schmalen "Menü"-Knopf ausgerichtet
     und waechst mit seinem Inhalt (grosse, fette Gruppen-Ueberschriften)
     ueber die 260px Mindestbreite hinaus - links ragte es dadurch aus dem
     Bild heraus, sobald der Knopf nicht am rechten Rand steht (auf Mobil
     bricht .topbar-right in eine eigene, linksbuendige Zeile um, s.o.).
     Loesung ohne JavaScript: .nav-menu verliert hier seine
     position:relative, wodurch das Panel seinen Bezugsrahmen vom Knopf auf
     die Kopfzeile selbst verlagert (header.topbar ist position:sticky und
     damit ebenfalls ein gueltiger Positionierungs-Kontext - dasselbe
     Prinzip nutzt bereits das absolut positionierte Logo). Es spannt sich
     dann mit festem Rand ueber die volle Breite unterhalb der Kopfzeile
     auf, kann also weder links noch rechts herausragen. */
  .nav-menu {
    position: static;
  }
  .nav-menu nav {
    top: calc(100% + 4px);
    left: 12px;
    right: 12px;
    min-width: 0;
    /* Das Menue ist laenger als ein Handy-Bildschirm hoch ist - ohne diese
       Begrenzung sind die letzten Eintraege ("Kennwort ändern", "Abmelden")
       unerreichbar, weil das Panel unten einfach abgeschnitten wird. */
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Der zusaetzliche "Öffentliche Startseite ↗"-Link (nur im Admin-Bereich,
     s. nav.php) ist auf Mobilgeraeten am ehesten verzichtbar - Postfach-Icon
     und Menue muessen dagegen unbedingt erreichbar bleiben, deshalb wird nur
     dieser Link ausgeblendet (die oeffentliche Startseite ist ohnehin ueber
     das Logo/den Titel weiterhin einen Klick entfernt). */
  .topbar-right .topbar-public-nav {
    display: none;
  }
}

/* Kalenderauswahl in der Termin-Uebersicht (index.php) als Dropdown
   (Nutzerwunsch 06.09.2026: "die einzelnen kalender ueber ein dropdown (wie
   die vereine) ausgewaehlt werden koennten... die liste kann hier
   'ausgeblendet' werden"). Bis 09.09.2026 galt das nur auf Mobilgeraeten -
   am Desktop standen die Kalender-Pillen offen in der Leiste. Seit
   10.09.2026 ist es auf JEDER Breite dasselbe Dropdown (Nutzerwunsch mit
   Skizze), damit die Werkzeugleiste ueberall gleich aussieht.

   Das Panel bleibt bewusst im normalen Fluss und schiebt beim Aufklappen die
   Suchzeile nach unten, statt sie zu ueberdecken (Nutzerwunsch 10.09.2026:
   "kalender verschiebt die suche leider nicht mehr nach unten"). Damit es
   trotzdem die volle Breite bekommt - im Umschalter steckend waere es nur
   ~230px breit und wuerde die Kalender-Chips einzeln stapeln -, steht es im
   Markup NICHT im .calendar-filter, sondern als eigene Zeile zwischen Filter-
   und Suchzeile. Ohne JavaScript ist das Panel offen und die Auswahl damit
   weiterhin bedienbar (admin-index.js klappt es beim Laden zu). */
.calendar-filter {
  /* Fuellt den freien Platz der Filterzeile, bricht auf schmalen
     Bildschirmen automatisch auf volle Breite um. Die Grundbreite ist
     bewusst klein (180px): sie muss zusammen mit Vereinsfilter, Farben,
     Zeitraum UND dem Ansichtsumschalter in eine Zeile passen, sonst rutscht
     "Kacheln/Liste" in eine zweite Zeile. Den tatsaechlich freien Platz
     bekommt dieses Element danach ueber flex-grow. */
  flex: 1 1 180px;
  min-width: 0;
}
.calendar-filter-toggle {
  /* Optik kommt aus .pill - hier nur die Zeilenfuellung und der Pfeil ganz
     rechts statt mittig. */
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.calendar-filter-panel {
  /* Eigene Zeile der Werkzeugleiste (s. .calendar-picker: Flex-Spalte mit
     8px Abstand - der Abstand nach oben/unten kommt also von dort). */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.calendar-filter-panel.collapsed {
  display: none;
}

@media (max-width: 700px) {
  /* Ansichtsumschalter auf Mobilgeraeten komplett ausgeblendet (Nutzerwunsch
     06.09.2026 fuer "Liste": "die liste kann hier 'ausgeblendet' werden, da
     das auf einem smartphone nicht relevant ist"; 10.09.2026 dann auch fuer
     "Kacheln": "das feld 'kacheln' muss genauso, wie 'liste' gar nicht
     angezeigt werden"). Ohne die Liste hat der Umschalter mobil keine
     Funktion mehr - die Kachelansicht ist dort ohnehin die einzige. Ruft man
     die Seite mit ?view=list vom Desktop aus auf, greift weiterhin die
     serverseitige Logik; die Listenansicht selbst ist mobil per CSS
     unbrauchbar, aber nicht gesperrt. */
  .view-toggle {
    display: none;
  }

  /* Pager platzsparend: nur die Pfeile, ohne "Zurueck"/"Weiter" (Nutzerwunsch
     10.09.2026: "zurueck und weiter wird leider auf zwei zeilen umgebrochen
     ... vllt kann man mobil die schaltflaechen einfach als '<-' und '->'
     anzeigen"). Die Bedeutung steckt weiterhin im title-Attribut der Links. */
  .pager-label {
    display: none;
  }
  /* Etwas engere Abstaende, damit "Heute" (erscheint nur ausserhalb des
     laufenden Monats) noch in dieselbe Zeile passt. */
  .period-nav {
    gap: 6px;
  }
}

/* Stundenplan-Ein-Tag-Ansicht auf Mobilgeraeten (Nutzerwunsch 06.09.2026:
   "hier stelle ich mir vor, dass hier links eine spalte zeiten und rechts
   daneben EINE Spalte '<Tag>' angezeigt wird. ueber die pfeile kann man
   einen tag zurueck oder vor wechseln"). Der Umschalter (Pfeile + Tages-
   name) ist auf Desktop-Breiten unsichtbar und wirkungslos, dort bleibt
   die gewohnte 6-spaltige Wochenansicht (s. .stundenplan-grid) bestehen. */
.stundenplan-day-switcher {
  display: none;
}

@media (max-width: 700px) {
  .stundenplan-day-switcher {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fdf5f6;
  }
  .stundenplan-day-switcher-label {
    font-size: 13px;
    color: var(--text);
    text-align: center;
    flex: 1;
  }
  .stundenplan-day-prev,
  .stundenplan-day-next {
    border: 2px solid var(--brand-red);
    border-radius: 999px;
    background: #fff;
    color: var(--brand-red);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    white-space: nowrap;
  }

  /* Nur noch die "Zeiten"-Spalte + die aktuell gewaehlte Tages-Spalte
     bleiben sichtbar (gesteuert ueber data-current-day auf
     .stundenplan-grid-wrap, s. stundenplan-day-switcher.js). Da
     "display: none" Elemente aus dem Grid-Auto-Placement herausnimmt,
     ordnen sich die jeweils zwei sichtbaren Zellen pro Zeile (Zeiten +
     ein Tag) automatisch korrekt in die verbleibenden zwei Spalten ein -
     alle uebrigen Eingabefelder bleiben unveraendert im DOM, es aendert
     sich nur die Anzeige. */
  .stundenplan-grid {
    grid-template-columns: 90px 1fr;
    min-width: 0;
  }
  .stundenplan-cell[data-day] {
    display: none;
  }
  .stundenplan-grid-wrap[data-current-day="1"] .stundenplan-cell[data-day="1"],
  .stundenplan-grid-wrap[data-current-day="2"] .stundenplan-cell[data-day="2"],
  .stundenplan-grid-wrap[data-current-day="3"] .stundenplan-cell[data-day="3"],
  .stundenplan-grid-wrap[data-current-day="4"] .stundenplan-cell[data-day="4"],
  .stundenplan-grid-wrap[data-current-day="5"] .stundenplan-cell[data-day="5"] {
    display: flex;
  }
}