/*
 * LFM LIMS - Oberflaechengestaltung
 * =====================================================================
 *
 * ZUR LADEREIHENFOLGE - bitte vor dem Aendern lesen:
 *
 * Diese Datei wird ueber den Render-Hook PanelsRenderHook::STYLES_AFTER
 * eingehaengt (siehe AppServiceProvider) und laedt damit NACH Filaments
 * eigenem Stylesheet. Deshalb genuegen hier normale Selektoren.
 *
 * Der Vorgaenger (lfm-mobile.css) wurde ueber FilamentAsset registriert und
 * lud VOR Filament. Um trotzdem zu gewinnen, waren dort alle Klassennamen
 * verdoppelt (.fi-section.fi-section). Das reichte nur gegen einstufige
 * Filament-Regeln - bei zweistufigen entstand Gleichstand, und den gewann
 * das spaeter geladene Stylesheet, also Filament. Rund die Haelfte der
 * Regeln war dadurch wirkungslos, ohne dass man es sah.
 *
 * WICHTIG: Wo Filament einen zweistufigen Selektor benutzt, muss er hier
 * ebenfalls zweistufig stehen - sonst verliert die Regel trotz spaeterem
 * Laden. Betroffen sind unter anderem:
 *   .fi-ta-text-item.fi-size-sm
 *   .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value
 *
 * DUNKLE ANSICHT: Filament schreibt sie als .fi-x:where(.dark,.dark *).
 * :where() steuert nichts zur Spezifitaet bei, die Regel liegt also bei
 * (0,1,0). Ein schlichtes ".dark .fi-x" (0,2,0) gewinnt zuverlaessig.
 *
 * ZIELGRUPPE: Laborpersonal, jung wie aelter. Alle Groessen und Kontraste
 * unten sind gerechnet, nicht geschaetzt - die Werte stehen jeweils dabei.
 * Kontrastziel: WCAG 2.2 AA als Untergrenze (4,5:1 Text / 3:1 Nicht-Text),
 * AAA (7:1) fuer dauerhaft sichtbaren Sekundaertext.
 */

/* =====================================================================
 * 1. SCHRIFTGROESSEN
 *
 * Filaments Problem ist nicht die Skala, sondern wie flach sie genutzt
 * wird: Tabellentext, Tabellenkopf, Feldbeschriftung, Seitenleiste und
 * Knopfbeschriftung liegen alle bei 14px - fuenf Rollen, eine Groesse.
 * Und ausgerechnet das Statusabzeichen, das die wichtigste Information
 * der Auftragsliste traegt, ist mit 12px der kleinste Text der Seite.
 * ===================================================================== */

/* Seitenueberschrift: Filament springt am Haltepunkt von 24 auf 30px.
   Der Sprung wirkt auf grossen Monitoren plakativ - konstant 28px. */
.fi-header-heading {
  font-size: 1.75rem;
  line-height: 2.25rem;
}

/* Abschnittsueberschrift 16 -> 18px: Gliederungsebene und Inhalt lagen
   nur zwei Punkt auseinander, die Hierarchie war flach. */
.fi-section-header-heading {
  font-size: 1.125rem;
  line-height: 1.625rem;
}

/* Tabellentext 14 -> 16px. Die Auftragsliste ist der Bildschirm mit den
   meisten Arbeitsstunden. Die grosszuegige Zeilenhoehe hilft beim
   Zeilenhalten ueber viele Spalten - bei nachlassender Sehkraft wichtiger
   als die Schriftgroesse selbst.
   Zweistufig, weil Filaments Regel .fi-ta-text-item.fi-size-sm lautet. */
.fi-ta-text-item.fi-size-sm {
  font-size: 1rem;
  line-height: 1.625rem;
}

/* Die Zusatzzeile unter dem Haupttext bleibt kleiner - sie ist die
   Nebeninformation und soll sich unterscheiden. */
.fi-ta-text-item.fi-size-sm .fi-ta-text-item-description,
.fi-ta-col-description {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.fi-ta-header-cell {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Eingabefelder auf 16px. Filament setzt das bisher nur in einer
   @supports-Abfrage fuer iOS - auf Windows-Arbeitsplaetzen und Android
   blieb es bei 14px. */
input.fi-input,
.fi-input,
.fi-select-input {
  font-size: 1rem;
}

.fi-fo-field-label-content {
  font-size: 0.9375rem;
  font-weight: 500;
}

.fi-btn {
  font-size: 0.9375rem;
}

/* Statusabzeichen 12 -> 14px mit kraeftigerem Schnitt. Es traegt den
   Auftragsstatus und darf nicht der kleinste Text der Seite sein. */
.fi-badge {
  font-size: 0.875rem;
  font-weight: 600;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
}

/* Kennzahl gross genug, um sie aus einigen Metern Abstand zu erfassen. */
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label {
  font-size: 0.9375rem;
  font-weight: 500;
}

/* =====================================================================
 * 2. KONTRASTE
 *
 * Filament nutzt gray-500 (4,83:1) fuer Sekundaertext und gray-400
 * (2,62:1) fuer Platzhalter. gray-400 verfehlt sogar die 3,0-Schwelle
 * fuer Nicht-Text. Nach dem Wechsel auf Slate als Grauton gilt:
 *   hell:   slate-600 = 7,58:1   slate-700 = 10,36:1
 *   dunkel: slate-300 = 12,0:1   slate-400 =  6,78:1
 * ===================================================================== */

.fi-ta-text-item.fi-size-sm .fi-ta-text-item-description,
.fi-ta-col-description,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description,
.fi-modal-description,
.fi-section-header-description,
.fi-fo-field-content-helper-text {
  color: var(--gray-700);
}

.dark .fi-ta-text-item.fi-size-sm .fi-ta-text-item-description,
.dark .fi-ta-col-description,
.dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label,
.dark .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description,
.dark .fi-modal-description,
.dark .fi-section-header-description,
.dark .fi-fo-field-content-helper-text {
  color: var(--gray-300);
}

/* Platzhalter und Leerwerte: 2,62 -> 4,76:1 (hell) bzw. 6,78:1 (dunkel). */
.fi-ta-placeholder,
input.fi-input::placeholder,
textarea.fi-input::placeholder {
  color: var(--gray-500);
}

.dark .fi-ta-placeholder,
.dark input.fi-input::placeholder,
.dark textarea.fi-input::placeholder {
  color: var(--gray-400);
}

/* =====================================================================
 * 3. FLAECHEN UND KANTEN
 *
 * Der wirksamste Einzelgriff im ganzen Umbau: Seite (slate-50) und Karte
 * (weiss) unterscheiden sich um 1,04:1. Die Kartenkante hing allein an
 * einem Ring mit rund 10% Deckkraft - fuer aeltere Augen auf einem
 * aelteren Bildschirm sind die Karten schlicht nicht abgegrenzt. Eine
 * sichtbare Kante zerlegt die Seite ueberhaupt erst in lesbare Bloecke.
 * ===================================================================== */

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-modal-window {
  border: 1px solid var(--gray-300);
}

.dark .fi-section:not(.fi-section-not-contained),
.dark .fi-ta-ctn,
.dark .fi-wi-stats-overview-stat,
.dark .fi-modal-window {
  border-color: var(--gray-700);
}

/* Eingabefelder brauchen eine Kante, die SC 1.4.11 (3:1) erfuellt.
   Bisher: gray-950 bei 10% Deckkraft = 1,25:1 gegen Weiss.
   Jetzt:  slate-500 = 4,76:1 hell, slate-400 = 6,78:1 dunkel. */
.fi-input-wrp {
  --tw-ring-color: var(--gray-500);
}

.dark .fi-input-wrp {
  --tw-ring-color: var(--gray-400);
}

/* Tabellenkopf leicht absetzen, damit die Spaltenzeile beim Scrollen
   als Kopf lesbar bleibt. */
.fi-ta-header-cell {
  background-color: var(--gray-50);
}

.dark .fi-ta-header-cell {
  background-color: var(--gray-800);
}

/* =====================================================================
 * 4. TREFFERFLAECHEN
 *
 * Filament liegt bei rund 36px (8px Innenabstand + 20px Zeilenhoehe).
 * WCAG 2.2 SC 2.5.8 fordert 24px als Untergrenze; 44px ist der Wert von
 * Apple und Google fuer sichere Zeigegenauigkeit und der richtige fuer
 * unsichere Haende, Maussteuerung mit Zittern und Touchbedienung.
 * Bisher galten 44px nur unter 640px Breite - jetzt ueberall.
 * ===================================================================== */

.fi-btn,
.fi-icon-btn,
input.fi-input,
.fi-select-input,
.fi-sidebar-item-btn {
  min-height: 2.75rem;
}

.fi-icon-btn {
  min-width: 2.75rem;
}

.fi-btn {
  padding-inline: 1rem;
}

/* Abstand zwischen benachbarten Zeilenaktionen, damit man nicht die
   falsche trifft. */
.fi-ta-actions {
  gap: 0.5rem;
}

/* =====================================================================
 * 5. FOKUS - der gravierendste Einzelbefund
 *
 * Filament setzt outline-hidden auf Seitenleisteneintraege und ersetzt
 * den Fokusrahmen durch bg-gray-100. Auf dem Desktop ist die Leiste aber
 * lg:bg-transparent, die Toenung liegt also auf fast identischem Grau:
 * #F4F4F5 auf #FAFAFA = 1,05:1. Wer mit der Tastatur arbeitet, sieht
 * nicht, wo er ist.
 *
 * Die Ringfarbe muss je Ansicht verschieden sein:
 *   hell:   petrol-600 = 6,98:1 gegen die Seite  (dunkel nur 2,76:1)
 *   dunkel: petrol-400 = 5,75:1 gegen die Seite  (hell   nur 3,35:1)
 * Beide ueber der 3:1-Schwelle aus SC 1.4.11.
 * ===================================================================== */

.fi-sidebar-item-btn:focus-visible,
.fi-btn:focus-visible,
.fi-icon-btn:focus-visible,
.fi-ta-record-checkbox:focus-visible,
.fi-checkbox-input:focus-visible,
.fi-link:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--primary-600);
  outline-offset: 2px;
}

