/* Personaleinsatzplanung — Gestaltung
   Stiftung Lebensgemeinschaft Wickersdorf

   Angelehnt an das bestehende Projekt „haus“ (LGW Verwaltung), damit beide
   Systeme zusammengehörig wirken: gleiche Schriften (Inter, Montserrat),
   gleiche Grundfarbe, gleiche Karten- und Kopfleistengestaltung.

   Abweichung mit Grund: Das Blau #5990BA aus dem Logo erreicht auf Weiß nur
   3,43:1 und ist damit für Text zu schwach (nötig sind 4,5:1). Es bleibt
   deshalb Flächen und Zierlinien vorbehalten; für Text auf farbigem Grund
   wird die dunklere Abstufung --akzent (5,28:1) verwendet. */

/* Schriften — lokal eingebunden, keine Verbindung zu Fremdservern */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Farbfamilie aus dem Logo der Stiftung */
  --logo-blau:     #5990BA;   /* nur Flächen und Linien, nicht für Text */
  --akzent:        #45708f;   /* Text auf Farbe: 5,28:1 */
  --akzent-dunkel: #35576f;
  --akzent-hell:   #e8f0f5;
  --kopf:          #333333;   /* Kopfleiste wie im Projekt „haus“ */

  --text:          #333333;
  --text-leise:    #5c6870;   /* auf Weiss 5,4:1 — nur fuer helle Flaechen */
  --text-leise-satt:#4b555e;  /* dieselbe Rolle auf getoenter Flaeche (Konzept 10at):
                                 --text-leise faellt dort unter 4.5:1, dieser Ton haelt >= 5:1 */
  --linie:         #e0e0e0;
  --linie-kraeftig:#c9d4da;
  /* Rahmen von Eingabefeldern: 3,1:1 auf Weiss — WCAG 1.4.11
     verlangt fuer Bedienelemente mindestens 3:1. #ccc erreichte 1,6:1. */
  --feldrand:      #8894a0;
  --flaeche:       #ffffff;
  --hintergrund:   #f4f7f6;

  --erfolg:        #155724;
  --erfolg-hell:   #d4edda;
  --fehler:        #721c24;
  --fehler-hell:   #f8d7da;
  --warnung:       #7a4a00;
  --warnung-hell:  #fdf3e2;

  --radius:        8px;
  --radius-klein:  5px;
  --schatten:      0 2px 8px rgba(0, 0, 0, 0.1);
  --fokus:         #a8410a;

  --schrift:       'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --schrift-titel: 'Montserrat', 'Inter', system-ui, sans-serif;

  /* Höhe des feststehenden Navigationsbandes: Zeilenhöhe plus Unterkante.
     Wird an zwei Stellen gebraucht und darf nicht auseinanderlaufen. */
  --logo-hoehe: 58px;
  --nav-zeile:  2.9rem;
  --nav-rand:   3px;
  --nav-hoehe:  calc(var(--nav-zeile) + var(--nav-rand));
}


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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;   /* iOS bläht sonst Text in Querlage auf */
  text-size-adjust: 100%;
}

img { max-width: 100%; }

/* --- Verweise: die Markenfarbe statt des grellen Browser-Blaus (und statt
   des lila »besucht«). Das Unterstreichen bleibt — es macht einen Verweis
   auch ohne Farbe erkennbar (WCAG 1.4.1) —, nur dezenter. In einem
   Arbeitswerkzeug stiftet ein »besucht«-Sonderton mehr Unruhe als Nutzen,
   deshalb bleibt er gleich. Chrome-Verweise (Navigation, Knöpfe, Reiter)
   setzen Farbe und Dekoration selbst und bleiben unberührt. */
a { text-underline-offset: 0.14em; text-decoration-thickness: 1px; }

/* Die Verweisfarben stehen in `:where()` und haben damit die Stärke NULL.
   Das ist der Kern, nicht eine Feinheit:
   Vorher galt `a:visited { color: … }` mit der Stärke (0,1,1) — und das ist
   MEHR als eine einfache Klasse wie `.knopf-haupt` (0,1,0). Ein Verweis, der
   als gefüllter blauer Knopf gestaltet ist, verlor damit sein Weiß und bekam
   blaue Schrift auf blauem Grund. An der Sprungmarke gemessen: 1,45:1.
   Sichtbar wurde es erst NACH dem ersten Klick — deshalb waren es »manche«
   Knöpfe, und deshalb war »vorhin noch alles ordentlich«: Der Besuchtzustand
   kommt mit der Benutzung.
   Eine Ausnahmeliste (`:not(.knopf, .sprungmarke, …)`) hätte dasselbe
   erreicht und wäre bei jeder neuen Fläche wieder unvollständig gewesen —
   `.ampel` und die Hauskarten-Verweise standen schon nicht darin. Mit
   Stärke null gewinnt JEDE Klasse von selbst, heute und künftig.
   Untereinander entscheidet die Reihenfolge: besucht vor überfahren. */
:where(a)          { color: var(--akzent); }
:where(a:visited)  { color: var(--akzent); }
:where(a:hover)    { color: var(--akzent-dunkel); }
/* Ein Verweis, der eine Überschrift IST (Abschnittstitel der Übersicht, der
   Hilfeblätter), trägt kein Dauerunterstrich — das wirkt schwer und ist bei
   einer großen, fetten Überschrift überflüssig. Die Farbe kennzeichnet ihn,
   beim Überfahren kommt der Strich dazu. */
h1 a, h2 a, h3 a { text-decoration: none; }
h1 a:hover, h2 a:hover, h3 a:hover { text-decoration: underline; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--hintergrund);
}

/* --- Fokus: immer deutlich sichtbar --- */
:focus {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}
/* Wo der Browser :focus-visible kennt, nur dort den Ring zeigen.
   Die Abfrage ist zwingend: Enthaelt eine Selektorliste eine unbekannte
   Pseudoklasse, verwirft der Browser die GANZE Regel. Safari vor 15.4 kennt
   :focus-visible nicht — dort blieb nur die Grundregel darueber stehen, und
   jedes angeklickte Auswahlfeld, jeder Knopf und jeder Verweis bekam einen
   3 px starken orangen Ring. Das war die auffaelligste Ursache dafuer, dass
   die Bedienelemente in Safari fehlerhaft aussahen. */
@supports selector(:focus-visible) {
  :focus:not(:focus-visible) { outline: none; }
}
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

/* --- Sprungmarke für Tastaturbedienung --- */
.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--akzent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.sprungmarke:focus {
  left: 0;
}

/* --- Kopfbereich ---------------------------------------------------------
   Zweiteilig statt einer dunklen Leiste:

   1. Markenband auf Weiß. Das Logo der Stiftung ist blau auf transparent und
      damit für hellen Grund gemacht — es wirkt hier deutlich klarer als auf
      Dunkelgrau. Rechts stehen Person, Rolle und die Abmeldung.
   2. Navigationsband in hellem Blaugrau, das beim Blättern oben stehen bleibt.
      Die Navigation ist damit jederzeit erreichbar, ohne nach oben zu scrollen.

   Ergonomisch: Ziele mindestens 44 px hoch, aktiver Punkt doppelt markiert
   (Farbbalken und Fettung, nicht Farbe allein), auf schmalen Geräten waagerecht
   blätterbar statt gestapelt. */

.kopf { background: var(--flaeche); }

.markenband { border-bottom: 1px solid var(--linie); }
.markenband-innen {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.marke { margin: 0; }
.marke a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius-klein);
  min-width: 0;              /* sonst schrumpft der Text nicht und steht über */
}
.marke a:hover .marke-titel { color: var(--akzent); }
.kopf-logo { height: var(--logo-hoehe); width: auto; display: block; flex: none; }
.marke-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.marke-titel {
  font-family: var(--schrift-titel);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  word-break: break-word;      /* Rückfall für ältere Safari-Fassungen */
  overflow-wrap: anywhere;
}
.marke-organisation { font-size: 0.78rem; color: var(--text-leise); }

.benutzerleiste {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.benutzerkarte {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.benutzername { font-weight: 600; }
.rolle {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--logo-blau);
  background: var(--akzent-hell);
  color: var(--akzent-dunkel);
  border-radius: 999px;
  font-size: 0.78rem;
  white-space: nowrap;
}
.abmelden { margin: 0; }

/* Navigationsband */
.hauptnavigation {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--akzent-hell);
  border-bottom: var(--nav-rand) solid var(--logo-blau);
}
/* ===== Das Klappmenü schmaler Bildschirme (Konzept 10cf) =====
   Kundenwunsch 25.07.2026: Notebook wie bisher, Smartphone mit Knopf.

   GEMESSEN, warum überhaupt: Die Leiste ist bei der Administration 1164 px
   breit. Sie LÄUFT NICHT ÜBER — `.navliste` blättert seit jeher seitlich in
   sich selbst, die Seite bleibt heil. Aber auf einem 375 px breiten Telefon
   sind davon nur 375 px zu sehen: drei von zehn Punkten, der Rest hinter
   einer Wischbewegung, die niemand erwartet. Der Umbau behebt also eine
   BEDIENBARKEIT, keinen Layoutfehler.

   Kein JavaScript (Regel 12): <details>/<summary> klappt der Browser selbst
   auf und zu, samt Tastatur und Zustandsansage. */
.navknopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--nav-zeile);
  padding: 0 1.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--akzent-dunkel);
  cursor: pointer;
  list-style: none;                 /* eigenes Zeichen statt Browser-Dreieck */
}
.navknopf::-webkit-details-marker { display: none; }   /* Safari */
/* Drei Balken links, ein Pfeil rechts: Das Zeichen sagt »Menü«, der Pfeil
   sagt »klappt auf«. Beides ist Beiwerk — das WORT »Menü« steht daneben,
   damit die Bedeutung nicht allein an einem Bildzeichen hängt. */
.navknopf::before { content: '\2630'; font-size: 1.15rem; line-height: 1; }
.navknopf::after  { content: '\25BE'; margin-left: auto; }
.navklapp[open] > .navknopf::after { content: '\25B4'; }
.navknopf:hover { background: rgba(255, 255, 255, 0.6); }

.navliste {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  list-style: none;
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.navliste a {
  display: flex;
  align-items: center;
  min-height: var(--nav-zeile);
  padding: 0 1rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 4px solid transparent;
  font-size: 0.95rem;
}
.navliste a:hover {
  background: rgba(255, 255, 255, 0.6);
  border-bottom-color: var(--logo-blau);
  color: var(--akzent-dunkel);
}
/* Aktiver Punkt: Balken UND Fettung — nicht allein über die Farbe erkennbar */
.navliste a[aria-current="page"] {
  background: var(--flaeche);
  border-bottom-color: var(--akzent);
  color: var(--akzent-dunkel);
  font-weight: 700;
}

/* --- Untermenü-Gruppen (Konzept 5a.10) ---
   <details>/<summary> in der Leiste; die aufgeklappte Liste ist ein
   vollbreites Band DIREKT UNTER dem Navigationsband.

   Warum absolut und mit Bezug auf .hauptnavigation: Die Punktliste
   (.navliste) blättert auf schmalen Bildschirmen seitlich (overflow-x).
   Ein aufklappendes Menü, dessen Bezugselement innerhalb dieses
   Blätterbereichs läge, würde von ihm abgeschnitten — dieselbe Falle wie
   in Konzept 10h. Ein absolut gestelltes Element entkommt dem Überlauf
   aber, solange kein positioniertes Element dazwischen liegt: Bezugspunkt
   ist die Leiste selbst (sticky = positioniert). Deshalb dürfen .navliste
   und .navgruppe hier NIE position: relative bekommen. */
.navgruppenkopf {
  display: flex;
  align-items: center;
  min-height: var(--nav-zeile);
  padding: 0 1rem;
  color: var(--text);
  white-space: nowrap;
  border-bottom: 4px solid transparent;
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;              /* Standard-Dreieck aus, eigener Pfeil unten */
}
.navgruppenkopf::-webkit-details-marker { display: none; }  /* Safari */
.navgruppenkopf::after {
  content: '▾';
  margin-left: 0.4rem;
  font-size: 0.8em;
}
.navgruppe details[open] > .navgruppenkopf::after { content: '▴'; }
.navgruppenkopf:hover {
  background: rgba(255, 255, 255, 0.6);
  border-bottom-color: var(--logo-blau);
  color: var(--akzent-dunkel);
}
/* Liegt die aktuelle Seite in der Gruppe, trägt die Gruppe die Doppelmarke —
   Balken UND Fettung, wie beim aktiven Einzelpunkt (Konzept 5a.8). */
.navgruppe-aktiv {
  background: var(--flaeche);
  border-bottom-color: var(--akzent);
  color: var(--akzent-dunkel);
  font-weight: 700;
}

.untermenue {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem 1.25rem;
  background: var(--flaeche);
  border-bottom: var(--nav-rand) solid var(--logo-blau);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}
/* Der Gruppenname steht auch im Band selbst: Ohne JavaScript können beide
   Gruppen zugleich offen stehen und übereinanderliegen — der Name macht
   sofort kenntlich, welches Band gerade zu sehen ist. */
.untermenue::before {
  content: attr(aria-label);
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem 0 0;
  color: var(--text-leise);
  font-size: 0.85rem;
}
.untermenue a {
  display: flex;
  align-items: center;
  min-height: 44px;              /* Klickziele mindestens 44 px (5a.8) */
  padding: 0 1rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 4px solid transparent;
  font-size: 0.95rem;
}
.untermenue a:hover {
  background: var(--akzent-hell);
  border-bottom-color: var(--logo-blau);
  color: var(--akzent-dunkel);
}
.untermenue a[aria-current="page"] {
  background: var(--akzent-hell);
  border-bottom-color: var(--akzent);
  color: var(--akzent-dunkel);
  font-weight: 700;
}

/* Auf dem Telefon klappt das Band als senkrechte Liste auf — aufklappen
   statt seitlich blättern (Konzept 5a.10). */
@media (max-width: 700px) {
  .untermenue { flex-direction: column; gap: 0; padding: 0.25rem 1rem 0.5rem; }
  .untermenue::before { min-height: 34px; }
  .untermenue a { white-space: normal; }
}

/* Die beiden folgenden Blöcke stehen BEWUSST hier, hinter allen
   Navigationsregeln: Sie überschreiben `.navliste a` und
   `.navgruppenkopf` bei GLEICHER Spezifität — dann entscheidet die
   Reihenfolge. Weiter oben eingesetzt blieben sie wirkungslos (genau
   das ist mir beim ersten Anlauf passiert: der Balken blieb unten
   statt links, das Polster blieb bei 16 px). */
/* --- Bis 65 rem: aufgeklappt STEHT die Liste untereinander --------------
   Waagerechtes Blättern in einem aufgeklappten Menü wäre die alte Not in
   neuer Verpackung. Deshalb hier: eine Spalte, volle Breite, kein Blättern. */
@media (max-width: 64.999rem) {
  /* DAS EIGENTLICHE AUF/ZU: Der Schalter ist ein NACHBAR der Liste, nicht
     ihr Elternteil — deshalb hängt nichts an der Frage, wie ein Browser
     den Inhalt eines geschlossenen <details> verbirgt. Genau daran ist
     der erste Anlauf gescheitert (Chrome: ::details-content mit
     content-visibility: hidden, von display nicht aufzuheben). */
  .navklapp:not([open]) + .navliste { display: none; }
  .navklapp + .navliste {
    flex-direction: column;
    gap: 0;
    overflow-x: visible;
    padding: 0 0 0.4rem;
    max-height: 70vh;               /* sehr lange Menüs bleiben erreichbar */
    overflow-y: auto;
  }
  .navliste > li { width: 100%; }
  .navliste a,
  .navgruppenkopf {
    padding: 0 1.25rem;
    border-bottom: none;
    border-left: 4px solid transparent;   /* Marke wandert an die Seite … */
  }
  .navliste a[aria-current="page"] { border-left-color: var(--akzent); }
  .navgruppe-aktiv { border-left-color: var(--logo-blau); }
  /* … denn ein Balken UNTER einem vollbreiten Punkt sähe aus wie ein
     Trennstrich zum nächsten (WCAG 1.4.1: nicht allein über Farbe). */
  .navgruppenkopf::after { margin-left: auto; }
  /* Die Untermenü-Bänder stellen sich auf breiten Schirmen absolut unter die
     Leiste. In der Spalte gehören sie EINGERÜCKT an ihre Stelle im Fluss. */
  .navliste .untermenue {
    position: static;
    box-shadow: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.5);
  }
  .navliste .untermenue a { padding-left: 2.75rem; }
}

/* --- Ab 65 rem: genau wie bisher ----------------------------------------
   WARUM 65 rem (1040 px) und nicht enger: Kundenentscheid 25.07.2026 —
   »Tablets im Hochformat können ruhig wie Smartphones funktionieren.« Das
   breiteste verbreitete Tablet im Hochformat misst 1024 px; die Grenze muss
   also DARÜBER liegen, sonst bekäme genau dieses Gerät wieder die Leiste.
   Nach oben ist 1040 px zugleich niedrig genug, dass kein wirkliches
   Notebook (ab 1152 px) den Knopf sieht — dort bleibt alles wie bisher.
   Hier verschwindet NUR der Schalter. Die Liste braucht nichts: Sie liegt
   NEBEN dem <details>, nicht darin, und wird deshalb überhaupt nie
   versteckt. Der erste Anlauf legte sie hinein und musste sie mit einer
   display-Regel zurückholen — das ging schief, weil Chrome den Inhalt eines
   geschlossenen <details> über `::details-content { content-visibility:
   hidden }` verbirgt, was display nicht aufhebt. Auf dem Notebook war die
   Leiste damit unsichtbar (Kundenbefund 25.07.2026). */
@media (min-width: 65rem) {
  .navklapp { display: none; }
}

/* --- Inhaltsbereich --- */
.inhalt {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 3rem;
}

h1 { font-size: 1.5rem; margin: 0 0 0.5rem; color: var(--text); font-family: var(--schrift-titel); font-weight: 600; }
h2 { font-size: 1.2rem; margin: 1.75rem 0 0.5rem; color: var(--text); font-family: var(--schrift-titel); font-weight: 600; }
.hinweis { color: var(--text-leise); margin-top: 0; }

section { margin-bottom: 2rem; }

/* --- Meldungen --- */
.meldungen { margin-bottom: 1.25rem; }
.meldung {
  margin: 0 0 0.5rem;
  padding: 0.7rem 1rem;
  border-left: 5px solid;
  border-radius: var(--radius);
}
.meldung-erfolg  { background: var(--erfolg-hell);  border-color: var(--erfolg);  color: var(--erfolg); }
.meldung-fehler  { background: var(--fehler-hell);  border-color: var(--fehler);  color: var(--fehler); }
.meldung-warnung { background: var(--warnung-hell); border-color: var(--warnung); color: var(--warnung); }

.fehlerkasten {
  background: var(--fehler-hell);
  border: 1px solid var(--fehler);
  border-left: 5px solid var(--fehler);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.fehlerkasten h1, .fehlerkasten h2 { margin-top: 0; color: var(--fehler); font-size: 1.1rem; }
.fehlerkasten p:last-child { margin-bottom: 0; }

/* --- Anmeldung --- */
.anmeldebereich {
  max-width: 26rem;
  margin: 2.5rem auto;
  background: var(--flaeche);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 2rem;
}

/* --- Formulare --- */
.feld { margin-bottom: 1.1rem; }
.feld label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.feld input {
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-klein);
}
.feld input:hover { border-color: var(--text-leise); }
.feld input[aria-invalid="true"] { border-color: var(--fehler); }

.knopf {
  display: inline-block;
  font: inherit;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor: pointer;
}
.knopf-haupt {
  background: var(--akzent);
  color: #fff;
  font-weight: 600;
  width: 100%;
}
.knopf-haupt:hover { background: var(--akzent-dunkel); }
.knopf-rand {
  background: var(--flaeche);
  color: var(--akzent-dunkel);
  border-color: var(--linie-kraeftig);
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.knopf-rand:hover { background: var(--akzent-hell); border-color: var(--logo-blau); }

.kleingedruckt {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  color: var(--text-leise);
}

/* --- Kacheln --- */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.25rem;
}
.kachel {
  background: var(--flaeche);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.5rem;
  margin: 0;
}
.kachel h2 {
  margin: 0 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--hintergrund);
  font-size: 1.1rem;
}

/* --- Datenlisten --- */
.daten {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: 0.35rem 1rem;
  margin: 0.75rem 0 0;
}
.daten dt { font-weight: 600; color: var(--text-leise); }
.daten dd { margin: 0; }

/* --- Aufzählung mit Status --- */
.liste { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.liste li { padding: 0.2rem 0 0.2rem 1.75rem; position: relative; }
/* Status zusätzlich über Zeichen, nicht nur über Farbe */
.liste .erledigt::before {
  content: "\2713";
  position: absolute; left: 0;
  color: var(--erfolg); font-weight: 700;
}
.liste .offen::before {
  content: "\25CB";
  position: absolute; left: 0;
  color: var(--text-leise);
}
.liste .offen { color: var(--text-leise); }

/* --- Tabellen --- */
.tabelle {
  width: 100%;
  border-collapse: collapse;
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  overflow: hidden;
}
/* Beschriftung steht über der Tabelle und bleibt beim Blättern stehen. */
.tabellenbeschriftung {
  text-align: left;
  padding: 0 0 0.5rem;
  color: var(--text-leise);
  font-size: 0.9rem;
  caption-side: top;
}

/* Breite Tabellen bekommen einen eigenen Blätterbereich, der auch
   mit der Tastatur erreichbar ist (tabindex="0" in der Vorlage). */
.tabellenbereich {
  overflow-x: auto;
  max-width: 100%;
}
.tabellenbereich:focus {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}
/* Wo der Browser :focus-visible kennt, nur dort den Ring zeigen.
   Die Abfrage ist zwingend: Enthaelt eine Selektorliste eine unbekannte
   Pseudoklasse, verwirft der Browser die GANZE Regel. Safari vor 15.4 kennt
   :focus-visible nicht — dort blieb nur die Grundregel darueber stehen, und
   jedes angeklickte Auswahlfeld, jeder Knopf und jeder Verweis bekam einen
   3 px starken orangen Ring. Das war die auffaelligste Ursache dafuer, dass
   die Bedienelemente in Safari fehlerhaft aussahen. */
@supports selector(:focus-visible) {
  :focus:not(:focus-visible) { outline: none; }
}
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}
.tabelle th, .tabelle td {
  text-align: left;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--linie);
  font-size: 0.92rem;
}
.tabelle thead th {
  background: var(--akzent);
  color: #fff;
  font-weight: 600;
}
.tabelle tbody tr:nth-child(even) { background: var(--akzent-hell); }
/* Auch th: Zeilenköpfe (scope="row") sind Teil der letzten Zeile — sonst
   behielte genau die erste Spalte ihren Strich (Konzept 10f, D-Liste). */
