/* =========================================================================
   DIENSTPLAN — Stylesheet · "Soft UI Evolution"
   Moderne, klare Business-Software fuer einen Sicherheitsdienst (IBAZ).
   Weiche mehrschichtige Schatten, sanfte Rundungen, ruhige Flaechen.
   Seriös, professionell — Security Blue + Protected Green.

   Fonts: Fira Sans (UI) + Fira Code (Zahlen/Uhrzeiten) — V0.14 LOKAL gehostet
   unter public/fonts/ (SIL Open Font License). KEIN externer Google-Fonts-Request
   mehr (DSGVO, konsistent mit dem lokal gehosteten Leaflet). Robuster System-Font-
   Fallback -> sieht auch ohne geladene Web-Fonts sauber aus.
   ========================================================================= */
/* --- Fira Sans (UI), latin-Subset, Schnitte 400/500/600/700 --- */
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/fira-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fira-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fira-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/fira-sans-700.woff2") format("woff2");
}
/* --- Fira Code (Zahlen/Uhrzeiten), latin-Subset, Variable-Font (400..600) --- */
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/fira-code-var.woff2") format("woff2");
}

:root {
  /* ---- Farbpalette (zentral) ---- */
  --color-primary: #0369A1;      /* Primär / Akzent */
  --color-primary-light: #0EA5E9;/* helleres Blau */
  --color-primary-dark: #075985; /* Hover-Tiefe */

  --color-besetzt: #22C55E;      /* zugewiesen */
  --color-besetzt-dark: #16A34A; /* Rand/Text besetzt */
  --color-besetzt-bg: #F0FDF4;   /* zarter Grün-Hintergrund */

  --color-offen: #F59E0B;        /* offen (Amber) */
  --color-offen-bg: #FEF3C7;     /* zarter Amber-Hintergrund */
  --color-offen-text: #92400E;   /* lesbarer Amber-Text */

  --color-konflikt: #EF4444;     /* Rot: offene / unbesetzte Schichten (Ampel) */
  --color-rot-bg: #FEF2F2;       /* zarter Rot-Hintergrund (offen) */
  --color-rot-text: #B91C1C;     /* lesbarer Rot-Text */

  --color-app-bg: #F0F9FF;       /* App-Hintergrund (leicht blau) */
  --color-app-bg-2: #F8FAFC;     /* neutraler Hintergrund */
  --color-card: #FFFFFF;         /* Karten */

  --color-text-strong: #0F172A;  /* Navy, stark */
  --color-text: #334155;         /* normal */
  --color-text-blue: #0C4A6E;    /* normal, bläulich */
  --color-text-muted: #64748B;   /* gedämpft */

  --color-border: #E2E8F0;       /* Rahmen / Trenner */
  --color-border-strong: #CBD5E1;

  /* ---- Soft-UI-Schatten (mehrschichtig, weich) ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 8px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .08);
  --shadow-lg: 0 8px 16px rgba(15, 23, 42, .08), 0 20px 48px rgba(15, 23, 42, .14);
  --shadow-primary: 0 2px 6px rgba(3, 105, 161, .25), 0 6px 16px rgba(3, 105, 161, .18);

  /* ---- Radien ---- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Typografie ---- */
  --font-ui: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Fira Code", ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;

  --ease: 240ms cubic-bezier(.4, 0, .2, 1);
  --ring: 0 0 0 3px rgba(14, 165, 233, .45);
}

* { box-sizing: border-box; }
/* V0.66: Scroll-Leisten-Platz IMMER reservieren -> beim Filterwechsel (z.B. Bewerber
   Alle->In Prüfung) springt/verschiebt sich die Seite nicht mehr seitlich, wenn der
   vertikale Scrollbalken erscheint/verschwindet. */
