/* Ergaenzungen zu Pico: eine schlichte, funktionale Oberflaeche ohne Effekte.
   Hell ist die Voreinstellung, Dunkel waehlt der Schalter in der Kopfzeile:
   theme.js setzt data-theme="dark" oder "light" am html-Element und merkt die
   Wahl im Browser. Die Systemeinstellung (prefers-color-scheme) spielt keine
   Rolle mehr; das html-Element traegt immer ein data-theme, damit auch Pico
   nicht auf sie hoert.
   Inline-Styles gibt es nicht: die Content-Security-Policy (style-src 'self')
   blockiert sie, alles Gestalterische steht hier. Schriften kommen vom System,
   Bilder nur aus /static oder als data:-URL.
   Browser halten statische Dateien ein Jahr: nach jeder Aenderung die Zahl
   hinter ?v= in view/layout.templ hochzaehlen (app.css, app.js, avt-ampel.svg). */

/* --- Farben und Masse --- */
:root {
  color-scheme: light;

  --schrift: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --schrift-technik: "Cascadia Mono", "Cascadia Code", "JetBrains Mono", "SF Mono", ui-monospace, Consolas, "Liberation Mono", monospace;
  --rundung: 0.75rem;
  --rundung-klein: 0.5rem;

  /* Flaechen */
  --seite: #e8eef8;
  --flaeche-fest: #fff;
  --flaeche-leise: #eff5fd;
  --feld: #fff;
  --hover: rgba(14, 100, 220, 0.075);
  --kopf-flaeche: #f4f8ff;
  --linie: rgba(28, 70, 140, 0.15);
  --linie-stark: rgba(28, 70, 140, 0.3);
  --feld-rand: #62748f;

  /* Schrift */
  --text: #0d1a2e;
  --text-leise: #4a5a74;

  /* Akzent: Bedienelemente, Fokus, aktive Navigation */
  --akzent: #0b6fe0;
  --akzent-text: #0a56b4;
  --akzent-text-hover: #073c82;
  --akzent-flaeche: rgba(11, 111, 224, 0.11);
  --auf-akzent: #fff;
  --fokus: rgba(11, 111, 224, 0.38);
  --sekundaer: #5a6a84;
  --sekundaer-hover: #44536b;

  /* Ampelfarben der Statuspunkte */
  --led-rot: #ff3b57;
  --led-gelb: #ffb81f;
  --led-gruen: #1fdc8f;

  /* Signalfarben: Flaeche, Rand/Balken, Text */
  --rot-flaeche: rgba(230, 52, 78, 0.1);
  --rot-rand: #d62f47;
  --rot-text: #98122a;
  --gelb-flaeche: rgba(246, 172, 0, 0.16);
  --gelb-rand: #cf8a00;
  --gelb-text: #644300;
  --gruen-flaeche: rgba(20, 172, 112, 0.13);
  --gruen-rand: #14985f;
  --gruen-text: #0a5636;
  --blau-flaeche: rgba(11, 111, 224, 0.1);
  --blau-rand: #0b6fe0;
  --blau-text: #0a4690;

  /* Plan und Vorschau */
  --luecke: var(--rot-flaeche);
  --luecke-rand: var(--rot-rand);
  --wochenende: rgba(40, 70, 130, 0.06);
  --heute: var(--akzent-flaeche);
  --neu: var(--gruen-flaeche);
  --geaendert: var(--gelb-flaeche);
  --entfernt: var(--rot-flaeche);
}