.tabelle tbody tr:last-child td,
.tabelle tbody tr:last-child th { border-bottom: none; }
/* Zeilenköpfe halbfett wie die Spaltenköpfe und die Namensspalte des
   Dienstplans (600) — nicht der lautere Browser-Vorgabewert. */
.tabelle tbody th[scope="row"] { font-weight: 600; }

/* --- Fußbereich --- */
/* Die Fußzeile antwortet auf das Markenband (10bl): dieselbe Fläche, dieselbe
   Linie — nur oben statt unten —, dasselbe Innenmaß von 78 rem und derselbe
   Innenabstand. Oben trägt eine kräftige Linie in Logo-Blau die Navigation;
   unten schließt eine ebenso kräftige Linie die Seite ab, damit der Satz
   zwischen zwei gleichwertigen Klammern steht statt auszulaufen. */
.fuss {
  border-top: var(--nav-rand) solid var(--logo-blau);
  background: var(--flaeche);
  color: var(--text-leise);
  font-size: 0.85rem;
  margin-top: 2.5rem;
}
.fuss-innen {
  max-width: 78rem;
  margin: 0 auto;
  padding: 1.4rem 1.25rem 1.6rem;
  text-align: center;
}
.fuss-zeile {
  margin: 0;
  /* Die Angaben stehen in einer Reihe und brechen bei Bedarf sauber um —
     ein Trennstrich darf dabei nie allein eine Zeile beginnen. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 0.55rem;
  line-height: 1.7;
}
/* Der Name der Stiftung trägt die Titelschrift des Markenbands — er ist
   dieselbe Marke, nur am anderen Ende der Seite. */
.fuss-name {
  font-family: var(--schrift-titel);
  font-weight: 600;
  color: var(--text);
}
.fuss-strich { color: var(--text-leise); }
.fuss-marke {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--linie);
  font-size: 0.8rem;
}
/* Telefon und E-Mail sind Verweise, sollen die Zeile aber nicht aufreißen:
   Farbe der Zeile, Unterstrich bleibt (WCAG 1.4.1 — nie nur die Farbe). */
.fuss a { color: inherit; }
.fuss a:hover { color: var(--akzent); }

/* Auf schmalen Schirmen umbricht die Reihe, und dabei blieb ein Trennstrich
   am Zeilenende allein zurück (»… Wickersdorf |«). Ein Strich trennt aber
   nur dann etwas, wenn links und rechts davon etwas steht: Untereinander
   übernimmt der Zeilenumbruch seine Aufgabe, und er verschwindet. */
@media (max-width: 40rem) {
  .fuss-zeile { flex-direction: column; gap: 0.15rem; line-height: 1.5; }
  .fuss-strich { display: none; }
  .fuss-innen { padding: 1.2rem 1.25rem 1.4rem; }
}

.spur pre {
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem;
  overflow-x: auto;
  font-size: 0.82rem;
}

/* --- Kleine Bildschirme --- */
@media (max-width: 40rem) {
  .markenband-innen { flex-direction: column; align-items: flex-start; }
  .benutzerleiste { margin-left: 0; flex-wrap: wrap; width: 100%; }
  .marke { width: 100%; }
  .marke a { gap: 0.6rem; }
  .marke-titel { font-size: 1rem; }
  .daten { grid-template-columns: 1fr; gap: 0 0; }
  .daten dd { margin-bottom: 0.5rem; }
  .tabelle { min-width: 34rem; }
}

/* --- Ausdruck --- */
@media print {
  .kopf, .fuss, .sprungmarke, .abmelden, .hauptnavigation { display: none; }
  body { background: #fff; }
  .inhalt { max-width: none; padding: 0; }
  .tabelle thead th { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .tabelle tbody tr:nth-child(even) { background: #fff; }
  .kachel { border: 1px solid #000; break-inside: avoid; }
}

/* --- Bewegungsreduzierung respektieren --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   Dienstplan — Gestaltung in Anlehnung an Vivendi PEP
   (Konzept Kapitel 5a: Anordnung und Begriffe übernommen,
   Erscheinungsbild bewusst eigenständig)
   ========================================================= */

/* Dienstfarben. Jede Kachel trägt zusätzlich ihr Kürzel und einen
   eigenen Rahmen — Farbe allein trägt nie die Information. */
:root {
  --d-fruh:    #fdf0c8;  --d-fruh-rand:  #a8791b;
  --d-tag:     #d8ecd4;  --d-tag-rand:   #2f6b33;
  --d-spaet:   #f6dcc6;  --d-spaet-rand: #a3541b;
  --d-nacht:   #d9dcf0;  --d-nacht-rand: #3b3f8f;
  --d-org:     #dfe6ea;  --d-org-rand:   #4a606d;
  --d-abw:     #eceef0;  --d-abw-rand:   #6b7780;
  --wochenende: #eef2f5;

  /* Kürzel-Text auf den kleinen Kalender-Chips (Konzept 10at). Die `-rand`-Töne
     oben sind als 1px-Rahmen kalibriert (>= 3:1, WCAG 1.4.11) — als winzige,
     fette Schrift auf heller Fläche reichen sie NICHT für 4.5:1. Darum tragen
     die Chips eine dunklere Variante ihrer eigenen Farbe. Im Dienstplanraster
     bleibt das Kürzel weiter --text (schwarz); dort ist der Ton nur der Rahmen. */
  --d-fruh-text: #7d5a08;  /* Bernstein, dunkel: >= 5:1 auf --d-fruh */
  --d-abw-text:  #545d66;  /* Grau, dunkel:      >= 5:1 auf --d-abw  */

  /* Urlaub ist grün (Konzept 10am). Ein Grün trägt die ganze Seite: erfasst
     und genehmigt als satte Fläche, beantragt als Schraffur derselben Familie
     — der Zustand steht nie allein in der Farbe (WCAG 1.4.1). Das frühere
     Grau (--d-abw) und das Bernstein (--warnung) sind hier verschwunden. */
  --urlaub:         #155724;  /* Text und Rand auf heller Fläche, > 4.5:1 */
  --urlaub-rand:    #2f6b33;
  --urlaub-flaeche: #cfe8d2;  /* satte, ruhige Urlaubsfläche (genehmigt) */
  --urlaub-hell:    #e6f3e8;  /* helle Fläche unter der Schraffur (beantragt) */
}

.planungskopf { margin-bottom: 1rem; }
.planungskopf-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; }
.planungskopf h1 { margin-bottom: 0.25rem; }
.entwurfsmarke {
  margin: 0;
  padding: 0.15rem 0.6rem;
  background: var(--warnung-hell);
  color: var(--warnung);
  border: 1px solid var(--warnung);
  border-radius: 999px;
  font-size: 0.8rem;
}

/* Schlanke Aktionsleiste statt Menüband — seit dem Feinschliff vom
   22.07.2026 bewusst kompakt: enge Abstände, gleiche Knopfreihe in Monats-
   und Wochensicht. */
.aktionsleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.55rem 0.75rem;
  margin-top: 0.75rem;
}
.steuerfeld { display: flex; flex-direction: column; gap: 0.2rem; }
.steuerfeld label { font-size: 0.78rem; font-weight: 600; color: var(--text-leise); }
/* Eingabefelder in einer Aktionsleiste tragen dasselbe Maß wie die
   Auswahlfelder daneben — bis 10bo galt das nur für `select`, und das
   Datumsfeld der Tagesübersicht fiel dadurch aus der Reihe. */
/* Das KOMPAKTE Feldmaß des Hauses — für Felder, die neben einem
   `.knopf-klein` in einer Bedienzeile stehen (Steuerleisten, seit 10cc auch
   der Ist-Stichtag der Gebäudekarte).
   MERKE: Die normale Feldgestaltung hängt an `.feld input`. Ein Eingabefeld,
   das NICHT in einem `.feld` steckt, bekommt sie nicht und fällt auf die
   Browser-Vorgabe zurück — beim Stichtag waren das 2 px inset, 13,3 px
   Schrift und 22 px Höhe neben einem 35 px hohen Knopf. Solche Felder hier
   anhängen, statt die Werte nebenan noch einmal aufzuschreiben. */
.steuerfeld select,
.steuerfeld input[type="date"],
.steuerfeld input[type="time"],
.steuerfeld input[type="text"],
.steuerfeld input[type="number"],
.feld-stichtag {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-klein);
  background-color: #fff;
  color: var(--text);
}
.feld-stichtag:hover { border-color: var(--text-leise); }

/* Planungsstatus als Stufenfolge */
.statusfolge { margin: 0 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.stufe {
  font-size: 0.8rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  color: var(--text-leise);
  background: #fff;
}
.stufe-aktiv {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
  font-weight: 600;
}
.stufe + .stufe::before {
  content: "\2192";
  margin-right: 0.45rem;
  color: var(--linie);
}
/* Zustandsmarke »Abgerechnet« neben dem Dreier-Planungsweg (Konzept 10ag):
   Der abgerechnete Monat ist kein Wegpunkt, sondern ein gesperrter
   Zustand — ruhige Fläche, voller Textkontrast, bewusst kein Pfeil davor. */
.merkmal-abgerechnet {
  background-color: var(--flaeche);
  border-color: var(--text-leise);
  color: var(--text);
  font-weight: 700;
}

/* Raster und Palette nebeneinander */
.planbereich {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: 1rem;
  align-items: start;
}
/* Das Raster blättert in sich selbst — waagerecht über die Tage, senkrecht
   über die Mitarbeitenden. Nur so bleiben Kopfzeile und Namensspalte stehen:
   Ein feststehendes Element richtet sich immer am nächsten blätternden
   Bereich aus, nicht am Fenster. Bei 70 Mitarbeitenden ist ein eigener
   Datenbereich ohnehin angenehmer als eine endlos lange Seite. */
.planraster {
  overflow: auto;
  max-height: calc(100vh - 15rem);
  min-height: 14rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--flaeche);
  overscroll-behavior: contain;
}
.planraster:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

.dienstplan { border-collapse: collapse; font-size: 0.82rem; }
.dienstplan .tabellenbeschriftung { padding: 0.6rem 0.8rem; }

.dienstplan th, .dienstplan td {
  border: 1px solid var(--linie);
  padding: 0;
  text-align: center;
  vertical-align: middle;
}
.dienstplan thead th {
  background: var(--akzent);
  color: #fff;
  font-weight: 600;
  padding: 0.25rem 0.2rem;
  position: -webkit-sticky;
  position: sticky;
  /* Bezugspunkt ist der Blätterbereich des Rasters, nicht das Fenster. */
  top: 0;
  z-index: 3;
}
.dienstplan .spalte-tag { width: 1.9rem; }
.tagzahl { display: block; font-size: 0.8rem; }
.tagname { display: block; font-size: 0.66rem; font-weight: 400; }
.dienstplan thead .wochenende { background: var(--akzent-dunkel); }

/* Erste Spalten bleiben beim Blättern stehen */
.dienstplan .spalte-person {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--flaeche);
  text-align: left;
  min-width: 12rem;
  padding: 0.3rem 0.55rem;
  font-weight: 600;
}
.dienstplan thead .spalte-person { background: var(--akzent); z-index: 4; }
/* Wie im Monatsraster: Die Kurzform kürzt den Vornamen, ein sehr langer
   NACHname endet notfalls mit »…« — die Spalte behält so ihre Breite, der
   volle Name steht im Maus-Hinweis und für Vorleseprogramme (Konzept 10bb). */
.person-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-zusatz { display: block; font-size: 0.72rem; font-weight: 400; color: var(--text-leise); }
.dienstplan .spalte-std { width: 3.6rem; font-variant-numeric: tabular-nums; }
.dienstplan tbody .spalte-std { color: var(--text-leise); }

/* Summen am rechten Ende des Rasters — wie im gewohnten Programm.
   Ein Festhalten am rechten Rand wurde erprobt und wieder verworfen:
   Tabellenspalten lassen sich nicht zuverlässig auf eine feste Breite
   zwingen, dadurch entstehen Lücken, durch die Inhalt durchscheint. */
.dienstplan .spalte-summe {
  width: 3.9rem;
  font-variant-numeric: tabular-nums;
  padding: 0 0.35rem;
  background: #fbfcfd;
  white-space: nowrap;
}
.dienstplan .spalte-summe:first-of-type { border-left: 2px solid var(--akzent); }
/* Ohne diese Zeile erben die Kopfzellen die helle Fläche der Summenspalten,
   behalten aber die weiße Schrift — und werden unlesbar. */