.dark .fi-sidebar-item-btn:focus-visible,
.dark .fi-btn:focus-visible,
.dark .fi-icon-btn:focus-visible,
.dark .fi-ta-record-checkbox:focus-visible,
.dark .fi-checkbox-input:focus-visible,
.dark .fi-link:focus-visible,
.dark a:focus-visible,
.dark button:focus-visible,
.dark [tabindex]:focus-visible {
  outline-color: var(--primary-400);
}

/* Eingabefelder bekommen einen kraeftigeren Rahmen statt einer Outline,
   damit der Ring nicht mit der Feldkante kollidiert. */
input.fi-input:focus,
textarea.fi-input:focus,
.fi-input-wrp:has(:focus) {
  --tw-ring-color: var(--primary-600);
  --tw-ring-shadow: 0 0 0 2px var(--primary-600);
}

.dark input.fi-input:focus,
.dark textarea.fi-input:focus,
.dark .fi-input-wrp:has(:focus) {
  --tw-ring-color: var(--primary-400);
  --tw-ring-shadow: 0 0 0 2px var(--primary-400);
}

/* =====================================================================
 * 6. SEITENLEISTE
 *
 * Bisher war die Gruppenueberschrift genauso gross wie der Eintrag
 * darunter und kontrastschwaecher als er - die Gliederung war optisch
 * schwaecher als das Gegliederte. Eine Ueberschrift muss sich vom
 * Gegliederten unterscheiden, nicht hervorstechen: kleiner, aber in
 * Versalien, gesperrt und kraeftiger im Grau.
 * ===================================================================== */

.fi-sidebar-group-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-600);
}

.dark .fi-sidebar-group-label {
  color: var(--gray-400);
}

.fi-sidebar-item-label {
  font-size: 1rem;
  font-weight: 500;
}

/* Der aktive Eintrag bekommt zusaetzlich zur Farbe eine Kante - damit
   traegt nicht die Farbe allein die Aussage "hier bin ich". */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
  border-inline-start: 3px solid var(--primary-600);
  background-color: var(--primary-50);
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
  border-inline-start-color: var(--primary-400);
  background-color: color-mix(in oklab, var(--primary-400) 15%, transparent);
}

/* =====================================================================
 * 7. LESBARE ZEILENLAENGE
 *
 * WCAG 1.4.8 nennt 80 Zeichen als Obergrenze, Baymard 50-75 als optimal.
 * Betrifft nur Fliesstext, nicht Tabellen.
 * ===================================================================== */

.fi-section-header-description,
.fi-fo-field-content-helper-text,
.fi-modal-description {
  max-width: 70ch;
}

/* =====================================================================
 * 8. KLEINE BILDSCHIRME
 *
 * Aus lfm-mobile.css uebernommen, mit korrigierten Klassennamen:
 * .fi-page-header und .fi-header-actions existieren in Filament nicht -
 * richtig sind .fi-page-header-main-ctn und .fi-header-actions-ctn.
 * Die alten Regeln liefen ins Leere.
 * ===================================================================== */

@media (max-width: 640px) {

  /* ---- Anmeldung und Einladung ---- */

  .fi-simple-main {
    margin-inline: 0.75rem;
    padding: 1.25rem 1rem;
    border-radius: 0.75rem;
    width: auto;
    max-width: none;
  }

  .fi-simple-page {
    padding-block: 1.5rem;
  }

  .fi-simple-header {
    margin-bottom: 1.25rem;
  }

  .fi-simple-header-heading {
    font-size: 1.375rem;
    line-height: 1.875rem;
  }

  .fi-simple-main .fi-btn {
    width: 100%;
    justify-content: center;
  }

  /* ---- Seitenrahmen ---- */

  .fi-main {
    padding-inline: 0.75rem;
  }

  .fi-page-header-main-ctn {
    gap: 0.75rem;
  }

  .fi-header-heading {
    font-size: 1.375rem;
    line-height: 1.875rem;
  }

  /* Kopfzeilen-Aktionen umbrechen statt zusammenquetschen. */
  .fi-header-actions-ctn {
    flex-wrap: wrap;
    width: 100%;
  }

  .fi-header-actions-ctn .fi-btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* ---- Formulare ---- */

  .fi-section-content-ctn,
  .fi-section-header {
    padding: 1rem;
  }

  .fi-section {
    border-radius: 0.75rem;
  }

  /* ---- Tabellen ---- */

  .fi-ta-cell,
  .fi-ta-header-cell {
    padding-inline: 0.625rem;
  }

  .fi-ta-text-item.fi-size-sm {
    font-size: 0.9375rem;
  }

  .fi-ta-ctn {
    border-radius: 0.75rem;
  }

  .fi-ta-content {
    -webkit-overflow-scrolling: touch;
  }

  /* Werkzeugleiste untereinander statt nebeneinander. */
  .fi-ta-header-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
    padding: 0.75rem;
  }

  .fi-ta-header-toolbar .fi-input-wrp {
    max-width: none;
    width: 100%;
  }

  /* ---- Kennzahlen ---- */

  .fi-wi-stats-overview-stat {
    padding: 0.875rem 1rem;
  }

  .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  /* ---- Dialoge ---- */

  .fi-modal-window {
    margin: 0.75rem;
    border-radius: 0.875rem;
  }

  .fi-modal-content {
    padding: 1rem;
  }

  .fi-modal-footer-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.5rem;
  }

  .fi-modal-footer-actions .fi-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .fi-main {
    padding-inline: 0.5rem;
  }

  .fi-section-content-ctn,
  .fi-section-header {
    padding: 0.875rem;
  }

  .fi-header-heading {
    font-size: 1.25rem;
  }
}

/* =====================================================================
 * 9. HILFSKLASSEN
 * ===================================================================== */

/*
 * Zugangslinks umbrechen lassen. Ein Einladungslink ist rund 110 Zeichen
 * lang und enthaelt kein Leerzeichen - ohne diese Regel schiebt er die
 * Seite in die Breite. Bewusst ohne Media Query.
 */
.lfm-link-break,
.lfm-link-break * {
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* =====================================================================
 * 10. KONTEXTMENUE (rechte Maustaste auf einer Tabellenzeile)
 *
 * Die Eintraege stammen aus Filaments eigenem Zeilenmenue, siehe
 * public/js/lfm-kontextmenue.js. Hier ist nur das Aussehen.
 *
 * Die Trefferflaeche liegt wie ueberall bei 44px - ein Kontextmenue ist
 * kein Ort, an dem man Platz spart.
 * ===================================================================== */

.lfm-kontextmenue {
  position: fixed;
  z-index: 60;
  min-width: 13rem;
  max-width: 20rem;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  background-color: var(--gray-50);
  border: 1px solid var(--gray-300);
  border-radius: 0.625rem;
  box-shadow:
    0 10px 20px -5px rgb(0 0 0 / 0.16),
    0 4px 8px -4px rgb(0 0 0 / 0.12);
}

.dark .lfm-kontextmenue {
  background-color: var(--gray-800);
  border-color: var(--gray-600);
  box-shadow:
    0 10px 20px -5px rgb(0 0 0 / 0.5),
    0 4px 8px -4px rgb(0 0 0 / 0.4);
}

.lfm-kontextmenue-eintrag {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--gray-800);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}