/* Dunkel ist die Wahl des Schalters (theme.js setzt data-theme am html-Element);
   ohne Schalterwahl bleibt es hell, auch bei dunkler Systemeinstellung. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --seite: #050913;

  --flaeche-fest: #0d1526;
  --flaeche-leise: #111c30;
  --feld: #070d19;
  --hover: rgba(84, 154, 255, 0.1);
  --kopf-flaeche: #060b16;
  --linie: rgba(122, 168, 255, 0.16);
  --linie-stark: rgba(122, 168, 255, 0.32);
  --feld-rand: #6f94c8;

  --text: #e8effc;
  --text-leise: #96a7c4;

  --akzent: #3bdcff;
  --akzent-text: #62e4ff;
  --akzent-text-hover: #a8f1ff;
  --akzent-flaeche: rgba(59, 220, 255, 0.11);
  --auf-akzent: #02111a;
  --fokus: rgba(59, 220, 255, 0.45);
  --sekundaer: #52617d;
  --sekundaer-hover: #66769a;

  --rot-flaeche: rgba(255, 80, 105, 0.13);
  --rot-rand: #ff5069;
  --rot-text: #ffb6c0;
  --gelb-flaeche: rgba(255, 197, 61, 0.12);
  --gelb-rand: #ffc53d;
  --gelb-text: #ffe39e;
  --gruen-flaeche: rgba(45, 226, 155, 0.11);
  --gruen-rand: #2de29b;
  --gruen-text: #9df1cd;
  --blau-flaeche: rgba(59, 220, 255, 0.1);
  --blau-rand: #3bdcff;
  --blau-text: #b6f0ff;

  --wochenende: rgba(120, 150, 210, 0.055);
}

/* --- Pico auf diese Farben und eine dichtere Ansicht einstellen ---
   :root:root hat dieselbe Spezifitaet wie Picos Themenregeln und steht danach. */
:root:root {
  --pico-font-family: var(--schrift);
  --pico-font-family-sans-serif: var(--schrift);
  --pico-font-size: 100%;
  --pico-line-height: 1.5;
  --pico-border-radius: var(--rundung-klein);
  --pico-spacing: 0.875rem;
  --pico-typography-spacing-vertical: 0.875rem;
  --pico-form-element-spacing-vertical: 0.5rem;
  --pico-form-element-spacing-horizontal: 0.8rem;
  --pico-transition: 0s;

  --pico-background-color: var(--seite);
  --pico-color: var(--text);
  --pico-muted-color: var(--text-leise);
  --pico-muted-border-color: var(--linie);
  --pico-primary: var(--akzent-text);
  --pico-primary-background: var(--akzent);
  --pico-primary-border: var(--akzent);
  --pico-primary-underline: var(--fokus);
  --pico-primary-hover: var(--akzent-text-hover);
  --pico-primary-hover-background: var(--akzent);
  --pico-primary-hover-border: var(--akzent);
  --pico-primary-hover-underline: var(--akzent-text-hover);
  --pico-primary-focus: var(--fokus);
  --pico-primary-inverse: var(--auf-akzent);
  --pico-secondary: var(--text-leise);
  --pico-secondary-background: var(--sekundaer);
  --pico-secondary-border: var(--sekundaer);
  --pico-secondary-hover: var(--text);
  --pico-secondary-hover-background: var(--sekundaer-hover);
  --pico-secondary-hover-border: var(--sekundaer-hover);
  --pico-secondary-focus: var(--fokus);
  --pico-h1-color: var(--text);
  --pico-h2-color: var(--text-leise);
  --pico-h3-color: var(--text);
  --pico-h4-color: var(--text);
  --pico-table-border-color: var(--linie);
  --pico-form-element-background-color: var(--feld);
  --pico-form-element-active-background-color: var(--feld);
  --pico-form-element-selected-background-color: var(--hover);
  --pico-form-element-border-color: var(--linie-stark);
  --pico-form-element-active-border-color: var(--akzent);
  --pico-form-element-focus-color: var(--akzent);
  --pico-form-element-color: var(--text);
  --pico-form-element-placeholder-color: var(--text-leise);
  --pico-card-background-color: transparent;
  --pico-card-border-color: var(--linie);
  --pico-card-box-shadow: none;
  --pico-card-sectioning-background-color: var(--flaeche-leise);
  --pico-accordion-border-color: var(--linie);
  --pico-accordion-active-summary-color: var(--akzent-text);
  --pico-switch-checked-background-color: var(--akzent);
}

/* --- Grundflaeche --- */
html { background: var(--seite); scrollbar-color: var(--linie-stark) transparent; scrollbar-width: thin; }

::selection { background: var(--fokus); color: var(--text); }
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: var(--rundung-klein);
}

/* --- Flaechen: Karten, Tabellen und Formulare --- */
article,
figure,
.schlicht,
main:not(.schlicht) > form[method="post"]:has(label) {
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--flaeche-fest);
}
/* Formulare mit Feldern liegen wie alles andere auf einer Flaeche */
main:not(.schlicht) > form[method="post"]:has(label) {
  margin-bottom: 1.1rem;
  padding: 1.15rem 1.25rem 0.45rem;
}