.dienstplan thead .spalte-summe { background: var(--akzent); color: #fff; }
.dienstplan .spalte-summe.minus { color: var(--fehler); }
.dienstplan .spalte-summe.plus  { color: var(--erfolg); }

.dienstplan tbody .zelle { height: 1.9rem; position: relative; }
.dienstplan tbody .wochenende { background: var(--wochenende); }

/* Wochensicht (5a.10): sieben breite Tagesspalten statt bis zu 31 schmalen.
   Die Monatsgrenze innerhalb der Woche trägt links einen kräftigen Strich —
   dort wechselt der Monatsplan, und mit ihm können Status und Sperren
   wechseln. Der Spaltenkopf nennt zusätzlich den Monat. */
.dienstplan-woche .spalte-tag { width: 5.5rem; }
.dienstplan-woche .zelleneingabe { width: 90%; }
.dienstplan .monatsgrenze { border-left: 3px double var(--akzent-dunkel); }
.monatsmarke {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Dienstkachel */
.dienst {
  display: inline-block;
  min-width: 1.55rem;
  padding: 0.08rem 0.22rem;
  border: 1px solid;
  border-radius: 3px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.dienst-fruh  { background: var(--d-fruh);  border-color: var(--d-fruh-rand); }
.dienst-tag   { background: var(--d-tag);   border-color: var(--d-tag-rand); }
.dienst-spaet { background: var(--d-spaet); border-color: var(--d-spaet-rand); }
.dienst-nacht { background: var(--d-nacht); border-color: var(--d-nacht-rand); }
.dienst-org   { background: var(--d-org);   border-color: var(--d-org-rand); border-style: dashed; }
.dienst-abw   { background: var(--d-abw);   border-color: var(--d-abw-rand); border-style: dotted; font-style: italic; }

/* Regelverstoß: Farbe UND Zeichen UND Rahmen */
.dienstplan .verstoss { outline: 2px solid var(--fehler); outline-offset: -2px; }
.verstossmarke {
  position: absolute;
  top: -1px; right: 1px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: var(--fehler);
  border-radius: 0 0 0 3px;
  padding: 0 0.2rem;
  line-height: 1.2;
}
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);          /* Rückfall für ältere Browser */
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Dienstepalette */
.dienstepalette {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.9rem;
}
.dienstepalette h2 { margin: 0; font-size: 1rem; }
.palettenkopf { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.6rem; }
/* Die Überschrift bringt eigene Ränder mit — in der zentrierten Flex-Zeile
   verschieben sie den Text gegen den ?-Hilfeknopf (der Knopf wirkt dann
   »hochgerutscht«). Der Kopf trägt den Abstand selbst, die Überschrift keinen. */
.palettenkopf > h2,
.palettenkopf > h3 { margin: 0; }
/* :not(.hilfeknopf): Der ?-Hilfeknopf im Palettenkopf ist AUCH ein
   details-Element — ohne die Ausnahme trüge er den Gruppen-Trennstrich
   als graue Linie über dem Kreis und das Gruppen-padding im Kreis
   (Kundenbefund 22.07.2026, Konzept 10ad). */
.dienstepalette details:not(.hilfeknopf) { border-top: 1px solid var(--linie); }
.dienstepalette details:not(.hilfeknopf) > summary {
  cursor: pointer;
  padding: 0.45rem 0;
  font-weight: 600;
  font-size: 0.86rem;
}
.dienstepalette summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.dienstliste { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.dienstliste li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.16rem 0; }
.dienst-text { font-size: 0.8rem; }
.dienst-zeit { display: block; font-size: 0.72rem; color: var(--text-leise); }

/* Palette wahlweise ALS BAND ÜBER dem Raster (Kundenwunsch 22.07.2026):
   Auf schmäleren Bildschirmen nimmt die rechte Spalte den Tagen Platz weg —
   »Dienste: oben« gibt dem Raster die volle Breite. Die Gruppen fließen
   dann nebeneinander; umgestellt wird nur das Layout, das Markup ist in
   beiden Lagen dasselbe (gleiche Tastatur- und Vorlesereihenfolge).

   Bewusst FLACH (zweite Kundendurchsicht): kleines »Dienste«-Wort am
   Rand statt eigener Überschriftzeile, die Uhrzeit hinter statt unter
   der Bezeichnung, kleinere Schrift, engere Gruppen — das Band soll
   Breite geben und darf dafür selbst kaum Höhe nehmen. */
.palette-oben { grid-template-columns: minmax(0, 1fr); }
.palette-oben .dienstepalette {
  order: -1;                    /* visuell über dem Raster */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 1.75rem;
  padding: 0.3rem 0.8rem 0.35rem;
}
.palette-oben .palettenkopf {
  margin: 0.4rem 0.5rem 0 0;
}
.palette-oben .dienstepalette h2 {
  font-size: 0.78rem;
  color: var(--text-leise);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.palette-oben .dienstepalette details:not(.hilfeknopf) {
  border-top: none;
  flex: 0 1 auto;
  min-width: 0;
}
.palette-oben .dienstepalette details:not(.hilfeknopf) > summary { padding: 0.25rem 0; font-size: 0.82rem; }
.palette-oben .dienstliste { margin-bottom: 0.2rem; }
.palette-oben .dienstliste li { padding: 0.07rem 0; gap: 0.45rem; }
.palette-oben .dienst-text { font-size: 0.76rem; }
/* Die Uhrzeit steht in KEINER Palettenlage mehr in der Zeile — sie machte
   die Liste unruhig (dritte Kundendurchsicht fürs Band, sechste für die
   rechte Spalte). Sie bleibt im Maus-Hinweis des Listenpunkts (title) und
   hier als nur versteckter Text, damit Vorleseprogramme sie weiterhin
   ansagen: display:none nähme sie ihnen weg. */
.dienstepalette .dienst-zeit {
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px; height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* --- Nur noch die Kürzel (Konzept 10az) ---
   In der Praxis führt ein Haus bis zu 30 Dienste. Als Liste mit Bezeichnung
   war die Palette damit länger als der Plan daneben. Jetzt trägt sie
   ausschließlich die Kacheln — sie fließen als Raster und dürfen dafür
   größer sein.

   Die Bezeichnung ist NICHT weg: Sie steht weiter im Maus-Hinweis des
   Listenpunkts (title, Kundenwunsch: soll so bleiben) und bleibt hier als
   versteckter Text stehen, damit Vorleseprogramme sie ansagen — display:none
   nähme sie ihnen weg (dasselbe Muster wie die Uhrzeit darüber). */
.dienstepalette .dienst-text {
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px; height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
.dienstepalette .dienstliste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.dienstepalette .dienstliste li { display: block; padding: 0; }
/* Größer als im Raster: Die Kachel ist hier Bedienelement (ziehen, stempeln),
   nicht bloß Anzeige — das Kürzel bleibt dunkel auf der Dienstfläche (10at). */
.dienstepalette .dienst {
  min-width: 2.3rem;
  padding: 0.28rem 0.45rem;
  font-size: 0.92rem;
  line-height: 1.25;
  text-align: center;
}

/* Ziehen sichtbar machen: Die Kachel zeigt die Greifhand — wer sie
   anfasst, sieht die geschlossene. Der Stempelmodus (plan.js) markiert
   die aktive Kachel mit Ring und schaltet die Rasterzellen auf den
   Kopier-Zeiger. */
.dienstepalette .dienst[draggable] { cursor: grab; }
.dienstepalette .dienst[draggable]:active { cursor: grabbing; }
.dienstepalette .dienst.stempel-aktiv {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}
.stempelmodus .zelleneingabe { cursor: copy; }
/* Der Ziehen-Hinweis steht auf seiner eigenen, vollen Zeile unter den
   Gruppen — in der Gruppenzeile machte er die letzte Spalte unruhig
   (vierte Kundendurchsicht). */
.palette-oben .dienstepalette .kleingedruckt {
  flex-basis: 100%;
  margin: 0.1rem 0 0;
  font-size: 0.7rem;
}

.musterhinweis {
  margin-top: 1.75rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.musterhinweis h2 { margin-top: 0; font-size: 1.05rem; }

@media (max-width: 62rem) {
  .planbereich { grid-template-columns: 1fr; }
  .statusfolge { margin-left: 0; }
}

/* Auf schmalen Geräten verliert die Pfeilkette ihren Sinn — die Stufen
   stehen dann untereinander und der Pfeil würde in der Luft hängen. */
@media (max-width: 34rem) {
  .stufe + .stufe::before { content: none; }
  .stufe { font-size: 0.76rem; padding: 0.15rem 0.5rem; }
}

@media print {
  .aktionsleiste, .dienstepalette, .musterhinweis, .entwurfsmarke { display: none; }
  .planbereich { display: block; }
  .planraster { border: none; overflow: visible; max-height: none; }
  .dienstplan thead th { background: #fff; color: #000; }
  .dienstplan thead .wochenende { background: #e8e8e8; }
  .dienstplan .spalte-person { position: static; }
}

/* --- Formulare der Stammdatenpflege --- */
.formular-breit { max-width: 58rem; }
/* stretch statt flex-start: Dadurch werden alle Feldkästen einer Reihe gleich
   hoch, und die Hinweistexte stehen — mit margin-top:auto — unten bündig.
   Vorher hatte eine Reihe, in der nur ein Feld einen Hinweis trug, eine
   ausgefranste Unterkante. */
.feldreihe { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: stretch; }
/* 10 rem statt 12: Die Zahl ist nur die Schwelle, ab der eine Reihe umbricht —
   gewachsen wird ohnehin über flex-grow. Mit 12 rem brach die Namenszeile
   (Anrede, Titel, Vorname, Nachname, Kürzel) nach dem vierten Feld um und
   ließ »Kürzel« allein in der nächsten Zeile stehen. */
.feldreihe .feld { flex: 1 1 10rem; }
.feld-schmal { flex: 0 0 10rem !important; max-width: 10rem; }
.feld-mittel { flex: 0 0 18rem !important; max-width: 18rem; }
.feld select, .feld input[type="number"], .feld input[type="time"] {
  width: 100%;
  padding: 0.55rem 0.6rem;
  font: inherit;
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-klein);
  background-color: #fff;
  color: var(--text);
}
.feld input[type="color"] {
  width: 100%;
  height: 2.7rem;
  padding: 0.15rem;
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-klein);
  background: #fff;
}
.feldhinweis { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--text-leise); }
.feldbeschriftung { font-weight: 600; margin: 0 0 0.4rem; }

.feldgruppe {
  border: none;
  border-radius: var(--radius);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  padding: 1.25rem 1.4rem;
  margin: 0 0 1.5rem;
}
.feldgruppe legend {
  font-family: var(--schrift-titel);
  font-weight: 600;
  color: var(--text);
  padding: 0 0.4rem;
}

.ankreuz { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.35rem 0; }
.ankreuz input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; flex: none; }
.ankreuz label { font-weight: 400; }

.formularabschluss { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.knopf-breit { width: auto; }
/* Als Verweis gestaltete Knöpfe sollen sich nach ihrem Text richten,
   nicht die ganze Zeile einnehmen. */
a.knopf, .knopf-verweis { width: auto; text-decoration: none; text-align: center; }
.knopf-abbruch { background: #fff; color: var(--akzent-dunkel); border-color: var(--linie); }
.knopf-abbruch:hover { background: var(--akzent-hell); }
.knopf-klein { padding: 0.3rem 0.7rem; font-size: 0.85rem; background: #fff; border-color: var(--linie); color: var(--akzent-dunkel); }
.knopf-klein:hover { background: var(--akzent-hell); }
/* Klein UND Haupt (Konzept 10au): Das Kleinformat (steht später in der Datei)
   überschrieb sonst Fläche und Schrift der Hauptfarbe — die primäre Tat
   (»Eintragen«, »Speichern«) sah aus wie die sekundäre daneben. Die
   Kombi-Klasse (höhere Spezifität) stellt die Akzentfüllung wieder her,
   behält aber Maß und Schriftgröße des Kleinformats. */
.knopf-haupt.knopf-klein { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.knopf-haupt.knopf-klein:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }

/* --- Farbwahl --- */
.farbliste {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.3rem 1rem;
}
.farbliste li { display: flex; align-items: center; gap: 0.5rem; }
.farbliste input { width: 1.15rem; height: 1.15rem; flex: none; }
.farbliste label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.farbprobe {
  display: inline-block;
  min-width: 2.2rem;
  text-align: center;
  border: 2px solid;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1c2429;
  padding: 0.05rem 0.25rem;
}
.eigenefarbe { margin-bottom: 0.75rem; }

/* --- Katalogansicht --- */
.katalogblock { margin-bottom: 1.75rem; }
.katalogkopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.katalogkopf h2 { margin: 0.5rem 0; }
.reihenform { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.feld-inline {
  font: inherit; font-size: 0.9rem; padding: 0.3rem 0.45rem;
  border: 2px solid var(--linie); border-radius: var(--radius); background: #fff;
}
.feld-winzig {
  font: inherit; font-size: 0.9rem; padding: 0.3rem 0.35rem; width: 4.2rem;
  border: 2px solid var(--linie); border-radius: var(--radius); background: #fff;
}
.leerhinweis { color: var(--text-leise); font-style: italic; }
.merkmale { line-height: 1.9; }
.merkmal {
  display: inline-block;
  background: var(--akzent-hell);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.78rem;
  margin-right: 0.25rem;
}
.tabelle tbody tr.stillgelegt td { color: var(--text-leise); font-style: italic; }
.steuerfeld-form { flex-direction: row; align-items: flex-end; gap: 0.4rem; }
.steuerfeld-form label { align-self: center; }

/* Beschriftung des Rasters steht über dem Blätterbereich, damit sie beim
   waagerechten Blättern nicht mitwandert und abgeschnitten wird. */
.rasterbereich { min-width: 0; }
.rasterbeschriftung {
  margin: 0 0 0.4rem;
  color: var(--text-leise);
  font-size: 0.9rem;
}

/* --- Benutzerverwaltung und Rechtematrix --- */
.werkzeugzeile { margin: 0 0 1.25rem; }
.kasten-hinweis {
  background: var(--akzent-hell);
  border-left: 5px solid var(--logo-blau);
  border-radius: var(--radius-klein);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
}
.kasten-hinweis h2 { margin: 0 0 0.4rem; font-size: 1rem; }
.kasten-hinweis p:last-child { margin-bottom: 0; }

/* Der Hinweis, WARUM der Dienstplan auf diesem Monat steht (10ci). Kein
   Fehler und keine Warnung — eine Auskunft. Deshalb der ruhige Blauton
   des Standardkastens, nicht Bernstein. */
.monatssprung { margin-bottom: 1rem; }

/* Die Warnung VOR der Freigabe (Konzept 10cd, Kundenentscheid 25.07.2026:
   »Regelverstöße sollen nicht blockiert werden, aber natürlich intensiv
   gewarnt«). Sie steht im Kasten »Planungsstatus«, also an der Stelle der
   Entscheidung — die Befundliste selbst liegt weit darunter.

   Zwei Stärken: Bernstein, solange es nur Warnungen sind, Rot, sobald ein
   echter VERSTOSS dabei ist. Der Farbton allein trägt die Aussage nicht
   (WCAG 1.4.1) — die Zahl und das Wort stehen im Text. */
.freigabewarnung {
  background: var(--warnung-hell);
  border-left-color: var(--warnung);
  margin-bottom: 1rem;
}
.freigabewarnung-hart {
  background: var(--fehler-hell);
  border-left-color: var(--fehler);
}
.freigabewarnung-kopf { font-size: 1.05rem; }
.passwortanzeige {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--flaeche);
  border: 2px dashed var(--logo-blau);
  border-radius: var(--radius-klein);
  padding: 0.6rem 0.9rem;
  display: inline-block;
  margin: 0.3rem 0 0.6rem;
  user-select: all;
}
.rollenzeile { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.6rem; }
.rollenzeile input { width: 1.15rem; height: 1.15rem; margin-top: 0.25rem; flex: none; }
.rollenzeile label { font-weight: 400; }
.rollenname { display: block; font-weight: 700; }
.rollentext { display: block; font-size: 0.85rem; color: var(--text-leise); }
.merkmal-warnung { background: var(--warnung-hell); border-color: var(--warnung); color: var(--warnung); }
/* Urlaubsstatus in der Liste je Person (Konzept 10am): genehmigt/erfasst grün
   gefüllt, beantragt grün umrandet (hohl) — dieselbe Grünfamilie wie das
   Raster, der Unterschied liegt in Füllung gegen Umriss, nicht in der Farbe. */
.merkmal-urlaub { background: var(--urlaub-flaeche); border-color: var(--urlaub-rand); color: var(--urlaub); }
.merkmal-urlaub-offen { background: var(--flaeche); border-color: var(--urlaub-rand); color: var(--urlaub); }

.tabelle-matrix .spalte-rolle { text-align: center; width: 8.5rem; }
.tabelle-matrix .spalte-recht { text-align: left; font-weight: 400; }
.tabelle-matrix .rechtname { display: block; font-weight: 600; }
.tabelle-matrix .rechttext { display: block; font-size: 0.82rem; color: var(--text-leise); }
.tabelle-matrix input[type="checkbox"] { width: 1.2rem; height: 1.2rem; }
.tabelle-matrix .bereichszeile th {
  background: var(--hintergrund);
  color: var(--text);
  font-family: var(--schrift-titel);
  font-size: 0.9rem;
  padding-top: 0.7rem;
}

/* --- Stammdaten Mitarbeitende --- */
.merkmal-stark { background: var(--akzent); border-color: var(--akzent-dunkel); color: #fff; }
.liste-schlicht { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.liste-schlicht li { margin-bottom: 0.2rem; }
.tabelle-schlicht { box-shadow: none; border: 1px solid var(--linie); }
.tabelle-schlicht td, .tabelle-schlicht th { padding: 0.4rem 0.6rem; }
.tabelle-schlicht label { font-weight: 400; }
h3 { font-family: var(--schrift-titel); font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }

/* --- Personalakte --- */
.feldreihe-eingerueckt { margin-left: 1.65rem; padding-left: 0.9rem; border-left: 3px solid var(--linie); }
.feld textarea {
  width: 100%; padding: 0.6rem 0.7rem; font: inherit;
  border: 1px solid var(--feldrand); border-radius: var(--radius-klein); background: #fff; color: var(--text);
  resize: vertical;
}
.notizliste { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.notiz {
  background: var(--flaeche);
  border-left: 4px solid var(--logo-blau);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
  padding: 0.8rem 1rem;
  margin-bottom: 0.75rem;
}
.notiz-kopf { margin: 0 0 0.3rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.notiz-zeit { margin-left: auto; font-size: 0.82rem; color: var(--text-leise); }
.notiz-text { margin: 0; }

/* =========================================================
   Dienstplan Phase 4 — Eingaberaster, Werkzeuge, Ausdruck
   ========================================================= */

.statushinweis {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-leise);
}
.statushinweis strong { color: var(--text); }

/* Die Knopfreihe steht auf ihrer eigenen, vollen Zeile der Aktionsleiste.
   Teilte sie sich die Zeile mit dem Auswahlformular, würden beide vom
   Flex-Schrumpfen zusammengedrückt und einzelne Knöpfe fielen einsam in
   die nächste Zeile (so gesehen am »Anzeigen«-Knopf, 22.07.2026). */
.monatsschritte { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-self: flex-end; }
.aktionsleiste .monatsschritte { flex: 1 0 100%; }

.meldung-hinweis { background: var(--akzent-hell); border-color: var(--logo-blau); color: var(--text); }
.pflicht { color: var(--fehler); font-weight: 700; }
.unterzeile { color: var(--text-leise); margin-top: -0.5rem; }

/* Feiertage: Kennzeichnung nie allein über Farbe — die Kopfzelle trägt
   zusätzlich ein Zeichen und für Vorleseprogramme den Klartext. */
.dienstplan thead .feiertag { background: var(--akzent-dunkel); }
.dienstplan tbody .feiertag { background: #f7f1e4; }
.feiertagsmarke {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.1;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0 0.15rem;
}

/* Zelle als Eingabefeld — Tastatur zuerst. Das Feld füllt die Zelle
   vollständig aus, damit auch ein Mausklick am Rand trifft. */
.zelleneingabe {
  width: 100%;
  min-width: 2.1rem;
  box-sizing: border-box;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  padding: 0.28rem 0.05rem;
  color: var(--text);
}
.zelleneingabe:focus {
  outline: 3px solid var(--fokus);
  outline-offset: -3px;
  background: #fff;
}
.zelleneingabe:focus:not(:focus-visible) { outline: 3px solid var(--fokus); }
/* Noch nicht gespeichert: Farbe UND Schrägstellung UND Unterstrich. */
.zelleneingabe.geaendert {
  background: var(--warnung-hell);
  font-style: italic;
  text-decoration: underline;
}
.zelleneingabe.ziel { background: var(--akzent-hell); }

.dienstplan tbody .hat-fehlzeit { background: #f0eef4; }
.fehlzeitkachel {
  display: inline-block;
  min-width: 1.55rem;
  padding: 0.08rem 0.22rem;
  border: 1px dotted #5f3f86;
  border-radius: 3px;
  background: #eceef0;
  font-size: 0.72rem;
  font-style: italic;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;   /* die Kachel ist seit 10ay ein Verweis zur Abwesenheit */
}
.fehlzeitkachel:hover,
.fehlzeitkachel:focus-visible { background: var(--akzent-hell); border-style: solid; }
/* Erst BEANTRAGT: gestrichelt und heller — ein Antrag kann noch abgelehnt
   werden und darf nicht wie eine feste Abwesenheit aussehen (10ay). Zustand
   steht nicht allein in der Farbe: Rahmenart UND Titel sagen es (WCAG 1.4.1). */
.fehlzeitkachel-beantragt { background: var(--flaeche); border-style: dashed; }
/* Noch eine Abwesenheit am selben Tag (Krankheit im Urlaub, § 17b). */
.fehlzeit-mehr { font-size: 0.6rem; font-style: normal; vertical-align: super; }
.abweichungsmarke {
  position: absolute;
  top: 0; right: 1px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--akzent-dunkel);
  line-height: 1;
}
.leerzeile { padding: 1rem !important; text-align: left !important; color: var(--text-leise); }

.begruendungskasten {
  background: var(--warnung-hell);
  border: 1px solid var(--warnung);
  border-radius: var(--radius-klein);
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.6rem;
}
.begruendungskasten label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.begruendungskasten input {
  width: 100%;
  max-width: 34rem;
  padding: 0.45rem 0.6rem;
  font: inherit;
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-klein);
  background: #fff;
}
.rasterfuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.75rem; }
.rasterfuss .feldhinweis { margin: 0; flex: 1 1 18rem; }

.planwerkzeuge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}
.werkzeugkasten {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
}
.werkzeugkasten h2 { margin: 0 0 0.6rem; font-size: 1rem; }

/* Werkzeuge am freigegebenen Plan: sichtbar, aber ausgeschaltet — sie
   verschwinden nicht mehr spurlos (Konzept 10ai). Ein Banner über dem
   Werkzeug-Raster erklärt es einmal; die Kästen stehen gedämpft da, die
   Felder im <fieldset disabled> deaktiviert der Browser selbst. */
.werkzeuge-gesperrt-banner {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.6rem 0.85rem;
  background: var(--warnung-hell);
  border-left: 4px solid var(--warnung);
  border-radius: var(--radius-klein);
  color: var(--warnung);
  font-size: 0.9rem;
}
.werkzeugkasten-gesperrt { background: var(--hintergrund); }
/* Das <fieldset> trägt nur die Ausschaltung, keine eigene Optik. Ohne diese
   Regel bekäme es Browser-Rahmen und ein eigenwilliges Mindestmaß. */
.werkzeugform fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}
.werkzeugform .feld { margin-bottom: 0.6rem; }
.werkzeugform label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.2rem; }
.werkzeugform input[type="text"], .werkzeugform input[type="number"], .werkzeugform select {
  width: 100%;
  padding: 0.4rem 0.5rem;
  font: inherit;
  font-size: 0.9rem;
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-klein);
  background-color: #fff;
}
.werkzeugform .ankreuz label { display: inline; font-weight: 400; }
.werkzeugform kbd {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8em;
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 0 0.25rem;
  background: #fff;
}

.verlaufskasten {
  margin-top: 1.75rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
}
.verlaufskasten summary { cursor: pointer; font-weight: 600; padding: 0.3rem 0; }
.verlaufskasten summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* --- Druckansicht --- */
.druckleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.druckleiste .feldhinweis { margin: 0; }
.druckkopf h1 { margin-bottom: 0.2rem; }
.druckzeile { margin: 0 0 0.9rem; color: var(--text-leise); }
.dienstplan-druck { width: 100%; }
.drucklegende { margin-top: 1.25rem; }
.drucklegende h2 { font-size: 1rem; }
.legendenliste { list-style: none; margin: 0 0 0.75rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.25rem 1rem; }
.legendenliste li { font-size: 0.85rem; }

@media print {
  .planungskopf, .planwerkzeuge, .verlaufskasten, .druckleiste,
  .rasterfuss, .begruendungskasten { display: none; }
  .druckzeile { color: #000; }
  .dienstplan tbody .feiertag { background: #f0f0f0; }
  .dienstplan tbody .hat-fehlzeit { background: #f0f0f0; }
  .dienstplan .spalte-summe { background: #fff; }
  .fehlzeitkachel, .dienst { background: #fff !important; color: #000; }
  .legendenliste { break-inside: avoid; }
}

/* Gesperrte Bereiche müssen als gesperrt erkennbar sein — sonst wirkt ein
   Formular bedienbar, das nichts annimmt. */
fieldset[disabled] { opacity: 0.72; }
fieldset[disabled] input, fieldset[disabled] select, fieldset[disabled] textarea {
  background-color: var(--hintergrund);
  color: var(--text-leise);
  cursor: not-allowed;
}

/* =========================================================
   Gebäude & Dienste — Häuser als Karten mit Dienstvorschau
   ========================================================= */

.hausliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.hauskarte {
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  border-top: 4px solid var(--logo-blau);
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
}
.hauskarte-still { border-top-color: var(--linie); }
.hauskarte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.hauskarte h2 {
  margin: 0;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.hauskuerzel {
  background: var(--akzent-dunkel);
  color: #fff;
  border-radius: var(--radius-klein);
  padding: 0.1rem 0.45rem;
  font-size: 0.82rem;
  font-family: var(--schrift);
  letter-spacing: 0.03em;
}
.hauslage { margin: 0.35rem 0 0; color: var(--text-leise); font-size: 0.88rem; }
.dienstzahl { margin: 0.7rem 0 0.35rem; font-size: 0.85rem; color: var(--text-leise); }

/* Die Kacheln sind Verweise — von hier aus ist jeder Dienst einen Klick weit weg. */
.kachelvorschau { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.9rem; padding: 0; }
.kachelvorschau a.dienst { text-decoration: none; }
.kachelvorschau a.dienst:hover { outline: 2px solid var(--akzent-dunkel); outline-offset: 1px; }
.kachelvorschau a.dienst:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.kachelvorschau a.dienst:focus:not(:focus-visible) { outline: 3px solid var(--fokus); }

.hauskarte-fuss {
  margin: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-top: 0.5rem;
}

/* Hausleiste auf der Katalogseite */
.hausleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.5rem 0.85rem;
  margin-bottom: 1rem;
}
.hausleiste-titel { font-size: 0.85rem; font-weight: 600; color: var(--text-leise); }
.hausleiste ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; }
.hausleiste ul a {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: #fff;
  color: var(--akzent-dunkel);
  text-decoration: none;
  font-size: 0.88rem;
}
.hausleiste ul a:hover { background: var(--akzent-hell); border-color: var(--logo-blau); }
/* Das aktuelle Haus doppelt markiert — Fläche UND Fettung, nie Farbe allein. */
.hausleiste ul a[aria-current="page"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
  font-weight: 700;
}
.hausleiste-alle { margin-left: auto; font-size: 0.88rem; }
.werkzeugzeile { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (max-width: 40rem) {
  .hausleiste-alle { margin-left: 0; }
}
.reihenform-inline { display: inline-flex; margin-left: 0.5rem; vertical-align: middle; }

/* =========================================================
   Regelprüfung — Ampel, Zellenmarken, Befunde
   ========================================================= */

.regelampel { margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; align-self: flex-end; }
.ampel {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.82rem;
  text-decoration: none;
}
.ampelzahl { font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.ampel-verstoss     { background: var(--fehler-hell);  border-color: var(--fehler);  color: var(--fehler); }
.ampel-warnung      { background: var(--warnung-hell); border-color: var(--warnung); color: var(--warnung); }
.ampel-hinweis      { background: var(--akzent-hell);  border-color: var(--akzent-dunkel); color: var(--akzent-dunkel); }
.ampel-uebersteuert { background: var(--erfolg-hell);  border-color: var(--erfolg);  color: var(--erfolg); }
/* Ohne Befund tritt die Kachel zurück, verschwindet aber nicht — die Null
   ist eine Aussage. */
.ampel-leer { background: #fff; border-color: var(--linie); color: var(--text-leise); }
.ampel:hover { filter: brightness(0.96); }
.ampel:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Zellenmarkierung: Rahmen UND Zeichen, nie Farbe allein */
.dienstplan tbody .befund-verstoss { box-shadow: inset 0 0 0 2px var(--fehler); }
.dienstplan tbody .befund-warnung  { box-shadow: inset 0 0 0 2px var(--warnung); }
.dienstplan tbody .befund-hinweis  { box-shadow: inset 0 0 0 2px var(--akzent-dunkel); }
.dienstplan tbody .befund-begruendet { box-shadow: inset 0 0 0 2px var(--erfolg); }
.befundmarke {
  position: absolute;
  top: -1px; left: 1px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 0 0.16rem;
  border-radius: 0 0 3px 0;
  color: #fff;
}
.befundmarke-verstoss { background: var(--fehler); }
.befundmarke-warnung  { background: var(--warnung); }
.befundmarke-hinweis  { background: var(--akzent-dunkel); }
.befund-begruendet .befundmarke { background: var(--erfolg); }

/* Befundliste */
.pruefbereich { margin-top: 1.75rem; }
.pruefbereich > h2 { margin-bottom: 0.3rem; }
.befundliste { list-style: none; margin: 0.9rem 0 0; padding: 0; }
.befundkarte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 5px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 0.75rem 1rem;
  margin-bottom: 0.6rem;
}
.befundkarte-verstoss { border-left-color: var(--fehler); }
.befundkarte-warnung  { border-left-color: var(--warnung); }
.befundkarte-hinweis  { border-left-color: var(--akzent-dunkel); }
.befundkarte-urlaub   { border-left-color: var(--urlaub-rand); }
.befundkarte-begruendet { border-left-color: var(--erfolg); background: #fbfdfb; }

.befundkopf { margin: 0 0 0.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.befundgrad {
  border-radius: var(--radius-klein);
  padding: 0.05rem 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid;
}
.befundgrad-verstoss { background: var(--fehler-hell);  border-color: var(--fehler);  color: var(--fehler); }
.befundgrad-warnung  { background: var(--warnung-hell); border-color: var(--warnung); color: var(--warnung); }
.befundgrad-hinweis  { background: var(--akzent-hell);  border-color: var(--akzent-dunkel); color: var(--akzent-dunkel); }
.befundgrad-urlaub   { background: var(--urlaub-flaeche); border-color: var(--urlaub-rand); color: var(--urlaub); }
.befundregel { margin-left: auto; text-align: right; font-size: 0.85rem; }
.befundquelle { display: block; font-size: 0.76rem; color: var(--text-leise); }
.befundtext { margin: 0; }
.befundbegruendung { margin: 0.4rem 0 0.3rem; font-size: 0.9rem; }

.uebersteuerung { margin-top: 0.5rem; }
.uebersteuerung summary { cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--akzent-dunkel); }
.uebersteuerung summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.regelzitat {
  margin: 0.5rem 0;
  padding: 0.5rem 0.8rem;
  border-left: 3px solid var(--logo-blau);
  background: var(--akzent-hell);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  font-size: 0.88rem;
}

@media (max-width: 62rem) {
  .regelampel { align-self: flex-start; }
  .befundregel { margin-left: 0; text-align: left; }
}
@media print {
  .uebersteuerung, .regelampel { display: none; }
}

/* =========================================================
   Regelwerk-Browser
   ========================================================= */

.regelsuche {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 1rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.75rem;
}
.regelsuche .feld { flex: 1 1 16rem; margin: 0; }
.regelsuche input[type="search"], .regelsuche input[type="date"] {
  width: 100%;
  padding: 0.5rem 0.6rem;
  font: inherit;
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-klein);
  background: #fff;
}
.regeltreffer { color: var(--text-leise); margin: 0 0 1.25rem; }

.themenleiste { margin-bottom: 1.5rem; }
.themenleiste ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; }
.themenleiste a {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: #fff;
  color: var(--akzent-dunkel);
  text-decoration: none;
  font-size: 0.86rem;
}
.themenleiste a:hover { background: var(--akzent-hell); border-color: var(--logo-blau); }

.regelthema { margin-bottom: 2rem; }
.regelthema > h2 { border-bottom: 2px solid var(--logo-blau); padding-bottom: 0.3rem; }
.regelkarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 1rem;
}
.regelkarte {
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.1rem 1.25rem;
}
/* Sprungziel aus dem Plan heraus muss sichtbar ankommen. */
.regelkarte:target { outline: 3px solid var(--logo-blau); outline-offset: 3px; }
.regelkarte h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.regelmarken { margin: 0 0 0.6rem; line-height: 1.9; }
.herkunft-gesetz          { background: #f6dade; border-color: #9b2f43; }
.herkunft-tarif           { background: #d2eaea; border-color: #1f6b6b; }
.herkunft-betrieblich     { background: #fdf0c8; border-color: #a8791b; }
.herkunft-personenbezogen { background: #e6dcef; border-color: #5f3f86; }
.grad-verstoss { background: var(--fehler-hell);  border-color: var(--fehler);  color: var(--fehler); }
.grad-warnung  { background: var(--warnung-hell); border-color: var(--warnung); color: var(--warnung); }

/* Der gesetzte Wert in großer Schrift — die Kernaussage der Karte (4.2). */
.regelkennzahl {
  margin: 0 0 0.5rem;
  font-family: var(--schrift-titel);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--akzent-dunkel);
  line-height: 1.2;
}
.regelklartext { margin: 0 0 0.8rem; }

.regeldaten { display: grid; grid-template-columns: 9rem 1fr; gap: 0.15rem 0.75rem; margin: 0; font-size: 0.86rem; }
.regeldaten dt { font-weight: 600; color: var(--text-leise); }
.regeldaten dd { margin: 0; }
.regeldaten code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--hintergrund);
  padding: 0 0.25rem;
  border-radius: 3px;
}
.parameterliste { list-style: none; margin: 0; padding: 0; }
.parameterliste li { display: flex; gap: 0.5rem; }
.parametername { color: var(--text-leise); }
.parameterwert { font-weight: 600; overflow-wrap: anywhere; word-break: break-word; }

.fassungen { margin-top: 0.7rem; font-size: 0.86rem; }
.fassungen summary { cursor: pointer; font-weight: 600; color: var(--akzent-dunkel); }
.fassungen summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

@media print {
  .regelsuche, .themenleiste { display: none; }
  .regelkarten { display: block; }
  .regelkarte { box-shadow: none; border: 1px solid #999; margin-bottom: 0.6rem; break-inside: avoid; }
}
/* Knöpfe in der Regelsuche richten sich nach ihrem Text, nicht nach der Zeile. */
.regelsuche button, .regelsuche .knopf { flex: 0 0 auto; }
/* .knopf-haupt ist für Formularabschlüsse auf volle Breite ausgelegt. In
   waagerechten Leisten soll er sich dagegen nach seinem Text richten. */
.regelsuche .knopf-haupt,
.rasterfuss .knopf-haupt,
.werkzeugzeile .knopf-haupt,
.hauskarte-fuss .knopf-haupt,
.druckleiste .knopf-haupt { width: auto; }
/* Sprungziele dürfen nicht unter dem feststehenden Navigationsband landen —
   sonst springt man scheinbar ins Leere. */
.regelkarte, .regelthema, .pruefbereich, [id^="t-"], [id^="r-"] { scroll-margin-top: 5.5rem; }

/* =========================================================
   Auswahlfelder und Eingaben — einheitlich in allen Browsern
   =========================================================

   Safari rendert <select> nativ und setzt eigene Innenabstände, eine eigene
   Mindesthöhe und einen eigenen Pfeil. Zusammen mit unseren Angaben führte
   das zu abgeschnittenem Text und unterschiedlich hohen Feldern neben den
   Textfeldern. Deshalb wird die Systemdarstellung abgeschaltet und ein
   eigener Pfeil gesetzt — als Data-URI im Stylesheet, was die
   Content-Security-Policy über `img-src 'self' data:` zulässt. */

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2345708f' d='M4.2 6.2 8 10l3.8-3.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: 1rem 1rem;
  padding-right: 2.1rem !important;
  /* Ohne diese Zeile schneidet Safari lange Bezeichnungen ab. */
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Mehrzeilige Auswahl und Größenangaben brauchen den Pfeil nicht. */
select[multiple], select[size]:not([size="1"]) {
  background-image: none;
  padding-right: 0.6rem !important;
}
select:disabled { opacity: 0.7; }

/* Safari und iOS blähen Formularfelder auf und runden sie eigenmächtig ab. */
input, select, textarea, button {
  -webkit-appearance: none;
  border-radius: var(--radius-klein);
  font-family: inherit;
}
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
  border-radius: 0;
}
input[type="color"] { -webkit-appearance: auto; appearance: auto; }
/* Datums- und Zeitfelder richtet iOS sonst rechtsbündig aus. */
input[type="date"], input[type="time"] {
  text-align: left;
  min-height: 2.6rem;
}

/* Die selbsttätig ausgefüllten Felder färben Chrome und Safari hellgelb ein.
   Die Fläche lässt sich dort nur über einen inneren Schatten zurückholen. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: inset 0 0 0 100px #fff;
  box-shadow: inset 0 0 0 100px #fff;
}
.zelleneingabe:-webkit-autofill,
.zelleneingabe:-webkit-autofill:hover,
.zelleneingabe:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 100px transparent;
  box-shadow: inset 0 0 0 100px transparent;
}

/* Statuszeile unter dem Raster: sagt beim Tippen, was das Kürzel bedeutet.
   Sie ersetzt das Auswahlfeld an der Zelle, das in Safari nur aufblitzte. */
.zellenhilfe {
  margin: 0.5rem 0 0;
  padding: 0.4rem 0.7rem;
  background: var(--akzent-hell);
  border-left: 4px solid var(--logo-blau);
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  font-size: 0.88rem;
  min-height: 1.4rem;
}
.zellenhilfe-unbekannt {
  background: var(--warnung-hell);
  border-left-color: var(--warnung);
  color: var(--warnung);
  font-weight: 600;
}

/* =========================================================
   Nachbesserungen aus der Barrierearmut-Durchsicht (21.07.2026)
   ========================================================= */

/* Die Zellen des Rasters waren rahmenlos und durchsichtig. Mit dem Auge war
   nicht zu unterscheiden, welche Zelle beschreibbar ist und welche nur Text
   zeigt — die einzige Begrenzung war der Tabellenrahmen mit 1,3:1.
   Jetzt trägt jedes Feld einen dezenten Unterstrich mit 3,1:1. */
.zelleneingabe {
  border-bottom: 2px solid var(--feldrand);
  background: transparent;
}
.zelleneingabe:hover { background: var(--akzent-hell); }
/* Gesperrte Zellen (Fehlzeit) haben kein Feld — sie bekommen ein Flächenmuster,
   damit der Unterschied nicht allein an der Farbe hängt. */
.dienstplan tbody .hat-fehlzeit {
  background-image: repeating-linear-gradient(135deg,
    rgba(95, 63, 134, 0.10) 0 3px, transparent 3px 6px);
}

/* Sprungmarke über dem Raster: Ohne sie muss man rund 200 Felder durchtabben,
   um an den Speicherknopf zu kommen. */
.rasterueberspringen {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.rasterueberspringen:focus {
  position: static;
  width: auto; height: auto;
  display: inline-block;
  margin-bottom: 0.4rem;
  padding: 0.4rem 0.8rem;
  background: var(--akzent);
  color: #fff;
  border-radius: var(--radius-klein);
}

/* Zähler der nicht gespeicherten Änderungen — der Zustand war bisher nur
   sichtbar, nicht ansagbar. */
.aenderungszaehler { font-weight: 600; color: var(--warnung); }
.aenderungszaehler:empty { display: none; }

/* Der Fehlerkasten bekommt den Fokus, damit die Meldung sofort angesagt wird. */
.fehlerkasten:focus { outline: 3px solid var(--fokus); outline-offset: 3px; }

/* Die Angabenliste der Regelkarte klappt auf schmalen Geräten um. */
@media (max-width: 40rem) {
  .regeldaten { grid-template-columns: 1fr; gap: 0 0; }
  .regeldaten dd { margin-bottom: 0.4rem; }
}

/* =========================================================
   Nachbesserungen für Safari und Firefox (21.07.2026)
   ========================================================= */

/* Nach dem Abschalten der Systemdarstellung bringt Safari keine eigene
   Mindesthöhe mehr mit — die Auswahlfelder saßen flacher und tiefer als die
   Knöpfe daneben. */
select { min-height: 2.6rem; line-height: 1.2; }
.steuerfeld select, .werkzeugform select,
.steuerfeld input[type="date"] { min-height: 2.3rem; }

/* Firefox zeichnet in ein Auswahlfeld ohne Systemdarstellung zusätzlich einen
   gepunkteten Ring um den Text der gewählten Option. */
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--text);
}

/* iOS zoomt in jedes Feld unter 16 px hinein und nicht wieder heraus. Auf
   Geräten mit grobem Zeiger deshalb überall 16 px — die Rasterzelle behält
   ihre Spaltenbreite über eine Verkleinerung der Darstellung. */
@media (pointer: coarse) {
  select, textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]) {
    font-size: 16px;
  }
  .zelleneingabe {
    font-size: 16px;
    transform: scale(0.75);
    transform-origin: center;
  }
}

/* Die Steuerleiste des Plans lief auf dem Telefon seitlich über: Flex-Kinder
   schrumpfen ohne min-width:0 nicht unter ihre Inhaltsbreite. */
.steuerfeld-form { flex-wrap: wrap; }
.steuerfeld-form select { min-width: 0; flex: 1 1 8rem; }

/* Feldbreiten der Plansteuerung nach Inhalt, nicht nach Gleichmaß
   (Kundenwunsch 22.07.2026): Das Hausfeld war zu kurz für die Hausnamen,
   das Jahrfeld unnötig breit für vier Ziffern. Die Breiten folgen dem
   längsten erwartbaren Inhalt — dieselbe Überlegung wie bei .feld-schmal
   und .feld-datum in den Formularen.
   Das Formular selbst füllt seine Zeile: Als verschachtelter
   Umbruch-Flexcontainer bekäme es sonst eine zu schmale ermittelte
   Breite, und der Anzeigen-Knopf fiele trotz freier Zeile heraus. */
.aktionsleiste .steuerfeld-form { flex: 1 1 auto; min-width: 0; }
.steuerfeld-form .steuer-haus  { flex: 0 1 16rem; min-width: 11rem; }
.steuerfeld-form .steuer-monat { flex: 0 1 9rem; }
.steuerfeld-form .steuer-jahr  { flex: 0 0 5.4rem; }
.steuerfeld-form .steuer-datum { flex: 0 0 11rem; font: inherit; font-size: 0.9rem;
  padding: 0.25rem 0.4rem; border: 1px solid var(--feldrand);
  border-radius: var(--radius-klein); background-color: #fff; min-height: 2.3rem; }

/* Bei zusammengefassten Rahmen gehören die Linien zur Tabelle, nicht zur
   feststehenden Zelle — beim Blättern verlor die Kopfzeile in Safari und
   Firefox ihre Trennlinien, und die erste Datenzeile lief in den Kopf hinein. */
.dienstplan thead th { box-shadow: inset 0 -1px 0 var(--linie); }
.dienstplan .spalte-person { box-shadow: inset -1px 0 0 var(--linie); }

/* Runde Ecken schneiden WebKit und Gecko an einem display:table-Kasten nicht
   zu — der blaue Kopfbalken stand eckig über der abgerundeten Karte.

   ACHTUNG, hier lag ein Fehler (gefunden in Phase 10): Diese Regel stand mit
   `overflow: hidden` da und ueberschrieb damit das `overflow-x: auto` weiter
   oben. Jede Tabelle, die breiter war als ihr Kasten, wurde abgeschnitten
   statt blaetterbar — betroffen waren das Jahresraster der Abwesenheiten,
   der Jahreskalender, die Zuschlagsseite und die Auskunft nach Art. 15
   (deren Stammdatentabelle 5225 px breit ist, bei 1112 px Kastenbreite).
   Aufgefallen ist es nicht, weil ein abgeschnittener Tabellenrand genauso
   aussieht wie ein Tabellenende.

   `overflow: auto` schneidet die Ecken ebenso zu und laesst das Blaettern zu.
   Die Achsen duerfen dabei nicht gemischt werden: Steht eine Achse auf
   `visible` und die andere nicht, rechnet der Browser die sichtbare
   stillschweigend in `auto` um. */
.tabellenbereich { border-radius: var(--radius); overflow: auto; }
.tabelle { border-radius: 0; }

/* :first-of-type zählt Elementtypen, nicht Klassen — die Trennlinie vor der
   Soll-Spalte griff dadurch an keiner einzigen Stelle. */
.dienstplan .zelle + .spalte-summe,
.dienstplan .spalte-tag + .spalte-summe { border-left: 2px solid var(--akzent); }

/* iOS misst 100vh gegen den Viewport mit eingefahrenen Leisten. */
.planraster { max-height: calc(100svh - 15rem); }

/* Beim Überfahren einer noch nicht gespeicherten Zelle verschwand die gelbe
   Markierung unter dem Zeiger. Sie ist das stärkste Signal und bleibt jetzt. */
.zelleneingabe.geaendert:hover,
.zelleneingabe.geaendert:focus { background: var(--warnung-hell); }

@media print {
  /* Safari richtet sich beim Seitenumbruch nach der alten Schreibweise. */
  .kachel, .legendenliste, .regelkarte, .befundkarte {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* Der Monatsplan hat bis zu 36 Spalten — im Hochformat schneidet Safari
     rechts ab. Betrifft nur den Browserdruck; das PDF bringt sein eigenes
     Format mit. */
  @page { size: A4 landscape; margin: 10mm; }
}

/* Mehrere Dienste an einem Tag: Die Zelle wird etwas breiter, damit »F1 S1«
   lesbar bleibt, und die Kacheln stehen in der Nur-Lese-Ansicht untereinander. */
.zelle-mehrfach { font-size: 0.66rem; letter-spacing: -0.02em; }
.dienstplan tbody .zelle .dienst + .dienst { margin-top: 1px; display: block; }

/* =========================================================
   Formularreihen: gleiche Höhe für alle Felder (21.07.2026)
   =========================================================

   In einer Reihe nebeneinander stehender Felder brachen längere
   Beschriftungen wie »Beschäftigungszeit ab« oder »Grad der Behinderung«
   auf zwei Zeilen um. Das Feld darunter rutschte dadurch 25 px tiefer als
   seine Nachbarn — die Reihe wirkte verrutscht.

   Ohne `subgrid` (in Safari zu jung, siehe 5a.9) gibt es dafür keinen
   automatischen Weg. Die Beschriftung bekommt deshalb Platz für zwei Zeilen
   und richtet ihren Text unten aus: Einzeilige und zweizeilige Beschriftungen
   enden dann auf derselben Grundlinie, und alle Eingabefelder beginnen auf
   gleicher Höhe. */
.feldreihe .feld > label {
  display: flex;
  align-items: flex-end;
  min-height: 2.9em;
  line-height: 1.25;
}
/* Steht ein Feld allein, ist der Zusatzplatz unnötig. */
.feld:only-child > label { min-height: 0; display: block; }

/* Der Hinweis unter einem Feld gehört zur Breite des Feldes, nicht zur
   Zeile — er darf die Nachbarfelder nicht auseinanderdrücken. */
.feldreihe .feld { display: flex; flex-direction: column; }
.feldreihe .feld .feldhinweis { margin-top: auto; padding-top: 0.25rem; }

/* Ein Hinweis darf breiter sein als das schmale Feld darüber — sonst zerfällt
   »Zahlen und Buchstaben, z. B. P-0815« in drei Zeilen und drückt die ganze
   Reihe auseinander. Er bleibt innerhalb der Reihe und überlappt nichts, weil
   die Reihe ihre Höhe am höchsten Feld ausrichtet. */
.feldreihe .feld-schmal .feldhinweis,
.feldreihe .feld-winzig .feldhinweis { min-width: 12rem; }

/* =========================================================
   Layout-Durchsicht (21.07.2026)
   ========================================================= */

/* Die beiden Felder in den Katalogzeilen trugen als einzige der Anwendung
   noch den alten, zu schwachen Rahmen (1,6:1) und ein anderes Eckmaß —
   siehe die Begründung bei --feldrand. Zusätzlich war .feld-inline ohne
   Breitenangabe: Gruppenbezeichnungen dürfen 80 Zeichen haben, sichtbar
   waren rund 20. */
.feld-inline, .feld-winzig {
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-klein);
  background-color: #fff;
}
.feld-inline { width: 18rem; max-width: 100%; }

/* Ein Ankreuzfeld in einer Feldreihe hat keine Beschriftungszeile über sich
   und saß deshalb rund 1,9 rem höher als die Eingabefelder daneben — es
   wirkte, als gehöre es zur Beschriftung statt zur Zeile. */
.feldreihe > .ankreuz,
.feldreihe > .feld-ankreuz {
  align-self: flex-end;
  padding-bottom: 0.6rem;
}
/* Ein Ankreuzfeld ist so breit wie sein Text — es soll die Reihe nicht
   auseinanderziehen (10bk). */
.feldreihe > .feld-ankreuz { flex: 0 1 auto; }

/* Datums- und Zeitangaben in Tabellen brachen mitten im Wert um —
   »21.07.2026,« / »08:12 Uhr«. Im Dienstplanraster war das längst gelöst. */
.tabelle td.zeit, .tabelle td.zahl {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Die Hervorhebung der Wochenenden in der Feiertagsliste war wirkungslos:
   .wochenende ist nur innerhalb von .dienstplan definiert. */
.tabelle td.wochenende, .tabelle th.wochenende { background: var(--wochenende); }

/* Ein Hinweis neben einem Knopf wurde auf dessen Höhe gestreckt und klebte
   an der Oberkante. */
.werkzeugzeile { align-items: center; }
.werkzeugzeile .feldhinweis { margin: 0; }

/* Datumsfelder brauchen Platz für TT.MM.JJJJ und das Kalendersymbol des
   Browsers — in .feld-schmal wurde es an den Rand gequetscht. */
.feld-datum { flex: 0 0 11rem !important; max-width: 11rem; }

/* E-Mail-Adressen der Einrichtung sind lang. */
/* Wächst über flex-grow auf die verfügbare Breite; die Basis bleibt klein,
   damit die Reihe nicht schon bei drei Feldern umbricht. */
.feld-lang { flex: 2 1 15rem !important; max-width: none; }
/* Ein Hinweis, der zur ganzen Reihe gehört und nicht zu einem Feld daneben. */
.feldreihe > .hinweis-volle-breite { flex: 1 0 100%; margin-top: 0.4rem; }
/* In der Qualifikationstabelle steht ein Datumsfeld — dort wären 18 rem zu viel. */
.tabelle .feld-inline[type="date"] { width: 11rem; }
/* Knöpfe in einer Feldleiste stehen neben Feldern, die eine Beschriftung über
   sich haben — ohne Ausgleich sitzen sie 30 px zu hoch. Der Abstand entspricht
   der Beschriftungszeile samt ihrem Abstand nach unten. */
.regelsuche button, .regelsuche .knopf { margin-top: 1.85rem; }
@media (max-width: 40rem) {
  .regelsuche button, .regelsuche .knopf { margin-top: 0; }
}

/* ==========================================================================
   Phase 6 — Abwesenheiten, Urlaub und Krankheit
   ========================================================================== */

/* Zahlen und Zeiten auch in Kopf- und Fußzeilen bündig und unzerbrochen.
   Bisher galt die Regel nur für td — in einer tfoot-Summenzeile brach die
   Zahl dadurch anders um als in der Spalte darüber. */
.tabelle th.zeit, .tabelle th.zahl {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tabelle td.zahl, .tabelle th.zahl { text-align: right; }
.tabelle tfoot th, .tabelle tfoot td {
  border-top: 2px solid var(--linie-kraeftig);
  font-weight: 700;
  background: var(--hintergrund);
}

/* --- Jahresraster der Abwesenheiten ---
   366 Spalten in einem waagerecht blätternden Bereich, nach dem Vorbild des
   Dienstplanrasters. Die Namensspalte steht fest.
   `position: sticky` hängt an der ZELLE, nicht an der Zeile — an der Zeile
   greift es in Safari nicht (Konzept 10f). */
.jahresraster { border-collapse: separate; border-spacing: 0; font-size: 0.8rem; }
.jahresraster th, .jahresraster td { padding: 0; border: 1px solid var(--linie); }

.jahresraster .jr-name {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--flaeche);
  text-align: left;
  padding: 0.2rem 0.6rem;
  min-width: 11rem;
  white-space: nowrap;
  border-right: 2px solid var(--linie-kraeftig);
}
.jahresraster thead .jr-name { z-index: 3; background: var(--hintergrund); }
.jahresraster tfoot .jr-name { background: var(--hintergrund); }

/* `.tabelle thead th` setzt weisse Schrift auf Akzentflaeche. Das Jahresraster
   braucht helle Flaechen, damit die Abwesenheitsmarken darauf zu erkennen
   sind — die Schriftfarbe muss deshalb ausdruecklich zurueckgesetzt werden,
   sonst steht Weiss auf Weiss. */
.jahresraster thead th, .jahresraster tfoot th { color: var(--text); }

.jahresraster .jr-monat {
  padding: 0.25rem 0.4rem;
  background: var(--hintergrund);
  color: var(--text);
  font-family: var(--schrift-titel);
  font-size: 0.78rem;
  white-space: nowrap;
  border-left: 2px solid var(--linie-kraeftig);
}
/* Feste Breite: Ein Kuerzel wie »F616« wuerde die Spalte sonst auf das
   Dreifache dehnen und das ganze Jahr auseinanderziehen. Im Feld steht
   deshalb ein Zeichen, der volle Text im title. */
.jahresraster .jr-tag {
  width: 1.15rem;
  min-width: 1.15rem;
  max-width: 1.15rem;
  overflow: hidden;
  text-align: center;
  font-size: 0.62rem;
  line-height: 1.5rem;
  height: 1.5rem;
}
.jahresraster thead .jr-tag { color: var(--text-leise); background: var(--flaeche); }
/* abbr trägt sonst eine punktierte Unterstreichung quer durchs Raster. */
.jahresraster abbr { text-decoration: none; border: none; cursor: help; }

.jahresraster .wochenende { background: var(--wochenende); }

/* Abwesenheit: Fläche UND Zeichen — der Status steht nie allein in der
   Farbe (WCAG 1.4.1, Konzept 6.5). */
.jr-abwesend { font-weight: 700; }
/* Erfasst/genehmigt: satte grüne Fläche — Urlaub ist auf einen Blick als
   Urlaub zu erkennen (Konzept 10am). */
.jr-genehmigt { background: var(--urlaub-flaeche); color: var(--urlaub); }
/* Beantragt: dieselbe Grünfamilie, aber Schraffur statt voller Fläche — »noch
   nicht gebucht« ist auch ohne Farbe zu erkennen (WCAG 1.4.1). */
.jr-beantragt {
  color: var(--urlaub);
  background-color: var(--urlaub-hell);
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 3px,
    rgba(21, 87, 36, 0.30) 3px, rgba(21, 87, 36, 0.30) 6px);
}
.jahresraster tbody .jr-genehmigt.wochenende,
.jahresraster tbody .jr-beantragt.wochenende { opacity: 0.55; }

.jr-zaehler { font-weight: 600; color: var(--text-leise); background: var(--hintergrund); }
.jr-konflikt {
  background-color: var(--fehler-hell);
  color: var(--fehler);
  font-weight: 700;
}
.jr-legende { font-weight: 700; padding: 0.05rem 0.55rem; }

/* --- Bearbeitbare Urlaubstabelle, Monatssicht (Konzept 10ak) ---
   Erbt das Aussehen des Jahresrasters (.jahresraster/.jr-*), aber die Zellen
   sind Klickflächen: etwas breiter, damit der Finger auf dem Telefon trifft. */
.ut-monat .jr-tag {
  width: 1.6rem;
  min-width: 1.6rem;
  max-width: 1.6rem;
  padding: 0;
}
.ut-feld {
  display: block;
  width: 100%;
  height: 1.5rem;
  line-height: 1.5rem;
  color: inherit;
  text-decoration: none;
}
.ut-feld:hover,
.ut-feld:focus-visible {
  outline: 2px solid var(--akzent-dunkel);
  outline-offset: -2px;
}
/* Der per Skript markierte Zeitraum (urlaub.js) — Fläche UND Rahmen an jeder
   Zelle, damit das Band auch über leere Tage klar zusammenhängt (nicht allein
   in der Farbe, WCAG 1.4.1); der Anker trägt zusätzlich einen kräftigen Rand. */
.ut-feld.ut-auswahl {
  background-color: var(--akzent-hell);
  box-shadow: inset 0 0 0 1px var(--logo-blau);
  font-weight: 700;
}
.ut-feld.ut-anker { box-shadow: inset 0 0 0 2px var(--akzent-dunkel); }
/* »Heute« ruhig markieren. Der frühere Rahmen malte den Fokus-Orange (--fokus,
   sonst der Tastaturfokus) als 2px-Kasten quer durch die ganze Spalte — ein
   greller Balken, der mit allem stritt. Jetzt trägt nur die Kopfzahl einen
   Akzent-Kreis, und die leeren Tageszellen darunter bekommen einen zarten
   Ton; die grünen Urlaubs- und die geriffelten Blocker-Felder behalten das
   Ihre (deshalb die :not()-Ausnahmen). */
.jahresraster thead .ut-heute abbr {
  display: inline-block;
  min-width: 1.3rem;
  height: 1.3rem;
  line-height: 1.3rem;
  border-radius: 999px;
  background: var(--akzent);
  color: #fff;
  font-weight: 700;
}
.ut-monat tbody td.ut-heute:not(.jr-abwesend):not(.ut-blocker),
.ut-monat tfoot td.ut-heute { background-color: var(--akzent-hell); }

/* Andere Abwesenheit als dezenter Blocker: geriffelte Fläche (kein Urlaub
   möglich). Fläche UND Muster — der Zustand steht nie allein in der Farbe
   (WCAG 1.4.1); der Grund im title (ohne Personalakte neutral »belegt«). */
.ut-monat .ut-blocker {
  background-color: var(--flaeche);
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 2px,
    var(--linie-kraeftig) 2px, var(--linie-kraeftig) 3.5px);
  color: var(--text-leise);
}
.ut-monat .ut-blocker .ut-feld { cursor: not-allowed; }
/* Doppelbelegung: Urlaub UND am selben Tag eine andere Abwesenheit — eine
   kleine rote Ecke oben rechts sagt »hier bitte hinsehen« (Hinweisfeld). */
.ut-monat .ut-doppel .ut-feld { position: relative; }
.ut-monat .ut-doppel .ut-feld::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 0.45rem 0.45rem 0;
  border-style: solid;
  border-color: transparent var(--fehler) transparent transparent;
}
/* Legendenkästchen für den Blocker. */
.merkmal.ut-blocker-legende {
  background-color: var(--flaeche);
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 2px,
    var(--linie-kraeftig) 2px, var(--linie-kraeftig) 3.5px);
  border: 1px solid var(--linie-kraeftig);
  min-width: 1.4rem;
}

/* =========================================================
   Das Maßsystem der Urlaubs- und Abwesenheitsseiten (Konzept 10bd)
   =========================================================
   Die breite Lesespalte (10ba) ist für die RASTER gedacht — dort stehen
   31 Spalten echter Daten. Alles andere zerfiel darin (10bc). Die Grenzen
   dafür waren aber einzeln gesetzt: 76, 68, 34, 96, 22, 15, 13 rem — ein
   Zahlenzoo, der genau das verhinderte, was er sollte: ein ruhiges Bild.

   Jetzt gilt EINE kleine Leiter, und alles bedient sich daraus:

     --lese-breit  72rem  Formulare, Personenlisten, Fließtext
     --lese-feld   32rem  ein einzelnes langes Feld (Vermerk, Bemerkung)
     --lese-datum  9.5rem ein Datumsfeld — mehr braucht »tt.mm.jjjj« nicht
     --tafel-schmal 62rem Tafeln OHNE Raster (Anträge, Eingabe) — mittig

   Dazu ein Rhythmus: --tafel-luft zwischen den Tafeln UND über der ersten,
   --kopf-luft unter jeder Überschrift — gleich, ob sie im Palettenkopf sitzt
   oder allein steht. */
:root {
  --lese-breit:  72rem;
  --lese-feld:   32rem;
  --lese-datum:   9.5rem;
  --tafel-schmal: 62rem;   /* Tafeln ohne Raster: Anträge, Eingabe (10bf) */
  --tafel-luft:  1.25rem;
  --kopf-luft:   0.6rem;
}

/* Formulare — beide Seiten, gleich breit (die Urlaubsseite trägt
   `formular-breit`, die Abwesenheitenseite `ut-eingabe`). */
.ut-abschnitt > .formular,
.ut-abschnitt > .formular.formular-breit,
.ut-abschnitt .ut-eingabe { max-width: var(--lese-breit); }
/* Die feste Spaltenbreite ist mit 10bf entfallen: Die Eingabefelder nehmen
   jetzt die Breite ihres Inhalts, wie in der Aktionsleiste oben. Datumsfelder
   behalten ein festes Maß — ein leeres Datumsfeld hat keinen Inhalt, an dem
   sich eine Breite ablesen ließe. */
/* Ein Datum braucht nur »tt.mm.jjjj« und das Kalendersymbol des Browsers —
   die Spaltenbreite der Auswahlfelder ist dafür zu viel (Konzept 10be).
   Zwei schmale Felder nebeneinander lesen sich auch als ein Zeitraum. */
.ut-abschnitt > .formular .feld-datum,
.ut-abschnitt .ut-eingabe .feld-datum { flex: 0 0 var(--lese-datum) !important; max-width: var(--lese-datum); }

/* --- Die Eingabefelder tragen das Maß der Aktionsleiste (Konzept 10bf) ---
   Kundenentscheid: Die oberste Zeile (Haus, Jahr, Monat, »Anzeigen«) hat die
   richtigen Größen — kleinere Schrift, knapperer Innenabstand, und jedes Feld
   so breit, wie sein Inhalt es verlangt (»Jahr« nur 78 px). Die Formularfelder
   waren dagegen 1 rem groß, 44 px hoch und auf Spaltenbreite gedehnt. Jetzt
   gilt in den Eingabetafeln dasselbe Maß wie oben. */
.ut-abschnitt-eingabe .feld { flex: 0 1 auto; }
.ut-abschnitt-eingabe .feld label { font-size: 0.78rem; color: var(--text-leise-satt); }
/* Ein Ankreuzfeld hat keine Beschriftungszeile. Das globale Ausrichten an der
   ZEILENunterkante half nur, solange die Nachbarfelder gleich hoch waren —
   trägt eines darunter noch einen Zusatz (»Setzt fort« zählt die möglichen
   Vorzeiträume), sackte das Häkchen unter dessen Auswahlfeld (10bk). Hier
   wird stattdessen der Beschriftungsblock der Nachbarn nachgebildet
   (2,9 Zeilen à 0,78rem + 0,3rem Abstand), dann steht das Häkchen auf der
   Höhe der Eingabefelder — gleich, was darunter noch folgt. */
.ut-abschnitt-eingabe .feldreihe > .feld-ankreuz {
  align-self: flex-start;
  padding-top: calc(2.9 * 0.78rem + 0.3rem);
  padding-bottom: 0;
}
/* Die Beschriftung eines Häkchens ist keine Feldbeschriftung, sondern der
   Text daneben — sie bleibt in Lesegröße (10bk). */
.ut-abschnitt-eingabe .ankreuz label { font-size: 0.9rem; color: var(--text); }
.ut-abschnitt-eingabe .feld select,
.ut-abschnitt-eingabe .feld input[type="text"],
.ut-abschnitt-eingabe .feld input[type="date"] {
  width: auto;
  max-width: 100%;
  font-size: 0.9rem;
  padding: 0.3rem 0.4rem;
  min-height: 2.3rem;
}
/* »Setzt fort« (Folgebescheinigung, 10bj): Die Einträge sind Zeiträume und
   damit lang. Das Feld bekommt eine eigene, großzügigere Schranke, bleibt
   aber gedeckelt — sonst schöbe ein einzelner Zeitraum die Reihe auseinander.
   `hidden` setzt abwesenheit.js; die Regel sorgt nur dafür, dass das Attribut
   auch gegen das flex-`display` der Feldreihe durchgreift. */
.ut-abschnitt-eingabe .feld-folge select { max-width: 22rem; }
/* `hidden` muss gegen das flex-`display` der Feldreihe durchgreifen — sonst
   bliebe ein als verborgen gemeldetes Feld sichtbar (10bj, 10bk). */
.ut-abschnitt-eingabe .feld[hidden] { display: none; }
/* Die Eingabetafel steht kompakt (Kundenwunsch 10bm): Sie ist ein Formular
   mit sechs kurzen Feldern, kein Fließtext.

   Der größte Posten war der Beschriftungsblock. Global hält er Platz für
   ZWEI Zeilen frei, damit eine umbrechende Beschriftung wie »Grad der
   Behinderung« die Reihe nicht verschiebt (siehe dort). Hier heißen die
   Felder »Person«, »Art«, »Von«, »Bis«, »Als« — eine Zeile genügt, und die
   zweite kostete in drei Reihen rund 54 px. */
.ut-abschnitt-eingabe .feldreihe .feld > label {
  display: block;
  min-height: 0;
  line-height: 1.25;
}
.ut-abschnitt-eingabe .feld { margin-bottom: 0.55rem; }
/* Das Häkchen bildet weiterhin den Beschriftungsblock der Nachbarn nach —
   jetzt eben den einzeiligen. */
.ut-abschnitt-eingabe .feldreihe > .feld-ankreuz {
  padding-top: calc(1.25 * 0.78rem + 0.3rem);
}
/* Eine Reihe ohne Beschriftungen richtet sich schlicht mittig aus. */
.ut-abschnitt-eingabe .feldreihe-eng { align-items: center; }
.ut-abschnitt-eingabe .feldreihe-eng > .feld,
.ut-abschnitt-eingabe .feldreihe-eng > .feld-ankreuz {
  align-self: center;
  padding-top: 0;
  margin-bottom: 0.55rem;
}
/* Die Kette der Folgebescheinigungen in der Liste je Person (10bj): eine
   ruhige Beistellung, kein Alarm — hier ist nichts zu tun, es ist belegt. */
.ut-folge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--linie);
  border-radius: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-leise-satt);
  white-space: nowrap;
}
/* Das Bemerkungsfeld ist ein Textfeld — es darf die Reihe füllen. */
.ut-abschnitt-eingabe .feld-lang { flex: 1 1 20rem; }
.ut-abschnitt-eingabe .feld-lang input[type="text"] { width: 100%; }

/* --- Schmale, mittige Tafeln (Konzept 10bf) ---
   Kundenentscheid: Die Anträge und die beiden Eingabetafeln »laufen sehr
   breit«. Sie tragen aber nur eine Handvoll Felder bzw. Karten — anders als
   die Raster, die 31 Spalten echter Daten zeigen und die Breite brauchen.
   Diese drei stehen deshalb schmaler und MITTIG; die Raster bleiben breit.
   Kombi-Klasse wegen der Kaskade (`.ut-abschnitt` steht später). */
.ut-abschnitt.ut-abschnitt-eingabe,
.ut-abschnitt.ut-abschnitt-tun {
  max-width: var(--tafel-schmal);
  margin-inline: auto;
}
.ut-abschnitt > .formular .feld-lang,
.ut-abschnitt .ut-eingabe .feld-lang {
  flex: 1 1 20rem !important;
  max-width: var(--lese-feld);
}

/* Personenlisten — dieselbe Breite wie die Formulare, damit die Kanten
   beider Tafeln übereinanderliegen. Die Begrenzung sitzt am ganzen Block,
   sonst liefen die Trennlinien quer über den leeren Rest des Bildschirms. */
.ut-abschnitt .ut-person { max-width: var(--lese-breit); }

/* --- Zwei Spalten auf breiten Schirmen (Konzept 10bi) ---
   Als einzelne Säule stand die Personenliste im leeren Raum. Ab genügend
   Breite fließen die Personen deshalb in ZWEI Spalten. Bewusst ein Grid und
   kein Spaltensatz (`columns`): Der Spaltensatz zerschnitte einen
   Personenblock mitten in seinen Vorgängen, das Grid hält ihn zusammen.
   `align-items: start` lässt unterschiedlich hohe Blöcke oben stehen, statt
   sie auf gleiche Höhe zu ziehen. */
@media (min-width: 80rem) {
  .ut-abschnitt .ut-personen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: 2.5rem;
  }
  /* In der Spalte gilt die Spaltenbreite, nicht mehr die Lesebreite. */
  .ut-abschnitt .ut-personen .ut-person { max-width: none; }
  /* Der Trennstrich gehörte zur Reihenfolge einer einzigen Säule — in zwei
     Spalten sitzt er sonst willkürlich am Spaltenkopf. Jeder Block trägt
     ihn jetzt selbst oben, außer den beiden ersten. */
  .ut-abschnitt .ut-personen .ut-person + .ut-person { border-top: none; padding-top: 0; }
  .ut-abschnitt .ut-personen .ut-person:not(:nth-child(-n+2)) {
    border-top: 1px solid var(--linie);
    padding-top: 0.6rem;
  }
}

/* Fließtext liest sich in begrenzter Zeilenlänge besser. Die Farb-Legende
   gehört dagegen zum Raster darüber und darf dessen Breite nutzen. */
.ut-abschnitt > .hinweis,
.ut-abschnitt > .leerhinweis,
.ut-abschnitt .tabellenbeschriftung { max-width: var(--lese-breit); }

/* --- Rhythmus ---
   Die Aktionsleiste klebte an der ersten Tafel (0 px), während zwischen den
   Tafeln 20 px standen. Und die Überschrift hielt mal 10, mal 8 px Abstand,
   je nachdem ob sie im Palettenkopf sass. Beides ist jetzt eine Zahl. */
.aktionsleiste + .ut-abschnitt { margin-top: var(--tafel-luft); }
/* Auch der Seitentitel hält denselben Abstand wie alles andere (vorher 12 px). */
.planungskopf-zeile + .aktionsleiste { margin-top: var(--tafel-luft); }
.ut-abschnitt { margin-bottom: var(--tafel-luft); }
.ut-abschnitt > h2 { margin: 0 0 var(--kopf-luft); }
.ut-abschnitt > .palettenkopf { margin: 0 0 var(--kopf-luft); }

/* --- Textleiter ---
   Vorher standen 16, 14,4 und 13,12 px nebeneinander, ohne dass die Größe
   etwas bedeutete. Jetzt sagt sie den Rang: Inhalt, Beiwerk, Kleingedrucktes. */
.ut-abschnitt > .hinweis,
.ut-abschnitt > .leerhinweis,
.ut-abschnitt .tabellenbeschriftung { font-size: 0.9rem; }
.ut-abschnitt .feldhinweis,
.ut-abschnitt .abw-legende,
.ut-abschnitt > .kleingedruckt { font-size: 0.82rem; }
/* Der Personenname führt eine Gruppe an — er war genauso groß wie der
   Fließtext darunter und trug deshalb keine Ordnung. */
.ut-abschnitt .ut-person-name {
  font-size: 1.05rem;
  color: var(--akzent-dunkel);
}

/* --- »Hier ist noch etwas zu tun« (Konzept 10bc) ---
   Offene Anträge sind kein Bericht, sondern eine Aufgabe. Die Tafel trägt
   deshalb die Bernstein-Sprache der Hinweise: helle Fläche, kräftige Kante
   links, Überschrift mit Zähler. Die weißen Karten darin heben sich davon ab
   — die Farbe ruft, die Karte trägt die Entscheidung. Der Ton ist derselbe
   wie beim »Neu«-Knopf (10au); die Schrift bleibt dunkel (Kontrast 10at). */
/* Kombi-Klasse: `.ut-abschnitt` steht SPÄTER in der Datei und schluckte bei
   gleicher Spezifität sonst die Fläche — dieselbe Kaskadenfalle wie beim
   kleinen Hauptknopf (10au). */
.ut-abschnitt.ut-abschnitt-tun {
  background: var(--warnung-hell);
  border-color: var(--warnung);
  /* Die Kante liegt IM Innenabstand, damit die Tafel denselben Rahmen hat
     wie die weißen daneben — ein eigener padding-left verschöbe ihren
     Inhalt gegen alle anderen (gemessen: 24 px gegen 18,4 px). */
  box-shadow: inset 5px 0 0 var(--warnung);
}
/* --- »Hier tragen Sie ein« (Konzept 10bf) ---
   Damit ergibt sich eine kleine, klare Sprache der Tafeln:
     weiß      = ansehen (Raster, Listen)
     bernstein = entscheiden (offene Anträge — es fehlt eine Antwort)
     akzent    = eintragen (Formular — hier gibt man etwas ein)
   Dezent gehalten: die Fläche ist ein Hauch Akzentfarbe, die Kante links
   nimmt dieselbe Rolle ein wie bei der Bernstein-Tafel, die Eingabefelder
   bleiben weiß und heben sich dadurch ab. Kombi-Klasse wieder wegen der
   Kaskade (`.ut-abschnitt` steht später, 10au/10bc). */
.ut-abschnitt.ut-abschnitt-eingabe {
  background: var(--akzent-hell);
  border-color: var(--linie-kraeftig);
  box-shadow: inset 5px 0 0 var(--akzent);
}
.ut-abschnitt-eingabe > .palettenkopf > h2,
.ut-abschnitt-eingabe > h2 { color: var(--akzent-dunkel); }
.ut-abschnitt-eingabe .feldhinweis { color: var(--text-leise-satt); }

.ut-abschnitt-tun > .palettenkopf > h2,
.ut-abschnitt-tun > h2 { color: var(--warnung); }
.ut-abschnitt-tun .hinweis { color: var(--text-leise-satt); }
.ut-abschnitt-tun .leerhinweis { color: var(--text-leise-satt); }
/* Der Zähler in der Überschrift als Marke — er sagt, wie viel liegt. */
.tun-zahl {
  display: inline-block;
  min-width: 1.6rem;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--warnung);
  color: #fff;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* Die Antragskarten in dieser Tafel: Fläche weiß, damit sie sich abheben. */
.ut-abschnitt-tun .befundkarte { background: var(--flaeche); }

/* --- Controlling je Haus (Konzept 10bs) ---------------------------------
   Jedes Haus ist eine Karte. Wer im Verzug ist, trägt einen kräftigen Balken
   links und eine getönte Kopfzeile — auf zwei Meter Abstand erkennbar, denn
   genau dafür ist die Seite da: »damit sofort gemahnt werden kann«.
   Die Auszeichnung liegt NIE nur in der Farbe (WCAG 1.4.1): Im Kopf steht
   »Im Verzug« im Klartext, und jeder Fristenkasten sagt seine Lage selbst. */
/* Dritter geteilter Name: `.hauskarte` gehört der Gebäudeverwaltung
   (blaue Oberkante, Schatten). Das Controlling meint eine andere Karte. */
.haustafel {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem 1.25rem 1.25rem;
  margin-top: var(--tafel-luft);
}
.haustafel > .palettenkopf { margin-bottom: 0.75rem; }
.haustafel h2 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.haustafel-verzug {
  border-color: var(--warnung);
  box-shadow: inset 5px 0 0 var(--warnung);
  padding-left: 1.6rem;
}

/* Die zwei Fristenkästen nebeneinander, ab genügend Breite. */
.staende {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.stand {
  border: 1px solid var(--linie);
  border-left: 4px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 0.6rem 0.85rem;
  background: #fff;
}
.stand p { margin: 0; }
.stand-kopf { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.stand-marke {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--linie);
}
.stand-monat  { font-size: 0.9rem; color: var(--text-leise-satt); margin-top: 0.15rem; }
.stand-text   { font-size: 0.9rem; margin-top: 0.35rem; }
.stand-zusatz { font-size: 0.78rem; color: var(--text-leise-satt); margin-top: 0.3rem; }

.stand-gut       { border-left-color: var(--erfolg); }
.stand-gut .stand-marke { border-color: var(--erfolg); color: var(--erfolg); }
.stand-verzug    { border-left-color: var(--warnung); background: var(--warnung-hell); }
.stand-verzug .stand-marke { border-color: var(--warnung); color: var(--warnung); background: #fff; }
.stand-offen     { border-left-color: var(--logo-blau); }
.stand-unbekannt { border-left-color: var(--text-leise); }

.zuletzt { font-size: 0.82rem; color: var(--text-leise-satt); margin: 0.75rem 0 0; }

/* Die Ampel für die kommenden Monate (10bt). Ein Licht allein wäre eine
   Farbaussage — daneben steht darum immer im Klartext, wie viel Zeit bleibt
   (WCAG 1.4.1). */
.ampelreihe {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* ACHTUNG, hier stand bis heute schlicht `.ampel` — und damit derselbe Name,
   den der DIENSTPLAN seit Phase 5 für seine Befundampel benutzt (»0 Verstöße
   / 0 Warnungen / 1 Hinweis«, runde Pillen, Zeile 1618). Weil diese Regel
   später in der Datei steht und gleich stark ist, gewann sie: Aus den
   schmalen Pillen wurden 14rem breite Kästen, die untereinander umbrachen.
   Der Auftraggeber hat es gesehen, bevor eine Probe es sah.
   Zwei Bausteine, zwei Namen. `ampelstand` gehört dem Controlling. */
.ampelstand {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1 1 14rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: #fff;
  font-size: 0.9rem;
}
.ampelstand-licht {
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.2rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.ampelstand-text { min-width: 0; }
/* Der Monatsverweis sitzt auf getönter Fläche (gelb bzw. rot). Mit der
   allgemeinen Verweisfarbe kam er dort auf 3,96:1 — knapp unter der
   Schwelle. Der dunklere Ton bringt ihn auf 6,96:1 und gilt auch für den
   besuchten Zustand, weil eine Klasse jetzt stärker ist als die
   Grundregel (siehe die Verweisfarben ganz oben). */
.ampelstand-text a { color: var(--akzent-dunkel); }
.ampelstand-gruen .ampelstand-licht { background: var(--erfolg); }
.ampelstand-gelb  .ampelstand-licht { background: #e0a800; }
.ampelstand-rot   .ampelstand-licht { background: var(--fehler); }
.ampelstand-grau  .ampelstand-licht { background: var(--text-leise); }
.ampelstand-gelb { border-color: #e0a800; background: var(--warnung-hell); }
.ampelstand-rot  { border-color: var(--fehler); background: var(--fehler-hell); }

/* Ausgeschriebene Punkte des Hauses: Marke links, Text rechts. */
.haustafel-titel { margin: 1rem 0 0.35rem; font-size: 0.95rem; }
.punktliste { list-style: none; margin: 0; padding: 0; }
.punktliste li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--linie);
  font-size: 0.9rem;
}
.punktliste li:first-child { border-top: none; }
.punkt-text { min-width: 0; }

/* Die Regelverstöße stehen gefaltet — bei sechs Häusern wäre die Seite sonst
   nicht mehr zu überblicken. Beim Haus im Verzug klappt sie von selbst auf. */
.befundgruppe { margin-top: 0.75rem; }
.befundgruppe > summary {
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  background: var(--akzent-hell);
  border-radius: var(--radius-klein);
  font-size: 0.9rem;
}
.befundmonat { margin: 0.9rem 0 0.35rem; font-size: 0.95rem; }
/* Auch hier ein geteilter Name: `.befundliste` gehört seit Phase 5 dem
   Dienstplan (Regelbefunde als Karten). Diese Liste ist etwas anderes —
   die ausgeschriebenen Punkte eines Hauses. Die `li`-Regel hätte sonst
   auch die Befundkarten des Dienstplans getroffen. */
.befundzeilen { list-style: none; margin: 0; padding: 0; }
.befundzeilen li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-top: 1px solid var(--linie);
  font-size: 0.9rem;
}
.befundzeilen-text { min-width: 0; }
.ohnehaus-kopf { margin-top: 2rem; }

/* --- Krankenstand auf der Übersicht (Konzept 10bn) ---
   Eine Liste, in der eine Zeile mehr sagt als die anderen: Wer die sechs
   Wochen voll hat, kostet ab dem Folgetag kein Entgelt mehr, sondern
   Krankengeld — das muss die Lohnbuchhaltung im Vorbeigehen sehen. Ton
   statt Farbfleck: ein Balken links und eine leicht getönte Fläche, wie bei
   den offenen Anträgen (10bc). Die Auszeichnung steht NIE nur in der Farbe —
   in der Spalte »Sechs Wochen« steht das Datum fett (WCAG 1.4.1). */
.tabelle .ks-langzeit > * { background: var(--warnung-hell); }
.tabelle .ks-langzeit > :first-child { box-shadow: inset 4px 0 0 var(--warnung); }
/* Zusätze zur eigentlichen Angabe — Anzahl der Bescheinigungen, verstrichene
   Tage, Krankengeld-Beginn. Sie stehen darunter, nicht daneben, sonst
   zerriebe die Zeile. */
.ks-zusatz {
  display: block;
  font-size: 0.78rem;
  color: var(--text-leise-satt);
  font-variant-numeric: normal;
}
/* Das Vermerkfeld braucht keine 1600 px — die Knöpfe sollen daneben stehen. */
.ut-antrag-vermerk { max-width: 34rem; }

/* --- Abwesenheitstabelle je Haus, alle Arten (Konzept 10ax) ---
   Dasselbe Raster wie die Urlaubstabelle, aber jedes belegte Feld trägt die
   Farbe seiner Art (Klasse .abw-{id} aus dem nonce-gesicherten Kopf-Stilblock,
   Fehlzeit::stilRegeln) und ein Kürzel. Das Kürzel bleibt dunkel (--text),
   damit der Kontrast auf der hellen Artfläche trägt (10at) — die Farbe ordnet
   nur ein. Etwas breitere Felder, weil Kürzel bis zu drei Zeichen haben. */
.abw-monat .jr-tag { width: 1.9rem; min-width: 1.9rem; max-width: 1.9rem; }

/* Wächst das Fenster, wachsen die TAGE — nicht die Namensspalte (Konzept 10ba,
   dasselbe Prinzip wie im Dienstplan). Ohne das schluckte die Namensspalte auf
   einem breiten Bildschirm den ganzen Zugewinn, und die Tagesfelder blieben
   eng. `table-layout: fixed` verteilt den Rest gleichmäßig auf die Tage; die
   Mindestbreite der Tabelle ersetzt die Mindestbreiten der Zellen — darunter
   blättert der Bereich seitlich wie gehabt. */
.ut-monat, .abw-monat { width: 100%; table-layout: fixed; }
.ut-monat { min-width: 61rem; }
.abw-monat { min-width: 70rem; }
.ut-monat .jr-name, .abw-monat .jr-name { width: 11rem; }
.ut-monat .jr-tag, .abw-monat .jr-tag { width: auto; min-width: 0; max-width: none; }

/* Zweite Sicherung gegen sehr lange Namen (Konzept 10bb): Die Kurzform kürzt
   den VORnamen — ein sehr langer NACHname bliebe lang und schöbe das Raster
   auseinander. Deshalb endet der Name notfalls mit »…«; der volle Name steht
   im Maus-Hinweis und für Vorleseprogramme im Quelltext. So ist die
   Spaltenbreite garantiert, egal wie der Name lautet. */
.ut-monat .jr-name > a, .abw-monat .jr-name > a {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.abw-monat .ut-feld { font-size: 0.62rem; font-weight: 700; color: var(--text); }
.abw-monat td.abw-zelle { border-width: 1px; border-style: solid; }
.abw-monat td.abw-zelle .ut-feld { color: var(--text); }

/* Die Farb-und-Kürzel-Legende unter dem Raster (der »bunte« Überblick über die
   Arten). Jeder Chip trägt seine Artfarbe als Fläche und Rand, das Kürzel
   dunkel. */
/* Die Legende als Reihe von Paaren (Konzept 10bg): Symbol und Bezeichnung
   gehören zusammen und dürfen nie durch einen Zeilenumbruch getrennt werden.
   Als flex-Reihe steht jedes Paar für sich, der Abstand ersetzt das frühere
   Trennzeichen »·«. */
.abw-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  line-height: 1.6;
}
.abw-legende-paar { white-space: nowrap; }
.abw-legende .jr-legende {
  border: 1px solid;
  border-radius: var(--radius-klein);
  color: var(--text);
  margin-right: 0.15rem;
}

/* Liste je Person (Bearbeiten/Entfernen). Ein Vorgang je Zeile: Kürzel-Chip,
   Text, rechts die zwei Knöpfe. */
.ut-person { margin-bottom: 0.9rem; }
.ut-person + .ut-person { border-top: 1px solid var(--linie); padding-top: 0.6rem; }
.ut-person-name { margin: 0 0 0.35rem; font-size: 1rem; }
.ut-vorgaenge { list-style: none; margin: 0; padding: 0; }
.ut-vorgang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
}
.ut-vorgang + .ut-vorgang { border-top: 1px solid var(--linie); }
.ut-vorgang .jr-legende { border: 1px solid; border-radius: var(--radius-klein); color: var(--text); }
.ut-vorgang-text { flex: 1 1 12rem; }
.ut-vorgang-tat { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.ut-entfernen { margin: 0; display: inline; }

/* Statuszeile des direkten Klick-Eintragens (urlaub.js). */
.ut-status {
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.8rem;
  background: var(--akzent-hell);
  border-radius: var(--radius-klein);
  font-size: 0.92rem;
}

/* --- Vorgemerkt, noch nicht gespeichert (Speicher-Knopf-Modell, Konzept 10an).
       Neu = grüner Rahmen (kommt hinzu), Streichung = rot durchgestrichen (fällt
       weg). Beides trägt Fläche UND Muster/Zeichen, nicht nur Farbe (WCAG). --- */
.ut-feld.ut-pending-add {
  background-color: var(--urlaub-hell);
  box-shadow: inset 0 0 0 2px var(--urlaub-rand);
  font-weight: 700;
}
.ut-feld.ut-pending-weg {
  background-color: var(--fehler-hell);
  box-shadow: inset 0 0 0 2px var(--fehler);
  color: var(--fehler);
  text-decoration: line-through;
  font-weight: 700;
}
/* Die Speicherleiste erscheint (per urlaub.js), sobald etwas vorgemerkt ist.
   Das [hidden]-Sonderregel: eine Klasse mit display:flex schlägt sonst das
   voreingestellte display:none des hidden-Attributs (Spezifität) — dann stünde
   die Leiste immer da. */
.ut-speichern-leiste[hidden] { display: none; }
.ut-speichern-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.85rem;
  background: var(--akzent-hell);
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius-klein);
}
.ut-speichern-leiste .ut-vorgemerkt { font-weight: 600; }
.ut-raster-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-left: auto; }
.ut-hinweise { margin-bottom: 1.25rem; }

/* Die Abschnitte der Urlaubsseiten als ruhige Tafeln (Konzept 10am; seit 10ao
   auch die Planungsseite je Person): Die Abschnitte sollen als Teile EINER
   Seite lesen, nicht als lose Blöcke im Grau. Weiße Fläche, gleiche Rundung,
   gleicher Abstand — dieselbe Sprache wie die Aktionsleiste oben. */
.ut-abschnitt {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 1rem 1.15rem 1.25rem;
  margin: 0 0 1.25rem;
}
.ut-abschnitt > h2 { margin-top: 0; }

/* Kompakte Antragskarten (Konzept 10aw): zwei Zeilen statt sieben. Die Fakten
   (Person, Zeitraum, Tage, Rest) stehen in einer Zeile, die Entscheidung
   (Vermerk + zwei Knöpfe) in der nächsten. So bleibt die Liste auch mit vielen
   offenen Anträgen kurz. Der Freitext und das »beantragt am« sind entfallen. */
.ut-antrag { padding: 0.5rem 0.8rem; margin-bottom: 0.45rem; }
.ut-antrag-zeile {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}
.ut-antrag-zeile .befundgrad { align-self: center; }
.ut-antrag-fakt { font-size: 0.9rem; color: var(--text-leise-satt); }
.ut-antrag-rest { white-space: nowrap; }
/* Der Konto-Verweis gehört zu den Angaben davor. Er stand bis 10bc rechts
   außen (`margin-left: auto`) — auf einem breiten Bildschirm lagen dann
   1700 px zwischen dem Namen und ihm. */
.ut-antrag-kontolink { font-size: 0.85rem; }
.ut-antrag-tat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.ut-antrag-vermerk {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--feldrand);
  border-radius: var(--radius-klein);
}
.ut-antrag-vermerk:hover { border-color: var(--text-leise); }
/* `.knopf-haupt` trägt volle Breite (Ein-Knopf-Formulare) — inline in der
   Entscheidungszeile braucht es wieder die eigene Breite (10h-Falle). */