.dark .lfm-kontextmenue-eintrag {
  color: var(--gray-100);
}

.lfm-kontextmenue-eintrag:hover {
  background-color: var(--primary-50);
  color: var(--primary-700);
}

.dark .lfm-kontextmenue-eintrag:hover {
  background-color: color-mix(in oklab, var(--primary-400) 18%, transparent);
  color: var(--primary-100);
}

/* Fokus wie ueberall im System: durchgehende Outline, je Ansicht eine
   andere Stufe der Primaerfarbe. */
.lfm-kontextmenue-eintrag:focus-visible {
  outline: 3px solid var(--primary-600);
  outline-offset: -2px;
}

.dark .lfm-kontextmenue-eintrag:focus-visible {
  outline-color: var(--primary-400);
}

.lfm-kontextmenue-symbol {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  color: var(--gray-500);
}

.dark .lfm-kontextmenue-symbol {
  color: var(--gray-400);
}

.lfm-kontextmenue-eintrag:hover .lfm-kontextmenue-symbol {
  color: inherit;
}

/* Loeschen und Aehnliches bleibt auch hier als gefaehrlich erkennbar. */
.lfm-kontextmenue-eintrag.lfm-gefahr {
  color: var(--danger-700);
}

.dark .lfm-kontextmenue-eintrag.lfm-gefahr {
  color: var(--danger-400);
}

.lfm-kontextmenue-eintrag.lfm-gefahr:hover {
  background-color: var(--danger-50);
  color: var(--danger-800);
}

.dark .lfm-kontextmenue-eintrag.lfm-gefahr:hover {
  background-color: color-mix(in oklab, var(--danger-400) 18%, transparent);
  color: var(--danger-100);
}

.lfm-kontextmenue-eintrag.lfm-gefahr .lfm-kontextmenue-symbol {
  color: inherit;
}

/* Auf Touchgeraeten gibt es keinen Rechtsklick - dort fuehrt der Weg ueber
   den Punktknopf am Zeilenende. Der ist dann die einzige Tuer und darf
   nicht zu klein sein. */
@media (pointer: coarse) {
  .fi-ta-actions .fi-icon-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* =====================================================================
 * 11. STEMPELUHR IN DER OBEREN LEISTE
 *
 * Sitzt neben dem Benutzermenue und ist auf jeder Seite sichtbar. Die
 * Trefferflaechen bleiben bei 44px wie ueberall - hier besonders wichtig,
 * weil die Knoepfe im Laboralltag oft mit Handschuhen getroffen werden.
 *
 * Auf schmalen Bildschirmen verschwinden die Beschriftungen und nur die
 * Symbole bleiben: Die Uhrzeit selbst ist die Information, die man sucht.
 * ===================================================================== */

.lfm-uhr {
  display: flex;
  align-items: center;
}

.lfm-uhr-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding-inline: 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.5rem;
  background-color: var(--color-white);
  color: var(--gray-800);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}

.dark .lfm-uhr-knopf {
  background-color: var(--gray-800);
  border-color: var(--gray-600);
  color: var(--gray-100);
}

.lfm-uhr-knopf:hover {
  background-color: var(--gray-50);
}

.dark .lfm-uhr-knopf:hover {
  background-color: var(--gray-700);
}

.lfm-uhr-knopf:focus-visible {
  outline: 3px solid var(--primary-600);
  outline-offset: 2px;
}

.dark .lfm-uhr-knopf:focus-visible {
  outline-color: var(--primary-400);
}

.lfm-uhr-symbol {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

/* Der Startknopf ist die haeufigste Handlung des Tages - er darf die
   Primaerfarbe tragen. */
.lfm-uhr-start {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: var(--primary-50);
}

.lfm-uhr-start:hover {
  background-color: var(--primary-500);
  border-color: var(--primary-500);
}

.dark .lfm-uhr-start {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: var(--primary-50);
}

.dark .lfm-uhr-start:hover {
  background-color: var(--primary-500);
}

/* ---- Laufende Uhr ---- */

.lfm-uhr-laufend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.25rem 0.25rem 0.75rem;
  border: 1px solid var(--primary-200);
  border-radius: 0.625rem;
  background-color: var(--primary-50);
}

.dark .lfm-uhr-laufend {
  border-color: color-mix(in oklab, var(--primary-400) 35%, transparent);
  background-color: color-mix(in oklab, var(--primary-400) 12%, transparent);
}

/* Pulsierender Punkt: zeigt "es laeuft" auch dann, wenn die Minutenzahl
   gerade stillsteht. Bei prefers-reduced-motion ohne Puls, aber sichtbar. */
.lfm-uhr-punkt {
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  border-radius: 9999px;
  background-color: var(--primary-600);
  animation: lfm-puls 2s ease-in-out infinite;
}

.dark .lfm-uhr-punkt {
  background-color: var(--primary-400);
}

@keyframes lfm-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .lfm-uhr-punkt { animation: none; }
}

.lfm-uhr-zeit {
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--primary-700);
  /* Feste Breite, damit die Leiste beim Ticken nicht wackelt. */
  min-width: 4.75rem;
}

.dark .lfm-uhr-zeit {
  color: var(--primary-100);
}

.lfm-uhr-art {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray-600);
  white-space: nowrap;
}

.dark .lfm-uhr-art {
  color: var(--gray-300);
}

/* Pause: gedeckte Farbe statt Primaerfarbe, damit auf einen Blick klar
   ist, dass gerade NICHT gearbeitet wird. */
.lfm-uhr-pausiert {
  border-color: var(--warning-300);
  background-color: var(--warning-50);
}

.dark .lfm-uhr-pausiert {
  border-color: color-mix(in oklab, var(--warning-400) 35%, transparent);
  background-color: color-mix(in oklab, var(--warning-400) 12%, transparent);
}

.lfm-uhr-pausiert .lfm-uhr-punkt {
  background-color: var(--warning-600);
  animation: none;
}

.lfm-uhr-pausiert .lfm-uhr-zeit {
  color: var(--warning-700);
}

.dark .lfm-uhr-pausiert .lfm-uhr-zeit {
  color: var(--warning-100);
}

.lfm-uhr-ende {
  color: var(--danger-700);
}

.dark .lfm-uhr-ende {
  color: var(--danger-300);
}

/* ---- Enge Bildschirme ---- */

@media (max-width: 1100px) {
  .lfm-uhr-art {
    display: none;
  }
}

@media (max-width: 900px) {
  .lfm-uhr-text {
    display: none;
  }

  .lfm-uhr-knopf {
    padding-inline: 0.625rem;
  }
}

@media (max-width: 640px) {
  /* Auf dem Telefon bleibt die Zeit und je ein Symbol - mehr passt neben
     Logo und Benutzermenue nicht, ohne dass etwas umbricht. */
  .lfm-uhr-laufend {
    gap: 0.25rem;
    padding-left: 0.5rem;
  }

  .lfm-uhr-start .lfm-uhr-symbol + span {
    display: none;
  }

  .lfm-uhr-zeit {
    font-size: 1rem;
    min-width: 4.25rem;
  }
}

/* Startzeit neben der Taetigkeit - der sichtbare Beweis, dass die Uhr in
   der Datenbank steht und nicht im Browser. */
.lfm-uhr-seit {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gray-500);
}

.dark .lfm-uhr-seit {
  color: var(--gray-400);
}

/* Vergessen auszustempeln: eigener Warnhinweis, damit die Zahl nicht
   kommentarlos ins Monatskonto wandert. */
.lfm-uhr-vergessen {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background-color: var(--danger-50);
  color: var(--danger-700);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: help;
}

.dark .lfm-uhr-vergessen {
  background-color: color-mix(in oklab, var(--danger-400) 18%, transparent);
  color: var(--danger-200);
}

@media (max-width: 1100px) {
  .lfm-uhr-seit { display: none; }
}

/* ====================================================================
   PROTOKOLLARCHIV
   Zwei Spalten: links die Monate zum Umschalten, rechts der Inhalt.
   Unter 1024px untereinander - die Monatsliste ist kurz und darf oben
   stehen, ohne den Blick auf die Treffer zu verstellen.
   ==================================================================== */

