/*
 * Basis-Layout und Bausteine (KPTSM-15). Desktop zuerst, ab schmalen Fenstern voll nutzbar auf dem Handy.
 * Nur Tokens aus tokens.css verwenden, keine festen Farbwerte hier. Systemschriften: keine externen Fonts (Datenschutz, Ladezeit).
 */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--flaeche-seite);
  color: var(--text);
  font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

img, svg { max-width: 100%; height: auto; }

/* Das hidden-Attribut gewinnt immer: Klassen mit eigenem display (.nav-link, .knopf, .option) würden es sonst überstimmen,
   und Links mit data-recht (blendeNichtErlaubtesAus) wären für jede Rolle sichtbar. */
[hidden] { display: none !important; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); }
h2 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem); }
p, ul { margin: 0 0 1em; max-width: 70ch; }
.seite h2 { margin-top: 2rem; }
.seite h1 + p + h2 { margin-top: 1.5rem; }

a { color: var(--vfl-gruen-text); text-underline-offset: 0.15em; }

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--marke-weiss);
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel-min);
  padding: 0 1rem;
  background: var(--flaeche-karte);
  color: var(--text);
  font-weight: 600;
}
.skip-link:focus { top: 0.5rem; }

/* Kopfzeile: beide Vereine nebeneinander, darunter die zweifarbige Linie (Herrenberg grün, Kickers hellblau). */
.kopf { background: var(--flaeche-karte); }

.kopf__innen {
  max-width: var(--seite-breite);
  margin: 0 auto;
  padding: 0.5rem clamp(1rem, 4vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
}

.kopf__linie {
  height: 0.375rem;
  background: linear-gradient(90deg, var(--marke-vfl-gruen) 50%, var(--marke-kickers-hellblau) 50%);
}

.marke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  min-height: var(--ziel-min);
  color: var(--text);
  text-decoration: none;
}

/* Trenner 1,5-fach (KPTSM-37): Schrift 1 rem -> 1,5 rem, Abstand 0,625 rem -> 0,9375 rem. */
.marke__vereine { display: flex; align-items: center; gap: 0.9375rem; }
.marke__x { color: var(--text-gedaempft); font-weight: 700; font-size: 1.5rem; line-height: 1; }
/* Beide Logos haben transparenten Rand (VfL füllt etwa 70 % der Höhe), daher 3 rem; width/height im HTML verhindern Layout-Sprünge. */
.marke__logo { display: block; height: 3rem; width: auto; }
/* Das VfL-Bild hat mehr transparenten Rand (Wappen füllt etwa 70 % der Höhe, 53 % der Breite). Größer darstellen und den Rand
   über negative Außenabstände ausgleichen, damit Wappen und Kickers-Kreis gleich groß wirken, ohne die Kopfzeile zu verlängern. */
.marke__logo--vfl { height: 4.25rem; margin: -0.625rem -0.875rem; }

.marke__titel {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-gedaempft);
}

/* Inhalt */
.seite {
  max-width: var(--seite-breite);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2rem) 3rem;
}

.fuss {
  max-width: var(--seite-breite);
  margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 2rem) 2rem;
  color: var(--text-gedaempft);
  font-size: 0.875rem;
}

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 0.75rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

/* Bedienelemente: alle mindestens 44 x 44 px (AK01) */
.knopf, .feld, .nav-link {
  min-height: var(--ziel-min);
  font: inherit;
}

.knopf, .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ziel-min);
  padding: 0 1rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.knopf { border: 2px solid transparent; }
.knopf--primaer { background: var(--antritt-vfl-bg); color: var(--antritt-vfl-fg); }
.knopf--sekundaer { background: var(--flaeche-karte); color: var(--text); border-color: var(--linie-stark); }
.knopf--gefahr { background: var(--konflikt-bg); color: var(--konflikt-fg); }
.knopf[disabled] { opacity: 0.55; cursor: not-allowed; }

.nav-link { color: var(--text); }
.nav-link[aria-current="page"] { box-shadow: inset 0 -0.25rem 0 var(--marke-vfl-gruen); }

.feld {
  width: 100%;
  padding: 0 0.75rem;
  background: var(--flaeche-karte);
  color: var(--text);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
}
textarea.feld { padding-top: 0.625rem; padding-bottom: 0.625rem; min-height: 6rem; }

.meldung { margin: 0; padding: 0.75rem 1rem; background: var(--flaeche-karte); border-left: 0.25rem solid var(--konflikt-bg); }
.meldung[hidden] { display: none; }
.nutzerliste { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.75rem; }
.nutzerliste > li { display: grid; gap: 0.5rem; }
.nutzerliste .name { font-weight: 600; }
.etikett { display: block; margin: 0 0 0.25rem; font-weight: 600; }
.formular { display: grid; gap: 1rem; max-width: 28rem; margin-bottom: 2rem; }
/* Gruppe von Optionsfeldern (z. B. Jahrgang): jede Option ist mindestens 44 px hoch */
.gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.gruppe > legend { padding: 0; margin: 0 0 0.25rem; font-weight: 600; }
.option { display: flex; align-items: center; gap: 0.75rem; min-height: var(--ziel-min); }
.option input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; }
.hilfetext { margin: 0.25rem 0 0; color: var(--text-gedaempft); font-size: 0.875rem; }

/* Badges (keine Bedienelemente): Jahrgang, Status, Konflikt, Antritt */
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 0.625rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge--jahrgang-2016 { background: var(--jahrgang-2016-bg); color: var(--jahrgang-2016-fg); }
.badge--jahrgang-2017 { background: var(--jahrgang-2017-bg); color: var(--jahrgang-2017-fg); }

.badge--status-eingang { background: var(--status-eingang-bg); color: var(--status-eingang-fg); }
.badge--status-geprueft { background: var(--status-geprueft-bg); color: var(--status-geprueft-fg); }
.badge--status-angefragt { background: var(--status-angefragt-bg); color: var(--status-angefragt-fg); }
.badge--status-zugesagt { background: var(--status-zugesagt-bg); color: var(--status-zugesagt-fg); }
.badge--status-fix { background: var(--status-fix-bg); color: var(--status-fix-fg); }
.badge--status-in-spielerplus { background: var(--status-in-spielerplus-bg); color: var(--status-in-spielerplus-fg); }
.badge--status-abgesagt { background: var(--status-abgesagt-bg); color: var(--status-abgesagt-fg); text-decoration: line-through; }

