/*
 * Eigene Klassen für die Park Suite.
 *
 * WARUM DIESE DATEI ÜBERHAUPT EXISTIERT
 *
 * Filament liefert ein fertig übersetztes Stylesheet aus. Wer in einer
 * eigenen Blade-Datei Tailwind-Klassen schreibt, bekommt nur das, was
 * Filament selbst verwendet - alles andere fällt lautlos weg. Genau das
 * ist am 16.10. passiert: Die vier Kacheln der Objektakte standen
 * untereinander statt nebeneinander, obwohl
 * "grid sm:grid-cols-2 lg:grid-cols-4" dastand. Die Tests sahen davon
 * nichts, denn der Inhalt war ja vorhanden - nur falsch angeordnet.
 *
 * Ein eigener Tailwind-Bau wäre der andere Weg. Der braucht Node im
 * Abbild und einen Schritt mehr bei jeder Auslieferung. Für eine
 * Handvoll Anordnungsregeln steht das in keinem Verhältnis.
 *
 * Die Klassen heißen deutsch wie alles andere im Projekt und tragen den
 * Vorsatz "ps-", damit sie nicht mit Filaments eigenen kollidieren.
 */

/* Warum ueberall minmax(0, 1fr) und nirgends 1fr

   `1fr` ist die Kurzform von `minmax(auto, 1fr)`. Das `auto`
   heisst: nie schmaler als der Mindestinhalt. Ein einziges
   unteilbares Kind - ein Eingabefeld, eine Normnummer, ein langes
   Wort - schiebt damit die Spalte auf, und die Spalte schiebt die
   Seite auf.

   Auf dem Schreibtisch faellt das nie auf, weil Platz da ist. Auf
   dem Telefon lief die Messrunde 163 Pixel aus dem Bild, und der
   Inhalt war nicht erreichbar (Patrick, 22.10.).

   Deshalb gilt im ganzen Stylesheet: minmax(0, 1fr). */


/* ─────────────────────────────────────────── Kachelreihen */

