/* =====================================================================
   Orgalino - UI-Erweiterungen
   =====================================================================
   Eigene Datei statt Anhang an style.css. Grund: bei den letzten zwei
   Lieferungen stand hier "bitte ans Ende von style.css kopieren", und
   genau dieser Handgriff geht unter - mit dem Ergebnis, dass die
   Umschaltleisten unformatiert als nackte Links dastanden. Ein
   Stylesheet, das mit der Datei mitkommt, kann man nicht vergessen.

   Wird in public/index.php direkt nach style.css eingebunden und
   gewinnt deshalb bei gleicher Spezifitaet.

   Neue Regeln aus kuenftigen Lieferungen kommen hier hinein, nicht
   mehr in style.css - die bleibt der Bestand.
   ===================================================================== */


/* ---------------------------------------------------------------------
   Ui\ViewSwitcher - Umschaltleiste zwischen Ansichten einer Seite
   ---------------------------------------------------------------------
   Optisch bewusst Reiter (Unterstrich) und keine Knoepfe: es sind
   Ansichten desselben Themas, keine Aktionen. Ein Knopfstreifen sieht
   aus, als wuerde beim Klick etwas passieren.
   --------------------------------------------------------------------- */
.ui-ansichten {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.ui-ansicht {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s ease, border-color .12s ease;
}
.ui-ansicht:hover,
.ui-ansicht:focus-visible {
  color: var(--ink);
  text-decoration: none;
}
.ui-ansicht.ist-aktiv {
  color: var(--brand-dark);
  border-bottom-color: var(--brand);
  font-weight: 600;
}
.ui-ansicht i {
  font-size: .95em;
  opacity: .85;
}
/* Verweise in einen anderen Bereich (ViewSwitcher::zurueck()/weiter()):
   keine Ansichten, deshalb ohne Unterstrich-Zustand und abgesetzt.
   "Zurück" vorn mit Trennstrich, "weiter" ganz rechts. */
.ui-ansicht-zurueck {
  margin-right: 10px;
  border-right: 1px solid var(--line);
  border-bottom-color: transparent !important;
}
.ui-ansicht-weiter {
  margin-left: auto;
  border-bottom-color: transparent !important;
}

/* Am Handy sind vier Ansichten breiter als der Bildschirm. Umbrechen
   ginge, kostet aber zwei Zeilen Hoehe ueber jeder Seite - waagrecht
   schiebbar ist hier das kleinere Uebel. */
@media (max-width: 575px) {
  .ui-ansichten {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ui-ansichten::-webkit-scrollbar { display: none; }
  .ui-ansicht { padding: 8px 11px; }
}


/* ---------------------------------------------------------------------
   Ui\MassenFormular - gemeinsames Geruest der Massenzuweisungen
   ---------------------------------------------------------------------
   Nummerierte Abschnitte statt gleichfoermiger Karten: bei drei
   Bloecken untereinander sieht man sonst nicht, dass sie eine
   Reihenfolge haben - erst was, dann fuer wen, dann pruefen.
   --------------------------------------------------------------------- */
.ui-massen-schritt { position: relative; }

.ui-massen-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.ui-massen-nummer {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-contrast);
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ui-massen-titel {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ui-massen-titel i { margin-right: 4px; }

/* Hinweiszeile buendig unter dem Titel, nicht unter der Nummer. */
.ui-massen-hinweis { margin-left: 36px; margin-top: 0; }


/* ---------- Ergebnisbloecke der Vorschau ----------
   Gruen und rot sind hier keine Verzierung: "wird angelegt" und "ersetzt
   etwas Bestehendes" sind die eine Unterscheidung, auf die es in einer
   Vorschau ankommt. */
.ui-massen-ergebnis {
  border: 1px solid var(--line);
  border-left: 3px solid #198754;
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.ui-massen-ergebnis.ist-ersetzt { border-left-color: #dc3545; }

.ui-massen-ergebnis-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: #198754;
}
.ui-massen-ergebnis.ist-ersetzt .ui-massen-ergebnis-kopf { color: #dc3545; }

.ui-massen-zahl {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--line);
  color: var(--ink-soft);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}

/* Die Auswahlliste wird in Massenformularen laenger als anderswo -
   bei sechzig Mitarbeitern sonst nur noch Scrollen. Eigene Hoehe mit
   Innen-Scroll, damit die Aktionsleiste erreichbar bleibt. */
.ui-massen-schritt .ui-auswahl-liste {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}


/* ---------------------------------------------------------------------
   Icon-Knopf
   ---------------------------------------------------------------------
   Fuer kleine Aktionen mitten im Inhalt - bisher stand dort ein nacktes
   <a> mit einem Bootstrap-Icon darin. Das sah nicht wie ein Knopf aus,
   hatte keine Trefferflaeche und keinen Zustand beim Ueberfahren.
   28x28 sind knapp, aber in einer Tabellenzeile ist mehr nicht
   unterzubringen; am Beruehrbildschirm greift zusaetzlich der
   vergroesserte Bereich weiter unten.
   --------------------------------------------------------------------- */
.ui-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  text-decoration: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.ui-icon-btn:hover,
.ui-icon-btn:focus-visible {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand-dark);
}
.ui-icon-btn i { font-size: .95rem; }

@media (pointer: coarse) {
  /* Am Handy die Trefferflaeche vergroessern, ohne die Zeile hoeher zu
     machen - deshalb ueber ein Pseudoelement statt ueber Padding. */
  .ui-icon-btn::after {
    content: "";
    position: absolute;
    inset: -8px;
  }
  .ui-icon-btn { position: relative; }
}


/* ---------------------------------------------------------------------
   Zuordnungstabelle (Stundensatz & Arbeitsplan)
   ---------------------------------------------------------------------
   Eine Kontrolltabelle, keine Datenliste: man ueberfliegt sie nach
   Luecken. Deshalb ruhige Kopfzeile, deutliche Zeilenhervorhebung beim
   Ueberfahren und Zahlen mit gleicher Ziffernbreite.
   --------------------------------------------------------------------- */
.ui-zuo-tabelle { margin-bottom: 0; }

.ui-zuo-tabelle thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.ui-zuo-tabelle tbody td {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}
.ui-zuo-tabelle tbody tr:hover td { background: var(--brand-tint); }

/* Name links festhalten: bei fuenf Spalten schiebt man am Handy sonst
   die Auswahlfelder ins Bild und weiss nicht mehr, zu wem sie
   gehoeren. */
.ui-zuo-name {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  min-width: 170px;
}
.ui-zuo-tabelle tbody tr:hover .ui-zuo-name { background: var(--brand-tint); }

.ui-zuo-name strong { font-weight: 600; }
.ui-zuo-nr {
  display: block;
  font-size: .76rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Erfassungspflicht: gleiche Form fuer beide Zustaende, unterschieden
   nur durch die Farbkraft. Ein Abzeichen auf fuenf von sechs Zeilen
   waere Rauschen - und der Ausnahmefall ("nicht erforderlich") soll
   trotzdem lesbar bleiben und nicht als leere Zelle erscheinen. */
.ui-zuo-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--ink);
  white-space: nowrap;
}
.ui-zuo-flag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.ui-zuo-flag.ist-aus { color: var(--ink-soft); }
.ui-zuo-flag.ist-aus::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ink-soft);
}

/* Wert und Knopf im Arbeitsplan-Feld als eine Einheit. */
.ui-zuo-plan {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ui-zuo-plan-leer { color: #dc3545; }
.ui-zuo-plan-keins { color: var(--ink-soft); }

.ui-zuo-tabelle .form-select-sm { min-width: 160px; }


/* ---------------------------------------------------------------------
   Suchdialog fuer lange Auswahllisten (Ui\SearchableSelect)
   ---------------------------------------------------------------------
   Der Knopf sieht aus wie ein Auswahlfeld, weil er eines ist - nur
   dass er einen Dialog oeffnet statt der nativen Liste. Ein Knopf, der
   sich vom Nachbarfeld unterscheidet, wuerde als Aktion gelesen
   ("etwas passiert") statt als Auswahl ("hier steht ein Wert").
   --------------------------------------------------------------------- */
.ui-suchselect-knopf {
  display: flex;
  align-items: center;
  cursor: pointer;
  text-align: left;
}
.ui-suchselect-knopf.ist-leer { color: var(--ink-soft); }
.ui-suchselect-wert {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-picker {
  width: min(520px, calc(100vw - 24px));
  max-height: min(70vh, 640px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}
.ui-picker::backdrop { background: rgba(0,0,0,.35); }

.ui-picker-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}
.ui-picker-titel { font-weight: 600; font-size: .95rem; }
.ui-picker-schliessen {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--ink-soft);
  padding: 4px;
  line-height: 1;
  cursor: pointer;
}
.ui-picker-schliessen:hover { color: var(--ink); }

.ui-picker-suche { margin: 0 16px 10px; width: calc(100% - 32px); }

.ui-picker-liste {
  overflow-y: auto;
  max-height: min(46vh, 420px);
  padding: 0 8px 12px;
}

.ui-picker-eintrag {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font-size: .92rem;
  cursor: pointer;
}
.ui-picker-eintrag:hover,
.ui-picker-eintrag:focus-visible { background: var(--brand-tint); }
.ui-picker-eintrag.ist-gewaehlt {
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-weight: 600;
}
.ui-picker-leer { padding: 16px 12px; color: var(--ink-soft); margin: 0; }

/* Am Handy von unten einfahren statt mittig schweben - der Daumen ist
   unten, und die Liste bekommt so die volle Breite. */
@media (max-width: 575px) {
  .ui-picker {
    width: 100vw;
    max-width: 100vw;
    margin: auto auto 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 85vh;
  }
  .ui-picker-liste { max-height: 60vh; }
}


/* ---------------------------------------------------------------------
   Abwesenheitsart "Karenz"
   ---------------------------------------------------------------------
   Neu seit 08.09.2026 - war vorher ein Mitarbeiterstatus. Farbe
   bewusst nicht in der Naehe von Krankenstand (#b23b3b): die beiden
   standen frueher nebeneinander im Statusfeld und werden im Kalender
   leicht verwechselt, wenn sie sich aehneln.
   --------------------------------------------------------------------- */
.ist-abw-karenz { background: #3f7d58; }


/* ---------------------------------------------------------------------
   Startseite (neu gestaltet 15.10.2026)
   ---------------------------------------------------------------------
   Kopf mit Gruss nach Tageszeit und einem Satz, was ansteht. Darunter
   die Meldungen als Tafel mit Zeilen (Ui\MeldungsRaster): links der
   Handlungsbedarf, rechts kompakt "Im Blick" und "Alles ruhig". Die
   Zahlen stehen in einer Spalte untereinander; Rot nur als Strich und
   Symbol bei Dringendem, die Zahl selbst bleibt in Schriftfarbe.
   Unten die Bereiche als schmale Leiste, die von selbst umbricht.

   Vorher Kacheln wie die KPI-Kacheln der Module. Die Zeilen lassen sich
   besser ueberfliegen, und am Handy passt der Handlungsbedarf auf den
   ersten Bildschirm.
   --------------------------------------------------------------------- */
.start-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 22px; }
.start-gruss { margin: 0; font-size: 2.1rem; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.start-satz { margin: 6px 0 0; font-size: 1.02rem; color: var(--ink-soft); }
.start-datum { font-size: .95rem; color: var(--ink-soft); white-space: nowrap; }

/* Zwei Spalten nur, wenn beide Seiten Inhalt haben (sonst ist-einspaltig,
   gleich breit wie die linke Spalte). */
.ui-meldungen { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ui-meldungen.ist-einspaltig { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

.ui-meldetafel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.ui-meldetafel + .ui-meldetafel { margin-top: 18px; }
.ui-meldetafel-kopf { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.ui-meldetafel-kopf span { margin-left: auto; font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.ui-meldetafel-kopf.ist-dringend span { color: var(--err-ink); }

.ui-meldezeile { position: relative; display: grid; grid-template-columns: 40px 4.2ch minmax(0, 1fr) 16px; align-items: center; gap: 14px; padding: 13px 18px; color: var(--ink); text-decoration: none; }
.ui-meldezeile + .ui-meldezeile { border-top: 1px solid var(--line); }
.ui-meldezeile:hover { background: var(--neutral-tint); color: var(--ink); }
.ui-meldezeile:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ui-meldezeile.ist-dringend::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; background: var(--badge-err); }
.ui-meldezeile-symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--neutral-tint); color: var(--ink-soft); font-size: 1.15rem; }
.ui-meldezeile.ist-dringend .ui-meldezeile-symbol { background: var(--err-bg); color: var(--err-ink); }
.ui-meldezeile-zahl { font-size: 1.7rem; font-weight: 800; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.ui-meldezeile-text { min-width: 0; }
.ui-meldezeile-text strong { display: block; font-size: 1rem; font-weight: 600; line-height: 1.25; }
.ui-meldezeile-text span { display: block; font-size: .82rem; color: var(--ink-soft); }
.ui-meldezeile-pfeil { color: var(--ink-soft); }

.ui-meldetafel.ist-kompakt .ui-meldezeile { grid-template-columns: 32px 3.4ch minmax(0, 1fr) 16px; gap: 12px; padding: 11px 16px; }
.ui-meldetafel.ist-kompakt .ui-meldezeile-symbol { width: 32px; height: 32px; border-radius: 8px; font-size: 1rem; }
.ui-meldetafel.ist-kompakt .ui-meldezeile-zahl { font-size: 1.3rem; }

/* Alles ruhig: Nullen bleiben anklickbar - manchmal will man in eine
   leere Liste schauen, um sicherzugehen. */
.ui-meldungen-ruhig { display: flex; flex-direction: column; gap: 7px; padding: 12px 16px 14px; }
.ui-meldungen-ruhig a { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-soft); text-decoration: none; }
.ui-meldungen-ruhig a:hover { color: var(--ink); text-decoration: underline; }
.ui-meldungen-ruhig i { color: var(--badge-ok); }

.start-bereiche-titel { margin: 28px 0 10px; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.start-bereiche { display: flex; flex-wrap: wrap; gap: 8px; }
.start-bereich { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); font-weight: 600; text-decoration: none; }
.start-bereich i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--neutral-tint); color: var(--ink-soft); }
.start-bereich:hover { border-color: var(--line-strong); color: var(--ink); }
.start-bereich:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

@media (max-width: 991.98px) {
  .ui-meldungen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .start-kopf { margin-bottom: 18px; }
  .start-gruss { font-size: 1.7rem; }
  .start-datum { order: -1; }
  .ui-meldezeile { grid-template-columns: 34px 3.6ch minmax(0, 1fr) 14px; gap: 10px; padding: 12px 14px; }
  .ui-meldezeile-symbol { width: 34px; height: 34px; border-radius: 8px; font-size: 1rem; }
  .ui-meldezeile-zahl { font-size: 1.45rem; }
}


/* ---------------------------------------------------------------------
   Kontext-Leiste ueber Formularen
   ---------------------------------------------------------------------
   .ui-context-banner selbst steht in style.css und wird von den
   Detailseiten schon verwendet. Ueber einem Formular braucht sie etwas
   mehr Gewicht: dort ist sie nicht Beiwerk, sondern die Antwort auf
   "worum geht es hier eigentlich" - und genau die stand vorher nur
   klein im Abschnittstitel.
   --------------------------------------------------------------------- */
.ui-form .ui-context-banner,
[data-modalform-inhalt] > .ui-context-banner {
  margin-bottom: 18px;
}
[data-modalform-inhalt] > .ui-context-banner .ui-context-banner-chip {
  padding: 9px 16px;
  font-size: .95rem;
}
[data-modalform-inhalt] > .ui-context-banner .ui-context-banner-chip i {
  font-size: 1.05rem;
  opacity: .75;
}

/* Am Handy umbrechen statt schrumpfen - der Name ist wichtiger als
   die Zeilenzahl. */
@media (max-width: 575px) {
  [data-modalform-inhalt] > .ui-context-banner .ui-context-banner-chip {
    padding: 8px 12px;
    font-size: .88rem;
  }
}


/* =====================================================================
   Nachbesserungen an style.css
   =====================================================================
   Bewusst hier und nicht in style.css: diese Datei wird NACH style.css
   geladen, die Regeln stechen also. So bleibt die zentrale
   Stilvorlage unangetastet, und was hier steht, ist als Korrektur
   erkennbar - samt Begruendung.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Abschnittstitel mit mehreren Aktionslinks
   ---------------------------------------------------------------------
   Auf dem Handy ueberlagerten die Links den Titel - am deutlichsten im
   Instandhaltungs-Abschnitt der Anlagenakte, wo inzwischen vier Stueck
   nebeneinander stehen ("Anlegen", "Plan uebernehmen", "Neu anlegen",
   "Wartungshinweise").

   Zwei Ursachen:

   1. .ui-card-section-title ist ein Flex-Behaelter ohne flex-wrap -
      passt der Inhalt nicht, bricht er nicht um, sondern laeuft
      ueber.

   2. .ui-week-add traegt "margin-left: auto". Bei EINEM Link schiebt
      das ihn korrekt nach rechts. Bei vieren versucht es JEDER, und
      sie draengen sich ineinander.

   Jetzt: umbrechen erlaubt, und nur der erste Link bekommt den
   Rechtsschub. Die uebrigen reihen sich mit gleichmaessigem Abstand
   daran an.
   --------------------------------------------------------------------- */
.ui-card-section-title {
  flex-wrap: wrap;
  gap: 4px 14px;
}
.ui-card-section-title .ui-week-add { margin-left: 0; }
.ui-card-section-title .ui-week-add:first-of-type { margin-left: auto; }

/* Am Handy die Links geschlossen in eine eigene Zeile unter den Titel.
   Nebeneinander mit dem Titel bleibt bei vier Stueck zu wenig Platz,
   und rechtsbuendig sind sie dann schwerer zu treffen. */
@media (max-width: 575.98px) {
  .ui-card-section-title .ui-week-add:first-of-type {
    margin-left: 0;
    margin-top: 2px;
  }
  .ui-card-section-title { row-gap: 6px; }
}

/* ---------------------------------------------------------------------
   Monatsnavigation auf schmalen Schirmen
   ---------------------------------------------------------------------
   Der Monatsname stand halb hinter den Pfeiltasten und brach mitten im
   Wort um. style.css setzt dafuer:

     .ui-month-nav-label { min-width: 0; flex: 1; order: -1; width: 100%; }

   "width: 100%" wirkt hier aber nicht: bei einem Flex-Element sticht
   flex-basis die Breite aus, und "flex: 1" bedeutet flex-basis: 0%.
   Das Label bekommt also gerade so viel Platz, wie uebrig bleibt - die
   Pfeile stehen daneben statt darunter, und "September 2026" bricht in
   zwei Zeilen.

   Mit flex-basis: 100% belegt das Label eine eigene Zeile, die Pfeile
   ruecken darunter. flex-grow 0, damit es nicht zusaetzlich zieht.
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .ui-month-nav-label {
    flex: 0 0 100%;
    min-width: 0;
    text-align: left;
  }
  /* Die Pfeiltasten duerfen nicht schrumpfen - sonst werden sie oval
     und die Trefferflaeche kleiner als der Finger. */
  .ui-month-nav-btn { flex: 0 0 auto; }
  .ui-month-nav-picker { margin-left: auto; }
}


/* ---------------------------------------------------------------------
   Wartungsreihe in der Planliste
   ---------------------------------------------------------------------
   Eine Zeile ueber dem Faelligkeitsbalken, die sagt, WAS beim naechsten
   Termin dran ist. Ohne sie stand dort nur "alle 500 h" - und das sah
   nach jedem Termin gleich aus, obwohl beim dritten Durchlauf die
   1500er dazukommt.
   --------------------------------------------------------------------- */
.ui-plan-reihe {
  margin: 4px 0 6px;
  font-size: .84rem;
  color: var(--ink-soft);
}
.ui-plan-reihe strong {
  color: var(--ink);
  font-weight: 600;
}


/* ---------------------------------------------------------------------
   Drei oder mehr Aktionslinks im Abschnittstitel
   ---------------------------------------------------------------------
   Der Umbruch aus der Korrektur oben greift, aber bei DREI Links in
   einer schmalen Spalte reicht er nicht: "Anlegen", "Plan anlegen" und
   "Wartungshinweise" ueberlagern sich weiterhin und schieben sich in
   den Titel.

   Ab dem dritten Link bricht die ganze Gruppe deshalb unter den Titel -
   unabhaengig von der Schirmbreite. :has() prueft, ob es einen dritten
   gibt; das funktioniert in allen aktuellen Browsern.
   --------------------------------------------------------------------- */
.ui-card-section-title:has(.ui-week-add:nth-of-type(3)) {
  flex-direction: column;
  align-items: flex-start;
  row-gap: 8px;
}
.ui-card-section-title:has(.ui-week-add:nth-of-type(3)) .ui-week-add,
.ui-card-section-title:has(.ui-week-add:nth-of-type(3)) .ui-week-add:first-of-type {
  margin-left: 0;
}


/* ---------------------------------------------------------------------
   Gefuehrtes Anlegen einer Wartungsreihe
   ---------------------------------------------------------------------
   Seit UI-Runde 2 (14.10.2026) steht das Aussehen der Seite im Block
   "Wartungsreihe (UI-Runde 2)" am Ende dieser Datei (.ui-stufe,
   .ui-kachel, .ui-ablauf). Hier bleiben nur der unsichtbare
   Standard-Knopf und die Zielliste fuer mehrere Anlagen.
   --------------------------------------------------------------------- */

/* Der unsichtbare Standard-Absende-Knopf.
   Enter in einem Textfeld loest den ERSTEN Absende-Knopf des Formulars
   aus. Ohne diesen waere das der Pruefpunkte-Knopf der ersten Zeile -
   ein Tastendruck, der ungewollt die Seite wechselt.
   Bewusst NICHT display:none: ein so ausgeblendeter Knopf wird von
   manchen Browsern nicht mehr als Standard-Knopf gewertet, und dann
   greift genau wieder der Knopf dahinter. */
.ui-standard-absenden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ---------------------------------------------------------------------
   Wartungsreihe fuer mehrere Anlagen - Zielliste
   ---------------------------------------------------------------------
   Bewusst keine Ui\AuswahlListe: dort ist die ganze Zeile ein <label>
   fuers Kaestchen. Hier steht in jeder Zeile aber ein Eingabefeld - ein
   Klick hinein wuerde den Haken umschalten. Optik und Klassennamen
   lehnen sich trotzdem an die Auswahlliste an, damit sich beides nicht
   wie zwei Programme anfuehlt.
   --------------------------------------------------------------------- */

.ui-ziel-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--canvas);
  font-size: .85rem;
}

.ui-ziel-liste {
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius) var(--radius);
  max-height: 420px;
  overflow-y: auto;
}

.ui-ziel-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) 150px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.ui-ziel-zeile:last-child { border-bottom: 0; }

.ui-ziel-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
  cursor: pointer;
}
.ui-ziel-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-ziel-kopf .btn { white-space: nowrap; }
.ui-vorbelegen-datum { display: flex; gap: 8px; margin-left: auto; }
/* Zähler- bzw. Zeit-Bereiche (plan-reihe.js) - hidden gilt auch gegen display-Klassen */
[data-nur][hidden] { display: none !important; }
.ui-ziel-name .bi { color: var(--ink-soft); flex-shrink: 0; }