/* --- Grundlayout --- */
.container {
  max-width: 76rem;
  padding-inline: 1.1rem;
}
main.container { padding-block: 1.5rem 3.5rem; }

h1 {
  --pico-font-size: 1.65rem;
  --pico-line-height: 1.2;
  --pico-font-weight: 700;
  letter-spacing: -0.01em;
}
h2 {
  --pico-font-size: 0.78rem;
  --pico-font-weight: 600;
  --pico-typography-spacing-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
  font-family: var(--schrift-technik);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie-stark);
}
h3 {
  --pico-font-size: 1rem;
  --pico-font-weight: 600;
  --pico-typography-spacing-top: 1.25rem;
}

article {
  margin-bottom: 1rem;
  padding: 1rem 1.15rem;
}
article > :last-child { margin-bottom: 0; }

fieldset {
  padding: 1rem 1.1rem 0.3rem;
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--flaeche-leise);
}
legend { padding: 0 0.5rem; font-size: 0.9rem; font-weight: 600; }

a { text-underline-offset: 0.2em; }
small { font-size: 0.82rem; }

/* Formulare, die etwas anlegen, bleiben schmal und gut lesbar; ihre Knoepfe
   behalten die natuerliche Breite (Pico streckt sie sonst ueber das Formular). */
main > form[method="post"] { max-width: 42rem; }
main:not(.schlicht) form > button[type="submit"] { width: auto; }

/* --- Eingabefelder --- */
:is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select, textarea) {
  border: 1px solid var(--feld-rand);
  border-radius: var(--rundung-klein);
  background-color: var(--feld);
  color: var(--text);
}
:is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select, textarea):hover {
  border-color: var(--akzent);
}
:is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select, textarea):focus {
  border-color: var(--akzent);
  background-color: var(--feld);
  box-shadow: 0 0 0 3px var(--fokus);
  outline: 0;
}
label { font-size: 0.88rem; font-weight: 500; color: var(--text-leise); }
label > :is(input, select, textarea) { font-weight: 400; }
label:has(> :is([type="checkbox"], [type="radio"])) { color: var(--text); font-size: 0.95rem; }
:is(input, select, textarea)[disabled] { opacity: 0.75; }
/* Felder und Haken nebeneinander sitzen auf einer Linie, auch wenn eines davon nur ein Haken ist */
.grid { align-items: end; }
.grid > label:has(> [type="checkbox"]) { margin-bottom: 0.9rem; }
form > label:has(> [type="checkbox"]) { margin-bottom: 1rem; }
form p:empty { display: none; }
option { background: var(--flaeche-fest); color: var(--text); }
input[type="file"] {
  height: auto;
  padding: 0.5rem;
  border: 1px dashed var(--feld-rand);
  border-radius: var(--rundung-klein);
  background: var(--flaeche-leise);
}
input[type="file"]:hover { border-color: var(--akzent); background: var(--akzent-flaeche); }
input[type="file"]::file-selector-button {
  margin-inline-end: 0.8rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--feld-rand);
  border-radius: var(--rundung-klein);
  background: var(--flaeche-leise);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
input[type="file"]:is(:hover, :active, :focus)::file-selector-button {
  border-color: var(--akzent);
  background: var(--akzent-flaeche);
  color: var(--text);
}
input[type="checkbox"],
input[type="radio"] {
  border: 1px solid var(--feld-rand);
  background-color: var(--feld);
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  border-color: var(--akzent);
  background-color: var(--akzent);
}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible { box-shadow: 0 0 0 4px var(--fokus); }

/* Formulare mit mehreren Feldern nebeneinander */
.grid { gap: 0 1rem; }

/* --- Kopfzeile --- */
.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0;
  border-bottom: 1px solid var(--linie);
  background: var(--kopf-flaeche);
}
.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  padding-block: 0.625rem;
}