.ps-reihe {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .ps-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ps-reihe-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ps-reihe-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ps-reihe-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ps-reihe-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─────────────────────────────────────────── Kennzahlen */

.ps-kennzahl {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ps-kennzahl-klein { font-size: 1.125rem; font-weight: 600; }
.ps-kennzahl .ps-von { font-size: 1rem; font-weight: 400; opacity: .6; }

.ps-etikett {
  font-size: .8125rem;
  opacity: .65;
}
.ps-notiz { font-size: .75rem; opacity: .6; margin-top: .25rem; }

.ps-gut { color: rgb(22 163 74); }
.ps-schlecht { color: rgb(220 38 38); }
.ps-wartet { color: rgb(202 138 4); }

.dark .ps-gut { color: rgb(74 222 128); }
.dark .ps-schlecht { color: rgb(248 113 113); }
.dark .ps-wartet { color: rgb(250 204 21); }

/* ─────────────────────────────────────────── Zeilenlisten

   Name links, Kennzeichen rechts - auf schmalen Schirmen untereinander,
   damit nichts abgeschnitten wird. */

.ps-liste { list-style: none; padding: 0; margin: 0; }
.ps-liste > li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .625rem 0;
}
.ps-liste > li + li { border-top: 1px solid rgb(0 0 0 / .08); }
.dark .ps-liste > li + li { border-top-color: rgb(255 255 255 / .1); }

.ps-haupt { min-width: 0; }
.ps-name { font-weight: 600; }
.ps-neben { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* ─────────────────────────────────────────── Tabellen

   Eigener Überlaufkasten: Eine breite Tabelle darf die Seite nicht
   seitlich wandern lassen. */

.ps-tabellenkasten { overflow-x: auto; }
.ps-tabelle { width: 100%; font-size: .875rem; border-collapse: collapse; }
.ps-tabelle th {
  text-align: left;
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .65;
  padding: 0 1rem .5rem 0;
  font-weight: 600;
  white-space: nowrap;
}
.ps-tabelle td { padding: .5rem 1rem .5rem 0; vertical-align: top; }
.ps-tabelle tbody tr + tr td { border-top: 1px solid rgb(0 0 0 / .08); }
.dark .ps-tabelle tbody tr + tr td { border-top-color: rgb(255 255 255 / .1); }
.ps-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ─────────────────────────────────────────── Nachweiszeile */

.ps-nachweis { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; }
.ps-nachweis-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ps-nachweis-zeit { text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }
/* Storniertes bleibt lesbar, tritt aber zurück. */
.ps-storniert { opacity: .55; }

.ps-abstand { margin-top: 1.5rem; }
.ps-oben { margin-top: .25rem; }
.ps-leise { font-size: .8125rem; opacity: .7; }

/* ───────────────────────────────────────────── Die Messrunde

   Halb sieben am Beckenrand, nasse Hände, Handy in der Jacke. Große
   Felder, Zahlentastatur, eine Rückmeldung in Farbe - und zwar bevor
   gespeichert wird.
   ───────────────────────────────────────────── */

.ps-messreihe {
  display: grid;
  gap: .875rem;
  /*
   * minmax(0, 1fr), nicht 1fr.
   *
   * `1fr` ist die Kurzform von `minmax(auto, 1fr)` - die Spalte
   * wird damit nie schmaler als der Mindestinhalt ihres Kindes.
   * Auf dem Telefon ergab das eine 467 Pixel breite Spalte in
   * einem 304 Pixel breiten Kasten: Die Messfelder liefen rechts
   * aus dem Bild, und der Inhalt war nicht erreichbar.
   *
   * Gefunden von Patrick am 22.10. auf dem Telefon.
   */
  grid-template-columns: minmax(0, 1fr);
}

/* Und die Kinder duerfen auch schrumpfen.

   Ein Gitterkind hat von sich aus min-width: auto. Ohne diese
   Zeile schiebt ein einzelnes unteilbares Element im Feld die
   ganze Spalte wieder auf. */
.ps-messreihe > * {
  min-width: 0;
}
@media (min-width: 720px) {
  .ps-messreihe { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
}

.ps-messfeld {
  border: 1px solid rgb(0 0 0 / .1);
  border-radius: 3px;
  padding: .875rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.dark .ps-messfeld { border-color: rgb(255 255 255 / .12); }

/* Erledigtes verschwindet nicht - es tritt zurück. Wer dreimal messen
   muss und zweimal gemessen hat, soll den Fortschritt sehen. */
.ps-erledigt { opacity: .62; }

.ps-messkopf { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.ps-takt {
  font-size: .75rem; font-variant-numeric: tabular-nums;
  opacity: .6; white-space: nowrap;
}

.ps-eingabe { display: flex; gap: .5rem; align-items: center; margin-top: .25rem; }

.ps-zahlfeld {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: .55rem .7rem;
  border-radius: 3px;
  border: 2px solid rgb(0 0 0 / .14);
  background: transparent;
  color: inherit;
  transition: border-color .2s ease, background .2s ease;
}
.dark .ps-zahlfeld { border-color: rgb(255 255 255 / .18); }
.ps-zahlfeld:focus { outline: none; border-color: rgb(0 0 0 / .45); }
.dark .ps-zahlfeld:focus { border-color: rgb(255 255 255 / .5); }

/* Die Rückmeldung in Farbe, am Feld selbst */
.ps-feld-gut { border-color: rgb(22 163 74); }
.ps-feld-warn { border-color: rgb(202 138 4); }
.ps-feld-schlecht { border-color: rgb(220 38 38); background: rgb(220 38 38 / .06); }








/* Die Zahlen sind die Begründung, nicht die Hauptsache: kleiner,
   in einer Zeile, ohne Kästen. */

/* ─────────────────────────────────── Die Zustandsmarke

   Acht Prozent der Männer sehen Rot und Grün nicht auseinander, und
   auf einem Tablet in der Sonne sieht sie niemand. Deshalb trägt
   jeder Zustand zwei Signale: Farbe UND Form. Das Wort steht
   ohnehin daneben.

     freigegeben   ● gefüllter Punkt
     grenzwertig   ◐ halber Punkt
     gesperrt      ■ Quadrat
     geplant       ○ offener Kreis                               */

.ps-marke {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}
.ps-marke::before {
  content: "";
  width: .5rem;
  height: .5rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: currentColor;
}

.ps-marke-frei   { color: #1f7a4d; }
.ps-marke-warte  { color: #a86a00; }
.ps-marke-sperre { color: #c0392b; }
.ps-marke-ruhig  { color: #6b6960; }

.dark .ps-marke-frei   { color: #5cc48a; }
.dark .ps-marke-warte  { color: #e0a63c; }
.dark .ps-marke-sperre { color: #ef7a6e; }
.dark .ps-marke-ruhig  { color: #a9a596; }

/* Die Form. Halber Punkt über einen harten Farbverlauf, offener
   Kreis über einen inneren Rand - beides ohne zusätzliches Markup. */
.ps-marke-warte::before {
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.ps-marke-sperre::before { border-radius: 2px; }
.ps-marke-ruhig::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* Der linke Balken macht aus zwanzig Zeilen ein Bild, in dem die
   eine rote schon im Vorbeigehen auffällt. */
.ps-tabelle tr.ps-dringend td:first-child,
.ps-liste > li.ps-dringend {
  box-shadow: inset 3px 0 0 #c0392b;
  padding-left: .7rem;
}
.dark .ps-tabelle tr.ps-dringend td:first-child,
.dark .ps-liste > li.ps-dringend {
  box-shadow: inset 3px 0 0 #ef7a6e;
}

/* Tabellenspalten, die nicht wandern sollen. */
.ps-tabelle td.ps-rechts, .ps-tabelle th.ps-rechts { text-align: right; padding-right: 1.5rem; }
.ps-tabelle .ps-stark { font-weight: 600; }
.ps-tabelle .ps-nebensache { opacity: .62; }

/* ═══════════════════════════════════════════ Das Dashboard

   Eine Seite, ein Bildschirm.

   Der Leitstand war vorher eine Tabelle von 4300 Pixeln Hoehe. Wer
   morgens um halb sieben wissen will, ob der Park aufmachen kann,
   scrollt nicht. Deshalb hat die Seite jetzt eine feste Hoehe, und
   was zu lang ist, scrollt INNERHALB seiner Kachel.

   Die Zahl der Zeilen aendert daran nichts: Bei 3 Befunden sieht
   die Seite aus wie bei 300.
   ═══════════════════════════════════════════ */

.ps-brett {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  /* Kopfzeile, Seitentitel und Rand der Filament-Buehne abgezogen. */
  min-height: calc(100vh - 24rem);
}
@media (min-width: 1100px) {
  .ps-brett {
    grid-template-columns: minmax(0, 1.7fr) minmax(23rem, 1fr);
    height: calc(100vh - 24rem);
  }
}

/* Die Spalten selbst duerfen nicht wachsen - sonst waechst die
   Seite mit und das feste Fenster ist wieder weg. */
.ps-spalte {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  /* Platz fuer den Rollbalken, damit er die Kachelkante nicht
     anschneidet. */
  padding-right: .25rem;
}

/* ───────────────────────────────────────────── Die Kachel */

.ps-kachel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex-shrink: 0;
  /*
   * Nicht in den Nachbarn laufen.
   *
   * Eine Kachel, deren Inhalt groesser ist als sie selbst, soll
   * sichtbar abschneiden statt die Kachel darunter zu
   * ueberschreiben - das faellt auf und wird behoben, ein
   * Ueberlauf faellt erst im Bild auf.
   */
  overflow: hidden;
}

/*
 * Die Kacheln im rechten Stapel trennt eine Haarlinie, nicht ein
 * Rahmen. Die erste bekommt keine - sonst steht eine Linie ohne
 * etwas darueber.
 */
.ps-spalte > .ps-kachel + .ps-kachel {
  border-top: 1px solid rgb(0 0 0 / .09);
  padding-top: .5rem;
}
.dark .ps-spalte > .ps-kachel + .ps-kachel { border-top-color: rgb(255 255 255 / .12); }

/* Die Befundliste steht allein und braucht gar keine Trennung. */
.ps-spalte > .ps-kachel:only-child { border-top: 0; padding-top: 0; }

.ps-kachel-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .25rem 0 .5rem;
  flex-shrink: 0;
}
.ps-kachel-hut {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .55;
}
.ps-kachel-zahl {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ps-kachel-zahl .ps-von { font-size: .9rem; font-weight: 400; opacity: .5; }
.ps-kachel-dazu { font-size: .8125rem; opacity: .6; }

.ps-kachel-koerper { padding: 0 0 .75rem; flex-shrink: 0; }

/* Hier steckt der Trick: Nur dieser Bereich scrollt, nicht die
   Seite. Die Kachel behaelt ihre Hoehe, egal wie viel drinsteht. */
.ps-kachel-rolle {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  padding: 0;
  scrollbar-width: thin;
}

/* Die grosse Kennzahl in der Kachel traegt den Zustand mit. Eine
   Zahl ohne Bewertung zwingt zum Nachdenken. */
.ps-kachel-frei   { color: #1f7a4d; }
.ps-kachel-warte  { color: #a86a00; }
.ps-kachel-sperre { color: #c0392b; }
.dark .ps-kachel-frei   { color: #5cc48a; }
.dark .ps-kachel-warte  { color: #e0a63c; }
.dark .ps-kachel-sperre { color: #ef7a6e; }

/* ───────────────────────────────────── Die Befundzeile

   Symbol, Pfad, Vorgabe, Frist. Vier Angaben, eine Zeile, 44 Pixel
   hoch - damit zwanzig davon in ein Fenster passen. */

.ps-befund {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0 .5rem .7rem;
  border-bottom: 1px solid rgb(0 0 0 / .06);
}
.dark .ps-befund { border-bottom-color: rgb(255 255 255 / .08); }
.ps-befund:last-child { border-bottom: 0; }


.ps-befund-mitte { min-width: 0; flex: 1; }
.ps-befund-name, .ps-befund-dazu {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-befund-name { font-weight: 600; font-size: .875rem; }
.ps-befund-dazu { font-size: .75rem; opacity: .6; margin-top: .1rem; }
.ps-befund-rechts {
  flex-shrink: 0;
  text-align: right;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
}

/* Der linke Balken - ueber alle Befunde hinweg dieselbe Sprache
   wie in den Tabellen. */
.ps-befund.ps-dringend { box-shadow: inset 3px 0 0 #c0392b; }
.ps-befund.ps-bald     { box-shadow: inset 3px 0 0 #a86a00; }
.dark .ps-befund.ps-dringend { box-shadow: inset 3px 0 0 #ef7a6e; }
.dark .ps-befund.ps-bald     { box-shadow: inset 3px 0 0 #e0a63c; }

/* ───────────────────────────────── Die Zeilenkachel

   "Betrieb heute" im Mockup: drei Zeilen, links das Wort, rechts
   die Zahl. Kein Diagramm, keine Kachelreihe - nur die drei
   Angaben, die zusammengehoeren. */

.ps-posten {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
  font-size: .875rem;
  border-bottom: 1px solid rgb(0 0 0 / .06);
}
.dark .ps-posten { border-bottom-color: rgb(255 255 255 / .08); }
.ps-posten:last-child { border-bottom: 0; }
.ps-posten b { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ───────────────────────────────────── Nichts offen

   Der leere Zustand erklaert, statt sich zu entschuldigen. */
.ps-ruhe {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  gap: .5rem;
}
.ps-ruhe-zeichen { font-size: 1.75rem; color: #1f7a4d; }
.dark .ps-ruhe-zeichen { color: #5cc48a; }
.ps-ruhe p { font-size: .8125rem; opacity: .6; max-width: 34ch; }

/* Die Befundkachel steht allein in ihrer Spalte und fuellt sie
   aus - nur ihr Inneres rollt. */
.ps-spalte > .ps-kachel:only-child { flex: 1; }

/* ═══════════════════════════════════════ Die Schale

   Volle Breite und eine abgesetzte Seitenleiste.

   Filament begrenzt den Inhalt auf 7xl (80rem) und laesst rechts
   und links Luft stehen. Bei einer Tabelle mit acht Spalten ist das
   verschenkte Flaeche - die Spalten quetschen sich, waehrend daneben
   nichts steht.
   ═══════════════════════════════════════ */

.fi-main { max-width: none !important; }

/*
 * Das !important steht hier bewusst.
 *
 * Filament setzt die Breite ueber eine Utility-Klasse am selben
 * Element (fi-width-7xl). Gleiche Spezifitaet, und wer spaeter
 * kommt, gewinnt - das waere zwar suite.css, aber die Klasse kann
 * sich pro Seite aendern. Eine Regel, die an einer Stelle steht und
 * dort begruendet ist, ist besser als dieselbe Regel viermal mit
 * hochgezuechteten Selektoren.
 */

/* ─────────────────────────────────── Die Seitenleiste

   Gelb ist in der Anwendung sonst ein Akzent - hier traegt es eine
   Flaeche. Das ist die Ausnahme, und sie hat einen Grund: Die
   Seitenleiste ist nicht Inhalt, sondern Rahmen. Wer sie farbig
   absetzt, trennt Navigation von Arbeit, ohne eine Linie zu
   brauchen. */

.fi-sidebar {
  background: transparent;
  border-right: 0 !important;
}

/* Die Box. */
.fi-sidebar .fi-sidebar-nav {
  background: #ffcc00;
  border-radius: 4px;
  margin: .875rem;
  padding: 1rem .875rem;
  box-shadow:
    0 1px 2px rgb(20 19 17 / .06),
    0 14px 30px -22px rgb(20 19 17 / .55);
  /* Die Box endet vor dem Fensterrand, statt daran zu kleben. */
  height: auto;
  max-height: calc(100vh - 8.75rem);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Schwarz auf Gelb, nicht Grau auf Gelb: Grau auf Gelb ist der
   Kontrastwert, an dem jede Pruefung scheitert. */
.fi-sidebar .fi-sidebar-item-btn,
.fi-sidebar .fi-sidebar-item-label { color: #141311; }
.fi-sidebar .fi-sidebar-item-btn svg { color: #141311; opacity: .75; }

.fi-sidebar .fi-sidebar-group-label {
  color: rgb(20 19 17 / .55);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .6875rem;
}

/* Der aktive Punkt dreht das Verhaeltnis um: schwarze Flaeche,
   gelbe Schrift. Das ist dieselbe Umkehrung wie im Logo. */
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
  background: transparent;
  position: relative;
  font-weight: 700;
}
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn::before {
  content: "";
  position: absolute;
  left: -.3rem; top: .25rem; bottom: .25rem;
  width: 3px;
  border-radius: 999px;
  background: #141311;
}
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label { font-weight: 700; }
/*
 * Nicht gelb.
 *
 * Diese Regel stammt aus der Fassung mit schwarzer Flaeche -
 * dort war gelb richtig. Ohne Flaeche steht das Icon auf der
 * gelben Seitenleiste und ist unsichtbar.
 *
 * Die Hervorhebung macht jetzt die volle Deckkraft: Die
 * uebrigen Icons stehen auf 0.75.
 */
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn svg {
  color: #141311;
  opacity: 1;
}

.fi-sidebar .fi-sidebar-item .fi-sidebar-item-btn {
  background: transparent;
  text-decoration: none;
}

/* Die Bewegung sitzt am Symbol, nicht am Eintrag: Ein Schritt
   nach rechts und eine Spur groesser - so viel, dass das Auge es
   merkt, so wenig, dass die Zeile nicht springt. */
.fi-sidebar .fi-sidebar-item-btn svg {
  transition: transform 160ms ease-out, opacity 160ms ease-out;
}
.fi-sidebar .fi-sidebar-item .fi-sidebar-item-btn:hover svg {
  transform: translateX(2px) scale(1.12);
  opacity: 1;
}

/* Und die Schrift wird fester. Von 400 auf 600 - nicht auf 700,
   das ist dem aktiven Eintrag vorbehalten. */
.fi-sidebar .fi-sidebar-item-label { transition: font-weight 120ms; }
.fi-sidebar .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
  font-weight: 600;
}

/* Kein Breiten-Vorhalt: Die Labels stehen linksbuendig, der
   Zuwachs von 400 auf 600 laeuft nach rechts ins Leere. */

/* Das Logo sitzt auf Gelb - die helle Fassung waere unsichtbar. */
.fi-sidebar-header, .fi-topbar { background: #fff; }

/*
 * Dunkelmodus: kein leuchtendes Gelb.
 *
 * Eine gelbe Flaeche von 18 Zentimetern Hoehe blendet im Dunkeln.
 * Abgesetzt wird hier ueber Schwarz gegen Dunkelgrau, das Gelb
 * bleibt am aktiven Punkt - dieselbe Aussage, andere Lautstaerke.
 */
.dark .fi-sidebar { background: transparent; }
.dark .fi-sidebar .fi-sidebar-nav {
  background: #1c1b18;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07);
}
.dark .fi-sidebar .fi-sidebar-item-btn,
.dark .fi-sidebar .fi-sidebar-item-label { color: #e8e5db; }
.dark .fi-sidebar .fi-sidebar-item-btn svg { color: #e8e5db; }
.dark .fi-sidebar .fi-sidebar-group-label { color: rgb(232 229 219 / .5); }
.dark .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
  background: transparent;
  color: #ffd42e;
}
.dark .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label { color: #ffd42e; }
.dark .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn::before { background: #ffd42e; }
.dark .fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn svg { color: #ffd42e; }
.dark .fi-sidebar-header, .dark .fi-topbar { background: #1c1b18; }


/* ═══════════════════════════════════════ Der Parkplan

   Das Geländes ist ein SVG. Ohne Regel fuer "fill" faerbt der
   Browser einen Pfad SCHWARZ - das ist der Standardwert in SVG,
   nicht transparent. Genau das war der schwarze Klumpen auf der
   Seite: Das Stylesheet fuer den Parkplan ist nie ausgeliefert
   worden, und der Browser hat getan, was die Spezifikation sagt.
   ═══════════════════════════════════════ */

.ps-plan-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-bottom: 1rem;
}
.ps-plan-reiter button {
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  border: 1px solid rgb(0 0 0 / .12);
  background: transparent;
  cursor: pointer;
}
.dark .ps-plan-reiter button { border-color: rgb(255 255 255 / .16); }
.ps-plan-reiter button.jetzt {
  background: #141311;
  color: #ffcc00;
  border-color: #141311;
}
.dark .ps-plan-reiter button.jetzt { background: #ffd42e; color: #141311; border-color: #ffd42e; }

.ps-plan-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: .875rem;
}
.ps-plan-zahl { display: flex; align-items: baseline; gap: .5rem; }

.ps-stand {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  font-weight: 600;
}
.ps-stand::before {
  content: "";
  width: .5rem; height: .5rem;
  border-radius: 999px;
  background: currentColor;
}
.ps-stand-sperre { color: #c0392b; }
.ps-stand-sperre::before { border-radius: 2px; }
.ps-stand-warte { color: #a86a00; }
.dark .ps-stand-sperre { color: #ef7a6e; }
.dark .ps-stand-warte { color: #e0a63c; }

/* ─────────────────────────────── Die Flaeche */

.ps-plan {
  position: relative;
  /* Hoehe zuerst, Breite folgt aus dem Seitenverhaeltnis. */
  height: calc(100vh - 31rem);
  min-height: 18rem;
  aspect-ratio: 16 / 9;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 3px;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgb(0 0 0 / .08) 1px, transparent 0) 0 0 / 22px 22px,
    #f4f2ec;
}
.dark .ps-plan {
  background:
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / .07) 1px, transparent 0) 0 0 / 22px 22px,
    #1c1b18;
}

.ps-plan-grund { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Hier liegt die Reparatur. */
.ps-plan-flaeche {
  fill: #e4e9df;
  stroke: rgb(0 0 0 / .1);
  stroke-width: 1;
}
.dark .ps-plan-flaeche { fill: rgb(255 255 255 / .05); stroke: rgb(255 255 255 / .1); }

.ps-plan-weg {
  fill: none;                   /* ein Weg ist eine Linie, keine Flaeche */
  stroke: rgb(0 0 0 / .18);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1 7;
}
.dark .ps-plan-weg { stroke: rgb(255 255 255 / .2); }

/* ─────────────────────────────── Die Nadeln */

.ps-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  text-decoration: none;
  z-index: 2;
}
.ps-pin b {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50% 50% 50% 2px;
  transform: rotate(45deg);
  background: #6b6960;
  box-shadow: 0 1px 4px rgb(0 0 0 / .3);
  display: block;
}
.ps-pin i {
  font-style: normal;
  font-size: .6875rem;
  font-weight: 600;
  white-space: nowrap;
  padding: .1rem .4rem;
  border-radius: 2px;
  background: rgb(255 255 255 / .85);
  color: #141311;
  /* Bei dreissig Anlagen ueberlagern sich die Namen. Deshalb
     erscheinen sie erst beim Zeigen - die Farbe der Nadel sagt
     ohnehin schon, worum es geht. */
  opacity: 0;
  transition: opacity 150ms;
}
.dark .ps-pin i { background: rgb(20 19 17 / .9); color: #e8e5db; }
.ps-pin:hover i, .ps-pin:focus-visible i { opacity: 1; }
.ps-pin:hover { z-index: 3; }

.ps-pin-frei b   { background: #1f7a4d; }
.ps-pin-warte b  { background: #d99a1f; }
.ps-pin-sperre b { background: #c0392b; }
.ps-pin-ruhig b  { background: #8d8a80; }

.ps-plan-leer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  font-size: .875rem;
  opacity: .65;
  max-width: 40ch;
  margin: auto;
}

.ps-plan-rest { margin-top: 1rem; }
.ps-plan-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .5rem;
}
.ps-plan-reihe a {
  font-size: .8125rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgb(0 0 0 / .05);
  text-decoration: none;
  color: inherit;
}
.dark .ps-plan-reihe a { background: rgb(255 255 255 / .08); }
.ps-plan-reihe a:hover { background: rgb(0 0 0 / .1); }
.dark .ps-plan-reihe a:hover { background: rgb(255 255 255 / .14); }

/* ═══════════════════════════════════════ Grafiken

   Alles von Hand gezeichnet, als SVG aus PHP. Kein Diagrammpaket:
   Das waere ein Nachladen aus einem fremden Netz bei jedem
   Seitenaufruf - und damit ein Drittlandabruf, den die EU-Vorgabe
   ausschliesst. Fuer einen Ring, vierzehn Balken und einen
   Streifen braucht es auch keines.
   ═══════════════════════════════════════ */

/* ─────────────────────────────────── Der Ring */

.ps-mitring { display: flex; align-items: center; gap: 1rem; }

.ps-ring { width: 4rem; height: 4rem; flex-shrink: 0; transform: rotate(-90deg); }
.ps-ring circle { fill: none; stroke-width: 7; }
.ps-ring-grund { stroke: rgb(0 0 0 / .09); }
.dark .ps-ring-grund { stroke: rgb(255 255 255 / .12); }
.ps-ring-wert { stroke-linecap: round; transition: stroke-dasharray 300ms; }
.ps-ring-frei   { stroke: #1f7a4d; }
.ps-ring-sperre { stroke: #c0392b; }
.dark .ps-ring-frei   { stroke: #5cc48a; }
.dark .ps-ring-sperre { stroke: #ef7a6e; }

/* ─────────────────────────────────── Die Säulen */

.ps-saeulen { width: 100%; height: 3.25rem; display: block; }
.ps-saeulen-linie { stroke: rgb(0 0 0 / .12); stroke-width: .5; }
.dark .ps-saeulen-linie { stroke: rgb(255 255 255 / .15); }

/* Geprüft ist die Marke, Erledigt der Zustand "gut". Zwei Rollen,
   zwei Farben - nicht zwei Blautöne wie in jedem Baukasten. */
.ps-saeule-pruef { fill: #141311; }
.ps-saeule-erl   { fill: #1f7a4d; }
.dark .ps-saeule-pruef { fill: #ffd42e; }
.dark .ps-saeule-erl   { fill: #5cc48a; }

.ps-tupfer {
  display: inline-block;
  width: .5rem; height: .5rem;
  border-radius: 2px;
  margin: 0 .3rem 0 .7rem;
  vertical-align: baseline;
}
.ps-tupfer:first-child { margin-left: 0; }
.ps-tupfer-pruef { background: #141311; }
.ps-tupfer-erl { background: #1f7a4d; }
.dark .ps-tupfer-pruef { background: #ffd42e; }
.dark .ps-tupfer-erl { background: #5cc48a; }

.ps-achse {
  display: flex;
  justify-content: space-between;
  font-size: .6875rem;
  opacity: .5;
  margin-top: .25rem;
}

/* ─────────────────────────────────── Der Streifen */

.ps-streifen {
  display: flex;
  height: .625rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgb(0 0 0 / .06);
}
.dark .ps-streifen { background: rgb(255 255 255 / .08); }
.ps-streifen-teil { display: block; height: 100%; }

.ps-fuell-in_betrieb   { background: #1f7a4d; }
.ps-fuell-freigegeben  { background: #4da373; }
.ps-fuell-probebetrieb { background: #d99a1f; }
.ps-fuell-pruefung     { background: #c0392b; }
.ps-fuell-geschlossen  { background: #8d8a80; }

.ps-streifen-legende {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .9rem;
  margin-top: .55rem;
  font-size: .75rem;
}

/* ─────────────────────────────── Das Artzeichen

   Ohne graue Kachel darunter. Die Flaeche war ein Kasten, und
   Kaesten sind raus. */
.ps-befund-zeichen {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  opacity: .55;
}
.ps-befund.ps-dringend .ps-befund-zeichen { opacity: .8; }

/* ═══════════════════════════════════════ Bento

   Kästen - aber andere.

   Was vorher stand, war der Baukasten-Kasten: 1 Pixel grauer
   Rahmen, weiße Fläche, 10 Pixel Ecke. Den baut jedes Theme so,
   und genau deshalb sieht er nach nichts aus.

   Ein Kasten darf hier sein, wenn er NICHT gezeichnet, sondern
   gehoben ist: keine Linie, sondern ein Schatten, der ihn von der
   Fläche abhebt. Dazu unterschiedliche Größen - die wichtigste
   Kachel ist die größte. Das ist der Unterschied zwischen einem
   Raster und einem Bento.
   ═══════════════════════════════════════ */

/* Die Bühne bekommt einen Ton, sonst schwebt nichts.
   Reines Weiß auf reinem Weiß ergibt keinen Schatten. */
.fi-main, .fi-body { background: #f6f5f1; }
.dark .fi-main, .dark .fi-body { background: #121110; }

.ps-brett {
  display: grid;
  gap: .875rem;
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100vh - 24rem);
}

@media (min-width: 1240px) {
  .ps-brett {
    height: calc(100vh - 24rem);
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr) minmax(0, 1fr);
    /*
     * Alle Zeilen nach Inhalt.
     *
     * minmax(0, 1fr) hiess "darf bis null schrumpfen" - und genau
     * das tat die mittlere Zeile: 84 Pixel fuer 116 Pixel Inhalt.
     */
    grid-template-rows: auto auto auto;
  }

  /* Die Befundliste ist die Arbeit. Sie bekommt die ganze linke
     Spalte über alle drei Zeilen - nicht weil Platz da ist,
     sondern weil dort steht, was jemand gleich anfassen muss. */
  .ps-feld-befunde  { grid-column: 1; grid-row: 1 / -1; }
  .ps-feld-ring     { grid-column: 2; grid-row: 1; }
  .ps-feld-aufgaben { grid-column: 3; grid-row: 1; }
  .ps-feld-verlauf  { grid-column: 2 / -1; grid-row: 2; }
  .ps-feld-bestand  { grid-column: 2; grid-row: 3; }
  .ps-feld-betrieb  { grid-column: 3; grid-row: 3; }
}

/* ─────────────────────────────────── Die Kachel */

.ps-kachel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: .875rem 1.125rem 1rem;
  border-radius: 4px;
  background: #fff;
  /*
   * Zwei Schatten, nicht einer.
   *
   * Der erste ist hart und kurz - er setzt die Kante. Der zweite
   * ist weit und fast unsichtbar; er erzeugt die Tiefe. Ein
   * einzelner mittlerer Schatten sieht immer nach Baukasten aus.
   */
  box-shadow:
    0 1px 2px rgb(20 19 17 / .05),
    0 14px 30px -22px rgb(20 19 17 / .5);
}

.dark .ps-kachel {
  background: #1c1b18;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06);
}

/* Die alte Haarlinie zwischen den Kacheln hat ausgedient - der
   Abstand trennt jetzt. */
.ps-spalte > .ps-kachel + .ps-kachel { border-top: 0; padding-top: .875rem; }

.ps-kachel-kopf { padding: 0 0 .625rem; }
.ps-kachel-koerper { padding: 0; }
.ps-kachel-rolle { padding: 0; margin: 0 -.25rem 0 0; }

/* ─────────────────────────── Die Kopfzeile der Seite

   Ein Schatten unter der Kopfleiste, damit sie über dem Inhalt
   liegt statt daneben. Beim Rollen ist das der Unterschied
   zwischen "Leiste" und "Linie". */

.fi-topbar {
  box-shadow:
    0 1px 2px rgb(20 19 17 / .06),
    0 10px 26px -20px rgb(20 19 17 / .45);
  position: relative;
  z-index: 20;
}
.dark .fi-topbar { box-shadow: 0 1px 0 rgb(255 255 255 / .07); }

/* Die Seitenleiste liegt darunter, nicht darüber —
   aber NUR auf dem Schreibtisch.

   Dort ist sie fest verankert, und der Schatten der Kopfleiste
   (z-index 20) soll auf sie fallen.

   Auf dem Telefon ist dieselbe Seitenleiste eine Schublade mit
   einer Verdunklung davor (.fi-sidebar-close-overlay, z-index 30).
   Ohne Breitenangabe galt die 10 auch dort — und die Verdunklung
   lag über der Schublade: grauer Film, kein Tipp kam an. */
@media (min-width: 1024px) {
  .fi-sidebar { z-index: 10; }
}

/* ─────────────────────────────── Etwas mehr Luft

   Die Kennzahl darf größer sein, wenn sie auf einer eigenen
   Fläche steht - sie konkurriert dort mit nichts. */

.ps-kachel-zahl { font-size: 2rem; letter-spacing: -.02em; }
.ps-kachel-hut { font-size: .6875rem; letter-spacing: .08em; opacity: .5; }

/* Die Befundzeile verliert ihre Trennlinie zugunsten eines
   Hauchs Fläche beim Zeigen. Linien in einer Liste von zwanzig
   Zeilen sind zwanzig Linien. */
.ps-befund { border-bottom: 0; padding: .55rem .5rem .55rem .7rem; border-radius: 2px; }
.dark .ps-befund { border-bottom: 0; }
.ps-befund:hover { background: rgb(20 19 17 / .035); }
.dark .ps-befund:hover { background: rgb(255 255 255 / .05); }

/* Der linke Balken wird zur Pille, damit er zur Ecke passt. */
.ps-befund.ps-dringend, .ps-befund.ps-bald { box-shadow: none; position: relative; }
.ps-befund.ps-dringend::before,
.ps-befund.ps-bald::before {
  content: "";
  position: absolute;
  left: 0; top: .5rem; bottom: .5rem;
  width: 3px;
  border-radius: 999px;
}
.ps-befund.ps-dringend::before { background: #c0392b; }
.ps-befund.ps-bald::before { background: #a86a00; }
.dark .ps-befund.ps-dringend::before { background: #ef7a6e; }
.dark .ps-befund.ps-bald::before { background: #e0a63c; }

/* Posten brauchen keine Linie mehr - die Kachel rahmt schon. */
.ps-posten { border-bottom: 0; padding: .4rem 0; }
.dark .ps-posten { border-bottom: 0; }

/* Ein Kopf, der Etikett und Zahl auseinanderzieht. */
.ps-kopf-breit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

/* ═══════════════════════════ Keine gefüllten Zustände

   Die Regel, einmal ausgeschrieben, damit ich sie nicht wieder
   breche:

   Ein Kasten darf eine FLÄCHE abgrenzen (Kachel, Seitenleiste).
   Ein Kasten darf niemals einen ZUSTAND anzeigen - nicht aktiv,
   nicht ausgewählt, nicht beim Zeigen. Dafür gibt es Schrift,
   Balken und Farbe.

   Jede gefüllte Fläche, die auf eine Mausbewegung oder eine
   Auswahl reagiert, ist ein Box-Highlight und fliegt raus.
   ═══════════════════════════ */

/* Die Befundzeile: kein Teppich beim Zeigen. Der linke Balken
   wird kräftiger, das genügt als Rückmeldung. */
.ps-befund:hover,
.dark .ps-befund:hover { background: transparent; }
.ps-befund:hover .ps-befund-name { text-decoration: underline; text-underline-offset: 3px; }
.ps-befund:hover::before { width: 5px; }

/* Der Park-Reiter: fett und unterstrichen statt schwarzer Kasten. */
.ps-plan-reiter button {
  border: 0;
  padding: .35rem 0;
  margin-right: 1.25rem;
  border-radius: 0;
  opacity: .5;
}
.dark .ps-plan-reiter button { border: 0; }
.ps-plan-reiter button.jetzt,
.dark .ps-plan-reiter button.jetzt {
  background: transparent;
  color: inherit;
  border: 0;
  opacity: 1;
  font-weight: 700;
  box-shadow: inset 0 -2px 0 currentColor;
}
.ps-plan-reiter button:hover { opacity: .85; }

/* Die Anlagen ohne Position: Text mit Trennpunkt, keine Pillen. */
.ps-plan-reihe { gap: .15rem .9rem; }
.ps-plan-reihe a,
.dark .ps-plan-reihe a,
.ps-plan-reihe a:hover,
.dark .ps-plan-reihe a:hover {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.ps-plan-reihe a { opacity: .75; }
.ps-plan-reihe a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.ps-plan-reihe a + a::before { content: "·"; margin-right: .9rem; opacity: .4; }

/* Filament-Tabellen: keine Zeilenfläche beim Zeigen. */
.fi-ta-row:hover, .fi-ta-row:hover > * { background: transparent !important; }

/* Die Zähler in der Navigation waren weiße Kästchen auf Gelb. */
.fi-sidebar .fi-badge {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-weight: 700;
}

/* ═══════════════════════════ Die Seitenleiste rollt nicht

   Ein Rollbalken in der Navigation heißt: Es passt nicht. Die
   richtige Antwort darauf ist nicht ein Balken, sondern weniger
   Luft. Elf Einträge und fünf Gruppentitel passen in 900 Pixel,
   wenn man sie nicht auf Fingergröße aufbläst.
   ═══════════════════════════ */

.fi-sidebar .fi-sidebar-nav {
  overflow: visible;
  max-height: none;
  height: auto;
  padding: .75rem .75rem .5rem;
}

/* Gruppen: der Abstand davor trennt, nicht die Leerzeile danach.

   DIESE DREI ZEILEN WIRKEN NICHT MEHR - der Block "Die Navigation
   enger" weiter unten setzt dieselben Eigenschaften noch einmal und
   gewinnt, weil er spaeter steht. Sie bleiben als Spur der
   Begruendung stehen; geaendert wird unten. */
.fi-sidebar .fi-sidebar-group { margin-top: .875rem; }
.fi-sidebar .fi-sidebar-group:first-child { margin-top: 0; }
.fi-sidebar .fi-sidebar-group-label { margin-bottom: .1rem; }

/* Einträge enger: 34 statt 44 Pixel. Die Navigation wird mit der
   Maus bedient, nicht mit Handschuhen - das gilt für die Messrunde
   am Beckenrand, nicht für das Menü im Büro. */
.fi-sidebar .fi-sidebar-item-btn {
  /*
   * 30 statt 34 Pixel.
   *
   * Gemessen: Die Box brauchte 842 Pixel und hatte 808. Zwoelf
   * Eintraege mal vier Pixel schliessen die Luecke. Weniger geht
   * nicht - darunter beruehren sich die Symbole.
   */
  padding-top: .2rem;
  padding-bottom: .2rem;
  gap: .6rem;
}
.fi-sidebar .fi-sidebar-item-btn svg { width: 1.1rem; height: 1.1rem; }
.fi-sidebar .fi-sidebar-item-label { font-size: .875rem; }

/* Der Pfeil zum Einklappen der Gruppe braucht keine Fläche. */
.fi-sidebar .fi-icon-btn:hover { background: transparent !important; }

/* Der aktive Balken sitzt INNERHALB der Box - sonst schneidet ihn
   die Rundung an. Dafuer rueckt der Eintrag ein Stueck ein. */
.fi-sidebar .fi-sidebar-nav { padding-left: 1.1rem; }
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-btn::before { left: -.55rem; }

/* ═══════════════════════════ Die Badges

   Hier saßen die Box-Highlights, die ich dreimal übersehen habe:
   In den Tabellen trägt jeder Wert ein gefülltes Kästchen mit
   Rahmen - "Bereich", "Wasseranlage", "In Betrieb", dazu jede
   Zahl. Bei acht Spalten und zwanzig Zeilen sind das
   hundertsechzig kleine Kästen auf einer Seite.

   Filament nennt sie Badges. Sie sind der Grund, warum eine
   Standard-Tabelle aussieht wie ein Formular aus dem Baukasten.

   Die Farbe trägt die Bedeutung ohnehin - die Fläche darunter
   trägt nichts.
   ═══════════════════════════ */

.fi-badge {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-weight: 600;
  /* Ohne Kästchen braucht die Schrift etwas mehr Gewicht, sonst
     verschwindet der Wert zwischen den Spalten. */
  font-size: .8125rem;
}

/* Das Symbol im Badge bleibt - es ist die Form zur Farbe, genau
   das, was die Zustandsmarke sonst leistet. */
.fi-badge svg { opacity: .9; }

/* Der Zähler am Filtersymbol war ein gelber Kreis über dem
   Trichter. */
.fi-ta-filters-trigger .fi-badge,
.fi-icon-btn .fi-badge {
  font-size: .6875rem;
  font-weight: 700;
}

/* Auch die Tabellenkopfzeile braucht keine graue Fläche. */
.fi-ta-header-cell, .fi-ta-header { background: transparent !important; }

/* ═══════════════════════════ Die Navigation enger

   28 Pixel Lücke plus 14 Pixel Abstand ergeben 42 Pixel zwischen
   zwei Gruppen. Bei fünf Gruppen sind das 210 Pixel Leere in
   einer Spalte, die ohnehin knapp ist.
   ═══════════════════════════ */

/*
 * Der gap sitzt auf nav-GROUPS, nicht auf nav.
 *
 * Gemessen: 38 Pixel Luecke zwischen zwei Gruppen - 9,6 aus der
 * Regel darunter, 28 von hier. Mein erstes "gap: 0" traf den
 * falschen Container und tat nichts.
 */
.fi-sidebar .fi-sidebar-nav,
.fi-sidebar .fi-sidebar-nav-groups { gap: 0 !important; }

/*
 * .5 statt 1rem, und der Gruppentitel ohne Polster.
 *
 * WIEDER EINE MESSUNG, KEINE GESCHMACKSFRAGE
 *
 * Mit dem Tierbestand kamen zwei Eintraege dazu (Tierbestand,
 * Gehegebuch). Danach brauchte die Box 999 Pixel; das Fenster gibt
 * 1000 her, und die Pruefskripte lassen 1040 fuer die ganze Seite
 * zu. JEDE Seite der Suite stand damit bei 1077 und rollte - auch
 * die, die mit dem Modul nichts zu tun haben. Gemessen wurde das
 * am Gehegebuch und zur Gegenprobe an Lager und
 * Fremdfirmenbesuchen: dieselbe Zahl, weil es die Seitenleiste ist
 * und nicht der Inhalt.
 *
 * Die Eintraege selbst geben nichts mehr her - ihre Hoehe steht
 * seit dem 21.10. bei 26 Pixeln, und darunter beruehren sich die
 * Symbole. Hergegeben haben es die vier Gruppentitel: 42 Pixel
 * Flaeche je Titel fuer eine Zeile in 11 Pixel Schrift. Ohne das
 * obere Polster und mit halbem Abstand davor bleiben die Gruppen
 * sichtbar getrennt - und die Seite passt wieder in ein Fenster.
 */
.fi-sidebar .fi-sidebar-group { margin-top: .5rem; }
.fi-sidebar .fi-sidebar-group:first-child { margin-top: 0; }
.fi-sidebar .fi-sidebar-group > ul,
.fi-sidebar .fi-sidebar-group > div { gap: 0 !important; }
.fi-sidebar .fi-sidebar-group-label {
  margin-bottom: .15rem;
  padding-top: .1rem !important;
  padding-bottom: 0 !important;
  line-height: 1.2;
}


/* ═══════════════════════════ Ohne Urteilsband

   Es stand bis zum 21.10. ueber dem Bento und sagte in drei
   Zeilen, was die Kacheln darunter ohnehin zeigen - samt einem
   Datum, das seit der Uhr auch in der Kopfleiste steht.

   Patrick: "dieser Teil kann verschwinden... unnoetig."

   Die Hoehe, die er gekostet hat, geht ans Bento. */

/* Die 150 Pixel, die das Band gefressen hat, gehen ans Bento. */
.ps-brett { min-height: calc(100vh - 12.25rem); }
@media (min-width: 1240px) {
  .ps-brett { height: calc(100vh - 12.25rem); }
}

/* ═══════════════════════════════════════ Der Schichtplan

   Ein Raster: Menschen nach unten, Tage nach rechts. Eine Tabelle
   beantwortet "welche Schichten gibt es", ein Raster beantwortet
   "ist der Dienstag besetzt" - und das ist die Frage, die jemand
   stellt, der einteilt.
   ═══════════════════════════════════════ */

.ps-wochenwahl {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ps-wochenwahl button {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border: 0; border-radius: 2px;
  background: transparent; color: inherit;
  font-size: 1.125rem; cursor: pointer;
}
.ps-wochenwahl button:hover { background: rgb(20 19 17 / .06); }
.dark .ps-wochenwahl button:hover { background: rgb(255 255 255 / .08); }
.ps-wochenwahl .ps-heute {
  width: auto; padding: 0 .7rem;
  font-size: .8125rem; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgb(20 19 17 / .15);
}

.ps-plan-zahlen { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .8125rem; }

.ps-abstand-weg { margin-bottom: .75rem; }

/* ─────────────────────────────────── Das Raster */

.ps-raster-kasten {
  background: #fff;
  border-radius: 4px;
  padding: .25rem 1rem 1rem;
  box-shadow: 0 1px 2px rgb(20 19 17 / .05), 0 14px 30px -22px rgb(20 19 17 / .5);
}
.dark .ps-raster-kasten {
  background: #1c1b18;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06);
}

.ps-raster { table-layout: fixed; }
.ps-raster th, .ps-raster td { vertical-align: top; }

/* Die Namensspalte bleibt stehen, wenn das Raster seitlich rollt.
   Ohne sie weiss nach drei Tagen niemand mehr, wessen Zeile er
   gerade liest. */
.ps-raster-name {
  position: sticky; left: 0; z-index: 2;
  /*
   * 14.5rem statt 13: Seit dem Bild neben dem Namen fehlen der Zeile
   * zweiundzwanzig Pixel plus Abstand, und "Brandt, Kathrin" wurde zu
   * "Brandt, Kat...". Ein Avatar, der den Namen abschneidet, hilft beim
   * Suchen nicht.
   */
  width: 14.5rem; min-width: 14.5rem;
  background: #fff;
  padding-right: 1rem !important;
}
.dark .ps-raster-name { background: #1c1b18; }

.ps-raster-tag { text-align: left; width: 8.5rem; }
.ps-raster-datum { opacity: .55; margin-left: .25rem; font-weight: 400; }

/* Heute faellt auf - ueber eine Kante, nicht ueber eine Flaeche. */
.ps-raster-heute { box-shadow: inset 2px 0 0 #ffcc00; }

.ps-raster-feld { padding: .4rem .5rem .4rem .6rem !important; }

/* ─────────────────────────────────── Die Schicht */

.ps-schicht {
  display: block;
  padding: .3rem .5rem;
  margin-bottom: .25rem;
  border-radius: 2px;
  font-size: .75rem;
  line-height: 1.3;
  /*
   * Geplant ist blass, bestaetigt ist fest.
   *
   * Der Unterschied muss im Vorbeigehen lesbar sein: Eine Woche
   * voller blasser Felder heisst, dass die Einteilung noch
   * niemand gesehen hat.
   */
  background: rgb(20 19 17 / .05);
  box-shadow: inset 2px 0 0 #8d8a80;
}
.dark .ps-schicht { background: rgb(255 255 255 / .07); }

.ps-schicht-bestaetigt {
  background: rgb(31 122 77 / .1);
  box-shadow: inset 2px 0 0 #1f7a4d;
}
.dark .ps-schicht-bestaetigt {
  background: rgb(92 196 138 / .13);
  box-shadow: inset 2px 0 0 #5cc48a;
}

.ps-schicht b { display: block; font-variant-numeric: tabular-nums; font-weight: 700; }
.ps-schicht i {
  display: block; font-style: normal; opacity: .65;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ps-frei-feld { opacity: .25; font-size: .875rem; }

/* ═══════════════════════════════════════ Listen im Fenster

   Gemessen am 20.10.2026 über alle vierzehn Seiten: Jede Liste
   rollte die ganze Seite mit. Bestand 3548 Pixel, Messrunde 3073,
   Nachweise 304 — bei 900 Pixeln Fensterhöhe.

   Die Regel aus suite-design.md gilt auch hier: Was zu lang ist,
   rollt INNERHALB seines Kastens, nicht als ganze Seite. Dann
   bleiben Kopfzeile, Suchfeld, Filter und Blätterleiste stehen,
   und nur die Zeilen bewegen sich.

   Eine Regel für alle Listen, nicht elf Stück - dieselbe Haltung
   wie bei der Rollentabelle.
   ═══════════════════════════════════════ */

.fi-ta-ctn {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /*
   * Abgezogen: Kopfleiste (65), Seitentitel samt Pfad und Knopf
   * (150), Abstände (40), Blätterleiste (65). Gemessen, nicht
   * geschätzt - bei 900 Pixeln bleiben rund 580 für die Zeilen.
   */
  max-height: calc(100vh - 14rem);
}

/*
 * Die ganze Kette, nicht nur die Enden.
 *
 * fi-ta-main liegt zwischen Huelle und Inhalt. Ohne
 * Flex-Einstellung dort ist der Inhalt kein Flex-Kind, und
 * flex:1 wirkt nicht - die Hoehe laeuft durch, als haette man
 * nichts gesetzt.
 */
.fi-ta-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

/* Nur der Zeilenbereich rollt. */
.fi-ta-content-ctn {
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  scrollbar-width: thin;
}

/*
 * Die Kopfzeile bleibt stehen.
 *
 * Ohne sie weiß nach fünfzehn Zeilen niemand mehr, welche Spalte
 * "Stufe" ist und welche "Gültig bis". Das ist der Unterschied
 * zwischen einer rollenden Liste und einer unbrauchbaren.
 */
.fi-ta-header-cell {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
}
.dark .fi-ta-header-cell { background: #1c1b18; }

/* Such- und Filterzeile sowie Blätterleiste rollen nicht mit. */
.fi-ta-header-ctn, .fi-ta-footer-ctn { flex: 0 0 auto; }

/*
 * Auf dem Telefon keine feste Höhe.
 *
 * Dort ist die Seite ohnehin eine lange Bahn, und ein Kasten mit
 * eigenem Rollbalken in einer rollenden Seite ist eine Falle: Der
 * Finger weiß nicht, was er gerade bewegt.
 */
@media (max-width: 1023px) {
  .fi-ta-ctn { max-height: none; }
  /*
   * Hier NICHT overflow-y zuruecksetzen.
   *
   * "visible" neben einem overflow-x:auto macht auch das zu
   * "visible" - der Browser erlaubt die Mischung nicht. Die
   * Tabelle ragte dadurch seitlich aus dem Bild, statt in ihrem
   * Kasten zu rollen. Die aufgehobene Hoehenbegrenzung genuegt.
   */
}

/* ─────────────────────────── Das Bento auf dem Telefon

   Gemessen: fi-main hatte 560 Pixel Inhalt in einem 390 Pixel
   breiten Kasten. Ursache sind die Mindestbreiten aus dem
   Spaltenraster, die unterhalb von 1240 Pixeln nicht mehr gelten
   sollten - und eine Befundzeile, die nicht umbricht. */

@media (max-width: 1023px) {
  .ps-brett {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 0;
  }
  .ps-brett > .ps-kachel { grid-column: 1 !important; grid-row: auto !important; }

  .ps-kachel, .ps-spalte { min-width: 0; max-width: 100%; }

  /* Die Befundliste darf auf dem Telefon umbrechen - ein
     abgeschnittener Anlagenname nützt dort niemandem. */
  .ps-befund { flex-wrap: wrap; }
  .ps-befund-rechts { margin-left: auto; }

  .ps-saeulen { width: 100%; }
}


/* ═══════════════════════════ Die letzten vier Befunde

   Gemessen am 20.10.2026 ueber vierzehn Seiten und zwei
   Bildschirmgroessen. Was hier steht, hat eine Zahl hinter sich -
   keine Schaetzung.
   ═══════════════════════════ */

/* ── Der Schichtplan rollt in sich ───────────────────────────── */

.ps-raster-kasten {
  max-height: calc(100vh - 21.5rem);
  overflow: auto;
  scrollbar-width: thin;
}

/* Kopfzeile und Namensspalte bleiben beim Rollen stehen. Ohne
   beides ist ein Raster nach fuenf Zeilen unlesbar. */
.ps-raster thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
}
.dark .ps-raster thead th { background: #1c1b18; }
.ps-raster thead th.ps-raster-name { z-index: 4; }

/* ── Die Messrunde ───────────────────────────────────────────── */

/*
 * Nicht die einzelne Reihe begrenzen.
 *
 * Es gibt eine ps-messreihe JE OBJEKT. Die erste war 382 Pixel
 * hoch bei einer Grenze von 628 - die Regel tat also nichts,
 * waehrend die uebrigen vierundzwanzig die Seite auf 3973 Pixel
 * zogen.
 *
 * Begrenzt wird deshalb der Seiteninhalt der Messrunde: ein
 * Rollbereich fuer alle Abschnitte zusammen, mit den Kennzahlen
 * und der Kopfzeile ausserhalb.
 */
.fi-page-content:has(.ps-messreihe) {
  max-height: calc(100vh - 14rem);
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: .35rem;
}

@media (max-width: 1023px) {
  .fi-page-content:has(.ps-messreihe) {
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 1023px) {
  .ps-raster-kasten, .ps-messreihe { max-height: none; overflow: visible; }
  /* Das Raster muss auf dem Telefon seitlich rollen koennen -
     sieben Tage passen nicht auf 390 Pixel. */
  .ps-raster-kasten { overflow-x: auto; }
}

/* ── Tabellen auf dem Telefon ────────────────────────────────── */

/*
 * Filament setzt kein overflow-x auf den Inhaltskasten.
 *
 * Bei sieben Spalten auf 390 Pixeln ragt die Tabelle damit aus
 * dem Bild - gemessen auf elf von vierzehn Seiten. Eine Tabelle,
 * die seitlich rollt, ist unschoen; eine, die aus dem Bild laeuft,
 * ist kaputt.
 */
@media (max-width: 1023px) {
  .fi-ta-content-ctn { overflow-x: auto; }
}


/* ═══════════════════════════ Spaltenbreiten

   Patrick am 20.10.: "Bitte die Spaltenabstaende anpassen. Text
   braucht immer etwas mehr space als andere fixe Spalten."

   Der Grund, warum das vorher nicht ging: Bei table-layout:auto
   sind Breitenangaben nur ein Vorschlag - der Browser verteilt
   nach Inhalt, und die Textspalte am Ende bekommt den Rest.
   Gemessen: 30 Prozent angegeben, 575 Pixel zugeteilt.

   Festes Layout gilt bewusst nur dort, wo alle Spalten eine
   Breite haben. Eine Tabelle ohne Angaben wuerde bei "fixed" alle
   Spalten gleich breit machen - schlimmer als das Problem.
   ═══════════════════════════ */

.fi-resource-bestand .fi-ta-table { table-layout: fixed; }

/*
 * Bei festem Layout muss jede Zelle selbst entscheiden, was mit
 * zu langem Inhalt passiert. Text bricht um, Zahlen und Daten
 * nicht - ein umgebrochenes Datum ist unleserlich.
 */
/*
 * Umbrechen statt abschneiden.
 *
 * Bei festem Layout schneidet eine zu schmale Zelle ab - und
 * abgeschnittener Text war der Ausgangspunkt dieser ganzen Runde.
 * Namen und Pfade duerfen deshalb umbrechen; Datum und Zahl nicht,
 * ein umgebrochenes Datum ist unleserlich.
 */
.fi-resource-bestand .fi-ta-cell { overflow-wrap: break-word; }
.fi-resource-bestand .fi-ta-cell .fi-ta-text-item-label,
.fi-resource-bestand .fi-ta-cell .fi-ta-text-item-description {
  white-space: normal;
  text-overflow: clip;
}


/* ═══════════════════════════════ Das Zahlenband über den Listen

   Vier Kennzahlen über jeder Liste. Der Grund dahinter: Wer die
   Aufgabenliste öffnet, sieht 65 Zeilen und weiß nicht, ob das
   viel ist. Drei Zahlen darüber beantworten das in einer Sekunde.

   Kein Kasten je Feld - vier Kästen nebeneinander lesen sich als
   vier Knöpfe, und anzuklicken gibt es hier nichts. Eine Fläche,
   darin Haarlinien. */

.ps-kopfband {
  /* Nicht ps-zahlfeld: Den Namen hat die Messrunde fuer ihre
     Eingabefelder - mit 2px Rahmen. Der stand dann um jede
     Kennzahl. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 1rem;
  padding: .875rem 1.125rem;
  border-radius: 4px;
  background: #fff;
  /* Dieselben zwei Schatten wie die Kachel - sonst sind es zwei
     Gestaltungen im selben Bild. */
  box-shadow:
    0 1px 2px rgb(20 19 17 / .05),
    0 14px 30px -22px rgb(20 19 17 / .5);
}

.dark .ps-kopfband {
  background: #1c1b18;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06);
}

.ps-kopfzahl { min-width: 0; padding: 0 1.125rem; }
.ps-kopfzahl:first-child { padding-left: 0; }
.ps-kopfzahl:last-child { padding-right: 0; }
.ps-kopfzahl + .ps-kopfzahl { border-left: 1px solid rgb(20 19 17 / .09); }
.dark .ps-kopfzahl + .ps-kopfzahl { border-left-color: rgb(255 255 255 / .12); }

.ps-kopfzahl-hut {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .55;
  /* Lange Überschriften brechen, statt die Spalte zu sprengen.
     "Meldepflichtig, nicht gemeldet" ist der Prüfstein. */
  line-height: 1.3;
}

.ps-kopfzahl-zahl {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-top: .2rem;
}

/* Die Zeile darunter bleibt stehen, auch wenn sie leer ist -
   sonst stehen die Zahlen der Nachbarfelder nicht auf einer
   Linie. */
.ps-kopfzahl-dazu {
  font-size: .8125rem;
  opacity: .6;
  line-height: 1.35;
  min-height: 1.1rem;
}

/* Auf schmalen Geräten zwei nebeneinander. Die Haarlinie muss
   dann in jeder zweiten Spalte weg, sonst steht eine Linie am
   linken Rand. */
@media (max-width: 900px) {
  .ps-kopfband { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .9rem; }
  .ps-kopfzahl:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .ps-kopfzahl:nth-child(2n) { padding-right: 0; }
}

@media (max-width: 420px) {
  .ps-kopfband { grid-template-columns: minmax(0, 1fr); row-gap: .75rem; }
  .ps-kopfzahl { border-left: 0 !important; padding: 0; }
  .ps-kopfzahl + .ps-kopfzahl {
    border-top: 1px solid rgb(20 19 17 / .09);
    padding-top: .75rem;
  }
  .ps-kopfzahl-dazu { min-height: 0; }
}

/*
 * Das feste Fenster bleibt.
 *
 * Die Tabelle stand auf calc(100vh - 14rem). Das Band darüber ist
 * gemessene 5.5rem hoch samt Abstand - ohne Abzug rollt die Seite,
 * und genau das ist hier der Fehler, nicht der Schönheitsfehler.
 *
 * :has() statt einer zusätzlichen Klasse: Die Seite weiß selbst,
 * ob ein Band da ist.
 */
.fi-main:has(.ps-kopfband) .fi-ta-ctn {
  /* 23rem, nicht 19.5rem: Mit 19.5 rollte die Seite um gemessene
     50 px. Die Zahl ist nicht gerechnet, sondern nachgemessen -
     Filament bringt eigene Abstaende mit, die sich nicht aus der
     Bandhoehe ableiten lassen. */
  max-height: calc(100vh - 23rem);
}


/* ═══════════════════════ Die Schublade auf dem Telefon

   Keine Box.

   Auf dem Schreibtisch liegt die gelbe Fläche als Kachel auf dem
   hellen Grund der Seite - rundherum derselbe Grund wie unter dem
   Inhalt. Das stimmt dort.

   Auf dem Telefon ist dieselbe Fläche eine Schublade über einer
   verdunkelten Seite. Der Rand zeigt dann nicht den Grund, sondern
   den Schatten darüber, und die Box schwimmt in einem schwarzen
   Rahmen. Eine Kachel braucht eine Fläche, auf der sie liegt.

   Die Grenze ist dieselbe wie bei der Stapelzahl weiter oben:
   1024 px - darüber ist die Seitenleiste fest, darunter eine
   Schublade.
   ═══════════════════════ */

@media (max-width: 1023.98px) {
  .fi-sidebar .fi-sidebar-nav {
    /* Bündig, nicht eingerückt. */
    margin: 0;
    border-radius: 0;
    /* Volle Höhe statt auto: Sonst endet das Gelb irgendwo in der
       Mitte und darunter steht die verdunkelte Seite durch. */
    height: 100%;
    max-height: none;
    /* Ohne Abstand zum Rand braucht der Inhalt wieder etwas mehr
       Luft nach innen - und oben Platz für die Kopfleiste. */
    padding: 1.25rem 1rem 2rem 1.4rem;
    /* Der Schatten lag auf dem hellen Grund richtig. Über der
       Verdunklung sieht man ihn nicht, er macht die Kante nur
       weich. */
    box-shadow: none;
    /* Dreizehn Einträge und fünf Gruppentitel passen auf einem
       kurzen Telefon nicht - hier darf die Navigation rollen. Auf
       dem Schreibtisch ist ein Rollbalken ein Fehler, hier ist er
       die einzige ehrliche Antwort. */
    overflow-y: auto;
    scrollbar-width: thin;
  }

  /* Die Einträge dürfen hier größer sein: Das ist der Finger, nicht
     die Maus. */
  .fi-sidebar .fi-sidebar-item-btn {
    padding-top: .45rem;
    padding-bottom: .45rem;
  }
  .fi-sidebar .fi-sidebar-item-label { font-size: .9375rem; }

  /* Der Logostreifen bleibt weiss.
     Er gehoert zum Kopf der Anwendung, nicht zur Navigation -
     "voll" meint die Flaeche darunter, nicht den Streifen
     darueber. */
}


/* ═══════════════════════════════════ Datum und Uhr

   Oben links in der Kopfleiste, gleich hinter der Kante der
   Seitenleiste.

   DIE SEKUNDEN SIND LEISER ALS DIE MINUTEN

   Eine tickende Ziffer zieht das Auge an. In einer Software, in
   der man arbeitet, ist das genau einmal interessant und danach
   stoerend. Deshalb steht die Sekunde kleiner und blasser da:
   Sie beweist, dass die Uhr laeuft, ohne um Aufmerksamkeit zu
   bitten.

   FESTE ZIFFERNBREITE

   Ohne tabular-nums wackelt die Zeile im Sekundentakt, weil die
   1 schmaler ist als die 8. Das faellt sofort auf und sieht nach
   Pfusch aus. */

.ps-uhr {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

/*
 * Rechts der Seitenleiste, nicht links vom Logo.
 *
 * Der Render-Haken sitzt am Anfang der Kopfleiste - das ist VOR
 * dem Logo. Statt den Haken zu wechseln (das Logo steht selbst in
 * der Spalte der Seitenleiste) wird die Uhr absolut an die Kante
 * gesetzt.
 *
 * --sidebar-width setzt Filament in base.blade.php. Damit stimmt
 * die Lage auch, wenn die Seitenleiste eingeklappt wird.
 */
.fi-topbar > .ps-uhr {
  position: absolute;
  left: calc(var(--sidebar-width, 18rem) + .75rem);
  top: 50%;
  transform: translateY(-50%);
  /* Die Kopfleiste traegt bereits position: relative (Abschnitt
     "Die Kopfzeile der Seite"), sonst haette das hier keinen
     Bezugspunkt. */
}

.ps-uhr-tag {
  font-size: .8125rem;
  color: #6b6960;
}

.ps-uhr-zeit {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: .9375rem;
  color: #141311;
  letter-spacing: .01em;
}

/* Die Sekunde: kleiner und blasser. Sie beweist, dass die Uhr
   laeuft - mehr soll sie nicht. */
.ps-uhr-sek {
  font-size: .75rem;
  font-weight: 600;
  opacity: .45;
}

.dark .ps-uhr-tag { color: #a9a596; }
.dark .ps-uhr-zeit { color: #e8e5db; }

/* Auf dem Telefon steht an dieser Stelle der Menueknopf. */
.ps-uhr-mobil { display: none; }

@media (max-width: 1023.98px) {
  .fi-topbar > .ps-uhr { display: none; }

  /*
   * Stattdessen oben auf dem Dashboard, ueber dem Brett - und
   * NUR die Uhrzeit.
   *
   * Das Datum steht drei Zeilen darueber schon im Urteilssatz
   * ("MITTWOCH, 21. OKTOBER"). Zweimal dasselbe Datum auf einem
   * Telefonbildschirm ist kein Dienst, sondern Fuellstoff.
   */
  /*
   * Auf der Hoehe der Ueberschrift, auf der anderen Seite.
   *
   * Die Uhr steht im Blade weiter unten, soll aber oben neben
   * "Dashboard" erscheinen. Kein Element in der Kette hatte
   * position: relative - .fi-page bekommt deshalb einen
   * Bezugspunkt, und die Uhr liegt absolut darin.
   *
   * 2.25rem Hoehe, mittig ausgerichtet: Das ist die Zeilenhoehe
   * der Ueberschrift (gemessen 32 px), damit beide auf einer
   * Linie sitzen statt nur ungefaehr.
   */
  .fi-page { position: relative; }

  .ps-uhr-mobil {
    position: absolute;
    /*
     * 2rem, nicht 0.
     *
     * .fi-page traegt oben eine Polsterung - gemessen 32 px. Mit
     * top: 0 sass die Uhr genau diese 32 px ueber der
     * Ueberschrift. Der Wert ist nachgemessen, nicht geraten:
     * Titel bei y=96, Uhr bei y=64.
     */
    top: 2rem;
    right: 0;
    height: 2rem;
    display: flex;
    align-items: center;
    padding: 0;
  }
  .ps-uhr-mobil .ps-uhr-tag { display: none; }
  .ps-uhr-mobil .ps-uhr-zeit { font-size: 1.0625rem; }
}



/* ═══════════════════════════════════ Das Suchfeld

   Laenger und mittig - aber mittig im INHALTSBEREICH, nicht im
   Fenster.

   Mittig im Fenster laege es zur Haelfte ueber der Seitenleiste,
   und auf schmaleren Bildschirmen unter der Uhr. Der Bezugspunkt
   ist deshalb die Kante der Seitenleiste, dieselbe Variable wie
   bei der Uhr.

   Erst ab 1280 px: Darunter reicht der Platz zwischen Uhr und
   Benutzerzeichen nicht fuer eine Mitte, die diesen Namen
   verdient - dort wird es nur breiter. */

@media (min-width: 1024px) {
  .fi-topbar .fi-global-search-ctn { width: 22rem; }
}

@media (min-width: 1280px) {
  .fi-topbar .fi-global-search-ctn {
    position: absolute;
    /* Mitte zwischen Kante der Seitenleiste und rechtem Rand. */
    left: calc(var(--sidebar-width, 18rem)
               + (100% - var(--sidebar-width, 18rem)) / 2);
    transform: translateX(-50%);
    width: clamp(24rem, 34vw, 40rem);
  }
}


/* ═══════════════════════════════════ Der Anruf-Knopf

   Im Schichtplan neben dem Namen.

   LEISE, BIS MAN IHN BRAUCHT

   Er steht in jeder Zeile - also bei zwanzig Leuten zwanzigmal.
   Zwanzig gruene Telefonhoerer waeren ein Weihnachtsbaum.
   Deshalb grau und klein, und die Nummer erscheint erst beim
   Zeigen. Wer ihn braucht, sucht ihn ohnehin gezielt.

   DIE FLAECHE IST GROESSER ALS DAS SYMBOL

   Auf dem Telefon wird er mit dem Daumen getroffen. Das Symbol
   misst 14 px, die Trefferflaeche 2.25rem - das ist der
   Unterschied zwischen "geht" und "geht beim dritten Versuch". */

/*
 * Name und Anruf-Knopf in einer Zeile.
 *
 * .ps-befund-name ist display: block (fuer das Abschneiden
 * langer Namen mit Puenktchen). Der Knopf rutschte dadurch
 * darunter - das sah aus wie ein zweites Feld statt wie ein
 * Zusatz zum Namen.
 *
 * Die Zelle wird zur Reihe, der Name darf schrumpfen, der Knopf
 * nicht.
 */
.ps-raster-name .ps-befund-name {
  /*
   * inline-block, nicht block.
   *
   * Die Zelle traegt Name UND Rolle untereinander. Der erste
   * Versuch machte die ganze Zelle zur Reihe - dann stand die
   * Rolle neben dem Namen und beide wurden abgeschnitten.
   *
   * So bleibt die Rolle ihre eigene Zeile, und nur der Knopf
   * stellt sich neben den Namen. Die Hoechstbreite laesst Platz
   * fuer ihn, damit lange Namen ihn nicht verdraengen.
   */
  display: inline-block;
  max-width: calc(100% - 2.5rem);
  vertical-align: middle;
}
.ps-raster-name .ps-anruf { vertical-align: middle; }

.ps-anruf {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 2.25rem;
  padding: 0 .35rem;
  margin-left: .35rem;
  border-radius: 2px;
  color: #6b6960;
  text-decoration: none;
  vertical-align: middle;
  transition: color 120ms, background 120ms;
}

.ps-anruf svg { width: .875rem; height: .875rem; flex: none; }

/* Die Nummer erscheint erst beim Zeigen - in der Ruhe zaehlt
   der Name, nicht die Ziffernfolge. */
.ps-anruf-nummer {
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 160ms ease, opacity 160ms ease;
}

.ps-anruf:hover,
.ps-anruf:focus-visible {
  color: #141311;
  background: rgb(20 19 17 / .06);
}

.ps-anruf:hover .ps-anruf-nummer,
.ps-anruf:focus-visible .ps-anruf-nummer {
  max-width: 9rem;
  opacity: .75;
}

.dark .ps-anruf { color: #a9a596; }
.dark .ps-anruf:hover, .dark .ps-anruf:focus-visible {
  color: #e8e5db;
  background: rgb(255 255 255 / .08);
}

/* Auf dem Telefon steht die Nummer immer da: Dort gibt es kein
   Zeigen, nur Tippen - und ein Knopf ohne Beschriftung ist
   dann ein Raten. */
@media (hover: none) {
  .ps-anruf-nummer { max-width: 9rem; opacity: .75; }
}


/* ═══════════════════════════════════ Kantiger

   Patrick: "viel kantiger, deutlich kantiger".

   Zwei Drittel der Rundungen auf dem Bildschirm stammen nicht
   aus dieser Datei, sondern aus Filaments uebersetztem
   Stylesheet - Knoepfe, Eingabefelder, Tabellen, Dialoge,
   Abzeichen. Filament rechnet sie alle ueber vier Variablen.

   Ohne diesen Block waere die Suite halb kantig und halb rund,
   und das ist schlimmer als durchgehend rund.

   DIE STAFFEL BLEIBT EINE STAFFEL

   Nicht alles auf denselben Wert: Was vorher runder war als
   sein Nachbar, bleibt es - nur auf kleinerem Fuss. Sonst
   verschwindet die Ordnung, die die Abstufung ausdrueckt.

   WAS NICHT ANGEFASST WIRD

   Kreise und Kapseln (999px, 50%): Benutzerzeichen,
   Zustandspunkte, Schalter. Das sind keine abgerundeten Ecken,
   und wer sie kantig macht, macht sie kaputt. */

:root {
  --radius-sm: .125rem;   /*  4px →  2px */
  --radius-md: .1875rem;  /*  6px →  3px */
  --radius-lg: .1875rem;  /*  8px →  3px */
  --radius-xl: .25rem;    /* 12px →  4px */
}

/*
 * Tailwinds eigene Klassen rechnen nicht ueber die Variablen
 * oben, sondern tragen den Wert fest im Namen. Filament benutzt
 * sie an einigen Stellen direkt.
 */
.rounded-sm { border-radius: .125rem !important; }
.rounded, .rounded-md { border-radius: .1875rem !important; }
.rounded-lg { border-radius: .1875rem !important; }
.rounded-xl { border-radius: .25rem !important; }
.rounded-2xl, .rounded-3xl { border-radius: .25rem !important; }

/* Kreise und Kapseln bleiben, was sie sind. */
.rounded-full { border-radius: 9999px !important; }


/* ═══════════════════════ Das Zahlenband filtert

   Die Reiter sind entfallen - sie zeigten dieselben Zahlen noch
   einmal, nur kleiner. Jetzt filtert das Band selbst.

   KEIN KASTEN FUER DEN ZUSTAND

   Das gewaehlte Feld bekommt denselben Balken wie der aktive
   Punkt in der Seitenleiste: kurz, schwarz, am TEXT - nicht an
   der Kante des Feldes. Dazu fettere Schrift.

   Eine eingefaerbte Flaeche waere ein Kasten, der einen Zustand
   anzeigt, und genau das soll nicht sein. */

.ps-kopfzahl-klick {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 2px;
  transition: background 120ms;
}

/* Beim Zeigen nur ein Hauch - die Flaeche sagt "anklickbar",
   nicht "ausgewaehlt". */
.ps-kopfzahl-klick:hover {
  background: rgb(20 19 17 / .035);
}
.dark .ps-kopfzahl-klick:hover { background: rgb(255 255 255 / .05); }

.ps-kopfzahl-klick:focus-visible {
  outline: 2px solid #141311;
  outline-offset: 2px;
}
.dark .ps-kopfzahl-klick:focus-visible { outline-color: #e8e5db; }

/* Die Ueberschrift des gewaehlten Feldes: Balken und Fettung. */
.ps-kopfzahl-aktiv .ps-kopfzahl-hut {
  position: relative;
  opacity: 1;
  font-weight: 800;
}
.ps-kopfzahl-aktiv .ps-kopfzahl-hut::before {
  content: '';
  position: absolute;
  left: -.55rem;
  top: .1em;
  bottom: .1em;
  width: 3px;
  background: #141311;
  border-radius: 1px;
}
.dark .ps-kopfzahl-aktiv .ps-kopfzahl-hut::before { background: #ffd42e; }

/* Der Balken braucht Platz, sonst schneidet ihn die Kante an.
   Dieselbe Loesung wie in der Seitenleiste. */
.ps-kopfband { padding-left: 1.7rem; }
.ps-kopfzahl:first-child { padding-left: 0; }

@media (max-width: 900px) {
  .ps-kopfband { padding-left: 1.7rem; }
}


/* ═══════════════════════ Der Kopf springt nicht mehr

   Patrick: "manchmal gibt es eine Sitemap, manchmal nicht, dann
   sind die Header unterschiedlich gross."

   Gemeint ist der Brotkrumenpfad. Filament zeigt ihn auf
   Resource-Seiten und laesst ihn auf eigenen Seiten weg -
   gemessen 28 px Unterschied zwischen Dashboard und Aufgaben.
   Beim Wechseln springt der Titel.

   AUF EINER LISTE SAGT ER NICHTS

   "Aufgaben > Uebersicht": Die Ueberschrift sagt schon
   "Aufgaben", und die Seitenleiste zeigt, wo man ist. Das ist
   eine Zeile, die Platz kostet und nichts traegt.

   AUF DER AKTE SAGT ER ETWAS

   "Objekte > Wilde Maus > Akte" ist der Weg zurueck. Dort bleibt
   er - und dort darf der Kopf auch hoeher sein, weil man von
   einer Liste kommt und nicht zwischen Hauptseiten wechselt. */

.fi-resource-list-records-page .fi-breadcrumbs { display: none; }


/* ═══════════════════ Die Auswahlspalte ist schmal

   Bei table-layout: fixed bekommt jede Spalte OHNE
   Breitenangabe den Rest. Auf dem Bestand trugen die fuenf
   benannten Spalten zusammen 87 Prozent - die uebrigen 13
   gingen an die Spalte mit dem Haken. 200 Pixel fuer ein
   Kaestchen von 16.

   Eine Spalte, die man nicht erwaehnt, ist nicht klein. Sie ist
   der Rest. */

.fi-ta-table th:first-child:has(input[type="checkbox"]),
.fi-ta-table td:first-child:has(input[type="checkbox"]) {
  width: 2.75rem;
}

/* Ohne :has() - aeltere Browser - greift wenigstens die
   Mindestbreite nicht zu. Filament setzt der Zelle eine eigene
   Klasse, wenn die Auswahl aktiv ist. */
.fi-ta-table .fi-ta-selection-cell { width: 2.75rem; }

/* ═══════════════════════════ Profil auf einem Bildschirm

   Patrick: "Kannst du es so machen, dass es nicht scrollen muss?"

   Die drei Abschnitte standen untereinander und das Bild allein
   in einer Zeile, obwohl rechts die halbe Breite leer blieb.
   Jetzt: Bild links, Angaben rechts; Erreichbarkeit und Zugang
   nebeneinander.

   Das allein reichte bei 820 Pixel Fensterhoehe noch nicht -
   und erst recht nicht, sobald man ein Kennwort antippt und
   zwei weitere Felder aufklappen. Also sitzen die Abschnitte
   hier enger als sonst in der Suite.

   NUR HIER. Die Klasse haengt an den drei Abschnitten dieser
   Seite; ohne sie waere es eine Regel ueber jeden Abschnitt
   der Suite. */

.ps-profil .fi-section-header {
  padding-block: .7rem;
}

.ps-profil .fi-section-content {
  padding-block: .9rem;
}

/* Die Beschriftung bleibt links - aber sie braucht keine
   Zeile fuer sich, wenn das Feld daneben nur halb so breit
   ist wie sonst. */
.ps-profil .fi-fo-field-wrp-label-col {
  padding-block-start: .5rem;
}

/* ═══════════════════════════ Durchsagen

   Einseitig, mit Ablauf, und sie stehen dort, wo ohnehin
   hingesehen wird - Leitstand und Anlagenmonitor. Eine
   Nachricht, die man abholen muss, ist keine Durchsage.

   KEINE FARBFLAECHE. Dringend faerbt das Wort, nicht den
   Streifen - dieselbe Regel wie bei den Kacheln. */

.ps-durchsage {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: .9rem;
}

.ps-durchsage-zeile {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  padding: .7rem .95rem;
  background: var(--ps-flaeche, #fff);
  border: 1px solid var(--ps-kante, #e5e3dc);
  border-radius: .1875rem;
}

/* Das Wort traegt die Farbe. */
.ps-durchsage-marke {
  flex: 0 0 auto;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8a8578;
  padding-top: .15rem;
}

.ps-durchsage-dringend {
  color: #c0392b;
}

.ps-durchsage-inhalt {
  min-width: 0;
}

.ps-durchsage-titel {
  font-weight: 600;
  line-height: 1.35;
}

.ps-durchsage-text {
  margin-top: .2rem;
  font-size: .86rem;
  line-height: 1.45;
  color: #6b6557;
}

.ps-durchsage-wer {
  margin-top: .25rem;
  font-size: .74rem;
  color: #8a8578;
}

.ps-durchsage-mehr {
  align-self: flex-start;
  font-size: .78rem;
  color: #8a8578;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.ps-durchsage-mehr:hover {
  color: #2a2721;
}

/* Das Bento wird um die Hoehe des Bandes kuerzer.

   Ohne diese Regel schoebe eine einzige Durchsage die Seite
   ins Rollen - und "jede Seite passt auf einen Bildschirm" ist
   eine Hausregel, keine Absichtserklaerung. */
.fi-main:has(.ps-durchsage) .ps-brett {
  min-height: calc(100vh - 21rem);
}

/* Und die HOEHE dazu.

   Ab 1240 Pixel steht am Brett eine feste Hoehe. Eine gesetzte
   Hoehe schlaegt die Mindesthoehe, solange sie groesser ist -
   die Regel darueber allein aenderte deshalb nichts (gemessen:
   min-height 620px, Brett trotzdem 704px hoch). */
@media (min-width: 1100px) {
  .fi-main:has(.ps-durchsage) .ps-brett {
    height: calc(100vh - 21rem);
  }
}

/* Filaments Dunkelmodus, nicht der des Betriebssystems.

   Hier stand eine Medienabfrage auf die Systemeinstellung. Die
   schaltet aber unabhaengig von Filament, das seinen
   Dunkelmodus ueber eine Klasse am <html> setzt. Gehen beide
   auseinander - Telefon dunkel, Suite hell -, stehen schwarze
   Kacheln auf hellem Grund. Gefunden von Patrick am 22.10. auf
   dem Telefon.

   Verschachtelt statt umgeschrieben: So bleiben die Selektoren
   im Block unberuehrt, auch die ueber mehrere Zeilen. Ein
   erster Versuch, ':root.dark ' davorzusetzen, traf bei
   Listen nur die letzte Zeile - und machte zwei Regeln
   bedingungslos. */
:root.dark {
  .ps-durchsage-zeile {
    background: #1c1b18;
    border-color: #343229;
  }

  .ps-durchsage-text { color: #a8a295; }
  .ps-durchsage-wer,
  .ps-durchsage-marke,
  .ps-durchsage-mehr { color: #8a8578; }
  .ps-durchsage-dringend { color: #e8705f; }
  .ps-durchsage-mehr:hover { color: #efece4; }
}

/* ═══════════════════════════ Verfuegbarkeit je Anlage

   Eine Rangfolge, schlechteste zuerst. Wer die Seite oeffnet,
   sucht das Problem - eine Liste, die oben mit 100 % anfaengt,
   muss man erst durchscrollen, um etwas zu erfahren.

   KEINE FARBFLAECHE. Die Zahl traegt die Farbe, der Balken
   traegt die Laenge. Die Zeile selbst bleibt weiss. */

/* Der Zeitraum: drei Knoepfe, keine Auswahlliste. */
/* Kein eigener Abstand nach unten.

   Die Filament-Seite setzt zwischen ihre Kinder ohnehin einen -
   mit meinem zusammen wurden aus 32 Pixeln 47. Gemessen, nicht
   vermutet. */
.ps-zeitraum {
  display: flex;
  gap: .3rem;
}

.ps-zeitraum-knopf {
  padding: .35rem .8rem;
  font-size: .8rem;
  font-weight: 500;
  color: #6b6557;
  background: transparent;
  border: 1px solid var(--ps-kante, #e5e3dc);
  border-radius: .1875rem;
  cursor: pointer;
}

.ps-zeitraum-knopf:hover { color: #2a2721; }

/* Der gewaehlte Zeitraum: kraeftige Schrift und eine Kante,
   keine gefuellte Flaeche. */
.ps-zeitraum-aktiv,
.ps-zeitraum-aktiv:hover {
  color: #2a2721;
  font-weight: 700;
  border-color: #2a2721;
}

/* Die Liste rollt in sich, nicht die Seite. */
.ps-verfuegbar {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ps-kante, #e5e3dc);
  border-radius: .1875rem;
  background: var(--ps-flaeche, #fff);
  overflow-y: auto;
  scrollbar-width: thin;
  /* Gemessen, nicht geschaetzt: Mit 21rem rollte die Seite um
     180 Pixel - Seitentitel, Zeitraumknoepfe, Zahlenband und der
     Satz zur Rechengrundlage zusammen. */
  max-height: calc(100vh - 29.25rem);
}

.ps-verfuegbar-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem 5rem minmax(0, 11rem);
  align-items: center;
  gap: 1rem;
  padding: .45rem .95rem;
  border-bottom: 1px solid var(--ps-kante, #f0eee8);
}

.ps-verfuegbar-zeile:last-child { border-bottom: 0; }

.ps-verfuegbar-name {
  font-weight: 600;
  color: inherit;
}

.ps-verfuegbar-name:hover { text-decoration: underline; }

.ps-verfuegbar-ort {
  font-size: .74rem;
  color: #8a8578;
}

.ps-verfuegbar-balken {
  height: .4rem;
  background: #ebe8e0;
  border-radius: .0625rem;
  overflow: hidden;
}

.ps-verfuegbar-fuellung {
  display: block;
  height: 100%;
}

.ps-fuell-frei   { background: #1f7a4d; }
.ps-fuell-warte  { background: #a86a00; }
.ps-fuell-sperre { background: #c0392b; }
.ps-fuell-       { background: #c9c4b8; }

.ps-verfuegbar-quote {
  font-size: 1.05rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ps-verfuegbar-dazu {
  font-size: .78rem;
  color: #8a8578;
  text-align: right;
}

.ps-verfuegbar-leer {
  padding: 1.5rem .95rem;
  font-size: .78rem;
  color: #8a8578;
  line-height: 1.5;
}

/* Auf dem Telefon untereinander: Vier Spalten auf 390 Pixel
   sind vier Spalten zu viel. */
@media (max-width: 767.98px) {
  .ps-verfuegbar-zeile {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .35rem 1rem;
  }

  .ps-verfuegbar-balken { grid-column: 1 / -1; order: 3; }
  .ps-verfuegbar-dazu { grid-column: 1 / -1; order: 4; text-align: left; }
  .ps-verfuegbar { max-height: none; }
}

/* Filaments Dunkelmodus, nicht der des Betriebssystems.

   Hier stand eine Medienabfrage auf die Systemeinstellung. Die
   schaltet aber unabhaengig von Filament, das seinen
   Dunkelmodus ueber eine Klasse am <html> setzt. Gehen beide
   auseinander - Telefon dunkel, Suite hell -, stehen schwarze
   Kacheln auf hellem Grund. Gefunden von Patrick am 22.10. auf
   dem Telefon.

   Verschachtelt statt umgeschrieben: So bleiben die Selektoren
   im Block unberuehrt, auch die ueber mehrere Zeilen. Ein
   erster Versuch, ':root.dark ' davorzusetzen, traf bei
   Listen nur die letzte Zeile - und machte zwei Regeln
   bedingungslos. */
:root.dark {
  .ps-verfuegbar {
    background: #1c1b18;
    border-color: #343229;
  }

  .ps-verfuegbar-zeile { border-bottom-color: #26241f; }
  .ps-verfuegbar-balken { background: #2b2924; }
  .ps-zeitraum-knopf { color: #a8a295; border-color: #343229; }
  .ps-zeitraum-knopf:hover,
  .ps-zeitraum-aktiv { color: #efece4; border-color: #efece4; }
}

/* ═══════════════════════════ Berichte - die Auswahl

   Drei Karten, je eine je Empfaenger. Keine Farbflaeche: Die
   Karte traegt nur eine Kante, der Hut traegt den Empfaenger. */

.ps-berichte-zeit {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.ps-berichte-zeit label {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .78rem;
  color: #6b6557;
}

.ps-berichte-zeit input {
  padding: .35rem .6rem;
  font: inherit;
  font-size: .85rem;
  color: #2a2721;
  background: var(--ps-flaeche, #fff);
  border: 1px solid var(--ps-kante, #e5e3dc);
  border-radius: .1875rem;
}

.ps-berichte-hinweis {
  font-size: .78rem;
  color: #8a8578;
  line-height: 1.5;
  max-width: 68ch;
}

.ps-berichte {
  display: grid;
  gap: .875rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .ps-berichte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ps-bericht {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  background: var(--ps-flaeche, #fff);
  border: 1px solid var(--ps-kante, #e5e3dc);
  border-radius: .1875rem;
}

.ps-bericht-hut {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8a8578;
}

.ps-bericht-titel {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.ps-bericht-dazu {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: #6b6557;
  /* Die Karten bleiben gleich hoch, auch wenn der Text es nicht
     ist - sonst stehen die Knoepfe auf drei Hoehen. */
  flex: 1 1 auto;
}

.ps-bericht-wahl {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8a8578;
}

.ps-bericht-wahl select {
  padding: .4rem .6rem;
  font: inherit;
  font-size: .85rem;
  text-transform: none;
  letter-spacing: 0;
  color: #2a2721;
  background: var(--ps-flaeche, #fff);
  border: 1px solid var(--ps-kante, #e5e3dc);
  border-radius: .1875rem;
}

.ps-bericht-knopf {
  align-self: flex-start;
  padding: .45rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  color: #2a2721;
  border: 1px solid #2a2721;
  border-radius: .1875rem;
}

.ps-bericht-knopf:hover {
  color: #fff;
  background: #2a2721;
}

/* Filaments Dunkelmodus, nicht der des Betriebssystems.

   Hier stand eine Medienabfrage auf die Systemeinstellung. Die
   schaltet aber unabhaengig von Filament, das seinen
   Dunkelmodus ueber eine Klasse am <html> setzt. Gehen beide
   auseinander - Telefon dunkel, Suite hell -, stehen schwarze
   Kacheln auf hellem Grund. Gefunden von Patrick am 22.10. auf
   dem Telefon.

   Verschachtelt statt umgeschrieben: So bleiben die Selektoren
   im Block unberuehrt, auch die ueber mehrere Zeilen. Ein
   erster Versuch, ':root.dark ' davorzusetzen, traf bei
   Listen nur die letzte Zeile - und machte zwei Regeln
   bedingungslos. */
:root.dark {
  .ps-bericht,
  .ps-berichte-zeit input,
  .ps-bericht-wahl select {
    background: #1c1b18;
    border-color: #343229;
    color: #efece4;
  }

  .ps-bericht-dazu { color: #a8a295; }

  .ps-bericht-knopf {
    color: #efece4;
    border-color: #efece4;
  }

  .ps-bericht-knopf:hover {
    color: #16150f;
    background: #efece4;
  }
}

/* Das kleine Bild im Schichtplan - neben dem Namen, nicht an seiner
   Stelle. Rund, damit es nicht mit den Zustandsfeldern verwechselt
   wird; die sind eckig. */
.ps-kopfbild {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; vertical-align: -5px; margin-right: .4rem;
}


/*
 * Das Bild steht in derselben Zeile wie Name und Anruf-Knopf - also
 * inline, nicht in einem eigenen Behaelter. Ein Behaelter haette
 * eine eigene Breite, und die Hoechstbreite des Namens rechnet mit
 * der Breite der ZELLE.
 *
 * Wo ein Bild steht, fehlen dem Namen dessen 22 Pixel plus Abstand.
 */
.ps-kopfbild {
  display: inline-block; vertical-align: middle;
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; margin-right: .45rem;
}

.ps-raster-name .ps-kopfbild + .ps-befund-name {
  max-width: calc(100% - 2.5rem - 1.7rem);
}

/* ── Tag, Woche, Monat ─────────────────────────────────────────── */

/* Drei Knoepfe als ein Stueck - der gedrueckte traegt die Farbe, die
   anderen nur den Rahmen. Farbe am Wert, nicht an der Flaeche. */
.ps-sichtwahl { display: inline-flex; gap: 0; margin-left: .75rem; }

.ps-sichtwahl button {
  font-size: .8125rem; font-weight: 600;
  padding: .3rem .7rem; border: 1px solid #d8d4c8;
  background: transparent; color: #6b6960; cursor: pointer;
}

.ps-sichtwahl button:first-child { border-radius: 3px 0 0 3px; }
.ps-sichtwahl button:last-child { border-radius: 0 3px 3px 0; }
.ps-sichtwahl button + button { border-left: 0; }
.ps-sichtwahl button[aria-pressed="true"] { color: #141414; font-weight: 700; }
.ps-sichtwahl button[aria-pressed="true"]::after {
  content: ''; display: block; height: 2px; background: #ffcc00;
  margin: .25rem -.7rem -.3rem;
}

.dark .ps-sichtwahl button { border-color: #35322a; color: #a9a596; }
.dark .ps-sichtwahl button[aria-pressed="true"] { color: #fbfaf7; }

/* Im Monat wird die Spalte schmal: einunddreissig davon muessen
   nebeneinander passen, ohne dass der Name seine Breite verliert. */
.ps-raster-monat .ps-raster-tag { width: 1.9rem; min-width: 1.9rem;
                                   text-align: center; padding: .3rem .1rem !important; }
.ps-raster-monat .ps-raster-feld { text-align: center; padding: .25rem .1rem !important; }
.ps-raster-monat .ps-raster-datum { margin-left: 0; font-size: .6875rem; }

.ps-monatsfeld {
  display: inline-block; min-width: 1.1rem; height: 1.1rem;
  line-height: 1.1rem; border-radius: 2px;
  background: #e4e1d7; color: #4a4740;
  font-size: .6875rem; font-weight: 700;
}

.ps-monatsfeld.ps-schicht-bestaetigt { background: #cfe7d8; color: #1f4d33; }
.dark .ps-monatsfeld { background: #35322a; color: #cfcbbd; }
.dark .ps-monatsfeld.ps-schicht-bestaetigt { background: #1f4d33; color: #d8f0e2; }

/* Im Tag gibt es nur eine Spalte - die darf dann breit sein. */
.ps-raster-tag-eine { width: auto; }

/* ── Kacheln ein- und ausblenden ───────────────────────────────── */

/* Oben rechts, nicht mitten im Inhalt: Es ist eine Einstellung der
   Ansicht, kein Inhalt der Ansicht. */
.ps-kachelwahl { position: relative; margin: 0 0 .75rem auto; width: max-content; }

.ps-kachelwahl > summary {
  list-style: none; cursor: pointer;
  font-size: .8125rem; font-weight: 600; color: #6b6960;
  padding: .3rem .7rem; border: 1px solid #d8d4c8; border-radius: 3px;
}

.ps-kachelwahl > summary::-webkit-details-marker { display: none; }
.ps-kachelwahl[open] > summary { color: #141414; }

.ps-kachelwahl-liste {
  position: absolute; right: 0; top: calc(100% + .25rem); z-index: 30;
  min-width: 13rem; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e4e1d7; border-radius: 4px;
  box-shadow: 0 10px 30px rgb(0 0 0 / .12); padding: .3rem;
}

.ps-kachelwahl-liste button {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .5rem; border: 0; background: transparent;
  font-size: .8125rem; color: #141414; text-align: left; cursor: pointer;
  border-radius: 2px;
}

.ps-kachelwahl-liste button:hover { background: #f6f4ee; }
.ps-kachelwahl-haken { width: .9rem; color: #8a7400; font-weight: 700; }

.ps-kachelwahl-alles {
  border-top: 1px solid #e4e1d7 !important; margin-top: .2rem;
  color: #6b6960 !important; font-weight: 600;
}

.dark .ps-kachelwahl > summary { border-color: #35322a; color: #a9a596; }
.dark .ps-kachelwahl[open] > summary { color: #fbfaf7; }
.dark .ps-kachelwahl-liste { background: #1c1b18; border-color: #35322a; }
.dark .ps-kachelwahl-liste button { color: #fbfaf7; }
.dark .ps-kachelwahl-liste button:hover { background: #26241f; }
.dark .ps-kachelwahl-haken { color: #ffd42e; }