.ut-antrag-tat .knopf { flex: 0 0 auto; width: auto; }
/* Die PDF-Knöpfe wohnen jetzt rechts im Kopf der Rastertafel statt als loser
   Streifen darüber — ein Kopf, in dem Titel, Hilfe und Ausgabe zusammenstehen. */
.ut-ausgabe { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }

/* Eine ganze Tafel als Aufklapper (Konzept 10ap): Die Brückentage stehen
   zugeklappt am Seitenende — die Überschrift bleibt sichtbar, der Inhalt
   kommt erst auf Klick. Der Pfeil dreht sich; kein Browser-Dreieck daneben. */
.ut-klappe > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.ut-klappe > summary::-webkit-details-marker { display: none; }
.ut-klappe > summary h2 { margin: 0; }
.ut-klappe > summary .ut-klappe-zeig {
  margin-left: auto;
  color: var(--text-leise);
  font-size: 0.9rem;
  transition: transform 0.15s ease;
}
.ut-klappe[open] > summary { margin-bottom: 0.6rem; }
.ut-klappe[open] > summary .ut-klappe-zeig { transform: rotate(90deg); }
.ut-klappe > summary:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Kompakte Schlusszeile des Personen-Formulars: Bemerkung wächst, die Knöpfe
   stehen rechts daneben auf Höhe des Feldes — zwei Zeilen statt vier.
   Selektorstärke bewusst über .formular: die späteren .formular-eng-Regeln
   dürfen den Null-Abstand nicht zurückdrehen. */