/* --- Marke: AVT-Ampel und Schriftzug --- */
.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text);
  text-decoration: none;
}
.marke img {
  flex: none;
  width: auto;
  height: 2.5rem;
}
.marke-text { display: flex; flex-direction: column; gap: 0.28rem; line-height: 1; }
.marke-text strong {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.22em;
}
.marke-text small {
  font-family: var(--schrift-technik);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* --- Navigation --- */
.haupt {
  flex: 1 1 auto;
  min-width: 0;
  --pico-nav-element-spacing-vertical: 0;
  --pico-nav-element-spacing-horizontal: 0;
  --pico-nav-link-spacing-vertical: 0.42rem;
  --pico-nav-link-spacing-horizontal: 0.55rem;
}
/* Ab 76rem bleibt die Navigation so breit wie sie ist; der Nutzerbereich nimmt den
   Rest und kuerzt einen langen Namen mit Auslassungspunkten, die Kopfzeile bleibt
   einzeilig. Darunter steht die Navigation in einer eigenen Zeile (unten). */
@media (min-width: 76rem) {
  .haupt { flex: 0 0 auto; }
  .nutzer { flex: 1 1 0; justify-content: flex-end; }
}
.haupt ul:first-of-type {
  flex-wrap: wrap;
  gap: 0.2rem;
  margin: 0;
}
.haupt a {
  margin: 0;
  border-radius: 2rem;
  color: var(--text-leise);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
}
.haupt a:hover {
  background: var(--hover);
  color: var(--text);
}
.haupt a[aria-current="page"] {
  background: var(--akzent-flaeche);
  color: var(--akzent-text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--akzent);
}

.nutzer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  margin-left: auto;
  font-size: 0.88rem;
}
/* Schalter, Name und Abmelden teilen eine Geometrie: 2rem hoch und rund */
.nutzer :is(a, button) {
  box-sizing: border-box;
  height: 2rem;
  border-radius: 2rem;
}
.nutzer a {
  display: block;
  min-width: 0;
  padding: 0 0.8rem;
  overflow: hidden;
  border: 1px solid var(--linie-stark);
  background: var(--flaeche-leise);
  color: var(--text);
  line-height: calc(2rem - 2px);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nutzer a:hover { border-color: var(--akzent); }
.nutzer form { flex: none; margin: 0; }
.nutzer button:not(.themenschalter) {
  width: auto;
  margin: 0;
  padding: 0 0.95rem;
  font-size: 0.84rem;
  line-height: 1;
}

/* --- Farbschema-Schalter: Sonne und Mond, der Knopf sitzt auf der aktiven Seite ---
   Der Zustand kommt allein aus data-theme am html-Element; aria-checked pflegt theme.js.
   button.themenschalter liegt auf der Spezifitaet von .nutzer button und steht danach. */
button.themenschalter {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  width: 3.7rem;
  height: 2rem;
  margin: 0;
  padding: 0 0.45rem;
  border: 1px solid var(--feld-rand);
  border-radius: 2rem;
  background: var(--flaeche-leise);
  color: var(--text-leise);
  box-shadow: none;
  cursor: pointer;
}
button.themenschalter:is(:hover, :focus-visible) { border-color: var(--akzent); }
button.themenschalter svg {
  position: relative;
  z-index: 1;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.67;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.themenschalter .knopf {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #ffb92e;
}
.themenschalter .sonne { color: #3a2400; }
:root[data-theme="dark"] .themenschalter .knopf {
  background: #8d9eff;
  transform: translateX(1.7rem);
}
:root[data-theme="dark"] .themenschalter .sonne { color: var(--text-leise); }
:root[data-theme="dark"] .themenschalter .mond { color: #0b1230; }
/* Auf Seiten vor der Anmeldung steht der Schalter oben rechts im Fenster */
.schalter-ecke { position: fixed; top: 1rem; right: 1rem; z-index: 40; padding: 0; }

/* --- Seitenkopf, Aktionen, Filter --- */
.titelzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
  margin-bottom: 1.1rem;
}
.titelzeile h1 { margin: 0 auto 0 0; }

.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1rem;
}
.titelzeile .aktionen { margin-bottom: 0; }
.aktionen > :is(button, [role="button"]) { width: auto; margin: 0; }

.monat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.monat strong {
  min-width: 9rem;
  font-family: var(--schrift-technik);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.monat [role="button"] { margin: 0; }

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.8rem;
}
.filter > input,
.filter > select,
.filter > button { margin: 0; }
.filter > * { flex: 1 1 9rem; }
.filter > input[type="search"] { flex: 2 1 14rem; }
.filter > button { flex: 0 0 auto; width: auto; }

/* --- Knoepfe: flache Farben, der Zustand zeigt sich im Farbwechsel ---
   :is() nimmt die Spezifitaet seines staerksten Arguments; mit zwei :not()
   liegt die Regel ueber Picos Knopfregeln. */
:is(button, [role="button"], [type="submit"], [type="button"]) {
  border-radius: var(--rundung-klein);
  font-weight: 600;
  letter-spacing: 0.01em;
}

:is(button, [role="button"], [type="submit"], [type="button"]):not(.outline):not(.secondary):not(.themenschalter) {
  border-color: transparent;
  background: var(--akzent);
  color: var(--auf-akzent);
}
:is(button, [role="button"], [type="submit"], [type="button"]):not(.outline):not(.secondary):not(.themenschalter):is(:hover, :focus) {
  border-color: transparent;
  background: var(--akzent-text);
  color: var(--auf-akzent);
}

:is(button, [role="button"], [type="submit"], [type="button"]).outline:not(.secondary) {
  border: 1px solid var(--akzent);
  background: transparent;
  color: var(--akzent-text);
  box-shadow: none;
}
:is(button, [role="button"], [type="submit"], [type="button"]).outline:not(.secondary):is(:hover, :focus) {
  border-color: var(--akzent);
  background: var(--akzent-flaeche);
  color: var(--akzent-text-hover);
}

:is(button, [role="button"], [type="submit"], [type="button"]).secondary:not(.outline) {
  border: 1px solid var(--feld-rand);
  background: var(--flaeche-leise);
  color: var(--text);
  box-shadow: none;
}
:is(button, [role="button"], [type="submit"], [type="button"]).secondary:not(.outline):is(:hover, :focus) {
  border-color: var(--akzent);
  background: var(--hover);
  color: var(--text);
}

:is(button, [role="button"]).outline.secondary {
  border: 1px solid var(--feld-rand);
  background: transparent;
  color: var(--text);
  box-shadow: none;
}
:is(button, [role="button"]).outline.secondary:is(:hover, :focus) {
  border-color: var(--akzent);
  background: var(--hover);
  color: var(--text);
}
:is(button, [role="button"], [type="submit"])[disabled]:not(.outline):not(.secondary),
:is(button, [role="button"], [type="submit"])[disabled]:not(.outline):not(.secondary):is(:hover, :focus),
:is(button, [role="button"], [type="submit"])[aria-disabled="true"]:not(.outline):not(.secondary),
:is(button, [role="button"], [type="submit"])[aria-disabled="true"]:not(.outline):not(.secondary):is(:hover, :focus) {
  background: var(--akzent);
  opacity: 0.42;
  filter: saturate(0.5);
}

/* Anfrage laeuft (htmx setzt htmx-request): der Knopf ist abgeblendet und nicht klickbar */
:is(button, [role="button"], [type="submit"], [type="button"]).htmx-request { pointer-events: none; opacity: 0.6; }

/* --- Tabellen --- */
figure {
  margin: 0 0 1.1rem;
  overflow-x: auto;
}
figure > table { min-width: 34rem; margin: 0; }
table {
  font-size: 0.93rem;
  font-variant-numeric: tabular-nums;
}
th,
td {
  padding: 0.55rem 0.8rem;
  border-bottom-color: var(--linie);
  background-color: transparent;
}
th {
  background-color: var(--flaeche-leise);
  color: var(--text-leise);
  font-family: var(--schrift-technik);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--hover); }
tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--akzent); }
td a { text-decoration: none; }
td a:hover { text-decoration: underline; }