.ui-ziel-stand {
  font-size: .82rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Am Handy untereinander: drei Spalten auf 380 Pixel waeren drei
   unlesbare Spalten. */
@media (max-width: 767.98px) {
  .ui-ziel-zeile { grid-template-columns: 1fr; gap: 6px; }
  .ui-ziel-stand { padding-left: 26px; }
  .ui-ziel-faellig { padding-left: 26px; }
  .ui-ziel-kopf .ms-auto { margin-left: 0 !important; }
  .ui-ziel-kopf .ui-vorbelegen-datum { margin-left: 0; }
}


/* =====================================================================
   Bausteine der Disposition (Neuaufbau 30.09.2026)
   =====================================================================
   Allgemein gehalten - nichts hier kennt die Disposition. Die Farben
   der Zustaende sind dieselben wie bei .ui-badge-*, damit ein gruener
   Punkt ueberall dasselbe heisst.
   ===================================================================== */


/* ---------------------------------------------------------------------
   Ui\GruppenTabelle
   ---------------------------------------------------------------------
   Gruppen und Zeilen sind <details>. Der Standardpfeil des Browsers
   wird durch ein eigenes Symbol ersetzt, das sich beim Aufklappen
   dreht - sonst saehe jede Plattform anders aus.

   Die Spalten kommen als CSS-Variable aus dem Baustein
   (--ui-gt-raster), Kopfzeile und Datenzeilen teilen sich dasselbe
   Raster und stehen deshalb buendig untereinander.
   --------------------------------------------------------------------- */
.ui-gt { display: flex; flex-direction: column; gap: 12px; }

.ui-gt-gruppe {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.ui-gt-gruppe-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--canvas);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ui-gt-gruppe-kopf::-webkit-details-marker,
.ui-gt-zeile-kopf::-webkit-details-marker { display: none; }
.ui-gt-gruppe-titel { font-size: 1rem; }
.ui-gt-anzahl {
  min-width: 26px;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
  background: var(--ink-soft);
  color: var(--surface);
  font-variant-numeric: tabular-nums;
}
.ui-gt-pfeil {
  color: var(--ink-soft);
  font-size: .85rem;
  transition: transform .12s ease;
}
.ui-gt-gruppe:not([open]) > .ui-gt-gruppe-kopf .ui-gt-pfeil { transform: rotate(-90deg); }
details.ui-gt-zeile[open] > .ui-gt-zeile-kopf .ui-gt-pfeil { transform: rotate(90deg); }

/* Farbe des Gruppenkopfs - getoente Flaeche, kraeftiger Zaehler. */
.ui-gt-success > .ui-gt-gruppe-kopf { background: rgba(21, 128, 61, .10); color: #15803d; }
.ui-gt-success .ui-gt-anzahl { background: #15803d; color: #fff; }
.ui-gt-warning > .ui-gt-gruppe-kopf { background: rgba(245, 158, 11, .14); color: #92400e; }
.ui-gt-warning .ui-gt-anzahl { background: #f59e0b; color: #241a05; }
.ui-gt-danger > .ui-gt-gruppe-kopf { background: rgba(220, 38, 38, .09); color: #b91c1c; }
.ui-gt-danger .ui-gt-anzahl { background: #dc2626; color: #fff; }
.ui-gt-info > .ui-gt-gruppe-kopf { background: rgba(37, 99, 235, .09); color: #1d4ed8; }
.ui-gt-info .ui-gt-anzahl { background: #2563eb; color: #fff; }
[data-bs-theme="dark"] .ui-gt-success > .ui-gt-gruppe-kopf { color: #4ade80; }
[data-bs-theme="dark"] .ui-gt-warning > .ui-gt-gruppe-kopf { color: #fbbf24; }
[data-bs-theme="dark"] .ui-gt-danger > .ui-gt-gruppe-kopf { color: #f87171; }
[data-bs-theme="dark"] .ui-gt-info > .ui-gt-gruppe-kopf { color: #60a5fa; }

.ui-gt-kopf,
.ui-gt-zeile-kopf {
  display: grid;
  grid-template-columns: var(--ui-gt-raster);
  column-gap: 12px;
  align-items: center;
  padding: 0 14px;
}
.ui-gt-kopf {
  padding-top: 9px;
  padding-bottom: 7px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.ui-gt-huelle { position: relative; border-bottom: 1px solid var(--line); }
.ui-gt-huelle:last-child { border-bottom: 0; }

/* Dreipunktmenue neben dem <summary>, nicht darin (siehe Baustein).
   Die Zeilen lassen rechts Platz dafuer, sobald eine eines hat. */
.ui-gt-menue { position: absolute; top: 9px; right: 10px; }
.ui-gt.hat-menue .ui-gt-kopf,
.ui-gt.hat-menue .ui-gt-zeile-kopf { padding-right: 50px; }
.ui-gt-zeile-kopf {
  min-height: 48px;
  padding-top: 8px;
  padding-bottom: 8px;
  list-style: none;
}
summary.ui-gt-zeile-kopf { cursor: pointer; }
summary.ui-gt-zeile-kopf:hover { background: var(--canvas); }
details.ui-gt-zeile[open] > .ui-gt-zeile-kopf { background: var(--canvas); }
.ui-gt-gruppe-kopf:focus-visible,
.ui-gt-zeile-kopf:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
.ui-gt-zelle { min-width: 0; overflow-wrap: anywhere; }

/* Der Detailbereich beginnt unter der ersten Datenspalte, nicht unter
   dem Pfeil - so gehoert er sichtbar zur Zeile darueber. */
.ui-gt-detail {
  padding: 6px 14px 16px calc(14px + 1.75rem + 12px);
  background: var(--canvas);
}
.ui-gt-leer {
  margin: 0;
  padding: 12px 14px;
  color: var(--ink-soft);
  font-size: .88rem;
}

/* Zelleninhalte (Ui\Zelle) */
.ui-zelle-haupt { display: block; font-weight: 600; }
.ui-zelle-unter { display: block; font-size: .8rem; color: var(--ink-soft); }
.ui-zelle-gedaempft { color: var(--ink-soft); }
.ui-zelle-warnung { color: #d97706; }

/* Am Handy passt kein Raster aus fuenf Spalten. Jede Zelle wird eine
   eigene Zeile mit ihrer Spaltenueberschrift davor - die Kopfzeile
   entfaellt, sie waere ohne Raster ohnehin nirgends buendig. */
@media (max-width: 767.98px) {
  .ui-gt-kopf { display: none; }
  .ui-gt-zeile-kopf {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    row-gap: 3px;
  }
  .ui-gt-zeile-kopf > .ui-gt-pfeil { align-self: start; padding-top: 3px; }
  .ui-gt-zelle { grid-column: 2; display: flex; gap: 10px; }
  .ui-gt-wert { flex: 1; min-width: 0; }
  .ui-gt-zelle::before {
    content: attr(data-label);
    flex: 0 0 6.5rem;
    color: var(--ink-soft);
    font-size: .8rem;
  }
  .ui-gt-detail { padding-left: 14px; }
}


/* ---------------------------------------------------------------------
   Ui\RessourcenZeile
   ---------------------------------------------------------------------
   Eine Zeile je Ressource. Angehaengte Zeilen (Anhaenger am
   Zugfahrzeug) bilden mit ihrer Zeile einen Block; die Deichsel laeuft
   genau durch die Mitte der Symbole (Rand 1px + Innenabstand 12px +
   halbes Symbol 18px = 31px), das Kupplungssymbol sitzt darauf.
   --------------------------------------------------------------------- */
.ui-rz-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Breit oder schmal entscheidet der Platz der Liste, nicht der
     Bildschirm - dieselbe Liste steht auch im Detail-Dialog. */
  container-type: inline-size;
}
.ui-rz-eintrag { min-width: 0; }
.ui-rz {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.ui-rz-haupt {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  color: inherit;
}
/* Klickbar wie jede andere Flaeche der Anwendung: Rand beim Darueberfahren. */
.ui-rz.ist-klickbar {
  transition: border-color .09s ease-out;
}
.ui-rz.ist-klickbar:hover { border-color: var(--line-strong); }
a.ui-rz-haupt:hover { color: var(--ink); }
a.ui-rz-haupt:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--radius); }
.ui-rz-icon {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas);
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.ui-rz-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ui-rz-rolle {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.ui-rz-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-rz-zusatz { font-size: .8rem; color: var(--ink-soft); }
.ui-rz-warnung { margin-top: 2px; font-size: .78rem; font-weight: 600; color: #b45309; }
.ui-rz-zeit {
  flex: 0 0 auto;
  font-size: .88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ui-rz-aktionen { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 0; }
.ui-rz-aktion {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: .82rem;
  white-space: nowrap;
}
.ui-rz-aktion:hover,
.ui-rz-aktion:focus-visible { color: #b91c1c; background: rgba(220, 38, 38, .07); }
.ui-rz-aktion.mit-text { border: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.ui-rz-aktion.mit-text:hover,
.ui-rz-aktion.mit-text:focus-visible { color: var(--ink); border-color: var(--brand); background: var(--brand-tint); }
.ui-rz.ist-warnung { border-color: #f59e0b; }
.ui-rz.ist-warnung .ui-rz-icon { background: rgba(245, 158, 11, .16); color: #b45309; }
[data-bs-theme="dark"] .ui-rz-warnung,
[data-bs-theme="dark"] .ui-rz.ist-warnung .ui-rz-icon { color: #fbbf24; }

/* Konflikt, Vorwarnung, Hinweis (09.10.2026). Konflikt ist rot und
   faerbt die ganze Karte - zur selben Zeit woanders eingeteilt ist ein
   Fehler im Plan, kein Hinweis. Vorwarnung und Hinweis sind leise
   Zeilen mit Symbol. */
.ui-rz-konflikt,
.ui-rz-vorwarnung,
.ui-rz-stoerung,
.ui-rz-hinweis { margin-top: 2px; font-size: .78rem; line-height: 1.3; }
/* Offene Stoermeldung (10.10.2026): wie die Warnung orange, aber ohne
   die Karte zu faerben - eine "niedrige" Stoerung ist kein Planfehler. */
.ui-rz-stoerung { font-weight: 600; color: #b45309; }
[data-bs-theme="dark"] .ui-rz-stoerung { color: #fbbf24; }
.ui-rz-konflikt { font-weight: 600; color: #b91c1c; }
.ui-rz-vorwarnung { color: #b45309; }
.ui-rz-hinweis { color: #1d4ed8; }
.ui-rz.ist-konflikt { border-color: #dc2626; background: rgba(220, 38, 38, .05); }
.ui-rz.ist-konflikt .ui-rz-icon { background: rgba(220, 38, 38, .12); color: #b91c1c; }
[data-bs-theme="dark"] .ui-rz-konflikt,
[data-bs-theme="dark"] .ui-rz.ist-konflikt .ui-rz-icon { color: #f87171; }
[data-bs-theme="dark"] .ui-rz-vorwarnung { color: #fbbf24; }
[data-bs-theme="dark"] .ui-rz-hinweis { color: #93c5fd; }

/* Platzhalter: ein Platz, der noch zu besetzen ist ("Fahrer fehlt",
   reservierte Anlagengruppe). Gestrichelt und gedaempft - er soll
   auffallen, aber nicht wie eine echte Ressource aussehen. */
.ui-rz.ist-platzhalter { border-style: dashed; border-color: var(--ink-soft); background: transparent; }
.ui-rz.ist-platzhalter .ui-rz-name { color: var(--ink-soft); font-weight: 600; }
.ui-rz.ist-platzhalter .ui-rz-icon { background: transparent; border: 1px dashed var(--ink-soft); }
.ui-rz.ist-platzhalter.ist-klickbar { box-shadow: none; }
.ui-rz.ist-platzhalter.ist-klickbar:hover { border-color: var(--brand); background: var(--brand-tint); }

/* Fahrer: eigene Karte vor dem Fahrzeug, Symbol in der CI-Farbe - er
   ist die Person, nach der am Telefon gefragt wird. */
.ui-rz.ist-fahrer:not(.ist-platzhalter) .ui-rz-icon { background: var(--brand-tint); color: var(--brand-dark); }
.ui-rz.ist-fahrer.ist-warnung .ui-rz-icon { background: rgba(245, 158, 11, .16); color: #b45309; }
.ui-rz.ist-fahrer.ist-konflikt .ui-rz-icon { background: rgba(220, 38, 38, .12); color: #b91c1c; }

/* Zug: Fahrzeug und seine Anhaenger als ein Block. */
.ui-rz-eintrag.ist-zug {
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: var(--canvas);
}
.ui-rz.ist-angehaengt .ui-rz-icon { background: var(--canvas); color: var(--ink); }
/* Deichsel: reicht oben und unten in die Zeilen hinein, bis unter die
   Symbole (die liegen darueber) - so verbindet sie Symbol mit Symbol,
   auch wenn eine Zeile hoeher ist. */
.ui-rz-eintrag.ist-zug .ui-rz-icon { position: relative; z-index: 2; }
.ui-rz-kupplung {
  position: relative;
  z-index: 1;
  height: 68px;
  margin: -26px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 18px;
  pointer-events: none;
}
.ui-rz-kupplung::before {
  content: "";
  position: absolute;
  left: 29px;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--ink-soft);
}
.ui-rz-kupplung-knopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ink-soft);
  background: var(--surface);
  color: var(--ink);
  font-size: .95rem;
  pointer-events: auto;
}
.ui-rz-kupplung-text {
  position: relative;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--canvas);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.ui-rz-kupplung-text .ist-hover { display: none; }
a.ui-rz-kupplung-knopf { transition: border-color .09s ease-out, color .09s ease-out; }
a.ui-rz-kupplung-knopf:hover,
a.ui-rz-kupplung-knopf:focus-visible { border-color: #dc2626; color: #dc2626; }
a.ui-rz-kupplung-knopf:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
a.ui-rz-kupplung-knopf:hover + .ui-rz-kupplung-text,
a.ui-rz-kupplung-knopf:focus-visible + .ui-rz-kupplung-text { color: #dc2626; }
a.ui-rz-kupplung-knopf:hover + .ui-rz-kupplung-text .ist-ruhe,
a.ui-rz-kupplung-knopf:focus-visible + .ui-rz-kupplung-text .ist-ruhe { display: none; }
a.ui-rz-kupplung-knopf:hover + .ui-rz-kupplung-text .ist-hover,
a.ui-rz-kupplung-knopf:focus-visible + .ui-rz-kupplung-text .ist-hover { display: inline; }

/* Fahrer -> Fahrzeug: dieselbe Deichsel wie zum Anhaenger, aber ohne
   Kupplung - der Fahrer wird nicht "abgekuppelt", sondern ueber das ×
   an seiner Karte abgezogen. */
.ui-rz-sitz {
  position: relative;
  z-index: 1;
  height: 40px;
  margin: -12px 0;
  pointer-events: none;
}
.ui-rz-sitz::before {
  content: "";
  position: absolute;
  left: 29px;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  background: var(--brand);
  opacity: .55;
}

/* Breit: jede Ressource braucht nur ~30 % der Breite, gekuppelte
   Anhaenger (bis zu drei) stehen RECHTS neben ihrem Fahrzeug, die
   Deichsel liegt waagrecht dazwischen. Damit ein Zug mit drei
   Anhaengern in die Zeile passt, sind die Kaestchen kompakt gebaut:
     [Symbol] ROLLE
     Name (bis zwei Zeilen)
     Zusatz
     Uhrzeit                    [Knoepfe]
   und duerfen schrumpfen, wenn der Zug laenger ist. */
@container (min-width: 600px) {
  .ui-rz-liste { align-items: flex-start; }
  .ui-rz-eintrag { width: 30cqw; min-width: 200px; }
  .ui-rz-eintrag.ist-zug {
    width: auto;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: stretch;
  }
  .ui-rz-eintrag.ist-zug > .ui-rz { flex: 0 1 30cqw; min-width: 0; }

  .ui-rz { position: relative; }
  .ui-rz-haupt {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    align-content: start;
    column-gap: 8px;
    row-gap: 1px;
    padding: 8px 10px 30px;        /* unten Platz fuer Uhrzeit + Knoepfe */
  }
  .ui-rz-text { display: contents; }
  .ui-rz-icon { grid-column: 1; flex: none; width: 28px; height: 28px; font-size: .9rem; }
  .ui-rz-rolle { grid-column: 2; }
  .ui-rz-name,
  .ui-rz-zusatz,
  .ui-rz-warnung,
  .ui-rz-konflikt,
  .ui-rz-vorwarnung,
  .ui-rz-stoerung,
  .ui-rz-hinweis { grid-column: 1 / -1; }
  .ui-rz-name {
    margin-top: 3px;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
  }
  .ui-rz-zusatz { line-height: 1.3; }
  .ui-rz-zeit {
    position: absolute;
    left: 10px;
    bottom: 7px;
    font-size: .8rem;
  }
  .ui-rz-aktionen { position: absolute; right: 4px; bottom: 3px; padding: 0; gap: 0; }
  .ui-rz-aktion { padding: 3px 5px; }
  .ui-rz-aktion.mit-text { border-color: transparent; }
  .ui-rz-aktion.mit-text span { display: none; }

  /* Deichsel waagrecht, auf Hoehe der Symbole (8px + halbes Symbol). */
  .ui-rz-kupplung {
    flex: 0 0 26px;
    height: auto;
    margin: 0 -1px;
    padding: 11px 0 0;
    align-items: flex-start;
    justify-content: center;
  }
  .ui-rz-kupplung::before {
    left: -2px;
    right: -2px;
    top: 20px;
    bottom: auto;
    width: auto;
    height: 4px;
  }
  .ui-rz-kupplung-knopf { width: 22px; height: 22px; font-size: .8rem; }
  .ui-rz-kupplung-text { display: none; }

  .ui-rz-sitz { flex: 0 0 14px; height: auto; margin: 0 -1px; }
  .ui-rz-sitz::before { left: -2px; right: -2px; top: 20px; bottom: auto; width: auto; height: 4px; }
}

/* Schmal (Handy): untereinander, Uhrzeit unter den Namen. */
@container (max-width: 599.98px) {
  .ui-rz-haupt { flex-wrap: wrap; row-gap: 2px; }
  .ui-rz-text { flex-basis: calc(100% - 48px); }
  .ui-rz-zeit { flex-basis: 100%; padding-left: 48px; font-weight: 500; font-size: .8rem; }
  .ui-rz-aktion.mit-text span { display: none; }
}

/* Alte Regel fuer sehr schmale Bildschirme bleibt als Rueckfall fuer
   Browser ohne Container-Abfragen. */
@media (max-width: 575.98px) {
  .ui-rz-haupt { flex-wrap: wrap; row-gap: 2px; }
  .ui-rz-text { flex-basis: calc(100% - 48px); }
  .ui-rz-zeit { flex-basis: 100%; padding-left: 48px; font-weight: 500; font-size: .8rem; }
  .ui-rz-aktion.mit-text span { display: none; }
}


/* ---------------------------------------------------------------------
   Ui\StatusGruppe
   ---------------------------------------------------------------------
   Lange Listen scrollen innerhalb der Gruppe. Das Menue je Eintrag
   oeffnet mit fester Positionierung (siehe Baustein) und wird deshalb
   von der scrollenden Liste nicht abgeschnitten.
   --------------------------------------------------------------------- */
.ui-sg {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.ui-sg-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--canvas);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.ui-sg-kopf::-webkit-details-marker { display: none; }
.ui-sg-kopf:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ui-sg-punkt {
  flex: 0 0 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-soft);
}
.ui-sg-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sg-anzahl { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.ui-sg-pfeil {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: .85rem;
  transition: transform .12s ease;
}
.ui-sg:not([open]) .ui-sg-pfeil { transform: rotate(-90deg); }

.ui-sg-success .ui-sg-kopf { background: rgba(21, 128, 61, .09); }
.ui-sg-success .ui-sg-punkt { background: #16a34a; }
.ui-sg-info .ui-sg-kopf { background: rgba(37, 99, 235, .08); }
.ui-sg-info .ui-sg-punkt { background: #2563eb; }
.ui-sg-warning .ui-sg-kopf { background: rgba(245, 158, 11, .13); }
.ui-sg-warning .ui-sg-punkt { background: #f59e0b; }
.ui-sg-danger .ui-sg-kopf { background: rgba(220, 38, 38, .08); }
.ui-sg-danger .ui-sg-punkt { background: #dc2626; }
.ui-sg-brand .ui-sg-kopf { background: var(--brand-tint); }
.ui-sg-brand .ui-sg-punkt { background: var(--brand); }

.ui-sg-liste {
  list-style: none;
  margin: 0;
  padding: 2px 0;
  max-height: 17rem;
  overflow-y: auto;
}
.ui-sg-eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 5px 8px 5px 12px;
  border-top: 1px solid var(--line);
}
.ui-sg-eintrag:first-child { border-top: 0; }
.ui-sg-icon { color: var(--ink); flex: 0 0 auto; }
.ui-sg-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ui-sg-name,
.ui-sg-unter { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sg-unter { font-size: .78rem; color: var(--ink-soft); }
.ui-sg-warnung { color: #d97706; flex: 0 0 auto; }
.ui-sg-zusatz { font-size: .76rem; line-height: 1.3; overflow-wrap: anywhere; }
.ui-sg-zusatz.ist-konflikt { color: #b91c1c; font-weight: 600; }
.ui-sg-zusatz.ist-vorwarnung { color: #b45309; }
.ui-sg-zusatz.ist-stoerung { color: #b45309; font-weight: 600; }
[data-bs-theme="dark"] .ui-sg-zusatz.ist-stoerung { color: #fbbf24; }
.ui-sg-zusatz.ist-hinweis { color: #1d4ed8; }
[data-bs-theme="dark"] .ui-sg-zusatz.ist-konflikt { color: #f87171; }
[data-bs-theme="dark"] .ui-sg-zusatz.ist-vorwarnung { color: #fbbf24; }
[data-bs-theme="dark"] .ui-sg-zusatz.ist-hinweis { color: #93c5fd; }
.ui-punktemenue { flex: 0 0 auto; }
.ui-punktemenue-knopf {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
}
.ui-punktemenue-knopf:hover,
.ui-punktemenue-knopf[aria-expanded="true"] { background: var(--canvas); color: var(--ink); }
.ui-punktemenue-knopf:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ui-punktemenue-hinweis { color: var(--ink-soft); white-space: normal; }
.ui-sg-leer { margin: 0; padding: 10px 12px; color: var(--ink-soft); font-size: .85rem; }

/* Zwei kleine Gruppen nebeneinander (Urlaub | Krank). */
.ui-sg-paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.ui-sg-paar > .ui-sg { margin-bottom: 0; }
.ui-sg-kompakt .ui-sg-kopf { padding: 8px 10px; font-size: .9rem; }
.ui-sg-kompakt .ui-sg-eintrag { padding: 4px 4px 4px 10px; gap: 8px; font-size: .88rem; }
.ui-sg-kompakt .ui-sg-liste { max-height: 11rem; }
@media (max-width: 399.98px) {
  .ui-sg-paar { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------
   Ui\Reiter - Optik von .ui-ansichten, ueber die volle Breite verteilt
   --------------------------------------------------------------------- */
.ui-reiter { flex-wrap: nowrap; margin-bottom: 14px; }
.ui-reiter .ui-ansicht { flex: 1 1 0; justify-content: center; padding: 8px 6px; }
.ui-reiter-zahl {
  padding: 0 7px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  background: var(--canvas);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.ui-ansicht.ist-aktiv .ui-reiter-zahl { background: var(--brand-tint); color: var(--brand-dark); }


/* ---------------------------------------------------------------------
   Ui\TagNav - Pfeile wie Ui\MonthNav, dazwischen das Datumsfeld
   --------------------------------------------------------------------- */
.ui-tag-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ui-tag-nav-form { display: flex; align-items: center; gap: 6px; margin: 0; }
.ui-tag-nav-feld { width: auto; min-width: 150px; }


/* ---------------------------------------------------------------------
   Ui\OrtAuswahl - Adresse, Koordinaten, Karte
   ---------------------------------------------------------------------
   z-index 0 macht die Karte zu einem eigenen Stapelkontext. Leaflet
   legt seine Ebenen auf z-index 400 und mehr - ohne diese Grenze
   laegen sie ueber Auswahllisten und Dialogfuss.
   --------------------------------------------------------------------- */
.ui-ort-karte {
  position: relative;
  z-index: 0;
  height: 300px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
}
.ui-ort-karte-klein { height: 200px; }
.ui-ort-suche { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-ort-status { font-size: .85rem; color: var(--ink-soft); }
.ui-ort-status.ist-fehler { color: #b91c1c; }
[data-bs-theme="dark"] .ui-ort-status.ist-fehler { color: #f87171; }
@media (min-width: 768px) {
  /* Knopf auf Hoehe des Koordinatenfelds, nicht seiner Beschriftung. */
  .ui-ort-suche { padding-top: 30px; align-items: flex-start; }
}


/* ---------------------------------------------------------------------
   Disposition (modules/disposition/pages/index.php)
   ---------------------------------------------------------------------
   Nur, was es nur auf dieser Seite gibt: Kopfleiste, Pool-Filter,
   Ziehen und Ablegen, Karte. Alles andere sind Bausteine oben.
   --------------------------------------------------------------------- */
.dispo-kopf-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.dispo-poolfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.dispo-poolfilter .ui-filter-search { flex: 1 1 180px; }
.dispo-poolfilter .form-select { flex: 1 1 160px; width: auto; }
.dispo-pool-hinweis { margin: 0 0 10px; font-size: .8rem; color: var(--ink-soft); }

/* Konflikt: rote Leiste im Kopf, roter Rand am Einsatz. Dringende
   Bestellung (Prioritaet HOCH): roter Rand in der Bestellliste. */
.dispo-konflikte { margin-bottom: 16px; }
.dispo-konflikte a { color: inherit; font-weight: 700; text-decoration: underline; }
/* "quittieren" in der roten Leiste und im Verlauf: kleiner heller Knopf */
.dispo-quittieren {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: #fff; color: #b91c1c !important; font-size: .78rem; font-weight: 700;
  text-decoration: none !important; line-height: 1.5; vertical-align: 1px;
}
.dispo-quittieren:hover, .dispo-quittieren:focus-visible { background: #fee2e2; }
.dispo-quittieren:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Ressourcenpool bleibt beim Scrollen stehen (nur nebeneinander, ab xl).
   Wird er hoeher als das Fenster, scrollt er in sich. */
@media (min-width: 1200px) {
  .dispo-pool-spalte {
    position: sticky; top: calc(var(--header-h) + 16px);
    max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto;
    overscroll-behavior: contain; scrollbar-width: thin;
  }
}
.ui-gt-huelle.ist-konflikt,
.ui-gt-huelle.ist-dringend { box-shadow: inset 4px 0 0 #dc2626; }
.ui-gt-huelle.ist-konflikt > .ui-gt-zeile > .ui-gt-zeile-kopf { background: rgba(220, 38, 38, .05); }

/* Ziehen: was sich ziehen laesst, sieht danach aus; waehrend gezogen
   wird, zeigen alle offenen Einsaetze, dass sie etwas annehmen. */
[data-ziehen-typ] { cursor: grab; }
[data-ziehen-typ].ist-gezogen { opacity: .45; }
.dispo-zieht [data-ablage-einsatz] {
  outline: 2px dashed var(--brand);
  outline-offset: -3px;
}
.dispo-zieht [data-ablage-einsatz].ist-ablageziel {
  outline-style: solid;
  background: var(--brand-tint);
}
/* Anhaenger ueber einer Fahrzeugzeile: dort wird angekuppelt. */
.dispo-kuppelt .ist-kuppelquelle .ui-rz[data-ablage-zug] {
  outline: 2px dashed var(--brand);
  outline-offset: -3px;
}
[data-kuppeln-zuweisung] { cursor: grab; }
.ui-rz.ist-gezogen { opacity: .45; }
.dispo-kuppelt .ui-rz.ist-kuppelziel,
.dispo-zieht .ui-rz.ist-kuppelziel {
  position: relative;
  border-color: var(--brand);
  background: var(--brand-tint);
}
.dispo-kuppelt .ui-rz.ist-kuppelziel::after,
.dispo-zieht .ui-rz.ist-kuppelziel::after {
  content: "hier ankuppeln";
  position: absolute;
  right: 10px;
  top: -10px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--brand-contrast);
  font-size: .72rem;
  font-weight: 700;
}
@media (hover: none) {
  .dispo-pool-hinweis { display: none; }   /* am Touchscreen wird ueber das Menue zugeteilt */
}

/* Nach einer Aktion kurz zeigen, wo man gelandet ist. */
.ui-gt-huelle.ist-hervorgehoben { animation: dispo-aufleuchten 1.6s ease-out; }
@keyframes dispo-aufleuchten {
  0%, 30% { background: var(--brand-tint); }
  100% { background: transparent; }
}

/* Karte aller Einsaetze */
.dispo-karte {
  position: relative;
  z-index: 0;
  height: 560px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--canvas);
}
@media (max-width: 767.98px) {
  .dispo-karte { height: 420px; }
}
.dispo-marke {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  background: #6b7178;
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
}
.dispo-marke.ist-fixiert { background: #15803d; }
.dispo-marke.ist-storniert { background: #dc2626; }
.dispo-marke.ist-geplant { background: var(--brand-dark); }
.dispo-blase-kopf { font-weight: 700; margin-bottom: 2px; }
.dispo-blase-meta { font-size: .8rem; color: #6b7178; }
.dispo-blase-liste { margin: 6px 0 8px; padding-left: 18px; font-size: .85rem; }
.dispo-blase-knoepfe { display: flex; gap: 6px; }


/* ---------------------------------------------------------------------
   Ui\Verlauf
   ---------------------------------------------------------------------
   Nach Tagen gruppiert (14.10.2026 abends): links die Tagesmarke (Zahl,
   Monat, Wochentag bzw. Heute/Gestern), rechts die Einträge des Tags als
   Zeitleiste - Punkt mit Symbol, Titel mit Betrag rechts, Text, darunter
   leise Marken, Uhrzeit, wer. Am Handy steht die Tagesmarke als Zeile
   über den Einträgen.
   --------------------------------------------------------------------- */
.ui-verlauf { display: grid; gap: 4px; }
.ui-verlauf-tag {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.ui-verlauf-tag:first-child { border-top: 0; padding-top: 0; }
.ui-verlauf-tagesmarke time { display: flex; flex-direction: column; align-items: center; line-height: 1.1; padding-top: 3px; }
.ui-verlauf-tagzahl { font-size: 1.45rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ui-verlauf-monat { font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-top: 2px; white-space: nowrap; }
.ui-verlauf-wochentag { font-size: .74rem; color: var(--ink-soft); margin-top: 1px; }
.ui-verlauf-tagesmarke.ist-heute .ui-verlauf-tagzahl,
.ui-verlauf-tagesmarke.ist-heute .ui-verlauf-wochentag { color: var(--brand-dark); }
.ui-verlauf-tagesmarke.ist-heute .ui-verlauf-wochentag { font-weight: 700; }

.ui-verlauf-liste { list-style: none; margin: 0; padding: 0; }
.ui-verlauf-eintrag { position: relative; display: flex; gap: 12px; padding-bottom: 14px; }
.ui-verlauf-eintrag::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.ui-verlauf-eintrag:last-child { padding-bottom: 0; }
.ui-verlauf-eintrag:last-child::before { display: none; }
.ui-verlauf-punkt {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--ink-soft);
  border: 2px solid var(--line);
  font-size: .9rem;
}
.ui-verlauf-eintrag.ist-brand .ui-verlauf-punkt     { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); }
.ui-verlauf-eintrag.ist-info .ui-verlauf-punkt      { border-color: #2563eb; color: #2563eb; }
.ui-verlauf-eintrag.ist-success .ui-verlauf-punkt   { border-color: #15803d; color: #15803d; }
.ui-verlauf-eintrag.ist-danger .ui-verlauf-punkt    { border-color: #dc2626; color: #dc2626; }
.ui-verlauf-eintrag.ist-warning .ui-verlauf-punkt   { border-color: #f59e0b; color: #b45309; }
[data-bs-theme="dark"] .ui-verlauf-eintrag.ist-info .ui-verlauf-punkt    { color: #60a5fa; }
[data-bs-theme="dark"] .ui-verlauf-eintrag.ist-success .ui-verlauf-punkt { color: #4ade80; }
[data-bs-theme="dark"] .ui-verlauf-eintrag.ist-danger .ui-verlauf-punkt  { color: #f87171; }
[data-bs-theme="dark"] .ui-verlauf-eintrag.ist-warning .ui-verlauf-punkt { color: #fbbf24; }
.ui-verlauf-inhalt { flex: 1; min-width: 0; padding-top: 5px; }
.ui-verlauf-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; }
.ui-verlauf-titel { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
a.ui-verlauf-titel { text-decoration: none; }
a.ui-verlauf-titel:hover { color: var(--brand-dark); text-decoration: underline; }
.ui-verlauf-wert { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.ui-verlauf-text { margin-top: 2px; font-size: .9rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.ui-verlauf-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: .8rem;
  color: var(--ink-soft);
}
.ui-verlauf-kopf .badge { font-size: .7rem; }
.ui-verlauf-meta { font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) {
  .ui-verlauf-tag { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ui-verlauf-tagesmarke time { flex-direction: row; align-items: baseline; gap: 6px; padding-top: 0; }
  .ui-verlauf-tagzahl { font-size: 1rem; }
  .ui-verlauf-monat, .ui-verlauf-wochentag { margin-top: 0; font-size: .86rem; }
  .ui-verlauf-wochentag { order: -1; }
  /* Betrag unter dem Titel statt allein rechts in einer eigenen Zeile */
  .ui-verlauf-zeile { display: block; }
  .ui-verlauf-wert { display: block; margin-top: 1px; }
}


/* ---------------------------------------------------------------------
   Aufgabenliste im Auftragsmodul (lib/Auftrag/Aufgabenliste.php)
   ---------------------------------------------------------------------
   Haken links erledigt mit einem Klick, der Text oeffnet die Aufgabe.
   --------------------------------------------------------------------- */
.ui-aufgaben {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ui-aufgabe {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.ui-aufgabe.ist-ueberfaellig { border-color: #dc2626; }
.ui-aufgabe-haken {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  align-self: stretch;
  font-size: 1.15rem;
  color: var(--ink-soft);
  border-radius: var(--radius) 0 0 var(--radius);
}
.ui-aufgabe-haken:hover,
.ui-aufgabe-haken:focus-visible { color: #15803d; background: rgba(21, 128, 61, .08); }
.ui-aufgabe.ist-erledigt .ui-aufgabe-haken { color: #15803d; }
.ui-aufgabe-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 4px;
  color: var(--ink);
}
.ui-aufgabe-text:hover { color: var(--ink); }
.ui-aufgabe-text:hover .ui-aufgabe-titel { text-decoration: underline; }
.ui-aufgabe-titel { font-weight: 600; overflow-wrap: anywhere; }
.ui-aufgabe-meta { font-size: .8rem; color: var(--ink-soft); }
.ui-aufgabe.ist-ueberfaellig .ui-aufgabe-meta { color: #dc2626; }
.ui-aufgabe.ist-erledigt .ui-aufgabe-titel { text-decoration: line-through; color: var(--ink-soft); font-weight: 500; }
.ui-aufgabe-badges { display: flex; gap: 4px; padding-right: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ui-aufgaben-titel {
  margin-bottom: 6px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
/* Links ueber Aufgaben und Vermerken im Angebot ("Kundenjournal",
   "+ Aufgabe", "+ Anruf / Vermerk") - rechtsbuendig nebeneinander. */
.ui-aufgaben-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px; margin: -4px 0 12px; }
.ui-aufgaben-links .ui-week-add { margin-left: 0; }

/* ===================================================================
   Preisnachtrag (Rechnung kommt nach dem Lieferschein)
   buchung-preise.php, Ui\Preisnachtrag
   =================================================================== */
.ui-preis-tabelle td { vertical-align: top; }
.ui-preis-tabelle td > div { font-size: .85rem; color: var(--ink-soft); }
.ui-preis-eingabe { width: 140px; max-width: 100%; }
.ui-preis-offen { color: #b45309; font-weight: 600; }
.ui-preis-umschalter { margin-bottom: 10px; font-size: .9rem; color: var(--ink-soft); }
.ui-preis-verbleib-kopf { font-size: .85rem; font-weight: 600; color: var(--ink); }
.ui-preis-verbleib { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.ui-preis-verbleib li { padding-left: 14px; position: relative; overflow-wrap: anywhere; }
.ui-preis-verbleib li::before { content: "↳"; position: absolute; left: 0; color: var(--ink-soft); }
.ui-preis-herkunft,
.ui-preis-nachtrag { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ui-preis-herkunft > li,
.ui-preis-nachtrag > li { padding: 10px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.ui-preis-herkunft > li:first-child,
.ui-preis-nachtrag > li:first-child { border-top: 0; padding-top: 0; }
.ui-preis-nachtrag-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.ui-preis-nachtrag-kopf span { font-weight: 600; color: var(--ink); }

/* "vorläufig": Preis beruht (teils) auf einer FIFO-Charge, deren Rechnung
   noch fehlt. Kleine Marke neben dem Preis, gleiche Farbwelt wie
   .ui-alert-warning. */
.ui-preis-marke {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #7c4a03;
  font-size: .75rem;
  font-weight: 600;
  vertical-align: 1px;
}
[data-bs-theme="dark"] .ui-preis-marke { background: transparent; border-color: #f0b429; color: #f0b429; }
.ui-preis-hinweis strong { font-weight: 700; }

/* Listeneintrag mit Anhang (SimpleList::anhang): die Zeile bleibt ein
   Link, darunter ein Bereich, der eigene Links enthalten darf - z.B.
   die FIFO-Chargen einer Position. Der Anhang beginnt bündig mit dem
   Text der Zeile (Icon 36px + Abstand 12px + Innenabstand 14px). */
.ui-simple-list-item-mit-anhang { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.ui-simple-list-item-mit-anhang:hover { border-color: var(--line); }
.ui-simple-list-item-mit-anhang:has(> .ui-simple-list-zeile:hover) { border-color: var(--line-strong); }
.ui-simple-list-zeile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; min-width: 0; }
.ui-simple-list-anhang { padding: 0 14px 12px 62px; min-width: 0; }
@media (max-width: 575px) {
  .ui-simple-list-anhang { padding-left: 14px; }
}

/* Chargen einer Position (Ui\Preisnachtrag::chargen) */
.ui-chargen-kopf { font-size: .75rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 2px; }
.ui-chargen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: .82rem; color: var(--ink-soft); }
.ui-chargen li { padding-left: 14px; position: relative; overflow-wrap: anywhere; }
.ui-chargen li::before { content: "↳"; position: absolute; left: 0; }
.ui-chargen-wert { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ===================================================================
   Lagervorgang auf einer Seite (buchung-formular.php)
   =================================================================== */

/* "Was möchtest du tun?" - Kacheln mit Titel und einem Satz Erklärung */
.ui-vorgang-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ui-vorgang-wahl-karte {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit; transition: border-color .09s ease-out;
}
.ui-vorgang-wahl-karte:hover, .ui-vorgang-wahl-karte:focus-visible { border-color: var(--line-strong); }
.ui-vorgang-wahl-titel { display: block; font-weight: 600; color: var(--ink); }
.ui-vorgang-wahl-text { display: block; font-size: .85rem; color: var(--ink-soft); margin-top: 2px; }

/* Feste Angabe (Fahrzeug der Instandhaltung) statt Auswahl */
.ui-vorgang-fest { padding: 7px 12px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); }
.ui-vorgang-fest i { color: var(--ink-soft); margin-right: 4px; }
.ui-vorgang-direkt { margin: -6px 0 14px; }

/* Artikelzeilen */
.ui-vorgang-anzahl { display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-dark); font-size: .75rem; text-align: center; margin-left: 4px; }
.ui-vorgang-zeilen { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.ui-vorgang-zeile { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); }
.ui-vorgang-zeile-fehler { border-color: #dc3545; }
.ui-vorgang-zeile-kopf { display: flex; align-items: center; gap: 12px; }
.ui-vorgang-zeile-titel { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-vorgang-zeile-felder { margin-top: 8px; padding-left: 48px; }
.ui-vorgang-entfernen { flex-shrink: 0; }
@media (max-width: 575px) {
  .ui-vorgang-zeile-felder { padding-left: 0; }
}

/* Hinzufügen: Auswahl und Scan nebeneinander, am Handy untereinander */
.ui-vorgang-hinzufuegen { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px 16px; align-items: start; }
.ui-vorgang-suche { display: flex; flex-direction: column; gap: 6px; }
.ui-vorgang-suche > .col-12 { padding: 0; }
.ui-vorgang-hinzufuegen-knopf { align-self: flex-start; }
.ui-vorgang-js .ui-vorgang-hinzufuegen-knopf { display: none; }
@media (max-width: 767px) {
  .ui-vorgang-hinzufuegen { grid-template-columns: minmax(0, 1fr); }
}
.ui-vorgang-neu { margin-top: 12px; }
.ui-vorgang-neu summary { cursor: pointer; color: var(--ink-soft); font-size: .9rem; }
.ui-vorgang-neu summary:hover { color: var(--ink); }

/* Während die Seite nach einer Änderung neu lädt */
.ui-vorgang-laedt { opacity: .6; pointer-events: none; transition: opacity .15s ease-out .1s; }
@media (prefers-reduced-motion: reduce) { .ui-vorgang-laedt { transition: none; } }

.ui-vorgang-aktionen { flex-wrap: wrap; }

/* Herkunft eines Preises in Listen (Ui\Preisnachtrag::chargen):
   eine Lieferung als Zeile, mehrere aufklappbar. */
.ui-herkunft-einzeln { font-size: .82rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.ui-herkunft { font-size: .82rem; color: var(--ink-soft); }
.ui-herkunft > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.ui-herkunft > summary::-webkit-details-marker { display: none; }
.ui-herkunft > summary::before { content: "\F285"; font-family: "bootstrap-icons"; font-size: .7rem; display: inline-block; line-height: 1; transition: transform .12s ease-out; }
.ui-herkunft[open] > summary::before { transform: rotate(90deg); }
.ui-herkunft > summary:hover, .ui-herkunft > summary:focus-visible { color: var(--ink); }
.ui-herkunft .ui-chargen, .ui-herkunft .ui-preis-verbleib { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .ui-herkunft > summary::before { transition: none; } }
.ui-preis-herkunft-preis { font-variant-numeric: tabular-nums; }
.ui-info { color: var(--ink-soft); font-size: .85em; cursor: help; margin-left: 2px; }
.ui-rechnung-summe td { border-top: 2px solid var(--line); padding-top: 10px; font-variant-numeric: tabular-nums; }

/* Beim Erfassen einer Rechnung: aufgeklappt stehen die Abrechnungs-Marken je Zeile, dann braucht es die Sammelmarke nicht. */
.ui-herkunft[open] + .ui-preis-marke { display: none; }

/* Rechnung erfassen am Handy: jede Zeile als Karte statt einer Tabelle,
   in der die Spalten zu schmal werden. */
@media (max-width: 767px) {
  .ui-rechnung-tabelle thead { display: none; }
  .ui-rechnung-tabelle, .ui-rechnung-tabelle tbody, .ui-rechnung-tabelle tfoot, .ui-rechnung-tabelle tr, .ui-rechnung-tabelle td { display: block; width: 100%; }
  .ui-rechnung-tabelle tbody tr { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 10px; }
  .ui-rechnung-tabelle tbody td { border: 0; padding: 4px 0; text-align: left !important; white-space: normal !important; }
  .ui-rechnung-tabelle tbody td[data-label]:not([data-label="Artikel"])::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--ink-soft); }
  .ui-rechnung-tabelle tbody td[data-label="Menge"], .ui-rechnung-tabelle tbody td[data-label="Bisher"] { display: inline-block; width: auto; margin-right: 24px; }
  .ui-rechnung-tabelle .ui-preis-eingabe { width: 100%; max-width: 220px; }
  .ui-rechnung-tabelle tfoot tr { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
  .ui-rechnung-tabelle tfoot td { width: auto; border: 0; padding: 0; }
  .ui-rechnung-tabelle tfoot td[colspan] { text-align: left !important; }
}


/* =====================================================================
   UX-Runde 06.10.2026 - Aktionen in Abschnitten, Reiterleiste
   =====================================================================
   Ausloeser: Kunden uebersehen "Hinzufuegen" in den Reitern der
   Detailseiten. Der Link war klein, orange, ohne Rahmen und stand ganz
   rechts in der Abschnittsueberschrift - er las sich wie Dekoration.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Ui\Abschnitt - Kopf mit echten Knoepfen
   --------------------------------------------------------------------- */
.ui-abschnitt-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 14px;
  min-height: 32px;
}
.ui-abschnitt-kopf > .ui-abschnitt-titel {
  margin-bottom: 0;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}
.ui-abschnitt-zusatz {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: .74rem;
  color: var(--ink-soft);
  background: var(--canvas);
  border-radius: 999px;
  padding: 1px 8px;
}
/* Kein margin-left: auto - der Kopf verteilt mit space-between. Passt
   alles in eine Zeile, stehen die Knoepfe rechts; bricht die Gruppe
   um (schmale Spalte neben der Statuskarte), beginnt sie links unter
   dem Titel statt verloren am rechten Rand. */
.ui-abschnitt-aktionen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.ui-abschnitt-aktionen .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .85rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
/* d-none d-sm-inline-flex: Bootstraps d-sm-inline-flex setzt display
   mit !important, das passt. Fuer Knoepfe ohne Klasse gilt oben. */
.ui-abschnitt-aktionen .btn-outline-secondary { background: var(--surface); }
.ui-abschnitt-aktionen .btn-outline-secondary:hover { background: var(--canvas); }
.ui-abschnitt-haupt { box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* Am Handy: Titel oben, darunter die Hauptaktion in voller Breite -
   mit dem Daumen gut zu treffen. Weitere Aktionen stehen kompakt
   daneben bzw. im Menue. */
@media (max-width: 575.98px) {
  .ui-abschnitt-kopf { flex-direction: column; align-items: stretch; gap: 10px; }
  .ui-abschnitt-aktionen-mit-haupt { flex-wrap: nowrap; }
  .ui-abschnitt-aktionen .btn { min-height: 42px; font-size: .92rem; }
  /* Lange Beschriftungen ("Artikel hinzufügen oder ändern") duerfen
     umbrechen, statt die Seite auf 320px waagrecht zu verbreitern. */
  .ui-abschnitt-haupt { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: center; }
  .ui-abschnitt-mehr { min-width: 46px; }
  .ui-abschnitt-mehr::after { display: none; }
}

/* ---------------------------------------------------------------------
   Ui\Abschnitt - Leer-Zustand mit Handlungsaufforderung
   --------------------------------------------------------------------- */
.ui-abschnitt-leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 26px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.ui-abschnitt-leer-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 10px;
}
.ui-abschnitt-leer-text { font-weight: 600; color: var(--ink); }
.ui-abschnitt-leer-hinweis { color: var(--ink-soft); font-size: .86rem; max-width: 48ch; margin-top: 4px; }
.ui-abschnitt-leer-cta { margin-top: 16px; }
/* inline-flex mit Abstand wie die Knöpfe im Kopf - Ui\Abschnitt setzt
   Symbol und Text ohne Leerzeichen nebeneinander (bis 14.10.2026 klebte
   das Symbol hier am Text, und am Handy wirkte justify-content nicht). */
.ui-abschnitt-leer-cta .btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; }
@media (max-width: 575.98px) {
  .ui-abschnitt-leer-cta { align-self: stretch; }
  .ui-abschnitt-leer-cta .btn { width: 100%; justify-content: center; min-height: 46px; }
}

/* ---------------------------------------------------------------------
   Ui\Abschnitt - Fusslink ("Alle … ansehen")
   ---------------------------------------------------------------------
   Ueber die volle Kartenbreite, damit er als Abschluss der Liste
   gelesen wird und nicht als weiterer Listeneintrag. */
.ui-abschnitt-fuss { margin: 14px -18px -18px; border-top: 1px solid var(--line); }
.ui-abschnitt-fuss a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
  border-radius: 0 0 var(--radius) var(--radius);
}
.ui-abschnitt-fuss a:hover, .ui-abschnitt-fuss a:focus-visible { background: var(--canvas); color: var(--brand-dark); }
.ui-abschnitt-fuss .bi-arrow-right { transition: transform .1s ease-out; }
.ui-abschnitt-fuss a:hover .bi-arrow-right { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .ui-abschnitt-fuss .bi-arrow-right { transition: none; } }

/* ---------------------------------------------------------------------
   Alte Abschnittslinks (.ui-week-add) als Knopf
   ---------------------------------------------------------------------
   Sicherheitsnetz: alle bekannten Stellen laufen jetzt ueber
   Ui\Abschnitt. Taucht die alte Klasse noch irgendwo auf (oder wird
   sie kopiert), sieht sie wenigstens wie ein Knopf aus statt wie
   Fliesstext. */
.ui-week-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  color: #7a4a00;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
}
.ui-week-add:hover, .ui-week-add:focus-visible { background: var(--brand); color: var(--brand-contrast); text-decoration: none; }
[data-bs-theme="dark"] .ui-week-add { color: var(--brand); }
[data-bs-theme="dark"] .ui-week-add:hover { color: var(--brand-contrast); }

/* ---------------------------------------------------------------------
   Reiterleiste (Ui\DetailTabs): sauberer Umbruch statt Durcheinander
   ---------------------------------------------------------------------
   Neben der Statusspalte reicht der Platz oft nicht fuer vier Reiter
   plus "Mehr". Bisher brach die Reiterliste als Block um und "Mehr"
   schwebte rechts daneben, mittig zwischen zwei Zeilen.

   Waagrecht wischen waere die Alternative - dann waeren Reiter aber
   unsichtbar, und genau das Uebersehen ist das Problem. Jetzt steht
   "Mehr" als letzter Eintrag IN der Liste (DetailTabs.php), Reiter und
   "Mehr" brechen gemeinsam um. Jeder Reiter bleibt sichtbar. */
.ui-detail-tabs { row-gap: 6px; }
.ui-detail-tabs .nav-link { white-space: nowrap; }
/* Zwischen lg und xxl teilen sich Reiter und Statusspalte die Breite -
   etwas knapper, damit moeglichst oft eine Zeile reicht. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .ui-detail-tabs .nav-link { padding: 8px 11px; }
}

/* ---------------------------------------------------------------------
   Listeneintraege (Ui\SimpleList) am Handy: Badge unter den Titel
   ---------------------------------------------------------------------
   Rechts neben dem Text nahm das Badge ("Sonstiges", "bis 15.11.2026")
   dem Titel ein Drittel der Breite - Titel brachen in drei Zeilen um.
   Unter dem Text hat der Titel die volle Breite, das Badge bleibt
   sichtbar. Nur fuer Eintraege, die Ui\SimpleList selbst baut
   (.ui-simple-list-std); handgebaute Zeilen bleiben unberuehrt. */
@media (max-width: 575.98px) {
  .ui-simple-list-item.ui-simple-list-std {
    display: grid;
    /* auto statt 36px: Vorschaubilder (Fotos in Dokumentlisten) sind größer. */
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon body chev" "icon badge chev";
    gap: 0 12px; /* style.css setzt gap: 12px - im Raster waere das auch Zeilenabstand */
    align-items: center;
  }
  .ui-simple-list-std > .ui-simple-list-icon { grid-area: icon; }
  .ui-simple-list-std > .ui-simple-list-body { grid-area: body; }
  .ui-simple-list-std > .ui-badge { grid-area: badge; justify-self: start; margin-top: 6px; white-space: normal; }
  .ui-simple-list-std > .ui-simple-list-chevron { grid-area: chev; }
}

/* ---------------------------------------------------------------------
   Lange deutsche Woerter in Titeln (schmale Handys)
   ---------------------------------------------------------------------
   "ANG-2026-0001 V1 · Gehsteigerneuerung Marktplatz" verbreiterte auf
   320px die ganze Seite - ein zusammengesetztes Wort laesst sich ohne
   Hilfe nicht umbrechen. Silbentrennung, wo der Browser sie kann,
   sonst Umbruch im Wort statt waagrechtem Scrollen. */
.ui-detail-head-left,
.ui-detail-head-left > div { min-width: 0; }
.ui-detail-title-row .content-title,
.ui-simple-list-title { overflow-wrap: anywhere; hyphens: auto; }
/* Dasselbe fuer Werte in Ui\InfoSection: Fahrgestellnummer, E-Mail,
   Website - lange Zeichenketten ohne Leerzeichen schoben die Karte
   auf 360px ueber den Rand. */
.ui-info-value { min-width: 0; overflow-wrap: anywhere; }
.ui-export-name { overflow-wrap: anywhere; min-width: 0; }


/* =====================================================================
   Lagervorgang: Scannen und Positionsliste (06.10.2026)
   buchung-formular.php, Material\VorgangZeileAnsicht, vorgang-erfassen.js
   ===================================================================== */

/* Eingabeleiste: Scannen vorn und hervorgehoben - mit dem Handscanner
   ist das der Normalfall. Daneben die Auswahl aus der Liste. */
.ui-vorgang-hinzufuegen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ui-vorgang-scan {
  background: var(--brand-tint);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.ui-vorgang-scan .form-label { font-weight: 600; color: var(--ink); }
.ui-vorgang-scan .form-control { font-size: 1.05rem; padding-top: .5rem; padding-bottom: .5rem; }
.ui-vorgang-scan-status { min-height: 1.3em; margin-top: 6px; }
.ui-vorgang-scan-status[data-art="ok"] { color: #15803d; font-weight: 600; }
.ui-vorgang-scan-status[data-art="fehler"] { color: #b91c1c; font-weight: 600; }
[data-bs-theme="dark"] .ui-vorgang-scan-status[data-art="ok"] { color: #4ade80; }
[data-bs-theme="dark"] .ui-vorgang-scan-status[data-art="fehler"] { color: #f87171; }
.ui-vorgang-neu-knopf { display: none; align-self: flex-start; margin-top: 2px; }
.ui-vorgang-js .ui-vorgang-neu-knopf { display: inline-flex; align-items: center; gap: 6px; }
/* Mit JavaScript übernimmt das Fenster die Neuanlage. */
.ui-vorgang-js .ui-vorgang-neu { display: none; }

/* ---------- Positionsliste ---------- */
.ui-pos-liste { margin-top: 16px; }
.ui-pos-kopf,
.ui-pos {
  display: grid;
  grid-template-columns: var(--pos-spalten, 2.25rem minmax(11rem, 1fr) 9.5rem 2.25rem);
  column-gap: 12px;
  align-items: center;
}
.ui-pos-kopf {
  padding: 0 8px 6px;
  border-bottom: 1px solid var(--line);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ui-pos {
  padding: 8px;
  border-bottom: 1px solid var(--line);
}
.ui-pos-nr {
  justify-self: center;
  min-width: 1.75rem;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--canvas);
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ui-pos-artikel { min-width: 0; }
.ui-pos-titel { font-weight: 600; font-size: .92rem; color: var(--ink); overflow-wrap: anywhere; }
.ui-pos-info { font-size: .78rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.ui-pos-zelle { min-width: 0; }
.ui-pos-stueck { text-align: right; font-size: .85rem; color: var(--ink-soft); padding-right: 4px; }
.ui-pos-entfernen { color: var(--ink-soft); justify-self: center; padding: 4px 6px; }
.ui-pos-entfernen:hover, .ui-pos-entfernen:focus-visible { color: #b91c1c; }
.ui-pos-extra { grid-column: 2 / -1; margin-top: 6px; }
.ui-pos-extra .form-label { font-size: .8rem; margin-bottom: 2px; }
/* Am Desktop steht die Beschriftung im Spaltenkopf - am Feld nur für
   Screenreader. */
.ui-pos-label {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ui-pos-fehler { background: rgba(220, 38, 38, .05); box-shadow: inset 3px 0 0 #dc2626; }
/* Neu hinzugefügt oder hochgezählt: kurz aufleuchten, damit man sieht,
   WO es passiert ist. */
.ui-pos-neu { animation: ui-pos-blitz 1.4s ease-out; }
@keyframes ui-pos-blitz {
  0%, 25% { background: var(--brand-tint); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .ui-pos-neu { animation: none; } }

.ui-pos-leer { display: none; }
.ui-pos-liste.ist-leer .ui-pos-kopf { display: none; }
.ui-pos-liste.ist-leer .ui-pos-leer {
  display: block;
  margin: 0;
  padding: 18px 12px;
  text-align: center;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* Schmal: Positionsnummer, Artikel und Entfernen in der ersten Zeile,
   die Felder darunter mit eigener Beschriftung.

   Als Container-Abfrage statt nach Bildschirmbreite: entscheidend ist,
   wie viel Platz die LISTE hat. Neben der Seitenleiste ist sie auf
   einem 1024er-Bildschirm schmaler als ein Tablet hochkant - mit einer
   Bildschirmregel liefen dort die Spalten seitlich hinaus. */
.ui-pos-liste { container: pos / inline-size; }
@media (max-width: 767.98px) {
  .ui-vorgang-hinzufuegen { grid-template-columns: minmax(0, 1fr); }
}
@container pos (max-width: 680px) {
  .ui-pos-kopf { display: none; }
  .ui-pos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 10px;
    padding: 10px 2px;
  }
  .ui-pos-nr { order: 0; flex: 0 0 auto; margin-top: 1px; }
  .ui-pos-artikel { order: 1; flex: 1 1 calc(100% - 5.5rem); }
  .ui-pos-entfernen { order: 2; flex: 0 0 auto; margin-top: -4px; }
  .ui-pos-zelle { order: 3; flex: 1 1 8rem; }
  .ui-pos-zelle:empty { display: none; }
  .ui-pos-von, .ui-pos-nach { flex-basis: 100%; }
  .ui-pos-extra { order: 4; flex: 1 1 100%; margin: 0; }
  .ui-pos-label {
    position: static !important;
    width: auto; height: auto; margin: 0 0 2px; overflow: visible; clip: auto; white-space: normal;
    display: block;
    font-size: .75rem;
    color: var(--ink-soft);
  }
  .ui-pos-stueck { text-align: left; padding: 4px 0; }
  /* 16px: darunter zoomt iOS beim Antippen ins Feld. */
  .ui-pos .form-control,
  .ui-pos .form-select,
  .ui-pos .input-group-text { font-size: 1rem; }
}


/* =====================================================================
   Scannen - Schnellsuche im Materialmodul (06.10.2026)
   material/scan.php, Material\ScanErgebnis, scan-schnellsuche.js,
   kamera-scanner.js
   ===================================================================== */

.ui-scan-untertitel { margin: 2px 0 0; color: var(--ink-soft); font-size: .92rem; }

/* Wahl QR-Code / Barcode und das Scanfeld: schmal und mittig genug, dass
   man am PC nicht über die ganze Breite schaut. Das Ergebnis darunter
   nutzt die volle Breite. */
.ui-scan > .ui-ansichten,
.ui-scan-leiste,
.ui-scan-tipp { max-width: 640px; }
.ui-scan > .ui-ansichten { margin-bottom: 12px; }
.ui-scan > .ui-ansichten .ui-ansicht { font-size: .95rem; padding-top: 10px; padding-bottom: 10px; }

.ui-scan-leiste {
  background: var(--brand-tint);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ui-scan-erklaerung { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.ui-scan-erklaerung .bi { margin-right: 4px; }
.ui-scan-leiste .form-label { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.ui-scan-suche-gross .form-control { font-size: 1.1rem; padding-top: .6rem; padding-bottom: .6rem; }
.ui-scan-suche .form-text { margin-top: 4px; }
.ui-scan-ohne-kamera { margin: 0; font-size: .85rem; color: var(--ink-soft); }

/* Nur mit JavaScript sinnvoll (Kamera). */
.ui-scan:not(.ui-scan-js) [data-nur-js] { display: none !important; }
.ui-scan-start { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; }
.ui-scan-start[hidden] { display: none !important; }

/* ---------- Kamera ---------- */
.ui-scan-kamera { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ui-scan-kamera[hidden] { display: none; }
/* Feste Seitenverhältnisse statt der Höhe des Kamerabilds: ein
   Hochkant-Bild (iPhone) wäre sonst so hoch wie der Bildschirm und
   schöbe das Eingabefeld weg. Das Bild füllt den Sucher (cover) - der
   sichtbare Ausschnitt liegt dabei immer mittig im ausgewerteten Bild. */
.ui-scan-sucher {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  aspect-ratio: 4 / 3;
}
.ui-scan-sucher[data-form="breit"] { aspect-ratio: 16 / 10; }
.ui-scan-sucher video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Rahmen: zeigt, wo der Code hin soll. Beim Barcode innerhalb des
   Streifens, den kamera-scanner.js auswertet (80 % x 40 % des Bilds). */
.ui-scan-rahmen {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid var(--brand);
  border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
  pointer-events: none;
}
.ui-scan-sucher[data-form="quadrat"] .ui-scan-rahmen { height: 64%; aspect-ratio: 1; }
.ui-scan-sucher[data-form="breit"] .ui-scan-rahmen { width: 80%; height: 40%; }
.ui-scan-sucher[data-form="breit"] .ui-scan-rahmen::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  height: 2px;
  background: #ef4444;
  box-shadow: 0 0 6px #ef4444;
  opacity: .85;
}
.ui-scan-kamera-status { margin: 0; text-align: center; font-size: .9rem; color: var(--ink); min-height: 1.3em; }
.ui-scan-kamera-status[data-art="ok"] { color: #15803d; font-weight: 600; }
.ui-scan-kamera-status[data-art="fehler"] { color: #b91c1c; font-weight: 600; }
[data-bs-theme="dark"] .ui-scan-kamera-status[data-art="ok"] { color: #4ade80; }
[data-bs-theme="dark"] .ui-scan-kamera-status[data-art="fehler"] { color: #f87171; }

.ui-scan-tipp {
  margin: 14px 0 0;
  font-size: .85rem;
  color: var(--ink-soft);
  display: flex;
  gap: 8px;
}
.ui-scan-tipp .bi { color: var(--brand); flex-shrink: 0; margin-top: 1px; }

/* ---------- Ergebnis ---------- */
.ui-scan-ergebnis { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.ui-scan-ergebnis > .ui-card-section,
.ui-scan-spalten .ui-card-section { margin-bottom: 0; }

/* Kopf: gibt es den Artikel? Farbe nach Antwort - grün vorhanden,
   orange neu angelegt, gelb unbekannt bzw. deaktiviert. */
.ui-scan-treffer {
  --scan-farbe: #16a34a;
  --scan-grund: #f0fdf4;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--scan-farbe);
  border-radius: var(--radius);
  overflow: hidden;
}
.ui-scan-treffer[data-art="neu"] { --scan-farbe: var(--brand); --scan-grund: var(--brand-tint); }
.ui-scan-treffer[data-art="inaktiv"],
.ui-scan-treffer[data-art="unbekannt"] { --scan-farbe: #d97706; --scan-grund: #fffbeb; }
.ui-scan-treffer[data-art="liste"] { --scan-farbe: #2563eb; --scan-grund: #eff6ff; }
[data-bs-theme="dark"] .ui-scan-treffer { --scan-grund: rgba(22, 163, 74, .14); }
[data-bs-theme="dark"] .ui-scan-treffer[data-art="neu"] { --scan-grund: var(--brand-tint); }
[data-bs-theme="dark"] .ui-scan-treffer[data-art="inaktiv"],
[data-bs-theme="dark"] .ui-scan-treffer[data-art="unbekannt"] { --scan-farbe: #f59e0b; --scan-grund: rgba(245, 158, 11, .14); }
[data-bs-theme="dark"] .ui-scan-treffer[data-art="liste"] { --scan-farbe: #60a5fa; --scan-grund: rgba(96, 165, 250, .14); }

.ui-scan-status {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  background: var(--scan-grund);
  color: var(--ink);
  font-size: .95rem;
}
.ui-scan-status > .bi { color: var(--scan-farbe); font-size: 1.25rem; line-height: 1.2; flex-shrink: 0; }
.ui-scan-status-text { color: var(--ink-soft); font-size: .88rem; overflow-wrap: anywhere; }
.ui-scan-treffer > .ui-scan-status:only-child { padding-top: 12px; padding-bottom: 12px; }

.ui-scan-artikel {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
}
.ui-scan-artikel-text { flex: 1 1 auto; min-width: 0; }
.ui-scan-artikel-name { font-size: 1.25rem; font-weight: 700; margin: 0 0 2px; color: var(--ink); overflow-wrap: anywhere; }
.ui-scan-artikel-meta { font-size: .88rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.ui-scan-artikel-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ui-scan-stueck {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  font-size: .88rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.ui-scan-stueck .bi { color: var(--ink-soft); }
.ui-scan-artikel-knoepfe { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.ui-scan-artikel-knoepfe .btn { white-space: nowrap; text-align: left; }

@media (max-width: 575px) {
  .ui-scan-artikel { flex-wrap: wrap; }
  .ui-scan-artikel .ui-detail-avatar { width: 44px; height: 44px; font-size: 1.1rem; }
  .ui-scan-artikel-text { flex-basis: calc(100% - 58px); }
  .ui-scan-artikel-knoepfe { flex-direction: row; flex-wrap: wrap; flex-basis: 100%; }
  .ui-scan-artikel-knoepfe .btn { flex: 1 1 auto; text-align: center; }
  .ui-scan-start { align-self: stretch; justify-content: center; }
  .ui-scan-suchen-text { display: none; }
  /* 16px: darunter zoomt iOS beim Antippen ins Feld. */
  .ui-scan-leiste .form-control { font-size: 1rem; }
  /* Mit Ergebnis: die Erklärungen sind gelesen - das Ergebnis rückt
     am Handy in den ersten Bildschirm. */
  .ui-scan.ist-ergebnis .ui-scan-erklaerung,
  .ui-scan.ist-ergebnis .ui-scan-suche .form-text { display: none; }
}

/* Bestand: die eine Zahl, die man wissen will, groß. */
.ui-scan-summe { margin-bottom: 12px; }
.ui-scan-summe-zahl { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ui-scan-summe-zahl span { font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.ui-scan-summe-text { font-size: .88rem; color: var(--ink-soft); }
.ui-scan-summe-text strong { color: var(--ink); font-weight: 600; }

/* Was soll passieren? Dieselben Zeilen wie im Dialog am Lagerort
   (.ui-buchungsweg). */
.ui-scan-wege .ui-buchungsweg { padding: 12px 14px; }
.ui-scan-wege .ui-buchungsweg-titel { font-size: .98rem; }
.ui-scan-wege .ui-buchungsweg-text { font-size: .82rem; }
.ui-buchungsweg.ist-empfohlen { border-color: var(--brand); background: var(--brand-tint); }
.ui-buchungsweg.ist-empfohlen > .bi:first-child { color: var(--brand); }
/* Mehrere Orte mit Bestand: erst "von wo?" - die Zeile selbst ist dann
   kein Link, nur ihre Knöpfe. */
.ui-buchungsweg.ui-scan-weg-auswahl { align-items: flex-start; }
.ui-buchungsweg.ui-scan-weg-auswahl:hover { border-color: var(--line); background: var(--surface); }
.ui-buchungsweg.ui-scan-weg-auswahl > .bi:first-child { margin-top: 2px; color: var(--ink-soft); }
.ui-scan-quellen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ui-scan-quelle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--ink);
  text-decoration: none;
  font-size: .85rem;
  max-width: 100%;
  transition: border-color .12s, background .12s;
}
.ui-scan-quelle:hover, .ui-scan-quelle:focus-visible { border-color: var(--brand); background: var(--brand-tint); color: var(--ink); }
.ui-scan-quelle .bi { color: var(--ink-soft); }
.ui-scan-quelle-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ui-scan-quelle-menge { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-buchungsweg.ui-scan-weg-nichts { border-style: dashed; background: transparent; }
.ui-buchungsweg.ui-scan-weg-nichts .ui-buchungsweg-titel { font-weight: 600; color: var(--ink-soft); }
.ui-scan-wege-hinweis { display: flex; gap: 8px; margin: 0 0 10px; font-size: .88rem; color: var(--ink-soft); }

/* Neuanlage */
.ui-scan-anlage-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.ui-scan-anlage-fuss .form-text { margin: 0; }
.ui-scan-anlage-klappe {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ui-scan-anlage-klappe > summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ui-scan-anlage-klappe > summary::-webkit-details-marker { display: none; }
.ui-scan-anlage-klappe > summary::after { content: "\F282"; font-family: bootstrap-icons; margin-left: auto; color: var(--ink-soft); transition: transform .15s; }
.ui-scan-anlage-klappe[open] > summary::after { transform: rotate(180deg); }
.ui-scan-anlage-klappe > summary .bi { color: var(--brand); }
.ui-scan-anlage-klappe > summary:hover { background: var(--canvas); }
.ui-scan-anlage-inhalt { padding: 4px 14px 14px; }


/* =====================================================================
   Fotos und Dateien (06.10.2026)
   Ui\DateiUpload, ui-dateien.js, Vorschaubilder in Dokumentlisten,
   Sperre gegen doppeltes Absenden (ui.js)
   ===================================================================== */

/* Vorschaubild statt Symbol in Listen (Ui\SimpleList::vorschaubild).
   Das Symbol liegt darunter - lädt das Bild nicht, bleibt es sichtbar. */
.ui-simple-list-icon.ui-simple-list-bild {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--canvas);
  border: 1px solid var(--line);
}
.ui-simple-list-bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Foto auf der Dokument-Detailseite */
.ui-dokument-foto { text-align: center; }
.ui-dokument-foto img {
  max-width: 100%;
  max-height: 60vh;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--canvas);
}

/* ---------- Ui\DateiUpload ---------- */
.ui-dateien:not(.ui-dateien-js) .ui-dateien-knoepfe { display: none; }
.ui-dateien.ui-dateien-js .ui-dateien-feld { display: none; }
.ui-dateien-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-dateien-knoepfe .btn { display: inline-flex; align-items: center; gap: 6px; }
/* Die eigentlichen Dateifelder hinter den Knöpfen: unsichtbar, aber
   fokussierbar - der Fokusring erscheint am Knopf daneben. */
.ui-dateien-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.ui-dateien-versteckt:focus-visible + .btn {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.ui-dateien-liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ui-dateien-liste:empty { display: none; }
.ui-dateien-eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.ui-dateien-bild {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 1.3rem;
}
.ui-dateien-bild img { width: 100%; height: 100%; object-fit: cover; }
.ui-dateien-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ui-dateien-name { font-size: .9rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-dateien-info { font-size: .8rem; color: var(--ink-soft); }
.ui-dateien-eintrag.ist-laufend .ui-dateien-bild { animation: ui-dateien-puls 1s ease-in-out infinite alternate; }
.ui-dateien-eintrag.ist-fehler { border-color: #f59e0b; background: #fffbeb; }
.ui-dateien-eintrag.ist-fehler .ui-dateien-info { color: #92400e; }
[data-bs-theme="dark"] .ui-dateien-eintrag.ist-fehler { border-color: #f59e0b; background: rgba(245, 158, 11, .12); }
[data-bs-theme="dark"] .ui-dateien-eintrag.ist-fehler .ui-dateien-info { color: #fbbf24; }
.ui-dateien-weg { flex-shrink: 0; }
.ui-dateien-meldung { margin-top: 8px; font-size: .88rem; font-weight: 600; color: #b91c1c; }
[data-bs-theme="dark"] .ui-dateien-meldung { color: #f87171; }
form.ist-wartend .ui-dateien-meldung { color: var(--ink); }
@keyframes ui-dateien-puls { from { opacity: .45; } to { opacity: 1; } }
@media (max-width: 575px) {
  .ui-dateien-knoepfe .btn { flex: 1 1 100%; justify-content: center; padding-top: .6rem; padding-bottom: .6rem; }
}

/* ---------- Absenden läuft (ui.js) ---------- */
.btn.ist-sendend { position: relative; }
.btn.ist-sendend::after {
  content: "";
  display: inline-block;
  width: .85em;
  height: .85em;
  margin-left: .5em;
  vertical-align: -.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ui-sendend .7s linear infinite;
}
@keyframes ui-sendend { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.ist-sendend::after, .ui-dateien-eintrag.ist-laufend .ui-dateien-bild { animation: none; }
}

/* Ziel-Lagerplatz neuer Positionen nach "Hier einlagern" (Lagerplatz-Etikett) */
.ui-vorgang-platz { margin-top: 4px; color: var(--ink); }
.ui-vorgang-platz .bi { color: var(--brand); margin-right: 2px; }

/* ---------- Warten auf die nächste Seite (ui.js, window.UiLaden) ----------
   Ab 300 ms: Balken oben, ein Stück läuft ständig von links nach rechts -
   Bewegung zeigt "es tut sich etwas" (ein Fortschritt lässt sich ohnehin
   nicht messen). Ab 800 ms: Schleier mit "Bitte warten …", der weitere
   Klicks abfängt. */
.ui-ladebalken {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: 4px;
  z-index: 2001;
  overflow: hidden;
  pointer-events: none;
  background: var(--brand-tint);
}
.ui-ladebalken::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: var(--brand);
  border-radius: 0 2px 2px 0;
  transform: translateX(-100%);
}
.ui-ladebalken.ist-aktiv::before { animation: ui-laden 1.1s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes ui-laden {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}

.ui-laden-schleier {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(243, 244, 246, .62);
  cursor: progress;
  opacity: 0;
  transition: opacity .15s ease-out;
  -webkit-tap-highlight-color: transparent;
}
[data-bs-theme="dark"] .ui-laden-schleier { background: rgba(18, 19, 20, .62); }
.ui-laden-schleier.ist-sichtbar { opacity: 1; }
.ui-laden-karte {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 320px;
  padding: 16px 22px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.ui-laden-kreis {
  flex: none;
  width: 28px;
  height: 28px;
  border: 3px solid var(--brand-tint);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: ui-sendend .8s linear infinite;
}
.ui-laden-text strong { display: block; font-size: 1rem; font-weight: 600; }
.ui-laden-text small { display: block; margin-top: 1px; font-size: .85rem; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .ui-ladebalken.ist-aktiv::before { animation: none; transform: none; width: 100%; opacity: .8; }
  .ui-laden-kreis { animation: none; border-color: var(--brand); border-right-color: var(--brand-tint); }
  .ui-laden-schleier { transition: none; }
}
@media print { .ui-ladebalken, .ui-laden-schleier { display: none !important; } }


/* ---------------------------------------------------------------------
   Ui\AnzahlListe - "wie viele wovon" (Reservierungen im Einsatz)
   --------------------------------------------------------------------- */
.ui-anzahlliste { display: flex; flex-direction: column; gap: 6px; }
.ui-anzahlliste-kopf,
.ui-anzahlliste-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 8px; }
.ui-anzahlliste-kopf { margin-bottom: -2px; }
.ui-anzahlliste.is-invalid .form-select { border-color: #dc2626; }

/* ---------------------------------------------------------------------
   Ui\Verlauf: Marken unter dem Text (09.10.2026) - z.B. wer eine
   Nachricht bestätigt hat
   --------------------------------------------------------------------- */
.ui-verlauf-fuss { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* ---------------------------------------------------------------------
   Disposition: "Mein Tag" (modules/disposition/pages/mein-tag.php),
   09.10.2026. Gebaut fürs Handy auf der Baustelle: die eigene Aufgabe
   groß, Route und Anruf als echte Knöpfe, Nachrichten zum Bestätigen
   oben.
   --------------------------------------------------------------------- */
.mein-einsatz { margin-bottom: 28px; scroll-margin-top: calc(var(--header-h) + 12px); }
.mein-einsatz-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.mein-einsatz-titel { margin: 0; font-size: 1.25rem; font-weight: 700; text-wrap: balance; }
.mein-einsatz-nummer { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Die eigene Aufgabe: das, wonach am Morgen gesucht wird. */
.mein-aufgabe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  background: var(--brand-tint);
  border: 1px solid var(--brand);
}
.mein-aufgabe > .bi { font-size: 1.6rem; color: var(--brand-dark); }
.mein-aufgabe-was { font-size: 1.1rem; font-weight: 700; }
.mein-aufgabe-zeit { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.mein-nachricht-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mein-nachricht { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.mein-nachricht.ist-offen { border-color: #dc2626; box-shadow: inset 4px 0 0 #dc2626; }
.mein-nachricht-kopf { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .82rem; color: var(--ink-soft); }
.mein-nachricht-zeit { font-variant-numeric: tabular-nums; }
.mein-nachricht-ok { color: #15803d; font-weight: 600; }
[data-bs-theme="dark"] .mein-nachricht-ok { color: #4ade80; }
.mein-nachricht-text { margin-top: 4px; font-size: 1rem; white-space: normal; overflow-wrap: anywhere; }
.mein-nachricht-aktion { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mein-nachrichten { border-color: #dc2626; }

/* =====================================================================
   Terminal in Lager und Werkstatt (10.10.2026) - Material\Terminal.
   Fix montiertes Touch-Gerät in Halle und Werkstatt: eigenes, dunkles
   Erscheinungsbild (blendet nicht, Orange als Signal), kein App-Kopf,
   kein Menü. Große Ziele (mind. 56 px), eine Frage je Bildschirm, unten
   eine feste Leiste mit Zurück und der Hauptaktion. Präfix t-.
   ===================================================================== */
.ist-terminal {
  --t-grund: #0e1217;
  --t-flaeche: #171d25;
  --t-flaeche-2: #1f2731;
  --t-flaeche-3: #2a3440;
  --t-linie: #2b3542;
  --t-text: #eef1f4;
  --t-text-2: #97a3b1;
  --t-akzent: #ffa41b;
  --t-akzent-tief: #33250c;
  --t-akzent-text: #1b1205;
  --t-ok: #34c77b;
  --t-ok-tief: #10301f;
  --t-warn: #f2b33d;
  --t-warn-tief: #36290c;
  --t-fehler: #ff6b6b;
  --t-fehler-tief: #3a1616;
  --t-radius: 16px;
  --t-radius-klein: 12px;
  --t-kopf-h: 76px;
  --t-fuss-h: 92px;
  background: var(--t-grund);
  color: var(--t-text);
  color-scheme: dark;
}
.ist-terminal .app-header,
.ist-terminal .app-sidebar,
.ist-terminal .bottom-nav { display: none !important; }
.ist-terminal .app-shell { min-height: 100dvh; background: transparent; }
.ist-terminal .app-content { padding: 0; background: transparent; }
.ist-terminal .ui-toasts { top: calc(var(--t-kopf-h) + 12px); }
.ist-terminal .ui-toast {
  background: var(--t-flaeche-2); color: var(--t-text); border-color: var(--t-linie);
  font-size: 1.05rem; padding: 14px 20px; min-width: 320px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.ist-terminal .ui-toast.ist-ok, .ist-terminal .ui-toast.ist-ok .bi { border-left-color: var(--t-ok); color: var(--t-text); }
.ist-terminal .ui-toast.ist-ok .bi { color: var(--t-ok); }
.ist-terminal .ui-toast.ist-fehler { border-left-color: var(--t-fehler); }
.ist-terminal .ui-toast.ist-fehler .bi { color: var(--t-fehler); }

.t-app {
  min-height: 100dvh; display: flex; flex-direction: column;
  font-size: 1.125rem; line-height: 1.4; font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.t-app input, .t-app textarea, .t-app select { user-select: text; }
.t-app a { color: inherit; text-decoration: none; }
.t-app :focus-visible { outline: 3px solid var(--t-akzent); outline-offset: 2px; }

/* --- Kopfleiste ----------------------------------------------------- */
.t-kopf {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  min-height: var(--t-kopf-h); padding: 10px 24px;
  background: var(--t-flaeche); border-bottom: 1px solid var(--t-linie);
  box-shadow: inset 0 3px 0 var(--t-akzent);
}
.t-kopf-ort { display: flex; align-items: center; gap: 12px; min-width: 0; }
.t-kopf-ort strong { display: block; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-kopf-ort small { display: block; color: var(--t-text-2); font-size: .85rem; }
.t-kopf-ort > span:last-child { min-width: 0; }
.t-kopf-symbol {
  width: 44px; height: 44px; border-radius: var(--t-radius-klein); flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--t-flaeche-2); color: var(--t-akzent); font-size: 1.3rem;
}
.t-bereiche { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--t-grund); border: 1px solid var(--t-linie); }
.t-bereich {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 22px;
  border-radius: 12px; color: var(--t-text-2); font-weight: 700; font-size: 1.05rem;
}
.t-bereich:hover { color: var(--t-text); }
.t-bereich.ist-aktiv { background: var(--t-akzent); color: var(--t-akzent-text); }
.t-kopf-rechts { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.t-uhr { font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; color: var(--t-text-2); }
.t-person { display: flex; align-items: center; gap: 10px; font-weight: 600; min-width: 0; }
.t-person-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16ch; }
.t-initialen {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--t-akzent-tief); color: var(--t-akzent); font-weight: 800; font-size: 1rem;
}
.t-initialen-gross { width: 72px; height: 72px; font-size: 1.5rem; }

/* --- Schritte ------------------------------------------------------- */
.t-schritte {
  display: flex; gap: 6px; margin: 0; padding: 12px 24px; list-style: none; overflow-x: auto;
  background: var(--t-grund); border-bottom: 1px solid var(--t-linie);
}
.t-schritte li {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 6px 16px 6px 6px; border-radius: 999px; color: var(--t-text-2); font-size: .98rem;
}
.t-schritt-nr {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--t-flaeche-2); font-weight: 700; font-size: .9rem;
}
.t-schritte li.ist-aktiv { background: var(--t-flaeche-2); color: var(--t-text); font-weight: 700; }
.t-schritte li.ist-aktiv .t-schritt-nr { background: var(--t-akzent); color: var(--t-akzent-text); }
.t-schritte li.ist-erledigt .t-schritt-nr { background: var(--t-ok-tief); color: var(--t-ok); }
.t-schritte li + li::before { content: ""; width: 18px; height: 2px; background: var(--t-linie); margin-right: 4px; }

/* --- Inhalt --------------------------------------------------------- */
.t-inhalt {
  flex: 1; width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 28px 28px calc(var(--t-fuss-h) + 28px);
  display: flex; flex-direction: column; gap: 20px;
}
.t-titelzeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.t-frage { font-size: 2rem; font-weight: 800; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.t-abschnitt {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 10px;
  font-size: 1rem; font-weight: 700; color: var(--t-text-2);
}
.t-zahl { padding: 2px 10px; border-radius: 999px; background: var(--t-flaeche-2); color: var(--t-text); font-size: .9rem; }
.t-gewaehlt { margin: 0; color: var(--t-text-2); font-size: 1.05rem; }
.t-gewaehlt .bi { color: var(--t-akzent); margin-right: 4px; }
.t-leer { margin: 0; color: var(--t-text-2); }
.t-leer-gross {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 16px; text-align: center;
  border: 2px dashed var(--t-linie); border-radius: var(--t-radius); color: var(--t-text-2);
}
.t-leer-gross .bi { font-size: 3rem; color: var(--t-akzent); }
.t-leer-gross p { margin: 0; max-width: 46ch; }
.t-hinweis {
  display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 18px;
  border-radius: var(--t-radius-klein); background: var(--t-flaeche); border: 1px solid var(--t-linie); color: var(--t-text-2);
}
.t-hinweis .bi { color: var(--t-akzent); font-size: 1.2rem; }
.t-hinweis.ist-warn { background: var(--t-warn-tief); border-color: transparent; color: var(--t-text); }
.t-hinweis.ist-warn .bi { color: var(--t-warn); }
.t-hinweis.ist-fehler { background: var(--t-fehler-tief); border-color: transparent; color: var(--t-text); }
.t-hinweis.ist-fehler .bi { color: var(--t-fehler); }
.t-hinweis a { color: var(--t-akzent); font-weight: 700; margin-left: 6px; }
.t-marke {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: var(--t-flaeche-3); color: var(--t-text); font-size: .85rem; font-weight: 700; white-space: nowrap;
}
.t-marke.ist-warn { background: var(--t-warn-tief); color: var(--t-warn); }
.t-marke.ist-fehler { background: var(--t-fehler-tief); color: var(--t-fehler); }
.t-marke.ist-ok { background: var(--t-ok-tief); color: var(--t-ok); }
.t-marke-gross { font-size: 1rem; padding: 8px 16px; }
.t-zweispaltig { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
.t-zweispaltig > * { min-width: 0; }
.t-zweispaltig > div { display: flex; flex-direction: column; gap: 18px; }
.t-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.t-karte {
  display: flex; flex-direction: column; gap: 14px; padding: 22px;
  border-radius: var(--t-radius); background: var(--t-flaeche); border: 1px solid var(--t-linie);
}
.t-karte-titel { font-size: 1.35rem; font-weight: 800; margin: 0; }

/* --- Knöpfe --------------------------------------------------------- */
.t-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 22px; border-radius: var(--t-radius-klein);
  border: 1px solid var(--t-linie); background: var(--t-flaeche-2); color: var(--t-text);
  font-size: 1.05rem; font-weight: 700; cursor: pointer;
}
.t-knopf:active { transform: translateY(1px); background: var(--t-flaeche-3); }
.t-knopf-haupt { background: var(--t-akzent); border-color: var(--t-akzent); color: var(--t-akzent-text); }
.t-knopf-haupt:active { background: #f39200; }
.t-knopf-haupt:disabled { background: var(--t-flaeche-3); border-color: var(--t-linie); color: var(--t-text-2); cursor: not-allowed; }
.t-knopf-leise { background: transparent; }
.t-knopf-gross { min-height: 64px; padding: 0 30px; font-size: 1.2rem; }
.t-abmelden { min-height: 48px; }

/* --- Fußleiste ------------------------------------------------------ */
.t-fuss {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--t-fuss-h); padding: 12px 28px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(23, 29, 37, .96); border-top: 1px solid var(--t-linie); backdrop-filter: blur(8px);
}

/* --- Kacheln -------------------------------------------------------- */
.t-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.t-kacheln-vier { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.t-kachel {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  min-height: 200px; padding: 26px; border-radius: var(--t-radius);
  background: var(--t-flaeche); border: 1px solid var(--t-linie); color: var(--t-text);
}
.t-kachel:active { background: var(--t-flaeche-2); }
.t-kachel:hover { border-color: var(--t-akzent); }
.t-kachel-symbol {
  width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--t-akzent-tief); color: var(--t-akzent); font-size: 1.9rem; margin-bottom: 6px;
}
.t-kachel-titel { font-size: 1.5rem; font-weight: 800; }
.t-kachel-text { color: var(--t-text-2); max-width: 40ch; }
.t-kachel-pfeil { position: absolute; right: 24px; bottom: 22px; font-size: 1.6rem; color: var(--t-akzent); }
.t-kachel.ist-aus { opacity: .45; }
.t-kachel.ist-aus:hover { border-color: var(--t-linie); }
.t-kachel.ist-fertig .t-kachel-symbol { background: var(--t-ok-tief); color: var(--t-ok); }
.t-kachel.ist-abschluss { border-color: var(--t-akzent); }

/* --- Personen ------------------------------------------------------- */
.t-personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.t-person-kachel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 170px; padding: 18px 12px; border-radius: var(--t-radius);
  background: var(--t-flaeche); border: 1px solid var(--t-linie); color: var(--t-text); cursor: pointer;
}
.t-person-kachel:hover { border-color: var(--t-akzent); }
.t-person-kachel:active { background: var(--t-flaeche-2); }
.t-person-kachel-name { font-size: 1.15rem; font-weight: 700; text-align: center; }
.t-person-kachel-hinweis { font-size: .9rem; color: var(--t-warn); }
.t-person-kachel[hidden] { display: none; }

/* --- Suche ---------------------------------------------------------- */
.t-suche { position: relative; display: flex; align-items: center; gap: 10px; }
.t-suche > .bi { position: absolute; left: 20px; color: var(--t-text-2); font-size: 1.4rem; pointer-events: none; }
.t-suche input {
  flex: 1; min-width: 0; min-height: 64px; padding: 0 20px 0 58px; border-radius: var(--t-radius-klein);
  background: var(--t-flaeche); border: 2px solid var(--t-linie); color: var(--t-text); font-size: 1.2rem;
}
.t-suche input:focus { border-color: var(--t-akzent); outline: none; }
.t-suche .t-knopf { min-height: 64px; }
.t-suche-klein { width: min(360px, 100%); }
.t-suche-klein input { min-height: 54px; font-size: 1.05rem; }

/* --- Zeilen zum Antippen -------------------------------------------- */
.t-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.t-spalten .t-raster, .t-zweispaltig .t-raster { grid-template-columns: 1fr; }
.t-raster-schmal { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.t-zeile {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  min-height: 76px; padding: 12px 16px; border-radius: var(--t-radius-klein);
  background: var(--t-flaeche); border: 1px solid var(--t-linie); color: var(--t-text); cursor: pointer;
}
.t-zeile:hover { border-color: var(--t-akzent); }
.t-zeile:active { background: var(--t-flaeche-2); }
.t-zeile[hidden] { display: none; }
.t-zeile.ist-neu { border-style: dashed; border-color: var(--t-akzent); }
.t-zeile.ist-neu .t-zeile-symbol { background: var(--t-akzent); color: var(--t-akzent-text); }
.t-zeile.ist-neben { background: transparent; border-style: dashed; }
.t-zeile.ist-aus { opacity: .45; cursor: default; }
.t-zeile-symbol {
  width: 48px; height: 48px; border-radius: 12px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--t-flaeche-2); color: var(--t-text-2); font-size: 1.35rem;
}
.t-zeile-symbol.ist-akzent { background: var(--t-akzent-tief); color: var(--t-akzent); }
.t-zeile-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.t-zeile-titel { font-weight: 700; overflow-wrap: anywhere; }
.t-zeile-unter { margin: 0; font-size: .95rem; color: var(--t-text-2); }
.t-zeile-pfeil { color: var(--t-text-2); font-size: 1.2rem; }
/* Wahl-Zeilen (Checkbox/Radio versteckt, Haken sichtbar) */
.t-zeile-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.t-zeile-wahl { position: relative; }
.t-zeile-haken {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; border: 2px solid var(--t-linie);
  display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: 1.3rem;
}
.t-zeile-haken.ist-rund { border-radius: 50%; }
.t-zeile-wahl:has(input:checked) { border-color: var(--t-akzent); background: var(--t-akzent-tief); }
.t-zeile-wahl:has(input:checked) .t-zeile-haken { background: var(--t-akzent); border-color: var(--t-akzent); color: var(--t-akzent-text); }
.t-zeile-wahl:has(input:checked) .t-zeile-symbol { background: var(--t-akzent); color: var(--t-akzent-text); }
.t-zeile-wahl:has(input:focus-visible) { outline: 3px solid var(--t-akzent); outline-offset: 2px; }

/* --- Formulare ------------------------------------------------------ */
.t-formular { display: flex; flex-direction: column; gap: 20px; }
.t-feld { display: flex; flex-direction: column; gap: 8px; margin: 0; border: 0; padding: 0; min-width: 0; }
.t-feld > span:first-child, .t-feld legend { font-weight: 700; font-size: 1.05rem; }
.t-feld small { font-weight: 500; color: var(--t-text-2); margin-left: 6px; }
.t-app input[type="text"], .t-app input[type="number"], .t-app input[type="search"]:not(.t-suche input), .t-app textarea, .t-app select {
  width: 100%; min-height: 60px; padding: 12px 16px; border-radius: var(--t-radius-klein);
  background: var(--t-flaeche); border: 2px solid var(--t-linie); color: var(--t-text); font-size: 1.15rem;
}
.t-app textarea { min-height: 110px; resize: vertical; }
.t-app input:focus, .t-app textarea:focus, .t-app select:focus { border-color: var(--t-akzent); outline: none; }
.t-app [aria-invalid="true"] { border-color: var(--t-fehler) !important; }
.t-feld-fehler { color: var(--t-fehler); font-weight: 600; font-size: .98rem; margin: 0; }
.t-wahl-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.t-wahl { position: relative; }
.t-wahl input { position: absolute; opacity: 0; }
.t-wahl span {
  display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0 12px;
  border-radius: var(--t-radius-klein); border: 2px solid var(--t-linie); background: var(--t-flaeche); font-weight: 700; cursor: pointer;
}
.t-wahl input:checked + span { background: var(--t-akzent); border-color: var(--t-akzent); color: var(--t-akzent-text); }
.t-wahl input:focus-visible + span { outline: 3px solid var(--t-akzent); outline-offset: 2px; }
.t-schalter {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: var(--t-radius-klein);
  background: var(--t-flaeche); border: 1px solid var(--t-linie); cursor: pointer; color: var(--t-text-2);
}
.t-schalter strong { color: var(--t-text); }
.t-schalter input[type="checkbox"] { position: absolute; opacity: 0; }
.t-schalter-bahn {
  position: relative; flex: 0 0 auto; width: 62px; height: 36px; border-radius: 999px; background: var(--t-flaeche-3);
  transition: background .15s;
}
.t-schalter-bahn::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--t-text); transition: transform .15s;
}
.t-schalter input:checked + .t-schalter-bahn { background: var(--t-akzent); }
.t-schalter input:checked + .t-schalter-bahn::after { transform: translateX(26px); background: var(--t-akzent-text); }
.t-schalter input:focus-visible + .t-schalter-bahn { outline: 3px solid var(--t-akzent); outline-offset: 2px; }

/* --- Zähler (Menge, Stunden) ---------------------------------------- */
.t-zaehler { display: inline-flex; align-items: center; gap: 8px; }
.t-zaehler-knopf {
  width: 60px; height: 60px; border-radius: var(--t-radius-klein); border: 1px solid var(--t-linie);
  background: var(--t-flaeche-2); color: var(--t-text); font-size: 1.5rem; cursor: pointer;
}
.t-zaehler-knopf:active { background: var(--t-akzent); color: var(--t-akzent-text); }
.t-app .t-zaehler input { width: 104px; text-align: center; font-size: 1.5rem; font-weight: 800; padding: 8px; }
.t-zaehler-einheit { color: var(--t-text-2); min-width: 3ch; }
.t-dauer { display: flex; flex-wrap: wrap; gap: 18px; }
.t-schnellwahl { display: flex; flex-wrap: wrap; gap: 8px; }
.t-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--t-linie); background: var(--t-flaeche-2); color: var(--t-text);
  font-weight: 700; font-size: 1.05rem; cursor: pointer;
}
.t-chip:active, .t-chip.ist-gewaehlt { background: var(--t-akzent-tief); border-color: var(--t-akzent); color: var(--t-akzent); }
.t-chip-wahl input { position: absolute; opacity: 0; }
.t-chip-wahl:has(input:checked) { background: var(--t-akzent); border-color: var(--t-akzent); color: var(--t-akzent-text); }
.t-chip-weg { border: 0; background: transparent; color: inherit; font-size: 1.3rem; padding: 0 0 0 4px; }

/* --- Artikel-Korb --------------------------------------------------- */
.t-artikel { display: flex; flex-direction: column; gap: 18px; }
.t-treffer { padding: 16px; border-radius: var(--t-radius); background: var(--t-flaeche); border: 1px solid var(--t-akzent); }
.t-treffer .t-abschnitt { margin-top: 0; }
.t-treffer .t-zeile { background: var(--t-flaeche-2); }
.t-korb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.t-posten {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px 18px; align-items: center;
  padding: 16px 18px; border-radius: var(--t-radius-klein); background: var(--t-flaeche); border: 1px solid var(--t-linie);
}
.t-posten.ist-fehler { border-color: var(--t-fehler); box-shadow: inset 4px 0 0 var(--t-fehler); }
.t-posten-kopf { display: flex; flex-direction: column; min-width: 0; }
.t-posten-name { font-weight: 800; font-size: 1.2rem; overflow-wrap: anywhere; }
.t-posten-unter { font-size: .95rem; color: var(--t-text-2); }
.t-weg {
  width: 56px; height: 56px; border-radius: var(--t-radius-klein); border: 1px solid transparent;
  background: transparent; color: var(--t-text-2); font-size: 1.3rem; cursor: pointer;
}
.t-weg:active, .t-weg:hover { color: var(--t-fehler); border-color: var(--t-fehler-tief); background: var(--t-fehler-tief); }
.t-stuecke { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.t-sn-neu { display: inline-flex; gap: 8px; align-items: center; }
.t-app .t-sn-neu input { width: 240px; min-height: 52px; }
.t-platz { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; color: var(--t-text-2); font-size: .95rem; }
.t-posten-fehler { grid-column: 1 / -1; margin: 0; color: var(--t-fehler); font-weight: 700; }

/* --- Listen in Karten ----------------------------------------------- */
.t-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.t-liste li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--t-linie); }
.t-liste li:last-child { border-bottom: 0; }
.t-liste li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.t-liste small { color: var(--t-text-2); font-size: .92rem; }
.t-liste-wert { min-width: 7ch; font-weight: 800; color: var(--t-akzent); }
.t-liste-punkte li { display: list-item; margin-left: 20px; padding: 6px 0; border: 0; color: var(--t-text-2); list-style: disc; }

/* --- Bestätigen ----------------------------------------------------- */
.t-art { display: flex; flex-direction: column; gap: 10px; border: 0; margin: 0; padding: 0; }
.t-art-wahl {
  position: relative; display: flex; gap: 14px; align-items: center; padding: 16px; cursor: pointer;
  border-radius: var(--t-radius-klein); border: 2px solid var(--t-linie); background: var(--t-flaeche-2);
}
.t-art-wahl input { position: absolute; opacity: 0; }
.t-art-wahl > span:last-child { display: flex; flex-direction: column; gap: 2px; color: var(--t-text-2); font-size: .98rem; }
.t-art-wahl strong { color: var(--t-text); font-size: 1.2rem; }
.t-art-symbol {
  width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  background: var(--t-flaeche-3); color: var(--t-text-2); font-size: 1.5rem;
}
.t-art-wahl:has(input:checked) { border-color: var(--t-akzent); background: var(--t-akzent-tief); }
.t-art-wahl:has(input:checked) .t-art-symbol { background: var(--t-akzent); color: var(--t-akzent-text); }
.t-art-wahl:has(input:focus-visible) { outline: 3px solid var(--t-akzent); outline-offset: 2px; }

/* --- Arbeitsplatz / Checkliste -------------------------------------- */
.t-ih-kopf {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px 24px;
  border-radius: var(--t-radius); background: var(--t-flaeche); border: 1px solid var(--t-linie);
  box-shadow: inset 4px 0 0 var(--t-akzent);
}
.t-ih-kopf .t-frage { margin: 4px 0; }
.t-ih-zusatz { margin: 0; color: var(--t-text-2); }
.t-ih-beschreibung { margin: 10px 0 0; max-width: 70ch; }
.t-fortschritt { display: inline-flex; align-items: center; gap: 12px; color: var(--t-text-2); }
.t-fortschritt strong { color: var(--t-text); font-size: 1.3rem; }
.t-fortschritt-balken { width: 180px; height: 10px; border-radius: 999px; background: var(--t-flaeche-3); overflow: hidden; }
.t-fortschritt-balken span { display: block; height: 100%; background: var(--t-ok); border-radius: inherit; }
.t-checkliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.t-punkt { border-radius: var(--t-radius-klein); background: var(--t-flaeche); border: 1px solid var(--t-linie); scroll-margin-top: 160px; }
.t-punkt form { margin: 0; }
.t-punkt-knopf {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 76px; padding: 14px 18px; text-align: left;
  border: 0; background: transparent; color: var(--t-text); font-size: 1.15rem; font-weight: 600; cursor: pointer;
}
.t-punkt-haken {
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; border: 2px solid var(--t-linie);
  display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: 1.5rem;
}
.t-punkt-text { display: flex; flex-direction: column; }
.t-punkt-text small { color: var(--t-text-2); font-weight: 500; font-size: .9rem; }
.t-punkt.ist-fertig { border-color: var(--t-ok-tief); }
.t-punkt.ist-fertig .t-punkt-haken { background: var(--t-ok); border-color: var(--t-ok); color: #06240f; }
.t-punkt.ist-fertig .t-punkt-text { color: var(--t-text-2); }
.t-punkt-notiz { padding: 0 18px 12px 74px; }
.t-punkt-notiz summary { color: var(--t-text-2); cursor: pointer; padding: 6px 0; font-size: .98rem; list-style: none; }
.t-punkt-notiz summary::-webkit-details-marker { display: none; }
.t-punkt-notiz form { display: flex; gap: 10px; margin-top: 6px; }
.t-app .t-punkt-notiz input { min-height: 52px; }

/* --- PIN-Dialog ----------------------------------------------------- */
.t-pin-dialog {
  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(5, 8, 12, .78); backdrop-filter: blur(6px);
}
.t-pin-dialog[hidden] { display: none; }
.t-pin-karte {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: 18px; padding: 26px;
  border-radius: 22px; background: var(--t-flaeche); border: 1px solid var(--t-linie); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.t-pin-kopf { display: flex; align-items: center; gap: 16px; }
.t-pin-kopf h2 { margin: 0; font-size: 1.5rem; font-weight: 800; }
.t-pin-kopf p { margin: 2px 0 0; color: var(--t-text-2); font-size: .98rem; }
.t-pin-punkte { display: flex; justify-content: center; gap: 14px; padding: 8px 0; }
.t-pin-punkte span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--t-text-2); }
.t-pin-punkte span.ist-voll { background: var(--t-akzent); border-color: var(--t-akzent); }
.t-pin-punkte.ist-falsch { animation: t-wackeln .35s; }
.t-pin-punkte.ist-falsch span { border-color: var(--t-fehler); }
.t-pin-fehler { min-height: 1.4em; margin: -6px 0 0; text-align: center; color: var(--t-fehler); font-weight: 700; }
.t-pin-tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.t-pin-taste {
  min-height: 76px; border-radius: 16px; border: 1px solid var(--t-linie); background: var(--t-flaeche-2);
  color: var(--t-text); font-size: 1.9rem; font-weight: 700; cursor: pointer;
}
.t-pin-taste:active { background: var(--t-flaeche-3); }
.t-pin-taste.ist-neben { font-size: 1.5rem; color: var(--t-text-2); }
.t-pin-taste.ist-ok { background: var(--t-akzent); border-color: var(--t-akzent); color: var(--t-akzent-text); font-size: 2rem; }
.t-pin-taste:disabled { opacity: .5; }
.t-pin-punkte.ist-richtig span { background: var(--t-ok); border-color: var(--t-ok); }
.t-pin-karte.ist-pruefend .t-pin-tasten { opacity: .55; pointer-events: none; }
.t-pin-abbrechen { align-self: center; }
/* Abgeschickt: Knopf gedämpft, damit niemand ein zweites Mal tippt. */
.t-knopf.ist-sendend, .t-zeile.ist-sendend, .t-person-kachel.ist-sendend { opacity: .6; pointer-events: none; }
@keyframes t-wackeln { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }

/* --- Fertig --------------------------------------------------------- */
.t-fertig { align-items: center; justify-content: center; text-align: center; gap: 16px; }
.t-fertig-symbol {
  width: 132px; height: 132px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--t-ok-tief); color: var(--t-ok); font-size: 4.6rem; box-shadow: 0 0 0 10px rgba(52, 199, 123, .08);
}
.t-fertig-text { font-size: 1.3rem; max-width: 56ch; margin: 0; }
.t-fertig-knoepfe { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.t-fertig-uhr { color: var(--t-text-2); margin: 0; font-size: .95rem; }

@media (prefers-reduced-motion: no-preference) {
  .t-fertig-symbol { animation: t-fertig .4s cubic-bezier(.2, .9, .3, 1.3); }
  @keyframes t-fertig { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .t-pin-punkte.ist-falsch { animation: none; }
}

/* --- Schmale Geräte ------------------------------------------------- */
@media (max-width: 1000px) {
  .t-kopf { grid-template-columns: 1fr auto; }
  .t-bereiche { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .t-bereich { flex: 1; justify-content: center; }
  .t-uhr { display: none; }
  .t-zweispaltig, .t-spalten { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .t-kopf { padding: 10px 16px; }
  .t-person-name { display: none; }
  .t-inhalt { padding: 18px 16px calc(var(--t-fuss-h) + 20px); }
  .t-frage { font-size: 1.55rem; }
  .t-raster { grid-template-columns: 1fr; }
  .t-posten { grid-template-columns: minmax(0, 1fr) auto; }
  .t-posten .t-zaehler, .t-posten .t-stuecke { grid-column: 1 / -1; }
  .t-fuss { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .t-knopf-gross { padding: 0 18px; font-size: 1.05rem; }
  .t-wahl-reihe { grid-template-columns: 1fr; }
  .t-ih-kopf { flex-direction: column; }
  .t-kacheln { grid-template-columns: 1fr; gap: 12px; }
  .t-kachel { min-height: 0; padding: 18px 20px; }
  .t-kachel-titel { font-size: 1.25rem; }
  /* Arbeitsplatz: vier kleine Kacheln nebeneinander statt untereinander */
  .t-kacheln-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-kacheln-vier .t-kachel { padding: 16px; gap: 6px; }
  .t-kacheln-vier .t-kachel-symbol { width: 48px; height: 48px; font-size: 1.4rem; border-radius: 14px; }
  .t-kacheln-vier .t-kachel-titel { font-size: 1.1rem; }
  .t-kacheln-vier .t-kachel-text { font-size: .92rem; }
}

/* ===================================================================
   Systemverwaltung arbeitet in der Anwendung (System\Portal::band(),
   11.10.2026): Band ganz oben, damit niemand vergisst, als wer er
   gerade unterwegs ist. Blau = als Systemadministrator, gestreift =
   nur ansehen.
   =================================================================== */
.system-band {
  position: sticky; top: 0; z-index: 1040;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 6px 16px; background: #24324a; color: #fff; font-size: .9rem;
}
.system-band form { margin: 0; }
.system-band.ist-ansicht {
  background: repeating-linear-gradient(135deg, #7c2d12 0 14px, #8a3517 14px 28px);
}
.system-band ~ .app-header { top: 38px; }

/* Hinweis an die Firma (System\Abo::band) - scrollt mit, bleibt nicht stehen */
.abo-band {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 16px; background: #fef3c7; color: #78350f;
  border-bottom: 1px solid #f59e0b; font-size: .92rem;
}
.abo-band.ist-gesperrt { background: #fee2e2; color: #7f1d1d; border-bottom-color: #ef4444; }
[data-bs-theme="dark"] .abo-band { background: #422006; color: #fde68a; border-bottom-color: #b45309; }
[data-bs-theme="dark"] .abo-band.ist-gesperrt { background: #450a0a; color: #fecaca; border-bottom-color: #b91c1c; }

/* ===================================================================
   Kopfleiste bleibt auf langen Seiten stehen (11.10.2026)
   ---------------------------------------------------------------
   style.css setzt html UND body auf height: 100%. Der Kopf (sticky)
   klebt aber nur innerhalb von body - war body eine Bildschirmhöhe
   hoch, rutschte der Kopf auf sehr langen Seiten (lange Listen,
   Historie, Handbuch) nach einigen tausend Pixeln aus dem Bild. body
   wächst jetzt mit dem Inhalt, ist aber mindestens so hoch wie das
   Fenster - für kurze Seiten ändert sich nichts.
   =================================================================== */
body { height: auto; min-height: 100%; }


/* ---------------------------------------------------------------------
   UI-Runde 1 (14.10.2026): Orange nur für Hauptaktion und aktives Menü
   ---------------------------------------------------------------------
   Die Akzentbalken, orangen Symbolfelder und orangen Ränder beim
   Darüberfahren sind in style.css an Ort und Stelle neutral geworden
   (Variablen --neutral-tint, --line-strong). Hier die zwei neuen Regeln. */

/* Hinweis ohne Dringlichkeit ("so funktioniert es", "dazu gibt es ...").
   Vorher stand dafür in rund 25 Seiten ein orange getönter Kasten als
   Inline-Stil - Orange gehört der Hauptaktion (14.10.2026). */
.ui-alert-hinweis { background: var(--neutral-tint); color: var(--ink); border: 1px solid var(--line); font-weight: 500; }
.ui-alert-hinweis > .bi { color: var(--ink-soft); }
/* Am Handy: Kennzahlen als kompakte Zeile statt Kacheln untereinander
   (14.10.2026). Vier Kacheln standen vorher übereinander und schoben den
   eigentlichen Inhalt um rund 400 px nach unten. Jetzt Wert und Label in
   einer "Pille", mehrere nebeneinander; Rot bleibt für Dringendes. */
@media (max-width: 767.98px) {
  .ui-stat-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px 0; }
  .ui-stat-bar > [class*="col"] { width: auto; flex: 0 0 auto; padding: 0; margin: 0; }
  .ui-stat-bar .ui-stat-tile { padding: 6px 12px; height: auto; gap: 6px; border-radius: 999px; }
  .ui-stat-bar a.ui-stat-tile { padding-right: 12px; }
  .ui-stat-bar a.ui-stat-tile::after,
  .ui-stat-bar .stat-icon { display: none; }
  .ui-stat-bar .ui-stat-tile > div { display: flex; align-items: baseline; gap: 6px; }
  .ui-stat-bar .stat-value { font-size: 1rem; line-height: 1.2; }
  .ui-stat-bar .stat-label { font-size: .82rem; margin: 0; }
  .ui-stat-bar .ui-stat-tile-attention,
  .ui-stat-bar a.ui-stat-tile.ui-stat-tile-attention:hover { border-left-width: 1px; border-color: rgba(220, 38, 38, .45); background: rgba(220, 38, 38, .07); }
  .ui-stat-bar .ui-stat-tile-attention .stat-value { color: #dc2626; }
}

/* ---------------------------------------------------------------------
   Eingangsrechnungen (14.10.2026) - Prüfseite material/rechnung-detail
   ---------------------------------------------------------------------
   Links das Formular, rechts (ab 1400 px) das PDF, mitlaufend. Jede
   Rechnungszeile zeigt am linken Rand, wie sicher die Zuordnung ist:
   grün sicher, gelb Vorschlag, grau nicht im Wareneingang, blass
   "kein Lagermaterial". */
.ui-pruefliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ui-pruefliste li { display: flex; gap: 8px; align-items: baseline; font-size: .9rem; }
.ui-pruefliste .ist-ok .bi { color: #15803d; }
.ui-pruefliste .ist-offen .bi { color: #b45309; }
.ui-rechnung-buchungen { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ui-rechnung-zeilen tbody tr > td:first-child { box-shadow: inset 3px 0 0 transparent; padding-left: 10px; }
.ui-rechnung-zeilen tbody tr.ist-ok > td:first-child { box-shadow: inset 3px 0 0 #16a34a; }
.ui-rechnung-zeilen tbody tr.ist-vorschlag > td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
.ui-rechnung-zeilen tbody tr.ist-offen > td:first-child { box-shadow: inset 3px 0 0 var(--line-strong, #c4cad3); }
.ui-rechnung-zeilen tbody tr.ist-ignoriert { opacity: .6; }
.ui-rechnung-zeilen td[data-label="Position im Wareneingang"] { min-width: 200px; width: 34%; }
.ui-rechnung-zeilen td[data-label="Artikel"] { min-width: 240px; }
.ui-rechnung-zeilen td[data-label="Preis fürs Lager"] { width: 150px; }
/* Rechnungszeile: Nummer + Bezeichnung, darunter Menge, Einheit, Betrag */
.ui-zeile-text { display: grid; grid-template-columns: minmax(70px, 30%) 1fr; gap: 4px; }
.ui-zeile-zahlen { display: grid; grid-template-columns: 5.5em 3.6em minmax(7em, 9em); gap: 4px; margin-top: 4px; }
.ui-zuordnung-hinweis { font-size: .8rem; color: var(--ink-soft); margin-top: 3px; }
.ui-rechnung-zeilen tr.ist-vorschlag .ui-zuordnung-hinweis { color: #92400e; }
.ui-rechnung-summe .ui-ok { color: #15803d; }
.ui-rechnung-pdf { position: sticky; top: calc(var(--header-h) + 12px); }
.ui-rechnung-pdf iframe { width: 100%; height: calc(100vh - var(--header-h) - 36px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
@media (max-width: 767.98px) {
  .ui-rechnung-zeilen tbody tr[class] > td:first-child { padding-left: 0; box-shadow: none; }
  .ui-rechnung-zeilen tbody tr.ist-ok { border-left: 3px solid #16a34a; }
  .ui-rechnung-zeilen tbody tr.ist-vorschlag { border-left: 3px solid #f59e0b; }
  .ui-rechnung-zeilen td[data-label] { min-width: 0; width: auto; }
}

/* =====================================================================
   UI-Runde 2 (14.10.2026) – Richtung A "Anthrazit" mit Source Sans 3
   ---------------------------------------------------------------------
   Rahmen (Kopf + Menü + untere Leiste) in Anthrazit (--frame), Inhalt
   hell. Orange nur für Hauptaktion und aktiven Menüpunkt – auf
   Anthrazit leuchtet es wie eine Warnleuchte. Eine Schrift für alles
   (Source Sans 3, --font-ui): Titel und Zahlen fett statt in einer
   zweiten Schrift. Knappe Radien, Listen als eine Tafel mit
   Trennlinien statt Einzelkarten, Etiketten getönt statt vollflächig.
   Farben und Radien kommen aus den Variablen in style.css (:root).
   ===================================================================== */

/* ---------- Rahmen: Kopf + Menü ---------- */
.app-header { background: var(--frame); border-bottom: 1px solid var(--frame-line); color: var(--frame-ink); }
.btn-bereiche {
  background: var(--frame-hover); border: 1px solid var(--frame-line);
  color: var(--frame-ink); font-weight: 600; padding: 7px 14px; border-radius: var(--radius);
}
.btn-bereiche:hover, .btn-bereiche:focus { background: rgba(255, 255, 255, .13); border-color: var(--frame-line); color: #fff; }
.app-header .icon-btn { background: transparent; border-color: transparent; color: var(--frame-soft); }
.app-header .icon-btn:hover { background: var(--frame-hover); color: #fff; }
.avatar-btn .avatar-name { color: var(--frame-ink); }
.avatar-btn .bi-chevron-down { color: var(--frame-soft) !important; }

.app-sidebar { background: var(--frame); border-right: 0; padding: 22px 12px; }
.sidebar-heading {
  text-transform: none; letter-spacing: 0;
  font-size: 1.25rem; font-weight: 700; color: #fff; padding: 0 10px 16px;
}
.sidebar-nav .nav-link {
  color: var(--frame-ink); font-weight: 400; font-size: .97rem;
  padding: 8px 10px; margin-bottom: 2px; border-radius: var(--radius-sm);
}
.sidebar-nav .nav-link i { color: var(--frame-soft); }
.sidebar-nav .nav-link:hover { background: var(--frame-hover); color: #fff; }
.sidebar-nav .nav-link.active {
  background: rgba(255, 255, 255, .09); color: #fff; font-weight: 600;
  box-shadow: inset var(--accent-w) 0 0 var(--brand);
}
.sidebar-nav .nav-link.active i { color: var(--brand); }
.sidebar-version { color: var(--frame-soft); opacity: .6; }

.bottom-nav { background: var(--frame); border-top: 0; }
.bottom-nav-item { color: var(--frame-soft); font-weight: 600; }
.bottom-nav-item.active { color: var(--brand); }
.bottom-nav-item:active { background: var(--frame-hover); }

/* ---------- Seite ---------- */
.app-content { padding: 30px 34px 48px; }
.content-header { margin-bottom: 22px; align-items: flex-end; }
.content-title { font-weight: 700; font-size: 2rem; line-height: 1.15; letter-spacing: -.01em; }
.content-header .form-text { font-size: .95rem; color: var(--ink-soft); margin-top: 4px; }
.ui-back-link { font-size: .9rem; margin-bottom: 10px; }

/* Abschnittstitel: Satzschreibung statt Versal-Etikett */
.ui-card-section-title, .ui-abschnitt-titel {
  text-transform: none; letter-spacing: 0; font-size: 1.15rem; font-weight: 700; color: var(--ink);
}
.ui-card-section-title > i.bi:first-child { display: none; }

/* ---------- Knöpfe & Felder ---------- */
.btn:not(.btn-sm):not(.btn-lg):not(.btn-link):not(.btn-close) {
  --bs-btn-font-size: .95rem; --bs-btn-padding-y: .42rem; --bs-btn-padding-x: .95rem;
}
.btn { --bs-btn-border-radius: var(--radius-sm); --bs-btn-font-weight: 600; }
.btn-outline-secondary { --bs-btn-border-color: var(--line-strong); }
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--line-strong); }
.form-label { font-weight: 600; font-size: .92rem; margin-bottom: 5px; }
@media (min-width: 992px) {
  .form-control, .form-select { font-size: .97rem; padding-top: .42rem; padding-bottom: .42rem; }
}
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(254, 157, 3, .22); }

/* ---------- Flächen ---------- */
.ui-card-section { border-radius: var(--radius-lg); padding: 20px 22px; }
.ui-filterbar { border-radius: var(--radius-lg); padding: 10px; gap: 8px; }

/* Listen: eine Tafel mit Trennlinien, Zeilen dichter */
.ui-simple-list {
  gap: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ui-simple-list-item {
  border: 0; border-radius: 0; border-bottom: 1px solid var(--line);
  padding: 9px 16px; gap: 14px;
}
.ui-simple-list > :last-child { border-bottom: 0; }
.ui-simple-list-item:hover { background: var(--neutral-tint); }
.ui-simple-list-icon {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--neutral-tint); color: var(--ink-soft);
}
.ui-simple-list-title { font-weight: 600; font-size: 1rem; }
.ui-simple-list-subtitle { font-size: .87rem; }
.ui-card-section .ui-simple-list { border-radius: var(--radius); }
@media (max-width: 575.98px) {
  /* Handy: Etikett unter den Titel statt neben ihn */
  .ui-simple-list-item:not(.ui-simple-list-std):has(> .ui-badge) { flex-wrap: wrap; row-gap: 4px; }
  .ui-simple-list-item:not(.ui-simple-list-std):has(> .ui-badge) > .ui-simple-list-body { flex: 1 1 calc(100% - 90px); }
  .ui-simple-list-item:not(.ui-simple-list-std):has(> .ui-badge) > .ui-simple-list-chevron { order: 1; }
  .ui-simple-list-item:not(.ui-simple-list-std):has(> .ui-badge) > :not(.ui-simple-list-icon):not(.ui-simple-list-body):not(.ui-simple-list-chevron) { order: 2; white-space: normal; }
  .ui-simple-list-item:not(.ui-simple-list-std):has(> .ui-simple-list-icon):has(> .ui-badge) > .ui-simple-list-body + .ui-badge { margin-left: 46px; }
}

/* Zahlen: gleich breite Ziffern, wo sie untereinander stehen */
.stat-value, .table, .ui-info-value, .text-end { font-variant-numeric: tabular-nums; }

/* Kennzahlen */
.ui-stat-tile { border-radius: var(--radius-lg); padding: 14px 18px; gap: 14px; }
.stat-value { font-weight: 700; font-size: 1.9rem; line-height: 1.05; letter-spacing: -.01em; }
.stat-label { font-size: .9rem; margin-top: 3px; }
.stat-icon { width: 38px; height: 38px; border-radius: var(--radius); }
.ui-stat-tile-attention { border-left: 3px solid #d92d20; }

/* Detailkopf: ohne Kasten, Symbol in Rahmenfarbe */
.ui-detail-head { background: transparent; border: 0; padding: 0; margin-bottom: 18px; align-items: center; box-shadow: none; }
.ui-detail-avatar { width: 52px; height: 52px; border-radius: var(--radius); background: var(--frame); color: #fff; }
.ui-detail-subtitle { font-size: .93rem; }

/* Reiter: Unterstrich wie die Ansichtenleiste */
.ui-detail-tabs-row { border-bottom: 1px solid var(--line); padding-bottom: 0; margin-bottom: 20px; }
.ui-detail-tabs { gap: 2px; }
.ui-detail-tabs .nav-link, .ui-detail-tabs-more .nav-link {
  border-radius: 0; background: none; color: var(--ink-soft); font-weight: 600;
  padding: 10px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ui-detail-tabs .nav-link.active, .ui-detail-tabs-more .nav-link.active {
  background: none; color: var(--ink); font-weight: 700; border-bottom-color: var(--brand);
}
.ui-detail-tabs .nav-link:not(.active):hover, .ui-detail-tabs-more .nav-link:hover { background: none; color: var(--ink); }
.ui-detail-tabs .nav-link.active .ui-tab-count, .ui-tab-count { background: var(--line); color: var(--ink-soft); }
.ui-ansicht { font-weight: 600; padding: 10px 12px; }
.ui-ansicht.ist-aktiv { color: var(--ink); }

/* Etiketten (Feinschliff 14.10.2026, Kundenwunsch "mehr Kontrast"):
   Zustand voll gefärbt (Verfügbar, Zu prüfen, Überfällig …), Eigenschaft
   getönt mit Rand (Fahrzeug, Bestand, Hauptansprechpartner …). Gelb statt
   Orange für Warnungen - Orange ist die Hauptaktion. Farben: --badge-* in
   style.css, hell und dunkel. */
.ui-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700; font-size: .78rem; line-height: 1.35; letter-spacing: .01em;
  padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.ui-badge-success { background: var(--badge-ok); color: #fff; }
.ui-badge-warning { background: var(--badge-warn); color: var(--badge-warn-ink); }
.ui-badge-danger { background: var(--badge-err); color: #fff; }
.ui-badge-info { background: var(--badge-info); color: #fff; }
.ui-badge-brand { background: var(--brand-tint); color: var(--brand-soft-ink); border-color: var(--badge-brand-rand); }
.ui-badge-secondary { background: var(--neutral-tint); color: var(--ink); border-color: var(--line-strong); }

.dropdown-menu { border-radius: var(--radius); }
.bereich-tile { border-radius: var(--radius-lg); }
.bereich-tile.is-active { box-shadow: none; }

@media (max-width: 991.98px) {
  .app-content { padding: 18px 16px 104px; }
  .content-title { font-size: 1.75rem; }
}

/* ---------------------------------------------------------------------
   Arbeitsseiten (UI-Runde 2): Seiten mit einer festen Abfolge –
   Rechnung erfassen/prüfen, Preise eintragen, Wartungsreihe.
     .ui-schritte        Leiste oben: Schritte mit Stand (Ui\Schritte)
     .ui-schritt-kopf    Kopf eines Abschnitts: Nummer, Titel, Satz, Stand
     .ui-arbeit          zweispaltig: Arbeit links, Überblick rechts (mitlaufend)
                         (.seite-nach-erstem: einspaltig Überblick nach Abschnitt 1)
     .ui-aktionsleiste   unten mitlaufend: Stand links, Knöpfe rechts
     .ui-ablage          Fläche zum Hineinziehen einer Datei
     .ui-wahl            zwei oder drei Wege nebeneinander
     .ui-zustand         Zustand einer Zeile (Punkt + Wort)
     .ui-zeilenfilter    Filter über einer langen Zeilenliste
   Nummern sind anthrazit (aktiv) bzw. grün mit Haken (erledigt) –
   Orange bleibt der Hauptaktion vorbehalten.
   --------------------------------------------------------------------- */
.ui-schritt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-right: 0; flex-shrink: 0;
  border-radius: 50%; font-size: .85rem; font-weight: 700; line-height: 1;
  background: var(--surface); color: var(--ink-soft); border: 1.5px solid var(--line-strong);
}
.ist-aktiv > .ui-schritt, .ist-aktiv .ui-schritt { background: var(--frame); border-color: var(--frame); color: #fff; }
.ist-fertig > .ui-schritt, .ist-fertig .ui-schritt { background: var(--ok-bg); border-color: transparent; color: var(--ok-ink); }
.ui-card-section-title .ui-schritt { margin-right: 10px; background: var(--frame); border-color: var(--frame); color: #fff; }

/* Leiste */
.ui-schritte {
  list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.ui-schritte-eintrag { flex: 1 1 0; min-width: 0; position: relative; }
.ui-schritte-eintrag + .ui-schritte-eintrag { border-left: 1px solid var(--line); }
.ui-schritte-eintrag > a, .ui-schritte-eintrag > span {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; color: var(--ink); height: 100%;
}
.ui-schritte-eintrag > a:hover { background: var(--neutral-tint); }
/* aktiver Schritt dezent orange - wie der aktive Reiter */
.ui-schritte-eintrag.ist-aktiv { background: var(--brand-tint); }
.ui-schritte-eintrag.ist-aktiv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand); }
.ui-schritte-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ui-schritte-titel { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-schritte-eintrag.ist-offen .ui-schritte-titel { color: var(--ink-soft); font-weight: 500; }
.ui-schritte-stand { font-size: .82rem; color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 767.98px) {
  /* Handy: nur Nummern, der aktive Schritt mit Titel */
  .ui-schritte-eintrag { flex: 0 0 auto; }
  .ui-schritte-eintrag.ist-aktiv { flex: 1 1 auto; }
  /* versteckt, nicht weg: Vorleser sollen den Titel weiter hören */
  .ui-schritte-eintrag:not(.ist-aktiv) .ui-schritte-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .ui-schritte-eintrag > a, .ui-schritte-eintrag > span { padding: 10px 12px; }
  /* Mehrere Schritte in Arbeit (Instandhaltung): nur der erste mit Titel */
  .ui-schritte-eintrag.ist-aktiv ~ .ist-aktiv { flex: 0 0 auto; }
  .ui-schritte-eintrag.ist-aktiv ~ .ist-aktiv .ui-schritte-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}

/* Kopf eines Abschnitts */
.ui-schritt-kopf { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ui-schritt-kopf-text { flex: 1 1 auto; min-width: 0; }
.ui-schritt-titel { font-size: 1.15rem; font-weight: 700; margin: 2px 0 0; line-height: 1.25; }
.ui-schritt-satz { margin: 3px 0 0; color: var(--ink-soft); font-size: .93rem; }
.ui-schritt-stand {
  flex-shrink: 0; font-size: .85rem; font-weight: 600; color: var(--ink-soft);
  background: var(--neutral-tint); border-radius: 999px; padding: 3px 10px; margin-top: 2px;
}
.ui-schritt-kopf.ist-fertig .ui-schritt-stand { background: var(--ok-bg); color: var(--ok-ink); }
.ui-schritt-kopf.ist-warnung .ui-schritt-stand { background: var(--warn-bg); color: var(--warn-ink); }
.ui-schritt-kopf.ist-warnung > .ui-schritt { background: var(--warn-bg); border-color: transparent; color: var(--warn-ink); }

/* Zweispaltig: Arbeit links, Überblick rechts */
.ui-arbeit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1200px) {
  .ui-arbeit.mit-seite { grid-template-columns: minmax(0, 1fr) 360px; }
  .ui-arbeit-seite { position: sticky; top: calc(var(--header-h) + 16px); }
}
@media (min-width: 1400px) {
  /* Beleg (PDF) daneben erst ab 1400 px - darunter "PDF öffnen" */
  .ui-arbeit.mit-beleg { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.ui-arbeit > * { min-width: 0; }
.ui-arbeit-seite .ui-card-section { margin-bottom: 14px; }
/* .seite-nach-erstem: einspaltig steht der Überblick nicht ganz unten,
   sondern gleich nach dem ersten Abschnitt (Wartungsreihe: die Vorschau
   direkt unter den Intervallen). Braucht .ui-arbeit-haupt als linke Spalte. */
@media (max-width: 1199.98px) {
  .ui-arbeit.seite-nach-erstem { row-gap: 0; }
  .ui-arbeit.seite-nach-erstem > .ui-arbeit-haupt { display: contents; }
  .ui-arbeit.seite-nach-erstem > .ui-arbeit-haupt > * { order: 2; }
  .ui-arbeit.seite-nach-erstem > .ui-arbeit-haupt > :first-child { order: 0; }
  .ui-arbeit.seite-nach-erstem > .ui-arbeit-seite { order: 1; }
}

/* Aktionsleiste unten, läuft mit */
.ui-aktionsleiste {
  position: sticky; bottom: 12px; z-index: 20;
  display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: 12px 16px; margin-top: 18px;
  box-shadow: 0 6px 24px rgba(20, 28, 36, .12);
}
.ui-aktionsleiste-info { flex: 1 1 260px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: .95rem; }
.ui-aktionsleiste-info strong { font-weight: 700; }
.ui-aktionsleiste-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.ui-aktionsleiste .ui-ok { color: var(--ok-ink); }
.ui-aktionsleiste .ui-offen { color: var(--warn-ink); }
@media (max-width: 991.98px) {
  .ui-aktionsleiste { bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 8px); }
  .ui-aktionsleiste-knoepfe { width: 100%; }
  .ui-aktionsleiste-knoepfe .btn { flex: 1 1 auto; }
}

/* Datei hineinziehen */
.ui-ablage {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  min-height: 190px; padding: 26px 18px; cursor: pointer;
  border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--neutral-tint);
  transition: border-color .1s ease-out, background .1s ease-out;
}
.ui-ablage:hover, .ui-ablage.ist-drueber { border-color: var(--brand); background: var(--brand-tint); }
.ui-ablage:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(254, 157, 3, .22); }
.ui-ablage .bi { font-size: 2.2rem; color: var(--ink-soft); line-height: 1; }
.ui-ablage-titel { font-size: 1.1rem; font-weight: 700; }
.ui-ablage-text { color: var(--ink-soft); font-size: .92rem; }
.ui-ablage-datei { display: none; align-items: center; gap: 8px; font-weight: 600; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px; }
.ui-ablage.hat-datei .ui-ablage-datei { display: inline-flex; }
.ui-ablage.hat-datei .ui-ablage-leer { display: none; }
/* Das Dateifeld selbst nur mit JavaScript verstecken - ohne zeigt es die gewählte Datei */
.ui-ablage.js-ablage input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ui-ablage:not(.js-ablage) input[type=file] { max-width: 100%; }

/* Wege nebeneinander */
.ui-wahl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 992px) { .ui-wahl.zwei { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.ui-wahl > .ui-card-section { margin-bottom: 0; display: flex; flex-direction: column; }
.ui-wahl-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ui-wahl-kopf .bi { font-size: 1.25rem; color: var(--ink-soft); }
.ui-wahl-kopf h2 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.ui-wahl p { color: var(--ink-soft); }
.ui-wahl .ui-wahl-fuss { margin-top: auto; padding-top: 12px; }

/* Zustand einer Zeile */
.ui-zustand { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; white-space: nowrap; color: var(--ink-soft); }
.ui-zustand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex-shrink: 0; }
.ui-zustand.ist-ok { color: var(--ok-ink); }
.ui-zustand.ist-ok::before { background: #16a34a; }
.ui-zustand.ist-vorschlag { color: var(--warn-ink); }
.ui-zustand.ist-vorschlag::before { background: #f59e0b; }
.ui-zustand.ist-offen::before { background: var(--ink-soft); }

/* Filter über einer Zeilenliste */
.ui-zeilenfilter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ui-zeilenfilter button, .ui-zeilenfilter a {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 999px; padding: 4px 12px; font-size: .88rem; font-weight: 600; text-decoration: none;
}
.ui-zeilenfilter button:hover, .ui-zeilenfilter a:hover { border-color: var(--brand); color: var(--ink); }
/* gewählt: dezent orange (Feinschliff 14.10.2026) */
.ui-zeilenfilter button[aria-pressed="true"], .ui-zeilenfilter a[aria-current] {
  background: var(--brand-tint); border-color: var(--brand); color: var(--ink); box-shadow: inset 0 0 0 1px var(--brand);
}
.ui-zeilenfilter .ui-zahl { font-variant-numeric: tabular-nums; opacity: .8; margin-left: 4px; }

/* ---------------------------------------------------------------------
   Eingangsrechnung prüfen (UI-Runde 2) – Zeilen als Liste statt Tabelle:
   links was auf der Rechnung steht (als Text, "Ändern" klappt die
   Felder auf), Mitte die Position im Wareneingang, rechts der Preis
   fürs Lager. Der farbige Rand links sagt, wie es um die Zeile steht.
   --------------------------------------------------------------------- */
.ui-gelesen { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ui-gelesen-titel { font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.ui-pruefliste .ist-info .bi { color: var(--ink-soft); }

.ui-we-liste { list-style: none; margin: 0 0 6px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.ui-we-eintrag { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.ui-we-eintrag + .ui-we-eintrag { border-top: 1px solid var(--line); }
.ui-we-eintrag > .bi { color: var(--ink-soft); font-size: 1.1rem; }
.ui-we-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ui-we-text a { font-weight: 600; }
.ui-we-text .form-text { margin-top: 0; }
.ui-we-weg { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: var(--ink-soft); white-space: nowrap; cursor: pointer; }

.ui-hinweiszeile { display: flex; gap: 8px; align-items: baseline; color: var(--ink-soft); font-size: .93rem; margin-bottom: 12px; }

.ui-rzeilen { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ui-rzeile {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 190px; gap: 10px 18px; align-items: start;
  padding: 12px 14px 12px 16px; box-shadow: inset 4px 0 0 var(--line-strong); background: var(--surface);
}
.ui-rzeile + .ui-rzeile { border-top: 1px solid var(--line); }
.ui-rzeile.ist-ok { box-shadow: inset 4px 0 0 #16a34a; }
.ui-rzeile.ist-vorschlag { box-shadow: inset 4px 0 0 #f59e0b; background: color-mix(in srgb, var(--warn-bg) 35%, var(--surface)); }
.ui-rzeile.ist-ignoriert { box-shadow: inset 4px 0 0 transparent; }
.ui-rzeile.ist-ignoriert .ui-rzeile-rechnung, .ui-rzeile.ist-ignoriert .ui-rzeile-preis { opacity: .55; }
.ui-rzeile-oben { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.ui-rzeile-nr { font-size: .85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ui-rzeile-bez { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ui-rzeile-zahlen { font-size: .9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-top: 2px; }
.ui-rzeile-aendern { border: 0; background: none; padding: 0 0 0 6px; color: var(--ink-soft); font-size: .85rem; }
.ui-rzeile-aendern:hover { color: var(--ink); text-decoration: underline; }
.ui-rzeile-label { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 3px; }
.ui-rzeile-felder { margin-top: 8px; display: grid; gap: 6px; }
.ui-rzeile-felder-text { display: grid; grid-template-columns: minmax(80px, 30%) 1fr; gap: 6px; }
.ui-rzeile-felder-zahlen { display: grid; grid-template-columns: 6em 5em minmax(7em, 10em); gap: 6px; }
/* Mit JavaScript: Felder zu, bis "Ändern" (bei Fehlern offen) */
.ui-rzeilen.js-zu .ui-rzeile:not(.ist-bearbeiten) .ui-rzeile-felder { display: none; }
.ui-rzeile .ui-zuordnung-hinweis { margin-top: 4px; }
.ui-rzeilen-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 12px; }
.ui-rzeilen-summe { margin-left: auto; text-align: right; }
.ui-rzeilen-summe .form-text { display: block; margin-top: 0; }
.ui-arbeit .ui-rechnung-pdf iframe { height: calc(100vh - var(--header-h) - 40px); }
/* Schmale Spalte (z.B. neben dem PDF): Rechnungstext oben über die ganze
   Breite, darunter Position und Preis nebeneinander */
.ui-rzeilen { container-type: inline-size; }
@container (max-width: 760px) {
  .ui-rzeile { grid-template-columns: minmax(0, 1fr) 170px; }
  .ui-rzeile-rechnung { grid-column: 1 / -1; }
}
@container (max-width: 440px) {
  .ui-rzeile { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .ui-schritt-kopf { flex-wrap: wrap; }
  .ui-schritt-kopf-text { flex: 1 1 calc(100% - 40px); }
  .ui-schritt-stand { margin-left: 38px; margin-top: 0; }
}
/* Auswahl + Knopf in einer Zeile, bricht in schmalen Spalten um */
.ui-dazu { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 6px; }
.ui-dazu > div { flex: 1 1 280px; min-width: 0; }
.ui-dazu > .btn { flex: 0 0 auto; margin-bottom: 26px; }

/* ---------------------------------------------------------------------
   Wartungsreihe (UI-Runde 2, 14.10.2026) – plan-reihe-formular.php,
   Vorschau auch im Plandetail.
     .ui-kacheln / .ui-kachel   Auswahl als Kacheln (Radio) – wenige,
                                gleichwertige Möglichkeiten mit einem Satz
     .ui-stufen / .ui-stufe     Stufen der Reihe: "alle [500] km",
                                Bezeichnung, Prüfpunkte. Breit eine Zeile
                                je Stufe, schmal (< 640 px) ein Block.
     .ui-ablauf                 die nächsten Termine (Ui\Wartungsablauf):
                                je größer die Wartung, desto größer der Punkt
     .ui-weitere                zusammengeklappte, selten gebrauchte Felder
   --------------------------------------------------------------------- */
.ui-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ui-kachel {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.ui-kachel:hover { border-color: var(--brand); }
.ui-kachel input { flex-shrink: 0; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--brand); }
/* gewählt: dezent orange (Kundenwunsch 14.10.2026) */
.ui-kachel:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-tint); }
.ui-kachel:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.ui-kachel-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ui-kachel-titel { font-weight: 700; overflow-wrap: anywhere; }
.ui-kachel-satz { margin-top: 2px; font-size: .88rem; color: var(--ink-soft); }
fieldset > legend.form-label { float: none; width: auto; font-size: inherit; }

/* Stufen */
.ui-stufen { container: stufen / inline-size; }
.ui-stufen-kopf, .ui-stufe {
  display: grid; gap: 8px 12px;
  grid-template-columns: 26px minmax(170px, 220px) minmax(0, 1fr) minmax(0, 1.15fr) 34px;
}
.ui-stufen-kopf { padding-bottom: 6px; border-bottom: 1px solid var(--line); font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.ui-stufe { position: relative; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ui-stufe-nr {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 6px;
  border-radius: 50%; background: var(--neutral-tint); color: var(--ink); font-size: .85rem; font-weight: 700;
}
/* Breit stehen die Beschriftungen oben im Kopf - in der Zeile nur für Vorleser */
.ui-stufe .form-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ui-stufe .input-group-text { background: var(--neutral-tint); color: var(--ink-soft); font-weight: 600; }
.ui-stufe [data-reihe-intervall] { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-stufe [data-reihe-intervall]::placeholder { font-weight: 400; }
.ui-stufe-neu { border: 0; background: none; padding: 5px 0 0; font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.ui-stufe-neu:hover { color: var(--ink); text-decoration: underline; }
.ui-stufe-weg {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 38px;
  border: 0; border-radius: var(--radius); background: none; color: var(--ink-soft);
}
.ui-stufe-weg:hover { background: var(--neutral-tint); color: var(--ink); }
.ui-stufe-zusatz { grid-column: 2 / -1; font-size: .88rem; color: var(--ink-soft); }
.ui-stufe-aufloesen { display: flex; gap: 8px; align-items: baseline; margin: 0; cursor: pointer; }
@container stufen (max-width: 639.98px) {
  .ui-stufen-kopf { display: none; }
  .ui-stufe {
    grid-template-columns: 26px minmax(0, 1fr) 34px;
    grid-template-areas: "nr intervall weg" ". name name" ". liste liste" ". zusatz zusatz";
  }
  .ui-stufe-zusatz { grid-area: zusatz; }
  .ui-stufe-nr { grid-area: nr; margin-top: 31px; }
  .ui-stufe-intervall { grid-area: intervall; }
  .ui-stufe-name { grid-area: name; }
  .ui-stufe-liste { grid-area: liste; }
  .ui-stufe-weg { grid-area: weg; margin-top: 25px; }
  .ui-stufe .form-label {
    position: static; width: auto; height: auto; margin: 0 0 .3rem; overflow: visible; clip: auto; white-space: normal;
  }
}

/* Die nächsten Termine */
.ui-ablauf-titel { font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; }
.ui-ablauf-takt { margin: 0 0 14px; font-size: .93rem; color: var(--ink-soft); }
.ui-ablauf-takt strong { color: var(--ink); }
.ui-ablauf-leer {
  margin: 8px 0 0; padding: 22px 16px; text-align: center; font-size: .93rem; color: var(--ink-soft);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.ui-ablauf-warnung {
  display: flex; gap: 8px; align-items: baseline; margin: 0 0 12px; padding: 8px 10px; font-size: .88rem;
  background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius);
}
.ui-ablauf { list-style: none; margin: 0; padding: 0; }
.ui-ablauf-eintrag {
  position: relative; display: grid; grid-template-columns: 96px 22px minmax(0, 1fr); column-gap: 10px;
  align-items: start; padding: 5px 0;
}
/* Die Linie läuft von Punkt zu Punkt */
.ui-ablauf-eintrag::before {
  content: ""; position: absolute; left: calc(96px + 10px + 10px); top: 0; bottom: 0; width: 2px; background: var(--line);
}
.ui-ablauf-eintrag:first-child::before { top: 16px; }
.ui-ablauf-eintrag:last-child::before { bottom: auto; height: 16px; }
.ui-ablauf-eintrag:only-child::before { display: none; }
.ui-ablauf-bei {
  text-align: right; white-space: nowrap; line-height: 22px; font-size: .9rem;
  font-variant-numeric: tabular-nums; color: var(--ink-soft);
}
.ui-ablauf-punkt { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.ui-ablauf-punkt::after { content: ""; box-sizing: border-box; border-radius: 50%; }
.ist-klein > .ui-ablauf-punkt::after { width: 10px; height: 10px; background: var(--surface); border: 2px solid var(--ink-soft); }
.ist-mittel > .ui-ablauf-punkt::after { width: 14px; height: 14px; background: var(--ink-soft); }
.ist-gross > .ui-ablauf-punkt::after { width: 18px; height: 18px; background: var(--ink); border: 3px solid var(--surface); box-shadow: 0 0 0 1.5px var(--ink); }
.ui-ablauf-was { min-width: 0; line-height: 22px; }
.ui-ablauf-name { overflow-wrap: anywhere; }
.ist-mittel .ui-ablauf-name, .ist-gross .ui-ablauf-name { font-weight: 700; }
.ui-ablauf-mit { display: block; font-size: .85rem; line-height: 1.3; color: var(--ink-soft); }
.ui-ablauf-marke { display: block; font-size: .78rem; font-weight: 600; line-height: 1.2; color: var(--ink-soft); }
.ui-ablauf-marke.ist-allein { font-size: .9rem; font-weight: 700; line-height: 22px; color: var(--ink); }
.ui-ablauf-eintrag.ist-naechster .ui-ablauf-bei { color: var(--ink); font-weight: 700; }
.ui-ablauf-fuss { margin: 8px 0 0; padding-left: calc(96px + 22px + 20px); font-size: .85rem; color: var(--ink-soft); }

/* Weitere Einstellungen */
.ui-weitere > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; list-style: none; cursor: pointer; }
.ui-weitere > summary::-webkit-details-marker { display: none; }
.ui-weitere > summary::before {
  content: "\F285"; font-family: "bootstrap-icons"; font-size: .8rem; color: var(--ink-soft);
  display: inline-block; transition: transform .12s ease-out;
}
.ui-weitere[open] > summary::before { transform: rotate(90deg); }
.ui-weitere-titel { font-weight: 700; font-size: 1.05rem; }
.ui-weitere-satz { font-size: .9rem; color: var(--ink-soft); }
.ui-weitere:not([open]) { padding-top: 14px; padding-bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .ui-weitere > summary::before { transition: none; } }

/* Wartungsreihe im Plandetail: Stufen links, nächste Termine rechts */
.ui-reihe-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; }
@media (min-width: 768px) { .ui-reihe-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ui-reihe-detail-titel { font-size: .95rem; font-weight: 700; margin: 0 0 8px; }
.ui-stufenliste { list-style: none; margin: 0 0 8px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.ui-stufenliste-eintrag { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 12px; }
.ui-stufenliste-eintrag + .ui-stufenliste-eintrag { border-top: 1px solid var(--line); }
.ui-stufenliste-name { font-weight: 700; overflow-wrap: anywhere; }
.ui-stufenliste-takt { font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; text-align: right; }
.ui-stufenliste-pruef { grid-column: 1 / -1; font-size: .88rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------------
   Bausteine nach der Prüfung (14.10.2026, Feinschliff UI-Runde 2)
   --------------------------------------------------------------------- */
/* Jedes Formular: Knöpfe laufen unten mit (wie .ui-aktionsleiste) - bei
   langen Formularen (Mitarbeiter, Kontakt) war "Speichern" erst nach
   30 Feldern zu sehen. Im Dialog bleiben sie, wo sie sind. */
form > .ui-form-actions {
  position: sticky; bottom: 12px; z-index: 20; flex-wrap: wrap; align-items: center;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  padding: 12px 16px; margin-top: 18px; box-shadow: 0 6px 24px rgba(20, 28, 36, .12);
}
@media (max-width: 991.98px) {
  form > .ui-form-actions { bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 8px); }
}
.modal form > .ui-form-actions { position: static; background: none; border: 0; box-shadow: none; padding: 0; margin-top: 8px; }

/* Leise orange: Hauptaktion eines Abschnitts (die volle Farbe gehört der
   Hauptaktion der Seite) */
.btn-brand-leise {
  --bs-btn-color: var(--ink); --bs-btn-bg: var(--brand-tint); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--brand-contrast); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-color: var(--brand-contrast); --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-focus-shadow-rgb: 254, 157, 3; font-weight: 600;
}
/* Gewählter Knopf in einer Auswahlreihe (Zeitraum): dezent orange */
.btn-auswahl {
  --bs-btn-color: var(--ink); --bs-btn-bg: var(--brand-tint); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--brand-tint); --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-color: var(--ink); --bs-btn-active-bg: var(--brand-tint); --bs-btn-active-border-color: var(--brand-dark);
  box-shadow: inset 0 0 0 1px var(--brand); font-weight: 700;
}

/* Kennzahlen nach der Breite der Spalte statt des Bildschirms - in der
   Hauptspalte neben einer Seitenspalte liefen Beträge über den Rand */
@media (min-width: 768px) {
  .ui-stat-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 0 0 16px; --bs-gutter-x: 0; --bs-gutter-y: 0; }
  .ui-stat-bar > [class*="col"] { width: auto; max-width: none; padding: 0; margin: 0; flex: none; }
  .ui-stat-bar .ui-stat-tile > div { min-width: 0; }
  .ui-stat-bar .stat-value { overflow-wrap: anywhere; }
}

/* InfoSection: leere Angaben gesammelt am Ende */
.ui-info-leer { padding-top: 10px; font-size: .86rem; color: var(--ink-soft); line-height: 1.4; }
.ui-info-leer-titel { font-weight: 600; }

/* Reiter: alle in der Leiste, "Mehr" nur bei Platzmangel (ui.js) */
.ui-detail-tabs { flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   Instandhaltung als Arbeitsseite (14.10.2026). Bausteine, die auch
   andere Detailseiten nutzen sollen (Auftrag, Lagervorgang, Artikel):
     .ui-fakten      Eckdaten als Raster: Etikett klein, Wert darunter
     .ui-posten      Tabelle mit Posten und Summe (Stunden, Material);
                     am Handy je Posten ein Block
     .ui-summen      Beträge untereinander mit Gesamt (Seitenspalte)
     .ui-seite-titel Überschrift einer Karte in der Seitenspalte
     .ui-folgen      was eine Aktion bewirkt
     .ui-knopfzeile  Knöpfe unter einem Abschnitt
     .ui-verweise    verknüpfte Datensätze (Störmeldung) als Zeilen
     .ui-checkliste  Punkte zum Abhaken
   --------------------------------------------------------------------- */
.ui-fakten { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px 20px; margin: 0 0 14px; }
.ui-fakten > div { min-width: 0; }
.ui-fakten dt { font-size: .8rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 1px; }
.ui-fakten dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.ui-auftrag-text { padding: 12px 14px; background: var(--neutral-tint); border-radius: var(--radius); line-height: 1.5; overflow-wrap: anywhere; }
.ui-auftrag-fuss { margin: 10px 0 0; font-size: .85rem; color: var(--ink-soft); }
.ui-leer-text { color: var(--ink-soft); }

.ui-verweise { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.ui-verweise li { display: flex; align-items: center; gap: 10px; }
.ui-verweise li > .bi { color: var(--ink-soft); }
.ui-verweis-text { flex: 1 1 auto; min-width: 0; }
.ui-verweis-text a { font-weight: 600; }
.ui-verweis-satz { color: var(--ink-soft); }
.ui-verweise li.ist-aktion { font-size: .9rem; }

.ui-posten { margin-bottom: 0; font-variant-numeric: tabular-nums; }
.ui-posten th { font-size: .8rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.ui-posten td { vertical-align: top; }
.ui-posten tbody tr:last-child td { border-bottom-color: var(--line-strong); }
.ui-posten tfoot td { font-weight: 700; border-bottom: 0; padding-top: 10px; }
.ui-posten-haupt { min-width: 180px; }
.ui-posten-haupt a { color: inherit; text-decoration: none; }
.ui-posten-haupt a:hover { text-decoration: underline; }
.ui-posten-unter { font-size: .84rem; color: var(--ink-soft); margin-top: 2px; font-weight: 400; }
.ui-posten-aktion { width: 1%; text-align: right; }
.ui-posten-weg { color: var(--ink-soft); padding: 2px 4px; }
.ui-posten-weg:hover { color: var(--err-ink); }
.ui-posten tr.ist-storniert td { color: var(--ink-soft); }
.ui-posten tr.ist-storniert .ui-posten-haupt strong { text-decoration: line-through; }
.ui-posten .ui-herkunft, .ui-posten .ui-herkunft-einzeln { font-size: .84rem; margin-top: 2px; }
@media (max-width: 575.98px) {
  .ui-posten thead { display: none; }
  .ui-posten, .ui-posten tbody, .ui-posten tfoot { display: block; width: 100%; }
  .ui-posten tbody tr { display: flex; flex-wrap: wrap; gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .ui-posten tbody td { border: 0; padding: 0; text-align: left !important; }
  .ui-posten td.ui-posten-haupt { flex: 1 1 100%; min-width: 0; }
  .ui-posten tbody td[data-label]::before { content: attr(data-label) " "; color: var(--ink-soft); font-size: .8rem; }
  .ui-posten td.ui-posten-aktion { margin-left: auto; }
  .ui-posten td.ui-posten-aktion:empty { display: none; }
  .ui-posten tfoot tr { display: flex; justify-content: space-between; gap: 12px; }
  .ui-posten tfoot td { padding: 10px 0 0; }
  .ui-posten tfoot td:empty { display: none; }
}

.ui-seite-titel { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }
.ui-summen { margin: 0; }
.ui-summen > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ui-summen dt { font-weight: 500; margin: 0; }
.ui-summen dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-summen-zusatz { color: var(--ink-soft); font-size: .85rem; font-weight: 400; margin-left: 4px; }
.ui-summen > .ist-gesamt { border-bottom: 0; padding-top: 10px; }
.ui-summen > .ist-gesamt dt, .ui-summen > .ist-gesamt dd { font-weight: 700; font-size: 1.2rem; }
.ui-seite-notizen { margin: 6px 0 0; padding-left: 18px; font-size: .86rem; color: var(--warn-ink); }
.ui-seite-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .9rem; font-weight: 600; }
.ui-folgen { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .92rem; }
.ui-folgen li { position: relative; padding-left: 18px; }
.ui-folgen li::before { content: ""; position: absolute; left: 3px; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); }

.ui-knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.ui-vorgemerkt { margin-top: 14px; padding: 10px 14px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-ink); font-size: .92rem; }
.ui-vorgemerkt-titel { font-weight: 700; margin-bottom: 4px; }
.ui-vorgemerkt ul { list-style: none; margin: 0; padding: 0; }
.ui-vorgemerkt li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 0; }
.ui-vorgemerkt li + li { border-top: 1px solid color-mix(in srgb, var(--warn-ink) 18%, transparent); }
.ui-vorgemerkt li > span { margin-right: auto; font-weight: 600; }
.ui-vorgemerkt .btn-outline-secondary { background: var(--surface); }
.ui-vorgemerkt p { margin-top: 4px; }
.ui-haken-liste { display: grid; gap: 6px; }

.ui-checkliste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.ui-checkliste-punkt { padding: 9px 12px; transition: opacity .15s; }
.ui-checkliste-punkt + .ui-checkliste-punkt { border-top: 1px solid var(--line); }
.ui-checkliste-zeile { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
span.ui-checkliste-zeile { cursor: default; }
.ui-checkliste-zeile .form-check-input { margin: .15em 0 0; flex-shrink: 0; width: 1.15em; height: 1.15em; }
.ui-checkliste-zeile > .bi { color: var(--ink-soft); line-height: 1.4; }
.ui-checkliste-punkt.ist-erledigt .ui-checkliste-zeile > .bi { color: var(--ok-ink); }
.ui-checkliste-punkt.ist-erledigt .ui-checkliste-text { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.ui-checkliste-kommentar { margin: 3px 0 0 calc(1.15em + 10px); font-size: .86rem; color: var(--ink-soft); }
.ui-checkliste-punkt.ist-speichert { opacity: .5; }

/* Sprungziele (Schritte-Leiste, ?tab=) nicht unter der Kopfleiste */
[data-abschnitt], .ui-arbeit [id^="schritt-"], .ui-sprungziel { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Anlage: Zustand in der Seitenspalte */
.ui-zustand-gross { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 700; }
.ui-zustand-gross.ist-ok .bi { color: var(--badge-ok); }
.ui-zustand-gross.ist-aus .bi { color: var(--badge-err); }
/* Weitere Zustände für Ui\StatusSection (14.10.2026 abends) */
.ui-zustand-gross.ist-warnung .bi { color: color-mix(in srgb, var(--badge-warn) 78%, #000); }
.ui-zustand-gross.ist-info .bi { color: var(--badge-info); }
.ui-zustand-gross.ist-brand .bi { color: var(--brand); }
.ui-zustand-gross.ist-neutral .bi { color: var(--ink-soft); }
.ui-zustand-notiz { margin: 6px 0 0; color: var(--ink-soft); font-size: .92rem; }

/* Auftrag als Drehscheibe */
.ui-posten-nr { color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-right: 2px; }
.ui-text-klappe { margin-top: 12px; }
.ui-text-klappe > summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.ui-text-klappe > div { margin-top: 6px; font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere; }
.ui-einsatzliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ui-einsatzliste li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; }
.ui-einsatzliste li > :last-child { grid-column: 2; }
.ui-einsatz-datum { font-size: .86rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-einsatzliste li.ist-storniert a { text-decoration: line-through; color: var(--ink-soft); }
.ui-versionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.ui-versionen-titel { font-weight: 700; font-size: .92rem; }

/* Zeiterfassung: ein Tag als Arbeitsseite */
.ui-plan-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ui-plan-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.ui-plan-zeile + .ui-plan-zeile { border-top: 1px solid var(--line); }
.ui-plan-zeile > .bi { color: var(--ink-soft); font-size: 1.05rem; }
.ui-plan-zeile.ist-abwesend > .bi { color: var(--warn-ink); }
.ui-plan-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ui-plan-satz { font-size: .88rem; color: var(--ink-soft); }
/* Art der Leistung als Streifen links - Farben aus den Tokens (hell und dunkel) */
.ui-leistung-zeile { border-left-width: 4px; }
.ui-leistung-zeile.ist-auftrag { border-left-color: var(--badge-info); }
.ui-leistung-zeile.ist-instandhaltung { border-left-color: var(--warn-ink); }
.ui-leistung-zeile.ist-sonstiges { border-left-color: var(--line-strong); }
.ui-leistung-zeile.ist-auftrag .ui-leistung-zeile-titel .bi { color: var(--badge-info); }
.ui-leistung-zeile.ist-instandhaltung .ui-leistung-zeile-titel .bi { color: var(--warn-ink); }
.ui-ok-farbe { color: var(--badge-ok); }
.content-header > .ui-tag-nav { margin-left: auto; }

/* Ausgeblendete Feldgruppen (data-show-when) lassen keine Lücke: die
   Spalte drumherum fällt mit weg - vorher blieb je Gruppe der Abstand
   der Zeile stehen (Instandhaltung anlegen: ~90 px Leere). */
.row > [class*="col"]:has(> [data-show-when]:only-child[style*="display: none"]) { display: none; }
.ui-zustand.ist-fehler { color: var(--err-ink); }
.ui-zustand.ist-fehler::before { background: var(--badge-err); }

/* Kontakt als Visitenkarte */
.ui-visitenkarte-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.ui-visitenkarte-merkmale { color: var(--ink-soft); font-size: .92rem; }
.ui-visitenkarte-liste { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 10px; }
.ui-visitenkarte-liste li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.02rem; }
.ui-visitenkarte-liste li > .bi { color: var(--ink-soft); width: 18px; flex-shrink: 0; line-height: 1.5; }
.ui-visitenkarte-liste a { font-weight: 600; overflow-wrap: anywhere; }
.ui-visitenkarte-karte { font-size: .88rem; margin-left: 6px; }
.ui-beziehungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ui-beziehungen li { display: flex; flex-direction: column; }
.ui-beziehungen a { font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }
.ui-beziehungen span { font-size: .86rem; color: var(--ink-soft); margin-left: 26px; }

/* Disposition: "Was noch fehlt" statt Kennzahlen-Kacheln, Lücken je Einsatz */
.dispo-fehlt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 12px 16px; }
.dispo-fehlt-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.dispo-fehlt-titel { font-weight: 700; }
.dispo-fehlt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dispo-fehlt-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 11px; font-size: .86rem; font-weight: 600; text-decoration: none; border: 1px solid transparent; }
.dispo-fehlt-chip.ist-fehler { background: var(--err-bg); color: var(--err-ink); border-color: color-mix(in srgb, var(--err-ink) 30%, transparent); }
.dispo-fehlt-chip.ist-warnung { background: var(--warn-bg); color: var(--warn-ink); border-color: color-mix(in srgb, var(--warn-ink) 30%, transparent); }
.dispo-fehlt-chip.ist-neutral { background: var(--neutral-tint); color: var(--ink); border-color: var(--line); }
.dispo-fehlt-chip:hover { text-decoration: underline; }
.dispo-fehlt-zahlen { font-size: .86rem; color: var(--ink-soft); }
.ui-zelle-fehlt { display: block; font-size: .8rem; font-weight: 600; color: var(--warn-ink); }
.ui-zelle-vollstaendig { display: block; font-size: .8rem; color: var(--ok-ink); }
.ui-card-meta-row.ist-hinweis { color: var(--warn-ink); }

/* Monatsraster (Abwesenheit, Anwesenheit, Monatsübersicht): die Hülle
   scrollt selbst, damit die Kopfzeile mit den Tagen stehen bleibt -
   mit overflow-x allein wurde die Hülle zum Scroll-Behälter, und der
   sticky Kopf lief mit der Seite davon (bei Zeile 30 wusste man nicht
   mehr, welcher Tag welcher ist). Am Handy nicht: dort stört ein
   Scrollbereich in der Seite mehr, als er hilft. */
@media (min-width: 768px) {
  .ui-kalender-huelle { max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; }
}
/* Kacheln nur mit Titel (z. B. Art der Abwesenheit): kompakter.
   Vier Kacheln mit Satz: 2 x 2 statt 3 + 1. Klassen setzt Ui\Kacheln. */
.ui-kacheln.ist-kompakt { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ui-kacheln.ist-kompakt .ui-kachel { padding-top: 9px; padding-bottom: 9px; align-items: center; }
.ui-kacheln.ist-kompakt .ui-kachel input { margin-top: 0; }
@media (min-width: 576px) {
  .ui-kacheln.ist-vier:not(.ist-kompakt) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Anlage, Übersicht: Schnellaktionen (Tanken, Störung melden, Zählerstand)
   als Reihe aus .ui-buchungsweg-Kacheln - je ein Dialog. Am Handy zwei
   nebeneinander; eine übrige Kachel nimmt die ganze Breite. */
.ui-schnellaktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: 16px; }
.ui-schnellaktionen .ui-buchungsweg { padding: 10px 12px; min-height: 60px; min-width: 0; }
.ui-schnellaktionen .ui-buchungsweg > .bi:first-child {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--brand-tint); color: var(--brand-dark); font-size: 1.1rem;
}
.ui-schnellaktionen .ui-buchungsweg:hover > .bi:first-child { color: var(--brand-dark); }
.ui-schnellaktionen .ist-stoerung > .bi:first-child,
.ui-schnellaktionen .ist-stoerung:hover > .bi:first-child { background: var(--err-bg); color: var(--err-ink); }
.ui-schnellaktionen .ui-buchungsweg-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) {
  .ui-schnellaktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-schnellaktionen > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ui-schnellaktionen .ui-buchungsweg { gap: 10px; }
}

/* Instandhaltung abschließen (Dialog): die Folgen als ruhiger Kasten am
   Ende, damit sie gelesen, aber nicht mit Eingaben verwechselt werden. */
.ui-folgen-kasten { background: var(--canvas); border-radius: var(--radius-sm); padding: 12px 14px; }
.ui-folgen-titel { font-weight: 600; font-size: .86rem; color: var(--ink-soft); margin-bottom: 6px; }
.ui-folgen-kasten .ui-folgen { font-size: .88rem; gap: 6px; }

/* 15.10.2026 material-vorgaenge */
/* Filterleiste (Ui\SearchFilter): Auswahl mit Suchdialog und Datumsfelder.
   Die Beschriftung der Suchauswahl nur für Vorleser - in der Leiste steht
   sie im leeren Eintrag, wie bei den anderen Auswahlfeldern. */
.ui-filter-suchselect { flex: 0 1 220px; min-width: 0; }
.ui-filter-suchselect .form-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ui-filter-datum { flex: 0 1 190px; width: auto; flex-wrap: nowrap; }
.ui-filter-datum .input-group-text { min-width: 46px; justify-content: center; }
@media (max-width: 575.98px) {
  .ui-filter-suchselect, .ui-filter-datum { flex: 1 1 100%; }
}
/* Lagervorgänge: zweite Zeile je Vorgang (wer, wie lange offen,
   Instandhaltung) und "Offene abschließen" über der Liste. */
.ui-vorgang-meta { color: var(--ink-soft); font-size: .8rem; margin-top: -4px; }
.ui-vorgang-meta .ist-hinweis { color: var(--warn-ink); font-weight: 600; }
.ui-vorgang-sammel { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-bottom: 10px; }
/* Terminal, Wareneingang: Lieferschein-Nr. und "Ohne Lieferschein" untereinander */
.t-feld-gruppe { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* 15.10.2026 personal */
/* Abwesenheitsauswertung und Urlaubskonto: Zeilen "Art ... Wert". Die
   Klassen gab es im Markup schon, aber ohne Regeln - alles lief als
   Fließtext durch. */
.ui-abw-liste { display: flex; flex-direction: column; }
.ui-abw-zeile {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-top: 1px solid var(--line);
}
.ui-abw-zeile:first-child { border-top: 0; }
.ui-abw-zeile.ist-summe { border-top: 2px solid var(--line-strong); font-weight: 600; }
.ui-abw-zeile.ist-minus .ui-abw-wert { color: var(--err-ink); }
.ui-abw-punkt { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; align-self: center; }
.ui-abw-art { flex: 1 1 auto; min-width: 0; }
.ui-abw-hinweis { display: block; font-size: .78rem; color: var(--ink-soft); font-weight: 400; }
.ui-abw-wert { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.ui-abw-trenner { color: var(--ink-soft); margin: 0 6px; }
.ui-abw-laufend {
  font-size: .76rem; font-weight: 600; color: var(--ink-soft);
  background: var(--neutral-tint); border-radius: var(--radius-sm); padding: 2px 8px; margin-left: 8px;
}
/* Akte, Reiter Abwesenheiten: Resturlaub als eine ruhige Zeile über der Liste */
.ui-urlaub-kurz { margin: 0 0 10px; font-size: .92rem; }
.ui-urlaub-kurz .bi { color: var(--brand-dark); }
.ui-urlaub-kurz a { margin-left: 6px; }
/* Arbeitszeit & Sätze: was der Leistungserfassung fehlt, rot wie "kein Plan" */
.ui-zuo-fehlt { display: block; font-size: .76rem; color: #dc3545; white-space: nowrap; }
/* Urlaubskonten */
.ui-urlaub-tabelle td.text-end, .ui-urlaub-jahr { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-urlaub-jahr { font-size: .84rem; color: var(--ink-soft); }
.ui-urlaub-eingabe { width: 90px; margin-left: auto; text-align: right; }
/* Status ändern: "Vor dem Austritt klären" */
.ui-austritt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ui-austritt-liste li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.ui-austritt-liste li > .bi { color: var(--ok-ink); margin-top: 2px; }
.ui-austritt-liste li.ist-offen > .bi { color: var(--warn-ink); }

/* 15.10.2026 material-artikel */
/* Lagervorgang: mehrere Artikel tragen den gescannten Barcode - zur Wahl unter dem Scanfeld */
.ui-vorgang-scan-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; font-weight: 400; }
.ui-vorgang-scan-wahl .btn { text-align: left; white-space: normal; }

/* 15.10.2026 auftrag */
/* Auswahlliste zum Ankreuzen (Abrechnung, Übergabe): Titel und Untertitel
   untereinander wie in der SimpleList - als <span> liefen sie sonst in
   einer Zeile ineinander ("Aushub15.10.2026 · LFS-…"). */
.ui-auswahl-item .ui-simple-list-title,
.ui-auswahl-item .ui-simple-list-subtitle { display: block; }
/* Am Handy: ein Abzeichen ("Schon von Hand abgerechnet?") in eine eigene
   Zeile unter den Text - sonst drückt es den Text auf einen Buchstaben
   Breite zusammen. */
@media (max-width: 575.98px) {
  .ui-auswahl-item:has(> .ui-badge) { flex-wrap: wrap; }
  .ui-auswahl-item:has(> .ui-badge) > .ui-simple-list-body { flex: 1 1 calc(100% - 175px); }
  .ui-auswahl-item > .ui-badge { order: 10; margin-left: 60px; white-space: normal; }
}

/* 15.10.2026 leistungen */
/* Monatsabschluss: Zeilen mit offenen oder fehlenden Tagen hervorheben;
   die Summenzeile am Handy wie die Zeilen mit Beschriftung. */
.ui-monatsabschluss tr.ist-problem td { background: var(--warn-bg); }
.ui-monatsabschluss td { white-space: nowrap; }
.ui-monatsabschluss th { white-space: normal; }
.ui-monatsabschluss td.ui-posten-haupt { white-space: normal; }
@media (max-width: 575.98px) {
  .ui-monatsabschluss tbody tr.ist-problem { background: var(--warn-bg); padding-left: 8px; padding-right: 8px; border-radius: var(--radius-sm); }
  .ui-monatsabschluss tbody tr.ist-problem td { background: transparent; }
  .ui-monatsabschluss tbody td.ui-posten-aktion { flex: 1 1 100%; margin-left: 0; padding-top: 4px; }
  .ui-monatsabschluss tfoot tr { flex-wrap: wrap; justify-content: flex-start; gap: 2px 16px; }
  .ui-monatsabschluss tfoot td:first-child { flex: 1 1 100%; }
  .ui-monatsabschluss tfoot td[data-label]::before { content: attr(data-label) " "; color: var(--ink-soft); font-size: .8rem; font-weight: 400; }
}
/* Sammelgenehmigung: Weg zum Tag rechts in der Auswahlzeile */
.ui-sg-oeffnen { flex-shrink: 0; color: var(--ink-soft); padding: 4px 2px 4px 6px; }
.ui-sg-oeffnen:hover { color: var(--brand); }