/* Schrift: Source Sans 3 (Adobe, SIL Open Font License 1.1 - siehe
   assets/fonts/OFL-source-sans-3.txt), selbst ausgeliefert (CSP
   font-src 'self'). Eine variable Datei je Zeichensatz deckt alle
   Stärken ab. Seit 14.10.2026 (UI-Runde 2). */
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-display: swap; font-weight: 200 900; src: url('../fonts/source-sans-3-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-display: swap; font-weight: 200 900; src: url('../fonts/source-sans-3-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-display: swap; font-weight: 200 900; src: url('../fonts/source-sans-3-latin-ext-wght-italic.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Source Sans 3'; font-style: italic; font-display: swap; font-weight: 200 900; src: url('../fonts/source-sans-3-latin-wght-italic.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  /* CI-Orange: Original-Ton beibehalten, dafür dunkler statt
     weißer Text auf vollflächigen Elementen (Buttons, Avatar,
     aktive Pagination) -> WCAG-Kontrast ~8.2:1 statt ~2.1:1 */
  --brand: #FE9D03;
  --brand-dark: #DB8500;
  --brand-contrast: #241a05;
  --brand-tint: #fff4e2;

  /* Graustufen mit leichtem Blaustich passend zum Anthrazit-Rahmen
     (RAL 7016-Ton) - seit UI-Runde 2, 14.10.2026 */
  --ink: #1b1f23;
  --ink-soft: #5c656e;
  --line: #dce1e6;
  --surface: #ffffff;
  --canvas: #eceff2;

  /* Rahmen (Kopf, Menü, untere Leiste am Handy): Anthrazit. Orange
     leuchtet darauf wie eine Warnleuchte - Hauptaktion, aktives Menü. */
  --frame: #2b3136;
  --frame-2: #353c42;
  --frame-ink: #e9ecef;
  --frame-soft: #a0a9b2;
  --frame-hover: rgba(255, 255, 255, .07);
  --frame-line: rgba(255, 255, 255, .10);

  /* Eine Schrift für alles; Zahlen in Tabellen gleich breit */
  --font-ui: 'Source Sans 3', 'Segoe UI', Roboto, Arial, sans-serif;

  /* Zustände als getönte Flächen mit dunkler Schrift (Etiketten, Hinweise) */
  --ok-bg: #e2f3e7;   --ok-ink: #12622f;
  --warn-bg: #fff0d4; --warn-ink: #7a4800;
  --err-bg: #fde3e1;  --err-ink: #a51d17;
  --info-bg: #e2ecfb; --info-ink: #1d4fb8;
  --brand-soft-bg: #ffe9c4; --brand-soft-ink: #6e4200;
  /* Etiketten: Zustand voll gefärbt, Eigenschaft getönt (ui-erweiterungen.css) */
  --badge-ok: #1d7a46; --badge-err: #c42b23; --badge-info: #2459c4;
  --badge-warn: #f4c021; --badge-warn-ink: #3a2a00; --badge-brand-rand: #f5b54a;

  --header-h: 60px;
  --sidebar-w: 240px;

  /* Radius-Skala: bewusst gestuft statt überall gleich –
     kleine Elemente knapper, Flächen großzügiger. */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;

  /* Linker Akzentbalken - seit 14.10.2026 nur noch für das AKTIVE
     Element (Menüpunkt, Bereich, "Mehr"-Eintrag). Vorher trug ihn alles
     Klickbare, und wo alles orange ist, hebt Orange nichts mehr hervor.
     Orange bleibt der Hauptaktion und dem aktiven Menü; klickbare
     Flächen zeigen sich über Rand und Pfeil, Rot heißt dringend. */
  --accent-w: 3px;

  /* Neutrale Fläche für Symbolfelder (Listen, Kacheln, Detailkopf) und
     ein kräftigerer Rand für "darüber" (hover) - statt Orange. */
  --neutral-tint: #eef1f4;
  --line-strong: #b8c0c8;
}

/* Dark Mode – wird über [data-bs-theme="dark"] auf <html> aktiviert */
[data-bs-theme="dark"] {
  --brand-tint: rgba(254, 157, 3, 0.16);

  --ink: #e6e9ec;
  --ink-soft: #9aa3ac;
  --line: #333a41;
  --surface: #22272c;
  --canvas: #1a1e22;
  --neutral-tint: #2b3137;
  --line-strong: #4b545d;

  --frame: #15181b;
  --frame-2: #1f2327;
  --frame-ink: #e6e9ec;
  --frame-soft: #8f98a1;

  --ok-bg: rgba(34, 160, 80, .18);   --ok-ink: #7fd69c;
  --warn-bg: rgba(245, 158, 11, .18); --warn-ink: #f6c56b;
  --err-bg: rgba(220, 38, 38, .20);  --err-ink: #f59a94;
  --info-bg: rgba(37, 99, 235, .20); --info-ink: #9dbcf5;
  --brand-soft-bg: rgba(254, 157, 3, .18); --brand-soft-ink: #ffc46b;
  --badge-ok: #22874f; --badge-err: #d0362d; --badge-info: #2f66d1;
  --badge-warn: #e5b422; --badge-warn-ink: #2b1f00; --badge-brand-rand: rgba(254, 157, 3, .5);
}

/* Bootstraps Standard-outline-secondary (#6c757d) sah im normalen UND
   im deaktivierten Zustand fast identisch aus - Nutzerrückmeldung war
   entsprechend, dass anklickbare Buttons wie deaktiviert wirken.
   Eigene Werte mit den bereits vorhandenen Farbtönen: --ink für den
   Normalzustand (kräftig, passt sich Hell/Dunkel automatisch an),
   --ink-soft bleibt für disabled - dadurch jetzt ein echter,
   sichtbarer Unterschied zwischen "klickbar" und "gesperrt", nicht
   nur eine leichte Transparenz auf derselben Farbe. */
.btn-outline-secondary {
  --bs-btn-color: var(--ink);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--canvas);
  --bs-btn-hover-border-color: var(--ink-soft);
  --bs-btn-active-color: var(--ink);
  --bs-btn-active-bg: var(--canvas);
  --bs-btn-active-border-color: var(--ink-soft);
  --bs-btn-disabled-color: var(--ink-soft);
  --bs-btn-disabled-border-color: var(--line);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  --bs-body-font-family: var(--font-ui);
}

a { text-decoration: none; }

/* Bootstrap-Standardanimationen spürbar verkürzen statt eigene Effekte zu bauen */
.fade { transition-duration: .1s; }
.collapsing { transition-duration: .1s; }

/* ---------- Header ---------- */
.app-header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 1030;
  gap: 12px;
}

.header-start {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.app-header .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
}

.app-header .brand .brand-icon {
  flex-shrink: 0;
  display: block;
}

.btn-bereiche {
  background: var(--brand);
  border: 1px solid var(--brand);
  color: var(--brand-contrast);
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.btn-bereiche:hover,
.btn-bereiche:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--brand-contrast);
}

.header-customer-logo {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.header-customer-logo .logo-slot {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 0.85rem;
  padding: 8px 22px;
  background: var(--canvas);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.icon-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 1.1rem;
}
.icon-btn:hover { background: var(--canvas); color: var(--ink); }
/* Der Neu-laden-Knopf ist ein <a>, kein <button> - flex-shrink verhindert,
   dass er in der Kopfleiste schmaler gedrueckt wird als die uebrigen. */
a.icon-btn { flex: 0 0 38px; text-decoration: none; }
/* Kleine Rueckmeldung beim Klick, bis die neue Seite da ist. */
#refreshBtn:active i { transform: rotate(180deg); transition: transform .2s; }

.icon-btn .badge-dot {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  border: 1.5px solid var(--surface);
}

.avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 2px;
}

.avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.avatar-btn .avatar-name {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.1;
}
.avatar-btn 
.avatar-btn .dropdown-menu,
.dropdown-menu {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 6px;
}
.dropdown-menu .dropdown-item {
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  margin-bottom: 8px;
  font-size: 0.88rem;
  transition: background-color .09s ease-out;
}
.dropdown-menu li:last-child .dropdown-item { margin-bottom: 0; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: var(--neutral-tint);
  color: var(--ink);
}

/* ---------- Shell / Sidebar / Content ---------- */
.app-shell {
  display: flex;
  min-height: calc(100vh - var(--header-h));
}

.app-sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 18px 12px;
}

.sidebar-heading {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 0 10px 10px;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.92rem;
  transition: background-color .09s ease-out, color .09s ease-out;
}

.sidebar-nav .nav-link i {
  font-size: 1.05rem;
  color: var(--ink-soft);
  width: 20px;
  text-align: center;
}

.sidebar-nav .nav-link:hover {
  background: var(--neutral-tint);
}