/* Zeilen und Zellen mit Zustand. Die Zellfarben liegen auf td und schlagen
   damit die Hover-Farbe der Zeile. */
tr.leise td { color: var(--text-leise); }
tr.leise a { color: inherit; }
tr.bearbeiten td { background-color: var(--akzent-flaeche); }
tr.bearbeiten td:first-child { box-shadow: inset 2px 0 0 var(--akzent); }

.einzeilig { white-space: nowrap; }
.telefon { font-variant-numeric: tabular-nums; white-space: nowrap; }
.aktion { width: 1%; text-align: right; white-space: nowrap; }

/* Eingabefelder und Knoepfe in Tabellenzeilen: kompakt, ohne Aussenabstand. */
table input:not([type="checkbox"], [type="radio"]),
table select:not([multiple], [size]) {
  margin: 0;
  padding-block: 0.32rem;
  font-size: 0.92rem;
}
table input:not([type="checkbox"], [type="radio"]),
table select:not([multiple], [size]) { height: auto; }
table select:not([multiple], [size]) {
  min-width: 7.5rem;
  padding-inline: 0.65rem 2rem;
  background-position: center right 0.6rem;
  background-size: 0.9rem auto;
}
table :is(button, [role="button"]) {
  width: auto;
  margin: 0;
  padding: 0.22rem 0.7rem;
  font-size: 0.82rem;
}
table form {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}
.aktion :is(button, form) + :is(button, form) { margin-left: 0.35rem; }