.formular .ut-bemerkzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
}
.formular .ut-bemerkzeile .feld { flex: 1 1 20rem; min-width: 14rem; margin-bottom: 0; }
/* width: auto — `.knopf-haupt` trägt volle Breite für Ein-Knopf-Formulare
   (Anmeldung); in einer Flex-Zeile drängte er sonst auf eine eigene Zeile
   (derselbe Fall wie beim .formularabschluss, Kapitel 10h). */
.formular .ut-bemerkzeile .knopf { flex: 0 0 auto; width: auto; white-space: nowrap; }
/* Die Tafel bringt den Rahmen schon mit — der Vorschaukasten darin braucht
   keinen zweiten Kasten-Rand, nur seine getönte Fläche. */
.ut-abschnitt .vorschaukasten { margin-bottom: 0; }
/* Innerhalb der Tafel trägt der Rasterbereich links/rechts keinen doppelten
   Rand gegen die Tafelkante. */
.ut-abschnitt > .tabellenbereich { margin-top: 0.2rem; }

.blaetterpaar { display: inline-flex; gap: 0.35rem; margin-left: auto; }

/* Der Speichern-Knopf des Sicherungsplans steht am Ende der Reihe und richtet
   sich nach seinem Text — als nackter Flex-Posten wurde er über die ganze
   Zeile gezogen (10bq). Ein Knopf, der so breit ist wie das Formular, sieht
   aus wie eine Fläche, nicht wie eine Handlung. */