.lfm-archiv {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 1024px) {
  .lfm-archiv {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lfm-archiv__ueberschrift {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 0.75rem;
}

.dark .lfm-archiv__ueberschrift {
  color: var(--gray-400);
}

/* ---- Monatsliste --------------------------------------------------- */

.lfm-archiv__monate {
  background-color: var(--fi-color-white, #fff);
  border: 1px solid var(--gray-200);
  border-radius: 0.75rem;
  padding: 1rem;
  position: sticky;
  top: 1rem;
}

.dark .lfm-archiv__monate {
  background-color: var(--gray-900);
  border-color: var(--gray-700);
}

@media (max-width: 1024px) {
  .lfm-archiv__monate {
    position: static;
  }
}

.lfm-archiv__liste {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.lfm-archiv__monat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  width: 100%;
  /* 44px Zielgroesse - auch mit der Maus am Feierabend treffbar. */
  min-height: 2.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.lfm-archiv__monat:hover {
  background-color: var(--gray-100);
}

.dark .lfm-archiv__monat:hover {
  background-color: var(--gray-800);
}

.lfm-archiv__monat:focus-visible {
  outline: 2px solid var(--primary-600);
  outline-offset: 2px;
}

.dark .lfm-archiv__monat:focus-visible {
  outline-color: var(--primary-400);
}

.lfm-archiv__monat--aktiv,
.lfm-archiv__monat--aktiv:hover {
  background-color: color-mix(in oklab, var(--primary-500) 14%, transparent);
}

.lfm-archiv__monat-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gray-900);
}

.dark .lfm-archiv__monat-name {
  color: var(--gray-100);
}

.lfm-archiv__monat--aktiv .lfm-archiv__monat-name {
  color: var(--primary-700);
}

.dark .lfm-archiv__monat--aktiv .lfm-archiv__monat-name {
  color: var(--primary-200);
}

.lfm-archiv__monat-zahlen {
  font-size: 0.75rem;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

.dark .lfm-archiv__monat-zahlen {
  color: var(--gray-400);
}

/* ---- Inhalt -------------------------------------------------------- */

.lfm-archiv__inhalt {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: var(--fi-color-white, #fff);
  border: 1px solid var(--gray-200);
  border-radius: 0.75rem;
  padding: 1.25rem;
  min-width: 0;
}

.dark .lfm-archiv__inhalt {
  background-color: var(--gray-900);
  border-color: var(--gray-700);
}

.lfm-archiv__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.lfm-archiv__kopf .lfm-archiv__ueberschrift {
  margin-bottom: 0.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--gray-900);
}

.dark .lfm-archiv__kopf .lfm-archiv__ueberschrift {
  color: var(--gray-100);
}

.lfm-archiv__zaehler {
  font-size: 0.875rem;
  color: var(--gray-500);
  font-variant-numeric: tabular-nums;
}

.dark .lfm-archiv__zaehler {
  color: var(--gray-400);
}

.lfm-archiv__laedt {
  font-size: 0.875rem;
  color: var(--gray-500);
}

.lfm-archiv__nichts {
  padding: 2rem 0;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--gray-500);
}

.dark .lfm-archiv__nichts {
  color: var(--gray-400);
}

/* ---- Trefferliste --------------------------------------------------- */

.lfm-archiv__tabelle-rahmen {
  /* Breite Inhalte scrollen in sich, nie die Seite. */
  overflow-x: auto;
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
}

.dark .lfm-archiv__tabelle-rahmen {
  border-color: var(--gray-700);
}

.lfm-archiv__tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.lfm-archiv__tabelle th {
  position: sticky;
  top: 0;
  background-color: var(--gray-50);
  padding: 0.625rem 0.875rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gray-600);
  white-space: nowrap;
  border-bottom: 1px solid var(--gray-200);
}

.dark .lfm-archiv__tabelle th {
  background-color: var(--gray-800);
  color: var(--gray-300);
  border-bottom-color: var(--gray-700);
}

.lfm-archiv__tabelle td {
  padding: 0.625rem 0.875rem;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-100);
  vertical-align: top;
}

.dark .lfm-archiv__tabelle td {
  color: var(--gray-300);
  border-bottom-color: var(--gray-800);
}

.lfm-archiv__tabelle tbody tr:nth-child(even) td {
  background-color: color-mix(in oklab, var(--gray-500) 4%, transparent);
}

.lfm-archiv__tabelle tbody tr:last-child td {
  border-bottom: 0;
}

.lfm-archiv__zeit,
.lfm-archiv__ip {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lfm-archiv__ip {
  color: var(--gray-500);
}

.lfm-archiv__vorgang {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  background-color: var(--gray-100);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray-700);
  white-space: nowrap;
}

.dark .lfm-archiv__vorgang {
  background-color: var(--gray-800);
  color: var(--gray-200);
}

/* Loeschungen und fehlgeschlagene Anmeldungen rot - dieselbe Sprache wie
   im Protokoll selbst, damit der Blick nicht umlernen muss. */
.lfm-archiv__vorgang--rot {
  background-color: var(--danger-50);
  color: var(--danger-700);
}

.dark .lfm-archiv__vorgang--rot {
  background-color: color-mix(in oklab, var(--danger-400) 18%, transparent);
  color: var(--danger-200);
}

/* ---- Leerer Zustand ------------------------------------------------- */

.lfm-archiv-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.5rem 1rem;
  text-align: center;
}

.lfm-archiv-leer__symbol {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--gray-400);
}

.lfm-archiv-leer__titel {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--gray-900);
}

.dark .lfm-archiv-leer__titel {
  color: var(--gray-100);
}

.lfm-archiv-leer__text {
  max-width: 42ch;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gray-500);
}

.dark .lfm-archiv-leer__text {
  color: var(--gray-400);
}

/* ====================================================================
   NAVIGATIONSBLÖCKE
   Drei Blöcke in der Reihenfolge des Arbeitstages: Aufträge, Meins,
   Einstellungen. Die Startseite steht ohne Gruppe darüber.

   Filament setzt zwischen Gruppen nur Abstand. Bei elf Einträgen reicht
   das nicht - man sieht eine lange Liste mit gelegentlichen
   Zwischenüberschriften, nicht drei Blöcke. Eine Linie macht daraus eine
   Gliederung, die man mit einem Blick erfasst.
   ==================================================================== */

.fi-sidebar-nav .fi-sidebar-group + .fi-sidebar-group {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-200);
}

.dark .fi-sidebar-nav .fi-sidebar-group + .fi-sidebar-group {
  border-top-color: var(--gray-700);
}

/* Die Gruppenüberschrift war grau in grau und kaum als Überschrift zu
   erkennen. Sie trägt die Gliederung mit - also darf man sie lesen. */
.fi-sidebar-group-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.dark .fi-sidebar-group-label {
  color: var(--gray-400);
}

/* Eingeklappte Leiste: Dort steht keine Überschrift, nur Symbole - die
   Linie ist dann das Einzige, was die Blöcke noch trennt. Sie bleibt,
   die Abstände werden kleiner. */
.fi-sidebar-nav:where(.fi-collapsed, [x-cloak]) .fi-sidebar-group + .fi-sidebar-group,
.fi-main-sidebar-collapsed .fi-sidebar-nav .fi-sidebar-group + .fi-sidebar-group {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}


/* ====================================================================
   DIREKT BEARBEITBARE ZELLEN — Fassung 2

   Die erste Fassung zielte auf das Eingabefeld. Rahmen und Hintergrund
   sitzen aber auf dem Umschlag .fi-input-wrp; sichtbar wurde das erst
   am Bildschirmfoto: vier fette Kästen je Zeile, die Tabelle las sich
   wie ein Formular.

   Ziel: ruhig, solange man nicht hinfasst. Erst beim Überfahren und beim
   Fokus zeigt sich die Zelle als bedienbar - so verhält sich eine
   Tabellenzelle.
   ==================================================================== */