/* --- Planraster --- */
.plan { font-size: 0.9rem; }
.plan th,
.plan td { padding: 0.38rem 0.55rem; white-space: nowrap; }
.plan th small { font-family: var(--schrift); letter-spacing: 0.04em; text-transform: none; }
.plan select:not([multiple], [size]) {
  min-width: 9.5rem;
  margin: 0;
  padding: 0.26rem 1.7rem 0.26rem 0.55rem;
  background-position: center right 0.5rem;
  background-size: 0.9rem auto;
  font-size: 0.88rem;
}
.plan tr.wochenende td { background-color: var(--wochenende); }
.plan tr.heute td { background-color: var(--heute); }
.plan tr.heute td:first-child { box-shadow: inset 3px 0 0 var(--akzent); }
.plan tr.wochenende td:first-child { color: var(--text-leise); }
/* Luecken sind rot, aber leise: ein Hauch Flaeche und ein feiner Balken, damit
   ein ganzer Monat ohne Besetzung nicht schreit */
.plan tbody tr td.luecke {
  background-color: color-mix(in srgb, var(--luecke-rand) 7%, transparent);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--luecke-rand) 55%, transparent);
}
.plan td.luecke select { border-color: color-mix(in srgb, var(--luecke-rand) 45%, var(--feld-rand)); }
.plan td.luecke select:is(:hover, :focus) { border-color: var(--luecke-rand); }
/* Ein Fehlertext in der Zelle darf die Spalte nicht aufweiten */
.plan .feldfehler { max-width: 10rem; margin: 0.25rem 0 0; font-size: 0.78rem; line-height: 1.3; }
.plan td.gesperrt {
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--linie) 6px 7px);
  color: var(--text-leise);
  font-size: 0.8rem;
  text-align: center;
}
.plan .vertretung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  max-width: 11rem;
  margin-top: 0.3rem;
  white-space: normal;
}

/* --- Marken (Status, Hinweise): Pille mit Statuspunkt --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.08rem 0.6rem 0.08rem 0.5rem;
  border: 1px solid var(--linie-stark);
  border-radius: 1rem;
  background: var(--flaeche-leise);
  color: var(--text-leise);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.5;
}
.badge::before {
  content: "";
  flex: none;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
}
.badge.ok {
  border-color: var(--gruen-rand);
  background: var(--gruen-flaeche);
  color: var(--gruen-text);
}
.badge.ok::before { background: var(--led-gruen); opacity: 1; }
.badge.warnung {
  border-color: var(--gelb-rand);
  background: var(--gelb-flaeche);
  color: var(--gelb-text);
}
.badge.warnung::before { background: var(--led-gelb); opacity: 1; }
.badge.fehler {
  border-color: var(--rot-rand);
  background: var(--rot-flaeche);
  color: var(--rot-text);
}
.badge.fehler::before { background: var(--led-rot); opacity: 1; }

/* --- Hinweise im Seiteninhalt: hinweis (blau), warnung (gelb), fehler (rot) --- */
.banner {
  margin: 0 0 1.1rem;
  padding: 0.75rem 1rem 0.75rem 1.15rem;
  border: 1px solid var(--blau-rand);
  border-left-width: 4px;
  border-radius: var(--rundung);
  background: color-mix(in srgb, var(--blau-rand) 10%, var(--flaeche-fest));
  color: var(--blau-text);
}
.banner.warnung {
  border-color: var(--gelb-rand);
  background: color-mix(in srgb, var(--gelb-rand) 14%, var(--flaeche-fest));
  color: var(--gelb-text);
}
.banner.fehler {
  border-color: var(--rot-rand);
  background: color-mix(in srgb, var(--rot-rand) 10%, var(--flaeche-fest));
  color: var(--rot-text);
}
.banner > :last-child { margin-bottom: 0; }
.banner ul { margin: 0.35rem 0 0; padding-left: 1.2rem; }
.banner p { margin-bottom: 0.4rem; }
.banner a { color: inherit; font-weight: 600; }
.banner .leise { color: inherit; opacity: 1; font-size: 0.92em; }