.sidebar-nav .nav-link.active {
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-weight: 700;
  box-shadow: inset var(--accent-w) 0 0 0 var(--brand);
}
.sidebar-nav .nav-link.active i {
  color: var(--brand);
}

.app-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 22px 26px 40px;
}

.content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.content-breadcrumb {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.content-breadcrumb .current {
  color: var(--ink);
  font-weight: 600;
}

.content-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.placeholder-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  height: 100%;
}

.placeholder-card .ph-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-weight: 700;
  margin-bottom: 10px;
}

.skeleton-line {
  height: 10px;
  border-radius: 4px;
  background: var(--canvas);
  border: 1px solid var(--line);
  margin-bottom: 8px;
}
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-80 { width: 80%; }

.stat-value {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat-label {
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.stat-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  background: var(--neutral-tint);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* Bereiche-Modal */
.bereich-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  height: 100%;
  transition: border-color .09s ease-out, background-color .09s ease-out;
}
.bereich-tile:hover {
  border-color: var(--line-strong);
  background: var(--canvas);
  color: var(--ink);
}
.bereich-tile .bereich-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
  background: var(--neutral-tint);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.bereich-tile.is-active .bereich-icon { background: var(--brand); color: var(--brand-contrast); }
.bereich-tile.is-active {
  border-color: var(--brand);
  background: var(--brand-tint);
  box-shadow: inset var(--accent-w) 0 0 0 var(--brand);
}
.bereich-tile .bereich-name {
  font-weight: 700;
  font-size: 0.98rem;
}
.bereich-tile .bereich-desc {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---------- Bottom-Navigation (Mobile) ---------- */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 68px;
  padding: 8px 4px 10px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}
.bottom-nav-item i { font-size: 1.4rem; }
.bottom-nav-item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bottom-nav-item.active { color: var(--brand-dark); }
.bottom-nav-item:active { background: var(--canvas); }

/* "Mehr" – volle Bildschirmfläche statt kleinem Sheet.
   !important + vh-Fallback, damit Bootstraps Standardhöhe (30vh) für
   .offcanvas-bottom sicher überschrieben wird, auch falls dvh nicht
   unterstützt wird. */
.mehr-offcanvas {
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
}
.mehr-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
  flex-shrink: 0;
}
.mehr-offcanvas .offcanvas-title {
  font-weight: 700;
  font-size: 1.15rem;
}
.mehr-offcanvas .offcanvas-body {
  padding: 20px;
  flex: 1 1 auto;
  overflow-y: auto;
}
.mehr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.mehr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 8px;
  min-height: 90px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}
.mehr-item i { font-size: 1.6rem; color: var(--ink-soft); }
.mehr-item.active {
  border-color: var(--brand);
  background: var(--brand-tint);
  color: var(--brand-dark);
  box-shadow: inset var(--accent-w) 0 0 0 var(--brand-dark);
}
.mehr-item.active i { color: var(--brand); }

/* ---------- Theme-Switch (Light/Dark) ---------- */
.theme-toggle .bi-sun { display: none; }
[data-bs-theme="dark"] .theme-toggle .bi-sun { display: inline-block; }
[data-bs-theme="dark"] .theme-toggle .bi-moon { display: none; }

/* ==========================================================
   UI-KIT – wiederverwendbare Bausteine
   (Card, CardGrid, SearchFilter, Pagination, List-/Detail-/Formular-Template)
   ========================================================== */

.btn-brand {
  background: var(--brand);
  border: 1px solid var(--brand);
  color: var(--brand-contrast);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-brand:hover, .btn-brand:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--brand-contrast);
}

/* Grüner "Erfolg"-Button, z.B. "Tag abschließen" - eigener,
   wiederverwendbarer Baustein statt Inline-Style, spiegelt exakt den
   Aufbau von .btn-brand. */
.btn-success {
  background: #198754;
  border: 1px solid #198754;
  color: #ffffff;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-success:hover, .btn-success:focus {
  background: #157347;
  border-color: #146c43;
  color: #ffffff;
}

/* ---------- Datums-Navigator ----------
   Zentriertes Datum mit schmalen Pfeil-Buttons links/rechts, statt
   einer einzelnen Vortag/Folgetag-Zeile, die bei fehlendem Folgetag
   (z.B. am heutigen Tag) unausgewogen mit viel Leerraum wirkt (siehe
   Absprache) - v.a. auf schmalen Bildschirmen relevant. */
.ui-date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.ui-date-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color .09s ease-out, background .09s ease-out;
}
.ui-date-nav-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
.ui-date-nav-btn-hidden { visibility: hidden; }
.ui-date-nav-label {
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  min-width: 160px;
}

/* Bug #5: größere Variante für die tägliche Leistungserfassung -
   größere Touch-Ziele, größere Datumsschrift, mehr Präsenz. */
.ui-date-nav-lg { margin-bottom: 20px; }
.ui-date-nav-btn-lg {
  width: 48px;
  height: 48px;
}
.ui-date-nav-label-lg {
  font-size: 1.3rem;
  min-width: 200px;
}
.ui-tageskarte {
  padding: 22px;
  border-radius: 18px;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(22,28,45,0.04), 0 10px 28px rgba(22,28,45,0.07);
  position: relative;
  overflow: hidden;
}
/* Dezenter Farbakzent oben am Rand - der Hauch von "gestaltet" statt
   "reine Datenbox", ohne aufdringlich zu sein (Bug-Nachtrag: "sieht
   billig aus" - flache 1px-graue-Kante wirkte wie ein reines
   Formularfeld, kein bewusst gestaltetes Element). */
.ui-tageskarte::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--line);
}

/* Monatsnavigation (Bug-Nachtrag: "Meine Tagesberichte nach Monat
   gruppieren, Pfeiltasten + Vollständigkeits-Fortschritt") - gleiches
   Karten-Grundgerüst wie die Tageskarte, aber mit Pfeilen + Monat/Jahr-
   Picker statt Tages-Pfeilen. */
.ui-month-nav {
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(22,28,45,0.04), 0 10px 28px rgba(22,28,45,0.07);
}
.ui-month-nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ui-month-nav-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  transition: background .09s ease-out;
}
.ui-month-nav-btn:hover { background: var(--canvas); }
.ui-month-nav-label {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--ink);
  /* Bug-Nachtrag "Monatsumschaltung: Text springt" - 140px reichte für
     die längsten deutschen Monatsnamen ("September"/"Dezember" +
     Jahreszahl) bei dieser Schriftgröße/-stärke nicht immer sicher aus,
     wodurch sich die Breite je nach Monat minimal verschob und alles
     danach (Picker, "Heute"-Button) mitverschoben wurde. Grosszügiger
     bemessen, damit JEDER Monatsname exakt gleich viel Platz bekommt. */
  min-width: 175px;
  text-align: center;
}
.ui-month-nav-picker {
  width: auto;
  max-width: 150px;
  margin-left: auto;
}
.ui-month-nav-progress {
  margin-top: 14px;
}
@media (max-width: 575.98px) {
  .ui-month-nav-label { font-size: 1.05rem; min-width: 0; flex: 1; order: -1; width: 100%; }
  .ui-month-nav-picker { max-width: 130px; }
}
.ui-ueberstunden-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef0ff;
  color: #4c3fb0;
  font-weight: 700;
  font-size: 0.85rem;
}

/* "Historie dieses Tages" & Ähnliches - kleiner, eigenständiger Chip
   statt nackter Textlink (Bug-Nachtrag "sieht billig aus"). */
.ui-history-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--canvas);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  border: 1px solid var(--line);
  transition: background .1s ease-out;
}
.ui-history-chip:hover { background: var(--brand-tint); color: var(--brand-dark); border-color: var(--brand); }

/* Mehrfacherfassung (Leistungen/IH) - Zeilen mit mehreren Feldern
   nebeneinander auf Desktop, gestapelt auf Mobile. */