.lfm-zelle-wahl .fi-input-wrp,
.lfm-zelle-datum .fi-input-wrp {
  background-color: transparent;
  box-shadow: none;
  --tw-ring-color: transparent;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.lfm-zelle-wahl:hover .fi-input-wrp,
.lfm-zelle-datum:hover .fi-input-wrp {
  background-color: var(--gray-50);
  box-shadow: inset 0 0 0 1px var(--gray-300);
}

.dark .lfm-zelle-wahl:hover .fi-input-wrp,
.dark .lfm-zelle-datum:hover .fi-input-wrp {
  background-color: var(--gray-800);
  box-shadow: inset 0 0 0 1px var(--gray-600);
}

.lfm-zelle-wahl .fi-input-wrp:focus-within,
.lfm-zelle-datum .fi-input-wrp:focus-within {
  background-color: var(--fi-color-white, #fff);
  box-shadow: inset 0 0 0 2px var(--primary-600);
}

.dark .lfm-zelle-wahl .fi-input-wrp:focus-within,
.dark .lfm-zelle-datum .fi-input-wrp:focus-within {
  background-color: var(--gray-900);
  box-shadow: inset 0 0 0 2px var(--primary-400);
}

/* Gesperrt heißt gesperrt: Wer den Auftrag nicht ändern darf, sieht den
   Wert, aber keinen Bedienhinweis. */
.lfm-zelle-wahl:has(select:disabled):hover .fi-input-wrp,
.lfm-zelle-datum:has(input:disabled):hover .fi-input-wrp {
  background-color: transparent;
  box-shadow: none;
}

/* Schmaler als ein Formularfeld - vier Bedienelemente je Zeile brauchen
   den Platz, den sie sparen. */
.lfm-zelle-datum .fi-input {
  min-width: 0;
  padding-inline: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.lfm-zelle-wahl .fi-select-input {
  padding-inline-start: 0.5rem;
  font-size: 0.875rem;
}

/* ---- Farbe bleibt Farbe -------------------------------------------------
   Der Status trug vorher ein farbiges Abzeichen. Beim Umbau auf eine
   Klappliste wäre die Farbsprache verlorengegangen - die Zelle trägt
   ihren Wert deshalb als data-Attribut und wird danach eingefärbt. */

.lfm-zelle-wahl[data-wert] .fi-select-input {
  font-weight: 600;
}

.lfm-zelle-wahl[data-wert="received"] .fi-select-input    { color: var(--gray-600); }
.lfm-zelle-wahl[data-wert="in_progress"] .fi-select-input { color: var(--info-700); }
.lfm-zelle-wahl[data-wert="in_review"] .fi-select-input   { color: var(--warning-700); }
.lfm-zelle-wahl[data-wert="completed"] .fi-select-input   { color: var(--success-700); }
.lfm-zelle-wahl[data-wert="cancelled"] .fi-select-input   { color: var(--danger-700); }

.dark .lfm-zelle-wahl[data-wert="received"] .fi-select-input    { color: var(--gray-300); }
.dark .lfm-zelle-wahl[data-wert="in_progress"] .fi-select-input { color: var(--info-300); }
.dark .lfm-zelle-wahl[data-wert="in_review"] .fi-select-input   { color: var(--warning-300); }
.dark .lfm-zelle-wahl[data-wert="completed"] .fi-select-input   { color: var(--success-300); }
.dark .lfm-zelle-wahl[data-wert="cancelled"] .fi-select-input   { color: var(--danger-300); }

/* Fehlender Bericht bei vergangenem Termin. */
.lfm-zelle-faellig .fi-input {
  color: var(--danger-700);
  font-weight: 600;
}

.dark .lfm-zelle-faellig .fi-input {
  color: var(--danger-300);
}

/* ---- Dichte ---------------------------------------------------------
   Im Blatt sieht man dreißig Zeilen auf einmal. Etwas weniger Luft
   zwischen den Spalten holt rund zweihundert Pixel zurück - genug,
   damit die Tabelle in den Bildschirm passt, statt quer zu scrollen.
   Die Zeilenhöhe bleibt: Die Trefferflächen sollen nicht schrumpfen. */
.fi-ta-cell {
  padding-inline: 0.625rem;
}

.fi-ta-header-cell {
  padding-inline: 0.625rem;
}
/* ---- Spaltenbreite --------------------------------------------------
   Gemessen: Filament gibt .fi-ta-text-input und .fi-ta-select eine
   Mindestbreite von 192px. Vier solche Spalten machten die Tabelle 1997px
   breit in einem 1582px-Behaelter - "Bericht raus" lag rechts ausserhalb
   des Bildes.

   Drei Anlaeufe gingen daneben, weil sie auf .fi-input-wrp und auf die
   Tabellenzelle zielten. Die Mindestbreite sitzt auf dem Element, das
   auch unsere eigene Klasse traegt. */

/* 9,75rem, nicht weniger: Bei 8,5rem schnitt der Browser das Jahr ab -
   aus "05.08.2026" wurde "05.08.20". Ein Datum, dem das Jahr fehlt,
   ist schlimmer als eine schmale Spalte. */
.lfm-zelle-datum.fi-ta-text-input {
  min-width: 9.75rem;
  width: 9.75rem;
}

.lfm-zelle-wahl.fi-ta-select {
  min-width: 8.5rem;
  width: 8.5rem;
}

/* Der Status traegt laengere Woerter. Bei 10rem wurde "In Bearbeitung"
   zu "In Bearbeitunc" - lieber eine Spalte breiter als ein Wort, das
   man raten muss. */
.fi-ta-cell-status .lfm-zelle-wahl.fi-ta-select {
  min-width: 11.5rem;
  width: 11.5rem;
}
/* ====================================================================
   TABELLEN AUF DEM TELEFON

   Eine Tabelle mit neun Spalten ist auf einem 412px-Bildschirm nicht
   bedienbar: Man sieht zwei Spalten und scrollt für den Rest quer.
   Gemessen am Telefon waren Labornummer und Plan-Termin sichtbar -
   Adresse, Wer und Status lagen außerhalb.

   Unterhalb von 768px wird deshalb aus jeder Zeile eine KARTE. Auf dem
   Desktop bleibt alles, wie es war - die sortierbare Kopfzeile ist dort
   zu wertvoll, um sie gegen ein Kartenlayout einzutauschen.

   ZWEI FALLEN, beide erst am Bildschirmfoto aufgefallen:

   1. Filament bildet die Zellenklasse aus dem Spaltennamen
      (str()->camel()->kebab()). Bei Beziehungsspalten bleibt der PUNKT
      stehen: aus 'site.street' wird `fi-ta-cell-site.street`. Im CSS
      muss er maskiert werden - `.fi-ta-cell-site\.street`. Ohne das
      greift die Regel nicht, und die Zelle landet irgendwo im Raster.

   2. `.fi-ta-table > tbody > tr > td { display: block }` ist
      spezifischer als `.fi-ta-selection-cell { display: none }`. Das
      Auswahlkästchen blieb deshalb stehen. Ausblenden braucht hier
      dieselbe Tiefe.
   ==================================================================== */

@media (max-width: 767px) {

  /* ---- Aus der Tabelle wird eine Liste von Karten ------------------ */

  .fi-ta-table,
  .fi-ta-table > tbody,
  .fi-ta-table > tbody > tr,
  .fi-ta-table > tbody > tr > td {
    display: block;
    width: auto;
  }

  /* Die Kopfzeile trägt auf dem Telefon nichts bei - die Beschriftungen
     stehen in den Karten selbst. Sortiert wird über das Menü oben. */
  .fi-ta-table > thead {
    display: none;
  }

  .fi-ta-table > tbody > tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--gray-200);
  }

  .dark .fi-ta-table > tbody > tr {
    border-bottom-color: var(--gray-700);
  }

  .fi-ta-table > tbody > tr > td {
    padding: 0;
    border: 0;
    font-size: 0.8125rem;
    min-width: 0;
  }

  /* Zebrastreifen tragen im Kartenlayout nichts mehr bei - die Karten
     sind durch Linien getrennt. Sie machen nur unruhig. */
  .fi-ta-table > tbody > tr:nth-child(even) > td {
    background-color: transparent;
  }

  /* Mehrfachauswahl braucht auf dem Telefon niemand - sie kostet eine
     Rasterzelle und lädt zum Verrutschen ein. Dieselbe Selektortiefe
     wie oben, sonst gewinnt display:block. */
  .fi-ta-table > tbody > tr > td.fi-ta-selection-cell {
    display: none;
  }

  /* Beschreibungen unter dem Wert kleiner - "Probennummern noch offen"
     stand fett und fast so gross wie die Labornummer darueber. */
  .fi-ta-table > tbody > tr .fi-ta-text-description,
  .fi-ta-table > tbody > tr .fi-ta-col-description {
    font-size: 0.75rem;
    font-weight: 400;
  }

  /* ---- Beschriftungen ---------------------------------------------- */
  /*
     Filament gibt jeder Zelle eine Klasse, aber nirgends die Überschrift
     als Text. Sie steht deshalb hier - eine Zeile je Spalte. Wer eine
     Spalte umbenennt, muss hier nachziehen; dafür bleibt das Markup
     unangetastet.
   */
  .fi-ta-cell-scheduled-date::before,
  .fi-ta-cell-samples-count::before,
  .fi-ta-cell-customer\.short-name::before,
  .fi-ta-cell-sample-type::before,
  .fi-ta-cell-assigned-to::before,
  .fi-ta-cell-status::before,
  .fi-ta-cell-report-sent-at::before,
  .fi-ta-cell-received-at::before,
  .fi-ta-cell-customer-number::before,
  .fi-ta-cell-email::before,
  .fi-ta-cell-phone::before,
  .fi-ta-cell-city::before,
  .fi-ta-cell-orders-count::before,
  .fi-ta-cell-is-active::before,
  .fi-ta-cell-access-status::before,
  .fi-ta-cell-roles\.name::before {
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gray-500);
  }

  .dark .fi-ta-cell-scheduled-date::before,
  .dark .fi-ta-cell-samples-count::before,
  .dark .fi-ta-cell-customer\.short-name::before,
  .dark .fi-ta-cell-sample-type::before,
  .dark .fi-ta-cell-assigned-to::before,
  .dark .fi-ta-cell-status::before,
  .dark .fi-ta-cell-report-sent-at::before,
  .dark .fi-ta-cell-received-at::before,
  .dark .fi-ta-cell-customer-number::before,
  .dark .fi-ta-cell-email::before,
  .dark .fi-ta-cell-phone::before,
  .dark .fi-ta-cell-city::before,
  .dark .fi-ta-cell-orders-count::before,
  .dark .fi-ta-cell-is-active::before,
  .dark .fi-ta-cell-access-status::before,
  .dark .fi-ta-cell-roles\.name::before {
    color: var(--gray-400);
  }

  /* Aufträge */
  .fi-ta-cell-scheduled-date::before        { content: "Termin"; }
  .fi-ta-cell-samples-count::before         { content: "Proben"; }
  .fi-ta-cell-customer\.short-name::before  { content: "Auftraggeber"; }
  .fi-ta-cell-sample-type::before           { content: "Probentyp"; }
  .fi-ta-cell-assigned-to::before           { content: "Wer fährt"; }
  .fi-ta-cell-status::before                { content: "Status"; }
  .fi-ta-cell-report-sent-at::before        { content: "Bericht raus"; }
  .fi-ta-cell-received-at::before           { content: "Eingang"; }

  /* Kunden und Benutzer */
  .fi-ta-cell-customer-number::before { content: "Kundennummer"; }
  .fi-ta-cell-email::before           { content: "E-Mail"; }
  .fi-ta-cell-phone::before           { content: "Telefon"; }
  .fi-ta-cell-city::before            { content: "Ort"; }
  .fi-ta-cell-orders-count::before    { content: "Aufträge"; }
  .fi-ta-cell-is-active::before       { content: "Status"; }
  .fi-ta-cell-access-status::before   { content: "Zugang"; }
  .fi-ta-cell-roles\.name::before     { content: "Rolle"; }

  /* ---- Reihenfolge in der Karte ------------------------------------- */
  /*
     Nicht die Spaltenreihenfolge der Tabelle, sondern die, in der man
     die Angaben auf dem Telefon sucht: Woran erkenne ich den Auftrag,
     wo ist er, wann, wer - dann der Rest.
   */
  .fi-ta-table > tbody > tr > td.fi-ta-cell-lab-number,
  .fi-ta-table > tbody > tr > td.fi-ta-cell-site\.street,
  .fi-ta-table > tbody > tr > td.fi-ta-cell-company,
  .fi-ta-table > tbody > tr > td.fi-ta-cell-name {
    grid-column: 1 / -1;
  }

  .fi-ta-cell-lab-number          { order: 1; }
  .fi-ta-cell-company             { order: 1; }
  .fi-ta-cell-name                { order: 1; }
  .fi-ta-cell-site\.street        { order: 2; }
  .fi-ta-cell-scheduled-date      { order: 3; }
  .fi-ta-cell-assigned-to         { order: 4; }
  .fi-ta-cell-customer\.short-name { order: 5; }
  .fi-ta-cell-sample-type         { order: 6; }
  .fi-ta-cell-status              { order: 7; }
  .fi-ta-cell-report-sent-at      { order: 8; }
  .fi-ta-cell-samples-count       { order: 9; }

  /* Die Labornummer ist die Überschrift der Karte. */
  .fi-ta-table > tbody > tr > td.fi-ta-cell-lab-number,
  .fi-ta-table > tbody > tr > td.fi-ta-cell-company,
  .fi-ta-table > tbody > tr > td.fi-ta-cell-name {
    font-size: 1rem;
    font-weight: 700;
  }

  /* Zahlen rechtsbündig zu setzen ergibt nur in Spalten Sinn. */
  .fi-ta-cell-samples-count .fi-ta-col,
  .fi-ta-cell-orders-count .fi-ta-col {
    justify-content: flex-start;
  }

  /* ---- Bedienbare Zellen ------------------------------------------- */
  /*
     Die festen Breiten aus der Desktop-Ansicht (8,5rem und mehr) würden
     das Raster sprengen. Auf dem Telefon nehmen die Felder die Breite
     ihrer Rasterzelle - und behalten ihre Trefferfläche.
   */
  .lfm-zelle-datum.fi-ta-text-input,
  .lfm-zelle-wahl.fi-ta-select,
  .fi-ta-cell-status .lfm-zelle-wahl.fi-ta-select {
    min-width: 0;
    width: 100%;
  }

  /* Auf dem Telefon dürfen die Felder aussehen wie Felder: Ohne Maus
     gibt es kein Überfahren, an dem man erkennt, dass hier etwas
     bedienbar ist. */
  .lfm-zelle-wahl .fi-input-wrp,
  .lfm-zelle-datum .fi-input-wrp {
    background-color: var(--gray-50);
    box-shadow: inset 0 0 0 1px var(--gray-200);
  }

  .dark .lfm-zelle-wahl .fi-input-wrp,
  .dark .lfm-zelle-datum .fi-input-wrp {
    background-color: var(--gray-800);
    box-shadow: inset 0 0 0 1px var(--gray-700);
  }

  /* ---- Zeilenmenü ---------------------------------------------------- */

  .fi-ta-table > tbody > tr > td.fi-ta-actions-cell {
    order: 20;
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
  }

  /* ---- Werkzeugleiste über der Tabelle ------------------------------ */

  /* Gruppieren und Spaltenverwaltung sind Auswertungsfunktionen für den
     grossen Bildschirm. Auf dem Telefon stand dort nur ein Symbol ohne
     Beschriftung. */
  .fi-ta-grouping-settings,
  .fi-ta-col-manager-btn-ctn {
    display: none;
  }

  .fi-ta-header-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .fi-ta-search-field {
    flex: 1 1 100%;
  }

  /* ---- Reiter ------------------------------------------------------- */

  /* Sie liefen quer aus dem Bild. Umbrechen statt scrollen: Man sieht
     alle sechs auf einen Blick, statt drei und einen Scrollbalken. */
  .fi-tabs {
    flex-wrap: wrap;
    gap: 0.25rem;
    overflow-x: visible;
  }

  .fi-tabs-item {
    font-size: 0.8125rem;
    padding-inline: 0.625rem;
  }

  /* ---- Seitenkopf ---------------------------------------------------- */

  .fi-header {
    gap: 0.75rem;
  }

  .fi-header-heading {
    font-size: 1.5rem;
  }

  .fi-header-subheading {
    font-size: 0.875rem;
  }

  /* ---- Höhe der Karte ------------------------------------------------
     Gemessen: Eine Karte war 599px hoch, auf einem 915px-Bildschirm also
     anderthalb Karten pro Blick. Zwei Ursachen:

     1. Filaments .fi-ta-col bringt vertikales Polster mit, das in einer
        Tabellenzeile richtig ist (Trefferfläche über die ganze Zeile) und
        in einer Karte nur Luft erzeugt - eine Zeile Text war 58px hoch.
     2. Es standen ALLE neun Angaben auf der Karte.

     Jetzt stehen die Hauptsachen da; der Rest ist einen Fingertipp
     entfernt, weil die Karte selbst die Detailseite öffnet. */

  .fi-ta-table > tbody > tr .fi-ta-col {
    padding-block: 0;
    min-height: 0;
  }

  .fi-ta-table > tbody > tr {
    gap: 0.375rem 0.75rem;
  }

  /* Nebenangaben: nicht auf der Karte, sondern auf der Detailseite.
     Proben, Berichtsausgang und Eingang liest man am Schreibtisch, nicht
     unterwegs zwischen zwei Terminen. */
  .fi-ta-table > tbody > tr > td.fi-ta-cell-samples-count,
  .fi-ta-table > tbody > tr > td.fi-ta-cell-report-sent-at,
  .fi-ta-table > tbody > tr > td.fi-ta-cell-received-at,
  .fi-ta-table > tbody > tr > td.fi-ta-cell-estimated-price,
  .fi-ta-table > tbody > tr > td.fi-ta-cell-contact,
  .fi-ta-table > tbody > tr > td.fi-ta-cell-created-at {
    display: none;
  }

  /* Der Status steht allein in seiner Reihe - dann darf er sie auch
     ganz haben. */
  .fi-ta-table > tbody > tr > td.fi-ta-cell-status {
    grid-column: 1 / -1;
  }

  /* Das Zeilenmenü ganz unten rechts.
     Filament gibt der Aktionszelle KEINE eigene Klasse - sie heisst nur
     `fi-ta-cell`. Deshalb über die Position, nicht über den Namen. */
  .fi-ta-table > tbody > tr > td:last-child {
    order: 20;
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    margin-top: -0.25rem;
  }

  /* Filaments Polster sitzt nicht nur auf .fi-ta-col, sondern auch auf den
     Elementen darin (.fi-ta-text und Verwandte). In einer Tabellenzeile ist
     das richtig - es macht die ganze Zeile zur Trefferfläche. In einer Karte
     erzeugt es nur Luft: eine Zeile Text war 58px hoch.

     Ausdrücklich AUSGENOMMEN sind die bedienbaren Felder - dort ist die
     Trefferfläche kein Luxus, sondern die Bedingung dafür, dass man mit dem
     Daumen trifft. */
  .fi-ta-table > tbody > tr > td .fi-ta-col,
  .fi-ta-table > tbody > tr > td .fi-ta-text,
  .fi-ta-table > tbody > tr > td .fi-ta-text-item,
  .fi-ta-table > tbody > tr > td .fi-ta-col-wrp {
    padding-block: 0;
    min-height: 0;
  }

  .fi-ta-table > tbody > tr > td .lfm-zelle-wahl,
  .fi-ta-table > tbody > tr > td .lfm-zelle-datum {
    min-height: 2.5rem;
  }

  /* ---- Platz über der ersten Karte -----------------------------------
     Gemessen: Bis zur ersten Karte gingen rund 380px drauf - auf einem
     915px-Bildschirm mehr als ein Drittel, bevor die erste Angabe kommt.

     Der Untertitel erklärt eine Bedienung, die es auf dem Telefon so
     nicht gibt ("in der Zeile"). Dort sind es Karten. */
  .fi-header-subheading {
    display: none;
  }

  /* Die Werkzeugleiste trug ihre Höhe auch dann, wenn nur noch das
     Suchfeld darin steht - die ausgeblendeten Bedienelemente hinterliessen
     eine Leerfläche darüber. */
  .fi-ta-header-toolbar {
    padding: 0.625rem 0.75rem;
    min-height: 0;
  }

  .fi-ta-header-toolbar > *:empty {
    display: none;
  }

  /* Die erste Karte schliesst direkt an die Suche an. */
  .fi-ta-content {
    padding-top: 0;
  }

  /* Das Gruppieren-Feld war ausgeblendet, seine Hülle nicht - sie liess
     rund 35px Leerfläche über dem Suchfeld stehen. */
  .fi-ta-header-toolbar > *:has(.fi-ta-grouping-settings) {
    display: none;
  }

  /* ---- Überschrift der Karte ganz nach oben ---------------------------
     `order: 1` war falsch gedacht: Zellen ohne eigene Angabe stehen auf 0
     und damit DAVOR. In der Kundenliste landete der Firmenname deshalb
     unter Telefonnummer und Status. Alles, was die Karte überschreibt,
     braucht einen negativen Wert. */
  .fi-ta-cell-lab-number,
  .fi-ta-cell-company,
  .fi-ta-cell-name {
    order: -2;
  }

  .fi-ta-cell-site\.street {
    order: -1;
  }

  /* Die Zusammenfassung unter der Liste zerfiel im Kartenlayout in zwei
     zentrierte Zeilen ("Zusammenfassung" / "Gesamt 3"). Die Gesamtzahl
     über alle Kunden ist ohnehin keine Frage, die man am Telefon stellt. */

  /* Die Zusammenfassung heisst im Markup `fi-ta-summary-header-row` und
     enthaelt Zeilen mit `fi-ta-summary-row-heading-cell` - nicht, wie
     zuerst geraten, `fi-ta-summary-row`. Im Kartenlayout zerfiel sie in
     zwei zentrierte Zeilen ("Zusammenfassung" / "Gesamt 3"). Eine
     Gesamtzahl ueber alle Datensaetze ist ohnehin keine Frage, die man am
     Telefon stellt. */
  .fi-ta-summary-header-row,
  .fi-ta-table > tbody > tr:has(.fi-ta-summary-row-heading-cell) {
    display: none;
  }
}
/* ====================================================================
   SPEICHERN BLEIBT IN REICHWEITE

   Auf dem Telefon stand "Löschen" als roter Knopf über die volle Breite
   ganz oben, während "Speichern" am Ende eines langen Formulars lag -
   die Gewichtung genau andersherum. "Löschen" liegt jetzt im Menü, und
   der Speichern-Balken läuft am unteren Rand mit.

   Die Knopfleiste heisst `fi-sc-actions`, nicht `fi-form-actions` - im
   Browser nachgesehen, nachdem die erste Fassung wirkungslos blieb.
   ==================================================================== */