/* --- Hinweise nach einer Aenderung (htmx, unten rechts) ---
   Bestaetigungen blenden sich nach einigen Sekunden aus, Fehler bleiben stehen. */
#hinweise {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  max-width: min(28rem, 90vw);
}
.hinweis {
  max-height: 8rem;
  margin-top: 0.55rem;
  padding: 0.7rem 1rem;
  overflow: hidden;
  border: 1px solid var(--akzent);
  border-radius: var(--rundung);
  background: var(--flaeche-fest);
  color: var(--text);
  animation: hinweis-aus 0.4s ease-in 6s forwards;
}
.hinweis.fehler {
  border-color: var(--rot-rand);
  color: var(--rot-text);
  animation: none;
}
/* Fehler bleiben stehen; ein Klick (app.js) raeumt sie weg. Bestaetigungen sind nur Anzeige. */
.hinweis.fehler { cursor: pointer; }
.hinweis:not(.fehler) { pointer-events: none; }
@keyframes hinweis-aus {
  to {
    max-height: 0;
    margin-top: 0;
    padding-block: 0;
    border-width: 0;
    opacity: 0;
  }
}

/* --- Diff in den Upload-Vorschauen --- */
tr.neu td { background-color: var(--neu); }
tr.geaendert td { background-color: var(--geaendert); }
tr.entfernt td { background-color: var(--entfernt); }
tbody tr.neu td:first-child { box-shadow: inset 3px 0 0 var(--gruen-rand); }
tbody tr.geaendert td:first-child { box-shadow: inset 3px 0 0 var(--gelb-rand); }
tbody tr.entfernt td:first-child { box-shadow: inset 3px 0 0 var(--rot-rand); }