.plan-knopf { display: inline-flex; align-self: flex-end; padding-bottom: 0.1rem; }
.plan-knopf .knopf { width: auto; }
/* `hidden` muss auch hier gegen das flex-display durchgreifen. */
.feldreihe > .steuerfeld[hidden] { display: none; }

/* Die Live-Vorschau der Auswahl (urlaub.js, fetch). Ohne JavaScript bleibt sie
   verborgen; »Zuerst rechnen« liefert dieselben Zahlen serverseitig. */
.ut-livebox {
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--linie-kraeftig);
  border-radius: var(--radius-klein);
  background: var(--hintergrund);
  font-size: 0.9rem;
}
.ut-livebox .ut-live-zahlen { font-weight: 700; }
.ut-livebox .ut-live-hinweis { display: block; margin-top: 0.3rem; color: var(--warnung); }

/* Kompaktes »Urlaub eintragen«: alle Felder in EINER Reihe (bricht auf schmalen
   Schirmen sauber um). Volle Breite statt der 58rem-Lesebreite, damit die Reihe
   Platz hat. Das Halber-Tag-Feld trägt oben dieselbe Beschriftung wie die
   Nachbarn, das Kästchen sitzt darunter auf Höhe der Eingaben. */
.formular-eng { max-width: none; }
.formular-eng .feld { margin-bottom: 0.5rem; }
/* »Halber Tag« als Kästchen in der Knopfleiste: links das Kästchen, die Knöpfe
   rechts (margin-right:auto schiebt sie hinüber). So bilden die vier Kernfelder
   oben eine saubere Reihe, statt dass ein fünftes Feld allein umbricht. */
.ut-formabschluss { align-items: center; gap: 0.75rem; }
.ut-halbtag { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 400; margin-right: auto; }
.ut-halbtag input { width: 1.2rem; height: 1.2rem; margin: 0; }

/* --- »Urlaube je Person«: nach Person gruppiert, je Gruppe eine Summenzeile
       (Kundenwunsch 23.07.2026). Kein wechselndes Zebra — die Gruppen ordnen;
       die Tage stehen rechtsbündig, damit sich die Summe leicht ablesen lässt. */
.urlaube-liste tbody tr:nth-child(even) { background: transparent; }
.urlaube-liste th.zahl,
.urlaube-liste td.zahl { text-align: right; }
/* Die Aktionen (Bearbeiten/Entfernen) stehen in EINEM Flex-Behälter — nicht die
   td selbst zum Flex machen: eine display:flex-Zelle fällt aus dem Tabellenraster
   und zieht falsche Linien (Kundenbefund 23.07.2026). */