@media (max-width: 767px) {
  .fi-sc-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin-inline: -1rem;
    padding: 0.75rem 1rem;
    background-color: var(--fi-color-white, #fff);
    border-top: 1px solid var(--gray-200);
    /* Genug Abstand, dass der Balken nicht in der Gestensteuerung des
       Telefons endet. */
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }

  .dark .fi-sc-actions {
    background-color: var(--gray-900);
    border-top-color: var(--gray-700);
  }

  /* Speichern nimmt die Breite, Abbrechen bleibt daneben. */
  .fi-sc-actions .fi-ac {
    width: 100%;
    gap: 0.5rem;
  }

  .fi-sc-actions .fi-ac > .fi-btn:first-child,
  .fi-sc-actions .fi-ac > *:first-child .fi-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* =====================================================================
 * NOTIZMODUS
 * =====================================================================
 *
 * Zettel, die an der Oberflaeche kleben. Gesetzt werden sie vom Skript
 * (public/js/lfm-notizmodus.js), das nur Klassen vergibt - wie sie
 * aussehen, steht hier.
 *
 * Zu den Ebenen: Die Marken liegen ueber dem Inhalt, aber die Ebene
 * selbst laesst Klicks durch (pointer-events: none). Sonst waere die
 * ganze Seite blockiert, sobald der Modus laeuft - auch die Navigation,
 * die ausdruecklich bedienbar bleiben soll.
 */

/* ---- Der Schalter in der oberen Leiste --------------------------------- */

.lfm-notiz-schalter {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.25rem;
  padding: 0 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-500);
  transition: background-color 75ms, color 75ms;
}