/* --- Uebersicht: Kacheln mit Statuslampe --- */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.kachel {
  --lampe: var(--led-gruen);
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.1rem 1.2rem 0.9rem;
  overflow: hidden;
}
.kachel.leer { --lampe: var(--led-rot); }
/* Statuslampe oben rechts: gruen mit Besetzung, rot ohne */
.kachel::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  right: 1.6rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--lampe);
}
.kachel h3 {
  margin: 0 0 0.6rem;
  padding-right: 1.5rem;
  color: var(--text-leise);
  font-family: var(--schrift-technik);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.kachel p { margin-bottom: 0.4rem; }
.kachel strong { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.kachel .telefon {
  display: inline-block;
  margin-top: 0.15rem;
  color: var(--akzent-text);
  font-family: var(--schrift-technik);
  font-size: 1.02rem;
  letter-spacing: 0.04em;
}
.kachel > :has(+ footer) { margin-bottom: 0.7rem; }
.kachel > footer {
  margin: auto -1.2rem -0.9rem;
  padding: 0.5rem 1.2rem;
  border-top: 1px solid var(--linie);
  background: color-mix(in srgb, var(--akzent) 5%, transparent);
  font-family: var(--schrift-technik);
  font-size: 0.78rem;
}

/* --- Blaettern --- */
main nav ul:first-of-type { align-items: center; gap: 0.8rem; margin: 0; }
main nav li { padding: 0; }
main nav a {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--linie-stark);
  border-radius: 2rem;
  text-decoration: none;
}
main nav a:hover { border-color: var(--akzent); background: var(--akzent-flaeche); }

/* --- Kleinkram --- */
.feldfehler {
  color: var(--rot-text);
  font-size: 0.85rem;
  white-space: normal;
}
.aktion .feldfehler { max-width: 16rem; margin: 0.25rem 0 0 auto; }
.leise { color: var(--text-leise); }
details { margin-bottom: 1rem; }
details > summary {
  font-family: var(--schrift-technik);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
details > summary:hover { color: var(--akzent-text-hover); }
details[open] > summary { color: var(--akzent-text); }
hr { border-color: var(--linie); }

/* --- Seiten vor der Anmeldung --- */
.schlicht {
  width: min(26rem, calc(100% - 2rem));
  margin: max(11vh, 3.75rem) auto 2rem;
  padding: 2rem 1.8rem 1.2rem;
}
.schlicht h1 {
  margin: 0 0 1.2rem;
  text-align: center;
}
.schlicht form { margin: 0; }
.schlicht form > button { width: 100%; margin-bottom: 0.6rem; }
.schlicht p { text-align: center; font-size: 0.9rem; }

/* --- Sprunganker und Tastaturfokus liegen nicht unter der festen Kopfzeile --- */
@media (min-width: 76rem) {
  html { scroll-padding-top: 4.5rem; }
}

/* --- Mittlere und schmale Bildschirme ---
   Unter 76rem bekommt die Navigation eine eigene Zeile; die Kopfzeile wird dann
   zu hoch, um mitzulaufen, und bleibt oben stehen. */
@media (max-width: 75.99rem) {
  .kopfzeile { position: static; }
  .haupt { order: 3; flex: 1 0 100%; }
}
.monat { flex-wrap: wrap; }
@media (max-width: 48rem) {
  .haupt ul:first-of-type {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.45rem;
    scrollbar-width: thin;
  }
  .haupt a { white-space: nowrap; }
  .titelzeile h1 { flex: 1 0 100%; }
  .schlicht { margin-top: max(5vh, 3.75rem); }
  main > form[method="post"] { max-width: none; }
  #hinweise { right: 0.6rem; left: 0.6rem; max-width: none; }
  /* Tabellenfelder bleiben bedienbar breit */
  table select:not([multiple], [size]) { min-width: 7.5rem; }
  table input:not([type="checkbox"], [type="radio"]) { min-width: 9rem; }
  /* Im Plan bleibt beim seitlichen Wischen das Datum stehen */
  .plan :is(th, td):first-child { position: sticky; left: 0; z-index: 1; }
  .plan thead th:first-child {
    background-color: var(--flaeche-fest);
    background-image: linear-gradient(var(--flaeche-leise), var(--flaeche-leise));
  }
  .plan tbody tr td:first-child { background-color: var(--flaeche-fest); }
  .plan tbody tr.wochenende td:first-child { background-image: linear-gradient(var(--wochenende), var(--wochenende)); }
  .plan tbody tr.heute td:first-child { background-image: linear-gradient(var(--heute), var(--heute)); }
}
@media (max-width: 22rem) {
  .monat strong { order: -1; flex: 1 1 100%; min-width: 0; text-align: left; }
}
/* Touch: iOS zoomt in Felder unter 16 px, kleine Knoepfe sind zu knapp */
@media (pointer: coarse) {
  table input:not([type="checkbox"], [type="radio"]),
  table select:not([multiple], [size]),
  .plan select:not([multiple], [size]) { font-size: 1rem; }
  table :is(button, [role="button"]) { padding-block: 0.45rem; }
}

/* --- Weniger Bewegung, hoher Kontrast --- */
@media (prefers-reduced-motion: reduce) {
  /* Bestaetigungen sind nach 6 s trotzdem weg: das Ausblenden bleibt, nur ohne Bewegung */
  .hinweis:not(.fehler) { animation: hinweis-aus 0.01ms linear 6s forwards; }
}
@media (prefers-contrast: more) {
  :root:root { --linie: var(--feld-rand); --linie-stark: var(--feld-rand); --text-leise: var(--text); }
}
@media (forced-colors: active) {
  .kachel::before,
  .badge::before { forced-color-adjust: none; }
  article, figure, .schlicht, .banner { border-color: CanvasText; }
  .haupt a[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  /* Schalter: Knopf in Highlight, das Symbol darauf in HighlightText, das andere in ButtonText */
  .themenschalter .knopf,
  :root[data-theme="dark"] .themenschalter .knopf { background: Highlight; }
  .themenschalter .sonne,
  :root[data-theme="dark"] .themenschalter .mond { color: HighlightText; }
  .themenschalter .mond,
  :root[data-theme="dark"] .themenschalter .sonne { color: ButtonText; }
  .plan td.luecke,
  .plan tr.heute td:first-child,
  tr.neu td:first-child,
  tr.geaendert td:first-child,
  tr.entfernt td:first-child { outline: 2px solid Mark; outline-offset: -2px; }
}