.badge--leistung-staerker { background: var(--leistung-staerker-bg); color: var(--leistung-staerker-fg); }
.badge--leistung-mittelstark { background: var(--leistung-mittelstark-bg); color: var(--leistung-mittelstark-fg); }

.badge--blackout { background: var(--blackout-bg); color: var(--blackout-fg); }
.badge--blackout-frei { background: var(--flaeche-karte); color: var(--text); box-shadow: inset 0 0 0 2px var(--blackout-bg); }
.badge--konflikt { background: var(--konflikt-bg); color: var(--konflikt-fg); }

.badge--antritt-vfl { background: var(--antritt-vfl-bg); color: var(--antritt-vfl-fg); }
.badge--antritt-kickers { background: var(--antritt-kickers-bg); color: var(--antritt-kickers-fg); }
.badge--antritt-neutral, .badge--neutral { background: var(--antritt-neutral-bg); color: var(--antritt-neutral-fg); }

/* Farbfelder der Styleguide-Seite */
.farbfeld {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  font-size: 0.875rem;
  font-weight: 600;
}
.farbfeld code { font-weight: 400; }
.farbfeld--vfl { background: var(--marke-vfl-gruen); color: var(--marke-weiss); }
.farbfeld--logo-gruen { background: var(--marke-logo-gruen); color: var(--text); }
.farbfeld--kickers { background: var(--marke-kickers-hellblau); color: var(--text-auf-hellblau); }
.farbfeld--weiss { background: var(--marke-weiss); color: var(--text); }

.karte {
  background: var(--flaeche-karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}
.zeile { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* Maßnahmenliste und Detailansicht (KPTSM-17): Karten, die auch bei 320 px ohne seitliches Scrollen lesbar bleiben */
.werkzeug { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin: 0 0 1rem; }
.werkzeug > div { min-width: 0; }
.werkzeug .feld { width: auto; max-width: 100%; }
.saison { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.saison__name { font-weight: 600; min-width: 8ch; text-align: center; }
.zaehler { margin: 0 0 1rem; color: var(--text-gedaempft); }
.eintraege { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0.75rem; }
.eintrag { display: grid; gap: 0.5rem; align-content: start; min-width: 0; margin: 0; }
.eintrag__datum { margin: 0; color: var(--text-gedaempft); font-size: 0.875rem; }
.eintrag__titel { display: block; min-height: var(--ziel-min); padding: 0.5rem 0; font-weight: 700; font-size: 1.125rem; overflow-wrap: anywhere; }
.eintrag__badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.eintrag__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; color: var(--text-gedaempft); font-size: 0.875rem; }
.eintrag--blockiert { border-left: 0.25rem solid var(--status-fix-bg); }
.eintrag--konflikt { border-left: 0.25rem solid var(--konflikt-bg); }
.eintrag__konflikt { margin: 0; padding: 0.5rem 0.75rem; border-left: 0.25rem solid var(--konflikt-bg); background: var(--flaeche-seite); overflow-wrap: anywhere; }
.eintrag__status { margin: 0; }
.eintrag__status .feld { max-width: 100%; }
.statusbereich { margin: 0 0 1rem; max-width: 28rem; }
.verlauf dd { white-space: normal; }
.leer { color: var(--text-gedaempft); font-style: italic; }
.detail { display: grid; gap: 0; margin: 0 0 1.5rem; max-width: 40rem; }
.detail > div { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); gap: 0.25rem 1rem; padding: 0.625rem 0; border-bottom: 1px solid var(--linie); }
.detail dt { margin: 0; font-weight: 600; }
.detail dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }

/* Hauptnavigation (KPTSM-30): mobil einklappbar. Einträge ohne Recht gibt es im DOM gar nicht. */
.hauptnav { max-width: var(--seite-breite); margin: 0 auto; padding: 0.5rem clamp(1rem, 4vw, 2rem); }
.hauptnav:empty { display: none; }
.hauptnav__liste { display: none; list-style: none; margin: 0.5rem 0 0; padding: 0; max-width: none; gap: 0.25rem; }
.hauptnav--offen .hauptnav__liste { display: grid; }
.hauptnav__liste li { margin: 0; }
.hauptnav__liste .nav-link, .hauptnav__liste .knopf { width: 100%; justify-content: flex-start; gap: 0.75rem; }
.hauptnav__werkzeug { display: none; }
.nav-symbol { flex: none; width: 1.5rem; height: 1.5rem; }
/* App-Navigation (KPTSM-49): ab 48 rem eine feste Leiste links. Angepinnt (Standard) ausgeklappt mit Symbol und Text und schiebt den Inhalt;
   eingeklappt (--schmal) nur Symbole, der Text bleibt für Lesegeräte erhalten und erscheint als Tooltip; sie öffnet sich bei Hover, Fokus oder
   Schalter (--vorschau, legt sich über den Inhalt) und klappt nach Auswahl oder beim Verlassen zu. Der Platz wird schon vor dem Aufbau des Menüs
   reserviert (Standardbreite), damit der Inhalt nicht springt. Aktuelle Seite: Balken links und Fettdruck, nicht nur Farbe. */