html { scrollbar-gutter: stable; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background:
    radial-gradient(1200px 600px at 100% -10%, #E0F2FE 0%, transparent 55%),
    var(--color-app-bg);
  background-attachment: fixed;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Flex-Spalte: Header (sticky) -> Content (waechst) -> Footer klebt unten. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.content { flex: 1 0 auto; }

/* Inline-SVG-Icons: erben die Textfarbe, einheitliche Groesse */
.ico { display: inline-flex; align-items: center; justify-content: center; }
.ico svg { width: 20px; height: 20px; display: block; }
.ico-sm svg { width: 16px; height: 16px; }
/* V0.83: Wachbuch-Icon (Objektliste + Control-Feed-Kopf) einheitlich braun — unterscheidet es
   optisch vom WKS-Tab (der ebenfalls 'shield' nutzt, aber unveraendert in Primaerfarbe bleibt).
   Hoehere Spezifitaet als ".cf-head .ico" (Primaerfarbe im Feed-Kopf), damit Braun gewinnt. */
.ico.ico-wachbuch svg, .cf-head .ico.ico-wachbuch { color: #8B5A2B; }
html[data-theme="dark"] .ico.ico-wachbuch svg, html[data-theme="dark"] .cf-head .ico.ico-wachbuch { color: #C89B6E; }
/* SVG direkt in einem Icon-Button (z.B. Navigations-Chevrons) */
.btn-icon { line-height: 0; }
.btn-icon svg { width: 20px; height: 20px; display: block; }

/* =========================================================================
   Header
   ========================================================================= */
.app-header {
  display: flex;
  align-items: center;
  /* V0.25 Bug 3: bei knapper Breite (~1024px) sauber umbrechen statt den Firma-Switch zu
     zerquetschen -> die Tabs rutschen in eine 2. Zeile, der Header bleibt flach (kein H-Scroll). */
  flex-wrap: wrap;
  row-gap: 8px;
  gap: 24px;
  padding: 8px 24px;
  /* V0.22: min-height statt fixer Hoehe -> waechst mit dem vertikalen Firma-Switch (2 Firmen
     untereinander), damit nichts abgeschnitten wird. */
  min-height: 64px;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 10;
}
/* V0.29: nur das (groessere) Firmenlogo oben links, "IBAZ CONTROL"-Titel entfernt. */
.brand { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.1; }
.brand-logo { height: 64px; width: auto; max-width: 240px; object-fit: contain; display: block; flex-shrink: 0; }
.brand-title { font-weight: 600; font-size: 11px; letter-spacing: .3px; color: var(--color-text-muted); text-transform: uppercase; text-align: center; }

/* V0.41: Tab-Leiste neben dem Logo, bricht bei Platzmangel in ZWEI Reihen um (statt zu scrollen) —
   alle Tabs sichtbar. Reihenfolge: Logo | Tabs (1–2 Reihen) | Firma-Switch | Uhr. Die zwei Tab-Reihen
   stehen auf Logo-Hoehe. flex:1 1 0 -> die Tabs teilen sich den Platz mit Logo/Firma/Uhr und
   umbrechen INNERHALB ihres Bereichs (Header bleibt 1 logische Zeile, nur die Tabs sind 2-reihig). */
.tabs { display: flex; flex-wrap: wrap; align-content: center; gap: 3px; margin-left: 8px; order: 2; flex: 1 1 0; min-width: 0; }
.tab {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;          /* V0.40: kompakter, damit mehr Tabs in eine Zeile passen */
  white-space: nowrap;        /* V0.40: Tab bricht nicht um -> saubere einzeilige Leiste */
  flex-shrink: 0;             /* V0.40: Tabs behalten ihre Breite, die Leiste scrollt stattdessen */
  border-radius: var(--radius-sm);
  cursor: pointer;
  /* V0.24: transform fuer taktiles :active + sanfter Wechsel auf .active. */
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.tab:hover { background: #E0F2FE; color: var(--color-primary-dark); }
.tab:active { transform: scale(.97); }
.tab.active {
  background: linear-gradient(135deg, #E0F2FE 0%, #DBEAFE 100%);
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* ============================================================
   V2.24 (CEO): MOBILE-ANSICHT DER VERWALTUNG — greift NUR unter 820px.
   Desktop/Laptop bleibt komplett unverändert. Die 12 Tabs werden zu einem
   Menü-Drawer (Menü-Knopf ☰), der Kopf schrumpft auf eine schlanke Zeile.
   ============================================================ */
.nav-toggle, .mobile-view-title { display: none; }
.nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .42); z-index: 45; }

@media (max-width: 820px) {
  /* WICHTIG: backdrop-filter macht den Header zum „containing block" für position:fixed-Kinder
     -> der Drawer wäre am Header gefangen. Auf Handy abschalten, damit der Drawer am Viewport hängt. */
  .app-header { flex-wrap: wrap; row-gap: 6px; column-gap: 10px; padding: 8px 12px; min-height: 52px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center; order: 0;
    width: 42px; height: 42px; flex: 0 0 auto; cursor: pointer;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: #fff; font-size: 21px; line-height: 1; color: var(--color-primary-dark);
  }
  .mobile-view-title {
    display: block; order: 1; flex: 1 1 auto; min-width: 0;
    font-size: 16px; font-weight: 600; color: var(--color-primary-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .brand { display: none; }                 /* Logo weicht dem Titel; Navigation via Menü */
  .header-clock { display: none; }          /* Uhr am Handy weg (Platz) */
  .header-right { display: none; }          /* Server-/Versions-Status am Handy weg (Platz) */
  .header-meta { gap: 6px; }
  .status.status-2line .conn-line.conn-lokal { display: none; } /* nur Server-Status */
  .status.status-2line .conn-line.conn-server span:not(.dot) { display: none; } /* nur Punkt */
  .app-version { display: none; }           /* Version steckt im Changelog */
  /* Firmen-Umschalter in eigene Zeile unter [☰ Titel] (voll ausformuliert, schlägt .firma-switch.segmented) */
  .firma-switch { order: 2; }
  .firma-switch.segmented { order: 2; flex: 1 1 100%; max-width: none; min-width: 0; margin: 0; }

  /* Die Tab-Leiste wird zum Slide-in-Drawer von links (auf/zu via `left`).
     WICHTIG — KEINE transition auf `left`: manche Chromium-Engines „schlucken" left-Änderungen,
     solange eine left-Transition am Element hängt (der Drawer bleibt dann bei -300px hängen,
     obwohl body.nav-open .tabs{left:0} korrekt matcht). Ohne Transition greift die Kaskade sauber
     -> Drawer schnappt zuverlässig auf. Die Bewegungs-Optik trägt der Backdrop-Fade. */
  .tabs {
    position: fixed; top: 0; left: -300px; bottom: 0; z-index: 50;
    width: 264px; max-width: 84vw; margin: 0; padding: 14px 10px; gap: 4px;
    flex-direction: column; flex-wrap: nowrap; align-content: stretch;
    background: #fff; box-shadow: 2px 0 18px rgba(0, 0, 0, .18);
    transform: none; overflow-y: auto;
  }
  body.nav-open .tabs { left: 0; }
  /* V2.24-Hotfix (CEO: „man kann nichts klicken, Leiste schließt nur"): .app-header ist
     sticky mit z-index:10 und bildet einen STAPEL-KONTEXT — der Drawer (z-index:50, im Header)
     kann darin nie über den Backdrop (z-index:45, außerhalb) steigen. Der Backdrop lag also
     ÜBER dem offenen Menü und fing jeden Tipp ab (→ nur Schließen). Bei offenem Menü hebt
     diese Regel den ganzen Header über den Backdrop; Modals (z-index:100) bleiben darüber. */
  body.nav-open .app-header { z-index: 60; }
  .tabs::before {
    content: 'IBAZ CONTROL'; display: block; font-size: 12px; font-weight: 700;
    letter-spacing: .04em; color: var(--color-primary-dark); padding: 4px 10px 10px;
    border-bottom: 1px solid var(--color-border); margin-bottom: 6px;
  }
  .tabs .tab {
    width: 100%; justify-content: flex-start; white-space: normal;
    padding: 12px 14px; font-size: 15px; border-radius: 10px;
    display: flex; align-items: center; gap: 11px;
  }
  body.nav-open { overflow: hidden; }
}

.header-right {
  margin-left: 0;
  order: 3; /* V0.40: ganz rechts in der Logo-Zeile (Logo | Tabs | Firma | Uhr). */
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
/* Spalte rechts: Verbindungs-Status (oben) + Versions-Zeile (unten) */
.header-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
/* Live-Uhr (HH:MM) + Kalenderwoche, links neben Status/Version. Dezent, monospace. */
.header-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
  padding-right: 16px;
  border-right: 1px solid var(--color-border);
}
.hc-date {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
}
.hc-time {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-strong);
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}
.hc-kw {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: .3px;
}
.status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
/* V0.14: 2-zeiliger Verbindungsstatus (Server-Zeile + Lokal-Zeile untereinander). */
.status-2line {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.25;
}
.status-2line .conn-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  white-space: nowrap;
}
.app-version {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  letter-spacing: .2px;
  opacity: .9;
  white-space: nowrap;
  /* V0.27: rechte Kante mit dem Status-Block fluchten lassen (kein zusaetzlicher rechter Versatz),
     optisch symmetrisch/buendig unter "Server verbunden / Lokal: aktiv". */
  align-self: flex-end;
  text-align: right;
  /* V0.31: klickbar -> Versions-Changelog. Button-Reset (kein nativer Button-Look). */
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease, opacity .14s ease;
}
.app-version:hover {
  opacity: 1;
  color: var(--color-primary);
  background: rgba(3, 105, 161, .08);
  border-color: var(--color-primary-light);
}
.app-version:focus-visible { outline: none; box-shadow: var(--ring); }
.app-version:active { transform: translateY(1px); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-konflikt); display: inline-block; box-shadow: 0 0 0 3px rgba(239, 68, 68, .15); transition: background var(--ease), box-shadow var(--ease); }
.dot.ok { background: var(--color-besetzt); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.dot.warn { background: var(--color-offen); box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
/* V0.14: expliziter Rot-Zustand fuer "Server: getrennt" (entspricht dem .dot-Default). */
.dot.bad { background: var(--color-konflikt); box-shadow: 0 0 0 3px rgba(239, 68, 68, .15); }

/* =========================================================================
   Layout
   ========================================================================= */
/* V0.74: width:100% ist PFLICHT — .content ist Flex-Item der body-Spalte; ohne feste
   Breite schrumpft es auf sein breitestes Kind (shrink-to-fit) und zentriert sich.
   Folge war: Toolbar/Filter-Menü sprang horizontal, sobald eine Tabelle je Filter
   die Breite wechselte (CEO-Befund im Bewerber-Bereich). Mit width:100% ist die
   Content-Spalte in JEDEM Bereich konstant breit (gedeckelt durch max-width). */
.content { max-width: 1280px; margin: 0 auto; padding: 24px; width: 100%; }
/* Planung (V0.10): volle Fensterbreite, damit ein 31-Tage-Monat moeglichst ohne H-Scroll passt. */
body.plan-active .content { max-width: none; margin-left: 0; margin-right: 0; }
/* Uebersicht/Dashboard (V0.17): breiteres Layout fuer 4-Kachel-Reihe + groessere Karte. */
body.dashboard-active .content { max-width: 1680px; }
.view { display: none; }
.view.active { display: block; }

/* =========================================================================
   Übersicht / Dashboard — Kennzahl-Kacheln (Soft UI)
   ========================================================================= */
/* V0.17: 4 Kacheln in EINER Reihe (feste 4-Spalten); Kacheln etwas kompakter. */
.dash-grid {
  display: grid;
  /* V1.91 (CEO): Spalten bleiben 1fr (grosse .dash-wide-Bloecke = volle Breite);
     die Kennzahl-KACHEL schrumpft per justify-self auf ihre Inhaltsbreite. */
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.dash-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;          /* V1.91: Kachel nur so breit wie der Inhalt */
  padding-right: 26px;          /* V1.91: etwas Luft rechts vom Text */
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: var(--shadow-sm);
  /* V0.24: schnelleres, reaktionsschnelles Hover (+ border-color fuer den clickable-Akzent). */
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
  min-width: 0;
}
.dash-tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
/* Klickbare Kacheln (Tab-Sprung): Cursor + deutlicheres Hover-Feedback + Fokus-Ring (a11y). */
.dash-tile.clickable { cursor: pointer; }
.dash-tile.clickable:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--color-primary-light); }
.dash-tile.clickable:focus-visible { outline: none; box-shadow: var(--ring); }
.dash-tile.clickable:active { transform: translateY(-1px); }
.dash-icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #E0F2FE 0%, #DBEAFE 100%);
  color: var(--color-primary);
}
.dash-icon .ico svg { width: 19px; height: 19px; }
.dash-body { min-width: 0; flex: 1; }
.dash-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text-strong);
  font-family: var(--font-mono);
  letter-spacing: -.5px;
  word-break: break-word;
}
.dash-value-time { font-size: 28px; letter-spacing: 0; }
.dash-label { font-size: 13px; color: var(--color-text-muted); font-weight: 600; margin-top: 4px; }
.dash-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

/* Akzent-Varianten */
.dash-tile.accent-green .dash-icon { background: var(--color-besetzt-bg); color: var(--color-besetzt-dark); }
.dash-tile.accent-blue .dash-icon { background: linear-gradient(135deg, #E0F2FE 0%, #DBEAFE 100%); color: var(--color-primary); }
.dash-tile.accent-amber {
  border-color: #FBBF24;
  background: linear-gradient(180deg, var(--color-offen-bg) 0%, #fff 60%);
}
.dash-tile.accent-amber .dash-icon { background: var(--color-offen-bg); color: var(--color-offen-text); }
.dash-tile.accent-amber .dash-value { color: var(--color-offen-text); }

/* ---- Offene-Schichten-Block (V0.12): grosser Block ueber mehrere Spalten ---- */
.dash-wide {
  grid-column: span 4;          /* V0.17: volle Breite (alle 4 Spalten) */
  display: block;               /* eigener Aufbau (Kopf + Liste), nicht das Kachel-Flex */
  align-items: stretch;
}
.dw-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.dw-head-body { min-width: 0; }
.dw-title { font-size: 13px; color: var(--color-text-muted); font-weight: 600; }
.dw-summary {
  font-size: 22px; font-weight: 700; font-family: var(--font-mono);
  color: var(--color-text-strong); letter-spacing: -.5px; line-height: 1.15;
}
.dash-tile.dash-wide.accent-amber .dw-summary { color: var(--color-offen-text); }
.offene-liste { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ol-loading, .ol-empty { font-size: 13px; color: var(--color-text-muted); padding: 6px 2px; }
.ol-empty { color: var(--color-besetzt-dark); font-weight: 500; }
.ol-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 9px 12px; cursor: pointer;
  font-family: inherit; color: var(--color-text-strong);
  /* V0.24: transform mit aufgenommen -> Hover hebt die Zeile leicht an. */
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
}
.ol-row:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow); background: #F8FAFC; transform: translateY(-2px); }
.ol-row:active { transform: translateY(0); }
.ol-row:focus-visible { outline: none; box-shadow: var(--ring); }
.ol-swatch { flex-shrink: 0; width: 12px; height: 12px; border-radius: 3px; }
.ol-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-count { flex-shrink: 0; font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; }
.ol-hours { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--color-offen-text); }

@media (max-width: 1200px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } .dash-wide { grid-column: span 2; } }
@media (max-width: 560px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-wide { grid-column: span 1; }
  .ol-row { flex-wrap: wrap; }
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.view-title { font-size: 20px; margin: 0; font-weight: 600; color: var(--color-text-strong); }
/* .period-label entfaellt seit V2.42 — die Anzeige steckt in .period-mitte. */
.toolbar .btn-primary { margin-left: auto; }

/* ---- Segmented Control (Tag / Woche / Monat) ---- */
.segmented {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 4px;
  box-shadow: var(--shadow-sm);
  gap: 2px;
}
.seg {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 7px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  /* V0.24: transform fuer taktiles :active + sanfter .active-Wechsel (auch fuer .firma-seg). */
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease;
}
.seg:hover { color: var(--color-primary-dark); background: #F1F5F9; }
.seg:active { transform: scale(.97); }
.seg.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.seg.active:hover { color: #fff; }

/* V0.21/V0.22: Firma-Switch (Mehrmandanten) im Header — Variante des Segmented-Controls.
   Buttons sind .firma-seg (= .seg). Der Firmenfarb-Streifen (border-left) wird inline gesetzt.
   V0.22: Firmen UNTEREINANDER (vertikal), volle Namen sichtbar (kein Abschneiden). */
/* V0.39: Firmen NEBENEINANDER (horizontal), auf Logo-Hoehe. Lange Namen werden mit … gekuerzt
   (voller Name als title-Tooltip) statt den Header in die Hoehe zu ziehen. */
.firma-switch.segmented { display: flex; flex-direction: row; align-items: center; gap: 6px; margin-left: 4px; max-width: 300px; min-width: 0; flex-shrink: 0; order: 1; }
.firma-switch .firma-seg { max-width: 130px; text-align: left; padding: 8px 11px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
/* Kleines Firmen-Badge (Cross-Firma-Kennung) in MA-Checklisten der Schicht-Planung. */
.firma-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  background: #EEF2FF;
  color: #3730A3;
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .22);
  vertical-align: middle;
  /* V0.47: Ueberlappungs-Schutz — Badge kann nie mehr ueber Nachbartext laufen
     (CEO-Foto 10.06.: voller Firmenname lief ueber den MA-Namen). */
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}
/* V0.47: Checklist-Eintrag als sauberes Flex-Layout (Name darf umbrechen, Badge bleibt rechts). */
.checkbox-grid-item { overflow: hidden; }
.checkbox-grid-item > span:not(.firma-badge) { min-width: 0; overflow-wrap: anywhere; }

/* V0.47: Einplan-Popup (Zellen-Klick in MA-Zeile) */
.shift-popup-einplan-btn { color: var(--color-primary); border-color: var(--color-primary); }
.shift-popup-einplan-btn:disabled { opacity: .55; cursor: default; }
.shift-popup-einplan-neu { font-weight: 600; }
.om-cell-einplan:hover { background: rgba(3, 105, 161, .08); cursor: pointer; }
html[data-theme="dark"] .om-cell-einplan:hover { background: rgba(56, 189, 248, .12); }

.period-nav { display: flex; gap: 8px; align-items: center; }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn[hidden] { display: none !important; }
.btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  border: 1px solid var(--color-border-strong);
  background: #fff;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: var(--shadow-sm);
  /* V0.24: transform mit aufgenommen (taktiles :active-Druecken); kurze Dauer -> reaktionsschnell. */
  transition: background .16s ease, box-shadow .16s ease, color .16s ease, border-color .16s ease, transform .12s ease;
}
.btn:hover { background: #F8FAFC; border-color: var(--color-primary-light); color: var(--color-primary-dark); box-shadow: var(--shadow); transform: translateY(-1px); }
/* V0.24: taktiles Drueck-Feedback (leichtes Einsinken) auf allen Buttons/Segmenten/Tabs. */
.btn:active { transform: scale(.97); }
/* V0.85: deaktivierter Button mit erklaerendem Tooltip (Auftrags-Objekt: "Neue Schicht" gesperrt).
   disabled UND btn-disabled-hint noetig, damit Klicks wirklich blockiert sind (nicht nur optisch). */
.btn:disabled, .btn.btn-disabled-hint:disabled { cursor: not-allowed; opacity: 0.55; box-shadow: none; transform: none; }
.btn:disabled:hover { background: #fff; border-color: var(--color-border-strong); color: var(--color-text); transform: none; }
.btn-icon { padding: 9px; }
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover { background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); color: #fff; box-shadow: var(--shadow-md); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
/* CEO: "Zurueck zur Uebersicht" im Objekt-Plan rot hervorheben */
#planBackBtn { color: var(--color-rot-text); border-color: var(--color-konflikt); }
#planBackBtn:hover { color: var(--color-rot-text); border-color: var(--color-rot-text); background: var(--color-rot-bg); }
.btn-danger { color: #B91C1C; border-color: #FECACA; background: #fff; }
.btn-danger:hover { background: #FEF2F2; border-color: var(--color-konflikt); color: #B91C1C; }

/* Sichtbarer Fokus-Ring fuer Tastatur-Navigation (WCAG) */
.btn:focus-visible, .seg:focus-visible, .tab:focus-visible,
.shift-assign:focus-visible, .day-cell:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}
.btn-primary:focus-visible { box-shadow: var(--shadow-primary), var(--ring); }

/* =========================================================================
   Legende
   ========================================================================= */
.legend { display: flex; gap: 18px; margin-bottom: 14px; font-size: 13px; color: var(--color-text-muted); }
.legend-item { display: flex; align-items: center; gap: 7px; font-weight: 500; }
.swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid; }
.swatch-voll { background: var(--color-besetzt-bg); border-color: var(--color-besetzt); }
.swatch-teilweise { background: var(--color-offen-bg); border-color: var(--color-offen); }
.swatch-offen { background: var(--color-rot-bg); border-color: var(--color-konflikt); }

.plan-pane[hidden] { display: none !important; }

/* =========================================================================
   Wochen-Grid (Mo–So)
   ========================================================================= */
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
.day-col {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--ease);
}
.day-col:hover { box-shadow: var(--shadow); }
.day-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, #F8FAFC 0%, #fff 100%);
}
.day-name { font-weight: 600; font-size: 13px; color: var(--color-text-strong); }
.day-date { font-size: 12px; color: var(--color-text-muted); font-family: var(--font-mono); }
.day-head.is-today {
  background: linear-gradient(135deg, #E0F2FE 0%, #DBEAFE 100%);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}
.day-head.is-today .day-name { color: var(--color-primary-dark); }
/* Wochenende (Sa/So) in der Wochenansicht dezent grau hinterlegen. */
.day-head.is-weekend { background: linear-gradient(180deg, #DFE5EC 0%, #E9EDF3 100%); }
.day-col.is-weekend { background: #E9EDF3; }
/* Feiertag: eigener warm-grauer Ton + dezenter Punkt. Hat Vorrang vor is-weekend. */
.day-head.is-holiday { background: linear-gradient(180deg, #E6DECE 0%, #EFE7D9 100%); }
.day-col.is-holiday { background: #EFE7D9; }
.day-head.is-holiday .day-name::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: #B45309;
  vertical-align: middle;
}
/* is-today bleibt visuell fuehrend, auch wenn der Tag zugleich Wochenende/Feiertag ist. */
.day-head.is-today.is-weekend,
.day-head.is-today.is-holiday {
  background: linear-gradient(135deg, #E0F2FE 0%, #DBEAFE 100%);
}
.day-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* ---- Schicht-Karte ---- */
.shift-card {
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 13px;
  position: relative;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .16s ease, transform .16s ease;
}
/* V0.24: Hover leicht anheben (translateY -2px) + Schatten -> lebendiges Feedback. */
.shift-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
/* Ampel-Status: offen=rot, teilweise=orange, voll=gruen */
.shift-card.offen { background: var(--color-rot-bg); border-color: #FCA5A5; border-left-color: var(--color-konflikt); }
.shift-card.teilweise { background: var(--color-offen-bg); border-color: #FBBF24; border-left-color: var(--color-offen); }
.shift-card.voll { background: var(--color-besetzt-bg); border-color: #86EFAC; border-left-color: var(--color-besetzt); }
.shift-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.shift-time { font-weight: 600; font-size: 13px; font-family: var(--font-mono); color: var(--color-text-strong); letter-spacing: -.3px; }
/* Besetzungs-Badge "n/bedarf besetzt" je Status eingefaerbt */
.shift-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; font-family: var(--font-mono); }
.shift-badge.badge-offen { background: #FEE2E2; color: var(--color-rot-text); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .3); }
.shift-badge.badge-teilweise { background: var(--color-offen-bg); color: var(--color-offen-text); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .3); }
.shift-badge.badge-voll { background: var(--color-besetzt-bg); color: var(--color-besetzt-dark); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .3); }
.shift-obj { color: var(--color-text-strong); margin: 3px 0; font-weight: 500; }
/* Kunde auf der Schichtkarte = farbiger Kunden-Badge (Wrapper-Div fuer Abstand) */
.shift-kunde { margin: -1px 0 3px; }
.shift-ma { font-size: 13px; }
.shift-ma.offen-label { color: var(--color-rot-text); font-weight: 600; }
.shift-ma.assigned-label { color: var(--color-besetzt-dark); font-weight: 600; }
/* Zugewiesene MA als Chips (Pill mit ✕) */
.ma-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 2px; }
.ma-chip { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); padding: 2px 4px 2px 10px; font-size: 12px; font-weight: 500; color: var(--color-text-strong); max-width: 100%; box-shadow: var(--shadow-sm); }
.ma-chip .chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-x { border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; padding: 2px; border-radius: 50%; line-height: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--ease), color var(--ease); }
.chip-x svg { width: 13px; height: 13px; display: block; }
.chip-x:hover { background: #FEE2E2; color: #B91C1C; }
.chip-x:focus-visible { outline: none; box-shadow: var(--ring); }
/* Icon im Chip (z.B. Koffer fuer Subunternehmer) */
.chip-ico { color: inherit; display: inline-flex; flex-shrink: 0; }
.chip-ico svg { width: 13px; height: 13px; display: block; }
/* Subunternehmer-Chips: violetter Akzent -> klar von MA-Chips (weiss) unterscheidbar */
.sub-chips { margin-top: 2px; }
.ma-chip.sub-chip {
  background: #F5F3FF; border-color: #C4B5FD; color: #5B21B6;
  padding-left: 7px;
}
.ma-chip.sub-chip .chip-ico { color: #7C3AED; }
.ma-chip.sub-chip .chip-x:hover { background: #EDE9FE; color: #6D28D9; }
/* Zweites Auswahl-Element "+ Subunternehmer" (dezent violett abgesetzt) */
.shift-assign-sub { margin-top: 5px; border-color: #C4B5FD; background: #FAF9FF; }
.shift-assign-sub:hover { border-color: #A78BFA; }
/* Subunternehmer-MITARBEITER-Chips (V0.15): teal/cyan-Akzent -> klar von Sub-Firma (violett) + MA (weiss) getrennt */
.subma-chips { margin-top: 2px; }
.ma-chip.subma-chip {
  background: #ECFEFF; border-color: #67E8F9; color: #155E75;
  padding-left: 7px;
}
.ma-chip.subma-chip .chip-ico { color: #0891B2; }
.ma-chip.subma-chip .chip-x:hover { background: #CFFAFE; color: #0E7490; }
.shift-assign-subma { margin-top: 5px; border-color: #67E8F9; background: #F0FDFF; }
.shift-assign-subma:hover { border-color: #22D3EE; }
.shift-note { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; font-style: italic; word-break: break-word; }
.shift-assign { margin-top: 8px; width: 100%; font-size: 13px; padding: 6px 8px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: #fff; font-family: inherit; cursor: pointer; transition: border-color var(--ease), box-shadow var(--ease); }
.shift-assign:hover { border-color: var(--color-primary-light); }
.shift-actions { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; }
.shift-del { white-space: nowrap; }
.shift-del {
  background: transparent; border: none; color: var(--color-text-muted);
  cursor: pointer; font-size: 12px; padding: 4px 6px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 5px; font-family: inherit;
  transition: background var(--ease), color var(--ease);
}
.shift-del:hover { color: var(--color-primary-dark); background: #F1F5F9; }
.shift-del.is-danger:hover { color: #B91C1C; background: #FEF2F2; }
.shift-del:focus-visible { outline: none; box-shadow: var(--ring); }
.day-empty { font-size: 12px; color: #94A3B8; text-align: center; padding: 16px 4px; }
.day-add {
  margin-top: auto;
}

/* =========================================================================
   Tagesansicht
   ========================================================================= */
.day-view { display: flex; flex-direction: column; gap: 16px; }
/* Tages-Kopf (Wochentag + Datum, Wochenende/Feiertag markiert) */
.tag-pane-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.tag-pane-head.is-weekend { background: #E9EDF3; }
.tag-pane-head.is-holiday { background: #EFE7D9; border-color: #DCD0B8; }
.tph-dow { font-weight: 700; font-size: 16px; color: var(--color-text-strong); }
.tph-date { font-size: 14px; color: var(--color-text-muted); font-family: var(--font-mono); }
.tph-holiday {
  margin-left: auto; font-size: 12.5px; font-weight: 600;
  color: #92400E; background: #EFEAE2; padding: 3px 10px; border-radius: var(--radius-pill);
}
.tph-weekend {
  margin-left: auto; font-size: 12.5px; font-weight: 600;
  color: var(--color-text-muted); background: #F1F5F9; padding: 3px 10px; border-radius: var(--radius-pill);
}
/* MA-Namenszelle: Name + optionales Warn-Icon nebeneinander */
.ma-name-cell { display: inline-flex; align-items: center; }
.obj-group {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.obj-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #F8FAFC 0%, #fff 100%);
  border-bottom: 1px solid var(--color-border);
}
.obj-group-head .ico { color: var(--color-primary); }
.obj-group-name { font-weight: 600; font-size: 15px; color: var(--color-text-strong); }
/* Kunde im Tageskopf = farbiger Kunden-Badge (Farbe via inline-style). Nur Schriftgroesse anheben. */
.obj-group-kunde.kunde-badge { font-size: 12.5px; }
.obj-group-count { margin-left: auto; font-size: 12px; color: var(--color-text-muted); font-family: var(--font-mono); }
.obj-group-body {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.day-view-empty {
  background: var(--color-card);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-muted);
}

/* =========================================================================
   Monats-Kalenderraster
   ========================================================================= */
.month-grid {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: linear-gradient(180deg, #F8FAFC 0%, #fff 100%);
  border-bottom: 1px solid var(--color-border);
}
.month-weekday {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--color-text-muted);
  text-align: left;
}
.month-body { display: grid; grid-template-columns: repeat(7, 1fr); }
.day-cell {
  min-height: 104px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 8px 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  text-align: left;
  font-family: inherit;
  transition: background var(--ease), box-shadow var(--ease);
}
.day-cell:nth-child(7n) { border-right: none; }
.day-cell:hover { background: #F0F9FF; box-shadow: inset 0 0 0 2px var(--color-primary-light); }
.day-cell.is-other { background: #F8FAFC; }
.day-cell.is-other .day-cell-num { color: #CBD5E1; }
/* Wochenende (Sa/So) im Monatsraster heller Grau. */
.day-cell.is-weekend { background: #E9EDF3; }
/* Feiertag: warm-grauer Ton + kleiner Punkt am Tagesdatum (Vorrang vor Wochenende). */
.day-cell.is-holiday { background: #EFE7D9; }
.day-cell.is-holiday .day-cell-num::after {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  margin-left: 5px;
  border-radius: 50%;
  background: #B45309;
  vertical-align: middle;
}
/* Fremdmonats-Tage bleiben am dezentesten (auch wenn Wochenende/Feiertag). */
.day-cell.is-other.is-weekend,
.day-cell.is-other.is-holiday { background: #F8FAFC; }
.day-cell.is-today { background: linear-gradient(135deg, #E0F2FE 0%, #EFF6FF 100%); }
.day-cell.is-today .day-cell-num {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-pill);
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
}
.day-cell-num { font-size: 13px; font-weight: 600; font-family: var(--font-mono); color: var(--color-text-strong); align-self: flex-start; }
.day-cell-summary { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.cell-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  width: fit-content;
}
.cell-pill.has-shifts { background: #E0F2FE; color: var(--color-primary-dark); }
.cell-pill.has-open { background: #FEE2E2; color: var(--color-rot-text); }
.cell-pill.has-teil { background: var(--color-offen-bg); color: var(--color-offen-text); }
.cell-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cell-dot.open { background: var(--color-konflikt); }
.cell-dot.teil { background: var(--color-offen); }
.cell-dot.full { background: var(--color-besetzt); }

/* =========================================================================
   Tabellen
   ========================================================================= */
/* V0.98 (CEO): overflow-x auto — breite Tabellen scrollen horizontal statt Spalten
   (z. B. die Aktions-Knoepfe) unsichtbar abzuschneiden. */
.table-wrap { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; overflow-x: auto; box-shadow: var(--shadow); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--color-border); }
.data-table th { background: linear-gradient(180deg, #F8FAFC 0%, #fff 100%); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-muted); font-weight: 600; }
.data-table tbody tr:last-child td { border-bottom: none; }
/* V0.24: Zeilen-Hover etwas lebendiger (schnellerer Wechsel + zarter Lift via box-shadow,
   KEIN transform -> keine Verschiebung der Sticky-Spalten / Tabellen-Geometrie). */
.data-table tbody tr { transition: background .16s ease, box-shadow .16s ease; }
.data-table tbody tr:hover { background: #F0F9FF; box-shadow: inset 0 0 0 9999px rgba(2, 132, 199, .04); }
.data-table td { color: var(--color-text); }
.col-actions { text-align: right; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.badge { display: inline-block; padding: 3px 11px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; }
.badge-aktiv { background: var(--color-besetzt-bg); color: var(--color-besetzt-dark); }
.badge-inaktiv { background: #F1F5F9; color: var(--color-text-muted); }
.badge-warn { background: var(--color-offen-bg); color: var(--color-offen-text); }
.badge-konflikt { background: #FEE2E2; color: #B91C1C; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .35); }
/* V0.16: Rechnungs-Status "offen" (noch nicht bezahlt) — dezentes Blau. */
.badge-offen { background: #DBEAFE; color: #1E40AF; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .25); }
.badge-stack { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.mono { font-family: var(--font-mono); }
.empty { padding: 32px; text-align: center; color: var(--color-text-muted); }

/* =========================================================================
   V0.16 — Backup-Button (Übersicht) + Rechnungen-Modal
   ========================================================================= */
.btn-backup { margin-left: auto; }
.re-modal { display: flex; flex-direction: column; gap: 14px; }
.re-summe { font-size: 14px; color: var(--color-text); padding: 4px 2px; }
.re-summe-label { color: var(--color-text-muted); }
.re-summe-wert { font-weight: 700; }
.re-table th.num, .re-table td.num { text-align: right; }
.re-table td.num { white-space: nowrap; }
.re-pdf-cell { white-space: nowrap; }
.re-pdf-none { color: var(--color-text-muted); }
.re-form { border-top: 1px solid var(--color-border); padding-top: 12px; }
.re-form-titel { font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.re-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.re-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.re-feld-label { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
.re-feld .inp {
  font-family: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text); min-width: 0; width: 100%;
}
.re-vorschau { font-size: 14px; color: var(--color-text); padding: 8px 2px; }
.re-vorschau-label { color: var(--color-text-muted); }
.re-form-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.re-form-foot .dok-status { font-size: 13px; color: var(--color-text-muted); }
@media (max-width: 720px) {
  .re-form-grid { grid-template-columns: 1fr; }
}

/* Rechnungskopf (V0.18) — Firmendaten oben im Rechnungs-Modal (Single Source) */
.re-firma-box { padding: 2px; }
.re-firma-kopf {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-bg-soft, #f8fafc);
}
.re-firma-kopf .bild-thumb,
.re-firma-kopf .bild-placeholder {
  width: 56px; height: 56px; flex: 0 0 auto;
  object-fit: contain; border-radius: var(--radius-sm); background: #fff;
}
.re-firma-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.re-firma-name { font-weight: 700; font-size: 15px; color: var(--color-text-strong); }
.re-firma-adr, .re-firma-ust { font-size: 13px; color: var(--color-text-muted); }
.re-firma-leer {
  font-size: 13px; color: var(--color-text-muted); font-style: italic;
  padding: 10px 14px; border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm); background: var(--color-bg-soft, #f8fafc);
}

/* =========================================================================
   Wachbuch (V0.18) — Eintraege je Objekt (Modal, Liste + Anlege-Formular)
   ========================================================================= */
.wb-modal { display: flex; flex-direction: column; gap: 14px; }
.wb-liste { display: flex; flex-direction: column; gap: 8px; }
.wb-row {
  padding: 10px 12px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: #fff;
}
.wb-row-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wb-zeit { font-size: 13px; color: var(--color-text); font-weight: 600; }
.wb-ma { font-size: 13px; color: var(--color-text-muted); }
.wb-row-actions { margin-left: auto; }
.wb-vorkommnis { margin-top: 6px; font-size: 14px; color: var(--color-text); white-space: pre-wrap; word-break: break-word; }
/* Typ-Badges (farbig je Typ) */
.wb-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.wb-badge-rundgang   { background: #DBEAFE; color: #1E40AF; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .25); }
.wb-badge-kontrolle  { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .25); }
.wb-badge-vorfall    { background: #FEE2E2; color: #991B1B; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .3); }
.wb-badge-uebergabe  { background: #FEF3C7; color: #92400E; box-shadow: inset 0 0 0 1px rgba(217, 119, 6, .28); }
.wb-badge-sonstiges  { background: #E5E7EB; color: #374151; box-shadow: inset 0 0 0 1px rgba(107, 114, 128, .25); }
/* V0.44 — Wachbuch-Status (DIN-Freigabe-Workflow) */
.wb-st-entwurf     { background: #F3F4F6; color: #4B5563; box-shadow: inset 0 0 0 1px rgba(107,114,128,.3); }
.wb-st-eingereicht { background: #FEF3C7; color: #92400E; box-shadow: inset 0 0 0 1px rgba(217,119,6,.35); }
.wb-st-freigegeben { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 1px rgba(22,163,74,.3); }
.wb-din  { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.wb-korr { font-size: 11px; color: #92400E; margin-top: 4px; }
/* Tippfehler-Hilfe (lokal, zero-dep) */
.wb-tipp-box { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-tipp { border: 1px dashed #D97706; background: #FFFBEB; color: #92400E; border-radius: 999px;
  padding: 2px 10px; font-size: 12px; cursor: pointer; }
.wb-tipp:hover { background: #FEF3C7; }
/* Wochen-Übersicht */
.wbw-modal { display: flex; flex-direction: column; gap: 12px; }
.wbw-kopf { }
.wbw-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wbw-titel { font-weight: 700; font-size: 14px; margin: 0 8px; }
.wbw-filter { max-width: 180px; margin-left: auto; }
.wbw-tag { border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.wbw-heute { border-color: #0369A1; box-shadow: inset 0 0 0 1px rgba(3,105,161,.25); }
.wbw-tag-titel { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.wbw-leer { font-size: 12px; color: var(--color-text-muted); }
.wbw-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 0; background: transparent; padding: 5px 4px; border-radius: 8px; cursor: pointer; font: inherit; }
.wbw-item:hover { background: rgba(3,105,161,.06); }
.wbw-zeit { font-size: 12px; min-width: 44px; color: var(--color-text-muted); }
.wbw-obj { font-weight: 600; font-size: 13px; }
.wbw-ma { font-size: 12px; color: var(--color-text-muted); }
.wbw-text { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Anlege-Formular */
.wb-form { border-top: 1px solid var(--color-border); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.wb-form-titel { font-weight: 700; font-size: 14px; }
.wb-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; }
.wb-feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wb-feld-label { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
.wb-feld .inp {
  font-family: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text); min-width: 0; width: 100%;
}
.wb-textarea { resize: vertical; min-height: 60px; }
.wb-form-foot { display: flex; align-items: center; gap: 12px; }
.wb-form-foot .dok-status { font-size: 13px; color: var(--color-text-muted); }
@media (max-width: 720px) {
  .wb-form-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   Admin → Firmierung (V0.18) — Bearbeitungsseite (kein Modal)
   ========================================================================= */
.admin-subnav .seg { padding: 7px 14px; }
.admin-content { margin-top: 4px; }
.admin-form {
  max-width: 920px; background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 18px 20px;
}
.admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.admin-form .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.admin-form .field label { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
.admin-form .field input,
.admin-form .field textarea {
  font-family: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text); min-width: 0; width: 100%;
}
.admin-form .field textarea { resize: vertical; min-height: 60px; }
.admin-form .field-full { grid-column: 1 / -1; }
.admin-foot { margin-top: 16px; display: flex; justify-content: flex-end; }
@media (max-width: 720px) {
  .admin-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   Kunden & Objekte (flache Ansicht: Kunden-Liste + Objekt-Tabelle)
   ========================================================================= */
/* Toolbar-Erweiterungen: Suchfeld + Statusfilter */
.ko-search { display: flex; align-items: center; min-width: 0; }
.ko-search input {
  font-family: inherit; font-size: 14px; padding: 8px 12px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text-strong); width: 260px; max-width: 100%;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.ko-search input:hover { border-color: var(--color-primary-light); }
.ko-search input:focus-visible { outline: none; box-shadow: var(--ring); }
.ko-filter .seg { padding: 7px 14px; }
/* "+ Objekt" bleibt rechts; "+ Kunde" daneben (margin-left:auto wuerde sonst nur den ersten Primary schieben) */
#view-objekte .toolbar #addKuBtn { margin-left: auto; }

/* Bloecke (Kunden / Objekte) */
.ko-block { margin-top: 8px; }
.ko-block + .ko-block { margin-top: 22px; }
.ko-block-title {
  font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--color-text-muted); margin: 0 0 10px; padding-left: 2px;
}
.ko-empty { border: 1px dashed var(--color-border-strong); border-radius: var(--radius); }

/* Kunden-Liste: kompakte Tabelle */
.ko-kunden-table td, .ko-kunden-table th { padding: 11px 16px; }

/* Objekt-Tabelle: Zell-Feinschliff */
.ko-obj-name { font-weight: 600; color: var(--color-text-strong); }
.ko-adr { font-size: 13px; color: var(--color-text-muted); }
.ko-kunde-none { font-size: 12px; font-style: italic; color: #94A3B8; }
/* V0.98 (CEO): Kunden-Badge in Tabellenzellen begrenzen — lange Firmennamen (EUROPROTECT ...)
   druecken sonst die Aktions-Spalte aus dem sichtbaren Bereich. Voller Name im title-Tooltip. */
td .kunde-badge { max-width: 190px; }
/* V0.98: Freigabe-/Auftrags-Badges in Tabellenzellen kompakter (voller Name im Tooltip). */
td .badge-geteilt, td .badge-partner { max-width: 110px; }

/* Farbiger Kunden-Badge (Hintergrund/Textfarbe per inline-style aus validiertem Hex) */
.kunde-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: middle;
}

/* Farb-Swatches im Kunde-Modal */
.color-swatch-row { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.color-swatch {
  width: 26px; height: 26px; border-radius: 7px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--color-border-strong), var(--shadow-sm);
  cursor: pointer; padding: 0; position: relative;
  transition: transform var(--ease), box-shadow var(--ease);
}
.color-swatch:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--color-primary-light), var(--shadow); }
.color-swatch:focus-visible { outline: none; box-shadow: var(--ring); }
.color-swatch.selected {
  box-shadow: 0 0 0 2px var(--color-primary), var(--shadow);
  transform: translateY(-1px);
}
/* Haken auf der gewaehlten Palette-Farbe (weiss, mit Schatten fuer Kontrast) */
.color-swatch.selected::after {
  content: ""; position: absolute; left: 7px; top: 3px;
  width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 1px rgba(0,0,0,.5));
}
/* "Automatisch"-Feld: neutral, mit Text-Label statt Farbe */
.color-swatch-auto {
  width: auto; min-width: 44px; height: 26px; padding: 0 9px;
  background: #fff; color: var(--color-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.color-swatch-auto-label { font-size: 11px; font-weight: 700; letter-spacing: .3px; }
.color-swatch-auto.selected { color: var(--color-primary-dark); }
.color-swatch-auto.selected::after { display: none; }

/* Objektzuweisung im MA-Modal (gestaffelt: Firma -> Objekte -> Chips) */
.objzuweis { display: flex; flex-direction: column; gap: 10px; }
.objzuweis-group {
  font-size: 12px; font-weight: 700; letter-spacing: .4px;
  color: var(--color-primary-dark); margin-top: 6px;
}
.objzuweis-group:first-child { margin-top: 0; }
.objzuweis-empty { font-size: 13px; color: var(--color-text-muted); font-style: italic; }
.objzuweis-hint { font-size: 13px; color: var(--color-text-muted); font-style: italic; padding: 4px 0; }
.objzuweis .objzuweis-firma { width: 100%; }
.objzuweis-objekte { display: flex; flex-direction: column; gap: 8px; }
/* Chip-Uebersicht der gewaehlten Objekte */
.objzuweis-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.objzuweis-chips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #E0F2FE; color: var(--color-primary-dark);
  border: 1px solid #BAE6FD; border-radius: var(--radius-pill);
  padding: 3px 5px 3px 11px; font-size: 12.5px; font-weight: 600; max-width: 100%;
}
.chip .chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* MA-Mehrfachauswahl im Schicht-Modal */
.ma-checklist { display: flex; flex-direction: column; gap: 8px; }
.ma-checklist:empty { display: none; }

/* =========================================================================
   V0.27 — "Neue Schicht"-Modal kompakt (ohne Modal-Scroll). Kopf-Felder als Grid,
   die drei Zuweisungslisten nebeneinander mit eigenem internen Scroll.
   ========================================================================= */
/* Kopf-Felder (Datum/Uhrzeit/Objekt/Bedarf/Vorlage) als 2-3-spaltiges Grid statt gestapelt. */
.schicht-kopf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.schicht-kopf-grid .field { min-width: 0; }
/* Felder, die volle Breite brauchen (Objekt-Select, Masterschicht-Vorlage), ueber alle Spalten. */
.schicht-kopf-grid .field-span { grid-column: 1 / -1; }
@media (max-width: 720px) { .schicht-kopf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .schicht-kopf-grid { grid-template-columns: 1fr; } }

/* Die drei Zuweisungslisten (Mitarbeiter | Subunternehmer | Sub-MA) nebeneinander. */
.schicht-zuweisungen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .schicht-zuweisungen { grid-template-columns: 1fr; } }
/* V0.99 (CEO): Schicht-Modal breiter — drei Personen-Spalten aus 640px machten ~90px-Zellen,
   Namen brachen buchstabenweise um. :has() zielt genau auf Modals mit den drei Listen. */
.modal:has(.schicht-zuweisungen) { max-width: 980px; }
/* V0.99: In den drei Schicht-Listen EINE Person pro Zeile (das 2-Spalten-Untergrid der
   checkbox-grid ist fuer diese schmalen Spalten zu eng). */
.schicht-checkliste .checkbox-grid { grid-template-columns: 1fr; }

/* Gedeckelte Checkliste mit eigenem Scroll -> Modal waechst nicht ueber die Personenlisten. */
.schicht-checkliste {
  max-height: 224px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px;
}
/* Die ma-checklist sitzt INNERHALB des gedeckelten Wrappers -> keine doppelten Raender/Abstaende. */
.schicht-checkliste .ma-checklist { gap: 6px; }

/* =========================================================================
   Masterschicht-Editor (Schicht-Vorlagen je Objekt, Objekt-Modal) — V0.09.
   Dynamische Zeilen: Bezeichnung · Wochentag-Toggles · Von · Bis · Bedarf · Entfernen.
   An .modal-form-compact-Dichte angelehnt, bleibt aber lesbar.
   ========================================================================= */
.masterschicht-editor { display: flex; flex-direction: column; gap: 8px; }
.masterschicht-rows { display: flex; flex-direction: column; gap: 8px; }
.masterschicht-row {
  display: grid;
  /* V1.00 (CEO): Zeit-Spalten 84->106px — input[type=time] schnitt die letzte Ziffer ab ("09:0"). */
  grid-template-columns: minmax(120px, 1.6fr) auto 106px 106px 70px auto;
  gap: 8px 10px;
  align-items: end;
  padding: 10px;
  background: #F8FAFC;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.masterschicht-row .ms-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.masterschicht-row .ms-field > label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  color: var(--color-text-muted);
}
.masterschicht-row .ms-field input {
  font-family: inherit; font-size: 13px; padding: 7px 9px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text-strong);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.masterschicht-row .ms-field input[type="time"],
.masterschicht-row .ms-field input[type="number"] { font-family: var(--font-mono); }
.masterschicht-row .ms-field input:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring); }
.masterschicht-row .ms-del { justify-content: flex-end; }
.masterschicht-row .masterschicht-del { padding: 7px 9px; line-height: 0; }

/* Wochentag-Toggles (Mo..So). Aktiv = Kundenblau/Akzent. */
.wd-toggle-row { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.wd-toggle {
  min-width: 30px; padding: 6px 4px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text-muted); cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.wd-toggle:hover { border-color: var(--color-primary-light); color: var(--color-primary-dark); }
.wd-toggle.active {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-color: var(--color-primary); color: #fff;
}
.wd-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
.masterschicht-add { align-self: flex-start; }

/* Schmale Schirme: Zeile in 2 Spalten umbrechen, Bezeichnung + Wochentage voll. */
@media (max-width: 620px) {
  .masterschicht-row { grid-template-columns: 1fr 1fr; align-items: end; }
  .masterschicht-row .ms-bez,
  .masterschicht-row .ms-wd { grid-column: 1 / -1; }
  .masterschicht-row .ms-del { grid-column: 1 / -1; justify-content: flex-start; }
}

/* =========================================================================
   Modal
   ========================================================================= */
.modal-overlay[hidden] { display: none !important; }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px;
  animation: overlay-in var(--ease);
}
.modal {
  background: var(--color-card); border-radius: var(--radius-lg); width: 100%; max-width: 640px;
  box-shadow: var(--shadow-lg); overflow: hidden;
  max-height: 88vh;
  display: flex; flex-direction: column;
  /* V0.24: Eigen-Animation entfernt -> die Box wird jetzt per anime.js (animModalIn) lebendig
     reingepoppt (scale/translateY/easeOutBack). Das Backdrop (.modal-overlay) behaelt overlay-in.
     Fallback: ohne anime / bei reduced-motion erscheint die Box ohne Bewegung (voll sichtbar). */
}
/* Breites Modal (opts.size:'xl') — fuer dichte Mehrspalten-Formulare (z.B. Mitarbeiter). */
.modal.modal-xl { max-width: 980px; }
/* Extra-breites Modal (opts.wide, V0.12) — MA-Ansicht mit 3-spaltigem Detail-Raster. */
.modal.modal-xxl { max-width: 1140px; }
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
/* V0.24: @keyframes modal-in entfernt — die Modal-Box wird jetzt per anime.js animiert (animModalIn). */
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.modal-head h3 { margin: 0; font-size: 18px; color: var(--color-text-strong); }
.modal-close { border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; padding: 6px; border-radius: 8px; line-height: 0; transition: background var(--ease), color var(--ease); }
.modal-close svg { width: 22px; height: 22px; display: block; }
.modal-close:hover { color: var(--color-text-strong); background: #F1F5F9; }
.modal-close:focus-visible { outline: none; box-shadow: var(--ring); }
.modal-form { padding: 20px 22px; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }

/* Abschnitts-Überschrift (kleine, fette, blaue Großbuchstaben mit Trennlinie) */
.form-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--color-primary); padding: 12px 0 7px;
  border-top: 1px solid var(--color-border); margin-top: 4px;
}
.modal-form .form-section-title:first-child { border-top: none; margin-top: 0; padding-top: 0; }
/* V0.27: kompakte Detail-Ansicht (read-only) — Sektions-Titel dichter (12/7 -> 9/5),
   geringerer Top-Abstand. Nur in .detail-view (Edit-Modals bleiben unveraendert). */
.detail-view .form-section-title { padding: 9px 0 5px; margin-top: 2px; }
/* V0.27: Detail-Ansicht insgesamt dichter — geringerer Abstand zwischen den Sektionen
   + etwas weniger Padding (spart bei feldreichen Ansichten wie Mitarbeiter viel Hoehe).
   Nur read-only Detail-Ansicht; Edit-Modals (.modal-form ohne .detail-view) bleiben. */
.modal-form.detail-view { gap: 7px; padding: 16px 20px; }

/* Einsatzarten-Mehrfachauswahl (1–2 Spalten, kompakte Checkbox+Label-Zeilen) */
.checkbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.checkbox-grid-item {
  display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 500;
  color: var(--color-text); cursor: pointer; padding: 2px 0;
}
.checkbox-grid-item input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--color-primary); }
@media (max-width: 560px) { .checkbox-grid { grid-template-columns: 1fr; } }
/* V0.85: gesperrte Checkbox-Zeile (Besetzungs-Modus — fremdes Auftraggeber-Personal ist
   sichtbar, aber nicht abwaehlbar). Dezent ausgegraut, Cursor signalisiert "nicht klickbar". */
.checkbox-grid-item-disabled { opacity: 0.55; cursor: not-allowed; }
.checkbox-grid-item-disabled input { cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--color-text-blue); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: #fff; color: var(--color-text-strong);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.field input[type="date"], .field input[type="time"], .field input[type="number"] { font-family: var(--font-mono); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring); }
/* V0.25 Bug 5: leeres Pflichtfeld nach fehlgeschlagenem Speichern -> rot umrandet (JS setzt die Klasse).
   COO-Fix: muss auch im FOKUS gewinnen (das Feld wird beim Fehler fokussiert -> :focus-Ring wuerde sonst
   den roten Rahmen ueberlagern) und ohne Transition sofort sichtbar sein. */
.field input.input-error, .field select.input-error, .field textarea.input-error,
.input-error, .input-error:focus, .input-error:focus-visible {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .30) !important;
  transition: none !important;
}
.field textarea { resize: vertical; min-height: 60px; font-family: inherit; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.field-check { flex-direction: row; align-items: center; gap: 9px; }
.field-check input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.field-check label { font-weight: 500; color: var(--color-text); }

/* Dezente "gültig bis"-Anzeige unter den Qualifikations-Datumsfeldern (MA-Modal). */
.quali-hint { font-size: 11.5px; color: var(--color-text-muted); margin-top: 2px; min-height: 14px; }
.quali-hint-ok { color: var(--color-besetzt-dark); font-weight: 600; }
.quali-hint-bad { color: var(--color-rot-text); font-weight: 600; }

/* =========================================================================
   Kompaktes Modal-Formular (.modal-form-compact) — dichtes 3-Spalten-Grid.
   Genutzt vom Mitarbeiter-Formular (~40 Felder), damit (fast) nichts scrollt.
   Felder werden direkte Grid-Items; .field-row wird aufgeloest (display:contents).
   Breite Elemente (Abschnitts-Titel, Einsatzarten-Grid, Objektzuweisung,
   Textareas) spannen die volle Breite (grid-column:1/-1 via .field-full / :has).
   Lesbarkeit/Kontrast bleiben gewahrt (nur Dichte + etwas kleinere Schrift).
   ========================================================================= */
.modal-form-compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 14px;
  align-items: start;
}
/* V0.72: In der read-only Detail-Ansicht (.detail-view, z. B. Mitarbeiter-Ansicht in Reitern)
   stapeln die Tab-Panels als Block — die Inhalte bringen ihr eigenes Raster mit
   (.detail-grid-3/-4); das 3-Spalten-Formular-Raster wuerde die Detail-Zeilen sonst
   auf Spaltenbreite zerquetschen (Ein-Buchstaben-Umbrueche). */
.detail-view .modal-form-compact { display: block; }
/* .field-row aufloesen: dessen .field werden selbst zu Grid-Items. */
.modal-form-compact .field-row { display: contents; }
/* Abschnitts-Titel ueber die ganze Breite, kompakter. */
.modal-form-compact .form-section-title {
  grid-column: 1 / -1;
  padding: 9px 0 5px;
  margin-top: 2px;
}
.modal-form-compact .form-section-title:first-child { margin-top: 0; padding-top: 0; }
/* Einzelfeld: kompakteres Padding + kleinere Schrift. */
.modal-form-compact .field { gap: 4px; min-width: 0; }
.modal-form-compact .field label { font-size: 11.5px; }
.modal-form-compact .field input,
.modal-form-compact .field select,
.modal-form-compact .field textarea {
  font-size: 13px;
  padding: 7px 9px;
}
.modal-form-compact .field textarea { min-height: 52px; }
/* Checkbox-Felder (aktiv, Beschaeftigungsverbot) bleiben einzeilig. */
.modal-form-compact .field-check { gap: 8px; }
.modal-form-compact .field-check input { width: 16px; height: 16px; }
.modal-form-compact .field-check label { font-size: 12.5px; }
/* Breite Elemente: volle Zeilenbreite. Marker-Klasse .field-full (vom JS gesetzt) ... */
.modal-form-compact .field-full { grid-column: 1 / -1; }
/* V0.66: Block-Container im Rechnungs-Modal spannen die VOLLE Breite — sonst sitzen die
   verschachtelten Grids (geführter Block, Rechnungsdaten) in nur 1 der 3 Spalten (Felder
   klebten schmal links, rechte 2/3 leer). Jetzt füllen die Felder die ganze Modal-Breite. */
.modal-form-compact .re-firma-box,
.modal-form-compact .re-auto-box,
.modal-form-compact .admin-grid,
.modal-form-compact .table-wrap,
.modal-form-compact .re-pos-foot,
.modal-form-compact .re-summen { grid-column: 1 / -1; }
/* ... und progressive :has()-Verbesserung fuer breite Inhalte (Chromium/Firefox modern). */
.modal-form-compact .field:has(textarea),
.modal-form-compact .field:has(.checkbox-grid),
.modal-form-compact .field:has(.objzuweis) { grid-column: 1 / -1; }
/* Einsatzarten-Grid im kompakten Modus auf 3 Spalten verdichten. */
.modal-form-compact .checkbox-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 780px) {
  .modal-form-compact { grid-template-columns: repeat(2, 1fr); }
  .modal-form-compact .checkbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .modal-form-compact { grid-template-columns: 1fr; }
  .modal-form-compact .checkbox-grid { grid-template-columns: 1fr; }
}
/* Google-Maps-Link unter dem Geo-Feld (erscheint, sobald Koordinaten eingetragen sind) */
.maps-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--color-primary);
  text-decoration: none; padding: 2px 0;
}
.maps-link:hover { color: var(--color-primary-dark); text-decoration: underline; }
.maps-link:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 22px; border-top: 1px solid var(--color-border); background: #F8FAFC; flex-shrink: 0; }
.modal-error { padding: 12px 22px; color: #B91C1C; font-size: 14px; background: #FEF2F2; border-top: 1px solid #FECACA; flex-shrink: 0; }

/* =========================================================================
   Toast
   ========================================================================= */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--color-text-strong); color: #fff; padding: 12px 22px; border-radius: var(--radius);
  font-size: 14px; box-shadow: var(--shadow-lg); z-index: 200; max-width: 90vw;
  /* V0.24: lebendiger Einschwung (groesserer Versatz + Bounce). Die Zentrierung translateX(-50%)
     bleibt in JEDEM Keyframe erhalten -> kein horizontales Springen (anime waere hier die "Transform-Falle"). */
  animation: toast-in 360ms cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes toast-in {
  0%   { opacity: 0; transform: translate(-50%, 26px) scale(.96); }
  60%  { opacity: 1; transform: translate(-50%, -4px) scale(1.01); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}
.toast.err { background: #B91C1C; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1024px) {
  .week-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .content { padding: 16px; }
  .app-header { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 12px; }
  .tabs { order: 3; width: 100%; }
  .status { order: 2; }
  /* Header-Uhr kompakt: KW ausblenden, nur Uhrzeit; Rahmen/Padding reduzieren. */
  .header-clock { padding-right: 12px; }
  .hc-kw { display: none; }
  .hc-time { font-size: 16px; }
  .week-grid { grid-template-columns: repeat(2, 1fr); }
  .toolbar { gap: 10px; }
  .period-nav { order: 5; width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .toolbar .btn-primary { margin-left: auto; }
  .obj-group-body { grid-template-columns: 1fr; }
  /* Kunden & Objekte: Suche volle Breite, Filter umbrechen lassen */
  #view-objekte .toolbar #addKuBtn { margin-left: 0; }
  .ko-search { width: 100%; order: 4; }
  .ko-search input { width: 100%; }
  /* Breite Objekt-Tabelle: horizontal scrollbar statt quetschen */
  #objekteBlock .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #obTable { min-width: 720px; }
}
@media (max-width: 560px) {
  /* Wochenansicht mobil: horizontal scrollbar, damit alle 7 Tage erreichbar bleiben */
  #pane-woche {
    grid-template-columns: repeat(7, minmax(160px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .segmented { width: 100%; }
  .seg { flex: 1; padding: 8px 10px; }
  .period-nav { width: 100%; }
  .period-nav #navToday { flex: 1; }
  .toolbar .btn-primary { margin-left: 0; width: 100%; justify-content: center; }
  /* Mitarbeiter-Tabelle: Bewacher-ID-Spalte mobil ausblenden (NUR maTable, nicht die Objekt-/Kundentabellen) */
  #maTable th:nth-child(2), #maTable td:nth-child(2) { display: none; }
  /* Monatsraster mobil: kompaktere Zellen, Inhalt darf nicht ueberlaufen */
  .day-cell { min-height: 78px; padding: 6px; overflow: hidden; }
  .cell-pill { font-size: 10.5px; padding: 1px 6px; max-width: 100%; }
  .cell-pill span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .month-weekday { padding: 8px 6px; font-size: 10.5px; }
  /* Monatsraster darf bei sehr schmalen Viewports horizontal scrollen statt zu quetschen */
  .month-grid { overflow-x: auto; }
  .month-weekdays, .month-body { min-width: 460px; }
}

/* =========================================================================
   Objekt-Monats-Matrix (Etappe 1) — Zeilen=MA, Spalten=Tage
   Scrollbarer Wrapper; erste Spalte (Name) + Kopf-Ecke sind sticky.
   Spaltenzahl wird per inline-style (grid-template-columns) gesetzt (variabel).
   ========================================================================= */
.objekt-picker { display: flex; align-items: center; gap: 8px; }
.objekt-picker[hidden] { display: none !important; }
.objekt-picker label { font-size: 13px; font-weight: 600; color: var(--color-text-blue); }

/* ---- Objekt-Auswahl als farbiges Custom-Dropdown (V0.12) ---- */
.objekt-dropdown { position: relative; display: inline-block; }
/* Trigger: zeigt das gewaehlte Objekt; im gefaerbten Zustand traegt er die Kundenfarbe. */
.od-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 8px 12px; min-width: 180px; max-width: 280px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text-strong); cursor: pointer;
  transition: border-color var(--ease), box-shadow var(--ease), filter var(--ease);
}
.od-trigger:hover { border-color: var(--color-primary-light); }
.od-trigger.od-trigger-colored:hover { filter: brightness(.94); }
.od-trigger:focus-visible { outline: none; box-shadow: var(--ring); }
.od-trigger-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; text-align: left; }
.od-caret { flex-shrink: 0; line-height: 0; display: inline-flex; }
.od-caret svg { width: 16px; height: 16px; }

/* Aufklapp-Liste: schwebt unter dem Trigger, scrollt bei vielen Objekten. */
.od-list {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
  min-width: 240px; max-width: 340px; max-height: 360px; overflow-y: auto;
  background: #fff; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 6px;
}
.od-list[hidden] { display: none; }
.od-group + .od-group { margin-top: 6px; }
.od-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--color-text-muted); padding: 4px 6px 3px;
}
/* Eintrag: Hintergrund = Kundenfarbe (vom JS gesetzt), lesbarer Text (vom JS gesetzt). */
.od-item {
  display: block; width: 100%; text-align: left;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 8px 10px; margin: 3px 0; border: 1px solid transparent;
  border-radius: var(--radius-sm); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: filter var(--ease), box-shadow var(--ease);
}
.od-item:hover { filter: brightness(.92); }
.od-item:focus-visible { outline: none; box-shadow: var(--ring); }
.od-item-active { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }

/* ---- Zeitraum-Picker (Objekt-Modus): von–bis-Datum + "Anzeigen" ---- */
.zeitraum-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zeitraum-picker[hidden] { display: none !important; }
.zeitraum-picker label { font-size: 13px; font-weight: 600; color: var(--color-text-blue); }
.zeitraum-picker input[type="date"] {
  font-family: var(--font-mono); font-size: 13px; padding: 7px 9px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text-strong);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.zeitraum-picker input[type="date"]:hover { border-color: var(--color-primary-light); }
.zeitraum-picker input[type="date"]:focus-visible { outline: none; box-shadow: var(--ring); }
.zeitraum-dash { color: var(--color-text-muted); font-weight: 600; }
/* V0.12: Zeitraum-Picker direkt ueber der Matrix (eigene Zeile, dezent abgesetzt). */
.zeitraum-over-matrix {
  margin: 4px 0 12px;
  padding: 8px 12px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.objekt-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.objekt-matrix {
  display: grid;
  /* grid-template-columns wird in JS gesetzt (V0.20: voll flexibel, damit ein ganzer Monat
     OHNE horizontale Scroll-Leiste ins Fenster passt — Tagesspalten minmax(0,1fr)). */
  min-width: 0;
  width: 100%;
  font-size: 11px;
}

/* ---- Kopf-Ecke (sticky in beide Richtungen) ---- */
.om-corner {
  position: sticky; left: 0; top: 0; z-index: 3;
  background: linear-gradient(180deg, #F1F5F9 0%, #F8FAFC 100%);
  border-right: 2px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border);
  padding: 8px 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .2px;
  color: var(--color-text-muted); text-transform: uppercase;
  display: flex; align-items: center;
}

/* ---- Kopf-Tagesleiste ---- */
.om-day-head {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 4px 2px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: linear-gradient(180deg, #F8FAFC 0%, #fff 100%);
  text-align: center;
}
.om-day-num { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.om-day-d { font-size: 13px; font-weight: 700; font-family: var(--font-mono); color: var(--color-text-strong); }
.om-day-dow { font-size: 10px; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .3px; }
/* Besetzungs-Badge (Σ besetzt / Σ Bedarf) */
.om-badge {
  font-size: 10.5px; font-weight: 700; font-family: var(--font-mono);
  padding: 1px 6px; border-radius: var(--radius-pill); white-space: nowrap;
  border: 1px solid transparent;
}
.om-badge-empty { color: #94A3B8; background: transparent; border-color: transparent; font-weight: 500; }
/* Ampel der Kopfzelle: neutral/grau, voll/gruen, teil/orange, offen/rot */
.om-day-head.om-amp-neutral .om-badge { background: #F1F5F9; color: var(--color-text-muted); }
.om-day-head.om-amp-full { background: linear-gradient(180deg, var(--color-besetzt-bg) 0%, #fff 100%); box-shadow: inset 0 3px 0 var(--color-besetzt); }
.om-day-head.om-amp-full .om-badge { background: var(--color-besetzt-bg); color: var(--color-besetzt-dark); border-color: rgba(34,197,94,.35); }
.om-day-head.om-amp-teil { background: linear-gradient(180deg, var(--color-offen-bg) 0%, #fff 100%); box-shadow: inset 0 3px 0 var(--color-offen); }
.om-day-head.om-amp-teil .om-badge { background: var(--color-offen-bg); color: var(--color-offen-text); border-color: rgba(245,158,11,.35); }
.om-day-head.om-amp-open { background: linear-gradient(180deg, var(--color-rot-bg) 0%, #fff 100%); box-shadow: inset 0 3px 0 var(--color-konflikt); }
.om-day-head.om-amp-open .om-badge { background: #FEE2E2; color: var(--color-rot-text); border-color: rgba(239,68,68,.35); }
/* Heute-Spalte + Wochenende (Kopf) */
.om-day-head.is-weekend { background: linear-gradient(180deg, #DFE5EC 0%, #E9EDF3 100%); } /* V1.10 */
/* Feiertag in der Objekt-Matrix-Kopfleiste: warm-grauer Ton + Punkt am Tagesdatum. */
.om-day-head.is-holiday { background: #EFEAE2; }
.om-day-head.is-holiday .om-day-d::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  margin-left: 3px;
  border-radius: 50%;
  background: #B45309;
  vertical-align: middle;
}
.om-day-head.is-today { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.om-day-head.is-today .om-day-d {
  background: var(--color-primary); color: #fff; border-radius: var(--radius-pill);
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
}

/* ---- MA-Namensspalte (sticky links) ---- */
.om-ma-name {
  position: sticky; left: 0; z-index: 2;
  background: #fff;
  border-right: 2px solid var(--color-border-strong);
  border-bottom: 1px solid #C2CBD8; /* V1.16: klare Zeilen-Trennung trotz farbiger Hintergruende */
  padding: 3px 9px;
  font-weight: 600; color: var(--color-text-strong); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 5px;
}
.om-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.om-name-ico { color: #7C3AED; display: inline-flex; flex-shrink: 0; }
.om-name-ico svg { width: 14px; height: 14px; display: block; }
/* "Nicht verfuegbar"-Button in der MA-Namenszelle (dezent, rot bei Hover) */
button.om-ban-btn {
  flex-shrink: 0; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text-muted); cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
button.om-ban-btn:hover { background: #FEE2E2; color: #B91C1C; border-color: #FCA5A5; }
button.om-ban-btn:focus-visible { outline: none; box-shadow: var(--ring); }
button.om-ban-btn svg { width: 13px; height: 13px; display: block; }
/* V0.17: aktiver "Nicht-verfuegbar-Modus" — Button + Zeile deutlich markiert. */
button.om-ban-btn.is-active { background: #DC2626; color: #fff; border-color: #DC2626; }
button.om-ban-btn.is-active:hover { background: #B91C1C; border-color: #B91C1C; color: #fff; }
.om-ma-name.om-abw-modus { background: #FEF2F2; box-shadow: inset 3px 0 0 #DC2626; }
/* Subunternehmer-Zeile in der Matrix: violetter Akzent (Name-Spalte) */
.om-ma-name.om-sub-name { background: #FAF9FF; color: #5B21B6; border-left: 3px solid #7C3AED; padding-left: 9px; }
/* Subunternehmer-Schichtblock in der Matrix: violetter Rahmen ergaenzt die Status-Farbe */
.om-shift.om-shift-sub { box-shadow: inset 0 0 0 1.5px #7C3AED; }
/* Subunternehmer-MITARBEITER-Zeile in der Matrix (V0.15): teal/cyan-Akzent (Name-Spalte) */
.om-ma-name.om-subma-name { background: #F0FDFF; color: #155E75; border-left: 3px solid #0891B2; padding-left: 9px; }
/* Sub-MA-Schichtblock in der Matrix: cyan-Rahmen ergaenzt die Status-Farbe */
.om-shift.om-shift-subma { box-shadow: inset 0 0 0 1.5px #0891B2; }

/* ---- Sub-MA-Verwaltung im SUB-Modal (V0.15) ---- */
.modal-form-compact .subma-section { grid-column: 1 / -1; }
.subma-section { margin-top: 6px; }
.subma-toolbar { display: flex; justify-content: flex-end; margin: 4px 0 6px; }
/* Sub-MA-Zeile im Schicht-Popup: dezenter cyan-Akzent fuers Icon */
.shift-popup-row-subma .shift-popup-subico { color: #0891B2; }

/* ---- Tageszellen ---- */
/* V1.16 (CEO): Zeilen kompakter (36->30px) + kraeftigere Trennlinien (klare Trennung). */
.om-cell {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid #CBD5E1;
  min-height: 30px;
  padding: 2px;
  display: flex; flex-direction: column; gap: 2px;
  background: #fff;
}
.om-cell.is-weekend { background: #E9EDF3; } /* V1.10 (CEO): deutlich dunkler */
.om-cell.is-holiday { background: #EFE7D9; } /* V1.10 (CEO): deutlich dunkler */
.om-ms-cell.om-ms-leer.is-weekend { background: #E9EDF3; }
.om-ms-cell.om-ms-leer.is-holiday { background: #EFE7D9; }
.om-cell.is-today { background: #EFF6FF; box-shadow: inset 2px 0 0 var(--color-primary-light), inset -2px 0 0 var(--color-primary-light); }
/* "Nicht verfuegbar" (Abwesenheit): rot hinterlegt — hat Vorrang vor Wochenende/Feiertag.
   Steht bewusst NACH is-weekend/is-holiday/is-today, damit Rot bei gleicher Spezifitaet gewinnt. */
.om-cell.is-unavailable { background: #FEE2E2; }
.om-cell.is-unavailable.has-shift { box-shadow: inset 0 0 0 1.5px #FCA5A5; }
/* Leere, klickbare Zelle (Button) */
button.om-cell-empty {
  cursor: pointer; font-family: inherit;
  transition: background var(--ease), box-shadow var(--ease);
}
button.om-cell-empty:hover { background: #F0F9FF; box-shadow: inset 0 0 0 2px var(--color-primary-light); }
button.om-cell-empty:focus-visible { outline: none; box-shadow: var(--ring); }
/* Leere, als nicht-verfuegbar markierte Zelle: rot, Hover deutet "entfernen" an (Kreuz-Cursor entfaellt). */
button.om-cell-empty.om-cell-unavailable { background: #FEE2E2; }
button.om-cell-empty.om-cell-unavailable:hover { background: #FECACA; box-shadow: inset 0 0 0 2px #F87171; }
/* V0.17: leere Zelle im aktiven Nicht-verfuegbar-Modus — roter Hover signalisiert "Tag markieren". */
button.om-cell-empty.om-cell-abwmodus:hover { background: #FEE2E2; box-shadow: inset 0 0 0 2px #F87171; }
/* V0.85: Auftrags-Objekt — Neu-Anlage gesperrt (dezenter Hinweis statt Aktion). */
button.om-cell-empty.om-cell-locked { cursor: not-allowed; opacity: 0.6; }
button.om-cell-empty.om-cell-locked:hover { background: none; box-shadow: none; }
.om-day-head-locked { cursor: not-allowed; }
.om-day-head-locked:hover { opacity: 0.85; }

/* V0.86: "woanders eingesetzt"-Punkte in einer leeren Tageszelle (Fremd-Objekt-Farben).
   pointer-events:none haelt die Zelle voll klickbar (Punkte sind reine Anzeige). */
.om-fremd-dots {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  margin-top: auto; padding-bottom: 2px;
  pointer-events: none;
}
/* V0.94 (CEO): "woanders eingesetzt"-Punkte deutlich groesser + kontrastreicher — heller Rand
   trennt sie vom Zellhintergrund, dezenter Schlagschatten hebt sie ab (auf jedem Tag-/Wochenend-/
   Feiertags-Hintergrund gut sichtbar). Vorher 5px/inset. */
.om-fremd-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0,0,0,.35);
}
/* V0.95 (CEO): "woanders"-Punkte anklickbar -> Sprung zum Fremd-Objektplan. Der Wrapper
   bleibt pointer-events:none (Zelle klickbar), nur der klickbare Punkt faengt den Klick ab. */
.om-fremd-dot-klick {
  pointer-events: auto; cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.om-fremd-dot-klick:hover, .om-fremd-dot-klick:focus-visible {
  transform: scale(1.4);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,.32);
  outline: none; position: relative; z-index: 3;
}
html[data-theme="dark"] .om-fremd-dot-klick:hover,
html[data-theme="dark"] .om-fremd-dot-klick:focus-visible {
  box-shadow: 0 0 0 2px rgba(20,24,33,.92), 0 0 0 4px rgba(255,255,255,.7);
}
.om-fremd-dot-more {
  width: auto; height: auto; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.35);
  font-size: 10px; font-weight: 800; line-height: 1; padding: 1px 3px;
  background: var(--color-text-muted) !important; color: #fff;
}
html[data-theme="dark"] .om-fremd-dot {
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.85), 0 1px 2px rgba(0,0,0,.55);
}

/* ---- Schicht-Block in einer Zelle (farbiger Zeit-Block, Mono) ---- */
.om-shift {
  border: 1px solid;
  border-left-width: 3px;
  border-radius: 5px;
  padding: 2px 4px;
  font-size: 10.5px; font-weight: 600;
  font-family: var(--font-mono); letter-spacing: -.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; text-align: left; width: 100%;
  transition: box-shadow .16s ease, transform .16s ease;
}
/* V0.24: Hover spuerbar anheben (-2px) + Schatten. */
.om-shift:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.om-shift:focus-visible { outline: none; box-shadow: var(--ring); }
/* Ruhige Dienst-Farbe als Basis (Primary-Tint), Status faerbt Rand/Hintergrund */
.om-shift-voll { background: var(--color-besetzt-bg); border-color: #86EFAC; border-left-color: var(--color-besetzt); color: var(--color-besetzt-dark); }
.om-shift-teilweise { background: var(--color-offen-bg); border-color: #FBBF24; border-left-color: var(--color-offen); color: var(--color-offen-text); }
.om-shift-offen { background: #E0F2FE; border-color: #BAE6FD; border-left-color: var(--color-primary); color: var(--color-primary-dark); }

/* ---- V0.14: "Offene Schichten"-Zeile (ganz oben, optisch als OFFEN/rot abgesetzt) ---- */
/* Label-Zelle links (sticky), deutlich als Sonderzeile erkennbar (Amber/Rot-Akzent). */
.om-offen-label {
  position: sticky; left: 0; z-index: 2;
  background: var(--color-rot-bg);
  border-right: 2px solid var(--color-border-strong);
  border-bottom: 2px solid #FCA5A5;
  border-left: 3px solid var(--color-konflikt);
  padding: 6px 9px;
  font-weight: 700; color: var(--color-rot-text); font-size: 11.5px;
  letter-spacing: .1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center;
}
/* Tageszellen der offenen Zeile: zarter Rot-Tint, kraeftige Untertrennlinie zum MA-Block. */
.om-offen-cell { background: #FFF7F7; border-bottom: 2px solid #FCA5A5; }
.om-offen-cell.is-weekend { background: #FDF2F2; }
.om-offen-cell.is-holiday { background: #FBEFE9; }
.om-offen-cell.is-today { background: #FEF2F2; box-shadow: inset 2px 0 0 var(--color-primary-light), inset -2px 0 0 var(--color-primary-light); }
/* Offener Schicht-Block in der offenen Zeile: rot statt blau -> klar "unbesetzt". */
.om-offen-cell .om-shift-offen {
  background: var(--color-rot-bg);
  border-color: #FCA5A5;
  border-left-color: var(--color-konflikt);
  color: var(--color-rot-text);
}
.om-offen-cell .om-shift-offen:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
/* Stunden-Spalte der offenen Zeile: leer, gleiche rote Untertrennlinie (sticky uebernimmt .om-hours). */
.om-offen-hours { background: #FFF7F7; border-bottom: 2px solid #FCA5A5; }

/* V1.03 (CEO, Referenz-Layout): Vorlagen-Zeilen der Schichten-Leiste — je Vorlage eine Zeile,
   Tages-Zellen zeigen kompakt "besetzt/Soll" (gruen/gelb/rot) bzw. "—" (Klick = einfuegen). */
/* V1.14 (CEO, Referenz-Layout): Vorlagen-Zeilen KOMPAKT — Name + Zeit in EINER Zeile,
   flache Zellen (min-height 22px statt 36px der normalen Matrix-Zellen). */
.om-ms-label { flex-direction: row; align-items: center; gap: 6px; border-bottom: 1px solid var(--color-border); padding-top: 2px; padding-bottom: 2px; min-height: 22px; }
.om-ms-label .om-ms-name { font-size: 10.5px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.om-ms-label .om-ms-zeit { font-weight: 600; font-size: 9.5px; color: var(--color-text-muted); font-family: var(--font-mono); flex: 0 0 auto; }
.om-ms-cell {
  min-height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: #fff; border-bottom: 1px solid var(--color-border);
}
.om-ms-cell.is-today { box-shadow: inset 2px 0 0 var(--color-primary-light), inset -2px 0 0 var(--color-primary-light); }
.om-ms-voll  { background: #DCFCE7; color: #166534; }
.om-ms-teil  { background: #FEF3C7; color: #92400E; }
.om-ms-offen { background: #FEE2E2; color: #B91C1C; }
.om-ms-voll[role="button"], .om-ms-teil[role="button"], .om-ms-offen[role="button"] { cursor: pointer; }
.om-ms-voll:hover, .om-ms-teil:hover, .om-ms-offen:hover { filter: brightness(.95); }
.om-ms-leer { color: #C4CBD4; font-weight: 500; }
.om-ms-leer.om-ms-klick { cursor: pointer; }
.om-ms-leer.om-ms-klick:hover { background: rgba(220, 38, 38, .07); box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .28); color: #B91C1C; }
/* Doppel-Klasse = hoehere Spezifitaet als die spaeter folgende .om-hours-Basisregel (padding 6px). */
.om-hours.om-ms-hours { background: #fff; border-bottom: 1px solid var(--color-border); font-size: 10.5px; font-family: var(--font-mono); font-weight: 700; padding: 2px 8px; min-height: 22px; }
.om-ms-sum-voll  { color: #166534; background: #F0FDF4; }
.om-ms-sum-offen { color: #B91C1C; background: #FEF2F2; }
/* Letzte Vorlagen-Zeile: kraeftige rote Trennlinie zum MA-Block (wie die alte Leiste). */
.om-ms-last { border-bottom: 2px solid #FCA5A5 !important; }
html[data-theme="dark"] .om-ms-cell { background: var(--color-card); border-bottom-color: var(--color-border); }
html[data-theme="dark"] .om-ms-voll  { background: #0F2E1D; color: #86EFAC; }
html[data-theme="dark"] .om-ms-teil  { background: #33270B; color: #FCD34D; }
html[data-theme="dark"] .om-ms-offen { background: #391414; color: #FCA5A5; }
html[data-theme="dark"] .om-ms-leer { color: #475569; }
html[data-theme="dark"] .om-ms-hours { background: var(--color-card); }
html[data-theme="dark"] .om-ms-sum-voll { background: #0F2E1D; color: #86EFAC; }
html[data-theme="dark"] .om-ms-sum-offen { background: #391414; color: #FCA5A5; }

/* ---- Stunden-Spalte (sticky rechts): Summe je MA-Zeile + Kopf + Objekt-Summen ---- */
/* Kopf-Ecke rechts (sticky in beide Richtungen, wie .om-corner aber rechtsbuendig) */
.om-corner-h {
  position: sticky; right: 0; top: 0; z-index: 3;
  background: linear-gradient(180deg, #F1F5F9 0%, #F8FAFC 100%);
  border-left: 2px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border);
  padding: 8px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .2px;
  color: var(--color-text-muted); text-transform: uppercase;
  display: flex; align-items: center; justify-content: flex-end;
}
/* Stunden-Zelle je MA-Zeile (sticky rechts) */
.om-hours {
  position: sticky; right: 0; z-index: 2;
  background: #fff;
  border-left: 2px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border);
  padding: 6px 8px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  color: var(--color-text-strong);
  display: flex; align-items: center; justify-content: flex-end;
  white-space: nowrap;
  /* V0.58 Fix (Audit #4): Ueberlauf-Schutz — laengere Inhalte (z.B. "142,0/160h") duerfen
     nie ueber den Zellrand in die letzte Tagesspalte ragen (sticky, z-index 2 laege sonst
     UEBER den Schicht-Chips). Clipping + Ellipsis; der Volltext steht im title-Tooltip. */
  overflow: hidden;
  text-overflow: ellipsis;
}
/* V0.86: Monats-/Zeitraum-Gesamtsumme (alle Objekte) als dezenter Zusatz in der Stunden-Zelle. */
.om-hours-gesamt { color: var(--color-text-muted); font-weight: 500; margin-left: 3px; }
html[data-theme="dark"] .om-hours-gesamt { color: var(--color-text-muted); }
/* V2.24 (CEO): Im X-Modus steht die Gesamtsumme (alle Objekte, V+X) IMMER da — in Rot,
   damit die Monats-Gesamtstunden je Mitarbeiter sofort ins Auge springen. */
.om-hours-gesamt.omg-rot { color: #DC2626; font-weight: 700; }
html[data-theme="dark"] .om-hours-gesamt.omg-rot { color: #F87171; }
/* Stunden-Summenzeile am Tabellenende (Σ je MA-Spalte unten links als Label) */
.om-foot-label {
  position: sticky; left: 0; z-index: 2;
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  border-right: 2px solid var(--color-border-strong);
  border-top: 1px solid var(--color-border-strong);
  padding: 8px 12px;
  font-size: 12px; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: .3px;
  display: flex; align-items: center;
}
.om-foot-cell {
  border-top: 1px solid var(--color-border-strong);
  border-right: 1px solid var(--color-border);
  background: #F8FAFC;
}
.om-foot-hours {
  position: sticky; right: 0; z-index: 2;
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  border-left: 2px solid var(--color-border-strong);
  border-top: 1px solid var(--color-border-strong);
  padding: 8px 10px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--color-text-strong);
  display: flex; align-items: center; justify-content: flex-end;
  white-space: nowrap;
}

/* ---- Schicht-Kontext-Popup (V0.10): kleine Karte an der Klickposition in der Matrix ---- */
.shift-popup {
  position: fixed; z-index: 60;
  /* V1.01 (CEO): 320->360px — seit dem "+ Neue Schicht"-Knopf (V1.00) brauchen die drei
     Aktions-Knoepfe nebeneinander mehr Platz; "Schicht loeschen" lief sonst rechts hinaus. */
  min-width: 230px; max-width: min(360px, calc(100vw - 16px));
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .22);
  padding: 10px;
  font-size: 13px;
}
.shift-popup-head { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.shift-popup-titles { min-width: 0; flex: 1 1 auto; }
.shift-popup-obj { font-weight: 700; color: var(--color-text-strong); font-size: 13.5px; word-break: break-word; }
.shift-popup-time { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.shift-popup-x {
  flex-shrink: 0; width: 24px; height: 24px; line-height: 1;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text-muted); cursor: pointer;
  font-size: 16px; display: inline-flex; align-items: center; justify-content: center;
}
.shift-popup-x:hover { background: #F1F5F9; color: var(--color-text-strong); }
.shift-popup-x:focus-visible { outline: none; box-shadow: var(--ring); }
.shift-popup-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.shift-popup-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 6px; border-radius: var(--radius-sm); background: #F8FAFC;
}
.shift-popup-row-sub { background: #FAF9FF; }
/* V0.54: Tages-Notiz der Schicht im Popup — dezenter gelber Hinweis-Block, Text bricht um */
.shift-popup-notiz {
  padding: 5px 8px; margin: 2px 0 4px; border-radius: var(--radius-sm);
  background: #FEF9C3; border: 1px solid #FDE68A; color: #713F12;
  font-size: 12.5px; line-height: 1.35; white-space: pre-wrap; word-break: break-word;
}
/* V0.46: offene Position — gedaempft (gestrichelt + gedaempfte Textfarbe) */
.shift-popup-row-offen { background: #F1F5F9; opacity: 0.72; }
.shift-popup-row-offen .shift-popup-name { color: var(--color-text-muted, #6B7280); font-style: italic; }
/* V0.84: ehemaliger (endgueltig geloeschter) Mitarbeiter — rein informative Historie, kein
   Entfernen-Button, daher deutlich gedaempfter als eine offene Position (kein "Handlungsbedarf"). */
.shift-popup-row-ehemalig { background: #F8FAFC; opacity: 0.6; }
.shift-popup-name.shift-popup-name-ehemalig { color: var(--color-text-muted, #6B7280); font-style: italic; }
.shift-popup-name {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--color-text-strong); font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.shift-popup-subico { color: #7C3AED; display: inline-flex; flex-shrink: 0; }
.shift-popup-subico svg { width: 13px; height: 13px; display: block; }
.shift-popup-rm {
  flex-shrink: 0;
  border: 1px solid #FECACA; border-radius: var(--radius-sm);
  background: #fff; color: #B91C1C; cursor: pointer;
  font-size: 12px; font-weight: 600; padding: 3px 8px;
}
.shift-popup-rm:hover { background: #FEF2F2; border-color: var(--color-konflikt); }
.shift-popup-rm:focus-visible { outline: none; box-shadow: var(--ring); }
.shift-popup-empty { color: var(--color-text-muted); font-size: 12.5px; padding: 4px 6px; }
.shift-popup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* V1.06: "Weitere Schichten an diesem Tag" im Schicht-Popup (Direkt-Einplanen in offene Schichten). */
.shift-popup-weitere { margin-top: 6px; }
.shift-popup-weitere:empty { display: none; }
.shift-popup-weitere .objzuweis-group { font-size: 10.5px; }
.shift-popup-weitere-open { font-family: var(--font-mono); font-weight: 700; }
/* V1.08: Suchleiste im Objekt-Dropdown (sticky oben, Liste scrollt darunter). */
.od-suche-wrap { position: sticky; top: 0; z-index: 2; background: var(--color-card); padding: 8px; border-bottom: 1px solid var(--color-border); }
.od-suche {
  width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: 13.5px; font-family: inherit;
  border: 1px solid var(--color-border-strong); border-radius: 8px;
  background: var(--color-app-bg-2); color: var(--color-text-strong);
}
.od-suche:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring); }
.od-leer { padding: 10px 12px; font-size: 12.5px; color: var(--color-text-muted); font-style: italic; }
/* V1.11: Personen-Suchfeld in der Matrix-Kopf-Ecke + Firmen-Kuerzel in der Namens-Spalte. */
.om-corner-suche { padding: 5px 6px; }
.om-pers-suche {
  width: 100%; box-sizing: border-box; padding: 5px 8px; font-size: 12px; font-family: inherit;
  border: 1px solid var(--color-border-strong); border-radius: 7px;
  background: var(--color-app-bg-2); color: var(--color-text-strong);
}
.om-pers-suche:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring); }
.om-name-firma { margin-left: 6px; flex: 0 0 auto; font-size: 9.5px; }
/* V1.15: eigene "Lohn X"-Sektion in der Lohnkosten-Box. */
.lk-x-sektion { margin-top: 8px; border-top: 2px solid #DDD6FE; padding-top: 4px; }
.lk-x-header { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #7C3AED; padding: 2px 0 4px; }
.lk-x-foot { color: #7C3AED; }
/* V1.20: X-Aufschluesselung je Objekt (MA-Kopfzeile + eingerueckte Objekt-Zeilen). */
.lk-x-ma-row .lk-name { font-weight: 700; }
.lk-x-obj-row .lk-x-obj-name { padding-left: 14px; color: var(--color-text-muted); font-size: 12px; }
.lk-x-obj-row { border-top: none; }
/* V1.18 (CEO, Referenz-Layout): Fremd-Einsatz als grauer Zeit-Chip statt Punkt. Wrapper
   pointer-events:none haelt die Zelle klickbar; nur der Chip selbst faengt den Klick. */
.om-fremd-chips { display: flex; flex-direction: column; gap: 1px; margin-top: auto; pointer-events: none; }
.om-fremd-chip {
  pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #EA580C; border: 1px solid #C2410C; border-left: 3px solid #C2410C;
  border-radius: 4px; padding: 1px 2px; opacity: 1; min-width: 0;
}
.om-fremd-chip .omf-t { font-family: var(--font-mono); font-size: 8.5px; line-height: 1.2; font-weight: 700; color: #FFFFFF; white-space: nowrap; }
.om-fremd-chip-klick { cursor: pointer; }
.om-fremd-chip-klick:hover, .om-fremd-chip-klick:focus-visible { opacity: 1; box-shadow: var(--shadow-sm); outline: none; }
.om-fremd-chip-more { font-size: 8.5px; font-weight: 800; color: #FFFFFF; padding: 0 3px; flex-direction: row; }
html[data-theme="dark"] .om-fremd-chip { background: #EA580C; border-color: #C2410C; }
html[data-theme="dark"] .om-fremd-chip .omf-t, html[data-theme="dark"] .om-fremd-chip-more { color: #FFFFFF; }
html[data-theme="dark"] .lk-x-sektion { border-top-color: #4C1D95; }
html[data-theme="dark"] .lk-x-header { color: #C4B5FD; }
/* V1.02 (CEO): Zellen der roten "Offene Schichten"-Zeile sind klickbar (Masterschicht einfuegen). */
.om-offen-cell.om-offen-klick { cursor: pointer; }
.om-offen-cell.om-offen-klick:hover { background: rgba(220, 38, 38, .08); box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .3); }
html[data-theme="dark"] .om-offen-cell.om-offen-klick:hover { background: rgba(248, 113, 113, .14); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .4); }
.shift-popup-actions .btn { flex: 1 1 0; justify-content: center; }
@media (max-width: 560px) {
  .shift-popup { min-width: 0; width: calc(100vw - 16px); max-width: calc(100vw - 16px); }
}

/* Objekt-Stunden-Box (V0.12: zusammengefasst + rechtsbuendig ueber der Matrix).
   Eigene Zeile; der 3-Karten-Block sitzt per margin-left:auto rechts, gedeckelt. */
.objekt-stunden-box {
  display: flex;
  margin-bottom: 8px;
}
.osb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-left: auto;              /* rechtsbuendig */
  width: 100%;
  max-width: 540px;              /* nicht ueber die ganze Breite ziehen */
}
/* V1.16 (CEO): Karten kompakt — halbes Padding, Label+Wert enger. */
.osb-card {
  min-width: 0;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 6px 12px;
}
@media (max-width: 560px) {
  /* Schmale Screens: Block volle Breite, Karten ggf. umbrechen. */
  .osb-grid { max-width: none; }
}
.osb-label { font-size: 10px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .4px; }
.osb-value { font-size: 16px; font-weight: 700; font-family: var(--font-mono); color: var(--color-text-strong); margin-top: 1px; letter-spacing: -.3px; }
.osb-card.osb-soll .osb-value { color: var(--color-primary-dark); }
.osb-card.osb-besetzt .osb-value { color: var(--color-besetzt-dark); }
.osb-card.osb-offen { border-color: #FBBF24; background: linear-gradient(180deg, var(--color-offen-bg) 0%, #fff 60%); }
.osb-card.osb-offen .osb-value { color: var(--color-offen-text); }
.osb-card.osb-offen.osb-null { border-color: var(--color-border); background: var(--color-card); }
.osb-card.osb-offen.osb-null .osb-value { color: var(--color-besetzt-dark); }

/* =========================================================================
   Bundesland-Picker (Planungs-Toolbar) — fuer regionale Feiertage
   ========================================================================= */
.bundesland-picker { display: inline-flex; align-items: center; gap: 8px; }
.bundesland-picker label { font-size: 13px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.bundesland-picker select {
  font-family: inherit; font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text); cursor: pointer; max-width: 180px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.bundesland-picker select:hover { border-color: var(--color-primary-light); }

/* =========================================================================
   Control Feed (Dashboard) — Ablauf-Hinweise zu Qualifikationen/Dokumenten
   ========================================================================= */
.control-feed {
  margin-top: 20px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cf-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, #F8FAFC 0%, #fff 100%);
}
.cf-head .ico { color: var(--color-primary); }
.cf-title { font-weight: 600; font-size: 15px; color: var(--color-text-strong); }
.cf-count { margin-left: auto; font-size: 12px; font-weight: 600; font-family: var(--font-mono); color: var(--color-text-muted); }
.cf-list { display: flex; flex-direction: column; }
.cf-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 11px 18px;
  border: none; border-top: 1px solid var(--color-border);
  background: #fff; font-family: inherit; font-size: 13.5px;
  color: var(--color-text); cursor: pointer;
  transition: background var(--ease);
}
.cf-item:first-child { border-top: none; }
.cf-item:hover { background: #F8FAFC; }
.cf-item:focus-visible { outline: none; box-shadow: var(--ring); }
.cf-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cf-item.cf-rot .cf-dot { background: var(--color-konflikt); box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.cf-item.cf-orange .cf-dot { background: var(--color-offen); box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.cf-name { font-weight: 600; color: var(--color-text-strong); }
.cf-doc { color: var(--color-text); }
.cf-when { margin-left: auto; font-size: 12.5px; font-family: var(--font-mono); white-space: nowrap; }
.cf-item.cf-rot .cf-when { color: var(--color-rot-text); font-weight: 600; }
.cf-item.cf-orange .cf-when { color: var(--color-offen-text); font-weight: 600; }
.cf-ok {
  padding: 16px 18px; font-size: 14px; color: var(--color-besetzt-dark);
  display: flex; align-items: center; gap: 8px; font-weight: 500;
}
.cf-ok::before { content: '✓'; font-weight: 700; }

/* V0.44: Versand-Log — grüner Punkt/Zeit für erfolgreich gesendete Warn-Mails */
.cf-item.bn-gruen .cf-dot { background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.cf-item.bn-gruen .cf-when { color: #15803D; font-weight: 600; }

/* =========================================================================
   Kleine Icon-Buttons (MA-Tabelle: Bearbeiten/Löschen kompakt) + Ansicht-Button
   ========================================================================= */
.btn-xs { padding: 5px 8px; font-size: 12px; }
.btn-icon-only { padding: 6px; line-height: 0; }
.btn-icon-only .ico svg { width: 16px; height: 16px; }
/* Prominenter "Ansicht"-Button (primaer getoent, aber dezenter als btn-primary). */
.btn-view {
  background: #E0F2FE; border-color: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 600;
}
.btn-view:hover { background: #BAE6FD; border-color: var(--color-primary); color: var(--color-primary-dark); }
/* Warn-Icon in der MA-Namenszelle (>=1 Ablauf-Warnung). */
.ma-warn { display: inline-flex; align-items: center; margin-left: 6px; vertical-align: middle; }
.ma-warn svg { width: 15px; height: 15px; }
.ma-warn.ma-warn-rot { color: var(--color-konflikt); }
.ma-warn.ma-warn-orange { color: var(--color-offen); }

/* Orange "läuft bald ab"-Badge (MA-Tabelle Qualifikationen). */
.badge-bald {
  background: var(--color-offen-bg); color: var(--color-offen-text);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .35);
}

/* =========================================================================
   MA-Ansicht (read-only Detail) — Label/Wert-Paare
   ========================================================================= */
/* V0.10: 2-spaltiges Raster (kompakter, weniger Scrollen). Spalten-Trenner via column-gap.
   V0.27: Abstaende verdichtet (column-gap 24->18px), Zeilen-Padding 4->3px,
   Label-Breite flexibel via clamp() -> mehr Felder pro Bildschirmhoehe, Lesbarkeit bleibt. */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; row-gap: 0; }
.detail-row {
  display: grid;
  grid-template-columns: clamp(96px, 12vw, 140px) 1fr;
  gap: 8px;
  padding: 3px 0;
  border-top: 1px solid var(--color-border);
}
/* Erste Zeile beider Spalten ohne obere Linie (Top-Border-Reset fuer je Spalte 1 und 2). */
.detail-row:first-child, .detail-row:nth-child(2) { border-top: none; }
.detail-label { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.detail-value { font-size: 14px; color: var(--color-text-strong); word-break: break-word; }
.detail-value.is-empty { color: #94A3B8; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 6px; }
/* Farb-Zeile (Kunden-Ansicht V0.12): kleiner Swatch + Hex-Text. */
.detail-color { display: inline-flex; align-items: center; gap: 8px; }
.detail-color-swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(15,23,42,.15); flex-shrink: 0; }

/* V0.12: 3-spaltiges Detail-Raster (MA-Ansicht, breite Screens) — mehr ohne Scrollen.
   Top-Border-Reset fuer die erste Zeile jeder der 3 Spalten. */
.detail-grid-3 { grid-template-columns: repeat(3, 1fr); column-gap: 18px; }
.detail-grid-3 .detail-row:nth-child(3) { border-top: none; }

/* V0.27: 4-spaltiges Detail-Raster fuer feldreiche Sektionen (Mitarbeiter/Objekt) mit
   kurzen "Label:Wert"-Feldern. Top-Border-Reset fuer die erste Zeile jeder der 4 Spalten.
   Responsiv stufenweise: <=1200px 3, <=900px 2, <=560px 1 (unten im 560er-Block). */
.detail-grid-4 { grid-template-columns: repeat(4, 1fr); column-gap: 18px; }
.detail-grid-4 .detail-row:nth-child(2),
.detail-grid-4 .detail-row:nth-child(3),
.detail-grid-4 .detail-row:nth-child(4) { border-top: none; }
@media (max-width: 1200px) {
  /* 4 -> 3 Spalten: vierte Zeile bekommt wieder eine obere Linie (nicht mehr in erster Reihe). */
  .detail-grid-4 { grid-template-columns: repeat(3, 1fr); }
  .detail-grid-4 .detail-row:nth-child(4) { border-top: 1px solid var(--color-border); }
}
@media (max-width: 900px) {
  /* 3 -> 2 Spalten: dritte Zeile bekommt wieder eine obere Linie. */
  .detail-grid-4 { grid-template-columns: 1fr 1fr; }
  .detail-grid-4 .detail-row:nth-child(3) { border-top: 1px solid var(--color-border); }
}

/* V0.27: Kopf-Sidebar — Foto (kompakt) links, Kerndaten rechts daneben. Spart vertikalen Platz.
   Gilt fuer alle 4 Ansichten (Mitarbeiter/Objekt/Kunde/Sub) -> stilkonsistent. */
.detail-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 4px; }
.detail-head-photo { flex-shrink: 0; }
.detail-head-main { flex: 1 1 auto; min-width: 0; }
/* Kompaktes Foto (~120px) in der Kopf-Sidebar — uebersteuert .bild-gross (180px) gezielt. */
.detail-head-photo .bild-gross,
.detail-head-photo .bild-gross.bild-placeholder-lg { width: 120px; height: 120px; }
.detail-head-photo .bild-gross.bild-placeholder-lg .ico svg { width: 44px; height: 44px; }
/* V0.76: Firmen-Logos (Subunternehmer-Ansicht) im 120px-Quadrat NICHT verzerren —
   contain + heller Grund + dezente Kante; gilt nur fuer .bild-logo, Fotos bleiben cover. */
.detail-head-photo .bild-gross.bild-logo {
  object-fit: contain;
  background: #fff;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
@media (max-width: 560px) {
  /* Schmale Screens: Foto ueber die Kerndaten stapeln (statt nebeneinander). */
  .detail-head { flex-direction: column; gap: 10px; align-items: flex-start; }
}

@media (max-width: 1000px) {
  /* Mittlere Screens: 3 -> 2 Spalten; nur die ersten beiden ohne obere Linie. */
  .detail-grid-3 { grid-template-columns: 1fr 1fr; }
  .detail-grid-3 .detail-row:nth-child(3) { border-top: 1px solid var(--color-border); }
}
@media (max-width: 560px) {
  /* Schmale Screens: wieder 1-spaltig (Lesbarkeit), Label ueber Wert. */
  .detail-grid, .detail-grid-3, .detail-grid-4 { grid-template-columns: 1fr; }
  .detail-row { grid-template-columns: 1fr; gap: 2px; padding: 7px 0; }
  .detail-row:nth-child(2) { border-top: 1px solid var(--color-border); }
  .detail-row:first-child { border-top: none; }
  .detail-grid-3 .detail-row:nth-child(3) { border-top: 1px solid var(--color-border); }
  .detail-grid-4 .detail-row:nth-child(2),
  .detail-grid-4 .detail-row:nth-child(3),
  .detail-grid-4 .detail-row:nth-child(4) { border-top: 1px solid var(--color-border); }
}

/* =========================================================================
   App-Footer ("IBAZ Control ist ein Produkt von IBAZ SW")
   ========================================================================= */
.app-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 12px 24px;
  border-top: 1px solid var(--color-border);
  background: rgba(255, 255, 255, .6);
}
.app-footer .footer-text { letter-spacing: .2px; }
/* V0.43 (#2): "powered by" in Rot. */
.app-footer .footer-powered { color: var(--color-rot-text); font-weight: 600; }
.app-footer .footer-sw-logo { height: 38px; width: auto; object-fit: contain; display: block; }
.app-footer strong { color: var(--color-primary-dark); font-weight: 700; letter-spacing: .2px; }

/* =========================================================================
   Reduced Motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  /* V0.24: harte Abschaltung ALLER Bewegung (Barrierefreiheit-Pflicht). Animationen + Transitions
     komplett aus -> kein Einschwung, kein Lift, kein Bounce. Die JS-Animationen (anime.js) sind
     zusaetzlich ueber animOk()/REDUCED_MOTION bereits ausgeschaltet (doppelte Sicherheit). */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   BILDER (Logos / Mitarbeiter-Lichtbilder / Objektfotos) — V0.07
   Bilder sind data-URIs direkt im Datensatz (kein Upload-Endpoint). XSS-sicher:
   immer via <img src=dataUri>; der Server erzwingt image/* (Magic-Bytes).
   ========================================================================= */

/* Kleines Tabellen-/Listen-Thumbnail */
.bild-thumb {
  width: 34px; height: 34px;
  /* V0.48: contain statt cover — das GANZE Logo wird eingepasst (CEO-Foto 10.06.:
     cover beschnitt hochgeladene Logos auf einen Ausschnitt). */
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: #fff;
  flex-shrink: 0;
  display: block;
}
/* Ausnahme: runde MA-Avatare (Gesichter) bleiben formatfüllend. */
.bild-avatar { object-fit: cover; }

/* ===== V0.48: Bild-Zuschneiden-Overlay (eigenes Fixed-Overlay, nicht #modal) ===== */
.crop-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.crop-card {
  background: var(--color-card, #fff);
  border-radius: var(--radius, 12px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  padding: 16px;
  width: 340px; max-width: 95vw;
  display: flex; flex-direction: column; gap: 10px;
}
.crop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crop-hint { font-size: 12px; color: var(--color-text-muted, #64748B); line-height: 1.4; }
.crop-viewport {
  position: relative; overflow: hidden; margin: 0 auto;
  background: #fff;
  border: 2px dashed var(--color-primary, #0369A1);
  border-radius: 8px;
  cursor: grab; touch-action: none; user-select: none;
}
.crop-viewport:active { cursor: grabbing; }
.crop-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; pointer-events: none; }
.crop-zoom-row { display: flex; align-items: center; gap: 10px; }
.crop-zoom-lab { font-size: 12px; font-weight: 600; color: var(--color-text-muted, #64748B); }
.crop-zoom { flex: 1; }
.crop-actions { display: flex; justify-content: flex-end; gap: 8px; }
html[data-theme="dark"] .crop-card { background: var(--color-card, #1E293B); }
html[data-theme="dark"] .crop-viewport { background: #fff; }
/* Rundes Profilbild (Mitarbeiter-Avatar in der Tabelle) */
.bild-avatar { border-radius: 50%; }
/* Groessere Vorschau (Upload-Feld) */
.bild-thumb-lg { width: 96px; height: 96px; border-radius: var(--radius); }

/* Platzhalter (kein Bild): dezentes Icon-Feld in Thumbnail-Groesse */
.bild-placeholder {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--color-border-strong);
  background: #F8FAFC;
  color: #94A3B8;
  flex-shrink: 0;
}
.bild-placeholder .ico svg { width: 18px; height: 18px; }
.bild-avatar.bild-placeholder { border-radius: 50%; }
.bild-placeholder-lg { width: 96px; height: 96px; border-radius: var(--radius); }
.bild-placeholder-lg .ico svg { width: 40px; height: 40px; }
/* MA-Ansicht: Platzhalter (kein Lichtbild) folgt der groesseren Foto-Groesse (V0.10, 180px),
   ohne den 96px-Upload-Platzhalter zu beeinflussen (greift nur in Kombination mit .bild-gross). */
.bild-gross.bild-placeholder-lg { width: 180px; height: 180px; }
.bild-gross.bild-placeholder-lg .ico svg { width: 64px; height: 64px; }

/* Grosses Bild in Detail-Ansichten (z.B. MA-Ansicht) */
.bild-gross {
  width: 180px; height: 180px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #fff;
  display: block;
}
.bild-gross-rund { border-radius: 50%; }

/* Upload-Feld: Vorschau links, Buttons rechts */
.bild-upload {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-card);
}
.bild-upload-preview { flex-shrink: 0; }
.bild-upload-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Verstecktes natives Datei-Input (per "Bild wählen"-Button ausgeloest) */
.bild-file-input {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Zell-Wrapper: Thumbnail + Text nebeneinander, vertikal zentriert */
.ko-kunde-cell,
.ko-obj-cell { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ko-kunde-cell .kunde-badge,
.ko-obj-cell .ko-obj-name { min-width: 0; }
/* V0.86: dezenter Farbpunkt vor dem Objektnamen (Planungs-Farbe) */
.ko-obj-farbdot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }

/* Grosses Foto zentriert ueber den Personendaten (MA-Ansicht) */
.ma-view-foto { display: flex; justify-content: center; padding: 4px 0 12px; }

/* =========================================================================
   KARTE (Übersicht, V0.11) — Leaflet-Karte als Dashboard-Block.
   #mapContainer braucht eine feste Höhe, sonst rendert Leaflet 0px (grau).
   Der Container bildet via position/z-index einen eigenen Stacking-Kontext,
   damit Leaflets interne z-indizes Modal (100) / Toast (200) NICHT überlagern.
   ========================================================================= */
.map-block {
  margin-top: 18px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px 16px;
}
.map-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.map-title {
  margin: 0; font-size: 17px; font-weight: 700; color: var(--color-text-strong);
}
.map-layers { display: flex; gap: 6px; flex-wrap: wrap; }
.map-layer-btn {
  appearance: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-app-bg-2);
  color: var(--color-text-muted);
  transition: background .12s, color .12s, border-color .12s;
}
.map-layer-btn:hover { border-color: var(--color-primary-light); color: var(--color-text); }
.map-layer-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.map-status {
  margin-left: auto;
  font-size: 13px; color: var(--color-text-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.map-status[hidden] { display: none; }

/* V0.19 (Feature 7) — Distanzmessung (Buttons + Panel). */
.map-measure { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.map-measure-btn {
  appearance: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-app-bg-2);
  color: var(--color-text-muted);
  transition: background .12s, color .12s, border-color .12s;
}
.map-measure-btn:hover { border-color: var(--color-primary-light); color: var(--color-text); }
.map-measure-btn.active {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.map-measure-reset:hover { border-color: #dc2626; color: #dc2626; }
.map-measure-panel {
  margin: -2px 0 10px;
  font-size: 13px; font-weight: 600;
  color: var(--color-text-strong);
  background: var(--color-app-bg-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 7px 11px;
}
.map-measure-panel[hidden] { display: none; }
/* Tooltip-Optik der Mess-Linie (Leaflet-Tooltip; statisch, kein Nutzer-HTML). */
.leaflet-tooltip.measure-tooltip {
  font-weight: 700; color: #b91c1c;
  background: #fff; border: 1px solid #dc2626;
  box-shadow: var(--shadow-sm);
}

.map-container {
  position: relative;
  z-index: 0;                 /* eigener Stacking-Kontext (kapselt Leaflet-z-indizes) */
  height: 480px;              /* V0.17: groessere Karte (vorher 330px) */
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-app-bg);  /* dezenter Hintergrund, bis die Tiles laden */
}

.map-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px;
  font-size: 12px; color: var(--color-text-muted);
}
.map-attr { font-weight: 600; }
.map-hint { font-style: italic; }

/* Marker-Pin (L.divIcon mit eigenem SVG) — kein grauer Hintergrund/Border vom divIcon */
.map-pin { background: transparent; border: none; }
.map-pin svg { display: block; filter: drop-shadow(0 1px 2px rgba(15,23,42,.35)); }

/* Popup-Inhalt (DOM-basiert, XSS-sicher) */
.map-popup { font-size: 13px; line-height: 1.45; max-width: 240px; }
.map-popup-name { font-weight: 700; color: var(--color-text-strong); margin-bottom: 2px; }
.map-popup-typ { font-size: 11.5px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.map-popup-adr { color: var(--color-text); }

/* "Nicht verortet"-Liste unter der Karte */
.map-missing {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--color-offen-bg);
  border: 1px solid var(--color-offen);
  border-radius: var(--radius-sm);
  font-size: 13px; color: var(--color-offen-text);
}
.map-missing[hidden] { display: none; }
.map-missing-head { font-weight: 700; margin-bottom: 6px; }
.map-missing-list { list-style: none; margin: 0 0 6px; padding: 0; }
.map-missing-list li { padding: 2px 0; }
.map-missing-name { font-weight: 600; }
.map-missing-adr { color: var(--color-text-muted); }
.map-missing-hint { font-size: 12px; font-style: italic; color: var(--color-text-muted); }

/* =========================================================================
   V0.26 (Feature 3) — Karte: Adresssuche + Distanzliste zu Mitarbeitern
   ========================================================================= */
.map-search {
  display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap;
}
.map-search input[type="text"] {
  appearance: none;
  font: inherit; font-size: 13px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-app-bg-2);
  color: var(--color-text);
  outline: none;
  width: 170px;
  transition: border-color .12s, box-shadow .12s;
}
.map-search input[type="text"]:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .15);
}
.map-search button {
  appearance: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-app-bg-2);
  color: var(--color-text-muted);
  transition: background .12s, color .12s, border-color .12s;
}
.map-search button:hover { border-color: var(--color-primary-light); color: var(--color-text); }
#mapSearchBtn { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 700; }
#mapSearchBtn:hover { background: var(--color-primary-dark, #1d4ed8); border-color: var(--color-primary-dark, #1d4ed8); color: #fff; }
#mapSearchClear { font-size: 16px; font-weight: 700; padding: 4px 9px; }
#mapSearchClear:hover { border-color: #dc2626; color: #dc2626; }

.map-search-result {
  margin: -2px 0 10px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 10px 13px;
  font-size: 13px;
}
.map-search-result[hidden] { display: none; }
.map-sr-head { font-weight: 700; color: var(--color-text-strong); margin-bottom: 8px; }
.map-sr-empty { color: var(--color-text-muted); font-style: italic; }
.map-sr-list { display: flex; flex-direction: column; gap: 4px; }
.map-search-ma {
  appearance: none; cursor: pointer;
  width: 100%; text-align: left;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-app-bg-2);
  font: inherit; font-size: 13px;
  color: var(--color-text);
  transition: background .1s, border-color .1s;
}
.map-search-ma:hover { background: #EFF6FF; border-color: var(--color-primary-light); }
.map-search-ma:focus-visible { outline: none; box-shadow: var(--ring); }
.map-sr-name { font-weight: 600; color: var(--color-text-strong); }
.map-sr-dist { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 12.5px; }

/* ============ DOKUMENTE je Entitaet (V0.13) ============ */
.dok-modal { display: flex; flex-direction: column; gap: 16px; }
.dok-liste { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.dok-laden, .dok-empty { font-size: 13px; color: var(--color-text-muted); padding: 8px 2px; }
.dok-err { color: #B91C1C; }
/* V0.61: Dokumente nach Kategorie gruppiert (aufklappbare Ordner) */
.dok-gruppe { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.dok-gruppe-kopf {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; background: #F1F5F9; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--color-text-strong); text-align: left;
}
.dok-gruppe-kopf:hover { background: #E2E8F0; }
.dok-gruppe-kopf:focus-visible { outline: none; box-shadow: var(--ring); }
.dok-gruppe-caret { flex-shrink: 0; width: 14px; color: var(--color-text-muted); }
.dok-gruppe-titel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dok-gruppe-anzahl {
  flex-shrink: 0; min-width: 20px; text-align: center; font-size: 11px; font-weight: 600;
  color: var(--color-text-muted); background: #fff; border: 1px solid var(--color-border);
  border-radius: 9px; padding: 1px 7px;
}
.dok-gruppe-inhalt { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #F8FAFC; }
html[data-theme="dark"] .dok-gruppe-kopf { background: var(--color-app-bg-2); color: var(--color-text-strong); }
html[data-theme="dark"] .dok-gruppe-kopf:hover { background: var(--color-card); }
html[data-theme="dark"] .dok-gruppe-anzahl { background: var(--color-card); border-color: var(--color-border); }
html[data-theme="dark"] .dok-gruppe-inhalt { background: var(--color-app-bg); }
/* =========================================================================
   V0.87 — Dokumente als Kacheln (Google-Drive-Stil), ersetzt die fruehere
   .dok-row-Zeilenliste. Grid pro Kategorie (.dok-gruppe-inhalt traegt jetzt
   zusaetzlich .dok-kachel-grid). Aktionen IMMER sichtbar (kein hover-only —
   Touch-Geraete/Companion-naher Bedienstil).
   ========================================================================= */
.dok-kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.dok-kachel {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .16s ease, transform .16s ease;
}
.dok-kachel:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.dok-kachel-preview {
  position: relative;
  height: 110px; flex-shrink: 0;
  background: var(--color-app-bg-2);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.dok-kachel-preview-clickable { cursor: pointer; }
.dok-kachel-preview-clickable:focus-visible { outline: none; box-shadow: inset var(--ring); }
.dok-kachel-thumb {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  background: var(--color-app-bg-2);
}
.dok-kachel-preview-icon .dok-kachel-ico { color: var(--color-text-muted); display: inline-flex; }
.dok-kachel-preview-icon .dok-kachel-ico svg { width: 40px; height: 40px; }
.dok-kachel-name {
  font-size: 13px; font-weight: 500; color: var(--color-text-strong);
  padding: 8px 10px 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  min-height: 34px; line-height: 1.25;
  word-break: break-word;
}
.dok-kachel-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 0 10px 8px;
  font-size: 11.5px; color: var(--color-text-muted);
}
.dok-kachel-datum { flex-shrink: 0; }
.dok-kachel-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  padding: 6px 8px;
  border-top: 1px solid var(--color-border);
  background: var(--color-app-bg-2);
  margin-top: auto;
}
a.dok-dl, a.dok-view { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
html[data-theme="dark"] .dok-kachel { background: var(--color-card); border-color: var(--color-border); }
html[data-theme="dark"] .dok-kachel-preview { background: var(--color-app-bg); border-color: var(--color-border); }
html[data-theme="dark"] .dok-kachel-actions { background: var(--color-app-bg); border-color: var(--color-border); }
@media (max-width: 560px) { .dok-kachel-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }

.dok-upload {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border-strong);
}
.dok-file-input { display: none; }
.dok-hint { font-size: 12px; color: var(--color-text-muted); }
.dok-status { font-size: 12.5px; color: var(--color-text-muted); min-height: 16px; }

/* ============ COMPANION-TAB (V0.28) ============ */
.companion-access { margin-bottom: 18px; }
.companion-card {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 28px;
  padding: 18px 20px; background: var(--color-card);
  border: 1px solid var(--color-border); border-radius: 12px;
}
.companion-card-title { width: 100%; font-weight: 700; color: var(--color-text-strong); font-size: 15px; }
.companion-hint { flex: 1 1 320px; margin: 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.5; }
.companion-link {
  display: inline-block; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--color-primary); font-size: 14px; padding: 8px 12px;
  background: #F0F9FF; border: 1px solid var(--color-border); border-radius: 8px; text-decoration: none;
}
.companion-link:hover { background: #E0F2FE; }
.companion-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.companion-qr canvas { border: 1px solid var(--color-border); border-radius: 6px; }
.companion-qr-cap { font-size: 12px; color: var(--color-text-muted); }
/* V0.38: LAN-Link-Zeilen im Companion-Zugang (Link + QR nebeneinander, umbruchfaehig) */
.companion-lan-list { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.companion-lan-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.modal-info { margin: 0 0 12px; font-size: 13.5px; color: var(--color-text); line-height: 1.5; }
.initial-pw-field {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 18px; letter-spacing: .06em; text-align: center; font-weight: 700;
  color: var(--color-text-strong); background: #F0F9FF;
}

/* =========================================================================
   V0.30 — Neue Bausteine (#4, #6, #7, #8)
   ========================================================================= */

/* --- #7: MA-Modal als Sektions-Tabs (EIN Fenster, kein Scroll je Tab) --- */
.ma-tabs-wrap { display: flex; flex-direction: column; gap: 12px; }
/* Tab-Leiste: nutzt .segmented/.seg; darf umbrechen, Buttons touch-freundlich (>=40px). */
.ma-tabs.segmented {
  display: flex; flex-wrap: wrap; gap: 3px; width: 100%;
}
.ma-tabs .ma-tab-btn {
  flex: 1 1 auto; min-height: 40px; padding: 8px 12px; font-size: 13px;
  white-space: nowrap;
}
.ma-tab-panels { min-width: 0; }
/* Innen liegt je Panel ein .modal-form-compact-Grid -> erbt das kompakte 3-Spalten-Layout. */
.ma-tab-grid { margin: 0; }
.ma-tab-panel[hidden] { display: none; }

/* --- #6: Objektzuweisung mit Lohn-Input je Objekt --- */
.objzuweis-grid { display: flex; flex-direction: column; gap: 6px; }
/* #5: flache Liste ALLER Objekte -> bei vielen Eintraegen scrollbar, damit der Tab nicht zu hoch wird. */
.objzuweis-list {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px;
}
.objzuweis-row {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px; border-radius: var(--radius-sm); background: #F8FAFC;
}
.objzuweis-check { flex: 1 1 auto; min-width: 0; margin: 0; }
.objzuweis-lohn-wrap { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.objzuweis-lohn {
  width: 78px; font-size: 12.5px; padding: 5px 7px; text-align: right;
}
.objzuweis-lohn.is-off { opacity: .45; }
.objzuweis-lohn-unit { font-size: 11.5px; color: var(--color-text-muted); }
@media (max-width: 520px) {
  .objzuweis-row { flex-wrap: wrap; }
  .objzuweis-lohn { width: 100%; }
}

/* --- #6: Lohnkosten-Box (Anzeige, unter der Objekt-Matrix) --- */
.lohnkosten-box {
  margin-top: 14px; border: 1px solid var(--color-border); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-sm); overflow: hidden;
  max-width: 520px;
}
.lohnkosten-title {
  font-size: 12.5px; font-weight: 700; color: var(--color-text-strong);
  padding: 9px 12px; background: #F8FAFC; border-bottom: 1px solid var(--color-border);
}
/* V0.37 (#1): Umschalter Regulär | X in der Lohnkosten-Box (nur wenn zweiter Lohn freigeschaltet). */
.lohnkosten-seg {
  display: inline-flex; gap: 0; margin: 9px 12px 4px;
}
.lohnkosten-seg .seg { padding: 4px 14px; font-size: 12.5px; }
.lohnkosten-list { display: flex; flex-direction: column; }
.lohnkosten-row, .lohnkosten-foot {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;
  padding: 6px 12px; font-size: 13px;
}
.lohnkosten-row + .lohnkosten-row { border-top: 1px solid #F1F5F9; }
.lohnkosten-foot {
  border-top: 2px solid var(--color-border); background: #F8FAFC;
  font-weight: 700; color: var(--color-text-strong);
}
.lohnkosten-box .lk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lohnkosten-box .lk-detail { color: var(--color-text-muted); font-size: 12px; }
.lohnkosten-box .lk-sum { text-align: right; white-space: nowrap; }
/* V0.36 (K1-B): MA ohne gepflegten Stundensatz sichtbar markieren, statt still 0 € zu rechnen. */
.lohnkosten-row.satz-fehlt .lk-name { font-style: italic; color: var(--color-rot-text); }
.lohnkosten-row.satz-fehlt .lk-sum { color: var(--color-text-muted); }
.lohnkosten-box .lk-badge-satzfehlt {
  display: inline-block; font-style: italic; font-weight: 700; font-size: 11px;
  color: var(--color-rot-text); background: #FEF2F2;
  border: 1px solid #FECACA; border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}
.lohnkosten-hinweis {
  padding: 7px 12px; font-size: 12px; font-style: italic; font-weight: 600;
  color: var(--color-rot-text); background: #FEF2F2; border-top: 1px solid #FECACA;
}

/* --- #4a: klickbares Besetzungs-Badge + Mehrschicht-Popup-Zeilenbuttons --- */
.om-badge-btn { cursor: pointer; border: 1px solid transparent; font-family: var(--font-mono); }
.om-badge-btn:hover { filter: brightness(.96); text-decoration: underline; }
.om-badge-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.shift-popup-rowbtns { display: inline-flex; gap: 6px; flex-shrink: 0; }
.shift-popup-rm.btn-danger { color: #B91C1C; border-color: #FECACA; }
.shift-popup-rm.btn-danger:hover { background: #FEF2F2; border-color: var(--color-konflikt); }

/* --- #4b: "Zeitraum löschen"-Button erbt .btn.btn-danger; nur Sichtbarkeit per [hidden] --- */
#zeitraumDelete[hidden] { display: none; }

/* --- #8: Companion-Tabelle kompakter (gescoped, nicht global) --- */
#companionTable td, #companionTable th { padding: 6px 10px; font-size: 13px; line-height: 1.35; }
#companionTable .badge { font-size: 11px; padding: 1px 7px; }
#companionTable .btn-sm { padding: 4px 9px; font-size: 12px; }
#companionTable .row-actions { gap: 5px; }

/* =========================================================================
   V0.31 — Versions-Changelog ("Was ist neu")
   ========================================================================= */
.changelog { display: flex; flex-direction: column; gap: 16px; }
.changelog-intro { margin: 0 0 4px; font-size: 14px; color: var(--color-text); }
.cl-entry {
  padding: 14px 16px;
  background: var(--color-app-bg-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.cl-entry-first {
  background: linear-gradient(180deg, #F0F9FF 0%, #fff 70%);
  border-color: var(--color-primary-light);
}
.cl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 8px; }
.cl-version {
  font-family: var(--font-mono); font-weight: 700; font-size: 15px;
  color: var(--color-text-strong); letter-spacing: -.3px;
}
.cl-version-current { color: var(--color-primary); }
.cl-titel { font-weight: 600; font-size: 14px; color: var(--color-text); }
.cl-datum { font-size: 12.5px; color: var(--color-text-muted); margin-left: auto; }
.cl-badge-neu {
  font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--color-besetzt-bg); color: var(--color-besetzt-dark);
  border: 1px solid var(--color-besetzt);
}
.cl-punkte { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.cl-punkte li { font-size: 13.5px; color: var(--color-text); line-height: 1.5; }

/* =========================================================================
   V0.31 — Planung: Objekt-Übersicht (Kachel-Raster) vor dem Objekt-Plan
   ========================================================================= */
/* Umschaltung Übersicht <-> Objekt-Plan: jeweils per [hidden] gesteuert. */
#plan-uebersicht[hidden], #plan-objektDetail[hidden] { display: none !important; }

.plan-ueb-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px;
}
.plan-ueb-title { font-size: 17px; font-weight: 700; color: var(--color-text-strong); margin: 0; }
.plan-ueb-sub { font-size: 13px; color: var(--color-text-muted); }
.plan-ueb-empty {
  padding: 28px 18px; text-align: center; color: var(--color-text-muted); font-size: 14px;
  background: var(--color-app-bg-2); border: 1px dashed var(--color-border-strong); border-radius: var(--radius);
}

.objekt-kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.objekt-kachel {
  display: flex; flex-direction: column; gap: 10px;
  text-align: left; width: 100%;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-border-strong); /* per JS auf Kundenfarbe gesetzt */
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-family: inherit; color: inherit;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.objekt-kachel:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.objekt-kachel:focus-visible { outline: none; box-shadow: var(--ring); }
.objekt-kachel:active { transform: translateY(-1px); }
/* V0.81 (CEO-Fix): flex-wrap — bei Kunde-Badge + Freigabe-Badge gleichzeitig (z.B. "Elbestraße"
   in der IBAZ-Sicht) reichte der Platz in einer Zeile nicht; Badges rutschen jetzt in die naechste
   Zeile statt den Objektnamen (.ok-name) auf ~0 Breite zu quetschen (siehe .badge-partner/-geteilt). */
.ok-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: nowrap; }
.ok-name { font-size: 15px; font-weight: 700; color: var(--color-text-strong); line-height: 1.25; min-width: 0; flex: 1 1 60%; word-break: break-word; }
.ok-kunde-badge {
  flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill);
  white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis;
}
/* V0.97 (CEO): Auftraggeber-Badge oben rechts (‹.ok-top› ist jetzt nowrap) — Freigabe-Hinweise
   kommen darunter in eine eigene Zeile, damit sie den Badge nicht aus der Ecke verdraengen. */
.ok-freigaben { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
/* V0.97 (CEO): Suchfeld ueber der Objektzuweisungs-Checkbox-Liste. */
.objzuweis-suche {
  width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-app-bg-2); color: var(--color-text-strong);
}
.objzuweis-suche:focus { outline: none; border-color: var(--color-primary); }
.ok-meta { font-size: 14.5px; font-weight: 600; color: var(--color-text-strong); line-height: 1.4; min-width: 0; word-break: break-word; }
.ok-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.ok-stat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--color-text);
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--color-app-bg-2); border: 1px solid var(--color-border);
}
.ok-stat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ok-stat-voll .ok-stat-dot { background: var(--color-besetzt); }
.ok-stat-teil .ok-stat-dot { background: var(--color-offen); }
.ok-stat-offen .ok-stat-dot { background: var(--color-konflikt); }
.ok-stat-leer { color: var(--color-text-muted); font-weight: 500; }
/* V0.66: Bewerber-Status-Dropdown direkt in der Zeile (farbcodiert nach Status). */
.bw-status-select { min-width: 120px; max-width: 150px; font-size: 12.5px; padding: 5px 8px; font-weight: 600; cursor: pointer; }
.bw-status-select.bw-status-neu { border-color: #3b82f6; }
.bw-status-select.bw-status-in_pruefung { border-color: #d97706; }
.bw-status-select.bw-status-abgelehnt { border-color: #94a3b8; }
.bw-status-select.bw-status-eingestellt { border-color: #16a34a; color: #166534; }
/* V0.66: In-App-Bestätigungsbox (confirmDialog) — ersetzt das vom Browser unterdrückbare window.confirm. */
.confirm-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.confirm-box { background: #fff; border-radius: 14px; max-width: 440px; width: 100%; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.confirm-title { font-size: 17px; font-weight: 700; color: var(--color-text-strong); margin-bottom: 8px; }
.confirm-msg { font-size: 14.5px; color: var(--color-text-strong); line-height: 1.5; white-space: pre-line; margin: 0 0 18px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* "← Zurück zur Übersicht" über dem Objekt-Plan */
.plan-back-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.plan-back-btn { flex-shrink: 0; }
.plan-back-objname { font-size: 14px; font-weight: 600; color: var(--color-text-strong); min-width: 0; word-break: break-word; }

@media (max-width: 560px) {
  .objekt-kachel-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   WKS — Wächterkontrollsystem (V0.32)
   ========================================================================= */
.wks-content { margin-top: 8px; }
.wks-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 16px; padding: 12px 14px;
  background: var(--color-app-bg-2); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.wks-bar-label { font-size: 13px; font-weight: 600; color: var(--color-text-muted); }
.wks-bar .inp { min-width: 180px; }
.wks-bar-protokoll .inp[type="date"] { min-width: 150px; }
.wks-loading { padding: 18px; color: var(--color-text-muted); font-size: 14px; }

.wks-list { display: flex; flex-direction: column; gap: 12px; }
.wks-card {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 14px 16px; background: var(--color-card);
  border: 1px solid var(--color-border); border-radius: var(--radius);
}
.wks-card-qr { flex-shrink: 0; line-height: 0; }
.wks-card-qr canvas { border-radius: var(--radius-sm); }
.wks-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wks-card-title { font-size: 15px; font-weight: 700; color: var(--color-text-strong); word-break: break-word; }
.wks-card-code { font-size: 12px; color: var(--color-text-muted); letter-spacing: 0.4px; }
.wks-card-desc { font-size: 13px; color: var(--color-text-muted); word-break: break-word; }
.wks-card-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; flex-shrink: 0; }

.wks-rg-punkte { margin: 6px 0 0; padding-left: 20px; font-size: 13px; color: var(--color-text-muted); }
.wks-rg-punkte li { margin: 2px 0; }

/* Rundgang-Editor (im Modal) */
.wks-rg-select, .wks-rg-avail {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; background: var(--color-app-bg-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.wks-rg-sub { font-size: 12px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.wks-rg-hint { font-size: 13px; color: var(--color-text-muted); }
.wks-rg-row { display: flex; align-items: center; gap: 8px; }
.wks-rg-num { font-weight: 700; color: var(--color-text-strong); min-width: 22px; }
.wks-rg-pname { flex: 1; min-width: 0; font-size: 14px; word-break: break-word; }
.wks-rg-add { margin: 0; }

/* V0.67: Punkt-Reihenfolge per Drag&Drop (↑/↓ bleiben als Touch/A11y-Fallback) */
.wks-rg-draggable { cursor: grab; }
.wks-rg-draggable:active { cursor: grabbing; }
.wks-rg-dragging { opacity: 0.45; }
.wks-rg-dragover { outline: 2px dashed var(--color-accent, #2563eb); outline-offset: -2px; background: var(--color-app-bg-2); border-radius: var(--radius-sm); }
.wks-rg-handle { color: var(--color-text-muted); cursor: grab; user-select: none; font-size: 15px; }

/* KP-Inline-Verwaltung im Rundgang-Modal (V0.66) */
.wks-kp-inline { display: flex; flex-direction: column; gap: 8px; }
.wks-kp-inline-addrow { display: flex; gap: 8px; align-items: center; }
.wks-kp-inline-addrow .inp { flex: 1; min-width: 0; }
.wks-kp-inline-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: var(--color-app-bg-2); border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); }
.wks-kp-inline-editrow { display: flex; gap: 8px; align-items: center; padding: 6px 8px;
  background: var(--color-app-bg-2); border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent); }
.wks-kp-inline-editrow .inp { flex: 1; min-width: 0; }
.wks-kp-inline-qr { flex-shrink: 0; line-height: 0; }
.wks-kp-inline-qr canvas { border-radius: 3px; }
.wks-kp-inline-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wks-kp-inline-name { font-size: 14px; font-weight: 600; color: var(--color-text-strong); word-break: break-word; }
.wks-kp-inline-code { font-size: 11px; color: var(--color-text-muted); letter-spacing: 0.5px; }
.wks-kp-inline-acts { display: flex; gap: 4px; flex-shrink: 0; }
.wks-modal-section-head { font-size: 11px; font-weight: 700; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.8px; padding: 6px 0 2px;
  border-bottom: 1px solid var(--color-border); margin-top: 4px; }
.wks-zeitf-row { display: flex; align-items: center; gap: 8px; }
.wks-zeitf-sep { font-size: 13px; color: var(--color-text-muted); white-space: nowrap; }

/* QR-Modal (groß) */
.wks-qr-modal { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; }
.wks-qr-modal canvas { border-radius: var(--radius-sm); }
/* V0.38 — WKS-Ausbau: Bemerkungs-Spalte, GPS-Karte, Runden-Badges */
.wks-notiz-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wks-scan-map-wrap { display: flex; flex-direction: column; gap: 8px; }
.wks-scan-map { height: 320px; border-radius: var(--radius-sm); overflow: hidden; }
.badge-laufend { background: rgba(3, 105, 161, 0.12); color: #0369A1; }
.badge-abgebrochen { background: rgba(220, 38, 38, 0.10); color: #b91c1c; }
.wks-bar-select { max-width: 200px; }
.wks-qr-name { font-size: 18px; font-weight: 700; color: var(--color-text-strong); text-align: center; }
.wks-qr-obj { font-size: 14px; color: var(--color-text-muted); }
.wks-qr-code { font-size: 13px; color: var(--color-text-muted); letter-spacing: 1px; }

@media (max-width: 560px) {
  .wks-card { flex-direction: column; }
  .wks-card-actions { width: 100%; }
}

/* =====================================================================
   V0.33 — Rechnungen (Toolbar, Positionen-Editor, Summen) + Firmen-Übersicht
   ===================================================================== */
.re-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.re-toolbar-left { display: flex; gap: 8px; flex-wrap: wrap; }
.re-toolbar-right { display: flex; flex: 1; justify-content: flex-end; min-width: 180px; }
.re-suche-input { min-width: 220px; max-width: 340px; width: 100%; }

/* Positionen-Editor (Modal) */
.re-pos-table { width: 100%; }
.re-pos-table th, .re-pos-table td { vertical-align: middle; }
.re-pos-table .re-pos-num { max-width: 110px; text-align: right; }
.re-pos-table .re-pos-sum { white-space: nowrap; font-weight: 600; }
.re-pos-foot { margin-top: 8px; }
.re-summen {
  margin-top: 14px; margin-left: auto; width: 260px; max-width: 100%;
  display: flex; flex-direction: column; gap: 4px;
}
.re-summen-zeile { display: flex; justify-content: space-between; padding: 2px 0; }
.re-summen-brutto {
  font-weight: 700; font-size: 16px; border-top: 2px solid var(--color-border, #ccc);
  margin-top: 4px; padding-top: 8px;
}

/* Firmen-Übersicht (read-only) */
.firma-uebersicht { margin-bottom: 18px; }
.firma-uebersicht-head {
  display: flex; align-items: center; gap: 14px; margin: 4px 0 10px;
}
.firma-uebersicht-name { font-size: 17px; font-weight: 700; }

@media (max-width: 560px) {
  .re-summen { width: 100%; }
  .re-toolbar-right { justify-content: flex-start; }
}

/* =====================================================================
   V0.34 — Firmierung-Übersicht ausrichten · Auto-Position aus Schichten ·
            Planungs-Übersicht volle Breite
   ===================================================================== */

/* --- TASK 1: Firmierung-Übersicht sauber ausrichten ---------------------
   GESCOPT auf .firma-uebersicht — das globale .detail-row (MA-/Objekt-/Kunden-
   Detailansichten) bleibt UNVERÄNDERT. Ziel: feste Label-Spalte, damit alle
   Labels auf EINER vertikalen Linie enden und die Werte bündig starten.
   Pro Sektion EINSPALTIG (klare, gleich lange Zeilen) statt 2-/3-spaltig. */
.firma-uebersicht .detail-grid,
.firma-uebersicht .detail-grid-3 { grid-template-columns: 1fr; column-gap: 0; }
.firma-uebersicht .detail-row {
  grid-template-columns: 220px 1fr;
  align-items: baseline;
  gap: 14px;
  padding: 6px 0;
  border-top: 1px solid var(--color-border);
}
/* Nur die ALLERERSTE Zeile je Sektion ohne obere Linie (sauberer Sektionsbeginn).
   Das einspaltige Grid macht die Top-Border-Resets fuer Spalte 2/3 obsolet -> zuruecksetzen. */
.firma-uebersicht .detail-row:first-child { border-top: none; }
.firma-uebersicht .detail-row:nth-child(2),
.firma-uebersicht .detail-grid-3 .detail-row:nth-child(3) { border-top: 1px solid var(--color-border); }
.firma-uebersicht .detail-label { line-height: 1.45; }
.firma-uebersicht .detail-value { line-height: 1.45; }
/* Logo + Name im Kopf ordentlich ausrichten (Logo nicht riesig). */
.firma-uebersicht-head .bild-thumb,
.firma-uebersicht-head img { max-height: 56px; max-width: 180px; object-fit: contain; }

@media (max-width: 560px) {
  /* Schmale Screens: Label ueber Wert (Lesbarkeit), Linien bleiben konsistent. */
  .firma-uebersicht .detail-row { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
  .firma-uebersicht .detail-row:nth-child(2) { border-top: 1px solid var(--color-border); }
}

/* --- TASK 2a: "Position aus Schichten"-Block im Rechnungs-Modal --------- */
.re-auto-box {
  margin: 4px 0 6px; padding: 12px 14px;
  background: var(--color-app-bg-2); border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.re-auto-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.re-auto-hint { font-size: 13px; color: var(--color-text-muted); }
.re-auto-hint-err { color: var(--color-konflikt, #c0392b); font-weight: 600; }

/* --- TASK 3: Planungs-Übersicht volle Breite ---------------------------
   body.plan-active hebt die .content-max-width bereits auf. Hier zusaetzlich
   ABSICHERN, dass das Kachel-Raster die VOLLE Breite fuellt (auto-fit statt
   auto-fill kollabiert leere Spuren -> Kacheln dehnen sich, kein „mittig/schmal").
   Kein zentrierendes max-width/margin am Uebersicht-Container. */
#plan-uebersicht { width: 100%; max-width: none; margin: 0; }
#plan-uebersicht .objekt-kachel-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  width: 100%;
}

/* =========================================================================
   V0.35 — neue Komponenten
   ========================================================================= */

/* --- #6: Header-Tab-Icons (dezent, erben Textfarbe) --- */
.tab { display: inline-flex; align-items: center; gap: 7px; }
.tab-ico { line-height: 0; }
.tab-ico svg { width: 17px; height: 17px; display: block; }
.tab-lbl { display: inline-block; }

/* V2.28 (Rollen-Rechte): .tab { display:inline-flex } (siehe oben + Z. 171) hat dieselbe
   Spezifität wie die [hidden]-Regel der UA-Stylesheet — die Autor-Regel gewinnt, [hidden]
   bliebe also wirkungslos und der Tab bleibt trotz hidden-Attribut sichtbar. Explizite
   Override-Regel mit !important erzwingt das Verstecken zuverlässig (bekannte Haus-Falle).
   .btn hat dieselbe display:inline-flex-Falle (Backup-Knopf, GF-only) — gleiche Härtung. */
.tab[hidden] { display: none !important; }
#adminSubnav .seg[hidden] { display: none !important; }
#backupBtn[hidden] { display: none !important; }

/* --- #3: Kunden-Kacheln im Objekte-Tab (quadratisch) --- */
.kunden-kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.kunden-kachel {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  text-align: left; width: 100%;
  aspect-ratio: 1 / 1;
  justify-content: center;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-top: 5px solid var(--color-border-strong); /* per JS auf Kundenfarbe */
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-family: inherit; color: inherit;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
  overflow: hidden;
}
.kunden-kachel:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.kunden-kachel:focus-visible { outline: none; box-shadow: var(--ring); }
.kunden-kachel:active { transform: translateY(-1px); }
/* V0.37 (#4): Kundenlogo auf der Kachel (ersetzt das frühere Farbquadrat .kunden-kachel-farbe).
   Quadratische, abgerundete Box (Anlehnung an .bild-thumb). Enthält ein <img> (Logo) ODER einen
   Gebäude-Platzhalter (.bild-placeholder). Bei fehlendem Logo tönt JS die Box in Kundenfarbe. */
.kunden-kachel-logo {
  width: 48px; height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.kunden-kachel-logo .bild-thumb {
  width: 100%; height: 100%;
  border: 0; border-radius: 0; box-shadow: none;
  object-fit: contain; background: #fff;
}
.kunden-kachel-logo .bild-placeholder {
  width: 100%; height: 100%;
  border: 0; border-radius: 0; background: transparent;
  color: inherit; /* JS setzt color = Kundenfarbe beim Platzhalter */
}
.kunden-kachel-logo .bild-placeholder .ico svg { width: 24px; height: 24px; }
/* Platzhalter-Variante: dezenter Rahmen in Kundenfarbe (Hintergrund/Rahmen/Color via JS gesetzt). */
.kunden-kachel-logo.kk-logo-platzhalter { box-shadow: none; }
.kk-name { font-size: 16px; font-weight: 700; color: var(--color-text-strong); line-height: 1.25; word-break: break-word; }
.kk-anz { font-size: 13px; font-weight: 600; color: var(--color-primary); }
.kk-ap { font-size: 12.5px; color: var(--color-text-muted); word-break: break-word; }
.kk-status { align-self: flex-start; margin-top: 2px; }
@media (max-width: 560px) { .kunden-kachel-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* --- #8: "Nächste Rechnungsnummer"-Leiste in Admin → Rechnungen --- */
.re-nr-leiste {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 4px 0 14px; padding: 10px 14px;
  background: var(--color-app-bg-2); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.re-nr-label { font-size: 13px; font-weight: 600; color: var(--color-text-blue); }
.re-nr-input { width: 180px; max-width: 100%; }
.re-nr-hint { font-size: 12.5px; color: var(--color-text-muted); flex: 1 1 200px; }

/* --- #1: Dark-Mode-Schalter-Zeile (Admin → Einstellungen) --- */
.theme-toggle-row { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }
.theme-toggle-row input { width: 18px; height: 18px; accent-color: var(--color-primary); }

/* --- #4: Buchhaltung (Jahr/Monat-Baum) --- */
.buchhaltung { display: flex; flex-direction: column; gap: 8px; }
.bh-jahr-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 14px; padding: 10px 14px;
  background: linear-gradient(135deg, #E0F2FE 0%, #DBEAFE 100%);
  border: 1px solid var(--color-border); border-radius: var(--radius);
}
.bh-jahr-head:first-child { margin-top: 0; }
.bh-jahr-titel { font-size: 15px; font-weight: 700; color: var(--color-text-strong); }
.bh-jahr-summe { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--color-text-strong); }
.bh-monat { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-card); overflow: hidden; }
.bh-monat-summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 11px 14px; font-weight: 600; color: var(--color-text-strong);
  list-style: none; user-select: none;
}
.bh-monat-summary::-webkit-details-marker { display: none; }
.bh-monat-summary::before { content: "▸"; color: var(--color-text-muted); transition: transform .15s ease; }
.bh-monat[open] .bh-monat-summary::before { transform: rotate(90deg); }
.bh-monat-titel { font-size: 14px; }
.bh-monat-counts { font-size: 12.5px; color: var(--color-text-muted); font-weight: 500; }
.bh-monat-summe { margin-left: auto; font-weight: 700; }
.bh-monat-body { padding: 4px 14px 14px; border-top: 1px solid var(--color-border); }
.bh-abschnitt-titel { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--color-primary); margin: 14px 0 8px; }
.bh-leer { font-size: 13px; color: var(--color-text-muted); padding: 4px 0; }
.bh-table th, .bh-table td { padding: 9px 12px; }
.bh-dok-liste { display: flex; flex-direction: column; gap: 8px; }
.bh-dok-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-app-bg-2); color: var(--color-text-strong);
  text-decoration: none; font-size: 13px; font-weight: 500;
}
.bh-dok-link:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-sm); }
.bh-dok-name { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.bh-dok-meta { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.bh-monat-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border);
}
.bh-monat-foot-summe { font-weight: 700; color: var(--color-text-strong); }
.bh-monat-foot .btn { margin-left: auto; }

/* --- #5: Companion-Vorschau-Button-Zeile --- */
.companion-preview-row { margin-top: 12px; }

/* =========================================================================
   V0.35 (#1) — DARK MODE
   Override-Palette + gezielte Overrides der hartkodierten hellen Flaechen.
   Aktiviert via <html data-theme="dark"> (theme-init.js setzt es VOR dem CSS).
   Light-Mode bleibt 100% unveraendert (alle Regeln sind theme-gescoped).
   WCAG: Text >= 4.5:1 auf den Kartenflaechen (#F1F5F9 auf #1E293B ~ 12:1).
   ========================================================================= */
html[data-theme="dark"] {
  --color-primary: #38BDF8;
  --color-primary-light: #7DD3FC;
  --color-primary-dark: #0EA5E9;

  --color-besetzt: #22C55E;
  --color-besetzt-dark: #4ADE80;
  --color-besetzt-bg: #14301F;

  --color-offen: #F59E0B;
  --color-offen-bg: #3A2A12;
  --color-offen-text: #FCD34D;

  --color-konflikt: #F87171;
  --color-rot-bg: #3A1717;
  --color-rot-text: #FCA5A5;

  --color-app-bg: #0F172A;
  --color-app-bg-2: #1B273B;
  --color-card: #1E293B;

  --color-text-strong: #F1F5F9;
  --color-text: #CBD5E1;
  --color-text-blue: #BAE6FD;
  --color-text-muted: #94A3B8;

  --color-border: #334155;
  --color-border-strong: #475569;

  /* Schatten dezenter (auf dunklem Grund weniger sichtbar -> staerkere Opazitaet). */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow: 0 2px 8px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 34px rgba(0,0,0,.55);
  --shadow-primary: 0 2px 8px rgba(56,189,248,.28);
  --ring: 0 0 0 3px rgba(56,189,248,.5);
}

/* Body-Hintergrund (radial-Gradient war hellblau hartkodiert). */
html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 600px at 100% -10%, #15314A 0%, transparent 55%),
    var(--color-app-bg);
  color: var(--color-text);
}

/* Header (rgba weiss -> dunkel). */
html[data-theme="dark"] .app-header { background: rgba(17, 25, 40, .9); }

/* Tabs. */
html[data-theme="dark"] .tab:hover { background: #1E3A52; color: var(--color-primary-light); }
html[data-theme="dark"] .tab.active { background: linear-gradient(135deg, #1E3A52 0%, #1E2F4D 100%); color: var(--color-primary-light); }

/* Segmented controls + Seg-Buttons. */
html[data-theme="dark"] .segmented { background: #15203400; }
html[data-theme="dark"] .seg { background: transparent; color: var(--color-text-muted); }
html[data-theme="dark"] .seg:hover { background: #243349; color: var(--color-primary-light); }
html[data-theme="dark"] .seg.active { color: #fff; }
html[data-theme="dark"] .seg.active:hover { color: #fff; }

/* Buttons. */
html[data-theme="dark"] .btn { background: #243349; color: var(--color-text-strong); border-color: var(--color-border); }
html[data-theme="dark"] .btn:hover { background: #2C3E59; border-color: var(--color-primary-light); color: var(--color-primary-light); }
html[data-theme="dark"] .btn-primary { color: #06243A; }
html[data-theme="dark"] .btn-primary:hover { color: #06243A; }
html[data-theme="dark"] .btn-danger { background: #243349; color: #FCA5A5; border-color: #5B2A2A; }
html[data-theme="dark"] .btn-danger:hover { background: #3A1717; border-color: var(--color-konflikt); color: #FCA5A5; }

/* Inputs / Felder. */
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .inp,
html[data-theme="dark"] .admin-form .field input,
html[data-theme="dark"] .admin-form .field textarea,
html[data-theme="dark"] .shift-assign {
  background: #0F1B2E; color: var(--color-text-strong); border-color: var(--color-border-strong);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #64748B; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { color-scheme: dark; }

/* Tabellen. */
html[data-theme="dark"] .data-table th { background: linear-gradient(180deg, #1B2940 0%, #1E293B 100%); color: var(--color-text-muted); }
html[data-theme="dark"] .data-table tbody tr:hover { background: #22344C; box-shadow: inset 0 0 0 9999px rgba(56,189,248,.06); }

/* Badges (hartkodierte helle Hintergruende). */
html[data-theme="dark"] .badge-inaktiv { background: #2A3850; color: var(--color-text-muted); }
html[data-theme="dark"] .badge-konflikt { background: #3A1717; color: #FCA5A5; }
html[data-theme="dark"] .badge-offen { background: #1E2F4D; color: #93C5FD; }

/* Modal. */
html[data-theme="dark"] .modal-overlay { background: rgba(2, 6, 16, .65); }
html[data-theme="dark"] .modal-close:hover { background: #243349; color: var(--color-text-strong); }

/* Diverse helle Flaechen (Karten/Listen/Hinweise). */
html[data-theme="dark"] .dash-tile,
html[data-theme="dark"] .ol-row,
html[data-theme="dark"] .ma-chip { background: var(--color-card); }
html[data-theme="dark"] .ol-row:hover { background: #22344C; }
html[data-theme="dark"] .dash-tile.accent-blue .dash-icon { background: linear-gradient(135deg, #1E3A52 0%, #1E2F4D 100%); color: var(--color-primary-light); }

/* App-Footer (falls hell gefuellt). */
html[data-theme="dark"] .app-footer { background: transparent; }

/* #4 Buchhaltung: Jahres-Kopf-Gradient. */
html[data-theme="dark"] .bh-jahr-head { background: linear-gradient(135deg, #1E3A52 0%, #1E2F4D 100%); }
html[data-theme="dark"] .bh-monat-summary::before { color: var(--color-text-muted); }

/* Companion-Karte + LAN-Link. */
html[data-theme="dark"] .companion-card { background: var(--color-card); }
html[data-theme="dark"] .companion-link { background: #0F1B2E; }
html[data-theme="dark"] .companion-link:hover { background: #1E3A52; }

/* =========================================================================
   V0.36 (K3-B) — Dark-Mode vervollstaendigen.
   Gebuendelte Overrides NUR im Dark-Scope (Light-Definitionen bleiben unberuehrt)
   fuer die Objekt-Plan-Matrix (om-*), Modal-/Formular-Innenflaechen und Reste.
   STICKY-Zellen sind bewusst DECKEND dunkel (var(--color-card)), sonst ueberlagern
   weisse Flaechen beim Scrollen die Inhalte. Kontrast >= 4.5:1 (helle Texte auf
   dunklen Karten ~ 8-12:1).
   ========================================================================= */

/* ---- Matrix: sticky Ecken / Stunden-Koepfe (deckend dunkel) ---- */
html[data-theme="dark"] .om-corner,
html[data-theme="dark"] .om-corner-h {
  background: linear-gradient(180deg, #1B2940 0%, #1E293B 100%);
  color: var(--color-text-muted);
}
html[data-theme="dark"] .om-foot-label,
html[data-theme="dark"] .om-foot-hours {
  background: linear-gradient(180deg, #1E293B 0%, #1B2940 100%);
  color: var(--color-text-muted);
}
html[data-theme="dark"] .om-foot-hours { color: var(--color-text-strong); }
html[data-theme="dark"] .om-foot-cell { background: var(--color-app-bg-2); }

/* ---- Matrix: Tages-Kopfleiste (heller Gradient -> dunkel) ---- */
html[data-theme="dark"] .om-day-head {
  background: linear-gradient(180deg, #1B2940 0%, #1E293B 100%);
}
html[data-theme="dark"] .om-day-head.is-holiday { background: #2A2418; }
html[data-theme="dark"] .om-day-head.om-amp-neutral .om-badge { background: #243349; color: var(--color-text-muted); }
html[data-theme="dark"] .om-day-head.om-amp-full { background: linear-gradient(180deg, var(--color-besetzt-bg) 0%, #1E293B 100%); }
html[data-theme="dark"] .om-day-head.om-amp-teil { background: linear-gradient(180deg, var(--color-offen-bg) 0%, #1E293B 100%); }
html[data-theme="dark"] .om-day-head.om-amp-open { background: linear-gradient(180deg, var(--color-rot-bg) 0%, #1E293B 100%); }
html[data-theme="dark"] .om-day-head.om-amp-open .om-badge { background: var(--color-rot-bg); color: var(--color-rot-text); border-color: rgba(248,113,113,.35); }

/* ---- Matrix: MA-Namensspalte (sticky, deckend dunkel) ---- */
html[data-theme="dark"] .om-ma-name { background: var(--color-card); color: var(--color-text-strong); }
html[data-theme="dark"] .om-ma-name.om-abw-modus { background: #3A1717; box-shadow: inset 3px 0 0 var(--color-konflikt); }
html[data-theme="dark"] .om-ma-name.om-sub-name { background: #221B3A; color: #C4B5FD; border-left-color: #7C3AED; }
html[data-theme="dark"] .om-ma-name.om-subma-name { background: #11303A; color: #67E8F9; border-left-color: #0891B2; }
html[data-theme="dark"] button.om-ban-btn { background: #243349; color: var(--color-text-muted); border-color: var(--color-border); }
html[data-theme="dark"] button.om-ban-btn:hover { background: #3A1717; color: #FCA5A5; border-color: #5B2A2A; }

/* ---- Matrix: Tageszellen (Grundton + Spezial-Tints) ---- */
html[data-theme="dark"] .om-cell { background: var(--color-card); }
html[data-theme="dark"] .om-cell.is-weekend { background: #1D2D4E; } /* V1.10 dunkler */
html[data-theme="dark"] .om-cell.is-holiday { background: #363019; } /* V1.10 dunkler */
html[data-theme="dark"] .om-cell.is-today { background: rgba(56,189,248,.10); }
html[data-theme="dark"] .om-cell.is-unavailable { background: #3A1717; }
html[data-theme="dark"] button.om-cell-empty:hover { background: #1E3A52; }
html[data-theme="dark"] button.om-cell-empty.om-cell-unavailable { background: #3A1717; }

/* ---- Matrix: Stunden-Spalte je MA-Zeile (sticky rechts, deckend) ---- */
html[data-theme="dark"] .om-hours { background: var(--color-card); color: var(--color-text-strong); }

/* ---- Matrix: offene-Schichten-Zeile (Rot-Tints dunkler) ---- */
html[data-theme="dark"] .om-offen-cell { background: #2A1414; }
html[data-theme="dark"] .om-offen-cell.is-weekend { background: #2A1414; }
html[data-theme="dark"] .om-offen-cell.is-holiday { background: #2A1A14; }
html[data-theme="dark"] .om-offen-cell.is-today { background: #311818; }
html[data-theme="dark"] .om-offen-hours { background: #2A1414; }

/* ---- Matrix: Schicht-Bloecke (heller Blau-Block -> dunkler Ton) ---- */
html[data-theme="dark"] .om-shift-offen { background: #15314A; border-color: #1E4D6B; border-left-color: var(--color-primary); color: var(--color-primary-light); }

/* ---- Modals / Formulare / Popups ---- */
html[data-theme="dark"] .modal-foot { background: var(--color-app-bg-2); border-top-color: var(--color-border); }
html[data-theme="dark"] .masterschicht-row { background: var(--color-app-bg-2); border-color: var(--color-border); }
html[data-theme="dark"] .masterschicht-row .ms-field input { background: #0F1B2E; color: var(--color-text-strong); border-color: var(--color-border-strong); }
html[data-theme="dark"] .shift-popup { background: var(--color-card); border-color: var(--color-border-strong); box-shadow: 0 12px 32px rgba(0,0,0,.55); }
html[data-theme="dark"] .shift-popup-row { background: var(--color-app-bg-2); }
html[data-theme="dark"] .shift-popup-row-sub { background: #221B3A; }
html[data-theme="dark"] .shift-popup-notiz { background: #2E2A14; border-color: #57500F; color: #FDE68A; }
html[data-theme="dark"] .shift-popup-row-offen { background: #1A2535; }
html[data-theme="dark"] .shift-popup-row-offen .shift-popup-name { color: var(--color-text-muted, #94A3B8); }
html[data-theme="dark"] .shift-popup-row-ehemalig { background: #16202E; }
html[data-theme="dark"] .shift-popup-name-ehemalig { color: var(--color-text-muted, #94A3B8); }
html[data-theme="dark"] .objzuweis-row { background: var(--color-app-bg-2); }

/* ---- Reste (U8/U16/U17): Feed-Koepfe, Lohnkosten-Box, Changelog, harte Grautoene ---- */
html[data-theme="dark"] .cf-head { background: linear-gradient(180deg, #1B2940 0%, #1E293B 100%); }
html[data-theme="dark"] .cf-item { background: var(--color-card); }
html[data-theme="dark"] .cf-item:hover { background: #22344C; }
html[data-theme="dark"] .lohnkosten-box { background: var(--color-card); }
html[data-theme="dark"] .lohnkosten-title { background: var(--color-app-bg-2); border-bottom-color: var(--color-border); }
html[data-theme="dark"] .lohnkosten-foot { background: var(--color-app-bg-2); border-top-color: var(--color-border-strong); }
html[data-theme="dark"] .lohnkosten-row + .lohnkosten-row { border-top-color: var(--color-border); }
html[data-theme="dark"] .lohnkosten-row.satz-fehlt .lk-badge-satzfehlt { background: var(--color-rot-bg); color: var(--color-rot-text); border-color: #5B2A2A; }
html[data-theme="dark"] .lohnkosten-hinweis { background: var(--color-rot-bg); color: var(--color-rot-text); border-top-color: #5B2A2A; }
html[data-theme="dark"] .cl-entry-first { background: linear-gradient(180deg, #15314A 0%, #1E293B 70%); border-color: var(--color-primary-dark); }
html[data-theme="dark"] .day-empty,
html[data-theme="dark"] .ko-kunde-none,
html[data-theme="dark"] .om-badge-empty,
html[data-theme="dark"] .detail-value.is-empty { color: var(--color-text-muted); }
html[data-theme="dark"] .bild-placeholder { background: var(--color-app-bg-2); color: var(--color-text-muted); }
/* V0.37 (#4): Kachel-Logo-Box im Dark-Mode — Border ans dunkle Theme angleichen. Die Platzhalter-
   Variante setzt Hintergrund/Rahmen/Color per JS (Kundenfarbe) und bleibt davon unberührt. */
html[data-theme="dark"] .kunden-kachel-logo:not(.kk-logo-platzhalter) { border-color: var(--color-border); }

/* =========================================================================
   V0.45 — Partner-Firmen-Modell: Badges, Matrix-Zeilen, Sektion-Labels
   ========================================================================= */
/* Partner-Objekt-Badge (geteilt / Partner-Objekt) */
/* V0.81 (CEO-Fix): max-width + ellipsis — ohne Breiten-Bremse druecken lange Partner-/
   Firmennamen ("freigegeben an Brocken Sicherheit (Par...") den Flex-Titel neben sich auf
   quasi 0 zusammen, wodurch der Objektname (word-break:break-word) pro Buchstabe umbricht.
   flex-shrink:0 haelt den Badge selbst stabil; der volle Name bleibt im title-Tooltip. */
.badge-partner {
  background: #7C3AED;
  color: #fff;
  font-size: 0.7rem;
  padding: 1px 7px;
  border-radius: 10px;
  white-space: nowrap;
  margin-left: 4px;
  flex-shrink: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: bottom;
}
.badge-geteilt {
  background: #0891B2;
  color: #fff;
  font-size: 0.7rem;
  padding: 1px 7px;
  border-radius: 10px;
  white-space: nowrap;
  margin-left: 4px;
  flex-shrink: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: bottom;
}

/* Partner-MA-Zeile in der Objekt-Matrix */
.om-partner-name {
  /* Hintergrund-/Randfarbe wird per JS (Sub-Farbe) gesetzt; hier nur Fallback */
  opacity: 0.92;
}
.om-shift-partner {
  border-style: dashed;
  opacity: 0.9;
}

/* Partner-Sektions-Label (volle Breite im Grid) */
.om-partner-section-label {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 8px 10px 4px;
  border-bottom: 1px solid var(--color-border);
  margin-top: 4px;
  background: transparent;
}

/* Partner-MA-Sektions-Kopf im Schicht-Modal / Checklist */
.objzuweis-group-partner {
  color: #7C3AED;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 4px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.checkbox-grid-item-partner { opacity: 0.92; }
.firma-badge-partner {
  background: #7C3AED22;
  color: #7C3AED;
  border: 1px solid #7C3AED55;
  font-size: 0.65rem;
  padding: 0 5px;
  border-radius: 8px;
}

/* Lohnkosten-Box: Partner-/Sub-Stunden-Zeile */
.lohnkosten-partner-row {
  background: #F5F0FF;
  color: #5B21B6;
  font-style: italic;
}
.lohnkosten-partner-row .lk-sum { color: #6D28D9; }

/* Dark-Mode-Anpassungen V0.45 */
html[data-theme="dark"] .lohnkosten-partner-row { background: #2D1F4A; color: #C4B5FD; }
html[data-theme="dark"] .lohnkosten-partner-row .lk-sum { color: #A78BFA; }
html[data-theme="dark"] .om-partner-section-label { border-bottom-color: var(--color-border); }
html[data-theme="dark"] .badge-partner { background: #6D28D9; }
html[data-theme="dark"] .badge-geteilt { background: #0E7490; }
html[data-theme="dark"] .firma-badge-partner { background: #3B1F6A; color: #C4B5FD; border-color: #7C3AED77; }

@media (prefers-reduced-motion: reduce) {
  .om-shift-partner { transition: none; }
}

/* =========================================================================
   V0.53: Unterlagen-Hinweis-Block (read-only, Bearbeiten- und Ansicht-Modal)
   ========================================================================= */
.ul-hint-block {
  background: var(--color-bg-alt, #F8FAFC);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--color-text-muted, #64748B);
  margin-top: 6px;
}
.ul-hint-title {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text-strong, #1E293B);
}
.ul-hint-row {
  display: flex;
  gap: 4px;
  line-height: 1.6;
}
.ul-hint-label { font-weight: 500; }
.ul-hint-val   { color: var(--color-text, #334155); }

html[data-theme="dark"] .ul-hint-block {
  background: #1B2940;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}
html[data-theme="dark"] .ul-hint-title { color: var(--color-text-strong); }
html[data-theme="dark"] .ul-hint-val   { color: var(--color-text); }

/* =========================================================================
   V0.55: Druck-Button + Kontextmenü (Screen)
   ========================================================================= */
.druck-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.druck-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 900;
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border, #E2E8F0);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 210px;
  padding: 4px;
  display: flex;
  flex-direction: column;
}

.druck-menu-item {
  background: none;
  border: none;
  text-align: left;
  padding: 9px 14px;
  font-size: 0.9rem;
  color: var(--color-text, #334155);
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms;
}
.druck-menu-item:hover,
.druck-menu-item:focus {
  background: var(--color-bg-alt, #F1F5F9);
  outline: none;
}

html[data-theme="dark"] .druck-menu {
  background: #1E293B;
  border-color: var(--color-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .druck-menu-item {
  color: var(--color-text);
}
html[data-theme="dark"] .druck-menu-item:hover,
html[data-theme="dark"] .druck-menu-item:focus {
  background: #2D3F55;
}

/* =========================================================================
   V0.55: MA-Auswahl-Overlay (Mitarbeiter-Druck)
   ========================================================================= */
.druck-ma-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.druck-ma-overlay[hidden] { display: none; }

.druck-ma-modal {
  background: var(--color-surface, #FFFFFF);
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
  width: 380px;
  max-width: 92vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.druck-ma-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--color-border, #E2E8F0);
  flex-shrink: 0;
}
.druck-ma-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-strong, #1E293B);
}

.druck-ma-list {
  overflow-y: auto;
  padding: 6px;
  flex: 1 1 auto;
}

.druck-ma-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--color-text, #334155);
  transition: background 100ms;
}
.druck-ma-item:hover,
.druck-ma-item:focus {
  background: var(--color-bg-alt, #F1F5F9);
  outline: none;
}
.druck-ma-badge {
  font-size: 0.7rem;
  background: var(--color-bg-alt, #E2E8F0);
  color: var(--color-text-muted, #64748B);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}

html[data-theme="dark"] .druck-ma-modal {
  background: #1E293B;
  border-color: var(--color-border);
}
html[data-theme="dark"] .druck-ma-head {
  border-bottom-color: var(--color-border);
}
html[data-theme="dark"] .druck-ma-head h3 { color: var(--color-text-strong); }
html[data-theme="dark"] .druck-ma-item { color: var(--color-text); }
html[data-theme="dark"] .druck-ma-item:hover,
html[data-theme="dark"] .druck-ma-item:focus { background: #2D3F55; }
html[data-theme="dark"] .druck-ma-badge { background: #2D3F55; color: var(--color-text-muted); }

/* =========================================================================
   V0.55: Print-Styles (@media print)
   #printRoot ist im Screen-Modus unsichtbar (hidden-Attribut).
   Im Druck: alles außer #printRoot ausblenden; Farben hart auf Schwarz/Weiß.
   ========================================================================= */
#printRoot { /* im Screen via hidden-Attribut unsichtbar */ }

@media print {
  /* QS-K1-Zusatz: KEINE statische @page-Regel hier — sonst würde JEDER Druck
     (auch normales Strg+P) auf A4 quer gezwungen. Die @page-Regel injiziert
     app.js (printAusfuehren) nur für die Dauer des Dienstplan-Drucks. */

  /* QS-K1: Nur wenn der Druck über die Dienstplan-Druckfunktion vorbereitet wurde
     (body.printing), wird die App ausgeblendet. Ohne die Klasse druckt Strg+P
     aus jeder Ansicht weiterhin die normale sichtbare Seite (keine Regression). */
  body.printing > *:not(#printRoot) {
    display: none !important;
  }

  body.printing #printRoot {
    display: block !important;
    color: #000 !important;
    background: #fff !important;
  }

  /* Dark-Mode-Overrides für den Druck */
  body.printing #printRoot * {
    color: #000 !important;
    background: transparent !important;
    border-color: #999 !important;
    box-shadow: none !important;
  }

  /* Druck-Kopfbereich */
  .print-header {
    margin-bottom: 10mm;
  }
  .print-firma {
    font-size: 11pt;
    font-weight: 600;
    color: #000 !important;
    margin-bottom: 2mm;
  }
  .print-title {
    font-size: 15pt;
    font-weight: 700;
    color: #000 !important;
    margin-bottom: 1mm;
  }
  .print-meta {
    font-size: 9pt;
    color: #444 !important;
    margin-bottom: 1mm;
  }
  .print-stand {
    font-size: 8pt;
    color: #666 !important;
  }

  /* Druck-Tabelle */
  .print-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
  }
  .print-table th,
  .print-table td {
    border: 1px solid #999 !important;
    padding: 3px 6px;
    text-align: left;
    vertical-align: top;
    color: #000 !important;
    background: transparent !important;
  }
  .print-table thead tr {
    background: #E8E8E8 !important;
  }
  .print-table thead th {
    background: #E8E8E8 !important;
    font-weight: 600;
  }
  .print-table thead {
    display: table-header-group;
  }
  .print-table tr {
    page-break-inside: avoid;
  }
  .print-table .col-datum  { width: 18%; }
  .print-table .col-zeit   { width: 15%; }
  .print-table .col-bes    { width: 40%; }
  .print-table .col-notiz  { width: 27%; }
  /* MA-Variante: andere Spaltenbreiten */
  .print-table .col-objekt { width: 28%; }
  .print-table .col-notiz-ma { width: 20%; }

  /* Summenzeile */
  .print-summe td {
    font-weight: 600;
    border-top: 2px solid #666 !important;
  }

  /* Offen-Badge */
  .print-offen {
    color: #B45309 !important;
    font-style: italic;
    font-size: 8pt;
  }
  .print-nacht {
    font-size: 8pt;
    color: #555 !important;
  }

  /* =======================================================================
     V0.56: DIN-77200-Drucklayout — Firmenkopf mit Logo, Auftragsblock,
     Positions-Spalten (Mitarbeiter 1..N), Fussbereich mit Unterschriften.
     WICHTIG (QS-K1, V0.55-Lehre): ALLES bleibt unter body.printing geguardet —
     normales Strg+P ohne Dienstplan-Druck bleibt unveraendert. Der Praefix
     body.printing #printRoot gewinnt zudem die Spezifitaet gegen den
     Schwarz/Weiss-Catch-all (body.printing #printRoot *) fuer Farben/Raender.
     ======================================================================= */
  body.printing #printRoot .print-header { margin-bottom: 0; } /* Abstand macht .print-auftrag */
  body.printing #printRoot .print-din-kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8mm;
    margin-bottom: 3mm;
  }
  /* Firmenlogo: echtes Logo in FARBE — ausdruecklich KEIN filter/kein
     Schwarz/Weiss-Zwang auf das img (nur Texte werden hart auf #000 gesetzt). */
  body.printing #printRoot .print-din-logo {
    max-height: 15mm;
    max-width: 50mm;
    object-fit: contain;
    filter: none !important;
  }
  body.printing #printRoot .print-firmenname { font-size: 12pt; font-weight: 700; }
  body.printing #printRoot .print-firmenzeile { font-size: 8pt; color: #333 !important; }
  body.printing #printRoot .print-din-titel { font-size: 14pt; font-weight: 700; margin: 2mm 0 1mm; }
  /* Auftragsblock-Kasten (Objekt/Auftraggeber/Leistungsart/Zeitraum bzw. MA/Zeitraum/Firma) */
  body.printing #printRoot .print-auftrag {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1mm 8mm;
    border: 1px solid #999 !important;
    padding: 2mm 3mm;
    margin-bottom: 3mm;
    font-size: 9pt;
  }
  /* Positions-Spalten (Mitarbeiter 1..N) gleichbreit: festes Tabellen-Layout —
     Spalten OHNE width (col-pos) teilen sich den Rest gleichmaessig auf. */
  body.printing #printRoot .print-table-pos { table-layout: fixed; }
  body.printing #printRoot .print-table-pos th,
  body.printing #printRoot .print-table-pos td { word-wrap: break-word; overflow-wrap: break-word; }
  body.printing #printRoot .print-table-pos .col-datum { width: 13%; }
  body.printing #printRoot .print-table-pos .col-zeit  { width: 11%; }
  body.printing #printRoot .print-table-pos .col-notiz { width: 14%; }
  body.printing #printRoot .print-pos-name { font-weight: 600; }
  /* Quali-Kuerzel klein grau */
  body.printing #printRoot .print-quali { font-size: 8pt; color: #555 !important; }
  /* SUB-Kennzeichnung klein lila */
  body.printing #printRoot .print-subtag { font-size: 8pt; font-weight: 600; color: #5B21B6 !important; }
  /* offene Position amber kursiv (Spezifitaets-Fix gegen den Catch-all) */
  body.printing #printRoot .print-offen { color: #B45309 !important; font-style: italic; font-size: 8pt; }
  /* ueberzaehlige Spalte */
  body.printing #printRoot .print-pos-leer { color: #999 !important; text-align: center; }
  /* Plan-Summe unter der Tabelle */
  body.printing #printRoot .print-gesamt { margin-top: 2mm; font-size: 9pt; font-weight: 600; }
  /* Fussbereich: Legende, Erstellt-Zeile, Unterschriften, Vertraulichkeit */
  body.printing #printRoot .print-fuss { margin-top: 4mm; font-size: 8pt; page-break-inside: avoid; }
  body.printing #printRoot .print-legende { font-size: 7.5pt; color: #555 !important; margin-bottom: 0.5mm; }
  body.printing #printRoot .print-erstellt { margin-top: 1.5mm; }
  body.printing #printRoot .print-sigzeile { display: flex; gap: 18mm; margin-top: 8mm; }
  body.printing #printRoot .print-sig {
    flex: 1;
    border-top: 1px solid #000 !important;
    padding-top: 1mm;
    font-size: 8pt;
  }
  body.printing #printRoot .print-vertraulich {
    margin-top: 4mm;
    font-size: 7.5pt;
    color: #666 !important;
    border-top: 1px solid #ccc !important;
    padding-top: 1.5mm;
  }
}

/* =========================================================================
   V0.57 (X-Modus): Vertrag/X-Sichten — additive Regeln (Bildschirm, NICHT Druck).
   ========================================================================= */
/* Geteilte Stunden-Anzeige "142,0h V + 12,0h X" in der Matrix (Zeile + Fusszeile):
   kompakter, Ellipsis-sicher (block statt flex, damit text-overflow greift). */
.om-hours.om-hours-split,
.om-foot-hours.om-hours-split {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  font-size: 10px;
  line-height: 1.4;
  padding: 8px 6px;
}
.om-foot-hours.om-hours-split { font-size: 10px; font-weight: 700; }
/* X-Teil-Zeile in der Lohnkosten-Box (dezent amber abgesetzt). */
.lohnkosten-row.lk-x-row { background: #FFF8EB; }
.lohnkosten-row.lk-x-row .lk-name { color: #92400E; font-weight: 600; }
html[data-theme="dark"] .lohnkosten-row.lk-x-row { background: #3A2E14; }
html[data-theme="dark"] .lohnkosten-row.lk-x-row .lk-name { color: #FCD34D; }
/* V1.23 (CEO): MA-Gesamtzeile der Lohn-X-Aufschluesselung hervorheben — Name, X-Stunden
   und Summe zusammen als kraeftige Bernstein-Zeile; die Objekt-Zeilen darunter bleiben hell.
   Dreifach-Klasse noetig: .lohnkosten-row.lk-x-row (Z.~3944) wuerde eine Einfach-Klasse schlagen. */
.lohnkosten-row.lk-x-row.lk-x-ma-row { background: #FDE7B9; }
.lohnkosten-row.lk-x-ma-row .lk-detail, .lohnkosten-row.lk-x-ma-row .lk-sum { color: #92400E; font-weight: 700; }
html[data-theme="dark"] .lohnkosten-row.lk-x-row.lk-x-ma-row { background: #4A3A12; }
html[data-theme="dark"] .lohnkosten-row.lk-x-ma-row .lk-detail, html[data-theme="dark"] .lohnkosten-row.lk-x-ma-row .lk-sum { color: #FCD34D; }
/* Teil-Summenzeilen (Vertrag gesamt / Lohn X gesamt) vor der Gesamt-Zeile. */
.lohnkosten-foot.lk-foot-teil {
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border-top: 1px dashed var(--color-border);
}
html[data-theme="dark"] .lohnkosten-foot.lk-foot-teil { background: transparent; }

/* ============ BEWERBER (V0.59) ============ */
/* Eingestellte Bewerber (uebernommen als MA): Zeile gedaempft — Historie, kein aktiver
   Vorgang mehr. Die Aktionen-Zelle (Dokumente/Bearbeiten/Loeschen) bleibt ungedimmt
   (eigene td — Geschwister-Regel; Kind-opacity koennte Eltern-opacity nicht aufheben). */
#bwTable tr.bw-eingestellt td { opacity: .55; }
#bwTable tr.bw-eingestellt td.col-actions { opacity: 1; }

/* V0.63: Festgehalt/Aushilfe-Zeile in der Lohnkosten-Box */
.lk-fest-row .lk-sum { color: var(--accent, #2563eb); font-weight: 600; }
.lk-fest-row .lk-detail { opacity: .85; }

/* V0.65 (CEO): Tages-Kopf der Plan-Matrix ist klickbar (neue Schicht fuer den Tag anlegen).
   Hover via filter statt background (QS-Fund): ein background-Ersatz wuerde die
   Ampel-Verlaeufe (om-amp-full/teil/open, Feiertag, Dark-Theme) beim Hovern ausloeschen. */
.om-day-head { cursor: pointer; }
.om-day-head:hover { filter: brightness(.96); }

/* ===== V0.67 (CEO): Schicht-Chips mit gestapelter voller Uhrzeit + Ist/Soll-Stunden ===== */
/* Volle Von/Bis-Zeit untereinander (Vorbild Beispielbild) — nie mehr abgeschnitten. */
.om-shift.om-shift-stack {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  white-space: normal; overflow: visible; text-overflow: clip;
  line-height: 1.08; padding: 2px 3px; gap: 0; font-size: 10px;
}
.om-shift-stack .oms-t { display: block; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.om-shift-stack .oms-t-bis { opacity: .8; }
.om-shift-stack .oms-offen { font-size: 8.5px; font-weight: 700; margin-top: 1px; text-transform: uppercase; letter-spacing: .2px; }

/* ===== V0.68: 2-Toepfe-Lohnmodell ===== */
/* Stundenzelle eines MA ohne Vertragsstundenkontingent (Default-Umkehr: alles Lohn X). */
.om-hours-xonly { color: #7C3AED; font-style: normal; }
html[data-theme="dark"] .om-hours-xonly { color: #A78BFA; }

/* ===== V0.69: Lohnabrechnungs-Export (Verwaltung -> Buchhaltung) ===== */
.bh-lohn-export { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.bh-lohn-label { font-weight: 600; }
.bh-lohn-monat { max-width: 170px; }

.wb-form[hidden] { display: none !important; } /* V1.31: hidden muss jede display-Regel schlagen */
.wb-feld[hidden] { display: none !important; } /* V1.31b (Review R2): Korrektur-durch-Feld bei Neuanlage wirklich verstecken */
.wbk-actions .wb-row-actions { display: flex; gap: 6px; margin-left: 0; } /* V1.31b (Review R3): Buttons nicht kleben lassen */
/* ---- V1.31 (CEO): Wachbuch-Modal kompakt — Kopfleiste, KW-Header, Aufklapp-Zeilen ---- */
.wbk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 10px; }
.wbk-kopf-info { font-weight: 700; color: var(--color-text-strong); }
.wbk-woche { display: flex; align-items: center; gap: 8px; margin: 14px 2px 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--color-text-muted); }
.wbk-woche-linie { flex: 1; height: 1px; background: var(--color-border); }
.wbk-zeile { background: var(--color-app-bg-2, #fff); border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 6px; overflow: hidden; }
.wbk-zeile-kopf { display: flex; width: 100%; align-items: center; gap: 10px; padding: 7px 10px; background: none; border: none; color: inherit; text-align: left; cursor: pointer; font: inherit; min-height: 40px; }
.wbk-zeile-kopf:hover { background: rgba(13, 93, 151, .05); }
.wbk-zeit { flex: 0 0 auto; font-size: 12px; font-weight: 700; }
.wbk-ma { flex: 0 0 auto; font-size: 12px; color: var(--color-text-muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbk-preview { flex: 1; min-width: 0; font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbk-zeile.open .wbk-preview { visibility: hidden; }
.wbk-detail { display: none; padding: 0 12px 10px; border-top: 1px solid var(--color-border); }
.wbk-zeile.open .wbk-detail { display: block; padding-top: 8px; }
.wbk-actions { margin-top: 8px; display: flex; gap: 6px; }

.dok-gruppe-inhalt[hidden] { display: none !important; } /* V1.36: hidden vs. display-Grid (4. Fund dieser Falle) */
/* ---- V1.36 (CEO): kompakte Objekt-Chips in der Ansicht + leere Akten-Ordner ---- */
.badge-objekt { font-size: 11px; padding: 3px 9px; white-space: nowrap; cursor: default; }
.dok-leer-kat { grid-column: 1 / -1; padding: 10px 4px; font-size: 12px; }

/* ---- V1.38 (CEO): Warn-Zeichen fuer geplante MA ohne Objektzuweisung ---- */
.om-name-warn { flex: 0 0 auto; margin-left: 4px; font-size: 11px; color: #B45309; cursor: help; }

/* ---- V1.40 (CEO): Lohn-X-Zeile ohne Objektzuweisung — nur entfernbar ---- */
.osx-ohne-zuweisung { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px dashed #F59E0B; border-radius: 8px; background: rgba(245, 158, 11, .06); }
.osx-warn-label { color: #B45309; font-size: 12.5px; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.osx-warn-wert { font-weight: 700; font-size: 13px; white-space: nowrap; }
.osx-entfernen { flex: 0 0 auto; border: 1px solid var(--border, #d5dbe3); background: transparent; color: #B91C1C; border-radius: 8px; padding: 7px 10px; font-size: 12px; cursor: pointer; }
.osx-entfernen:hover { background: rgba(185, 28, 28, .07); }


/* ---- V1.48 (CEO): Zellen mit "· gesamt"-Zusatz kompakt, damit "V= ..." nie links
   abgeschnitten wird (Flex + overflow:hidden schneidet rechtsbuendig LINKS hart ab). ---- */
.om-hours.om-hours-hat-gesamt { font-size: 10px; }
.om-hours.om-hours-hat-gesamt .om-hours-gesamt { font-size: 10px; }

/* ---- V1.51 (CEO): in Split-Zellen (V=/X=) bekommt der gesamt-Zusatz eine EIGENE Zeile,
   damit er nie mehr per Ellipsis abgeschnitten wird (X-Modus-Zellen wurden zu lang). ---- */
.om-hours.om-hours-split .om-hours-gesamt { display: block; margin-left: 0; }

/* ---- V1.52 (CEO): "Zeit anpassen"-Dialog + Popup-Knopf ---- */
.shift-popup-zeit { flex: 0 0 auto; border: 1px solid var(--color-border); background: transparent; border-radius: 8px; padding: 4px 8px; font-size: 11px; cursor: pointer; color: var(--color-primary-dark, #0369A1); margin-right: 6px; }
.shift-popup-zeit:hover { background: rgba(3, 105, 161, .08); }
.maz-box { max-width: 380px; }
.maz-zeile { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; }
.maz-zeile label { font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.maz-zeile .inp { flex: 1 1 auto; min-width: 0; }
.maz-fehler { color: #B91C1C; font-size: 12px; min-height: 16px; margin-top: 4px; }
.maz-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* ---- V1.55 (CEO): Masterschicht-Auswahl-Popup — Buttons volle Breite ---- */
.ms-aktion-popup { min-width: 240px; }
.ms-aktion-btn { width: 100%; text-align: left; }

/* ---- V1.56 (CEO): "- Position entfernen" im MS-Popup (rot abgesetzt) ---- */
.ms-aktion-minus { color: #B91C1C; border-color: #FCA5A5; }
.ms-aktion-minus:disabled { opacity: .55; cursor: not-allowed; }

/* ---- V1.57 (CEO): Wochentags-Chips der Serien-Anlage (V1.58: kompakter) ---- */
.wd-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 1px 0 0; }
.wd-chips-label { font-size: 10.5px; font-weight: 700; color: var(--color-text-muted); margin-right: 2px; }
.wd-chip { border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); border-radius: 999px; padding: 1px 7px; font-size: 10.5px; font-weight: 600; cursor: pointer; line-height: 1.5; }
.wd-chip.wd-an { background: var(--color-primary, #0284C7); border-color: var(--color-primary, #0284C7); color: #fff; }
.wd-chip:not(.wd-an):hover { border-color: var(--color-border-strong); }

/* ---- V1.59 (CEO): Masterschicht-Wahl hervorgehoben ---- */
.ms-wahl-box { background: #EFF6FF; border: 1.5px solid #93C5FD; border-radius: 10px; padding: 8px 12px 10px; }
.ms-wahl-box label { color: #1D4ED8; font-weight: 800; }
html[data-theme="dark"] .ms-wahl-box { background: rgba(29, 78, 216, .12); border-color: #1E40AF; }
html[data-theme="dark"] .ms-wahl-box label { color: #93C5FD; }

/* ---- V1.60 (CEO): Kommunikation — Zentrale-Sicht im Companion-Bereich ---- */
.komm-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0 12px; }
.komm-als-label { font-size: 13px; font-weight: 700; color: var(--color-text-muted); }
.komm-als-select, .komm-an-select { padding: 7px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg, #fff); color: inherit; font: inherit; font-size: 13.5px; max-width: 320px; }
.komm-wrap { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .komm-wrap { grid-template-columns: 1fr; } }
.komm-liste { border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; max-height: 70vh; overflow-y: auto; }
.komm-thread { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--color-border); padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; }
.komm-thread:hover { background: rgba(2, 132, 199, .06); }
.komm-thread-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.komm-thread-namen { font-weight: 700; font-size: 13.5px; }
.komm-neu .komm-thread-namen { color: var(--color-primary, #0284C7); }
.komm-thread-zeit { font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap; }
.komm-thread-preview { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.komm-thread-text { flex: 1; min-width: 0; font-size: 12.5px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.komm-badge { background: #dc2626; color: #fff; border-radius: 999px; min-width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; padding: 0 5px; }
.komm-einsicht { font-size: 10.5px; font-weight: 700; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.komm-fremd { opacity: .85; }
.komm-verlauf { border: 1px solid var(--color-border); border-radius: 10px; padding: 12px; min-height: 240px; }
.komm-v-kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.komm-v-titel { font-weight: 800; font-size: 14px; }
.komm-del-btn { color: #B91C1C; border-color: #FCA5A5; }
.komm-v-scroll { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; padding: 4px 2px 8px; }
.komm-tag { align-self: center; font-size: 11px; color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 9px; margin: 4px 0; }
.komm-bubble { max-width: 78%; align-self: flex-start; background: var(--color-bg-muted, #f1f5f9); border-radius: 12px; border-bottom-left-radius: 4px; padding: 7px 11px; }
.komm-eigene { align-self: flex-end; background: var(--color-primary, #0284C7); color: #fff; border-bottom-left-radius: 12px; border-bottom-right-radius: 4px; }
.komm-b-von { font-size: 11px; font-weight: 700; opacity: .8; }
.komm-b-text { font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }
.komm-b-zeit { font-size: 10px; opacity: .7; text-align: right; margin-top: 2px; }
.komm-input-row { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.komm-input { flex: 1; resize: vertical; border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; background: var(--color-bg, #fff); color: inherit; }
.komm-hinweis { margin-top: 10px; font-size: 12.5px; color: var(--color-text-muted); border: 1px dashed var(--color-border); border-radius: 8px; padding: 8px 10px; }
.komm-hinweis-klein { margin-top: 8px; font-size: 11.5px; color: var(--color-text-muted); }
.komm-neu-zeile { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; }
.komm-neu-aktionen { margin-top: 8px; }
html[data-theme="dark"] .komm-bubble { background: #1f2937; }
html[data-theme="dark"] .komm-eigene { background: var(--color-primary, #0284C7); }
html[data-theme="dark"] .komm-thread:hover { background: rgba(56, 189, 248, .08); }

/* ---- V1.63: Fehlermeldungs-Kanal im Kommunikations-Untertab ---- */
.komm-fm-thread { background: rgba(245, 158, 11, .07); }
.komm-fm-bubble { max-width: 92%; border-left: 3px solid #F59E0B; }
.komm-fm-erledigt { opacity: .72; border-left-color: #16A34A; }
.komm-fm-foto { display: block; max-width: 260px; max-height: 200px; border-radius: 8px; margin: 6px 0 2px; cursor: zoom-in; border: 1px solid var(--color-border); }
.komm-fm-aktionen { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.komm-fm-antwort { margin-top: 6px; }
.fm-badge { font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 7px; margin-left: 8px; text-transform: uppercase; }
.fm-offen { background: #FEF3C7; color: #92400E; }
.fm-erledigt { background: #DCFCE7; color: #166534; }

/* V1.63c: Fallback-Zeile, wenn das Foto-Thumbnail nicht gerendert werden kann */
.komm-fm-foto-fallback { font-size: 12px; color: var(--color-primary, #0284C7); cursor: pointer; text-decoration: underline; margin: 4px 0 2px; }

/* ---- V1.64: Schichtbörse (Desktop) ---- */
.sb-desk-gruppe-titel { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin: 18px 0 8px; }
.sb-desk-karte { border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; max-width: 760px; }
.sb-desk-reserviert { border-color: #F59E0B; border-width: 2px; }
.sb-desk-hinfaellig { opacity: .75; }
.sb-desk-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.sb-desk-datum { font-weight: 700; }
.sb-desk-personen { margin-top: 4px; font-size: 13.5px; }
.sb-desk-grund { font-size: 12.5px; color: var(--color-text-muted); margin-top: 2px; }
.sb-desk-warn { font-size: 12.5px; color: #B45309; margin-top: 4px; }
.sb-desk-meta { font-size: 11.5px; color: var(--color-text-muted); margin-top: 4px; }
.sb-desk-aktionen { display: flex; gap: 8px; margin-top: 10px; }
.sb-badge { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.sb-offen { background: #DBEAFE; color: #1E40AF; }
.sb-reserviert { background: #FEF3C7; color: #92400E; }
.sb-uebertragen { background: #DCFCE7; color: #166534; }
.sb-zurueckgezogen, .sb-abgelaufen { background: var(--color-bg-muted, #f1f5f9); color: var(--color-text-muted); }
html[data-theme="dark"] .sb-offen { background: #1E3A5F; color: #93C5FD; }
html[data-theme="dark"] .sb-reserviert { background: #4A3A12; color: #FCD34D; }
html[data-theme="dark"] .sb-uebertragen { background: #14432A; color: #86EFAC; }

/* ---- V1.65 (CEO): MA-Modal kompakt — Foto +30%, alles andere ~halber Platz.
   Scope .ma-modal-scope umschliesst View UND Edit (einheitlich, nur Mitarbeiter-Modal). ---- */
.ma-modal-scope { font-size: 12px; }
.ma-modal-scope label { font-size: 10.5px; margin-bottom: 1px; }
.ma-modal-scope input, .ma-modal-scope select, .ma-modal-scope textarea,
.ma-modal-scope .ma-tab-panel input, .ma-modal-scope .ma-tab-panel select, .ma-modal-scope .ma-tab-panel textarea { padding: 4px 8px; font-size: 12px; }
.ma-modal-scope .ma-tab-panel label { font-size: 10.5px; }
.ma-modal-scope .field-row { gap: 6px; margin-bottom: 4px; }
.ma-modal-scope .modal-form-compact { gap: 4px 10px; }
.ma-modal-scope .ma-tab-panel { padding-top: 8px; }
.ma-modal-scope .ma-tabs .ma-tab-btn, .ma-modal-scope .seg { padding: 4px 10px; font-size: 12px; }
.ma-modal-scope .detail-row { padding: 2px 0; }
.ma-modal-scope .detail-label { font-size: 10.5px; }
.ma-modal-scope .detail-value { font-size: 12px; }
.ma-modal-scope .checkbox-grid { gap: 3px 8px; font-size: 12px; }
.ma-modal-scope h4, .ma-modal-scope .form-section-title { font-size: 12px; margin: 8px 0 4px; }
.ma-modal-scope .hint, .ma-modal-scope .objzuweis-hint, .ma-modal-scope .muted { font-size: 10.5px; }
.ma-modal-scope .btn { padding: 4px 10px; font-size: 11.5px; }
/* Foto +30%: Edit-Vorschau 96 -> 125px, View-Kopf 120 -> 156px */
.ma-modal-scope .bild-thumb-lg { width: 125px; height: 125px; }
.ma-modal-scope .detail-head-photo .bild-gross,
.ma-modal-scope .detail-head-photo .bild-gross.bild-placeholder-lg { width: 156px; height: 156px; }

/* ---- V1.66: Boersen-Genehmigungen prominent ueber dem Control Feed ---- */
.boerse-feed-hinweis { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #FEF3C7; border: 1.5px solid #F59E0B; border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; cursor: pointer; font: inherit; }
.boerse-feed-hinweis:hover { background: #FDE68A; }
.bfh-ico { font-size: 16px; font-weight: 800; color: #92400E; flex: 0 0 auto; }
.bfh-text { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #92400E; }
.bfh-pfeil { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #B45309; white-space: nowrap; }
html[data-theme="dark"] .boerse-feed-hinweis { background: #4A3A12; border-color: #B45309; }
html[data-theme="dark"] .boerse-feed-hinweis:hover { background: #5B4716; }
html[data-theme="dark"] .bfh-ico, html[data-theme="dark"] .bfh-text { color: #FCD34D; }
html[data-theme="dark"] .bfh-pfeil { color: #FBBF24; }

/* ---- V1.67: Foto-/Logo-Pins der Uebersichts-Karte ---- */
.map-pin-foto { background: transparent; border: 0; }
.map-foto-pin { display: flex; flex-direction: column; align-items: center; width: 110px; }
.mfp-kreis { display: block; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #059669; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.35); overflow: hidden; }
.mfp-kreis-logo { border-width: 2.5px; }
.mfp-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mfp-img-logo { object-fit: contain; padding: 3px; box-sizing: border-box; background: #fff; }
.mfp-ini { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 800; }
.mfp-name { margin-top: 2px; max-width: 106px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #ffffff; border: 1px solid rgba(0,0,0,.18); border-radius: 999px; padding: 0 7px; font-size: 10px; font-weight: 700; color: #1f2937; line-height: 15px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }

/* V1.69: Haus-Platzhalter der Objekt-Pins */
.mfp-haus { font-size: 22px; line-height: 1; }

/* V1.73: Stundensatz-Feld der Rechnungs-Uebernahme */
.re-satz-wrap { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.re-satz-label { font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.re-satz-inp { width: 90px; padding: 5px 8px; }
.re-satz-einheit { font-size: 12px; color: var(--color-text-muted); }

/* ---- V1.74: Desktop-Pflicht-Login ---- */
/* V2.24 (CEO 16.07.2026): Login-Hintergrund komplett Schwarz (vorher Navy-Verlauf
   linear-gradient(160deg,#0B2A4A 0%,#0E3A66 55%,#0B2A4A 100%) — bei Nichtgefallen zurückdrehen). */
.admin-login-overlay { position: fixed; inset: 0; z-index: 12000; background: #000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.admin-login-karte { background: #ffffff; border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.45); padding: 34px 34px 26px; width: 100%; max-width: 400px; }
.admin-login-form { display: flex; flex-direction: column; gap: 12px; }
.admin-login-logo { display: block; height: 108px; margin: 0 auto 12px; user-select: none; }
.admin-login-titel { font-size: 18px; font-weight: 900; letter-spacing: .03em; color: #0B2A4A; text-align: center; }
.admin-login-sub { font-size: 12.5px; color: #475569; margin-bottom: 6px; text-align: center; }
.admin-login-form .inp { padding: 11px 13px; font-size: 14px; border: 1px solid #CBD5E1; border-radius: 10px; }
.admin-login-fehler { min-height: 18px; font-size: 12.5px; font-weight: 700; color: #B91C1C; }
.admin-login-hinweis { font-size: 11px; color: #64748B; margin-top: 6px; line-height: 1.45; }
/* V2.24 Mobil-Feinschliff: kompaktere Login-Karte auf schmalen Bildschirmen (Handy). */
@media (max-width: 480px) {
  .admin-login-overlay { padding: 14px; }
  .admin-login-karte { padding: 24px 20px 20px; border-radius: 14px; }
  .admin-login-logo { height: 88px; margin-bottom: 10px; }
  .admin-login-titel { font-size: 16.5px; }
  /* 16px verhindert das automatische Hineinzoomen von iOS beim Feld-Fokus. */
  .admin-login-overlay .admin-login-form .inp { font-size: 16px; }
}
/* V2.24 „Optisch verbessern" (CEO, Handy-Screenshot 16.07.): Die Login-Karte ist IMMER hell —
   unabhängig vom Dark Mode des Geräts/der App (vorher mischten sich dunkle Felder/Buttons in
   die weiße Karte). Feste Farben statt Theme-Variablen, color-scheme verhindert dunkle
   Browser-Widgets (Autofill etc.). Der Dark Mode der eigentlichen App bleibt unberührt. */
.admin-login-overlay { color-scheme: light; }
/* V2.24: Solange das Login offen ist, ist die Seite dahinter komplett gesperrt (kein
   Hintergrund-Scrollen per Touch/Maus). Das Overlay selbst darf bei sehr kleinen/queren
   Bildschirmen scrollen, damit die Karte immer erreichbar bleibt. */
html.ibaz-login-offen, html.ibaz-login-offen body { overflow: hidden !important; height: 100%; }
.admin-login-overlay { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.admin-login-overlay .admin-login-form .inp {
  background: #fff; color: #0F172A; border: 1px solid #CBD5E1; box-shadow: none;
}
.admin-login-overlay .admin-login-form .inp::placeholder { color: #94A3B8; }
.admin-login-overlay .admin-login-form .inp:focus {
  border-color: #0E3A66; outline: none; box-shadow: 0 0 0 3px rgba(14, 58, 102, .18);
}
.admin-login-overlay .admin-login-form .btn-primary {
  background: linear-gradient(180deg, #14508C 0%, #0E3A66 100%);
  color: #fff; font-weight: 800; letter-spacing: .01em;
  border: none; border-radius: 10px; padding: 12px 16px;
  box-shadow: 0 6px 18px rgba(14, 58, 102, .35);
}
.admin-login-overlay .admin-login-form .btn-primary:hover,
.admin-login-overlay .admin-login-form .btn-primary:focus-visible {
  background: linear-gradient(180deg, #1A5EA3 0%, #124678 100%); color: #fff;
}
.admin-login-overlay .admin-login-form .btn-primary:disabled { opacity: .55; }
.admin-user-box { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; }
.aub-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.aub-logout { padding: 3px 10px; font-size: 11.5px; }

/* ---- V1.78: Dokumente als Ordner-Kacheln ---- */
.dok-ordner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 4px 2px 8px; }
.dok-ordner-kachel { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-bg, #fff); cursor: pointer; font: inherit; position: relative; transition: box-shadow .12s, transform .06s; }
.dok-ordner-kachel:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-1px); }
.dok-ordner-voll { border-color: #FCD34D; background: #FFFBEB; }
.dok-ordner-ico .dok-ordner-icon svg { width: 44px; height: 44px; color: #94A3B8; }
.dok-ordner-voll .dok-ordner-icon svg { color: #F59E0B; }
.dok-ordner-name { font-size: 13px; font-weight: 700; text-align: center; line-height: 1.25; color: var(--color-text); word-break: break-word; }
.dok-ordner-badge { position: absolute; top: 8px; right: 10px; min-width: 20px; height: 20px; border-radius: 999px; background: #F59E0B; color: #fff; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.dok-ordner-badge-0 { background: var(--color-bg-muted, #e5e7eb); color: var(--color-text-muted); }
.dok-ordner-kopf { display: flex; align-items: center; gap: 12px; padding: 4px 2px 12px; flex-wrap: wrap; }
.dok-ordner-kopf-titel { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; }
.dok-ordner-kopf-titel svg { width: 18px; height: 18px; color: #F59E0B; }
.dok-ordner-kopf-anz { color: var(--color-text-muted); font-weight: 600; }
.dok-ordner-kopf .dok-ordner-zurueck { margin-right: auto; }
.dok-ordner-drophint { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px; border: 2px dashed var(--color-border); border-radius: 12px; background: transparent; color: var(--color-text-muted); cursor: pointer; font: inherit; font-size: 13px; }
.dok-ordner-drophint:hover { border-color: #F59E0B; color: #B45309; }
.dok-drop-ico svg { width: 28px; height: 28px; }
.dok-upload-fuss { margin-top: 10px; }
html[data-theme="dark"] .dok-ordner-voll { background: #3B2F12; border-color: #B45309; }
html[data-theme="dark"] .dok-ordner-kachel { background: #1f2937; }

/* ---- V2.27: Upload-Haertung — Drag&Drop-Hervorhebung (Ordner-Kachel + geoeffnete Ordner-Flaeche) ---- */
.dok-ordner-kachel { transition: box-shadow .12s, transform .06s, background-color .12s, border-color .12s; }
.dok-ordner-kachel.dok-drop-ueber {
  border-color: var(--color-primary);
  background: #E0F2FE;
  box-shadow: 0 0 0 3px rgba(3, 105, 161, .22), 0 6px 16px rgba(3, 105, 161, .18);
  transform: translateY(-1px);
}
html[data-theme="dark"] .dok-ordner-kachel.dok-drop-ueber { background: #0C4A6E; border-color: var(--color-primary-light); }
/* Wrapper aus Kopf + Kachel-Grid im geoeffneten Ordner (ersetzt zwei einzelne .dok-liste-Kinder
   -> gap hier nachbilden, damit sich am Abstand Kopf/Grid nichts aendert). */
.dok-ordner-inhalt {
  display: flex; flex-direction: column; gap: 8px;
  border-radius: var(--radius);
  transition: background-color .15s ease, box-shadow .15s ease;
}
.dok-ordner-inhalt.dok-drop-ueber {
  background: rgba(3, 105, 161, .06);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}
.dok-ordner-inhalt.dok-drop-ueber .dok-ordner-drophint { border-color: var(--color-primary); color: var(--color-primary-dark); }
html[data-theme="dark"] .dok-ordner-inhalt.dok-drop-ueber {
  background: rgba(56, 189, 248, .14);
  box-shadow: inset 0 0 0 2px var(--color-primary-light);
}
html[data-theme="dark"] .dok-ordner-inhalt.dok-drop-ueber .dok-ordner-drophint { border-color: var(--color-primary-light); color: var(--color-primary-light); }

/* V1.79: klickbare Quali-Badges (zur Ablage) */
.badge.quali-klick { cursor: pointer; transition: filter .1s, box-shadow .1s; }
.badge.quali-klick:hover { filter: brightness(.94); box-shadow: 0 0 0 2px rgba(2,132,199,.35); }

/* ---- V1.83: Firmierung kompakt (Referenz-Optik: enge Zeilen, kleine Felder) ---- */
.firma-kompakt.admin-form { padding: 8px 10px; }
.firma-kompakt .form-section-title { font-size: 9.5px; padding: 3px 0 1px; margin: 0; line-height: 1.3; }
.firma-kompakt .admin-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 3px 8px; }
.firma-kompakt .field { gap: 2px; }
.firma-kompakt .field label { font-size: 9.5px; font-weight: 600; }
.firma-kompakt .field input, .firma-kompakt .field select, .firma-kompakt .field textarea, .firma-kompakt .inp { padding: 2px 6px; font-size: 11px; min-height: 0; box-sizing: border-box; }
.firma-kompakt .field input, .firma-kompakt .field select { height: 20px; }
.firma-kompakt .field textarea, .firma-kompakt textarea.inp { height: auto; }
.firma-kompakt .admin-foot { margin-top: 8px; }
.firma-kompakt .btn { padding: 4px 10px; font-size: 11.5px; }
/* Uebersicht (read-only) genauso dicht */
.firma-uebersicht.firma-kompakt .detail-row { padding: 2px 8px; min-height: 0; }
.firma-uebersicht.firma-kompakt .detail-label { font-size: 10.5px; }
.firma-uebersicht.firma-kompakt .detail-value { font-size: 12px; }
.firma-uebersicht.firma-kompakt .detail-grid { gap: 3px 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.firma-uebersicht.firma-kompakt .firma-uebersicht-name { font-size: 13px; }

/* V1.83d: Firmierungs-Maske im Referenz-Format — schmaler Block, 2 enge Spalten */
.firma-maske { max-width: 720px; }
.firma-maske .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
/* V1.84b: Referenz-Look — Label LINKS NEBEN dem Feld (eine ~22px-Zeile pro Feld) */
.firma-maske .field { flex-direction: row; align-items: center; gap: 6px; }
.firma-maske .field > label { flex: 0 0 132px; width: 132px; text-align: right; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.firma-maske .field input, .firma-maske .field select { flex: 1 1 auto; width: auto; min-width: 0; }
.firma-maske .field.field-full { flex-direction: column; align-items: stretch; }
.firma-maske .field.field-full > label { flex: none; width: auto; text-align: left; }
.firma-uebersicht.firma-kompakt { padding: 10px 14px; }
.firma-uebersicht.firma-kompakt .firma-uebersicht-head { margin: 0; }

/* ---- V1.84: Firmierung nochmal halbiert + Einstellungen im selben Kompakt-Format ---- */
.firma-uebersicht.firma-kompakt img { width: 34px; height: 34px; object-fit: contain; }
.firma-maske .field-full img { max-height: 44px; width: auto; }
.firma-kompakt .field-check { gap: 6px; font-size: 11.5px; padding: 2px 0; }
.firma-kompakt .companion-hint { font-size: 10px; margin: 2px 0 6px; }
.firma-kompakt p { font-size: 10.5px; }
.firma-kompakt select { height: 20px; font-size: 11px; padding: 1px 4px; }

/* V1.84c: letzte Verdichtung */
.firma-maske .field.field-full { gap: 2px; }
.firma-maske textarea { height: 40px !important; }
.firma-maske .admin-foot { margin-top: 5px; }

/* ---- V1.85: Einstellungen — Checkbox-Zeilen ordentlich linksbuendig ---- */
.einst-kompakt { max-width: 720px; }
.einst-kompakt .field-check { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; font-size: 11.5px; padding: 2px 0; width: 100%; margin: 0; transform: none; text-indent: 0; }
.einst-kompakt .field-check input { margin: 0 !important; flex: 0 0 auto; margin-left: 0 !important; }
.einst-kompakt .field-check span { text-align: left; white-space: nowrap; margin: 0; flex: 0 1 auto; }
.einst-kompakt .companion-hint { font-size: 10px; margin: 2px 0 8px; }

/* ---- V1.86 (CEO): Admin-Bereich mit weissem Hintergrund (nur heller Modus) ---- */
/* V1.94 (CEO): Design-Angleichung an die uebrigen Bereiche — die View ist wieder
   TRANSPARENT auf der blaeulichen App-Flaeche (der weisse Umschlag-Kasten war ein
   Admin-Sonderweg); die Inhalts-KARTEN tragen wie ueberall Rahmen + Schatten. */
#view-admin .admin-form { box-shadow: var(--shadow); }

/* ---- V1.91: Firmierung — Kopf + Dokumente-Karte einheitlich zur 720px-Maske ---- */
.firma-uebersicht.firma-kompakt { max-width: 720px; }
.firma-dok-zeile { max-width: 720px; padding: 8px 12px 10px; }
.firma-dok-zeile .form-section-title { font-size: 9.5px; padding: 3px 0 4px; margin: 0; }
.firma-dok-zeile .btn { padding: 4px 10px; font-size: 11.5px; }

.dash-wide { justify-self: stretch; }

/* ---- V1.93: Kennzahl-Kacheln links gebuendelt + Bearbeiten-Leiste in der MA-Ansicht ---- */
.dash-tiles-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; }
.dash-tiles-row .dash-tile { flex: 0 0 auto; }
.ma-view-editbar { display: flex; justify-content: flex-end; padding: 0 2px 8px; }

/* =========================================================================
   V2.29 (CEO): Inline-Bearbeiten in der Mitarbeiter-Ansicht — Variante A.
   "Bearbeiten" schaltet dieselbe Modal-Flaeche in einen Edit-Modus (kein Sprung mehr in
   ein anderes Formular-Layout). Eigene Klassen fuer den Person-Kopf im Edit-Modus (Foto
   links wie in der Ansicht) UND den Hinweisbalken oben — bewusst NICHT .field-row (das wird
   von ".modal-form-compact .field-row { display:contents }" aufgeloest und wuerde die
   Foto/Feld-Nebeneinander-Anordnung hier zerreissen).
   ========================================================================= */
.ma-edit-head-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 auto; }
.ma-edit-head-row { display: flex; gap: 12px; }
.ma-edit-head-row .field { flex: 1; min-width: 0; }
@media (max-width: 560px) { .ma-edit-head-row { flex-direction: column; gap: 6px; } }
/* Bild-Upload-Widget im Kopf schmal halten (Buttons wrappen unter das Foto statt in die
   Breite zu ziehen) — greift nur, wenn bildFeld() innerhalb von .detail-head-photo sitzt
   (aktuell ausschliesslich hier der Fall). */
.detail-head-photo .bild-upload { max-width: 210px; }

.ma-edit-hinweisbar {
  display: flex; align-items: center; gap: 8px;
  background: #DBEAFE; color: #1E40AF;
  border: 1px solid #93C5FD; border-radius: 8px;
  padding: 8px 12px; font-size: 12.5px; font-weight: 600;
  margin-bottom: 2px;
}
html[data-theme="dark"] .ma-edit-hinweisbar { background: #1E2F4D; color: #93C5FD; border-color: #2C5282; }

/* ---- V1.96: Schichtboerse Desktop — ordentliches Karten-Grid ---- */
.sb-desk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; margin: 4px 0 16px; }
.sb-desk-grid .sb-desk-karte { margin-bottom: 0; max-width: none; background: var(--color-card); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 5px; }
.sb-desk-grid .sb-desk-aktionen { margin-top: auto; padding-top: 10px; display: flex; gap: 8px; justify-content: flex-end; }
.sb-desk-gruppe-titel { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--color-primary); margin: 16px 0 6px; }
.sb-desk-grid .sb-desk-personen { font-weight: 600; }
.sb-desk-grid .sb-desk-grund { font-style: italic; }

/* ---- V1.97: MA-Modal — Objektzuweisung + Lohn X mehrspaltig (alles auf einen Blick) ---- */
.objzuweis-objekte { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 4px 12px; }
.osx-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 14px; }
.osx-rows .field-row { margin: 0; }
.osx-rows .field { min-width: 0; }
.osx-rows .osx-ohne-zuweisung { grid-column: 1 / -1; }

/* V1.97b/c: osx-block sitzt als Grid-Item im 3-spaltigen ma-tab-grid -> volle Breite spannen */
.ma-tab-grid .osx-block { grid-column: 1 / -1; max-width: none; width: 100%; }

/* ---- V1.98: manuell/geaenderte Schicht-Zeilen dezent markiert ---- */
.om-ms-name.om-ms-manuell { font-style: italic; opacity: .8; }

/* ---- V1.99: Nachreichungen (Desktop) ---- */
.komm-nr-thread .komm-thread-namen { color: #0369A1; }
.komm-nr-bubble { border-left: 3px solid #0EA5E9; }
.komm-nr-erledigt { opacity: .75; border-left-color: #10B981; }
.komm-nr-abgelehnt { opacity: .8; border-left-color: #DC2626; }
.fm-badge.nr-eingereicht { background: #FEF3C7; color: #92400E; }
.fm-badge.nr-erledigt { background: #D1FAE5; color: #065F46; }
.fm-badge.nr-abgelehnt { background: #FEE2E2; color: #991B1B; }
.komm-nr-datei-link { display: block; margin: 4px 0; background: var(--color-bg-muted, #F1F5F9); border: 1px solid var(--color-border); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-datum-hint { color: #B45309 !important; font-weight: 600; }
.nr-feed-hinweis { border-color: #0EA5E9; }

/* ---- V2.02: Verlaeufe leeren (Liste + alle) ---- */
.komm-alle-leeren { margin: 0 0 8px; width: 100%; justify-content: center; color: #B91C1C; border-color: #FCA5A5; }
.komm-thread-del { flex: 0 0 auto; margin-left: 6px; opacity: .45; cursor: pointer; font-size: 13px; transition: opacity .12s; }
.komm-thread:hover .komm-thread-del { opacity: 1; }
.komm-thread-del:hover { transform: scale(1.15); }

/* ---- V2.04: Desktop-Boerse Tausch ---- */
.sb-desk-tausch { border-left: 3px solid #7C3AED; }

/* V2.06: mehrere Bewerber je Boersen-Angebot (Zentrale waehlt den Zuschlag) */
.sb-desk-bewerbung { border: 1px solid var(--color-border); border-radius: 8px; padding: 7px 10px; margin-top: 6px; background: var(--color-bg); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sb-desk-bewerbung-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sb-desk-bewerber-name { font-weight: 700; }
.sb-desk-bewerbung-gegen { font-size: 12px; color: #5B21B6; background: #EDE9FE; border-radius: 999px; padding: 1px 8px; font-weight: 700; }
.sb-desk-bewerbung .sb-desk-aktionen { margin-top: 0; }

/* V2.07: Zentrale-Ausschreibung (offener Dienst) */
.sb-desk-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.sb-desk-karte.sb-desk-ausschreibung { border-left: 3px solid #059669; }

/* V2.08: Einsatz-Adresse in Boersen-Karten */
.sb-desk-adresse { display: block; font-size: 12.5px; color: var(--color-primary, #1D4ED8); text-decoration: none; margin: 2px 0; font-weight: 600; }
.sb-desk-adresse:hover { text-decoration: underline; }

/* V2.09: MA-Plan-Druck zweistufig (Firma -> Mitarbeiter) */
.druck-ma-zurueck { margin-bottom: 8px; }
.druck-ma-item .firma-badge { margin-left: auto; }

/* V2.18: ZIP-Download mit Ordner-Auswahl */
.zip-kopf-row { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.zip-ordner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; margin-bottom: 10px; }
.zip-ordner-zeile { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.zip-ordner-zeile:hover { background: var(--color-bg); }
.zip-ordner-zeile input { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; }
.zip-ordner-anz { color: var(--color-text-muted); font-size: 12px; }
.zip-ordner-leer span { color: var(--color-text-muted); }
.zip-leere-option { border-top: 1px dashed var(--color-border); padding-top: 10px; margin-top: 4px; font-weight: 600; }

/* ============================================================
   MOBIL-OVERRIDES (max-width:820px) — bewusst GANZ am Dateiende,
   damit sie per Quellreihenfolge + Spezifität alle späteren Regeln
   schlagen (spätere .header-right{display:flex}, .firma-switch.segmented{order:1},
   .tabs{width:100%} setzten den Kopf sonst wieder auf 3 Zeilen).
   Betrifft NUR Kopfzeile/Nav am Handy; die Desktop-Ansicht bleibt unberührt.
   Ziel (Führung mobil): [☰  Ansichts-Titel] in Zeile 1, Firmen-Umschalter darunter.
   ============================================================ */
@media (max-width: 820px) {
  .app-header { flex-wrap: wrap; }
  .app-header .header-right { display: none; }   /* Server-/Versions-Status am Handy weg (Platz) */
  .app-header .header-clock { display: none; }
  .app-header .brand { display: none; }
  .app-header .app-version { display: none; }
  /* Firmen-Umschalter in eigene, volle Zeile unter [☰ Titel] */
  .app-header .firma-switch,
  .app-header .firma-switch.segmented {
    order: 2; flex: 1 1 100%; max-width: none; min-width: 0; margin: 0;
  }
  /* Drawer-Breite gegen spätere .tabs{width:100%} absichern */
  .app-header .tabs { width: 264px; max-width: 84vw; }

  /* Firmen-Umschalter, sobald er (per JS) im Drawer sitzt: volle Drawer-Breite,
     direkt unter dem „IBAZ CONTROL"-Titel, mit Trennlinie zu den Tabs. */
  .tabs > .firma-switch,
  .tabs > .firma-switch.segmented {
    order: 0; width: 100%; max-width: none; min-width: 0; flex: 0 0 auto;
    margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border);
  }

  /* ---- V2.24 Mobil-Bedienbarkeit (CEO: „unübersichtlich, vieles nicht anklickbar") ----
     Desktop-Werte bleiben unberührt; hier nur Touch-taugliche Größen + einspaltige Raster. */

  /* Touch-Ziele: 24px-Mini-Buttons sind am Finger kaum treffbar -> min. 38px. */
  .btn-xs, .btn-sm, .btn-icon-only { min-height: 38px; min-width: 38px; }
  .seg { padding: 10px 14px; }
  .segmented { flex-wrap: wrap; max-width: 100%; }
  .modal-close { padding: 12px; }
  .badge.quali-klick { padding: 5px 9px; }

  /* Modals: nahe Vollbild, Formulare/Detail-Raster EINSPALTIG statt 2-4 gequetschter Spalten. */
  .modal-overlay { padding: 8px; }
  .modal, .modal.modal-xl, .modal.modal-xxl { max-width: 100%; max-height: 96vh; }
  .modal-form-compact { grid-template-columns: 1fr; }
  .detail-grid, .detail-grid-3, .detail-grid-4 { grid-template-columns: 1fr; }

  /* iOS/Android zoomen bei Input-Fokus <16px ins Formular hinein — 16px verhindert den Sprung. */
  .modal input, .modal select, .modal textarea,
  .content input, .content select, .content textarea { font-size: 16px; }

  /* Breite Tabellen: flüssiges Touch-Scrollen im vorhandenen H-Scroll-Container. */
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* =========================================================================
   Kunden-Modal kompakt (CEO-Mockup Variante A) — "alles in einem Fenster",
   kein Modal-Scroll mehr. Additiver Scope (.kunde-kompakt), ausschliesslich
   von openKundeModal() genutzt — alle anderen Modals/Formulare (inkl. das
   Objekt-Modal) bleiben unberuehrt. Zwei-Spalten-Raster; Label LINKS neben
   jedem Feld (Muster wie .firma-maske .field), kompakte Feldhoehen (~27px).
   Farben ausschliesslich ueber bestehende CSS-Variablen -> Dark-Mode erbt
   automatisch korrekt (siehe html[data-theme="dark"]{--color-...} weiter
   oben), keine zusaetzlichen Dark-Zweige noetig.
   ========================================================================= */
.modal:has(.kunde-kompakt) { max-width: 860px; }

.kunde-kompakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 26px;
  row-gap: 8px;
}
.kunde-kompakt .kk-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* "aktiv" (letzte Zeile): volle Breite, Inhalt linksbuendig (nicht zentriert) -> "unten links". */
.kunde-kompakt .kk-aktiv-row { grid-column: 1 / -1; display: flex; justify-content: flex-start; }

/* Label LINKS neben dem Feld, feste Breite, rechtsbuendig (Muster wie .firma-maske .field). */
.kunde-kompakt .field { flex-direction: row; align-items: center; gap: 8px; }
.kunde-kompakt .field > label {
  flex: 0 0 112px; width: 112px; text-align: right;
  font-size: 12px; color: var(--color-text-muted); line-height: 1.25;
}
/* "aktiv" bleibt eine normale Checkbox-Zeile (Label rechts neben der Box, links ausgerichtet). */
.kunde-kompakt .field.field-check { justify-content: flex-start; }
.kunde-kompakt .field.field-check > label {
  flex: 0 0 auto; width: auto; text-align: left;
  font-size: 12.5px; color: var(--color-text);
}

/* Kompakte Feldhoehe (~27px). Checkbox + verstecktes Datei-Input bewusst ausgenommen (sonst
   verliert .bild-file-input seine Sr-only-Massse / die aktiv-Box wird verzerrt). Die Inputs
   sollen wie im alten Stapel-Layout die volle Feldbreite fuellen (dort per Flex-Column-Stretch
   "gratis"; hier explizit noetig, da .field jetzt Flex-Row ist -> flex:1 1 auto). */
.kunde-kompakt .field input:not([type="checkbox"]):not([type="file"]),
.kunde-kompakt .field select {
  flex: 1 1 auto; min-width: 0;
  height: 27px; padding: 0 8px; font-size: 12.5px; box-sizing: border-box;
}
/* Notiz: 1 Zeile hoch, waechst bei Fokus auf ~3 Zeilen (reines CSS, kein JS noetig). */
.kunde-kompakt .field textarea {
  flex: 1 1 auto; min-width: 0;
  height: 27px; min-height: 0; padding: 4px 8px; font-size: 12.5px; line-height: 1.35;
  resize: none; overflow: hidden; box-sizing: border-box;
  transition: height var(--ease);
}
.kunde-kompakt .field textarea:focus { height: 74px; overflow-y: auto; }

/* Zusammengesetzte Zeilen (ein Label, mehrere Inputs nebeneinander). Nach den generischen
   Input-Regeln notiert, damit die Breiten-Overrides unten bei gleicher Spezifitaet gewinnen
   (Kaskaden-Reihenfolge). */
.kunde-kompakt .kk-multi-inputs { display: flex; flex: 1 1 auto; min-width: 0; gap: 6px; }
.kunde-kompakt .kk-multi-inputs input { flex: 1 1 0; min-width: 0; }
/* PLZ schmal, Ort/Land teilen sich den Rest der Zeile. */
.kunde-kompakt .kk-row-plz .kk-multi-inputs input:first-child { flex: 0 0 66px; }
/* Hausnummer schmal, Straße nimmt den Rest der Zeile. */
.kunde-kompakt .kk-row-str .kk-multi-inputs input:last-child { flex: 0 0 64px; }

/* Farbe: Swatches deutlich kleiner, Umbruch erlaubt (21 Farben passen so in die Spaltenbreite). */
.kunde-kompakt .color-swatch-row { flex: 1 1 auto; min-width: 0; gap: 4px; }
.kunde-kompakt .color-swatch { width: 17px; height: 17px; border-radius: 4px; }
.kunde-kompakt .color-swatch.selected::after {
  left: 4px; top: 2px; width: 4px; height: 7px; border-width: 0 1.6px 1.6px 0;
}
.kunde-kompakt .color-swatch-auto { width: auto; min-width: 30px; height: 17px; padding: 0 5px; }
.kunde-kompakt .color-swatch-auto-label { font-size: 8.5px; }

/* Logo: kleine Vorschau + Knoepfe in einer (bei Bedarf zweizeiligen) kompakten Zeile — alle
   Funktionen (waehlen/aendern, zuschneiden, entfernen) bleiben erhalten, nur kleiner. */
.kunde-kompakt .bild-upload { flex: 1 1 auto; min-width: 0; padding: 5px 8px; gap: 8px; }
.kunde-kompakt .bild-thumb-lg,
.kunde-kompakt .bild-placeholder-lg { width: 46px; height: 34px; }
.kunde-kompakt .bild-placeholder-lg .ico svg { width: 16px; height: 16px; }
.kunde-kompakt .bild-upload-controls { gap: 5px; }
.kunde-kompakt .bild-upload-controls .btn { padding: 4px 8px; font-size: 11px; }

/* Unter ~720px Modalbreite: Spalten stapeln (Muster wie .modal-form-compact). */
@media (max-width: 720px) {
  .kunde-kompakt { grid-template-columns: 1fr; row-gap: 4px; }
  .kunde-kompakt .kk-col { gap: 6px; }
}

/* =========================================================================
   V2.32 (CEO-Mockup Variante A): Objekt-Formular + Objekt-Ansicht kompakt.
   Rein additiv, GESCOPT auf .objekt-kompakt (Bearbeiten, openObModal) bzw.
   .objekt-view-kompakt (Ansicht, viewObModalInner) — trifft NUR das Objekt-Modal,
   kein anderes Formular/keine andere Ansicht (Kunde/Mitarbeiter/Sub unveraendert).
   ========================================================================= */

/* ---- Bearbeiten: Label links (~118px, rechtsbuendig), 2-spaltiges Grid je Reiter ---- */
.objekt-kompakt .modal-form-compact {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 26px;
}
.objekt-kompakt .modal-form-compact .field {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Label linksbuendig im Feld, rechtsbuendig im eigenen 118px-Streifen — .field-check (aktiv-
   Checkbox) und .field-full (Dienstanweisung, "Kunde zahlt Pause") bleiben ausgenommen. */
.objekt-kompakt .modal-form-compact .field:not(.field-check):not(.field-full) > label {
  flex: 0 0 118px;
  width: 118px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: 1.25;
  white-space: normal;
}
.objekt-kompakt .modal-form-compact .field input,
.objekt-kompakt .modal-form-compact .field select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 27px;
  padding: 0 8px;
  font-size: 12.5px;
  box-sizing: border-box;
}
.objekt-kompakt .modal-form-compact .field textarea {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  font-size: 12.5px;
  padding: 6px 8px;
  min-height: 72px;
  box-sizing: border-box;
  transition: min-height .15s ease;
}
/* Dienstanweisung: waechst beim Fokussieren auf ~140px (3 -> ~6 Zeilen), CEO-Vorgabe. */
.objekt-kompakt .modal-form-compact .field textarea:focus { min-height: 140px; }
/* Volle Breite (field-full, z.B. Dienstanweisung/"Kunde zahlt Pause"): Label ueber dem Feld,
   nur kompakter als der Formular-Standard. */
.objekt-kompakt .modal-form-compact .field.field-full {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.objekt-kompakt .modal-form-compact .field.field-full > label {
  font-size: 12px; font-weight: 600; color: var(--color-text-muted);
}
/* Checkbox-Zeile (aktiv): Checkbox + Label nebeneinander, kein 118px-Zwang. */
.objekt-kompakt .modal-form-compact .field-check { gap: 8px; }
.objekt-kompakt .modal-form-compact .field-check input { width: 15px; height: 15px; }
.objekt-kompakt .modal-form-compact .field-check label { font-size: 12px; font-weight: 500; color: var(--color-text); }

/* Zwei Eingaben in EINER Feld-Zeile ("Objekt-Nr. / Art", "Bedarf / aktiv bis", Geo+Maps-Link):
   erste Eingabe optional schmal via .ok-narrow (~74px), zweite nimmt den Rest. */
.objekt-kompakt .ok-split { display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; }
.objekt-kompakt .modal-form-compact .field input.ok-narrow,
.objekt-kompakt .modal-form-compact .field select.ok-narrow { flex: 0 0 74px; width: 74px; }
/* Geo-Feld: Input oben, Maps-Link darunter, beides in derselben Feld-Zelle. */
.objekt-kompakt .ok-stack { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.objekt-kompakt .maps-link { font-size: 11.5px; padding: 0; }

/* Pausen-Staffel-Zeilen: eigene Klasse statt .field-row — das globale ".modal-form-compact
   .field-row{display:contents}" wuerde hier (verschachtelt in .field-full) die beiden Felder
   UEBEREINANDER statt nebeneinander stapeln (derselbe Effekt, den .ma-edit-head-row weiter
   oben in dieser Datei schon fuer das MA-Modal umgeht). Rein optisch — Sichtbarkeits-/
   disabled-Logik (syncPausenStaffel) bleibt unberuehrt. */
.objekt-kompakt .ok-row2 { display: flex; gap: 14px; }
.objekt-kompakt .ok-row2 .field { flex: 1 1 0; min-width: 0; }

/* Stammdaten: zwei unabhaengige Spalten-Stapel nebeneinander (Daten links, Bild/Farbe/
   Freigabe-Hinweis rechts) — bewusst KEINE Grid-Autoplatzierung (5 Felder links vs. 3
   rechts wuerden sonst falsch verschachtelt). */
.objekt-kompakt .ok-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 26px; align-items: start; }
.objekt-kompakt .ok-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* Bild-Upload kompakt (kleine Vorschau + kleine Knoepfe) — reine Groessen-Anpassung,
   bildFeld()-Funktionen (waehlen/zuschneiden/entfernen) bleiben unangetastet. */
.objekt-kompakt .bild-upload { padding: 0; border: none; background: transparent; gap: 8px; }
.objekt-kompakt .bild-upload .bild-thumb-lg,
.objekt-kompakt .bild-upload .bild-placeholder-lg { width: 38px; height: 38px; }
.objekt-kompakt .bild-upload .bild-placeholder-lg .ico svg { width: 16px; height: 16px; }
.objekt-kompakt .bild-upload-controls { gap: 5px; }
.objekt-kompakt .bild-upload-controls .btn { padding: 3px 7px; font-size: 10.5px; }

/* Farb-Swatches kompakt (~17px statt 26px). */
.objekt-kompakt .color-swatch-row { gap: 5px; padding-top: 0; }
.objekt-kompakt .color-swatch { width: 17px; height: 17px; border-radius: 4px; }
.objekt-kompakt .color-swatch.selected::after { left: 4px; top: 1px; width: 4px; height: 7px; border-width: 0 2px 2px 0; }
.objekt-kompakt .color-swatch-auto { height: 17px; min-width: 32px; padding: 0 5px; }
.objekt-kompakt .color-swatch-auto-label { font-size: 8.5px; }

/* Freigabe-/Masterschicht-Hinweistexte kleiner. */
.objekt-kompakt .objzuweis-hint { font-size: 11px; padding: 2px 0; }

/* Schmale Screens: wie der App-Standard auf 1 Spalte zurueckfallen (matcht die bestehende
   @media(max-width:820px)-Grenze oben in dieser Datei — ohne diesen Block wuerde die hoehere
   Selektor-Spezifitaet von .objekt-kompakt die dortige 1fr-Regel sonst ueberstimmen). */
@media (max-width: 820px) {
  .objekt-kompakt .modal-form-compact,
  .objekt-kompakt .ok-2col { grid-template-columns: 1fr; }
  .objekt-kompakt .modal-form-compact .field { flex-direction: column; align-items: stretch; }
  .objekt-kompakt .modal-form-compact .field:not(.field-check):not(.field-full) > label {
    width: auto; flex: none; text-align: left;
  }
  .objekt-kompakt .ok-row2 { flex-direction: column; gap: 4px; }
}

/* ---- Ansicht (viewObModalInner): dichter, Label-Spalte ~118px, Kopf-Bild ~108px ---- */
.objekt-view-kompakt { display: flex; flex-direction: column; gap: 3.5px; }
.objekt-view-kompakt .form-section-title { padding: 4px 0 2px; margin-top: 1px; }
.objekt-view-kompakt .detail-row { grid-template-columns: 118px 1fr; padding: 3.5px 0; }
.objekt-view-kompakt .detail-label { font-size: 12px; }
.objekt-view-kompakt .detail-value { font-size: 12.5px; }
.objekt-view-kompakt .detail-head-photo .bild-gross,
.objekt-view-kompakt .detail-head-photo .bild-gross.bild-placeholder-lg { width: 108px; height: 108px; }
.objekt-view-kompakt .detail-head-photo .bild-gross.bild-placeholder-lg .ico svg { width: 38px; height: 38px; }
.objekt-view-kompakt .ma-view-editbar { padding: 0 2px 4px; }
@media (max-width: 560px) {
  .objekt-view-kompakt .detail-row { grid-template-columns: 1fr; }
}

/* =========================================================================
   Mitarbeiter-Ansicht „Ein-Blick-Dossier" (CEO-Mockup) — .ma-dossier
   Rein ADDITIV: eigener Klassen-Namensraum, teilt sich NICHTS mit den globalen
   .detail-*-Klassen (die bleiben fuer Kunden-/Objekt-Ansichten unveraendert).
   Struktur: Kopfzeile (Avatar + Name + Chips + Bearbeiten) + 2 dichte Spalten
   aus Abschnitten (Label ~112px / Wert, duenne Trennlinie je Zeile).
   ========================================================================= */
.ma-dossier-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.ma-dossier-head .ma-dossier-avatar-img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ma-dossier-avatar-ini {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff;
  font-size: 18px; font-weight: 800; letter-spacing: .02em;
}
.ma-dossier-head-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ma-dossier-name { font-size: 18px; font-weight: 800; color: var(--color-text-strong); line-height: 1.2; word-break: break-word; }
.ma-dossier-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Blaue Chips (Rolle/Qualifikation) — eigenstaendige Farbe, KEINE Aenderung an .badge-offen &co. */
.ma-dossier-chip-blau { background: #DBEAFE; color: #1E40AF; }
html[data-theme="dark"] .ma-dossier-chip-blau { background: #1E3A5F; color: #93C5FD; }
.ma-dossier-editbtn { flex-shrink: 0; }

.ma-dossier-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.ma-dossier-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ma-dossier-sectitle {
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--color-primary); padding-bottom: 4px; margin-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
}
.ma-dossier-rows { display: flex; flex-direction: column; }
.ma-dossier-row { display: grid; grid-template-columns: 112px 1fr; gap: 8px; padding: 2.5px 0; border-top: 1px solid var(--color-border); }
.ma-dossier-row:first-child { border-top: none; }
.ma-dossier-label { font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); padding-top: 1px; }
.ma-dossier-value { font-size: 12.5px; color: var(--color-text-strong); word-break: break-word; }
.ma-dossier-value.is-empty { color: #94A3B8; }
html[data-theme="dark"] .ma-dossier-value.is-empty { color: var(--color-text-muted); }
.ma-dossier-dim { color: #94A3B8; }
html[data-theme="dark"] .ma-dossier-dim { color: var(--color-text-muted); }
.ma-dossier-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ma-dossier-stand { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ma-dossier-erfasst { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ma-dossier-erfasst-item { font-size: 11.5px; color: var(--color-text); white-space: nowrap; }
/* Roter Warnhinweis (Beschaeftigungsverbot) — nutzt bewusst die vorhandenen Rot-Variablen,
   die im Dark Mode bereits automatisch mitwechseln (kein Extra-Override noetig). */
.ma-dossier-alert {
  display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 9px;
  background: var(--color-rot-bg); color: var(--color-rot-text);
  border: 1px solid rgba(239, 68, 68, .35); border-radius: 8px;
  font-size: 12px; font-weight: 700;
}
.ma-dossier-alert .ico svg { width: 15px; height: 15px; }

@media (max-width: 720px) {
  .ma-dossier-columns { grid-template-columns: 1fr; gap: 18px; }
  .ma-dossier-row { grid-template-columns: 1fr; gap: 2px; padding: 5px 0; }
  .ma-dossier-head { flex-wrap: wrap; }
}

/* =========================================================================
   Planung: Objekt-Übersicht — "Ampel-Karten" (CEO-Mockup, freigegebene
   Variante A). Rein additiver Block (nichts oben wurde veraendert). Die
   Kachel-Shell bleibt .objekt-kachel (Karte/Hover/Fokus/Schatten unveraendert);
   .plan-ampel-kachel raeumt hier nur den alten Farbstreifen links weg
   (border-left:none gewinnt per Kaskaden-Reihenfolge, da dieser Block SPAETER
   im Dokument steht) zugunsten einer farbigen Oberkante. Alle neuen Klassen
   sind mit "plan-ampel-" praefixiert. Die meisten Farben haengen an den
   bestehenden CSS-Variablen und passen sich automatisch an Dark Mode an —
   nur die hartkodierte Auftrag-Pille braucht einen eigenen Dark-Override
   (siehe unten, analog zu .firma-badge-partner).
   ========================================================================= */

/* Kachel-Shell: farbige OBERKANTE statt Farbstreifen links. Die tatsaechliche
   Farbe (Rot bei offenen Posten, sonst Kundenfarbe) setzt buildObjektKachel()
   inline via style.borderTopColor. */
.plan-ampel-kachel {
  border-left: none;
  border-top: 4px solid var(--color-border-strong);
}

/* Zeile 1: Objektname + (nur Auftrags-Objekte) dezente "Auftrag"-Pille oben rechts. */
.plan-ampel-row1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
.plan-ampel-name { font-size: 14px; font-weight: 700; color: var(--color-text-strong); line-height: 1.3; min-width: 0; flex: 1 1 auto; word-break: break-word; }
.plan-ampel-auftrag-pill {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap;
  background: rgba(124, 58, 237, .1); color: #7C3AED; border: 1px solid rgba(124, 58, 237, .35);
}

/* Zeile 2: Kunde (bzw. "Auftrag von X") + Ort, dezent grau. */
.plan-ampel-row2 { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.35; min-width: 0; word-break: break-word; }

/* Zeile 3: Besetzungs-Balken (Stunden Ist/Soll) + Zahlen rechts. */
.plan-ampel-stats { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.plan-ampel-balken-row { display: flex; align-items: center; gap: 10px; }
.plan-ampel-balken-track {
  flex: 1 1 auto; height: 7px; border-radius: var(--radius-pill); overflow: hidden;
  background: var(--color-app-bg-2); box-shadow: inset 0 0 0 1px var(--color-border);
}
.plan-ampel-balken-fill { height: 100%; border-radius: var(--radius-pill); transition: width .25s ease; }
.plan-ampel-balken-fill.plan-ampel-gruen { background: var(--color-besetzt); }
.plan-ampel-balken-fill.plan-ampel-gelb { background: var(--color-offen); }
.plan-ampel-balken-fill.plan-ampel-rot { background: var(--color-konflikt); }
.plan-ampel-balken-zahlen { flex-shrink: 0; font-size: 12px; font-weight: 700; font-family: var(--font-mono); color: var(--color-text-strong); white-space: nowrap; }

/* Zeile 4: Status-Chip links (offen=rot / komplett=gruen) + Schichten-Anzahl rechts. */
.plan-ampel-status-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-ampel-status-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap;
}
.plan-ampel-status-chip.plan-ampel-status-offen { background: var(--color-rot-bg); color: var(--color-rot-text); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .3); }
.plan-ampel-status-chip.plan-ampel-status-ok { background: var(--color-besetzt-bg); color: var(--color-besetzt-dark); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .3); }
.plan-ampel-schichten-count { font-size: 11.5px; color: var(--color-text-muted); font-weight: 600; white-space: nowrap; flex-shrink: 0; }

/* statsUnbekannt / keine Schichten: dezenter Ersatz-Hinweis statt Balken+Chip (keine irreführende "0"). */
.plan-ampel-unbekannt { font-size: 12.5px; color: var(--color-text-muted); font-style: italic; padding: 2px 0; }

/* Sortier-/Filter-Leiste (Probleme zuerst | A–Z | Nur offene): reine .segmented/.seg-Instanz,
   erbt Optik, Hover/Active-Zustand und Dark-Mode automatisch von der bestehenden Regel. */
@media (max-width: 768px) {
  /* Umbrechender Toolbar-Kopf: Suche zuerst (.ko-search bekommt hier bereits order:4), Sortierung danach. */
  .plan-ampel-sortbar { order: 5; }
}

/* Dark Mode: nur die hartkodierte Auftrag-Pille braucht einen Override — alles andere haengt an
   Farb-Variablen (var(--color-...)) und passt sich automatisch an (analog .firma-badge-partner). */
html[data-theme="dark"] .plan-ampel-auftrag-pill { background: rgba(124, 58, 237, .22); color: #C4B5FD; border-color: rgba(124, 58, 237, .5); }

/* =========================================================================
   V2.32 (CEO) -- Dokumente-Modal: kachelfestes Umbenennen (Scope dok-fix).
   Zeigt bei einem bereits kategorisierten Dokument (Datei-Praefix
   "<Kategorie> - ") im Umbenennen-Dialog einen FESTEN Praefix-Chip vor dem
   editierbaren Rest-Feld -- verhindert, dass ein Dokument durch versehentlich
   entferntes Praefix aus seiner Kachel faellt (wirkte zuvor wie geloescht).
   ========================================================================= */
.dok-fix-praefix-row { display: flex; align-items: stretch; }
.dok-fix-praefix-row .dok-fix-praefix {
  display: flex; align-items: center; flex-shrink: 0; max-width: 55%;
  padding: 10px 0 10px 12px; font-size: 15px; font-weight: 600; color: var(--color-text-muted);
  background: var(--color-app-bg-2); border: 1px solid var(--color-border-strong); border-right: none;
  border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dok-fix-praefix-row input.inp {
  border-top-left-radius: 0; border-bottom-left-radius: 0; flex: 1 1 auto; min-width: 0;
}
html[data-theme="dark"] .dok-fix-praefix-row .dok-fix-praefix {
  background: #0F1B2E; color: var(--color-text-muted); border-color: var(--color-border-strong);
}

/* =========================================================================
   V2.36 — Versions-Changelog "Versions-Leiste" (CEO-Variante A)
   Ersetzt die fruehere Akkordeon-Liste (.cl-* / .changelog, oben bei V0.31 —
   jetzt ungenutzt, siehe buildChangelogContent() in app.js; bewusst NICHT
   geloescht, additive-only Auftrag): links eine schmale klickbare Versions-
   liste, rechts der Inhalt der gewaehlten Version. Gemeinsame Basis fuer das
   manuell geoeffnete Archiv UND das automatische "Neu in Version X"-Update-
   Modal (Aufrufer setzt dafuer .chlog-update-wrap um die .changelog-intro).
   Modal-Breite: bewusst die bestehende .modal-xl-Stufe (980px) statt einer
   neuen ~880px-Stufe — vermeidet eine dritte Modal-Breitenklasse und jedes
   Risiko, dass ein zusaetzliches Klassen-Flag am geteilten .modal-Element
   (openModal() kennt nur modal-xl/modal-xxl) an anderen Modals haengen bleibt.
   ========================================================================= */
.chlog-update-wrap { display: flex; flex-direction: column; gap: 4px; min-height: 0; }

.chlog-shell {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius);
  overflow: hidden; max-height: min(58vh, 520px);
  background: var(--color-card);
}
.chlog-nav {
  flex: 0 0 210px; min-width: 0; overflow-y: auto; min-height: 0;
  background: var(--color-app-bg-2);
  border-right: 1px solid var(--color-border);
  padding: 6px;
  display: flex; flex-direction: column; gap: 3px;
}
.chlog-nav-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent; cursor: pointer;
  transition: background var(--ease), border-color var(--ease);
}
.chlog-nav-item:hover { background: rgba(3, 105, 161, .08); }
.chlog-nav-item:focus-visible { outline: none; box-shadow: var(--ring); }
.chlog-nav-top { display: flex; align-items: center; gap: 6px; }
.chlog-nav-version {
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  color: var(--color-text-strong); letter-spacing: -.2px;
}
.chlog-nav-sub {
  font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* Blauer "neu"-Punkt: Version seit dem letzten Besuch verpasst (nur im Auto-Update-Modal). */
.chlog-nav-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(3, 105, 161, .18); flex-shrink: 0;
}
/* Aktive Version: blaue Pille, weisse Schrift (CEO-Mockup Variante A). */
.chlog-nav-item[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); }
.chlog-nav-item[aria-selected="true"] .chlog-nav-version { color: #fff; }
.chlog-nav-item[aria-selected="true"] .chlog-nav-sub { color: rgba(255, 255, 255, .85); }
.chlog-nav-item[aria-selected="true"]:hover { background: var(--color-primary-dark); }
.chlog-nav-item[aria-selected="true"] .chlog-nav-dot { background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }

.chlog-content { flex: 1 1 auto; min-width: 0; overflow-y: auto; min-height: 0; padding: 16px 20px; }
.chlog-c-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 6px; }
.chlog-c-version { font-family: var(--font-mono); font-weight: 800; font-size: 20px; color: var(--color-primary); letter-spacing: -.4px; }
.chlog-c-datum { font-size: 13px; color: var(--color-text-muted); }
.chlog-c-titel { font-weight: 700; font-size: 15px; color: var(--color-text-strong); margin-bottom: 10px; }
.chlog-c-punkte { list-style: none; margin: 0; padding: 0; }
.chlog-c-punkte li {
  position: relative; padding: 8px 0 8px 16px; font-size: 12.5px; color: var(--color-text);
  line-height: 1.45; border-top: 1px solid var(--color-border);
}
.chlog-c-punkte li:first-child { border-top: none; padding-top: 0; }
.chlog-c-punkte li::before {
  content: ''; position: absolute; left: 0; top: 15px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--color-primary);
}
.chlog-c-punkte li:first-child::before { top: 7px; }

/* Sehr schmales Fenster (die Verwaltung ist am Handy per CEO-Entscheid auf die gezoomte
   Desktop-Ansicht gesetzt — dieser Zweig greift real nur bei einem schmalen Desktop-Fenster,
   bleibt aber als defensiver Fallback bestehen, analog dem .modal-xl-Zweig bei 768px). */
@media (max-width: 640px) {
  .chlog-shell { flex-direction: column; max-height: min(70vh, 640px); }
  .chlog-nav { flex: 0 0 auto; max-height: 160px; border-right: none; border-bottom: 1px solid var(--color-border); flex-direction: row; flex-wrap: wrap; }
  .chlog-nav-item { width: auto; flex: 1 1 140px; }
}

/* Dark Mode: haengt vollstaendig an Farb-Variablen (var(--color-...)) und passt sich automatisch
   an — die einzigen hartkodierten Werte sind die weisse Pillen-Schrift/Punkt-Farbe auf der
   AKTIVEN (blauen) Version, die in beiden Themes #fff bleiben soll (schon themenfest). */

/* =========================================================================
   V2.38 (CEO): Mitarbeiter-Liste "A1 — Ampel-Punkte" — kompakte Zeilen
   (Zeilenhoehe halbiert), Qualifikationen als Grundlage-Chip (U40/SK §34a)
   + 4 feste Kuerzel-Punkte (EFZ/EH/BS/DE) statt volle Text-Badges.
   Scope ausschliesslich #maTable.ma-a1 (Klasse wird zur Laufzeit von
   renderMitarbeiterTable() gesetzt) -> Bewerber-/Subunternehmer-/andere
   .data-table-Tabellen bleiben komplett unberuehrt. Ampel-Punkt-Farben
   ueber die bestehenden CSS-Variablen (--color-besetzt/-offen/-konflikt/
   -border-strong) -> Dark Mode wechselt automatisch mit (kein Extra-
   Override fuer die Punkte noetig). Mobil-Touch-Ziele (min-height/-width
   38px, siehe V2.24-Block oben) bleiben unangetastet — hier wird nur
   padding/font-size verkleinert, nie min-height/min-width gesetzt.
   ========================================================================= */
#maTable.ma-a1 th,
#maTable.ma-a1 td { padding: 5px 12px; }
#maTable.ma-a1 .ma-name-cell { gap: 7px; }
#maTable.ma-a1 .bild-thumb,
#maTable.ma-a1 .bild-placeholder { width: 26px; height: 26px; }
#maTable.ma-a1 .bild-placeholder .ico svg { width: 13px; height: 13px; }
#maTable.ma-a1 .ma-warn { margin-left: 5px; }
#maTable.ma-a1 .ma-warn svg { width: 13px; height: 13px; }

/* Qualifikationen-Zelle: Grundlage-Chip + Ampel-Punkte, eine Zeile (wrap nur bei Ausnahme-Badges). */
#maTable.ma-a1 .qa1-stack { gap: 7px 10px; row-gap: 4px; }
#maTable.ma-a1 .qa1-chip {
  display: inline-block; padding: 2px 7px; border-radius: var(--radius-pill);
  font-size: 9.5px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; cursor: pointer;
}
#maTable.ma-a1 .qa1-chip-aktiv { background: #DBEAFE; color: #1E40AF; }
html[data-theme="dark"] #maTable.ma-a1 .qa1-chip-aktiv { background: #1E3A5F; color: #93C5FD; }
#maTable.ma-a1 .qa1-chip-leer { background: #F1F5F9; color: var(--color-text-muted); }
html[data-theme="dark"] #maTable.ma-a1 .qa1-chip-leer { background: #2A3850; color: var(--color-text-muted); }
#maTable.ma-a1 .qa1-item { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
#maTable.ma-a1 .qa1-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .2px; color: var(--color-text-muted); text-transform: uppercase;
}
#maTable.ma-a1 .qa1-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .1);
}
#maTable.ma-a1 .qa1-dot-gruen { background: var(--color-besetzt); }
#maTable.ma-a1 .qa1-dot-gelb { background: var(--color-offen); }
#maTable.ma-a1 .qa1-dot-rot { background: var(--color-konflikt); }
#maTable.ma-a1 .qa1-dot-grau { background: var(--color-border-strong); }
#maTable.ma-a1 .qa1-extra { font-size: 10px; padding: 2px 8px; }

/* Unterlagen-/Status-Badge kompakter (nur Groesse, Farbklassen unangetastet). */
#maTable.ma-a1 td .badge { font-size: 10.5px; padding: 2px 8px; }

/* Aktions-Spalte: nur padding/icon-groesse verkleinert (kein min-height/-width -> Mobil-Regel greift weiter). */
#maTable.ma-a1 .row-actions { gap: 4px; }
#maTable.ma-a1 .row-actions .btn { padding: 4px; }
#maTable.ma-a1 .row-actions .ico svg { width: 13px; height: 13px; }

/* Legende ueber der Tabelle (dezent, klein, grau) — von ensureMaA1Legende() eingefuegt. */
.ma-a1-legende { font-size: 11px; color: var(--color-text-muted); margin: -6px 0 10px; line-height: 1.4; }
html[data-theme="dark"] .ma-a1-legende { color: var(--color-text-muted); }

/* =========================================================================
   V2.39 (CEO, Dashboard B1) — KPI-Chips + "Heute wichtig" + Feed-Bloecke
   zweispaltig. Rein additiver Block (scope: neue Klassen, Praefix
   dchip-/hw-/dfb-/dash-feed-card/dash-chips-row) — nichts Bestehendes wird
   hier veraendert. Alle Farben ueber die vorhandenen --color-*-Variablen,
   Dark Mode via html[data-theme="dark"] wie im Rest der Datei.
   ========================================================================= */

/* ---- KPI-Chips-Zeile (ersetzt die 4 grossen Kennzahl-Kacheln) ---- */
.dash-chips-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.dash-chip {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 14px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font: inherit; cursor: pointer; color: var(--color-text-strong);
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.dash-chip:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-primary-light); }
.dash-chip:focus-visible { outline: none; box-shadow: var(--ring); }
.dash-chip:active { transform: translateY(0); }
.dchip-label { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.dchip-value { font-size: 16px; font-weight: 700; font-family: var(--font-mono); color: var(--color-text-strong); }
/* Oberkante ROT + rote Zahl, sobald der Zaehler > 0 ist ("Offene Posten (Monat)"). */
.dash-chip.dchip-danger { border-top-color: var(--color-konflikt); }
.dash-chip.dchip-danger .dchip-value { color: var(--color-rot-text); }
/* GELB, sobald der Zaehler > 0 ist ("Ablauf-Hinweise"). */
.dash-chip.dchip-warn { border-top-color: var(--color-offen); }
.dash-chip.dchip-warn .dchip-value { color: var(--color-offen-text); }
html[data-theme="dark"] .dash-chip { background: var(--color-card); }
html[data-theme="dark"] .dash-chip.dchip-danger .dchip-value { color: #FCA5A5; }
html[data-theme="dark"] .dash-chip.dchip-warn .dchip-value { color: #FCD34D; }

/* ---- "🎯 Heute wichtig" — weisse Karte mit rotem Links-Balken ---- */
.hw-card {
  grid-column: 1 / -1;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-konflikt);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.hw-head { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--color-border); }
.hw-ico { font-size: 16px; line-height: 1; }
.hw-title { font-weight: 700; font-size: 15px; color: var(--color-text-strong); }
.hw-body { display: flex; flex-direction: column; }
.hw-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 18px; border-top: 1px solid var(--color-border);
}
.hw-row:first-child { border-top: none; }
.hw-badge {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .4px;
  padding: 3px 8px; border-radius: var(--radius-pill); text-transform: uppercase;
}
.hw-badge-jetzt, .hw-badge-abgelaufen { background: var(--color-rot-bg); color: var(--color-rot-text); }
.hw-badge-bald { background: var(--color-offen-bg); color: var(--color-offen-text); }
.hw-badge-neu { background: #E0F2FE; color: var(--color-primary-dark); }
.hw-text { flex: 1 1 260px; min-width: 0; font-size: 13.5px; color: var(--color-text); }
.hw-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; font-size: 12.5px; font-weight: 600;
  background: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  color: var(--color-primary-dark); cursor: pointer; font-family: inherit;
  transition: background var(--ease), border-color var(--ease);
}
.hw-btn:hover { background: #E0F2FE; border-color: var(--color-primary-light); }
.hw-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.hw-btn-arrow { font-weight: 700; }
.hw-more { padding: 8px 18px; font-size: 12px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); }
.hw-empty {
  padding: 16px 18px; font-size: 14px; color: var(--color-besetzt-dark); font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.hw-loading { padding: 16px 18px; font-size: 13px; color: var(--color-text-muted); }
.hw-err { color: var(--color-rot-text); }
html[data-theme="dark"] .hw-card { background: var(--color-card); }
html[data-theme="dark"] .hw-btn { background: var(--color-card); border-color: var(--color-border); color: var(--color-primary-light); }
html[data-theme="dark"] .hw-btn:hover { background: #1E3A52; }
html[data-theme="dark"] .hw-badge-neu { background: #1E3A5F; color: #93C5FD; }

/* ---- 4 Feed-Bloecke zweispaltig (Offene Schichten / Ablauf-Hinweise / Warn-Versand / Wachbuch) ---- */
.dash-feeds-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
/* Die Offene-Schichten-Karte ist jetzt eine gleichwertige Feed-Karte (keine volle Breite mehr). */
.dash-tile.dash-feed-card { justify-self: stretch; width: 100%; }
/* Hint-Banner (Boerse/Nachreichungen, ausserhalb meiner Zone gerendert) sollen — falls sie
   trotzdem als Geschwister eines Feed-Hosts auftauchen — immer volle Breite ueber der Zeile
   einnehmen statt eine Grid-Zelle zu verzerren. */
.dash-feeds-grid > .boerse-feed-hinweis, .dash-feeds-grid > .nr-feed-hinweis { grid-column: 1 / -1; order: -1; }
/* "alle zeigen"-Knopf im Feed-Kopf (rechts, nach der Zaehler-Pille). */
.dfb-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.dfb-toggle-ico { font-size: 10px; }
.dfb-hidden-row { display: none; }
@media (max-width: 1200px) { .dash-feeds-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .hw-row { padding: 9px 14px; }
  .hw-text { flex-basis: 100%; }
  .hw-btn { margin-left: auto; }
}

/* V2.34 (Merge-QS-Fund): .field hat display:flex — das native hidden-Attribut greift ohne
   diese Regel NICHT (Hausfalle wie .tab[hidden]). Konkret betroffen: die Ziel-Mitarbeiter-
   Auswahl im Boerse-Ausschreiben-Dialog (zielWrap), die sonst auch im Modus "Alle passenden"
   sichtbar bliebe. */
.field[hidden] { display: none !important; }

/* V2.35 (CEO-Bugfix Boerse-Zielauswahl): Die generische .objzuweis-list ist flex-column mit
   fester max-height — bei vielen Kandidaten QUETSCHT Flexbox jede Zeile auf wenige Pixel
   (overflow:hidden an .checkbox-grid-item erlaubt das Schrumpfen), statt zu scrollen; und der
   Modal-Kontext macht .objzuweis-objekte zum Mehrspalten-Grid (Gruppen-Label schwebte neben der
   Box). Scope .zielma stellt beides NUR fuer die Ziel-Mitarbeiter-Auswahl um. */
.zielma .objzuweis-objekte { display: flex; flex-direction: column; gap: 10px; }
.zielma .objzuweis-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px 14px;
  align-content: start;
  max-height: 300px;
  overflow-y: auto;
}
.zielma .checkbox-grid-item { min-height: 26px; align-items: center; }
.zielma-gruppekopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zielma-gruppekopf .objzuweis-group { margin-top: 0; }
.zielma-gruppekopf .objzuweis-group-partner { padding: 0; }
.zielma-zaehler { font-size: 12px; color: var(--color-text-muted); }
.zielma-allebtn {
  font-size: 11.5px; font-weight: 700; color: var(--color-primary-dark);
  background: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 7px;
  padding: 3px 10px; cursor: pointer;
}
.zielma-allebtn:hover { background: #DBEAFE; }

/* ---- V2.36 (CEO-Wahl "Variante B"): kompakte Schicht-Gruppen im Tages-Popup ----
   Schmale Zeit-Kopfzeile (Zeit + Besetzung + Symbol-Aktionen), darunter je Person
   bzw. offenem Platz genau EINE Zeile. Nur im Badge-Popup (mehrere Schichten);
   das Einzel-Schicht-Popup bleibt auf .shift-popup-row. */
.shift-popup-list-grp { gap: 5px; max-height: min(60vh, 460px); }
.sp-grp { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.sp-grp-h {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 7px; background: #EFF6FF; border-bottom: 1px solid var(--color-border);
}
.sp-grp-zeit {
  min-width: 0; display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--color-text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-grp-cnt { font-family: inherit; font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
.sp-grp-cnt-offen { color: #B91C1C; }
.sp-grp-fremd { font-size: 10.5px; font-weight: 600; color: var(--color-text-muted); font-style: italic; }
.sp-grp-acts, .sp-p-acts { display: inline-flex; gap: 5px; flex-shrink: 0; }
.sp-ico {
  width: 24px; height: 24px; flex-shrink: 0; padding: 0;
  border: 1px solid var(--color-border); border-radius: 6px;
  background: var(--color-card, #fff); color: var(--color-text-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation;
}
.sp-ico svg { width: 13px; height: 13px; display: block; }
.sp-ico:hover { background: #F1F5F9; color: var(--color-text-strong); }
.sp-ico:focus-visible { outline: none; box-shadow: var(--ring); }
.sp-ico-del { border-color: #FECACA; color: #B91C1C; }
.sp-ico-del:hover { background: #FEF2F2; border-color: var(--color-konflikt); color: #B91C1C; }
.sp-p {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 7px; background: var(--color-card, #fff);
}
.sp-p + .sp-p { border-top: 1px solid var(--color-border); }
.sp-p-nm {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; color: var(--color-text-strong); display: inline-flex; align-items: center; gap: 6px;
}
.sp-p-offen .sp-p-nm, .sp-p-leer { color: var(--color-text-muted); font-style: italic; }
.sp-p-leer { font-size: 12.5px; padding: 5px 7px; background: var(--color-card, #fff); }
.sp-p-ehemalig { opacity: .6; }
.sp-p-ehemalig .sp-p-nm { color: var(--color-text-muted); font-style: italic; }
.sp-grp-notiz { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
/* Dark: Kopfzeile und Hover ohne harte Hellblau-/Grau-Flaechen */
html[data-theme="dark"] .sp-grp-h { background: rgba(56, 189, 248, .10); }
html[data-theme="dark"] .sp-ico:hover { background: rgba(148, 163, 184, .16); }
html[data-theme="dark"] .sp-ico-del { border-color: #7F1D1D; color: #FCA5A5; }
html[data-theme="dark"] .sp-ico-del:hover { background: rgba(248, 113, 113, .14); color: #FCA5A5; }
html[data-theme="dark"] .sp-grp-cnt-offen { color: #FCA5A5; }
/* Dark: der Schliessen-Knopf hatte hart #fff (leuchtete als weisser Kasten im dunklen Popup) */
html[data-theme="dark"] .shift-popup-x { background: transparent; }
/* QS V2.36 (Gatekeeper E1-E4): Nacharbeiten am Schicht-Popup.
   Achtung fuer spaeter: .sp-grp hat overflow:hidden — die Zeilen-Polsterung (4px) darf nicht
   kleiner werden, sonst clippt der 3px-Fokusring var(--ring) an den Icon-Knoepfen. */
/* E3: Sub-Mitarbeiter-Icon behaelt sein Tuerkis (alte Regel griff nur auf .shift-popup-row-subma) */
.sp-p-subma .shift-popup-subico { color: #0891B2; }
/* E4: offene Position wieder mit eigener Flaeche — offene Plaetze muessen ins Auge springen */
.sp-p-offen { background: #F1F5F9; }
html[data-theme="dark"] .sp-p-offen { background: rgba(148, 163, 184, .10); }
/* E1: Touch-Geraete (Verwaltung laeuft am Handy in Desktop-Ansicht) — groessere Trefferflaeche,
   Desktop-Optik unveraendert */
@media (pointer: coarse) {
  .sp-ico { width: 32px; height: 32px; }
  .sp-ico svg { width: 15px; height: 15px; }
}
/* E2: Dark-Hover des Schliessen-Knopfes — Bestandsregel faerbte Schrift auf Hintergrundfarbe
   (× wurde beim Ueberfahren unsichtbar) */
html[data-theme="dark"] .shift-popup-x:hover { background: rgba(148, 163, 184, .16); color: var(--color-text-strong); }

/* ---- V2.37: Optionen-Dialog vor dem Dienstplan-Druck (Qualifikationen / Nachunternehmer) ---- */
.druckopt-liste { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.druckopt-zeile {
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px;
  border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-bg-soft, #F8FAFC); cursor: pointer;
}
.druckopt-zeile:hover { border-color: var(--color-border-strong); }
.druckopt-zeile input { width: 18px; height: 18px; accent-color: var(--color-primary); margin-top: 1px; flex-shrink: 0; }
.druckopt-txt { min-width: 0; }
.druckopt-titel { display: block; font-size: 13.5px; font-weight: 600; color: var(--color-text-strong); }
.druckopt-hint { display: block; font-size: 11.5px; color: var(--color-text-muted); line-height: 1.4; margin-top: 2px; }
html[data-theme="dark"] .druckopt-zeile { background: rgba(148, 163, 184, .10); }
/* V2.37 (QS-Fund beim Druck-Dialog): .confirm-box hatte background:#fff HART kodiert und
   keinerlei Dark-Regel — im dunklen Design stand heller Text auf weisser Flaeche, also
   unlesbar. Betrifft ALLE Bestaetigungs-Dialoge (Loeschen, Entfernen, Zeit anpassen …),
   nicht nur den Druck-Dialog. Gleiches Muster wie .shift-popup (Zeile ~3512). */
html[data-theme="dark"] .confirm-box {
  background: var(--color-card); border: 1px solid var(--color-border-strong);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
/* V2.37 (QS-Fund): Im Dark-Design loeschte die Sammelregel `html[data-theme="dark"] .btn
   { background: #243349 }` (Zeile ~3389) den Farbverlauf von .btn-primary — uebrig blieb ein
   dunkelgrauer Knopf, dessen Schrift Zeile ~3391 auf #06243A setzt: dunkel auf dunkel, praktisch
   unlesbar. Betraf JEDEN Primaer-Knopf der App im Dark (Speichern, Anlegen, Drucken …).
   Verlauf mit den Dark-Tokens wiederherstellen — dazu passt die vorhandene dunkle Schrift. */
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-color: transparent;
}
html[data-theme="dark"] .btn-primary:hover {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  border-color: transparent;
}
/* V2.37 (QS E3): .maz-fehler ("Zeit anpassen"-Fehlerzeile) hatte #B91C1C hart — stand bisher
   auf weisser Flaeche. Seit der Dark-Fix die confirm-box dunkel macht, braucht der Text die
   helle Rot-Variante des Themes. */
html[data-theme="dark"] .maz-fehler { color: var(--color-rot-text); }

/* ---- V2.38: „Namen ausblenden" + Sammel-Stundenzettel ---- */
/* Auswahl-Eintrag „Alle Mitarbeiter dieser Firma" — hebt sich von der Namensliste ab */
.druck-ma-alle { border: 1px solid var(--color-primary); background: var(--color-primary-bg, #EFF6FF); margin-bottom: 4px; }
.druck-ma-alle-txt { display: flex; flex-direction: column; gap: 1px; text-align: left; min-width: 0; }
.druck-ma-alle-txt b { font-size: 13.5px; color: var(--color-primary-dark, #0369A1); }
.druck-ma-alle-txt small { font-size: 11.5px; color: var(--color-text-muted); }
html[data-theme="dark"] .druck-ma-alle { background: rgba(56, 189, 248, .10); }
@media print {
  /* Sammeldruck: je Mitarbeiter ein eigenes Blatt. Das ERSTE Blatt bekommt keinen Umbruch,
     sonst entstünde eine Leerseite vorweg. QS E5: unter body.printing geguardet wie alle
     anderen Druckregeln (V0.55-Konvention — normales Strg+P bleibt unberührt). */
  body.printing #printRoot .print-ma-blatt + .print-ma-blatt { break-before: page; page-break-before: always; }
}
/* V2.41 (Altlast aus der V2.37-QS, B1): `.btn:disabled:hover` (Zeile ~602) hat Spezifitaet
   (0,3,0) und schlaegt damit ALLE Dark-Regeln (0,2,1) — im dunklen Design bekam ein
   deaktivierter Knopf beim Ueberfahren einen WEISSEN Hintergrund, waehrend die Schrift hell
   blieb: praktisch unsichtbar. Betrifft jeden deaktivierten Knopf der App. */
html[data-theme="dark"] .btn:disabled:hover,
html[data-theme="dark"] .btn.btn-disabled-hint:disabled:hover {
  background: #243349; border-color: var(--color-border); color: var(--color-text-strong);
}
html[data-theme="dark"] .btn-primary:disabled:hover {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-color: transparent; color: #06243A;
}
html[data-theme="dark"] .btn-danger:disabled:hover { background: #243349; border-color: #5B2A2A; color: #FCA5A5; }

/* ---- V2.42: beschriftete Zeitraum-Navigation (Planung) ----
   Die Pfeil-Knoepfe tragen jetzt ihr ZIEL als Text ("‹ Juli" / "September ›"); in der Mitte
   steht der Zeitraum zweizeilig. Ersetzt die frueheren Icon-Knoepfe + .period-label. */
.btn-nav { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.btn-nav .ico { display: inline-flex; align-items: center; }
.btn-nav .ico svg { width: 16px; height: 16px; display: block; }
.btn-nav .nav-txt:empty { display: none; }
.period-mitte {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.2; min-width: 178px; padding: 0 6px;
}
.period-monat { font-size: 15px; font-weight: 700; color: var(--color-text-strong); white-space: nowrap; }
.period-spanne { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-text-muted); white-space: nowrap; }
/* Touch (Verwaltung laeuft am Handy in Desktop-Ansicht): groessere Trefferflaeche.
   QS E2/E3: 10px waren gegenueber der .btn-Basis (9px) nur +2px Gesamthoehe — zu wenig, um
   das Versprechen zu halten. 13px ergibt ~45px Hoehe; ALLE drei Knoepfe der Leiste wachsen
   gemeinsam, sonst steht "Heute" niedriger daneben. */
@media (pointer: coarse) {
  .period-nav .btn { padding-top: 13px; padding-bottom: 13px; }
}