.lfm-notiz-schalter:hover {
  background-color: var(--gray-100);
  color: var(--gray-700);
}

.dark .lfm-notiz-schalter {
  color: var(--gray-400);
}

.dark .lfm-notiz-schalter:hover {
  background-color: var(--gray-800);
  color: var(--gray-200);
}

/* Laeuft der Modus, ist der Schalter kein stiller Knopf mehr. */
.lfm-notiz-schalter--an,
.lfm-notiz-schalter--an:hover {
  background-color: var(--primary-600);
  color: #fff;
}

.dark .lfm-notiz-schalter--an,
.dark .lfm-notiz-schalter--an:hover {
  background-color: var(--primary-500);
  color: #fff;
}

.lfm-notiz-schalter-symbol {
  width: 1.25rem;
  height: 1.25rem;
}

.lfm-notiz-zahl {
  min-width: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background-color: var(--warning-500);
  color: #1c1917;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

/* Auf schmalen Geraeten nur das Symbol - "Notizen" daneben kostet
   Platz, den die obere Leiste dort nicht hat. */
@media (max-width: 40rem) {
  .lfm-notiz-schalter-text {
    display: none;
  }
}

/* ---- Der Streifen, solange der Modus laeuft ---------------------------- */

/*
 * Sitzt UNTEN, nicht oben. Oben haette er die obere Leiste halb verdeckt -
 * mitsamt dem Schalter, mit dem man den Modus wieder verlaesst.
 */
.lfm-notiz-streifen {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background-color: var(--primary-600);
  color: #fff;
  font-size: 0.8125rem;
  box-shadow: 0 -2px 12px rgb(0 0 0 / 0.25);
}

.lfm-notiz-streifen-rechts {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.lfm-notiz-streifen button {
  padding: 0.125rem 0.625rem;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: 0.375rem;
  font-weight: 500;
  white-space: nowrap;
}

.lfm-notiz-streifen button:hover {
  background-color: rgb(255 255 255 / 0.15);
}

@media (max-width: 48rem) {
  .lfm-notiz-streifen {
    font-size: 0.75rem;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
  }
}

/* ---- Die Ebene mit den Marken ------------------------------------------ */

.lfm-notiz-ebene {
  position: fixed;
  inset: 0;
  z-index: 60;
  /* Laesst alles durch - sonst waere die Seite blockiert. */
  pointer-events: none;
}

/* ---- Eine einzelne Marke ----------------------------------------------- */

.lfm-notiz-marke {
  position: fixed;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  border: 1.5px solid rgb(255 255 255 / 0.9);
  border-radius: 999px 999px 999px 0.125rem;
  background-color: #eab308;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.45);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
}

.lfm-notiz-marke:hover {
  z-index: 2;
  transform: translate(-50%, -50%) scale(1.15);
}

.lfm-notiz-marke--info       { background-color: #eab308; }
.lfm-notiz-marke--text       { background-color: #0891b2; }
.lfm-notiz-marke--gestaltung { background-color: #7c3aed; }
.lfm-notiz-marke--ablauf     { background-color: #f97316; }
.lfm-notiz-marke--fehler     { background-color: #dc2626; }

.lfm-notiz-marke--erledigt {
  opacity: 0.45;
}

/* Der Platz, an den gerade geschrieben wird - gestrichelt, damit er sich
   von einem fertigen Zettel unterscheidet. */
.lfm-notiz-marke--entwurf {
  background-color: transparent;
  border: 2px dashed var(--primary-400);
  cursor: default;
  pointer-events: none;
  animation: lfm-notiz-puls 1.4s ease-in-out infinite;
}

@keyframes lfm-notiz-puls {
  50% { transform: translate(-50%, -50%) scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .lfm-notiz-marke--entwurf {
    animation: none;
  }
}

/* ---- Die Sprechblase beim Darueberfahren ------------------------------- */

.lfm-notiz-blase {
  position: absolute;
  left: 1.5rem;
  top: 0;
  z-index: 3;
  display: none;
  flex-direction: column;
  gap: 0.125rem;
  width: 15rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  background-color: var(--gray-900);
  color: var(--gray-100);
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: left;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.35);
}

.lfm-notiz-marke:hover .lfm-notiz-blase {
  display: flex;
}

/* Am Bildrand klappt die Blase auf die andere Seite - sonst steht
   die Haelfte des Textes ausserhalb des Fensters. */
.lfm-notiz-marke--blase-links .lfm-notiz-blase {
  left: auto;
  right: 1.5rem;
}

.lfm-notiz-marke--blase-hoch .lfm-notiz-blase {
  top: auto;
  bottom: 0;
}

.lfm-notiz-blase strong {
  font-style: italic;
  font-weight: 600;
}

.lfm-notiz-blase-datum,
.lfm-notiz-blase-antworten {
  color: var(--gray-400);
  font-size: 0.6875rem;
}

/* ---- Notizen ohne Platz ------------------------------------------------ */

/*
 * Wichtiger, als es aussieht: Genau das Element, auf das sich eine Notiz
 * bezieht, wird ja gleich geaendert - und dann findet der Anker nichts
 * mehr. Ohne diese Liste waere die Anmerkung damit weg.
 */
.lfm-notiz-heimatlos {
  position: fixed;
  right: 1rem;
  bottom: 4rem;
  z-index: 65;
  width: 17rem;
  max-height: 40vh;
  overflow-y: auto;
  padding: 0.75rem;
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--warning-500);
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
  pointer-events: auto;
}

.dark .lfm-notiz-heimatlos {
  border-color: var(--gray-700);
  border-left-color: var(--warning-500);
  background-color: var(--gray-900);
}

.lfm-notiz-heimatlos-titel {
  margin-bottom: 0.5rem;
  color: var(--gray-500);
  font-size: 0.75rem;
  font-weight: 600;
}

.dark .lfm-notiz-heimatlos-titel {
  color: var(--gray-400);
}

.lfm-notiz-heimatlos-zeile {
  display: block;
  width: 100%;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: left;
}

.lfm-notiz-heimatlos-zeile:hover {
  background-color: var(--gray-100);
}

.dark .lfm-notiz-heimatlos-zeile:hover {
  background-color: var(--gray-800);
}

.lfm-notiz-heimatlos-zeile em {
  display: block;
  color: var(--gray-500);
  font-size: 0.6875rem;
}

.dark .lfm-notiz-heimatlos-zeile em {
  color: var(--gray-400);
}

/* ---- Das Fenster mit dem Text ------------------------------------------ */

.lfm-notiz-panel {
  position: fixed;
  right: 1rem;
  top: 5rem;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 22rem;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 10rem);
  overflow-y: auto;
  padding: 0.875rem;
  border: 1px solid var(--gray-200);
  border-radius: 0.75rem;
  background-color: #fff;
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.22);
}

.dark .lfm-notiz-panel {
  border-color: var(--gray-700);
  background-color: var(--gray-900);
}

.lfm-notiz-panel-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 600;
}

.lfm-notiz-panel-kopf button {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  color: var(--gray-500);
  font-size: 1.25rem;
  line-height: 1;
}

.lfm-notiz-panel-kopf button:hover {
  background-color: var(--gray-100);
}

.dark .lfm-notiz-panel-kopf button:hover {
  background-color: var(--gray-800);
}

.lfm-notiz-bezug,
.lfm-notiz-vorschlag {
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  background-color: var(--gray-100);
  color: var(--gray-600);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.dark .lfm-notiz-bezug,
.dark .lfm-notiz-vorschlag {
  background-color: var(--gray-800);
  color: var(--gray-300);
}

.lfm-notiz-text {
  font-size: 0.875rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lfm-notiz-signatur {
  color: var(--gray-500);
  font-size: 0.6875rem;
}

.dark .lfm-notiz-signatur {
  color: var(--gray-400);
}

.lfm-notiz-signatur em {
  font-style: italic;
  font-weight: 600;
}

.lfm-notiz-verlauf {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--gray-200);
}

.dark .lfm-notiz-verlauf {
  border-top-color: var(--gray-700);
}

.lfm-notiz-verlauf li {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--gray-50);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.dark .lfm-notiz-verlauf li {
  background-color: var(--gray-800);
}

.lfm-notiz-verlauf li p:first-child {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- Felder und Knoepfe ------------------------------------------------ */

.lfm-notiz-feld {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
}

.lfm-notiz-feld > span {
  color: var(--gray-500);
  font-weight: 500;
}

.dark .lfm-notiz-feld > span {
  color: var(--gray-400);
}

.lfm-notiz-feld input,
.lfm-notiz-feld select,
.lfm-notiz-feld textarea {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  background-color: #fff;
  color: inherit;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.dark .lfm-notiz-feld input,
.dark .lfm-notiz-feld select,
.dark .lfm-notiz-feld textarea {
  border-color: var(--gray-600);
  background-color: var(--gray-950, #0c1116);
}

.lfm-notiz-feld textarea {
  resize: vertical;
}

.lfm-notiz-fehler {
  color: var(--danger-500, #dc2626);
  font-size: 0.75rem;
}

.lfm-notiz-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lfm-notiz-knoepfe button {
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
}

.dark .lfm-notiz-knoepfe button {
  border-color: var(--gray-600);
}

.lfm-notiz-knoepfe button:hover {
  background-color: var(--gray-100);
}

.dark .lfm-notiz-knoepfe button:hover {
  background-color: var(--gray-800);
}

/* Speichern ist die Haupthandlung und sieht auch so aus. Der Weg dahin
   darf nicht gleich aussehen wie der zum Loeschen - denselben Fehler
   hatten die Auftragsmasken schon einmal. */
.lfm-notiz-knoepfe .lfm-notiz-knopf-haupt,
.lfm-notiz-knoepfe .lfm-notiz-knopf-haupt:hover {
  border-color: transparent;
  background-color: var(--primary-600);
  color: #fff;
}

.lfm-notiz-knoepfe .lfm-notiz-knopf-weg {
  margin-left: auto;
  border-color: transparent;
  color: var(--danger-500, #dc2626);
}

/* ---- Mobil ------------------------------------------------------------- */

@media (max-width: 48rem) {
  .lfm-notiz-panel {
    right: 0.5rem;
    left: 0.5rem;
    top: auto;
    bottom: 4.5rem;
    width: auto;
    max-height: 60vh;
  }

  .lfm-notiz-heimatlos {
    right: 0.5rem;
    left: 0.5rem;
    bottom: 5rem;
    width: auto;
  }
}