@media (min-width: 48rem) {
  body:has(#hauptnavigation) { padding-left: var(--leiste-breit); }
  body.leiste-schmal:has(#hauptnavigation) { padding-left: var(--leiste-schmal); }
  .hauptnav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 20; display: flex; flex-direction: column; gap: 0.5rem; width: var(--leiste-breit); max-width: none; margin: 0; padding: 0.5rem; overflow: hidden auto; background: var(--flaeche-karte); border-right: 1px solid var(--linie); }
  .hauptnav--schmal { width: var(--leiste-schmal); }
  .hauptnav--vorschau { width: var(--leiste-breit); border-right-color: var(--linie-stark); }
  .hauptnav__schalter { display: none; }
  .hauptnav__werkzeug { display: flex; flex-wrap: wrap; gap: 0.25rem; }
  .hauptnav__werkzeug .knopf { flex: 1 1 100%; justify-content: flex-start; gap: 0.75rem; padding: 0 0.75rem; white-space: nowrap; }
  .hauptnav:not(.hauptnav--schmal) .hauptnav__aufklappen { display: none; }
  .hauptnav__liste, .hauptnav--offen .hauptnav__liste { display: grid; align-content: start; flex: 1; margin: 0; gap: 0.25rem; }
  .hauptnav__liste .nav-link, .hauptnav__liste .knopf { position: relative; padding: 0 0.75rem; white-space: nowrap; }
  .hauptnav__liste .nav-link[aria-current="page"] { box-shadow: inset 0.25rem 0 0 var(--marke-vfl-gruen); background: var(--flaeche-seite); font-weight: 800; }
  .hauptnav--schmal:not(.hauptnav--vorschau) .nav-link__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hauptnav--schmal:not(.hauptnav--vorschau) .nav-zaehler { position: absolute; top: 0.125rem; right: 0.125rem; min-width: 1.25rem; line-height: 1.25rem; padding: 0 0.25rem; }
}

/* Dashboard (KPTSM-30): Bereiche für Banner und Zähler (Konflikte, KPTSM-23); leer und verborgen, bis sie gefüllt werden */
.banner, .zaehler-bereich { margin: 0 0 1rem; }
.banner { padding: 0.75rem 1rem; background: var(--flaeche-karte); border: 1px solid var(--linie); border-left: 0.375rem solid var(--konflikt-bg); border-radius: var(--radius); }
.banner__titel { margin: 0 0 0.5rem; font-weight: 700; }
.banner__liste { margin: 0; padding-left: 1.25rem; max-width: none; }
.banner__liste li { margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.kennzahl { margin: 0; }
.kennzahl__wert { font-size: 1.5rem; margin-right: 0.25rem; }
/* Zähler im Menü (KPTSM-23): rote Zahl, für Lesegeräte mit Text (aria-label); die Zahl selbst trägt die Information, nicht nur die Farbe */
.nav-zaehler { display: inline-block; min-width: 1.5rem; padding: 0 0.375rem; border-radius: 999px; background: var(--konflikt-bg); color: var(--konflikt-fg); font-size: 0.75rem; font-weight: 700; line-height: 1.5rem; text-align: center; }

/* Hinweis bei fehlender Entfernung (KPTSM-63): das Ausrufezeichen ist eine Schaltfläche (mindestens 44 px), der Hinweis steht darunter im Fluss (kein Überlappen auf dem Handy) */
.hinweis { display: inline-block; max-width: 100%; vertical-align: middle; }
.hinweis__zeichen { min-width: var(--ziel-min); min-height: var(--ziel-min); border: 2px solid var(--konflikt-bg); border-radius: 999px; background: var(--flaeche-karte); color: var(--konflikt-bg); font: inherit; font-weight: 800; font-size: 1.25rem; cursor: pointer; }
.hinweis__zeichen[aria-expanded="true"] { background: var(--konflikt-bg); color: var(--konflikt-fg); }
.hinweis__text { display: block; margin: 0.5rem 0; padding: 0.5rem 0.75rem; border-left: 0.25rem solid var(--konflikt-bg); background: var(--flaeche-seite); overflow-wrap: anywhere; font-weight: 400; }
.hinweis__text p { margin: 0 0 0.5rem; }
.hinweis__aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hinweis__fehler { margin: 0 0 0.5rem; font-weight: 700; }

/* Konfliktliste (KPTSM-24): Karten je Konflikt; Rot nur zusammen mit ⚠ und Text, Aktionen als aufklappbare Bereiche (Ziele mindestens 44 px) */
.konflikt-liste { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: none; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.konflikt-liste > li { margin: 0; }
.konflikt { border-left: 0.375rem solid var(--konflikt-bg); overflow-wrap: anywhere; }
.konflikt--verfallen { border-left-color: var(--linie-stark); }
.konflikt__titel { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 700; }
.konflikt__beteiligte { margin: 0 0 0.75rem; padding-left: 1.25rem; max-width: none; }
.konflikt__aktionen { margin: 0.5rem 0 0; }
.konflikt__aktionen summary { min-height: var(--ziel-min); display: flex; align-items: center; cursor: pointer; }
.konflikt__aktionen details > div { margin: 0 0 0.5rem; }

/* Handy: Kopfzeile und Abstände enger, Bedienelemente bleiben groß */
@media (max-width: 40rem) {
  .kopf__innen { column-gap: 0.75rem; }
  .marke__titel { flex-basis: 100%; font-size: 1rem; }
  .knopf { flex: 1 1 auto; }
  .formular { max-width: none; }
  .detail > div { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .knopf { transition: filter 120ms ease-out; }
  .knopf:hover:not([disabled]) { filter: brightness(0.94); }
}

/* Monatskalender (KPTSM-20): sieben Spalten ohne seitliches Scrollen (ab 320 px). Auf dem Handy zeigt jeder Tag nur Nummer und Anzahl,
   Tippen öffnet die Liste darunter; ab 48 rem stehen die Maßnahmen direkt im Tagesfeld. */
.kal__wochentage, .kal__tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; list-style: none; margin: 0; padding: 0; max-width: none; }
.kal__wochentage { margin-bottom: 2px; text-align: center; font-weight: 600; font-size: 0.875rem; color: var(--text-gedaempft); }
.kal__wochentage li { margin: 0; padding: 0.25rem 0; }
.kal__wochentage .kal__we { font-weight: 800; color: var(--text); }
.kal__tage { margin-bottom: 1.5rem; }
.kal__tage li { margin: 0; }
.kal__leer { min-height: var(--ziel-min); }
.kal__tag { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: calc(var(--ziel-min) + 0.5rem); background: var(--flaeche-karte); border: 1px solid var(--linie); border-radius: 3px; }
.kal__tag--we { background: var(--flaeche-wochenende); }
.kal__tag--blockiert { border-bottom: 0.375rem solid var(--status-fix-bg); }
.kal__tag--heute { outline: 3px solid var(--vfl-gruen-text); outline-offset: -2px; }
.kal__tag--gewaehlt { box-shadow: inset 0 0 0 3px var(--fokus); }
.kal__tagknopf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; flex: 1; width: 100%; min-height: var(--ziel-min); padding: 0.25rem 0; border: 0; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.kal__nr { font-weight: 700; }
.kal__anzahl { min-width: 1.5rem; padding: 0 0.25rem; border-radius: 999px; background: var(--vfl-gruen-text); color: var(--marke-weiss); font-size: 0.75rem; font-weight: 700; line-height: 1.25rem; text-align: center; }
.kal__ebene { margin: 0; font-size: 0.75rem; }
.kal__ebene[hidden] { display: none; }
.kal__blockiert, .kal__chips, .kal__konflikt { display: none; }
.kal__tag--konflikt { outline: 2px solid var(--konflikt-bg); outline-offset: -2px; } /* KPTSM-23: roter Rahmen, zusätzlich Text und Symbol (⚠), nie nur Farbe */
.kal__tag--konflikt .kal__nr::after { content: " ⚠"; }
.kal__tagesliste h2 { margin-top: 0; }
@media (min-width: 48rem) {
  .kal__tag { min-height: 8rem; }
  .kal__tagknopf { flex: none; flex-direction: row; justify-content: space-between; padding: 0.25rem 0.5rem; }
  .kal__anzahl { display: none; }
  .kal__blockiert { display: block; padding: 0 0.5rem; font-size: 0.75rem; font-weight: 700; color: var(--status-fix-bg); }
  .kal__chips { display: grid; gap: 0.25rem; list-style: none; margin: 0; padding: 0.25rem; max-width: none; }
  .kal__chip { display: grid; gap: 0.125rem; margin: 0; padding: 0.125rem 0.25rem; border-left: 0.25rem solid var(--linie-stark); font-size: 0.8125rem; min-width: 0; }
  .kal__chip--blockiert { border-left-color: var(--status-fix-bg); }
  .kal__chip--konflikt { border-left-color: var(--konflikt-bg); background: var(--flaeche-seite); }
  .kal__konflikt { display: block; padding: 0 0.5rem; font-size: 0.75rem; font-weight: 700; color: var(--konflikt-bg); }
  .kal__chip a { display: block; min-height: var(--ziel-min); padding: 0.625rem 0; font-weight: 600; overflow-wrap: anywhere; }
  .kal__chipmeta { display: flex; flex-wrap: wrap; gap: 0.25rem; }
  .kal__chipmeta .badge { font-size: 0.6875rem; padding: 0 0.375rem; }
}

/* Filter (KPTSM-19): ein einklappbares Feld für Liste und Kalender; Gruppen aus Kästchen (je mindestens 44 px hoch), mobil untereinander */
.filter { margin: 0 0 1rem; max-width: none; }
.filter > summary { display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; list-style: none; }
.filter > summary::-webkit-details-marker { display: none; }
.filter__inhalt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.75rem 1.5rem; margin: 0.75rem 0; padding: 1rem; background: var(--flaeche-karte); border: 1px solid var(--linie); border-radius: var(--radius); }
.filter__inhalt > *, .filter__antritt { min-width: 0; }
.filter__gruppe { margin: 0; padding: 0; border: 0; min-width: 0; }
.filter__gruppe .etikett { padding: 0; }
.filter__option { min-height: var(--ziel-min); }
.werkzeug .filter__option { display: flex; align-items: center; gap: 0.5rem; }
/* Aktionen der Detailansicht (KPTSM-34): Archivieren, Wiederherstellen, Löschen; Knöpfe mindestens 44 px hoch (.knopf) */
.aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.filter__text { overflow-wrap: anywhere; }
.filter__aktionen { margin: 0 0 0.5rem; }
.filter .feld { max-width: 100%; }

/* Blackouts (KPTSM-25): eigene Ebene im Kalender (schräg gestreift, mit Text), klar getrennt von Maßnahmen und späteren Ferien/Feiertagen (KPTSM-26) */
.kal__tag--blackout { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--linie) 6px 8px); }
.kal__ebene--blackout { margin: 0; padding: 0.125rem 0.5rem; background: var(--blackout-bg); color: var(--blackout-fg); font-size: 0.75rem; font-weight: 600; overflow-wrap: anywhere; }
.kal__ebene--blackout[hidden] { display: none; }
.kal__ebene--blackout { display: none; } /* Handy: nur Streifen und Punkt am Tag, der Text steht in der Liste darunter (ab 48 rem im Tagesfeld) */
.kal__blackoutmarke { display: none; }
.eintrag__blackout { margin: 0; padding: 0.5rem 0.75rem; border-left: 0.25rem solid var(--blackout-bg); background: var(--flaeche-seite); overflow-wrap: anywhere; }
@media (min-width: 48rem) {
  .kal__ebene--blackout:not([hidden]) { display: block; }
}
@media (max-width: 47.99rem) {
  .kal__tag--blackout .kal__nr::after { content: "▪"; margin-left: 0.125rem; }
}
.warnung { margin: 0 0 1rem; padding: 0.75rem 1rem; background: var(--flaeche-karte); border: 1px solid var(--linie); border-left: 0.375rem solid var(--blackout-bg); border-radius: var(--radius); max-width: 40rem; }
.warnung h2 { margin: 0 0 0.5rem; font-size: 1.125rem; }
.warnung .formular { margin-top: 0.75rem; max-width: none; }
.blackout-liste { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: none; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.blackout-liste li { margin: 0; }
.blackout__zeitraum { margin: 0; color: var(--text-gedaempft); }
.blackout__titel { margin: 0; font-weight: 700; font-size: 1.125rem; overflow-wrap: anywhere; }

/* Ferien und Feiertage (KPTSM-26): farbige Hinterlegung des Tages, dazu Text (ab 48 rem im Tagesfeld) und Zeichen hinter der Tageszahl (Handy), nie nur Farbe.
   Getrennt von Blackouts (gestreift, dunkel) und Maßnahmen. Reihenfolge: nach der Wochenendtönung, damit die Hinterlegung gewinnt. */
.kal__tag--ferien { background-color: var(--ferien-bg); }
.kal__tag--feiertag { background-color: var(--feiertag-bg); }
.kal__ebene--feiertag { background: var(--feiertag-bg); color: var(--feiertag-fg); }
.kal__ebene--ferien { background: var(--ferien-bg); color: var(--ferien-fg); }
.kal__ebene--info { display: none; margin: 0; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 48rem) {
  .kal__ebene--info:not([hidden]) { display: block; }
}
@media (max-width: 47.99rem) {
  .kal__tag--feiertag .kal__nr::before { content: "◆"; margin-right: 0.125rem; font-size: 0.625rem; }
  .kal__tag--ferien:not(.kal__tag--feiertag) .kal__nr::before { content: "◇"; margin-right: 0.125rem; font-size: 0.625rem; }
}
.eintrag__info { margin: 0; padding: 0.5rem 0.75rem; border-left: 0.25rem solid var(--linie-stark); overflow-wrap: anywhere; }
.eintrag__info--feiertag { background: var(--feiertag-bg); color: var(--feiertag-fg); }
.eintrag__info--ferien { background: var(--ferien-bg); color: var(--ferien-fg); }

/* Kalender-Rahmen (KPTSM-50, Seite /kalender-neu): Kopfzeile, Mitte, rechte Spalte; Platz für die App-Navigation (KPTSM-49).
   Handy: die Spalten stapeln (Mitte zuerst, rechts darunter), kein seitliches Scrollen. Ab 64 rem drei Spalten. */
.seite--breit { max-width: 90rem; }
.kalrahmen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.kalrahmen > * { min-width: 0; }
.kalrahmen__mitte { display: grid; gap: 1rem; align-content: start; }
.kalrahmen__rechts { display: grid; gap: 1rem; align-content: start; }
.kalrahmen__platz { margin: 0; }
.kalrahmen__platz h2 { margin: 0 0 0.5rem; font-size: 1.125rem; }
.kalrahmen__platz p { margin: 0; }
.kalrahmen__ansicht { min-height: 12rem; container-type: inline-size; }
.kalrahmen__suche { container-type: inline-size; } /* Suchtreffer (KPTSM-58) nutzen die Tabellen-/Kartenregeln der Liste */
.kalrahmen__ansicht h3 { margin-top: 0; }
.kalkopf { display: grid; gap: 0.75rem; }
.kalkopf__oben { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: flex-end; justify-content: space-between; }
.kalkopf__suche { display: grid; flex: 1 1 14rem; gap: 0.25rem; max-width: 28rem; }
.kalkopf__suche .feld { width: 100%; }
.kalkopf__suchetikett { font-weight: 600; }
.kalkopf__suchehinweis { margin: 0; }
.kalkopf__zeile { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.kalkopf__nav, .kalkopf__ansicht { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kalkopf__datum { margin: 0; font-size: 1.125rem; flex: 1 1 10rem; min-width: 0; }
.kalkopf__neu[hidden] { display: none; }
.kalkopf__ansicht .knopf[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 0.25em; }
@media (min-width: 72rem) {
  .kalrahmen { grid-template-columns: minmax(0, 1fr) 18rem; column-gap: 1.5rem; }
}

/* Wochenansicht (KPTSM-51): je Tag ein Block mit großem Datum und Wochentag, darunter die Maßnahmen. Leere Tage nur so hoch wie das große Datum.
   Jahrgang als Farbbalken links (Jahrgangsfarben aus den Stammdaten über --jahrgang-*), zusätzlich als Text; nur der Status ist ein Chip. */
.woche__tage { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 0.5rem; }
.woche__tag { position: relative; display: grid; grid-template-columns: minmax(4.5rem, 6rem) minmax(0, 1fr); gap: 0.25rem 0.75rem; align-items: start; margin: 0; padding: 0.5rem 0.75rem; background: var(--flaeche-karte); border: 1px solid var(--linie); border-radius: var(--radius); }
.woche__tag--we { background: var(--flaeche-wochenende); }
.woche__tag--heute { border: 3px solid var(--vfl-gruen-text); padding: calc(0.5rem - 2px) calc(0.75rem - 2px); }
.woche__tag--leer { align-items: center; }
.woche__kopf { display: grid; margin: 0; line-height: 1.1; }
.woche__nr { order: 1; font-size: 2rem; font-weight: 800; }
.woche__name { order: 2; font-size: 0.875rem; font-weight: 600; color: var(--text-gedaempft); }
.woche__tag--we .woche__name { color: var(--text); }
.woche__heute { order: 3; justify-self: start; margin-top: 0.25rem; padding: 0 0.5rem; border-radius: 999px; background: var(--vfl-gruen-text); color: var(--marke-weiss); font-size: 0.75rem; font-weight: 700; }
.woche__plus { display: inline-flex; align-items: center; justify-content: center; width: var(--ziel-min); height: var(--ziel-min); border: 2px dashed var(--linie-stark); border-radius: var(--radius); color: var(--text-gedaempft); font-size: 1.5rem; }
.woche__tag--leer > .woche__plus { justify-self: start; }
.woche__tag > :not(.woche__kopf) { grid-column: 2; }
.woche__tag > .woche__kopf { grid-row: 1 / span 4; }
.woche__tag > .woche__plus { grid-column: 2; justify-self: start; text-decoration: none; } /* Plus am Tag (KPTSM-57): Link, 44 px, auch bei belegten Tagen */
.woche__plus:hover, .woche__plus:focus-visible { border-style: solid; color: var(--text); background: var(--flaeche-seite); }
.woche__keine { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.woche__liste { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 0.5rem; min-width: 0; }
.woche__karte { position: relative; display: grid; gap: 0.25rem; min-width: 0; margin: 0; padding: 0.25rem 0.75rem 0.5rem 1.25rem; background: var(--flaeche-karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.woche__karte--konflikt { border: 2px solid var(--konflikt-bg); }
.woche__balken { position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: 0.5rem; }
.woche__balken > span { flex: 1; }
.woche__balken--2016 { background: var(--jahrgang-2016-bg); }
.woche__balken--2017 { background: var(--jahrgang-2017-bg); }
.woche__balken--neutral { background: var(--antritt-neutral-bg); }
.woche__titel { display: block; min-height: var(--ziel-min); padding: 0.625rem 0 0.125rem; font-weight: 700; font-size: 1.0625rem; overflow-wrap: anywhere; }
.woche__meta, .woche__chips { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; margin: 0; padding: 0; max-width: none; font-size: 0.875rem; }
.woche__meta li, .woche__chips li { margin: 0; }
.woche__zeile { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--text); overflow-wrap: anywhere; }
.woche__zeile--leer { color: var(--text-gedaempft); font-style: italic; }
.woche__symbol { flex: none; width: 1rem; height: 1rem; }
@media (max-width: 30rem) {
  .woche__tag { grid-template-columns: minmax(0, 1fr); }
  .woche__kopf { grid-template-columns: auto auto auto; justify-content: start; align-items: baseline; column-gap: 0.5rem; }
  .woche__tag--leer { grid-template-columns: minmax(0, 1fr) auto; }
  .woche__tag > :not(.woche__kopf) { grid-column: 1; }
  .woche__tag > .woche__kopf { grid-row: auto; }
  .woche__tag--leer > .woche__ebenen { grid-column: 1 / -1; }
  .woche__tag--leer > .woche__plus { grid-column: 2; grid-row: 1; }
  .woche__tag--leer > .woche__kopf { grid-column: 1; grid-row: 1; }
}

/* Listenansicht im Kalender (KPTSM-52): flache Tabelle, eine Zeile je Maßnahme, ganze Zeile klickbar (der Titel-Link spannt sie auf).
   Ist der Platz der Ansicht kleiner als die Tabelle braucht (unter 72 rem Breite des Kalender-Containers, nicht des Fensters: die Leiste links und die rechte Spalte nehmen Platz;
   die Tabelle ist von Natur aus rund 1.100 px breit, KPTSM-52 Rework),
   werden die Zeilen zu Karten: jede Zelle trägt ihre Beschriftung (data-label), kein seitliches Scrollen. */
.liste { width: 100%; border-collapse: collapse; background: var(--flaeche-karte); border: 1px solid var(--linie); }
.liste__beschreibung { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.liste th { padding: 0.5rem 0.75rem; text-align: left; font-size: 0.875rem; color: var(--text-gedaempft); border-bottom: 2px solid var(--linie-stark); }
.liste__zeile { position: relative; border-bottom: 1px solid var(--linie); }
.liste__zeile:hover { background: var(--flaeche-seite); }
.liste__zeile--konflikt { box-shadow: inset 0.25rem 0 0 var(--konflikt-bg); }
.liste__zelle { padding: 0.5rem 0.75rem; vertical-align: top; overflow-wrap: break-word; }
.liste__zeit { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--text); }
.liste__zeit.liste__leer { color: var(--text-gedaempft); }
.liste__typ { white-space: nowrap; }
.liste__ort { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste__datum { font-weight: 600; }
.liste__datum time { white-space: nowrap; }
.liste__leer { color: var(--text-gedaempft); font-style: italic; }
.liste__link { display: inline-block; min-height: var(--ziel-min); padding: 0.625rem 0; font-weight: 700; }
.liste__link::after { content: ""; position: absolute; inset: 0; }
.liste__link:focus-visible { outline: 3px solid var(--fokus); outline-offset: -3px; }
.liste__chips { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; margin: 0; padding: 0; max-width: none; }
.liste__chips li { margin: 0; }
@container (max-width: 71.99rem) {
  .liste thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .liste, .liste tbody { display: block; }
  /* Zeile 1: Datum, Veranstalter, Status; Zeile 2: Typ, Jahrgang, Uhrzeit, Ort mit Beschriftung */
  .liste__zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; padding: 0.25rem 0.75rem 0.5rem; }
  .liste__zeile::before { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .liste__zelle { display: block; order: 5; padding: 0; font-size: 0.875rem; }
  .liste__zelle::before { content: attr(data-label) ": "; color: var(--text-gedaempft); }
  .liste__datum { order: 1; font-size: 1rem; }
  .liste__zeit { display: inline; margin-left: 0.5rem; }
  .liste__typ { white-space: normal; }
  .liste__ort { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; }
  .liste__titel { order: 2; flex: 1 1 10rem; font-size: 1rem; }
  .liste__status { order: 3; }
  .liste__datum::before, .liste__titel::before, .liste__status::before { content: none; }
}

/* Filter in der rechten Spalte des Kalender-Rahmens (KPTSM-55): Checkbox-Listen (keine Chips), "Weitere Filter" eingeklappt, Zähler und Zurücksetzen. */
.filter--rahmen { margin: 0; }
.filter--rahmen .filter__zaehler { display: block; margin: 0 0 0.5rem; font-weight: 600; }
.filter--rahmen .filter__inhalt { grid-template-columns: minmax(0, 1fr); margin: 0 0 0.75rem; padding: 0; background: none; border: 0; }
.filter--rahmen .filter__aktionen { margin: 0; }
.filter--rahmen .filter__aktionen .knopf { width: 100%; }
.filter__weitere > summary { display: flex; align-items: center; cursor: pointer; list-style: none; }
.filter__weitere > summary::-webkit-details-marker { display: none; }
.filter__weitere > summary::after { content: "+"; margin-left: auto; font-weight: 800; }
.filter__weitere[open] > summary::after { content: "–"; }
.filter__weitere-inhalt { display: grid; gap: 0.75rem; margin-top: 0.75rem; min-width: 0; }

/* Mini-Kalender (KPTSM-54): zwei Monate untereinander (auf kleinen Bildschirmen einer, per Skript), Tage mindestens 44 px, Punkte in den Jahrgangsfarben.
   Gewählter Tag gefüllt, heutiger Tag mit Ring (Form statt nur Farbe); die Markierung steht zusätzlich als Text (Tooltip, aria-label). */
.mini__kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.5rem; }
.mini__bereich { margin: 0; flex: 1; text-align: center; font-weight: 600; font-size: 0.875rem; }
.mini__blaettern { padding: 0; }
.mini__monat { margin: 0 0 0.75rem; }
.mini__titel { margin: 0 0 0.25rem; font-size: 1rem; }
.mini__wochentage, .mini__tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.mini__wochentage { margin: 0 0 2px; text-align: center; font-size: 0.75rem; color: var(--text-gedaempft); }
.mini__leer { min-height: var(--ziel-min); }
.mini__tag { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; min-width: 0; min-height: var(--ziel-min); padding: 0; background: var(--flaeche-karte); color: var(--text); border: 1px solid var(--linie); border-radius: 3px; font: inherit; cursor: pointer; }
.mini__tag--we { background: var(--flaeche-wochenende); }
.mini__tag--heute { box-shadow: inset 0 0 0 2px var(--vfl-gruen-text); font-weight: 800; }
.mini__tag--gewaehlt { background: var(--text); color: var(--flaeche-karte); border-color: var(--text); font-weight: 800; }
.mini__tag:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; }
.mini__nr { line-height: 1; }
.mini__punkt { width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1px solid var(--flaeche-karte); }
.mini__punkt--2016 { background: var(--jahrgang-2016-bg); }
.mini__punkt--2017 { background: var(--jahrgang-2017-bg); }
.mini__punkt--beide { background: linear-gradient(90deg, var(--jahrgang-2016-bg) 50%, var(--jahrgang-2017-bg) 50%); }

/* Monatsansicht (KPTSM-53): Raster Mo bis So, je Tagesbox bis zu drei Mini-Zeilen mit Farbbalken (Jahrgang, zusätzlich als Text im Namen des Links), danach „+ n weitere“.
   Tage außerhalb des Monats: gedämpfter Hintergrund, Text bleibt --text-gedaempft (Kontrast ≥ 4,5:1, keine Transparenz). Unter 48 rem zeigt die Tagesbox nur die Zahl der Maßnahmen. */
.monat__huelle { container: monat / inline-size; } /* die Breite des Monats (nicht des Fensters) entscheidet über Kurzform, Zeilen und das Wort „Verdrängt“ (KPTSM-77) */
.monat { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--flaeche-karte); border: 1px solid var(--linie); }
.monat__beschreibung { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.monat__spalte { padding: 0.5rem 0.25rem; text-align: center; font-size: 0.875rem; color: var(--text-gedaempft); border-bottom: 2px solid var(--linie-stark); }
.monat__kurz { display: none; }
.monat__box { position: relative; vertical-align: top; height: 8.5rem; min-width: 0; padding: 0.25rem; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.monat__box:last-child { border-right: 0; }
.monat__box--we { background: var(--flaeche-wochenende); }
.monat__box--fremd { background: var(--flaeche-seite); }
.monat__box--fremd .monat__nr { color: var(--text-gedaempft); font-weight: 400; }
.monat__box--heute { outline: 3px solid var(--vfl-gruen-text); outline-offset: -3px; }
.monat__kopf { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.375rem; min-height: var(--ziel-min); padding-right: var(--ziel-min); } /* rechts Platz für das Plus: es überdeckt keine Mini-Zeile (KPTSM-77) */
.monat__tag { min-width: 1.75rem; min-height: 1.75rem; padding: 0 0.25rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.monat__tag:hover { background: var(--flaeche-seite); }
.monat__nr { font-size: 1rem; font-weight: 700; }
.monat__heute { padding: 0 0.5rem; border-radius: 999px; background: var(--vfl-gruen-text); color: var(--marke-weiss); font-size: 0.75rem; font-weight: 700; }
.monat__anzahl { display: none; }
.monat__markierung { min-height: 0; }
.monat__zeilen { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 0.125rem; }
.monat__zeile { position: relative; margin: 0; min-width: 0; background: var(--flaeche-karte); border: 1px solid var(--linie); border-radius: 3px; overflow: hidden; }
.monat__zeile--konflikt { border: 2px solid var(--konflikt-bg); }
.monat__balken { position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: 0.375rem; }
.monat__balken > span { flex: 1; }
.monat__link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.25rem; min-width: 0; min-height: 1.5rem; padding: 0.125rem 0.25rem 0.125rem 0.625rem; font-size: 0.75rem; line-height: 1.3; color: var(--text); text-decoration: none; }
.monat__link:hover { background: var(--flaeche-seite); text-decoration: underline; }
.monat__zeit { flex: none; font-variant-numeric: tabular-nums; color: var(--text-gedaempft); }
.monat__titel { flex: 1 1 3rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.monat__konflikt { flex: none; font-weight: 700; color: var(--konflikt-bg); }
.monat__mehr { margin-top: 0.125rem; padding: 0.125rem 0.25rem; border: 0; background: transparent; color: var(--vfl-gruen-text); font: inherit; font-size: 0.75rem; font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.monat__plus { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: var(--ziel-min); height: var(--ziel-min); border: 2px dashed var(--linie-stark); border-radius: var(--radius); background: var(--flaeche-karte); color: var(--text-gedaempft); font-size: 1.25rem; text-decoration: none; opacity: 0; }
.monat__plus[hidden] { display: none; }
.monat__box:hover .monat__plus, .monat__plus:focus-visible { opacity: 1; } /* beim Überfahren und bei Tastaturfokus; Berührungsgeräte ohne Hover zeigen es dauerhaft */
@media (hover: none) { .monat__plus { opacity: 1; } }
.monat__plus:hover { border-style: solid; color: var(--text); }
/* Darstellung nach Breite des Monats (KPTSM-77). Kurzform der Wochentage, wenn die Langform nicht passt; „⚠“ ohne das Wort bei schmaler Box (das Wort steht im Namen des Links);
   Anzahl statt Zeilen (Tipp auf den Tag öffnet die Woche) unter 36 rem, mit Berührung unter 56 rem, weil dort 44-px-Zeilen nicht passen; unter 48 rem Fenster sicherheitshalber ebenso. */
@container monat (max-width: 39.99rem) { .monat__lang { display: none; } .monat__kurz { display: inline; } }
@container monat (max-width: 51.99rem) { .monat__konflikt-wort { display: none; } }
@container monat (max-width: 35.99rem) {
  .monat__box { height: 4.5rem; }
  .monat__tag { min-width: 2.75rem; min-height: 2.75rem; }
  .monat__kopf { gap: 0; padding-right: 0; justify-content: center; min-height: 0; }
  .monat__heute { font-size: 0.625rem; padding: 0 0.25rem; }
  .monat__zeilen, .monat__mehr, .monat__plus { display: none; }
  .monat__anzahl { display: inline-block; min-width: 1.25rem; padding: 0 0.25rem; border-radius: 999px; background: var(--antritt-neutral-bg); color: var(--text); font-size: 0.75rem; font-weight: 700; text-align: center; }
}
@media (pointer: coarse) {
  .monat__tag { min-height: 2.75rem; min-width: 2.75rem; }
  .monat__link { min-height: 2.75rem; align-items: center; }
  @container monat (max-width: 55.99rem) {
    .monat__box { height: 4.5rem; }
    .monat__tag { min-width: 2.75rem; min-height: 2.75rem; }
    .monat__kopf { gap: 0; padding-right: 0; justify-content: center; min-height: 0; }
    .monat__heute { font-size: 0.625rem; padding: 0 0.25rem; }
    .monat__zeilen, .monat__mehr, .monat__plus { display: none; }
    .monat__anzahl { display: inline-block; min-width: 1.25rem; padding: 0 0.25rem; border-radius: 999px; background: var(--antritt-neutral-bg); color: var(--text); font-size: 0.75rem; font-weight: 700; text-align: center; }
  }
}
@media (max-width: 47.99rem) {
  .monat__lang { display: none; }
  .monat__kurz { display: inline; }
  .monat__box { height: 4.5rem; }
  .monat__tag { min-width: 2.75rem; min-height: 2.75rem; }
  .monat__kopf { gap: 0; padding-right: 0; justify-content: center; min-height: 0; }
  .monat__heute { font-size: 0.625rem; padding: 0 0.25rem; }
  .monat__zeilen, .monat__mehr, .monat__plus { display: none; }
  .monat__anzahl { display: inline-block; min-width: 1.25rem; padding: 0 0.25rem; border-radius: 999px; background: var(--antritt-neutral-bg); color: var(--text); font-size: 0.75rem; font-weight: 700; text-align: center; }
}

/* Detail-Popup im Kalender (KPTSM-56): modaler Dialog, Stufe 1 (Zeilen mit Symbol, Status als Chip) und Stufe 2 über „Mehr“ (größer, scrollbar).
   Kopf: Farbstreifen in der Jahrgangsfarbe (die Farben stehen zusätzlich als Text in der Zeile „Jahrgang“), sonst neutral, kein Look-Umbau. */
.detailpopup { box-sizing: border-box; width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); margin: auto; padding: 0; border: 2px solid var(--linie-stark); border-radius: var(--radius); background: var(--flaeche-karte); color: var(--text); overflow: hidden; }
.detailpopup--gross { width: min(44rem, calc(100vw - 2rem)); }
.detailpopup::backdrop { background: var(--ueberlagerung); }
.detailpopup__rahmen { display: grid; gap: 0.75rem; max-height: calc(100vh - 2rem - 4px); overflow-y: auto; padding: 0 1rem 1rem; }
.detailpopup__kopf { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding-top: 1rem; border-bottom: 1px solid var(--linie); }
.detailpopup__balken { position: absolute; top: 0; left: -1rem; right: -1rem; display: flex; height: 0.5rem; background: var(--antritt-neutral-bg); }
.detailpopup__balken > span { flex: 1; }
.detailpopup__balken .woche__balken--2016 { background: var(--jahrgang-2016-bg); }
.detailpopup__balken .woche__balken--2017 { background: var(--jahrgang-2017-bg); }
.detailpopup__titel { margin: 0 0 0.5rem; min-width: 0; font-size: 1.25rem; overflow-wrap: break-word; }
.detailpopup__zu { flex: none; min-width: var(--ziel-min); min-height: var(--ziel-min); padding: 0; font-size: 1.5rem; line-height: 1; }
.detailpopup__zeilen, .detailpopup__chips { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: 0.5rem; }
.detailpopup__chips { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
.detailpopup__chips li { margin: 0; }
.detailpopup__zeile { display: grid; grid-template-columns: 1.25rem auto minmax(0, 1fr); align-items: baseline; gap: 0.5rem; margin: 0; overflow-wrap: break-word; }
.detailpopup__symbol { width: 1.25rem; height: 1.25rem; align-self: center; }
.detailpopup__name { font-weight: 600; }
.detailpopup__zeile--leer .detailpopup__text { color: var(--text-gedaempft); font-style: italic; }
.detailpopup__archiv { margin: 0; padding: 0.5rem 0.75rem; border-left: 0.25rem solid var(--blackout-bg); background: var(--flaeche-seite); }
.detailpopup__stufe2 { display: grid; gap: 0; margin: 0; }
.detailpopup__stufe2 dt { margin: 0.5rem 0 0; font-weight: 600; }
.detailpopup__stufe2 dd { margin: 0; overflow-wrap: break-word; white-space: pre-line; }
.detailpopup__aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--linie); }
@media (max-width: 30rem) {
  .detailpopup, .detailpopup--gross { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); }
  .detailpopup__rahmen { max-height: calc(100vh - 1rem - 4px); }
}

/* Suche im Kalender (KPTSM-58): Treffer in der Mitte anstelle der Ansicht, die Tabelle ist die der Listenansicht. */
.suche__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.5rem; }
.suche__titel { margin: 0; font-size: 1.125rem; }

/* Ferien und Feiertage übernehmen (KPTSM-62): Vorschau-Tabelle im Adminbereich; unter 48 rem werden die Zeilen zu Karten (kein seitliches Scrollen). */
.import { max-width: 60rem; }
.import__tabelle { width: 100%; border-collapse: collapse; background: var(--flaeche-karte); border: 1px solid var(--linie); }
.import__beschreibung { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.import__tabelle th { padding: 0.5rem; text-align: left; font-size: 0.875rem; color: var(--text-gedaempft); border-bottom: 2px solid var(--linie-stark); }
.import__tabelle td { padding: 0.375rem 0.5rem; vertical-align: top; border-bottom: 1px solid var(--linie); }
.import__tabelle input[type="checkbox"] { width: var(--ziel-min); height: var(--ziel-min); }
@media (max-width: 47.99rem) {
  .import__tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .import__tabelle, .import__tabelle tbody { display: block; }
  .import__zeile { display: grid; gap: 0.25rem; padding: 0.5rem; border-bottom: 2px solid var(--linie-stark); }
  .import__zeile td { display: grid; gap: 0.125rem; border: 0; padding: 0.125rem 0; }
  .import__zeile td::before { content: attr(data-label); font-size: 0.8125rem; font-weight: 600; color: var(--text-gedaempft); }
}

/* Zusatzebenen im neuen Kalender (KPTSM-59): Feiertag, Ferien und Blackout als Textzeile (Woche) bzw. kurze Marke (Monat), Farben aus den Tokens (weder Grün noch Hellblau,
   Kontrast mindestens 4,5:1); die Art steht immer als Text dabei, Farbe ist nie allein. Mini-Kalender: Hintergrund der Zahl, Blackout als Unterstrich, die Jahrgangs-Punkte bleiben frei. */
.woche__ebenen { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0; max-width: none; }
.woche__ebene { margin: 0; padding: 0.125rem 0.5rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 600; overflow-wrap: break-word; }
.woche__ebene--feiertag, .monat__ebene--feiertag { background: var(--feiertag-bg); color: var(--feiertag-fg); }
.woche__ebene--ferien, .monat__ebene--ferien { background: var(--ferien-bg); color: var(--ferien-fg); }
.woche__ebene--blackout, .monat__ebene--blackout { background: var(--blackout-bg); color: var(--blackout-fg); }
.monat__markierung { display: grid; gap: 0.125rem; margin: 0 0 0.125rem; }
.monat__ebene { display: block; min-width: 0; padding: 0 0.25rem; border-radius: 3px; font-size: 0.6875rem; line-height: 1.35; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monat__voll { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mini__tag--ferien { background: var(--ferien-bg); color: var(--ferien-fg); }
.mini__tag--feiertag { background: var(--feiertag-bg); color: var(--feiertag-fg); }
.mini__tag--blackout { box-shadow: inset 0 -0.25rem 0 var(--blackout-bg); }
.mini__tag--heute.mini__tag--blackout { box-shadow: inset 0 0 0 2px var(--vfl-gruen-text), inset 0 -0.25rem 0 var(--blackout-bg); }
.mini__tag--gewaehlt.mini__tag--ferien, .mini__tag--gewaehlt.mini__tag--feiertag { background: var(--text); color: var(--flaeche-karte); }
@media (max-width: 47.99rem) { .monat__markierung { display: none; } }