.ut-aktionen { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
/* Personenband: ruhige Fläche und Titelschrift, aber KEIN Trennstrich oben —
   die kräftige Linie UNTER der Summenzeile trennt die Gruppen; ein zweiter Strich
   oben ergäbe die vom Kunden bemängelte Doppellinie. */
.urlaube-liste .gruppenkopf th {
  background: var(--hintergrund);
  font-family: var(--schrift-titel);
  font-size: 0.95rem;
  padding-top: 0.55rem;
}
.urlaube-liste .summenzeile th,
.urlaube-liste .summenzeile td {
  background: var(--akzent-hell);
  border-bottom: 2px solid var(--linie-kraeftig);
}
.urlaube-liste .summenzeile th { font-weight: 700; }
.urlaube-liste .summenzeile .ut-summe { color: var(--text-leise); }
.urlaube-liste .summenzeile .ut-summe strong { color: var(--text); }
/* Ein ungültiger (Ende vor Beginn) oder nicht rechenbarer (kein Vertrag)
   Zeitraum — kein stilles »0«, sondern ein sichtbarer Hinweis (Regel 26). */
.ut-ungueltig { color: var(--fehler); font-weight: 700; }
.urlaube-liste .ut-problemzeile td { background: var(--fehler-hell); }

/* Die Urlaubstöpfe: der Rechenweg steht in der Zeilenüberschrift, der
   Untertitel darf sie nicht auseinanderziehen. */
.tabelle th .unterzeile {
  display: block;
  margin-top: 0.1rem;
  font-weight: 400;
  font-size: 0.78rem;
  white-space: normal;
}

/* `.knopf-haupt` trägt `width: 100%` für schmale Formulare, die aus einem
   einzigen Knopf bestehen — die Anmeldung etwa. In einem `.formularabschluss`
   ist das falsch: Der ist eine WAAGERECHTE LEISTE (`display: flex`), und ein
   Kind mit `width: 100%` nimmt dort die ganze Zeile ein und drängt jeden
   Nachbarn in die nächste. »Genehmigen« stand dadurch über die volle Breite,
   »Ablehnen« darunter; dasselbe traf »Speichern« und »Abbrechen« in der
   Fehlzeiten-, Benutzer- und Mitarbeitermaske.
   Derselbe Fehler wie bei dem 970 px breiten Knopf aus Kapitel 10h, nur eine
   Ebene tiefer: nicht der Knopf steht am falschen Ort, sondern seine Breite.
   Wer die volle Breite braucht, nimmt weiterhin `.knopf-breit`. */
.formularabschluss .knopf { width: auto; }
.formularabschluss .knopf-breit { width: 100%; }

/* ==========================================================================
   Phase 7 — Planungsseite einer Person
   ========================================================================== */

.kacheln-schmal { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.9rem; }
.kennzahl-kachel { padding: 1rem 1.1rem; }
.kennzahl-wert {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--akzent-dunkel);
  font-variant-numeric: tabular-nums;
}
.kennzahl-text { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--text-leise); }
.kennzahl-warnung .kennzahl-wert { color: var(--warnung); }

/* Farbige Kennzahl-Kacheln (Konzept 10aq) — dieselbe Farbsprache wie überall:
   Urlaub grün (satt = Bestand, hell = verbraucht, Umriss = offen/beantragt),
   Verfallenes rot, andere Abwesenheiten neutral grau. Die Zahl trägt die
   Aussage, die Fläche ordnet nur ein. */
.kennzahl-kachel.k-urlaub { background: var(--urlaub-flaeche); }
.kennzahl-kachel.k-urlaub .kennzahl-wert { color: var(--urlaub); }
.kennzahl-kachel.k-urlaub-hell { background: var(--urlaub-hell); }
.kennzahl-kachel.k-urlaub-hell .kennzahl-wert { color: var(--urlaub); }
.kennzahl-kachel.k-offen { box-shadow: var(--schatten), inset 0 0 0 2px var(--urlaub-rand); }
.kennzahl-kachel.k-offen .kennzahl-wert { color: var(--urlaub); }
.kennzahl-kachel.k-verfallen { background: var(--fehler-hell); }
.kennzahl-kachel.k-verfallen .kennzahl-wert { color: var(--fehler); }
.kennzahl-kachel.k-andere { background: var(--d-abw); }
.kennzahl-kachel.k-andere .kennzahl-wert { color: var(--d-abw-rand); }

/* Auf getoenten Kacheln reicht das helle --text-leise nicht fuer 4.5:1 (10at). */
.kennzahl-kachel.k-urlaub .kennzahl-text,
.kennzahl-kachel.k-urlaub-hell .kennzahl-text,
.kennzahl-kachel.k-verfallen .kennzahl-text,
.kennzahl-kachel.k-andere .kennzahl-text { color: var(--text-leise-satt); }

/* Nebenangabe in einer Seitenüberschrift (z. B. die Personalnummer) — leiser
   und kleiner als der Titel, bricht nicht mitten in der Klammer um. */
.h1-nebenzeile { font-size: 1.05rem; font-weight: 400; color: var(--text-leise); white-space: nowrap; }

.vorschaukasten {
  background: var(--akzent-hell);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 1.3rem;
  margin: 1rem 0 1.5rem;
}
.vorschaukasten h3 { margin-top: 0; }
.vorschaukasten .kachel { box-shadow: none; border: 1px solid var(--linie); }

/* --- Brückentagskarten --- */
.bruecke-wirkung {
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bruecke-kosten, .bruecke-gewinn {
  display: inline-block;
  min-width: 2.4rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-klein);
  text-align: center;
  font-size: 1.4rem;
}
.bruecke-kosten { background: var(--hintergrund); color: var(--text-leise); border: 1px solid var(--linie-kraeftig); }
.bruecke-gewinn { background: var(--erfolg-hell); color: var(--erfolg); border: 1px solid var(--erfolg); }
.bruecke-pfeil { color: var(--text-leise); font-size: 1.2rem; }
.bruecke-text { margin: 0 0 0.5rem; }
.bruecke-anlass { margin: 0.4rem 0 0; }
.daten-zeile { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--text-leise); }

/* --- Jahreskalender: 12 Zeilen, 31 Spalten --- */
.jahreskalender { border-collapse: separate; border-spacing: 0; }
.jahreskalender th, .jahreskalender td { padding: 0; border: 1px solid var(--linie); }
/* Wie im Jahresraster: weisse Kopfschrift zuruecksetzen, sonst steht sie auf
   heller Flaeche unsichtbar. */
.jahreskalender thead th { color: var(--text); background: var(--hintergrund); }

.jahreskalender .jk-monat {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--flaeche);
  text-align: left;
  padding: 0.3rem 0.7rem;
  min-width: 7.5rem;
  white-space: nowrap;
  font-size: 0.88rem;
  border-right: 2px solid var(--linie-kraeftig);
}
.jahreskalender thead .jk-monat { z-index: 3; background: var(--hintergrund); }

.jahreskalender .jk-tag {
  width: 1.9rem;
  min-width: 1.9rem;
  max-width: 1.9rem;
  overflow: hidden;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.75rem;
  height: 1.75rem;
  font-variant-numeric: tabular-nums;
}
.jahreskalender .jk-summe {
  min-width: 3.5rem;
  text-align: center;
  font-size: 0.8rem;
  padding: 0 0.4rem;
  background: var(--hintergrund);
  font-variant-numeric: tabular-nums;
}
/* Der Kalender dient nur der Auskunft (Konzept 10ar) — nichts ist anklickbar;
   der Tagestext (title) nennt alles im Einzelnen. */
.jahreskalender abbr {
  text-decoration: none;
  border: none;
  cursor: help;
  display: block;
  width: 100%;
  height: 100%;
}

.jahreskalender .jk-leer { background: repeating-linear-gradient(
  45deg, #f7f8f9, #f7f8f9 3px, #eceef0 3px, #eceef0 6px); }
.jahreskalender .wochenende { background-color: var(--wochenende); }
.jk-feiertag { background-color: #e4ecf4; color: var(--akzent-dunkel); }
/* 24./31.12.: nach § 12 Abs. 2 RTV frei, aber kein gesetzlicher Feiertag —
   deshalb eine eigene Kennzeichnung und nicht dieselbe wie beim Feiertag. */
.jk-besonderer-tag {
  background-color: #eef3e8;
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 4px, rgba(47, 107, 51, 0.16) 4px, rgba(47, 107, 51, 0.16) 8px);
}
.jk-frei { background-color: #f2f2f2; color: var(--text-leise); }

/* Lagen-Chips (Konzept 10ar): Die Marke wohnt auf einem Chip IN der Zelle,
   nicht auf der Zelle selbst — so lassen sich Dienste, Urlaube und andere
   Abwesenheiten einzeln ein- und ausblenden, ohne die Kalender-Tönung
   (Wochenende, Feiertag, frei) zu verlieren. Dieselbe Farbsprache wie überall:
   Urlaub grün, andere Abwesenheiten grau, Dienste gelb; Schraffur = beantragt.
   Serverseitig trägt genau EIN Chip je Tag `jk-zeigt` (Fehlzeit vor Dienst,
   wie im Dienstplanraster); kalender.js wählt beim Umschalten neu. */
.jk-chip-dienst { background-color: var(--d-fruh); color: var(--d-fruh-text); }
.jk-chip-abw    { background-color: var(--d-abw); color: var(--d-abw-text); }
.jk-chip-abw.jk-chip-beantragt {
  background-color: var(--flaeche);
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 3px, rgba(107, 119, 128, 0.30) 3px, rgba(107, 119, 128, 0.30) 6px);
}
.jk-chip-urlaub { background-color: var(--urlaub-flaeche); color: var(--urlaub); }
.jk-chip-urlaub.jk-chip-beantragt {
  background-color: var(--urlaub-hell);
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 3px, rgba(21, 87, 36, 0.30) 3px, rgba(21, 87, 36, 0.30) 6px);
}
.jahreskalender td .jk-chip {
  display: none;
  width: 100%;
  height: 100%;
  line-height: 1.75rem;
  font-weight: 700;
}
.jahreskalender td .jk-chip.jk-zeigt { display: block; }
/* Zwei Dienste an einem Tag (Doppeldienst/zweites Haus): beide Kürzel
   gestapelt in der Zelle — kleiner, aber vollständig (Konzept 10ar). */
.jahreskalender td .jk-chip-zwei.jk-zeigt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
  font-size: 0.55rem;
}

/* Die Umschalterleiste (nur mit JavaScript sichtbar — ohne sie zeigt der
   Kalender einfach alles, wie bisher). Gedrückt = Lage eingeblendet. */
.jk-schalter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; }
.jk-schalter .jk-schalter-wort { font-size: 0.85rem; color: var(--text-leise); margin-right: 0.2rem; }
.jk-schalter .knopf[aria-pressed="true"] {
  background-color: var(--akzent);
  border-color: var(--akzent-dunkel);
  color: #fff;
}

/* Mehrere Abwesenheiten am selben Tag: dieselbe rote Ecke wie in der
   Urlaubstabelle (ut-doppel) — der Tagestext nennt alle (10j-offen). Sind
   alle Abwesenheits-Lagen ausgeblendet, verschwindet auch die Ecke
   (jk-doppel-aus, von kalender.js gesetzt). */
.jahreskalender .jk-doppel { position: relative; }
.jahreskalender .jk-doppel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 0.45rem 0.45rem 0;
  border-style: solid;
  border-color: transparent var(--fehler) transparent transparent;
  pointer-events: none;
}
.jahreskalender .jk-doppel.jk-doppel-aus::after { display: none; }
.jahreskalender .jk-heute { box-shadow: inset 0 0 0 2px var(--akzent-dunkel); }
.jk-legende { font-weight: 700; min-width: 1.9rem; text-align: center; }

/* Die Daten-Legende unter dem Kalender: die GENAUEN Dienste und
   Abwesenheitsarten dieses Jahres (Konzept 10ar) — je Zeile eine Gruppe. */
.jk-datenlegende { margin-top: 0.5rem; }
.jk-datenlegende p { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--text-leise); }
.jk-datenlegende .merkmal { margin-right: 0.15rem; }

/* ==========================================================================
   Phase 8 — Arbeitszeitkonto
   ========================================================================== */

/* Plus und Minus stehen nie allein in der Farbe: Das Vorzeichen trägt die
   Aussage, die Farbe verstärkt sie nur (WCAG 1.4.1). */
.zk-minus { color: var(--fehler); }
.zk-plus  { color: var(--erfolg); }
.tabelle tr.zk-abgeschlossen { background-color: var(--hintergrund); }
.tabelle tr.zk-abgeschlossen th[scope="row"] { font-style: italic; }
.zk-ohne-daten { color: var(--text-leise); }

/* ==========================================================================
   Phase 9 — Zuschläge und Abrechnung
   ========================================================================== */

/* Die Zeitscheiben einer Schicht: kleine Blöcke, die zusammen die Schicht
   ergeben. Sie stehen in der breitesten Spalte und dürfen umbrechen. */
.scheibenspalte { min-width: 22rem; }
.scheibe {
  display: inline-block;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 0.05rem 0.4rem;
  margin: 0 0.25rem 0.25rem 0;
  font-size: 0.78rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.scheibe-zuschlag { background-color: var(--d-nacht); border-color: var(--d-nacht-rand); }

/* ==========================================================================
   Phase 11 — Arbeitsvorrat auf der Startseite
   ========================================================================== */

/* Die Zahl im Arbeitsvorrat.

   ACHTUNG: Hier stand zuerst `.befundmarke`. Die Klasse sieht richtig aus,
   ist aber `position: absolute` und für die Ecke einer Planzelle gemacht —
   in einer Tabelle sprangen alle Marken in die obere linke Ecke der Seite.
   Eine Klasse, die im Namen passt, passt deshalb noch lange nicht in der
   Wirkung. */
.vorratszahl {
  display: inline-block;
  min-width: 1.9rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: #fff;
}
.vorratszahl-dringend { background-color: var(--fehler); }
.vorratszahl-offen    { background-color: var(--warnung); }
/* Nichts zu tun: keine Farbe, aber auch keine Auszeichnung — die Null soll
   sich nicht wichtiger machen, als sie ist. */
.vorratszahl-ruhig {
  background-color: transparent;
  color: var(--text-leise);
  font-weight: 400;
}
/* Nicht ermittelbar. Bewusst nicht grün und nicht rot: Der Zustand ist
   weder gut noch schlecht, sondern unbekannt (LIESMICH 26 und 30). */
.vorratszahl-unklar {
  background-color: transparent;
  border: 1px dashed var(--linie);
  color: var(--text-leise);
  font-weight: 400;
  min-width: 0;
}

/* Die Spaltenüberschriften sind kurz; ohne das brechen »Zu tun« und
   »Geprüft« mitten im Wort um. */
.arbeitsvorrat th[scope="col"] { white-space: nowrap; }
.arbeitsvorrat .zahl { width: 6rem; }

/* Der Knopf mit ungelesenen Nachrichten in der Kopfzeile. Die Zahl steht
   im Text, nicht nur in der Farbe — sonst wäre sie für Vorlesewerkzeuge
   stumm (Konzept 6.5). Die Farbe ist die Zugabe, nicht die Aussage. */
/* Ruhezustand: helle Bernstein-Fläche mit dunklem Bernstein-Text und -Rand
   (dieselbe »Hinweis«-Sprache wie die Kennzahl-Kacheln, 6,4:1). Das frühere
   satte Braun (--warnung als FÜLLUNG) war ein dunkler Klotz zwischen den hellen
   Umriss-Knöpfen daneben — die Zahl trägt die Aussage, nicht die Wucht der
   Fläche (Konzept 10au). Beim Überfahren füllt sich der Knopf voll (7,5:1). */
.knopf-neu {
  background-color: var(--warnung-hell);
  border-color: var(--warnung);
  color: var(--warnung);
}
.knopf-neu:hover, .knopf-neu:focus {
  background-color: var(--warnung);
  border-color: var(--warnung);
  color: #fff;
}

/* --- Tagesübersicht (Mehrfachgebäude-Sicht, Konzept 5.1) --- */
/* Die Marke »abwesend: K« steht in der schmalen Dienst-Spalte neben den
   Kacheln. Ohne das bricht die Pillenform über drei Zeilen um und wird
   unleserlich; die Tabelle liegt ohnehin in einem blätterbaren Bereich. */
.tagesmarke { white-space: nowrap; }

/* --- Fehler am Feld (Konzept 6.5, Phase 12) --- */
/* Die Meldung steht unmittelbar unter dem betroffenen Feld und beginnt mit
   dem Wort »Fehler:« — die Farbe ist die Zugabe, nicht die Aussage.
   #721c24 auf Weiß: 11,0:1. */
.feldfehler {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  color: var(--fehler);
}
/* Das betroffene Feld trägt einen kräftigen Fehlerrahmen (11,0:1 — weit
   über den 3:1 für Bedienelemente). Nur echte Eingabeelemente: Der
   Selektor bleibt eng, damit kein Kasten mit zufälligem aria-invalid
   einen Rahmen erbt. */
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--fehler);
  border-width: 2px;
}
/* Die Einträge des Übersichtskastens sind Sprunglinks auf das Feld —
   in der Kastenfarbe, unterstrichen wie jeder Verweis. */
.fehlerkasten a { color: inherit; }

/* =========================================================
   Der ganze Monat auf einen Blick (dritte Kundendurchsicht, 22.07.2026)
   =========================================================
   Ziel: Auf einem Notebook in Vollbild stehen alle 31 Tage ohne
   seitliches Blättern. Drei Hebel: Die Plan-Seiten dürfen breiter als
   die Lesespalte (.inhalt-breit, gesetzt von plan, plan_woche und der
   Druckansicht), die Namensspalte wird kompakter, und Tages- wie
   Summenspalten rücken enger zusammen. Die Wochensicht behält ihre
   breiten Spalten — deshalb ist die Tagesbreite auf
   :not(.dienstplan-woche) begrenzt. */
.inhalt-breit { max-width: 120rem; }

/* Fester Spaltenplan (vierte Kundendurchsicht): Wächst das Fenster,
   wachsen die TAGE — nicht die Namensspalte, die davon nichts hat.
   table-layout: fixed verteilt den Rest GLEICHMÄSSIG auf alle Spalten
   ohne Breitenangabe (die Tage); Person, Std./Wo. und Summen sind fix.
   Die Mindestbreite der Tabelle ersetzt dabei die Mindestbreiten der
   Zellen — unter ihr blättert das Raster wie gehabt seitlich. */
/* calc(100% − 3px): Die feste Spaltenverteilung rundet auf Subpixel und
   ragte sonst um 1–4 px über den Blätterbereich — das zeichnete einen
   nutzlosen Scrollbalken unter das volle Raster. */
.dienstplan { width: calc(100% - 3px); table-layout: fixed; }
.dienstplan:not(.dienstplan-woche) { min-width: 74rem; }
.dienstplan-woche { min-width: 62rem; }
.dienstplan .spalte-person {
  width: 9.5rem;
  min-width: 9.5rem;
  padding: 0.28rem 0.45rem;
}
.person-zusatz { white-space: nowrap; }
.dienstplan .spalte-std { width: 2.9rem; }
.dienstplan .spalte-tag { width: auto; }
.zelleneingabe { min-width: 0; padding-left: 0.02rem; padding-right: 0.02rem; }
/* Zwei Dienste an einem Tag sind selten — in Nur-Lese-Zellen (und im
   Druck) stehen ihre Kacheln ÜBEREINANDER statt gequetscht nebeneinander;
   die etwas höhere Zeile gibt dafür die Luft. Im Eingabefeld bleibt der
   Text einzeilig (»F1 S1«) — er bekommt kleinere Schrift, und mit den
   dynamischen Tagesspalten passt er ab mittlerer Fensterbreite ganz. */
.dienstplan tbody .zelle { height: 2.15rem; }
.dienstplan tbody .zelle .dienst {
  display: block;
  width: max-content;
  margin: 1px auto;
}
/* Zwei Dienste in EINER Zelle: keine Dienstfarbe — die des ersten wäre
   die halbe Wahrheit, und zwei Flächen trägt ein Feld nicht. Stattdessen
   eine neutrale, deutlich sichtbare Kennung: helle Akzentfläche und ein
   gestrichelter Doppelrand (fünfte Kundendurchsicht 22.07.2026). Die
   Warnfläche ungespeicherter Zellen behält Vorrang (:not(.geaendert)),
   der gestrichelte Rand bleibt in beiden Zuständen. */
.zelleneingabe.zelle-mehrfach { font-size: 0.64rem; }
.zelleneingabe.zelle-mehrfach:not(.geaendert) { background-color: var(--akzent-hell); }
.zelleneingabe.zelle-mehrfach { border: 2px dashed var(--akzent-dunkel); }
.dienstplan .spalte-summe { width: 3.4rem; padding: 0 0.25rem; }
/* Die Abweichung trägt ihre Bewertung als FLÄCHE, nicht nur als
   Schriftfarbe — die war zu leise (vierte Kundendurchsicht). Dieselben
   geprüften Paare wie bei den Meldungen; die Null bleibt neutral. */
.dienstplan tbody .spalte-summe.minus {
  background-color: var(--fehler-hell);
  color: var(--fehler);
  font-weight: 600;
}
.dienstplan tbody .spalte-summe.plus {
  background-color: var(--erfolg-hell);
  color: var(--erfolg);
  font-weight: 600;
}