.ui-mehrfach-kopf {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 1.6fr 1.6fr 40px;
  gap: 8px;
  padding: 0 2px 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ui-mehrfach-zeile {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 1.6fr 1.6fr 40px;
  gap: 8px;
  align-items: start;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.ui-mehrfach-zeile:last-child { border-bottom: none; }
.ui-mehrfach-zeile-error { background: rgba(220,53,69,0.05); border-radius: var(--radius-sm); }
.ui-mehrfach-zeile .invalid-feedback {
  grid-column: 1 / -1;
  margin-top: -2px;
}
@media (max-width: 767.98px) {
  .ui-mehrfach-zeile {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "emp emp" "hrs remove" "desc desc" "loc loc";
    gap: 6px;
    padding: 12px 2px;
    border-bottom: 2px solid var(--line);
  }
  .ui-mehrfach-zeile select { grid-area: emp; }
  .ui-mehrfach-zeile input[type=number] { grid-area: hrs; }
  .ui-mehrfach-zeile input[name*="[description]"] { grid-area: desc; }
  .ui-mehrfach-zeile input[name*="[location_note]"] { grid-area: loc; }
  .ui-mehrfach-zeile button { grid-area: remove; justify-self: end; }
}

/* Einzelne Position (buchung-position-formular.php): Artikel-Scan-Feld
   mit Kamera-Button daneben. */
.ui-material-artikel-feld {
  display: flex;
  gap: 4px;
  align-items: center;
}
.ui-material-artikel-feld input { flex: 1; min-width: 0; }

/* Kamera-Scan-Modal (Massenbuchung) */
.ui-qr-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.ui-qr-modal-inner {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  max-width: 420px;
  width: 92%;
  text-align: center;
}
.ui-qr-modal-inner video {
  width: 100%;
  border-radius: var(--radius);
  background: #000;
}
@media (max-width: 575.98px) {
  .ui-date-nav-label-lg { font-size: 1.15rem; min-width: 0; flex: 1; }
  .ui-tageskarte { padding: 16px; }
}

/* Leistungs-Zeilen (Bug #5) - eigene, optisch klarere Darstellung
   statt der generischen SimpleList: farbiger Streifen je Art, große
   Stundenzahl als Blickfang links, mehr Luft zwischen den Zeilen. */
.ui-leistungen-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ui-leistung-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(22,28,45,0.03);
  transition: border-color .12s ease-out, box-shadow .12s ease-out, transform .12s ease-out;
}
.ui-leistung-zeile:hover {
  box-shadow: 0 4px 14px rgba(22,28,45,0.09);
  transform: translateY(-1px);
}
.ui-leistung-zeile-stunden {
  font-family: var(--font-ui);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--ink);
  flex-shrink: 0;
  min-width: 64px;
  text-align: center;
  line-height: 1.1;
}
.ui-leistung-zeile-stunden span {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.ui-leistung-zeile-body { flex: 1; min-width: 0; }
.ui-leistung-zeile-titel {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}
.ui-leistung-zeile-text {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .ui-leistung-zeile { padding: 12px; gap: 10px; }
  .ui-leistung-zeile-stunden { font-size: 1.2rem; min-width: 52px; }
}

.content-actions .btn { white-space: nowrap; }

/* ---------- Badge ---------- */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  line-height: 1.4;
  white-space: nowrap;
}
.ui-badge-brand     { background: var(--brand); color: var(--brand-contrast); }
.ui-badge-success   { background: #15803d; color: #ffffff; }
.ui-badge-warning   { background: #f59e0b; color: #241a05; }
.ui-badge-danger    { background: #dc2626; color: #ffffff; }
.ui-badge-info      { background: #2563eb; color: #ffffff; }
.ui-badge-secondary { background: var(--ink-soft); color: var(--surface); }

/* ---------- Card ----------
   Statisch (div.ui-card): reine Anzeige, neutraler Rahmen, kein Akzent.
   Klickbar (a.ui-card): führt immer irgendwohin -> linker CI-Akzentbalken
   + Chevron als durchgängiges Signal "das hier ist bedienbar". */
.ui-card {
  display: block;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  height: 100%;
  color: var(--ink);
}

a.ui-card {
  padding-right: 34px;
  transition: box-shadow .09s ease-out, border-color .09s ease-out;
}
a.ui-card::after {
  content: "\F285"; /* bi-chevron-right */
  font-family: "bootstrap-icons", sans-serif;
  font-weight: normal;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 1rem;
  color: var(--ink-soft);
  opacity: 0.7;
}
a.ui-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
a.ui-card:hover::after { color: var(--ink); opacity: 1; }

.ui-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.ui-card-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  background: var(--neutral-tint);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}
.ui-card-headtext { flex: 1 1 auto; min-width: 0; }
.ui-card-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-card-subtitle {
  font-size: 0.82rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-card-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ui-card-meta { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.ui-card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.ui-card-meta-row i { color: var(--ink-soft); width: 16px; text-align: center; }
.ui-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.ui-card-footer-right { font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; }

.ui-empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.ui-empty-state i { font-size: 2rem; display: block; margin-bottom: 10px; }

/* ---------- Filterleiste ---------- */
.ui-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 16px;
}
.ui-filter-search {
  position: relative;
  flex: 1 1 220px;
}
.ui-filter-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
}
.ui-filter-search input { padding-left: 34px; }
.ui-filter-select { flex: 0 1 200px; }
.ui-filter-reset {
  font-size: 0.85rem;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.ui-filter-reset:hover { color: var(--ink); }

/* Am Desktop immer ausgeklappt, unabhängig vom Bootstrap-Collapse-
   Zustand (überschreibt dessen inline height/visibility) - am Mobile
   bleibt das normale Collapse-Verhalten (Standard: eingeklappt). */
@media (min-width: 992px) {
  .ui-filter-collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }
  .ui-filter-toggle { display: none !important; }
}
.ui-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.ui-filter-toggle .bi-chevron-down { transition: transform .15s ease-out; font-size: 0.8rem; }
.ui-filter-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.ui-filter-toggle-badge {
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 7px;
  line-height: 1.4;
}

/* ---------- Pagination ---------- */
.ui-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.ui-pagination-info { font-size: 0.82rem; color: var(--ink-soft); }
.ui-pagination .page-link {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface);
}
.ui-pagination .page-item.active .page-link {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
}
.ui-pagination .page-item.disabled .page-link {
  color: var(--ink-soft);
  background: var(--canvas);
}

.ui-stat-tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}

a.ui-stat-tile {
  padding-right: 30px;
  transition: box-shadow .09s ease-out, border-color .09s ease-out;
}
a.ui-stat-tile::after {
  content: "\F285"; /* bi-chevron-right */
  font-family: "bootstrap-icons", sans-serif;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
a.ui-stat-tile:hover {
  border-color: var(--line-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
a.ui-stat-tile:hover::after { color: var(--ink); }

/* Zustands-Variante für Kacheln, die auf ein Problem hinweisen (siehe
   StatBar::tile() $variant) - roter statt orangener Akzent, dezent
   getöntes Icon-Feld, damit es im Dashboard sofort auffällt statt im
   Kachel-Einheitsbrei unterzugehen.

   WICHTIG: "a.ui-stat-tile.ui-stat-tile-attention" (nicht nur
   ".ui-stat-tile-attention") für die box-shadow-Aufhebung - eine
   klickbare Kachel ist immer ein <a>, und die Basisregel
   "a.ui-stat-tile" (Element+Klasse, Spezifität 0-1-1) würde eine
   reine Klassen-Regel (0-1-0) sonst unabhängig von der Reihenfolge im
   Stylesheet ausstechen. */
.ui-stat-tile-attention {
  border-left: 4px solid #dc2626;
}
a.ui-stat-tile.ui-stat-tile-attention {
  box-shadow: none;
}
.ui-stat-tile-attention .stat-icon { background: #fee2e2; color: #b91c1c; }
a.ui-stat-tile.ui-stat-tile-attention:hover {
  border-color: #b91c1c;
  border-left-width: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
a.ui-stat-tile-attention:hover::after { color: #b91c1c; }


/* ---------- Modul-Kopfband ----------
   Kompaktere Alternative zur großen Foto-Hero - für Modul-
   Einstiegsseiten ohne KPI-Kacheln (z.B. die Fahrer-Ansicht "Meine
   Fahrzeuge"), die trotzdem mehr Präsenz als eine reine <h1>
   brauchen. CI-Verlauf, großes Icon, optionaler Kontext-Text. */
.ui-module-header {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ink);
}
.ui-module-header-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--neutral-tint);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.ui-module-header-title {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
}
.ui-module-header-sub {
  font-size: 0.88rem;
  margin: 2px 0 0;
  opacity: 0.85;
}

/* Foto-Köpfe (Startseite, Modul-Übersichten) entfernt 14.10.2026 -
   die Seiten haben einen schlichten Titel; die Kennzahlen stehen
   sofort oben. */

/* ---------- Detailseite ---------- */
.ui-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.ui-back-link:hover { color: var(--brand-dark); }

.ui-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}
.ui-detail-head-left { display: flex; align-items: flex-start; gap: 14px; }
.ui-detail-avatar {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: var(--radius-lg);
  background: var(--neutral-tint);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.3rem;
}
.ui-detail-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ui-detail-title-row .content-title { margin: 0; }
.ui-detail-subtitle { color: var(--ink-soft); font-size: 0.9rem; margin-top: 2px; }

.ui-card-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}
.ui-card-section-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-weight: 700;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
}
.ui-info-rows { display: flex; flex-direction: column; }

/* ---------- StatusSection (Statuswechsel auf Detailseiten) ---------- */
.ui-status-current { margin-bottom: 12px; }
.ui-status-transitions { display: flex; gap: 8px; flex-wrap: wrap; }
.ui-status-empty { color: var(--ink-soft); font-size: 0.85rem; margin: 0; }

/* ---------- HistoryPageTemplate ---------- */
.ui-history-list { display: flex; flex-direction: column; gap: 10px; }
.ui-history-entry {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.ui-history-entry-static { display: flex; gap: 12px; align-items: flex-start; }
.ui-history-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.ui-history-icon-success { background: rgba(21, 128, 61, 0.14); color: #15803d; }
.ui-history-icon-danger  { background: rgba(185, 28, 28, 0.14); color: #b91c1c; }
.ui-history-icon-brand   { background: var(--brand-tint); color: var(--brand-dark); }
.ui-history-note { font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.ui-history-meta { color: var(--ink-soft); font-size: 0.8rem; margin-top: 2px; }

.ui-history-entry-expandable > summary {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.ui-history-entry-expandable > summary::-webkit-details-marker { display: none; }
.ui-history-chevron {
  margin-left: auto;
  align-self: center;
  color: var(--ink-soft);
  transition: transform .15s ease;
  flex-shrink: 0;
}
.ui-history-entry-expandable[open] .ui-history-chevron { transform: rotate(180deg); }
.ui-history-diff {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ui-history-diff-row {
  display: grid;
  grid-template-columns: minmax(100px, 160px) 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
}
.ui-history-diff-label { color: var(--ink-soft); font-weight: 600; }
.ui-history-diff-old { color: var(--ink-soft); text-decoration: line-through; }
.ui-history-diff-new { color: var(--ink); font-weight: 600; }
@media (max-width: 575.98px) {
  .ui-history-diff-row { grid-template-columns: 1fr; gap: 2px; }
  .ui-history-diff-old, .ui-history-diff-new { text-decoration: none; }
}

/* ---------- Startseite (Vorschläge) ---------- */
.ui-start-question h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}
.ui-suggestion-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 26px 12px;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .09s ease-out;
}
.ui-suggestion-tile:hover { border-color: var(--brand); }
.ui-suggestion-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.ui-suggestion-label { font-weight: 600; font-size: 0.88rem; color: var(--ink); }

/* ---------- Startseiten-Assistent ---------- */
.ui-assistant-intro {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 18px 0 16px;
}
.ui-assistant-avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: var(--canvas);
  border: 2px solid var(--brand);
  flex-shrink: 0;
}
.ui-assistant-text strong { display: block; color: var(--ink); font-size: 1.15rem; }

/* Bootstraps Standard-Akkordeon-Optik (eigene Blau-/Schatten-Werte)
   weicht stark vom Rest des Systems ab - hier auf die bestehenden
   Karten-/Randfarben umgestellt, damit es wie ein Teil des Systems
   aussieht, nicht wie ein Fremdkörper. */
.ui-assistant-accordion .accordion-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius) !important;
  margin-bottom: 10px;
  overflow: hidden;
}
.ui-assistant-accordion .accordion-button {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: none !important;
}
.ui-assistant-accordion .accordion-button:not(.collapsed) {
  background: var(--brand-tint);
  color: var(--brand-dark);
}
.ui-assistant-accordion .accordion-button::after { filter: none; }
.ui-assistant-accordion .accordion-body { background: var(--canvas); padding: 14px; }

/* ---------- ConfirmPageTemplate ---------- */
.ui-confirm-section { text-align: center; padding: 32px 24px; }
.ui-confirm-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(185, 28, 28, 0.12);
  color: #b91c1c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.ui-confirm-question { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.ui-confirm-warning { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 22px; }
.ui-confirm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- WeekScheduleSection ---------- */
.ui-week-add {
  margin-left: auto;
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 600;
  color: var(--brand-dark);
  text-decoration: none;
}
.ui-week-add:hover { text-decoration: underline; }
.ui-card-section-title:has(.ui-week-add) { display: flex; align-items: center; }
.ui-week-row {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
}
.ui-week-row:last-child { border-bottom: none; }
.ui-week-day { width: 100px; flex-shrink: 0; font-weight: 600; color: var(--ink); }
.ui-week-entries { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ui-week-entry { display: flex; align-items: center; gap: 8px; }
.ui-week-note { color: var(--ink-soft); }
.ui-week-empty { color: var(--ink-soft); }
.ui-week-actions { margin-left: auto; display: flex; gap: 8px; }
.ui-week-actions a { color: var(--ink-soft); }
.ui-week-actions a:hover { color: var(--brand-dark); }

/* ---------- NotesTimeline ---------- */
.ui-notes-empty { color: var(--ink-soft); font-size: 0.88rem; margin: 0; }
.ui-notes-entry {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.ui-notes-entry:last-child { border-bottom: none; }
.ui-notes-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ui-notes-meta { color: var(--ink-soft); font-size: 0.8rem; }
.ui-notes-actions { margin-left: auto; display: flex; gap: 8px; }
.ui-notes-actions a { color: var(--ink-soft); }
.ui-notes-actions a:hover { color: var(--brand-dark); }
.ui-notes-content { font-size: 0.9rem; color: var(--ink); white-space: normal; }

/* ---------- DetailTabs ---------- */
.ui-detail-tabs-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.ui-detail-tabs {
  margin-bottom: 0;
  gap: 6px;
  border-bottom: none;
  padding-bottom: 0;
}
.ui-detail-tabs .nav-link {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ui-detail-tabs .nav-link.active {
  background: var(--brand);
  color: var(--brand-contrast);
}
.ui-detail-tabs .nav-link:not(.active):hover { background: var(--canvas); }
.ui-tab-count {
  background: rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.72rem;
}
.ui-detail-tabs .nav-link.active .ui-tab-count { background: rgba(255,255,255,0.3); }

/* Überlauf-Tabs: bleiben als echte, funktionsfähige Bootstrap-Trigger
   im Markup (siehe DetailTabs.php-Kommentar), werden aber nie direkt
   als Pille gezeigt - nur über das "Mehr"-Dropdown oder das mobile
   Volltext-Dropdown erreichbar. */
.ui-tab-overflow-item { display: none; }

/* "Mehr"-Button - optisch wie eine Pille, damit er sich nahtlos in
   die Leiste einfügt, wechselt aber auf Icon/Text des aktiven Tabs,
   sobald ein Überlauf-Tab ausgewählt ist (siehe ui.js). */
.ui-detail-tabs-more { flex-shrink: 0; }
.ui-detail-tabs-more .nav-link {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.88rem;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
}
.ui-detail-tabs-more .nav-link:hover { background: var(--canvas); }
.ui-detail-tabs-more .nav-link.active {
  background: var(--brand);
  color: var(--brand-contrast);
}

/* Dropdown für die Tab-Auswahl - standardmäßig ausgeblendet, kommt
   erst auf Mobile zum Einsatz (siehe Media Query unten). */
.ui-detail-tabs-dropdown { display: none; }

/* Auffällige Amber-Optik statt generischem Bootstrap-Grau (siehe
   Kommentar in DetailTabs.php) - diese Klassen wurden dort bereits
   referenziert, hatten aber nie eigenes CSS, wodurch der Button
   bislang wie plainer Bootstrap-Standard aussah ("sieht nicht gut
   aus"). Muss klar als Menü erkennbar sein, nicht als reine Anzeige. */
.ui-detail-tabs-dropdown-toggle {
  background: var(--brand-tint);
  border: 1px solid var(--brand);
  color: var(--brand-dark, #8a5a00);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ui-detail-tabs-dropdown-toggle:hover,
.ui-detail-tabs-dropdown-toggle:focus {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand-dark, #8a5a00);
}
.ui-detail-tabs-dropdown-toggle::after {
  margin-left: auto;
}
.ui-detail-tabs-dropdown-praefix {
  font-weight: 600;
  opacity: 0.75;
  font-size: 0.85rem;
}

/* Mobile: Pillen-Leiste (inkl. eines eventuellen "Mehr") durch ein
   Bootstrap-Dropdown ersetzen (selber Stil wie der "Mehr"-Button auf
   Detailseiten) - zeigt immer den vollen Text der aktuellen Auswahl,
   kein Rätselraten wie bei reinen Icons, passt garantiert in eine
   Zeile ohne Wischen oder Umbruch. */
@media (max-width: 575.98px) {
  .ui-detail-tabs-dropdown {
    display: block;
    margin-bottom: 16px;
  }
  .ui-detail-tabs-row { display: none; }
  /* Größere Touch-Ziele als der Standard-Dropdown-Eintrag - hier
     tippt man am Handy häufig und mit dem Daumen, nicht mit der Maus. */
  .ui-detail-tabs-dropdown .dropdown-item {
    padding: 13px 12px;
    font-size: 0.95rem;
  }
  /* Bootstrap-Standard ist Blau - hier auf die Markenfarbe umgefärbt,
     sonst sticht die aktive Auswahl in der falschen Farbe hervor. */
  .ui-detail-tabs-dropdown .dropdown-item.active {
    background-color: var(--brand);
    color: var(--brand-contrast);
  }
  .ui-detail-tabs-dropdown .dropdown-item:hover:not(.active) {
    background-color: var(--brand-tint);
  }
}

/* ---------- Zähler-Karte (Übersicht-Tab, Anlagen) ----------
   Wiederverwendet stat-icon/stat-value/stat-label direkt (dieselbe
   Optik wie die Dashboard-Kacheln) statt eigener neuer Bausteine -
   macht auf einen Blick als "das ist eine Kennzahl" erkennbar. */
.ui-counter-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ui-counter-card-main {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.ui-counter-card-main:hover .stat-value { color: var(--brand-dark); }
.ui-counter-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ui-counter-card-info .stat-label { display: flex; align-items: center; gap: 6px; }
.ui-counter-card-info .stat-value { font-size: 1.4rem; transition: color .09s ease-out; }

/* ---------- SimpleList ---------- */
.ui-simple-list { display: flex; flex-direction: column; gap: 6px; }
.ui-simple-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .09s ease-out;
}
.ui-simple-list-item:hover { border-color: var(--line-strong); }
.ui-simple-list-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--neutral-tint);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ui-simple-list-body { flex: 1; min-width: 0; }
.ui-simple-list-title { font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.ui-simple-list-subtitle { color: var(--ink-soft); font-size: 0.8rem; margin-top: 1px; }
.ui-simple-list-chevron { color: var(--ink-soft); flex-shrink: 0; }

/* MultiSelect (Bug #1/#30) - Tag-Picker-Chips statt Checkbox-Liste. */
.ui-multiselect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  min-height: 0;
}
.ui-multiselect-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-tint, #FFE9C2);
  color: var(--brand-dark, #8a5a00);
  border-radius: 999px;
  padding: 4px 6px 4px 12px;
  font-size: 0.85rem;
  font-weight: 600;
}
.ui-multiselect-chip-remove {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 50%;
}
.ui-multiselect-chip-remove:hover { opacity: 1; background: rgba(0,0,0,0.08); }
.ui-simple-list-item-readonly {
  cursor: default;
  box-shadow: none;
}
.ui-simple-list-item-readonly:hover { border-color: var(--line); }

/* ---------- ProgressBar ----------
   Fehlte bisher komplett - Ui\ProgressBar wurde zwar schon verwendet
   (z.B. tag.php), erzeugte aber nur unstyliertes Markup ohne
   sichtbaren Balken (siehe Screenshot: nur der Text "8,00 / 8,00
   Std." war zu sehen, kein Balken darunter). */
.ui-progress-label {
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.ui-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.ui-progress-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.ui-progress-track {
  height: 8px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.ui-progress-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .2s ease-out;
}
.ui-progress-fill-brand { background: linear-gradient(90deg, var(--brand), #ffc25c); }
.ui-progress-fill-success { background: linear-gradient(90deg, #16814f, #2fa96b); }
.ui-progress-fill-warning { background: linear-gradient(90deg, #d68910, #f0b429); }
.ui-progress-fill-danger { background: linear-gradient(90deg, #b23b3b, #dc3545); }

/* Bug #5: große Fortschrittsanzeige für die tägliche Leistungserfassung
   - deutlich dicker, mit großer Prozentzahl statt nur kleiner Werte-
   Textzeile. */
.ui-progress-lg-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.ui-progress-lg-top .ui-progress-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.ui-progress-lg-percent {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  font-family: var(--font-ui);
}
.ui-progress-track-lg {
  height: 22px;
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}
.ui-progress-lg-value {
  margin-top: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: right;
}
@media (max-width: 575.98px) {
  .ui-progress-lg-percent { font-size: 2.6rem; }
  .ui-progress-track-lg { height: 26px; }
}

.ui-info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.ui-info-row:last-child { border-bottom: none; }
.ui-info-label { color: var(--ink-soft); flex-shrink: 0; }
.ui-info-value { color: var(--ink); font-weight: 600; text-align: right; }

/* ---------- Formular ---------- */
.ui-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

/* ---------- Anmeldeseite ----------
   Seit 15.10.2026 im Rahmen der Anwendung: dieselbe Kopfleiste
   (.app-header, Anthrazit aus ui-erweiterungen.css), darunter die
   Fläche mit einer Karte wie ein Formularabschnitt. Oben in der Karte
   das Kundenlogo, falls hinterlegt. */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
}
.login-main {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px 56px;
}
.login-spalte { width: 100%; max-width: 400px; }
.login-karte {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.login-kunde {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 22px 20px;
  border-bottom: 1px solid var(--line);
}
.login-kunde img { max-height: 64px; max-width: 100%; width: auto; }
/* Kundenlogos sind für hellen Grund gemacht - im Dunkelmodus auf einer
   hellen Tafel, sonst verschwindet dunkle Schrift. */
[data-bs-theme="dark"] .login-kunde img {
  background: #fff;
  padding: 8px 12px;
  border-radius: var(--radius);
}
.login-formular { padding: 22px; }
.login-titel {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 18px;
  color: var(--ink);
}
.login-fuss {
  text-align: center;
  margin: 14px 0 0;
  font-size: .82rem;
  color: var(--ink-soft);
}
@media (max-width: 575.98px) {
  .login-main { align-items: flex-start; padding-top: 24px; }
}

/* ---------- Alert (z. B. Login-Fehlermeldung) ---------- */
.ui-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 600;
}
.ui-alert-danger { background: #dc2626; color: #ffffff; }
/* Warnung und Hinweis: bisher gab es nur die rote Variante, weshalb
   auch reine Hinweise wie eine Fehlermeldung aussahen. Gedeckte
   Flaechen mit dunkler Schrift statt Vollton - rot bleibt damit die
   auffaelligste Stufe und behaelt seine Wirkung. */
.ui-alert-warning { background: #fef3c7; color: #7c4a03; border: 1px solid #fcd34d; }
.ui-alert-info { background: #e0f2fe; color: #075985; border: 1px solid #7dd3fc; }
/* Bestätigung (z.B. "Probelauf bestanden"), gleich gedeckt wie Hinweis. */
.ui-alert-success { background: #dcfce7; color: #14532d; border: 1px solid #86efac; }

/* Ankreuzfelder: die Bootstrap-Vorgabe ist 1em und damit auf dem Handy
   kaum zu treffen. 1.35rem liegt naeher an der Fingerkuppe, ohne die
   Zeilenhoehe zu sprengen; der Haken wird mitskaliert. Der weiche
   Fokusring greift die Markenfarbe auf, statt das Bootstrap-Blau
   stehen zu lassen. */
.form-check-input {
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  border-width: 2px;
  cursor: pointer;
}
.form-check {
  padding-left: 1.95rem;
  min-height: 1.6rem;
}
.form-check .form-check-input {
  margin-left: -1.95rem;
}
.form-check-label {
  cursor: pointer;
  padding-left: 0.2rem;
  line-height: 1.6rem;
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(254, 157, 3, 0.35);
}

/* Bootstrap form-switch in CI-Farbe statt Standard-Blau */
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}
.form-check-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.25rem rgba(254, 157, 3, 0.25);
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  :root { --header-h: 72px; }

  .app-sidebar { display: none; }

  .header-customer-logo { display: none; }

  .app-content { padding-bottom: 104px; }

  /* Größere, zielsicher tippbare Schaltflächen (z. B. für Nutzung im Fahrzeug) */
  .btn-bereiche {
    padding: 13px 20px;
    font-size: 1rem;
    border-radius: 10px;
  }
  .btn-bereiche i { font-size: 1.2rem; }

  .icon-btn {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
  }
  .icon-btn .badge-dot {
    width: 10px;
    height: 10px;
    top: 8px;
    right: 9px;
  }

  .avatar-circle {
    width: 48px;
    height: 48px;
    font-size: 1.05rem;
  }

  .app-header .brand .brand-icon { width: 36px; height: 36px; }
  .app-header .brand { font-size: 1.15rem; }
}

@media (max-width: 991.98px) and (min-width: 576px) {
  .app-header { padding: 0 20px; }
}

@media (max-width: 575.98px) {
  .app-header { padding: 0 12px; gap: 10px; }
  .app-header .brand span.brand-text { display: none; }
  .btn-bereiche span.btn-text { display: none; }
  .btn-bereiche { padding: 12px; }
  .avatar-btn .avatar-text { display: none; }
  .app-content { padding: 16px 14px 104px; }
  .mehr-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Hilfe-Button (Ui\HelpModal) - mehr Abstand zum vorangehenden Text,
   sonst klebt das (?) zu eng an der Beschriftung davor. */
.ui-help-btn {
  margin-left: 8px;
  vertical-align: middle;
}

/* Kontext-Leiste (Ui\ContextBanner) - zeigt auf kombinierten Seiten
   auf einen Blick, welche Dinge hier zusammenkommen. */
.ui-context-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.ui-context-banner-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius, 10px);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
a.ui-context-banner-chip:hover {
  border-color: var(--brand);
  color: var(--brand-dark);
}
.ui-context-banner-chip-static {
  background: var(--canvas);
}
.ui-context-banner-sep {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* ---------- StatusStepper (Instandhaltungs-Arbeitsbereich) ---------- */
.ui-status-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.ui-status-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  flex: 1 1 200px;
  min-width: 160px;
  transition: border-color .09s ease-out, background-color .09s ease-out;
}
a.ui-status-step:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.ui-status-step-inaktiv {
  opacity: 0.55;
  cursor: default;
}
.ui-status-step-icon {
  font-size: 1.3rem;
  line-height: 1;
}
.ui-status-step-success .ui-status-step-icon { color: #15803d; }
.ui-status-step-warning .ui-status-step-icon { color: var(--brand); }
.ui-status-step-secondary .ui-status-step-icon { color: var(--ink-soft); }
.ui-status-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ui-status-step-label {
  font-weight: 600;
  font-size: 0.9rem;
}
.ui-status-step-status {
  font-size: 0.78rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 4px;
}
.ui-status-step-success .ui-status-step-status i { color: #15803d; }
.ui-status-step-warning .ui-status-step-status i { color: var(--brand); }


/* ==========================================================
   AKTIONEN: Toasts und Beschaeftigt-Zustand
   Gehoert zu public/assets/js/ui-actions.js und gilt fuer die
   gesamte Anwendung, nicht nur fuer ein einzelnes Modul.
   ========================================================== */

/* Oben mittig auf Hoehe der Kopfzeile: dorthin schaut man nach einer
   Aktion, und es verdeckt weder Seitenleiste noch Inhalt. */
.ui-toasts {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 1090; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none;
}
.ui-toast {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
  font-size: .9rem; min-width: 240px; max-width: 460px;
  opacity: 0; transform: translateY(-10px);
  transition: opacity .2s, transform .2s;
}
.ui-toast.ist-sichtbar { opacity: 1; transform: translateY(0); }
.ui-toast.ist-ok { border-left: 4px solid #198754; }
.ui-toast.ist-ok .bi { color: #198754; }
.ui-toast.ist-fehler { border-left: 4px solid #b02a37; }
.ui-toast.ist-fehler .bi { color: #b02a37; }

/* Waehrend eine Aktion laeuft: Klicks sperren und den Zustand sichtbar
   machen, damit niemand doppelt ausloest oder ins Leere klickt. */
body.ist-beschaeftigt { cursor: progress; }
body.ist-beschaeftigt .app-content,
body.ist-beschaeftigt .app-sidebar { opacity: .65; pointer-events: none; }

/* ---------- AuswahlListe ----------
   Die Auswahl-Entsprechung zu SimpleList: dieselbe Optik, aber mit
   Kästchen statt Pfeil. Ersetzt die Tabellen mit Kästchen-Spalte im
   Auftragsmodul - beim Ankreuzen liest man zeilenweise, nicht
   spaltenweise, und dafür ist eine Tabelle die falsche Form. */
.ui-auswahl-liste { display: flex; flex-direction: column; gap: 6px; }
.ui-auswahl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 14px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ui-auswahl-item:hover { border-color: var(--brand); }
.ui-auswahl-item:has(.ui-auswahl-box:checked) {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.ui-auswahl-item.ist-gedaempft { opacity: .65; }
.ui-auswahl-box { flex-shrink: 0; margin: 0; }

/* Kennzahl rechts: rechtsbündig und mit gleichen Ziffernbreiten, damit
   Mengen und Beträge auch ohne Tabelle untereinander lesbar bleiben. */
.ui-auswahl-wert {
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.ui-auswahl-wert-zusatz { font-weight: 400; font-size: .76rem; color: var(--ink-soft); }

.ui-auswahl-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px 10px;
  font-size: .84rem;
}
.ui-auswahl-alle { display: flex; align-items: center; gap: 7px; cursor: pointer; color: var(--ink-soft); }
.ui-auswahl-anzahl { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Kennzahl in einer SimpleList - gleiche Behandlung für reine
   Anzeigelisten (Positionen, Abrechnung). */
.ui-simple-list-wert {
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: .9rem;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.ui-simple-list-wert small { font-weight: 400; font-size: .76rem; color: var(--ink-soft); }

/* ---------- Spalteneditor der Ausgabeprofile ----------
   Statt einer Tabelle gestapelte Zeilen: eine Tabelle mit vier
   Formularfeldern je Zeile ist auf dem Handy unbenutzbar, weil sie
   waagrecht scrollt. So bricht jede Zeile sauber um. */
.ui-spalten-editor { display: flex; flex-direction: column; gap: 8px; }
.ui-spalten-zeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.ui-spalten-nummer {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
  margin-top: 22px;
}
.ui-spalten-zeile .form-label { font-size: .74rem; margin-bottom: 2px; }
@media (max-width: 991px) {
  .ui-spalten-nummer { margin-top: 0; }
}

/* ---------- Firmenlogo-Vorschau ----------
   Karierter Hintergrund, damit man bei einem PNG mit durchsichtigem
   Hintergrund sieht, was durchscheint - ein Logo mit weissem Kasten
   faellt sonst erst auf dem Anmeldebildschirm auf. */
.firmenlogo-vorschau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--surface);
  background-image:
    linear-gradient(45deg, var(--bs-tertiary-bg) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bs-tertiary-bg) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bs-tertiary-bg) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bs-tertiary-bg) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.firmenlogo-vorschau img { max-height: 128px; max-width: 100%; width: auto; }

/* ---------- Summenblock (netto, Steuerstufen, brutto) ----------
   Rechtsbuendig und schmal, wie auf einem Beleg. Gleiche Ziffernbreiten,
   damit die Betraege untereinander stehen. */
.ui-summenblock {
  margin: 16px 0 0 auto;
  max-width: 380px;
  font-variant-numeric: tabular-nums;
}
.ui-summen-zeile {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 0;
  font-size: .9rem;
}
.ui-summen-zeile span:last-child { white-space: nowrap; }
.ui-summen-zeile.ist-abzug { color: var(--ink-soft); }
.ui-summen-zeile.ist-netto {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 8px;
  font-weight: 600;
}
.ui-summen-zeile.ist-steuer { color: var(--ink-soft); font-size: .84rem; }
.ui-summen-zeile.ist-brutto {
  border-top: 2px solid var(--ink);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 700;
  font-size: 1.05rem;
}

/* ---------- Diagramme (serverseitiges SVG) ----------
   Ohne Diagrammbibliothek gezeichnet: die CSP erlaubt nur
   script-src 'self', und SVG druckt zudem sauber mit. Die Farben kommen
   aus den CSS-Variablen, das Diagramm folgt also dem Hell/Dunkel-
   Umschalter von selbst. */
.ui-diagramm-huelle {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px 8px;
  margin-bottom: 14px;
}
/* Auf schmalen Bildschirmen waagrecht scrollen statt schrumpfen.
   Ein SVG mit 800 Einheiten Breite waere auf einem 380-Pixel-Handy um
   den Faktor 0,475 verkleinert - die Achsenbeschriftung landete bei
   unter fuenf Pixeln und waere unlesbar. Mit min-width bleibt sie
   lesbar, und man schiebt das Diagramm bei Bedarf zur Seite. */
.ui-diagramm-huelle { overflow-x: auto; }
.ui-diagramm { width: 100%; min-width: 520px; height: auto; display: block; overflow: visible; }
.ui-diagramm-raster { stroke: var(--line); stroke-width: 1; }
/* Schriftgroesse in SVG-Einheiten, nicht in Pixeln: bei einer viewBox
   von 800 und einer Darstellung auf 520 Pixeln bleiben davon rund
   9 Pixel uebrig - gerade noch gut lesbar. */
.ui-diagramm-achse { fill: var(--ink-soft); font-size: 14px; font-family: inherit; }
.ui-diagramm-linie { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ui-diagramm-linie.ist-gestrichelt { stroke-dasharray: 7 6; }
.ui-diagramm-punkt { cursor: default; }

.ui-diagramm-legende {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 8px; font-size: .8rem; color: var(--ink-soft);
}
.ui-diagramm-legende span { display: flex; align-items: center; gap: 6px; }
.ui-diagramm-legende i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ui-diagramm-einheit { font-size: .74rem; color: var(--ink-soft); text-align: right; margin-top: 2px; }

@media print {
  /* Im Druck gibt es kein Scrollen - dort passt das Diagramm auf die
     Seitenbreite, und die Schrift ist auf Papier ohnehin gross genug. */
  .ui-diagramm-huelle { break-inside: avoid; border-color: #999; overflow: visible; }
  .ui-diagramm { min-width: 0; }

  /* Hintergrundfarben mitdrucken. Browser lassen sie standardmaessig
     weg - dann faenden sich auf dem Papier weder abgesetzte
     Kennzahlenkacheln noch eingefaerbte Statusabzeichen wieder.
     Betrifft die Auswertungsseiten, die man auch ausdrucken will. */
  .ui-diagramm-huelle, .ui-stat-tile, .badge, .ui-alert {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---------- Einklappbarer Formularabschnitt ----------
   Fuer die langen Formulare: Pflichtangaben stehen offen, alles
   Weitere klappt auf. Mit <details> statt eigenem Skript - das
   funktioniert ohne JavaScript, und die Felder werden auch im
   eingeklappten Zustand ganz normal mit abgeschickt. */
.ui-form-klapp > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ui-form-klapp > summary::-webkit-details-marker { display: none; }
.ui-form-klapp > summary::before {
  content: "\25BE";
  display: inline-block;
  width: 12px;
  color: var(--ink-soft);
  transition: transform .15s;
}
.ui-form-klapp:not([open]) > summary::before { transform: rotate(-90deg); }
.ui-form-klapp:not([open]) > summary { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

/* ---------- Kanalliste (Benachrichtigungseinstellungen) ----------
   Ersetzt die Tabelle mit drei Kaestchen-Spalten. Auf dem Handy war
   die unbrauchbar: drei Spalten mit Kaestchen und ein langer
   Ereignisname passen nicht nebeneinander, und ohne Spaltenkopf im
   Blick weiss man beim vierten Haken nicht mehr, welche Spalte was
   bedeutet. Hier steht die Beschriftung an jedem Schalter. */
.ui-kanal-liste { display: flex; flex-direction: column; gap: 6px; }
.ui-kanal-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ui-kanal-name { flex: 1 1 220px; font-weight: 600; font-size: .9rem; }
.ui-kanal-schalter { display: flex; gap: 16px; flex-wrap: wrap; }
.ui-kanal-schalter label {
  display: flex; align-items: center; gap: 6px;
  font-size: .85rem; color: var(--ink-soft); cursor: pointer;
}
.ui-kanal-schalter input:checked + span { color: var(--ink); font-weight: 600; }

/* ---------- Bestandsauswahl beim Buchen ----------
   Bei bekanntem Quelllager: was dort liegt, als Karten mit Menge.
   Die Menge steht links und gross - das ist die Information, wegen
   der man hinschaut ("habe ich ueberhaupt genug davon?"). */
.ui-bestand-karten { display: flex; flex-direction: column; gap: 6px; }
.ui-bestand-karte {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
.ui-bestand-karte:hover { border-color: var(--brand); background: var(--brand-tint); }
.ui-bestand-menge {
  flex: 0 0 84px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
}
.ui-bestand-menge small { font-size: .7rem; font-weight: 400; color: var(--ink-soft); }
.ui-bestand-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ui-bestand-name { font-weight: 600; font-size: .92rem; }
.ui-bestand-meta {
  font-size: .76rem; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-bestand-karte > .bi { color: var(--ink-soft); flex-shrink: 0; }
.ui-bestand-suche { max-width: 560px; }
.ui-bestand-beschreibung {
  font-size: .8rem; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Buchungswege im Dialog ----------
   Ein Knopf am Lagerort, dahinter die Wege, die zu diesem Lagerort
   passen. Jeder Eintrag mit einem Satz dazu, was er bewirkt - "Abgang"
   allein sagt niemandem, dass der Bestand ersatzlos verschwindet. */
.ui-buchungsweg-liste { display: flex; flex-direction: column; gap: 6px; }
.ui-buchungsweg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
.ui-buchungsweg:hover { border-color: var(--brand); background: var(--brand-tint); }
.ui-buchungsweg > .bi:first-child { font-size: 1.2rem; color: var(--ink-soft); flex-shrink: 0; }
.ui-buchungsweg:hover > .bi:first-child { color: var(--brand); }
.ui-buchungsweg > span { display: flex; flex-direction: column; min-width: 0; }
.ui-buchungsweg-titel { font-weight: 600; font-size: .92rem; }
.ui-buchungsweg-text { font-size: .78rem; color: var(--ink-soft); }

/* ---------- Datenauskunft (DSGVO) ----------
   Feld-Wert-Paare statt einer Tabelle: die Datensaetze haben je nach
   Bereich ganz verschiedene Spalten, und eine Tabelle mit zwanzig
   Spalten waere am Bildschirm unlesbar. Im Ausdruck ist es umgekehrt -
   dort stehen Tabellen, weil sie aufs Papier passen. */
.ui-dsgvo-satz {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--surface);
}
.ui-dsgvo-feld { display: flex; gap: 12px; padding: 3px 0; font-size: .88rem; }
.ui-dsgvo-feld + .ui-dsgvo-feld { border-top: 1px solid var(--line); }
.ui-dsgvo-name { flex: 0 0 190px; color: var(--ink-soft); font-size: .82rem; }
.ui-dsgvo-wert { flex: 1 1 auto; min-width: 0; word-break: break-word; }
@media (max-width: 575px) {
  .ui-dsgvo-feld { flex-direction: column; gap: 1px; }
  .ui-dsgvo-name { flex: none; }
}

/* ---------- Datenexport: Tabellenliste ----------
   Je Zeile ein eigenes Formular, damit der Knopf direkt exportiert -
   ohne Auswahlkaestchen und Sammelabsenden. */
.ui-export-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 5px;
}
.ui-export-name { font-weight: 600; font-size: .88rem; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ui-export-meta { font-size: .78rem; color: var(--ink-soft); }
@media (max-width: 575px) {
  .ui-export-zeile { flex-wrap: wrap; gap: 4px 10px; }
  .ui-export-meta { flex-basis: 100%; }
}

/* ---------- Kalenderansichten der Leistungserfassung ----------
   Zwei Darstellungen derselben Daten: das Monatsraster fuer viele
   Mitarbeiter (Tage nebeneinander) und der Wochenkalender fuer eine
   Person (eine Woche je Zeile).

   Gemeinsame Zustandsfarben, bewusst nicht nur Rot/Gruen: rund acht
   Prozent der Maenner sehen den Unterschied schlecht. Die Felder
   unterscheiden sich daher auch in der Helligkeit, und jedes traegt
   einen Titel im Klartext.

   Die Farbe liegt IMMER auf dem Kaestchen selbst, nie auf der
   Tabellenzelle - sonst faerbt sie den Zellabstand mit ein, und
   nebeneinanderliegende Tage verschmelzen zu einem Balken. */
.ist-tag-geprueft      { background: #1f7a4d; }
.ist-tag-abgeschlossen { background: #6ea8d8; }
.ist-tag-offen         { background: #efb93f; }
.ist-tag-fehlt         { background: #c0392b; }
.ist-tag-begruendet    { background: #8e6bb5; }
.ist-tag-frei          { background: var(--bs-tertiary-bg); }
.ist-tag-zu-wenig {
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.8) 0 3px, transparent 3px 7px);
}

/* ---------- Monatsraster ---------- */
.ui-kalender-huelle {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: 12px;
}
.ui-kalender { border-collapse: separate; border-spacing: 0; width: 100%; }
.ui-kalender th, .ui-kalender td { border-bottom: 1px solid var(--line); }
.ui-kalender tbody tr:last-child th,
.ui-kalender tbody tr:last-child td { border-bottom: none; }
.ui-kalender thead th {
  padding: 7px 2px 6px; text-align: center; font-weight: 600;
  background: var(--surface); color: var(--ink-soft);
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--line);
}
.ui-kalender thead th.ist-wochenende { background: var(--bs-tertiary-bg); }
.ui-kalender-tag { display: block; font-size: .76rem; color: var(--ink); font-weight: 700; line-height: 1.1; }
.ui-kalender-wt { display: block; font-size: .6rem; letter-spacing: .04em; text-transform: uppercase; }

/* Der Name bleibt beim waagrechten Scrollen stehen - sonst weiss man
   in der Monatsmitte nicht mehr, wessen Zeile man liest. */
.ui-kalender-name {
  position: sticky; left: 0; z-index: 3;
  background: var(--surface);
  text-align: left !important;
  padding: 6px 12px !important;
  min-width: 158px; max-width: 200px;
  border-right: 1px solid var(--line);
  font-weight: 600; font-size: .84rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-kalender-name a { color: var(--ink); text-decoration: none; }
.ui-kalender-name a:hover { color: var(--brand); }
.ui-kalender tbody tr:hover .ui-kalender-name { background: var(--bs-tertiary-bg); }

.ui-kalender td { padding: 3px 2px; min-width: 26px; }
.ui-kalender-feld {
  display: block; height: 24px; border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, .12);
  transition: transform .1s;
}
.ui-kalender-feld:hover { transform: scale(1.25); box-shadow: 0 2px 6px rgba(0,0,0,.25); position: relative; z-index: 4; }
.ui-kalender-summe {
  position: sticky; right: 0; background: var(--surface);
  text-align: right !important; padding: 6px 10px !important;
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: .82rem;
  border-left: 1px solid var(--line); white-space: nowrap;
}

/* ---------- Wochenkalender ---------- */
.ui-wochenkalender {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: 12px; margin-bottom: 12px;
}
.ui-wk-kopf, .ui-wk-woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ui-wk-kopf {
  margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); text-align: center;
}
.ui-wk-woche { margin-bottom: 6px; }
.ui-wk-woche:last-child { margin-bottom: 0; }
.ui-wk-tag {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 62px; padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, .12); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  transition: transform .1s, box-shadow .1s;
}
.ui-wk-tag.ist-leer { border: none; background: none; pointer-events: none; }
.ui-wk-tag:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.ui-wk-zahl { font-weight: 700; font-size: .95rem; line-height: 1; }
.ui-wk-stunden {
  font-size: .7rem; font-variant-numeric: tabular-nums; font-weight: 600;
  background: rgba(255, 255, 255, .82); color: #1a191e;
  border-radius: 999px; padding: 1px 7px; align-self: flex-start;
}
/* Weisse Felder brauchen keinen weissen Pillenhintergrund. */
.ui-wk-tag.ist-tag-frei .ui-wk-stunden { background: var(--bs-tertiary-bg); }

@media (max-width: 575px) {
  .ui-wochenkalender { padding: 8px; }
  .ui-wk-kopf, .ui-wk-woche { gap: 4px; }
  .ui-wk-tag { min-height: 48px; padding: 4px 5px; }
  .ui-wk-zahl { font-size: .82rem; }
  .ui-wk-stunden { font-size: .62rem; padding: 0 5px; }
  .ui-kalender-name { min-width: 118px; font-size: .78rem; padding: 5px 8px !important; }
}

/* ---------- Legende ----------
   Zweispaltig auf dem Handy, sonst einreihig. Die Kaestchen sind
   bewusst gross genug, um die Farbe wirklich zu erkennen - kleine
   Punkte helfen niemandem, der Farben schlecht unterscheidet. */
.ui-legende {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 20px; margin-bottom: 14px;
  font-size: .8rem; color: var(--ink-soft);
}
.ui-legende-eintrag { display: flex; align-items: center; gap: 7px; cursor: help; }
.ui-legende-eintrag i {
  width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, .12); display: inline-block;
}
.ui-legende-trenner {
  width: 1px; height: 18px; background: var(--line); display: inline-block;
}
@media (max-width: 575px) {
  .ui-legende { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; }
  .ui-legende-trenner { display: none; }
  .ui-legende-eintrag { font-size: .76rem; }
}

/* ---------- Warnbox fuer fehlende Tage ausserhalb des Monats ---------- */
.ui-warnbox {
  border: 1px solid #e0a800; border-left: 4px solid #e0a800;
  border-radius: var(--radius); background: #fff8e6; padding: 10px 14px;
}
.ui-warnbox > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  color: #7a5b00; font-size: .9rem;
}
.ui-warnbox > summary::-webkit-details-marker { display: none; }
.ui-warnbox > summary span { font-size: .82rem; opacity: .8; }
.ui-warnbox-inhalt { margin-top: 10px; border-top: 1px solid #e8d9a8; padding-top: 8px; }
.ui-warn-zeile { display: flex; gap: 12px; padding: 4px 0; font-size: .84rem; flex-wrap: wrap; }
.ui-warn-name { flex: 0 0 170px; font-weight: 600; color: #7a5b00; }
.ui-warn-tage { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.ui-warn-tage a { color: #7a5b00; }

/* ---------- Wochenkalender (Meine Tagesberichte) ----------
   Eine Woche je Zeile, wie ein Wandkalender. Fuer den eigenen Monat
   die vertrautere Form; die Zeile mit 31 Spalten ist eher ein Werkzeug
   fuer den, der viele Leute im Blick hat. */
.ui-wochenkalender { margin-bottom: 12px; }
.ui-wk-kopf, .ui-wk-woche {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;
}
.ui-wk-kopf {
  margin-bottom: 5px; font-size: .72rem; font-weight: 600;
  color: var(--ink-soft); text-align: center;
}
.ui-wk-woche { margin-bottom: 5px; }
.ui-wk-tag {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 58px; padding: 5px 7px;
  border: 1px solid rgba(0,0,0,.14); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
}
.ui-wk-tag.ist-leer { border: none; background: none; }
.ui-wk-tag:hover { outline: 2px solid var(--ink); outline-offset: 1px; }
.ui-wk-zahl { font-weight: 700; font-size: .92rem; }
.ui-wk-stunden {
  font-size: .72rem; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.72); border-radius: 3px;
  padding: 0 4px; align-self: flex-start;
}
@media (max-width: 575px) {
  .ui-wk-tag { min-height: 46px; padding: 3px 4px; }
  .ui-wk-zahl { font-size: .8rem; }
  .ui-wk-stunden { font-size: .64rem; }
}

/* Kuenftiger Arbeitstag: heller Umriss statt Fuellung. Er ist weder
   erledigt noch fehlend - nur vorgemerkt. Eine Fuellfarbe wuerde
   suggerieren, dass dort etwas zu tun ist. */
.ist-tag-geplant {
  background: var(--surface);
  border-style: dashed !important;
  border-color: var(--ink-soft) !important;
}
/* Nicht verlinkte Felder (Zukunft) sollen sich auch nicht so verhalten. */
span.ui-kalender-feld:hover, span.ui-wk-tag:hover {
  transform: none; box-shadow: none; cursor: default;
}

/* Abwesenheit und Feiertag sind KEINE freien Tage im Sinne von
   "da war ohnehin nichts". Ein Urlaubstag ist eine Information, ein
   Sonntag keine - deshalb bekommen beide eigene Farben statt des
   neutralen Grau. */
.ist-tag-abwesend {
  background: #d9e8f5;
  border-color: #8fb6d4 !important;
}
.ist-tag-feiertag {
  background: repeating-linear-gradient(135deg,
    var(--bs-tertiary-bg) 0 5px, rgba(140,140,150,.28) 5px 10px);
}
.ui-wk-tag.ist-tag-abwesend .ui-wk-stunden { background: rgba(255,255,255,.85); }

/* ---------- Abwesenheitsarten ----------
   Eigene Farbskala, weil hier die ART kodiert wird und nicht ein
   Bearbeitungsstand wie bei der Leistungserfassung. Krankenstand rot,
   Urlaub gruen, der Rest dazwischen - und alle kraeftig genug, um in
   einem 24 Pixel breiten Kaestchen erkennbar zu bleiben. */
/* Urlaub bewusst NICHT gruen: gruen bedeutet im Anwesenheitskalender
   "planmaessig da". Beides gleich einzufaerben hiesse, den einen
   Zustand mit seinem Gegenteil zu verwechseln. */
.ist-abw-urlaub        { background: #e07b39; }
.ist-abw-krankenstand  { background: #b23b3b; }
.ist-abw-sonderurlaub  { background: #8a6d3b; }
.ist-abw-pflegeurlaub  { background: #6a4c93; }
.ist-abw-zeitausgleich { background: #2a6f97; }
.ist-abw-sonstiges     { background: #6c757d; }
/* Anwesend: fast unsichtbar. Ein Kalender, in dem die Regel genauso
   auffaellt wie die Ausnahme, hilft niemandem. */
.ist-abw-keine {
  background: var(--surface);
  border-color: var(--line) !important;
}
.ist-abw-keine:hover { background: var(--brand-tint); }
/* Heute markieren - im Feld UND in der Kopfzeile. Nur im Feld reichte
   nicht: bei einer Zeile ohne Eintrag an diesem Tag war der Rahmen
   kaum zu finden, und in einem 31-Spalten-Raster sucht man sonst
   lange. */
.ui-kalender-feld.ist-heute { box-shadow: inset 0 0 0 2px var(--ink); }
.ui-kalender thead th.ist-heute-spalte {
  background: var(--brand-tint);
  box-shadow: inset 0 -3px 0 var(--brand);
}
.ui-kalender thead th.ist-heute-spalte .ui-kalender-tag { color: var(--brand); }
.ui-kalender thead th.ist-heute-spalte .ui-kalender-wt { color: var(--brand); font-weight: 700; }

/* ---------- Anwesenheitskalender ----------
   Umkehrung des Abwesenheitskalenders: hier steht die Regel im
   Vordergrund. Anwesend deshalb kraeftig, frei zurueckhaltend - genau
   andersherum als drueben. */
.ist-anw-da   { background: #2f7d5c; }
.ist-anw-frei { background: var(--bs-tertiary-bg); }