/* =========================================================
   Hilfe am Ort: der Fragezeichen-Knopf (sechste Kundendurchsicht)
   =========================================================
   <details class="hilfeknopf"><summary aria-label="Hilfe: …">?</summary>
     <div class="hilfetext"><p>…</p></div></details>

   Ein kleiner runder ?-Knopf neben einer Überschrift oder einem Feld;
   der Text klappt als Kästchen darunter auf. Ohne JavaScript bedienbar
   (details/summary, Zustand nativ angesagt — kein handgesetztes
   aria-expanded, Konzept 10ab). Gedacht als PROJEKTWEITES Muster für
   erklärende Dauertexte: Sie wandern beim Anfassen einer Seite in
   einen Hilfeknopf, statt ständig Platz zu nehmen. Das Kästchen ist
   absolut zum Knopf gestellt — der Knopf darf deshalb nicht in einem
   Blätterbereich liegen (10h-Falle; in den Plansichten sitzt er in der
   Palette, die nicht blättert). */
.hilfeknopf { position: relative; display: inline-block; }
.hilfeknopf > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  box-sizing: border-box;
  /* Das »?«-Zeichen ist oben schwerer als unten (Haken oben, nur ein Punkt
     unten); die reine Boxmitte lässt es zu hoch sitzen. Ein Hauch Innenabstand
     oben rückt es optisch in die Kreismitte — der Knopf wirkt symmetrisch. */
  padding-top: 1.5px;
  border: 1.5px solid var(--akzent-dunkel);
  border-radius: 50%;
  color: var(--akzent-dunkel);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  background-color: #fff;
}
.hilfeknopf > summary::-webkit-details-marker { display: none; }
.hilfeknopf > summary:hover,
.hilfeknopf[open] > summary { background-color: var(--akzent-hell); }
.hilfeknopf > .hilfetext {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.4rem);
  left: 0;
  width: max-content;
  /* Zwei Schranken, nicht eine: 24rem sind auf einem breiten Schirm die
     angenehme Lesebreite — auf einem 375-px-Gerät aber 9 px mehr, als es
     überhaupt hat. `min()` nimmt den kleineren Wert; 100vw minus zweimal
     Seitenrand lässt die Tafel auf dem Blatt.
     Beim Schmalschirm-Durchgang zu 10bw gemessen. ACHTUNG, das behebt nur
     die BREITE: Weil die Tafel am ?-Knopf hängt und der mitten in seiner
     Kopfzeile steht, kann sie auf sehr schmalen Geräten trotzdem rechts
     hinausragen. Weiter reicht die Verankerung nicht — und weiter zu gehen
     lohnt erst, wenn die Anwendung überhaupt für schmale Geräte gebaut wird:
     Die Hauptnavigation hat bis heute KEINE einzige Medienabfrage und läuft
     dort als Erstes über (gemessen 897 px Dokumentbreite bei 375 px Schirm,
     auf jeder Seite). Das ist eine Gestaltungsfrage für den Auftraggeber,
     kein Fehler in dieser Zeile. */
  max-width: min(24rem, calc(100vw - 2.5rem));
  background-color: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  padding: 0.6rem 0.8rem;
  font-size: 0.78rem;
  color: var(--text);
}
.hilfeknopf > .hilfetext p { margin: 0; }
.hilfeknopf > .hilfetext p + p { margin-top: 0.4rem; }
/* Aufzählungen im Hilfetext — die Schrittfolgen lesen sich als Liste
   leichter als im Fließtext (Kundenwunsch 22.07.2026, Konzept 10ad). */
.hilfeknopf > .hilfetext ul { margin: 0.4rem 0 0 1.05rem; padding: 0; }
.hilfeknopf > .hilfetext li { margin-bottom: 0.25rem; }
.hilfeknopf > .hilfetext li:last-child { margin-bottom: 0; }
.hilfeknopf > .hilfetext ul + p { margin-top: 0.4rem; }
/* In der rechten Palettenlage öffnet das Kästchen nach LINKS — sonst
   liefe es am rechten Fensterrand hinaus. */
.planbereich:not(.palette-oben) .hilfeknopf > .hilfetext { left: auto; right: 0; }

/* ===== Hilfetafeln auf schmalen Geräten (Konzept 10cf) =====
   Der Kommentar oben benannte die Lücke schon und verwies auf »wenn die
   Anwendung überhaupt für schmale Geräte gebaut wird«. Genau das ist jetzt
   der Fall (Kundenentscheid 25.07.2026).

   GEMESSEN war der Mangel: Die Tafel hängt am ?-Knopf, und der steht mitten
   in seiner Kopfzeile. Auf einem 375-px-Gerät begann sie deshalb bei x=300
   und reichte bis x=635 — 260 px JENSEITS des Bildschirmrandes. Die Breite
   war gedeckelt, die VERANKERUNG nicht.

   Die Lösung ist nicht mehr Rechnerei an der Verankerung, sondern ein
   anderer Bautyp: Auf schmalen Geräten steht die Tafel IM FLUSS statt
   darüber. Sie schiebt den Text nach unten, statt ihn zu verdecken — auf
   einem Telefon ist das ohnehin die bessere Bedienung, weil ein Überlager
   dort fast den ganzen Schirm einnähme und man nicht sieht, wozu er
   gehört. */
@media (max-width: 64.999rem) {
  .hilfeknopf { display: block; }
  .hilfeknopf > .hilfetext,
  .planbereich:not(.palette-oben) .hilfeknopf > .hilfetext {
    position: static;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;              /* die Spalte begrenzt jetzt, nicht 24rem */
    margin: 0.5rem 0 0.25rem;
    box-shadow: none;
    border-left: 4px solid var(--logo-blau);   /* als Einschub erkennbar */
    font-size: 0.85rem;           /* 12,5 px sind auf einem Telefon zu klein */
    line-height: 1.5;
  }
  /* Ein Kopf, der den ?-Knopf trägt, muss ihn umbrechen lassen dürfen —
     sonst drückt die aufgeklappte Tafel die Überschrift auseinander.
     NUR IM OFFENEN ZUSTAND: Geschlossen gehört das Fragezeichen neben seine
     Überschrift; eine eigene Zeile für einen 21-px-Kreis sähe verloren aus
     (erster Anlauf, im Bild sofort zu sehen). */
  .palettenkopf,
  .abschnittskopf { flex-wrap: wrap; }
  .palettenkopf > .hilfeknopf[open],
  .abschnittskopf > .hilfeknopf[open] { flex: 1 0 100%; }
  .hilfeknopf:not([open]) { display: inline-block; }
}

/* Das TIPPZIEL des ?-Knopfes — auf jedem Gerät, nicht nur auf schmalen.
   Der sichtbare Kreis misst 1,3 rem (≈21 px). Das Projekt fordert selbst
   mindestens 44 px für Klickziele (5a.8); mit dem Finger ist ein 21-px-Kreis
   nicht sicher zu treffen. Ein unsichtbares Feld über dem Kreis vergrößert
   die Trefferfläche, OHNE das Schriftbild zu verändern — der Kreis bleibt
   klein, die Fläche wird groß. */
.hilfeknopf > summary { position: relative; }
.hilfeknopf > summary::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Überschrift mit ?-Knopf daneben — dasselbe Muster wie .palettenkopf,
   für Abschnitte wie die Wünsche im Plan. */
.abschnittskopf { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.5rem; }
.abschnittskopf h2 { margin: 0; }

/* Live-Summen (Konzept 10ad): Solange eine Zeile ungespeicherte
   Änderungen trägt, sind ihre Ist- und +/−-Zellen vorläufig — dieselbe
   Sprache wie die geänderten Zellen (Kursive; die Ist-Zelle zusätzlich
   mit der Warnfläche). Die +/−-Zelle behält ihre Bewertungsfläche
   rot/grün — sie IST die Zahl, um die es geht; die Kursive sagt, dass
   sie bis zum Speichern vorläufig ist. Selektorstärke bewusst über
   .dienstplan tbody, sonst gewinnt die Grundfläche der Summenspalte. */
.dienstplan tbody td.summe-vorlaeufig { font-style: italic; }
.dienstplan tbody td.summe-vorlaeufig[data-summe="ist"] { background-color: var(--warnung-hell); }

/* =========================================================
   Hilfe & Kurzanleitungen (?seite=hilfe, Konzept 10ac)
   Je Rolle ein druckbares Blatt; gedruckt wird über die
   Druckfunktion des Browsers — @media print unten zeigt
   nur das Blatt selbst.
   ========================================================= */

.blattliste {
  list-style: none;
  margin: 1.25rem 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem;
}
.blattkarte {
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1rem 1.2rem;
}
.blattkarte h2 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.blattkarte p { margin: 0; color: var(--text-leise); font-size: 0.9rem; }

.hilfeblatt {
  background: var(--flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.5rem 1.75rem 1.25rem;
  max-width: 52rem;
}
.hilfeblatt-reihe {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.hilfeblatt-kopf h1 { margin: 0.15rem 0 0.2rem; }
.hilfeblatt-stand { margin: 0 0 1rem; color: var(--text-leise); font-size: 0.9rem; }
.hilfeblatt-einleitung { margin: 0 0 1rem; }

.hilfeblatt-bild { margin: 0 0 1.25rem; }
.hilfeblatt-bild img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--linie);
  border-radius: 4px;
}
.hilfeblatt-bild figcaption {
  font-size: 0.82rem;
  color: var(--text-leise);
  margin-top: 0.3rem;
}

.hilfeblatt-menue { margin-bottom: 1.25rem; }
.hilfeblatt-menue h2, .hilfeblatt-ablaeufe h2, .hilfe-merke h2 {
  font-size: 1.05rem;
  margin: 0 0 0.6rem;
}
.menue-gruppe { font-size: 0.92rem; margin: 0.8rem 0 0.3rem; }
.menueliste { margin: 0; }
.menueliste dt { font-weight: 600; margin-top: 0.45rem; }
.menueliste dt:first-child { margin-top: 0; }
.menueliste dd { margin: 0 0 0 0; color: var(--text-leise); font-size: 0.9rem; }
.menue-bedingung { font-weight: 400; font-size: 0.85rem; color: var(--text-leise); }

.ablauf { margin-bottom: 1.1rem; break-inside: avoid; }
.ablauf h3 { font-size: 0.98rem; margin: 0 0 0.35rem; }
.ablauf ol { margin: 0 0 0 1.3rem; padding: 0; }
.ablauf li { margin-bottom: 0.35rem; }

.fadenliste { list-style: none; margin: 0; padding: 0; counter-reset: faden; }
.fadenliste > li {
  counter-increment: faden;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1rem;
  break-inside: avoid;
}
.fadenliste > li::before {
  content: counter(faden);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background-color: var(--akzent-dunkel);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fadenliste h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.fadenliste p { margin: 0 0 0.25rem; }
.fadenrolle { font-weight: 400; font-size: 0.85rem; color: var(--text-leise); }

.hilfe-merke {
  background: var(--hintergrund);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
}
.hilfe-merke ul { margin: 0 0 0 1.2rem; padding: 0; }
.hilfe-merke li { margin-bottom: 0.3rem; }

.hilfeblatt-fuss {
  border-top: 1px solid var(--linie);
  margin-top: 1.2rem;
  padding-top: 0.6rem;
}
.hilfeblatt-fuss p { margin: 0; font-size: 0.82rem; color: var(--text-leise); }

@media print {
  /* Nur das Blatt: Kopf, Navigation und Fuß nimmt schon der globale
     Druckblock heraus; hier folgen Meldungen und die Blattwerkzeuge. */
  .meldungen { display: none; }
  .hilfeblatt { box-shadow: none; padding: 0; max-width: none; }
  .hilfeblatt a { color: #000; text-decoration: none; }
  .hilfeblatt-bild img { border-color: #999; }
  .hilfe-merke { background: #fff; border-color: #999; }
  .fadenliste > li::before {
    background-color: #fff;
    color: #000;
    border: 2px solid #000;
  }
  .menueliste dd, .hilfeblatt-bild figcaption, .menue-bedingung,
  .hilfeblatt-stand, .hilfeblatt-fuss p, .fadenrolle { color: #333; }
}

/* Der Planungsablauf-Umschalter auf der Hauskarte (Konzept 10ae). */
/* Ein Einstellungsblock der Gebäudekarte — der Freigabeweg (10ae) und der
   Ist-Stichtag (10ah). BEIDE tragen seit 10cb dieselbe Gestalt:

     Beschriftung oder Zustand ................................ (?)
     [ Bedienelemente ]                            [ Übernehmen ]

   VORHER war der Block EINE Flex-Reihe, und das Stichtag-Formular hatte
   überhaupt keine Layoutregel (display: block). Gemessen: 559 px Inhalt in
   einer 312 px schmalen Karte — der Satz brach mitten hindurch (»…10 . des |
   Folgemonats…«) und der Hilfeknopf rutschte allein in eine dritte Zeile.
   Eine Karte ist wegen minmax(22rem, 1fr) NIE breiter als nötig; 312 px
   innen ist der Bemessungsfall, nicht ein Zufall der Fensterbreite. */
.hauskarte-ablauf {
  margin: 0.6rem 0 0.2rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linie);
}
.ablauf-kopf {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}
/* Der Hilfeknopf steht IMMER am rechten Rand — dadurch stehen die
   Fragezeichen beider Blöcke und aller Karten in einer Flucht. */
.ablauf-kopf > .hilfeknopf { margin-left: auto; }
.hauskarte-ablauf .merkmal { white-space: normal; }
.ablauf-umschalter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
/* Der Abschluss-Stichtag des Ist-Plans (10ah): schmales Zahlenfeld, und
   ». des Folgemonats« hängt als ein Stück daran (Umbruch verboten).
   3,25 rem sind gemessen: Der längste erlaubte Wert (»28«) steht darin
   ungekürzt, und die Bedienzeile bleibt auch in der SCHMALSTEN Karte
   (313 px innen, drei Spalten bei ~1100 px Fenster) einzeilig. Vorher
   waren es 4,5 rem — damit fiel der Knopf dort in eine eigene Zeile. */
.ablauf-umschalter .feld-stichtag { width: 3.25rem; }
.stichtag-satz { white-space: nowrap; }
/* NUR der Knopf HINTER dem Satzstück rückt nach rechts: Reicht die Breite
   nicht, wandert er als GANZES in die nächste Zeile, statt den Satz davor zu
   zerreißen. Ein alleinstehender Knopf (der Freigabe-Umschalter) bleibt
   dagegen links unter seiner Marke stehen — rechtsbündig schwebte er dort
   ohne Bezug. */
.ablauf-umschalter > .stichtag-satz ~ button { margin-left: auto; }

/* =========================================================
   Radierer, geleerte Zellen und vorläufige Ampel (Konzept 10af)
   ========================================================= */

/* Eine GELEERTE, noch nicht gespeicherte Zelle: weißer Grund mit
   gestricheltem Warnrahmen statt der Warnfläche — die Fläche war von
   gelben Dienstfarben kaum zu unterscheiden, und eine geleerte Zelle
   sah weiter belegt aus (Kundenbefund 22.07.2026). Kursive und
   Unterstrich der Änderungsmarke bleiben. */
.zelleneingabe.geaendert.geleert {
  background-color: var(--flaeche);
  border: 1px dashed var(--warnung);
}

/* Der Radierer-Knopf im Palettenkopf — plan.js erzeugt ihn zur
   Laufzeit (ohne JavaScript wäre er eine leere Behauptung). Im
   Stempelzustand trägt er wie die Kacheln .stempel-aktiv. */
.palettenkopf .radierer { margin-left: auto; }
.palettenkopf .radierer.stempel-aktiv {
  background-color: var(--akzent-hell);
  outline: 2px solid var(--akzent-dunkel);
  outline-offset: 1px;
}

/* Solange Eingaben ungespeichert sind, ist die Regelampel eine
   Vorschau — dieselbe Kursiv-Sprache wie die Live-Summen. */
.regelampel.ampel-vorlaeufig .ampel { font-style: italic; }

/* ==========================================================================
   Konzept 10bw — Die Protokollseite
   ========================================================================== */

/* Blätterwerk. Die Seiten sind bewusst KEINE Zahlenreihe: Bei 15.000
   Einträgen wären das 250 Ziffern nebeneinander. Vor und zurück genügt,
   dazu der Stand in Worten — wer weiter zurück will, engt den Zeitraum ein.
   Das ist auch der schnellere Weg. */
.blaetterleiste {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: var(--tafel-luft);
}
.blaetterstand { font-size: 0.85rem; color: var(--text-leise); }

/* Ein Knopf, der nirgends hinführt (erste bzw. letzte Seite), wird
   ausgegraut UND trägt aria-disabled — ein Verweis lässt sich nicht
   `disabled` setzen, und ein Klick ins Leere ist ärgerlicher als ein
   sichtbar stumpfer Knopf. */
.knopf-aus {
  opacity: 0.45;
  pointer-events: none;
}

/* Die Protokolltabelle trägt viel Text in der letzten Spalte. Ein fester
   Spaltenplan verhindert, dass eine lange Beschreibung die Zeitspalte
   zusammenschiebt — dieselbe Lehre wie bei den Monatsrastern (10ba). */
.tabelle-protokoll { table-layout: fixed; }
.tabelle-protokoll th:nth-child(1), .tabelle-protokoll td:nth-child(1) { width: 10.5rem; }
.tabelle-protokoll th:nth-child(2), .tabelle-protokoll td:nth-child(2) { width: 11rem; }
.tabelle-protokoll th:nth-child(3), .tabelle-protokoll td:nth-child(3) { width: 9rem; }
.tabelle-protokoll th:nth-child(4), .tabelle-protokoll td:nth-child(4) { width: 12rem; }
.tabelle-protokoll th:nth-child(5), .tabelle-protokoll td:nth-child(5) { width: 10rem; }
.tabelle-protokoll td { word-break: break-word; }

/* Zwei Zeilenarten sind hervorgehoben: Einsichten in Gesundheitsdaten
   (Art. 9 DSGVO) und abgewiesene Zugriffe. Die Fläche ist SEHR blass — sie
   ordnet nur ein; die Aussage trägt das Wort daneben im Klartext
   (WCAG 1.4.1, nie Farbe allein). */
.tabelle .zeile-gesundheit > * { background: var(--warnung-hell); }
.tabelle .zeile-abgewiesen  > * { background: var(--fehler-hell); }

/* Vorher/Nachher steht aufklappbar in der Zeile: ausgeklappt bei jedem
   Eintrag wäre die Liste unlesbar, weggelassen fehlte die eigentliche
   Auskunft. */
.protokoll-stand { margin-top: 0.35rem; }
.protokoll-stand > summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--akzent-dunkel);
}
.protokoll-stand-inhalt {
  margin-top: 0.3rem;
  padding: 0.45rem 0.6rem;
  background: var(--flaeche-still, rgba(0, 0, 0, 0.03));
  border-radius: var(--radius-klein);
}
.protokoll-stand-inhalt p { margin: 0.2rem 0 0.1rem; font-size: 0.76rem; }
.protokoll-stand-inhalt pre {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Der Schnellzugriff der Protokollseite (10bw, nachgeschärft): eine Reihe
   von Verweisen über den Feldern, die die häufigsten Fragen mit einem Klick
   einstellen. Bewusst Verweise und keine Knöpfe im Formular — sie sind ohne
   JavaScript bedienbar, mit der Tastatur erreichbar und als Adresse
   kopierbar (Regel 12). */
.schnellzugriff {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--tafel-luft);
}
/* Der gewählte Zugriff ist gefüllt statt umrandet — und trägt zusätzlich
   aria-current, damit ihn auch ein Vorleseprogramm nennt (nie nur Farbe). */
.knopf.knopf-gewaehlt {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}
.knopf.knopf-gewaehlt:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.schnellzahl {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.09);
  font-variant-numeric: tabular-nums;
}
.knopf-gewaehlt .schnellzahl { background: rgba(255, 255, 255, 0.25); }

/* Die endgültige Ausgabe in der Versionsliste (10by). Grün wie der Urlaub —
   dieselbe Sprache: erledigt, festgeschrieben. Die Fläche ordnet nur ein,
   die Aussage trägt das Wort »endgültig« daneben (WCAG 1.4.1). */
.tabelle .ausgabe-endgueltig > * { background: var(--urlaub-flaeche); }
.tabelle .ausgabe-endgueltig > :first-child { box-shadow: inset 4px 0 0 var(--urlaub); }
/* Eine Prüfsumme ist eine Zeichenkette ohne Wortgrenzen — ohne feste Breite
   zerrt sie die Spalte auseinander. */
.pruefsumme { font-size: 0.78rem; letter-spacing: -0.01em; }

/* ==========================================================================
   Konzept 10bz — Das Regelwerk ändern
   ========================================================================== */

/* Der Ändern-Knopf sitzt unten rechts an der Regelkarte: Er gehört zur Regel,
   drängt sich aber nicht vor ihren Inhalt. */
.regelaendern { margin: 0.75rem 0 0; text-align: right; }

/* Ein Kasten, der ein PROBLEM meldet, nicht nur einen Hinweis. Rot ist hier
   angemessen: Überlappende Fassungen heißen, dass nicht bestimmt ist, welche
   Regel gilt. Die Aussage trägt der Text, die Farbe ordnet nur ein. */
.kasten-hinweis.kasten-fehler {
  border-left-color: var(--fehler);
  background: var(--fehler-hell);
}

/* Ein Hinweis, der vor etwas warnt, statt etwas zu erklären. */
.feldhinweis-warnung { color: var(--warnung); }
/* Die Zeile, die man gerade bearbeitet, in der Fassungsliste. */
.tabelle .zeile-jetzt > * { background: var(--akzent-hell); }
.tabelle .zeile-jetzt > :first-child { box-shadow: inset 4px 0 0 var(--akzent); }

/* Ein Hinweiskasten, der zum HANDELN auffordert (10ca): Bernstein wie die
   offenen Anträge in der Urlaubstabelle (10bc) — dieselbe Sprache für
   dieselbe Aussage. Das Wort trägt sie, die Fläche ordnet nur ein. */
.kasten-hinweis.kasten-tun {
  border-left-color: var(--warnung);
  background: var(--warnung-hell);
}