/* TimeLine mobil – reine Ansicht für Handy und Tablet hochkant. */
.m-app,
.m-seite-wrap,
.m-dok {
  min-height: 100vh;
  background: #f4f6fa;
  font-size: 16px;
  color: #1f2937;
  -webkit-text-size-adjust: 100%;
}
.m-app { padding: 12px 14px 80px; }
.m-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.m-logo { width: 32px; height: 32px; }
.m-titel { font-weight: 700; font-size: 20px; flex: 1; }
.m-abmelden, .m-zurueck {
  border: 1px solid #c8cfdb; background: #fff; border-radius: 8px; padding: 8px 12px; font-size: 15px;
}
.m-mandant, .m-suche {
  width: 100%; box-sizing: border-box; font-size: 17px; padding: 11px 12px; border: 1px solid #c8cfdb;
  border-radius: 10px; background: #fff; margin-bottom: 8px;
}
.m-mandant-text { font-weight: 600; margin-bottom: 8px; color: #44546a; }
.m-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #555; margin: 4px 0 10px; }
.m-check input { width: 18px; height: 18px; }

.m-liste { list-style: none; margin: 0; padding: 0; }
.m-liste li {
  background: #fff; border: 1px solid #e1e6ee; border-radius: 10px; padding: 11px 12px; margin-bottom: 7px; cursor: pointer;
}
.m-liste.flach li { cursor: default; }
.m-liste li.inaktiv { opacity: 0.6; }
.m-zeile-titel { font-weight: 600; }
.m-zeile-sub { font-size: 13px; color: #667085; margin-top: 2px; }
.m-hinweis { color: #667085; padding: 12px 4px; font-size: 14px; }
.m-fehler { color: #b42318; padding: 12px; }
.m-notiz { font-size: 12px; color: #555; margin-top: 4px; }
.m-fuss {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e1e6ee; font-size: 14px;
}

.m-kopf {
  position: sticky; top: 0; z-index: 2; display: flex; gap: 12px; align-items: center;
  background: #1f3864; color: #fff; padding: 10px 12px;
}
.m-kopf .m-zurueck { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.m-kopf .m-zeile-sub { color: #d9e1f2; }
.m-name { font-weight: 700; font-size: 18px; }
.m-tabs { display: flex; background: #fff; border-bottom: 1px solid #e1e6ee; position: sticky; top: 58px; z-index: 2; }
.m-tabs button {
  flex: 1; border: none; background: none; padding: 12px 4px; font-size: 15px; color: #44546a; border-bottom: 3px solid transparent;
}
.m-tabs button.aktiv { color: #1f3864; font-weight: 700; border-bottom-color: #1f3864; }
.m-inhalt { padding: 12px 14px 40px; }

.m-box { background: #fff; border: 1px solid #e1e6ee; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.m-box h3 {
  margin: 0; padding: 12px; font-size: 16px; display: flex; justify-content: space-between; cursor: pointer; background: #f8fafc;
}
.m-box dl { display: grid; grid-template-columns: 42% 58%; margin: 0; padding: 6px 12px 12px; row-gap: 6px; }
.m-box dt { color: #667085; font-size: 14px; }
.m-box dd { margin: 0; font-size: 15px; word-break: break-word; }
.m-box .m-liste { padding: 0 10px 6px; }
.m-rubrik { font-size: 13px; font-weight: 700; color: #44546a; text-transform: uppercase; letter-spacing: 0.03em; margin: 10px 2px 6px; }
.m-box .m-rubrik { margin: 10px 12px 6px; }
.m-zwischen { font-size: 16px; margin: 18px 2px 8px; }
.m-ampel { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; background: #c8cfdb; }
.m-ampel.gruen { background: #12b76a; }
.m-ampel.gelb { background: #f79009; }
.m-ampel.rot { background: #d92d20; }

.m-monat { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.m-monat button { font-size: 20px; width: 44px; height: 40px; border: 1px solid #c8cfdb; border-radius: 8px; background: #fff; }
.m-monat span { font-weight: 700; font-size: 17px; }
.m-tabelle { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; font-size: 14px; }
.m-tabelle th, .m-tabelle td { padding: 7px 8px; border-bottom: 1px solid #eef1f5; text-align: left; vertical-align: top; }
.m-tabelle th { background: #f8fafc; font-size: 13px; color: #667085; }
.m-tabelle .r { text-align: right; white-space: nowrap; }
.m-tabelle tr.pruefen td { background: #fff4d6; }
.m-tabelle tfoot td { font-weight: 700; }
.m-mini { font-size: 11px; color: #98a2b3; }

/* Dokumentansicht: Seitenbilder ohne Speichern/Teilen */
.m-dok { background: #3b4252; }
.m-dok-kopf {
  position: sticky; top: 0; display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: #1f3864; color: #fff; z-index: 2;
}
.m-dok-kopf .m-zurueck { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.m-dok-titel { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-dok-inhalt { padding: 8px; }
.m-dok-inhalt .m-hinweis { color: #e5e7eb; }
.m-seite {
  display: block; width: 100%; height: auto; margin: 0 auto 10px; background: #fff;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; pointer-events: none;
}
:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --border: #d7dbe0;
  --text: #1f2733;
  --muted: #6b7482;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --row-hover: #eef2ff;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
}

.app {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  padding: 4px 8px 16px;
  color: var(--text);
}

.mandant-picker {
  padding: 0 8px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.mandant-picker label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 4px;
}
.mandant-picker select {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
  background: #fff;
}

.nav-group {
  margin-bottom: 18px;
}

.nav-group-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  padding: 2px 8px 6px;
}

.nav-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  margin-bottom: 2px;
}

.nav-item:hover {
  background: var(--bg);
}

.nav-item.active {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}

.app-body {
  flex: 1;
  overflow: auto;
  padding: 24px;
}

.ok-banner {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
}

.iban-status {
  font-size: 12px;
  margin-top: 4px;
}
.iban-status.ok {
  color: #047857;
}
.iban-status.warn {
  color: #b45309;
}
.iban-status.err {
  color: var(--danger);
}

.iban-ok {
  outline: 2px solid #10b981;
  outline-offset: -1px;
}
.iban-warn {
  outline: 2px solid #f59e0b;
  outline-offset: -1px;
}
.iban-err {
  outline: 2px solid var(--danger);
  outline-offset: -1px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 18px;
  /* 1100px reichten fuer sieben Reiter. Mit dem achten (Urlaub) brach die
     Reihe um, und zwei Zeilen Reiter kosten mehr Platz als sie sparen.
     1400px passen auf jeden Bildschirm, auf dem hier gearbeitet wird; auf
     schmaleren begrenzt die Breite des Fensters ohnehin. */
  max-width: 1400px;
  margin: 0 auto;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.panel-head h2 {
  font-size: 16px;
  margin: 0;
}

.hint {
  color: var(--muted);
  font-size: 13px;
  margin: 2px 0 14px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

th.sortable:hover {
  color: var(--text);
}

tbody tr:hover {
  background: var(--row-hover);
}

td.actions {
  text-align: right;
  white-space: nowrap;
}

.empty {
  color: var(--muted);
  padding: 24px;
  text-align: center;
}

.search {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 14px;
}

/* Filterleiste (Suche + Status-Segmente) */
.filterbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
/* Beim Scrollen oben fixieren (spannt über die Panel-Innenränder) */
.filterbar-sticky {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--panel);
  margin: 0 -18px 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.filterbar .search {
  margin-bottom: 0;
  flex: 1;
  min-width: 200px;
  max-width: 340px;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.seg {
  border: none;
  border-right: 1px solid var(--border);
  background: #fff;
  padding: 7px 13px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
}
.seg:last-child {
  border-right: none;
}
.seg:hover {
  background: var(--bg);
}
.seg.active {
  background: var(--primary);
  color: #fff;
}
.seg-count {
  opacity: 0.7;
  font-size: 12px;
  margin-left: 3px;
}

/* Status-Badges */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
.badge-aktiv {
  background: #ecfdf5;
  color: #047857;
}
.badge-bewerber {
  background: #eff6ff;
  color: #1d4ed8;
}
.badge-ausgeschieden {
  background: #f3f4f6;
  color: #6b7280;
}
/* Bewerbung abgeschlossen (nicht angetreten) – bewusst zurückhaltend. */
.badge-abgesagt {
  background: #fef2f2;
  color: #b91c1c;
}

.search:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

.region-cell {
  max-width: 320px;
  color: var(--muted);
  font-size: 13px;
}

button {
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.btn {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: 7px 13px;
  border-radius: 7px;
}

.btn:hover {
  background: var(--bg);
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.btn-danger {
  background: #fff;
  border-color: #dc2626;
  color: #b91c1c;
}
.btn-danger:hover {
  background: #fef2f2;
}
/* Summenleiste unter der Detailerfassung */
.detail-summe {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card, #f8fafc);
  font-size: 14px;
}
.detail-summe b {
  font-size: 15px;
}
/* Aktive/VZ-TZ/GFB-Zeile in der Mitarbeiterliste */
.ma-summe {
  font-size: 14px;
  font-weight: 600;
  margin: 4px 0 10px;
}
/* Gesamtübersicht aller Aufträge (Stundenerfassung) */
.gesamt-tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.gesamt-tab th,
.gesamt-tab td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.gesamt-tab th.num,
.gesamt-tab td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.gesamt-tab th.sortable {
  cursor: pointer;
  user-select: none;
}
.gesamt-tab thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--border);
}
.gesamt-tab tbody tr:hover > td {
  background: var(--row-hover, #f5f7ff);
}
.gesamt-tab tfoot td {
  border-top: 2px solid var(--border);
  font-weight: 600;
}
.detail-summe-top {
  margin-top: 0;
  margin-bottom: 8px;
  padding: 7px 12px;
  font-size: 13px;
}
/* Google-Maps Entfernungs-Box im Einsatz-Individual-Edit */
.geo-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card, #f8fafc);
}
.geo-adr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
/* Sammelimport Stundenzettel */
.sammel-tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sammel-tab th,
.sammel-tab td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.sammel-tab th.num,
.sammel-tab td.num {
  text-align: right;
}
.sammel-tab tr.row-gelb td {
  background: #fffbeb;
}
.sammel-tab tr.row-importiert td {
  background: #f0fdf4;
}
.sammel-meta {
  font-size: 11px;
  color: var(--muted, #8b827a);
}
.sammel-erk {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
}
/* Angebot „Kennung merken" – gehört zur Zuordnung, soll aber nicht lauter
   sein als sie. */
.sammel-merken {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted, #8b827a);
  cursor: pointer;
}
.sammel-merken input {
  margin: 0;
}
.sammel-merken b {
  color: var(--text, #2b2622);
}
/* Hinweiszeilen in der Maske: gruen = alles in Ordnung, gelb = hinsehen. */
.hint.hinweis-gruen {
  color: #166534;
}
.hint.hinweis-gelb {
  color: #7c2d12;
  background: #fffbeb;
  border-left: 3px solid var(--warn, #b45309);
  padding: 4px 8px;
}

/* Block „ohne Nachweis" ueber der Fristenliste. */
.ohne-nachweis {
  border: 1px solid var(--warn, #b45309);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0 16px;
  background: #fffdf7;
}

/* Fristenliste: abgelaufen rot, in den nächsten 30 Tagen gelb. */
.tab tr.frist-rot td {
  background: #fef2f2;
}
.tab tr.frist-gelb td {
  background: #fffbeb;
}
.frist-fuss {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.frist-fuss .hint {
  flex: 1 1 auto;
  margin: 0;
}

/* Aufenthaltspapiere im Personalstamm: sechs Spalten, damit Art, Zeitraum,
   Erlaubnis und Nummer nebeneinander stehen. */
.aufenth-head,
.aufenth-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr 1.2fr 28px;
  gap: 6px;
  align-items: center;
}
.aufenth-head {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.aufenth-row {
  margin-bottom: 6px;
}

/* Namenszweifel: Der Zettel nennt jemand anderen als die Zuordnung. Auffällig
   genug zum Hinsehen, aber kein Fehler – es kann dieselbe Person sein. */
.sammel-warnung {
  margin-top: 3px;
  padding: 3px 6px;
  border-left: 3px solid var(--warn, #b45309);
  background: #fffbeb;
  font-size: 11px;
  color: #7c2d12;
  max-width: 460px;
}
.badge {
  display: inline-block;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.badge.b-ok {
  background: #dcfce7;
  color: #15803d;
}
.badge.b-warn {
  background: #fef9c3;
  color: #a16207;
}
.badge.b-err {
  background: #fee2e2;
  color: #b91c1c;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-sm {
  padding: 4px 9px;
  font-size: 13px;
}

.btn-link {
  border: none;
  background: none;
  color: var(--primary);
  padding: 4px 6px;
}

/* „Öffnen" in der Personalakte ist ein Anker statt eines Knopfes (siehe
   OeffnenLink) – er soll aber genauso aussehen und sich anfassen lassen. */
a.btn-link {
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  display: inline-block;
}

.btn-link.danger {
  color: var(--danger);
}

.btn-link:hover {
  text-decoration: underline;
}

/* Formular (Modal) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: hidden; /* Kopf/Fuß bleiben fix, nur .modal-body scrollt */
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.modal-head {
  flex: 0 0 auto; /* oben fixiert */
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
}

/* Bestätigungsdialog über dem Bearbeiten-Fenster (z. B. beim Blättern) */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 80; /* über dem Modal (z-index 50) */
}
.dialog-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.3);
  padding: 20px 22px;
  max-width: 460px;
}
.dialog-text {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
}
.dialog-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Mitarbeiter-Auswahl im Stammdatenexport */
.export-auswahl-kopf {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 6px 0 10px;
}

/* Info-Box in der Stundenerfassung (Hinweis aus dem Mitarbeiterstamm) */
.ma-info-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 14px;
  padding: 10px 14px;
  background: #fef9e7;
  border: 1px solid #f4d35e;
  border-left: 4px solid #e6a700;
  border-radius: 8px;
}
.ma-info-icon {
  flex: none;
  font-size: 16px;
  line-height: 1.4;
}
.ma-info-text {
  font-size: 13.5px;
  color: #5c4a00;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* Freitext-Info (Stundenerfassung) */
.info-textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 120px;
}
.info-textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

/* Blättern zwischen Mitarbeitern im Bearbeiten-Fenster */
.ma-nav-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ma-nav-title > span {
  flex: 1;
}
.ma-nav-btn {
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.ma-nav-btn:hover:not(:disabled) {
  background: var(--bg);
  border-color: var(--primary);
}
.ma-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.modal-body {
  flex: 1 1 auto; /* nimmt den Platz zwischen Kopf und Fuß ein */
  min-height: 0; /* erlaubt das Scrollen im Flex-Container */
  overflow-y: auto;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  /* Zeilen oben halten und auf Inhaltshöhe lassen; freier Platz bleibt unten,
     sonst würde bei fester Modalhöhe die Reiterzeile aufgeblasen. */
  align-content: start;
}

/* Breiter Dialog (z. B. Mitarbeitermaske mit vielen Feldern): mehr Platz,
   dreispaltig -> deutlich weniger Scrollen. */
.modal-lg {
  max-width: 900px;
  max-height: 92vh;
}

/* „Mitarbeiter zuordnen": einspaltig, breiter, hoch genug für die Auswahlliste */
.modal-zuordnen {
  max-width: 640px;
}
.modal-zuordnen .modal-body {
  grid-template-columns: 1fr;
  min-height: 360px;
  align-content: start;
  overflow: visible;
}

/* Getabbte Maske: konstante Höhe, damit Kopf/Reiter oben und die Fußzeile
   unten beim Reiterwechsel an gleicher Stelle bleiben – nur der Feldbereich
   scrollt (Scrollbalken erscheint bei Bedarf). */
.modal-tabbed {
  height: 92vh;
  /* Breiter als der normale große Dialog: In der Personalakte waren sonst
     Dateiname und Rubrik abgeschnitten („Personaldoku…"). Auf kleinen
     Bildschirmen bleibt ein Rand. */
  max-width: min(1280px, 96vw);
}
/* Rubrik in der Aktenzeile vollständig lesbar */
.modal-tabbed select.dok-kat {
  min-width: 270px;
}

/* Reiterleiste in der Maske – bleibt beim Scrollen oben stehen */
.modal-tabs {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  padding-top: 2px;
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.modal-tab {
  border: none;
  background: transparent;
  padding: 7px 12px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.modal-tab:hover {
  background: var(--bg);
}
.modal-tab.active {
  background: var(--primary);
  color: #fff;
}
.tab-placeholder {
  grid-column: 1 / -1;
  color: var(--muted);
  padding: 28px;
  text-align: center;
  font-style: italic;
}

/* Beschäftigungsbetriebe-Zeilen (Mandantenmaske) */
.betrieb-head {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.betrieb-head span {
  flex: 1;
}
.betrieb-head .betrieb-nr {
  flex: 0 0 70px;
}
.betrieb-head span:last-child {
  flex: 0 0 26px;
}
.betrieb-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.betrieb-row input {
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}
.betrieb-row input.betrieb-nr {
  flex: 0 0 70px;
}
.betrieb-row .btn-link {
  flex: 0 0 auto;
  font-size: 18px;
}

/* Einsatzort- und V-Satz-Zeilen (Kundenmaske) als Raster mit festen Spalten */
.eo-grid {
  display: grid;
  /* Bezeichnung · Kostenstelle · Straße · Nr. · PLZ · Ort · Bundesland ·
     Feiertage · Ansprechpartner · Löschen
     Felder mit bekannter Laenge bekommen feste Breiten: eine fuenfstellige
     PLZ muss vollstaendig lesbar sein, die Hausnummer braucht kaum Platz.
     Der Rest teilt sich den verbleibenden Raum. */
  grid-template-columns:
    1.25fr 0.62fr 1.15fr 46px 62px 1fr 0.95fr 96px 1fr 26px;
  gap: 7px;
  align-items: center;
}
.vs-grid {
  display: grid;
  grid-template-columns: 1.3fr 1.4fr 0.7fr 1fr 26px;
  gap: 8px;
  align-items: center;
}
/* Festbezüge (Mitarbeiter, Reiter Entlohnung): Lohnart · Bezeichnung ·
   Betrag · Intervall · Monate · Kürzung · Monatslohn · Löschen */
.fb-grid {
  display: grid;
  grid-template-columns: 1.4fr 1.3fr 0.8fr 0.95fr 0.8fr 1.35fr 1.2fr 26px;
  gap: 7px;
  align-items: center;
}
.fb-row {
  margin-bottom: 6px;
}
.fb-grid select,
.fb-grid input {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}
.fb-grid input.ta-right {
  text-align: right;
}
.fb-grid input.fb-readonly,
.fb-grid input:disabled {
  background: var(--bg-subtle, rgba(127, 127, 127, 0.08));
  color: var(--muted);
}
.betrieb-head.fb-grid span {
  flex: initial;
}
.fb-row .btn-link {
  font-size: 18px;
}
.kk-grid {
  display: grid;
  grid-template-columns: 2.4fr 1fr 26px;
  gap: 8px;
  align-items: center;
}
.kk-grid select,
.kk-grid input {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}
.betrieb-head.kk-grid span {
  flex: initial;
}
.eo-grid input,
.eo-grid select,
.vs-grid input,
.vs-grid select {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}
/* Schmale Spalten: weniger Innenabstand, sonst frisst der Rand den Inhalt
   (eine fuenfstellige PLZ passte vorher nicht ins Feld). */
.eo-grid input.eo-schmal {
  padding-left: 6px;
  padding-right: 6px;
}
.betrieb-head.eo-grid,
.betrieb-head.vs-grid {
  margin-bottom: 4px;
}
/* Betragsfelder rechtsbuendig – Nachkommastellen stehen dann untereinander */
.vs-grid input.ta-right {
  text-align: right;
}
.betrieb-head.eo-grid span,
.betrieb-head.vs-grid span {
  flex: initial;
}
tr.row-inaktiv td {
  color: var(--muted);
}

/* Personalakte */
.akte-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
}
.akte-toolbar select {
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}
.akte-tabelle {
  margin-top: 6px;
}
.akte-tabelle td:first-child .btn-link {
  font-size: 13px;
  text-align: left;
}
select.dok-kat {
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  max-width: 100%;
}

.status-anzeige {
  padding: 6px 0;
}

/* Bewerber-Hinweisleiste im Mitarbeiter-Modal */
.bewerber-leiste {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: #fff7e6;
  border: 1px solid #f0c36d;
  border-radius: 8px;
  font-size: 13px;
  color: #7a5b00;
}
@media (prefers-color-scheme: dark) {
  .bewerber-leiste {
    background: #3a3016;
    border-color: #6b5518;
    color: #f0d089;
  }
}

/* Stundenerfassung */
.stunden-kopf {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 4px 0 12px;
}
.stunden-kopf label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.stunden-kopf select,
.stunden-kopf input[type='month'] {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.monat-nav {
  display: flex;
  gap: 4px;
  align-items: center;
}
.stunden-kopf .ma-suche {
  min-width: 320px;
}
/* Zahlenzeile und Haken nebeneinander, in fester Reihenfolge. Der Haken darf
   seine Stelle nicht wechseln, wenn sich eine Zahl aendert. */
.stunden-kopf .ma-zahlen {
  white-space: nowrap;
}
.stunden-kopf .ma-ausgetreten {
  margin-left: 10px;
  font-weight: 400;
  white-space: nowrap;
}
.stunden-kopf .ma-nav {
  display: flex;
  gap: 4px;
  align-items: center;
}
.stunden-kopf .ma-nav .combo {
  flex: 1;
  min-width: 0;
}
.stunden-toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
}
.ok-inline {
  color: #15803d;
  font-weight: 600;
}
/* Rückmeldung (z. B. „Gesetzliche Pause gesetzt …") auf eigener Zeile unter der
   Toolbar – bricht sauber um statt sich neben die Buttons zu quetschen. */
.stunden-meldung {
  margin: -4px 0 10px;
  font-size: 13px;
  line-height: 1.4;
}
.stunden-scroll {
  max-height: calc(100vh - 300px);
  overflow: auto;
}
.stunden-tabelle {
  font-size: 13px;
}
.stunden-tabelle thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--border);
}
.stunden-tabelle th,
.stunden-tabelle td {
  padding: 2px 6px;
  white-space: nowrap;
}
.stunden-tabelle td.kw {
  color: var(--muted);
  font-weight: 600;
}
.stunden-tabelle td.tag {
  min-width: 64px;
}
.stunden-tabelle tr.tag-sa td.tag {
  color: #2563eb;
}
.stunden-tabelle tr.tag-so td.tag {
  color: #dc2626;
}
.stunden-tabelle tr.tag-feiertag {
  background: #fff7e6;
}
.stunden-tabelle input,
.stunden-tabelle select {
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
}
.z-zeit,
.z-pause,
.z-min,
.z-std {
  width: 64px;
  text-align: right;
}
/* Stunden-Zelle: Dezimalfeld + HH:MM-Kontrollanzeige daneben */
.z-std-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}
.z-std-hhmm {
  min-width: 42px;
  font-size: 12px;
  color: var(--ink-faint, #8b827a);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Die Überschriften stehen bündig über ihren Werten. Linksbündig lag
   „Stunden · H:MM" über dem Dezimalfeld, und die H:MM-Anzeige rechts daneben
   wirkte wie ein Wert der Fehlzeit-Spalte. */
.stunden-tabelle th.z-std-kopf,
.stunden-tabelle th.z-fehl-kopf {
  text-align: right;
}
/* Abstand zwischen H:MM und Fehlzeit, damit beide Spalten nicht ineinanderlaufen */
.stunden-tabelle th.z-fehl-kopf,
.stunden-tabelle td.z-fehlzelle {
  padding-left: 18px;
  min-width: 70px;
}
/* HH:MM-Zusatz an den Summenzeilen (oben/unten) */
.detail-hhmm {
  color: var(--ink-faint, #8b827a);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Globaler „rechnet"-Kringel neben dem Titel in der Sidebar */
.brand-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
}
.z-kb {
  width: 56px;
}
.z-bem {
  width: 100%;
  min-width: 160px;
}
.z-akt {
  white-space: nowrap;
}
.z-akt .btn-link {
  font-size: 16px;
  padding: 0 4px;
}
.stunden-summe td {
  font-weight: 700;
  border-top: 2px solid var(--border);
  padding-top: 6px;
}
.stunden-tabelle tr.tag-sprung td {
  background: #e0edff;
}
.stunden-tabelle tr.z-fehler td {
  background: #fee2e2;
}
.stunden-tabelle tr.z-fehler .z-zeit {
  border-color: #dc2626;
}
/* Aus KI-Scan übernommene unsichere Tage (zum Prüfen) */
.stunden-tabelle tr.z-pruefen td {
  background: #fef2f2;
}
.stunden-tabelle tr.z-pruefen .z-zeit,
.stunden-tabelle tr.z-pruefen .z-min,
.stunden-tabelle tr.z-pruefen .z-std {
  border-color: #f87171;
}

/* KI-Scan Vorschau-Overlay */
.scan-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.scan-dialog {
  background: var(--card, #fff);
  border-radius: 10px;
  padding: 16px 18px;
  width: min(680px, 92vw);
  max-height: 88vh;
  overflow: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.scan-dialog-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.scan-dialog-kopf h3 {
  margin: 0;
  font-size: 15px;
}
.scan-erkennung {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0;
  font-size: 13px;
}
.scan-warn {
  color: #b45309;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}
.scan-tab-scroll {
  overflow-x: auto;
  margin-top: 8px;
}
.scan-tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.scan-tab th,
.scan-tab td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.scan-tab tr.scan-unsicher td {
  background: #fef2f2;
}
.scan-dialog-akt {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.zettel-ueber-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.zettel-ueber-kopf .zettel-titel {
  font-weight: 600;
}
/* KI-Scan „läuft"-Anzeige mit rotierendem, rundem VC-Logo */
.scan-lauft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #b91c1c;
  font-weight: 600;
}
.scan-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  animation: vc-spin 0.9s linear infinite;
}
.scan-spinner-lg {
  width: 20px;
  height: 20px;
}
.rechnet-hinweis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  font-weight: 600;
  color: var(--primary);
}
/* Immer sichtbares „arbeitet gerade"-Badge (fixiert oben rechts) */
.busy-badge {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.busy-badge .scan-spinner {
  width: 18px;
  height: 18px;
}
/* Mitarbeiter-Auswahl während Laden/Rechnen deutlich gesperrt zeigen */
.combo-input-wrap input:disabled {
  background: var(--bg, #f1efec);
  color: var(--primary, #c81e2c);
  font-weight: 600;
  cursor: progress;
}
/* Herleitung „Basis × %" unter dem Faktorsatz in der Korrektur-Tabelle */
.korr-faktor {
  font-size: 11px;
  color: var(--ink-faint, #8b827a);
  font-weight: 400;
  white-space: nowrap;
}
/* Satz-/Faktor- und Std.-Satz-Zelle im Korrektur-Formular: Feld oben,
   kleine Beschriftung darunter. Feste Breite = saubere Spaltenausrichtung. */
.kf-satz {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  width: 74px;
}
.kf-satz .kf-num {
  width: 100%;
}
/* Read-only-Anzeige (Std.-Satz Basis) – sieht wie ein Feld aus, nicht editierbar */
.korrektur-form .kf-readonly {
  display: inline-block;
  padding: 5px 6px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  font-size: 12px;
  text-align: right;
  color: var(--ink-soft, #5c554f);
  background: #f6f4f2;
  box-sizing: border-box;
}
.kf-satz-cap {
  font-size: 10px;
  line-height: 1.15;
  color: var(--ink-faint, #8b827a);
  text-align: right;
  white-space: normal;
}
/* Korrekturhinweis-Zeile in den Kostenstellen-Monatswerten (nicht auf die
   Lohnart summiert, sondern als eigener Hinweis zur Lohnart). */
.zuschl-tab tr.korr-hinweis td {
  font-style: italic;
  color: #a1620b;
  background: #fbf6ec;
}
@keyframes vc-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scan-spinner {
    animation-duration: 2.2s;
  }
}

/* Monatsübersicht (KW-Raster) */
.uebersicht-tabelle {
  border-collapse: collapse;
  font-size: 13px;
}
.uebersicht-tabelle th,
.uebersicht-tabelle td {
  border: 1px solid var(--border);
  padding: 4px 6px;
  text-align: center;
  vertical-align: top;
}
.uebersicht-tabelle thead th {
  background: var(--panel);
  font-weight: 700;
  color: var(--text);
}
.uebersicht-tabelle thead th .wsum {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.uebersicht-tabelle td.wt {
  font-weight: 700;
  background: var(--panel);
  text-align: left;
}
.uebersicht-tabelle tr.tag-sa td.wt {
  color: #2563eb;
}
.uebersicht-tabelle tr.tag-so td.wt {
  color: #dc2626;
}
.uebersicht-tabelle td.uz {
  cursor: pointer;
  min-width: 74px;
}
.uebersicht-tabelle td.uz:hover {
  background: var(--row-hover);
}
.uebersicht-tabelle td.uz.tag-feiertag {
  background: #ffedd5;
  box-shadow: inset 3px 0 0 #f59e0b;
}
.uz-tag-ft {
  color: #b45309;
  font-weight: 700;
}
.uz-ft {
  font-size: 9px;
  line-height: 1.15;
  color: #b45309;
  margin-top: 1px;
  white-space: normal;
}
.uebersicht-tabelle td.uz-leer {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    rgba(0, 0, 0, 0.04) 5px,
    rgba(0, 0, 0, 0.04) 10px
  );
}
/* Erfassungsraster: Tage vor Eintritt / nach Austritt – schraffiert und
   gesperrt. Ein trotzdem vorhandener Wert bleibt sichtbar und wird über die
   zusätzliche Klasse z-fehler rot hervorgehoben. */
.stunden-tabelle tr.z-ausserhalb > td {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    rgba(0, 0, 0, 0.05) 5px,
    rgba(0, 0, 0, 0.05) 10px
  );
}
.stunden-tabelle tr.z-ausserhalb .tag {
  opacity: 0.55;
}
.stunden-tabelle tr.z-ausserhalb input:disabled {
  background: transparent;
  border-color: transparent;
}

/* Tage außerhalb des Beschäftigungszeitraums (vor Eintritt / nach Austritt):
   gleiche Schraffur wie Tage außerhalb des Monats, Datum blasser. */
.uebersicht-tabelle td.uz-ausserhalb {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 5px,
    rgba(0, 0, 0, 0.04) 5px,
    rgba(0, 0, 0, 0.04) 10px
  );
}
.uebersicht-tabelle td.uz-ausserhalb .uz-tag {
  opacity: 0.4;
}
.uz-tag {
  font-size: 11px;
  color: var(--muted);
}
.uz-std {
  font-weight: 700;
  font-size: 14px;
}
.uz-multi {
  font-size: 10px;
  color: #7c3aed;
  font-weight: 600;
}
.uz-fz {
  margin-top: 3px;
  font-size: 11px;
  padding: 1px 2px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: inherit;
}
.uebersicht-tabelle td.uz.uz-fehlzeit {
  background: #fef3c7;
}
.uz-fehlzeit .uz-fz {
  font-weight: 700;
  color: #b45309;
}

/* SFN-Zuschläge je Tag (in der Übersichtszelle) */
.uz-zuschlaege {
  margin-top: 3px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.uz-z {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-size: 10px;
  line-height: 1.25;
  color: #0369a1;
  white-space: nowrap;
}
.uz-z-la {
  font-weight: 700;
}
.uz-z-std {
  color: var(--muted);
}
.uz-z-eur {
  font-variant-numeric: tabular-nums;
}

/* Monats-Zusammenfassung der Zuschläge */
.zuschl-summe {
  margin-top: 18px;
  max-width: 560px;
}
/* DATEV-Monatswerte: breiter + einzeilig (7 Spalten) */
.datev-summe {
  max-width: 900px;
}
.datev-tab th,
.datev-tab td {
  white-space: nowrap;
}
.zuschl-summe h3 {
  margin: 0 0 6px;
  font-size: 14px;
}
.zuschl-tab {
  width: 100%;
  border-collapse: collapse;
}
.zuschl-tab th,
.zuschl-tab td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  font-size: 13px;
}
.zuschl-tab th {
  background: var(--th-bg, #f3f4f6);
  text-align: left;
}
.zuschl-tab .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.zuschl-tab tfoot td {
  font-weight: 700;
}
.zuschl-tab tr.la-basis td {
  background: var(--th-bg, #f3f4f6);
  font-weight: 600;
}
.zuschl-tab tr.la-ungepflegt td {
  color: #b45309;
}

/* Einsatzpflege: Breadcrumb + klickbare Zeilen */
.einsatz-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 14px;
  flex-wrap: wrap;
}
.einsatz-breadcrumb .crumb {
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  color: var(--primary, #2563eb);
  font-size: 14px;
  font-family: inherit;
}
.einsatz-breadcrumb .crumb.aktiv {
  color: var(--text);
  font-weight: 600;
  cursor: default;
}
.einsatz-breadcrumb .sep {
  color: var(--muted);
}
tr.row-klick {
  cursor: pointer;
}
tr.row-klick:hover > td {
  background: var(--row-hover, #f5f7ff);
}

/* Reiter in der Monatsübersicht */
.ueber-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  /* Lieber schieben als umbrechen: Zwei Zeilen Reiter verschieben bei jedem
     Wechsel den halben Bildschirm. Auf schmalen Fenstern laesst sich die
     Reihe stattdessen seitlich bewegen. */
  overflow-x: auto;
  /* overflow-y ausdruecklich abschalten: Sobald eine Achse nicht mehr
     "visible" ist, macht der Browser aus der anderen von selbst "auto" –
     und die Reihe bekam eine senkrechte Bildlaufleiste fuer die zwei Pixel,
     die die Reiterraender ueberstehen. */
  overflow-y: hidden;
  scrollbar-width: thin;
}
.ueber-tab {
  border: 1px solid transparent;
  border-bottom: none;
  background: none;
  padding: 8px 16px;
  /* Beschriftungen nicht in sich umbrechen lassen – „Be- & Abzuege" ueber
     zwei Zeilen macht die ganze Reihe hoch. */
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
  border-radius: 8px 8px 0 0;
  margin-bottom: -1px;
}
.ueber-tab:hover {
  background: var(--bg);
}
.ueber-tab.active {
  color: var(--text);
  font-weight: 600;
  border-color: var(--border);
  background: var(--panel);
}

/* Monatssumme unter dem KW-Raster */
.monat-summe {
  margin-top: 10px;
  font-size: 14px;
}
.monat-summe b {
  font-variant-numeric: tabular-nums;
}
.monat-summe-sep {
  margin: 0 10px;
  color: var(--ink-faint, #8b827a);
}

/* Reiter Tag: Tagesauswahl + je Auftrag */
.tag-auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}
.tag-ft-hinweis {
  color: #b45309;
  font-weight: 600;
  margin-bottom: 10px;
}
.tag-auswahl .tag-btn-so {
  color: #dc2626;
  border-color: #dc2626;
}
.tag-auswahl .tag-btn-ft {
  color: #b45309;
  border-color: #f59e0b;
  background: #fff7e6;
}
.tag-auftrag {
  margin-bottom: 16px;
  max-width: 560px;
}
.tag-auftrag-kopf {
  font-weight: 700;
  margin-bottom: 4px;
}
.tag-sfn {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.tag-sfn-chip {
  background: #e0f2fe;
  color: #0369a1;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.tag-lohn {
  margin-top: 8px;
}
.tag-formel {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.monatswerte-view .zuschl-summe {
  margin-bottom: 18px;
  max-width: 900px;
}
/* Monatswerte: breiter + einzeilig, damit Lohnart-Bezeichnungen nicht umbrechen */
.monatswerte-view .zuschl-tab th,
.monatswerte-view .zuschl-tab td {
  white-space: nowrap;
}
.monat-summe-fehl {
  color: var(--muted);
}

/* Editierbare Monatswerte / Korrekturen je Einsatz */
.korrektur-tab .korr-inp {
  width: 90px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 13px;
  font-family: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.korrektur-tab .korr-inp:focus {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: -1px;
}
.korrektur-tab .korr-inp-la {
  width: 54px;
  text-align: left;
}
.korrektur-tab .korr-inp-bez {
  width: 160px;
  text-align: left;
}
.korrektur-tab tr.korr-override {
  background: #eff6ff;
}
.korrektur-tab tr.korr-override.la-basis {
  background: #dbeafe;
}

/* Manuelle Monatskorrekturen */
/* Erfassungsraster: Hinweis, wenn Filter alle Tage ausblenden. */
.raster-leer {
  padding: 14px 12px;
  color: var(--muted, #6b7280);
  background: #fffbeb;
  text-align: center;
}

/* Monatsabschluss: Übersicht der letzten 12 Monate (offen/festgeschrieben). */
.abschluss-uebersicht {
  margin: 14px 0 4px;
}
.abschluss-uebersicht h3 {
  margin: 0 0 2px;
  font-size: 14px;
}
.abschluss-monate {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.abschluss-monat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 132px;
  padding: 8px 10px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.abschluss-monat:hover {
  border-color: #9ca3af;
}
.abschluss-monat.ist-zu {
  background: #f0fdf4;
  border-color: #86efac;
}
.abschluss-monat.ist-aktiv {
  outline: 2px solid #2563eb;
  outline-offset: -1px;
}
.abschluss-monat .am-monat {
  font-weight: 600;
  font-size: 13px;
}
.abschluss-monat .am-status {
  font-size: 12px;
  color: #6b7280;
}
.abschluss-monat.ist-zu .am-status {
  color: #15803d;
  font-weight: 600;
}
.abschluss-monat .am-detail {
  font-size: 11px;
  color: #9ca3af;
}

.korrektur-box {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card, #fafafa);
  max-width: 900px;
}
.korrektur-box h3 {
  margin: 0 0 4px;
  font-size: 14px;
}
/* GFB-Verdienstgrenze: eigene kleine Box über den Korrekturen, nur bei GFB. */
.gfb-box {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card, #fafafa);
  max-width: 900px;
}
.gfb-box.gfb-box-warn {
  border-color: #f59e0b;
  background: #fffbeb;
}
.gfb-box h3 {
  margin: 0 0 4px;
  font-size: 14px;
}
.gfb-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  margin-top: 6px;
}
.gfb-warn {
  color: #b45309;
  font-weight: 600;
}
.gfb-ok {
  color: #15803d;
  font-weight: 600;
}
.korrektur-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  margin-top: 8px;
}
.korrektur-form input {
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
}
.korrektur-form .kf-sel {
  padding: 5px 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
  max-width: 150px;
}
.korr-akt {
  display: flex;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
}
.korrektur-box tr.korr-edit {
  background: #eff6ff;
}
.korrektur-form .kf-la {
  width: 44px;
}
.korrektur-form .kf-la-frei {
  width: 68px;
  border-color: #2563eb;
  background: #eff6ff;
}
.korrektur-form .kf-num {
  width: 74px;
  text-align: right;
}
.korrektur-form .kf-bez {
  width: 140px;
}
.korrektur-form .kf-bem {
  flex: 1;
  min-width: 100px;
}

/* Tagesansicht (chronologische Tagesliste) */
.tages-tabelle {
  width: 100%;
  border-collapse: collapse;
}
.tages-tabelle th,
.tages-tabelle td {
  border: 1px solid var(--border);
  padding: 5px 9px;
  font-size: 13px;
}
.tages-tabelle th {
  background: var(--th-bg, #f3f4f6);
  text-align: left;
}
.tages-tabelle .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tages-tabelle .kw,
.tages-tabelle .tag {
  color: var(--muted);
  white-space: nowrap;
}
.tages-tabelle .tag-zuschl {
  color: #0369a1;
  font-size: 12px;
}
.tages-tabelle .tag-hinweis {
  color: #b45309;
  font-size: 12px;
}
.tages-tabelle tr.tag-feiertag {
  background: #fff7e6;
}
.tages-tabelle tr.tag-sa td.tag {
  color: #2563eb;
}
.tages-tabelle tr.tag-so td.tag {
  color: #dc2626;
}
.tages-tabelle tfoot td {
  font-weight: 700;
  background: var(--th-bg, #f3f4f6);
}

/* Inline-Ansicht des Stundenzettels */
.zettel-ansicht {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zettel-auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.zettel-frame {
  width: 100%;
  height: 78vh;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.zettel-bild {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Stundenzettel-Ablage in der Monatsübersicht */
.zettel-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0 14px;
  background: var(--card, #fafafa);
}
.zettel-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
}
.zettel-titel {
  font-weight: 700;
}
.zettel-leer {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.zettel-liste {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.zettel-liste li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}
.zettel-meta {
  color: var(--muted);
  font-size: 12px;
}
.zettel-hinweis {
  margin: 8px 0 0;
}

/* Einstellungen */
.einstellung-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}
.einstellung-row label {
  font-size: 13px;
  color: var(--muted);
}
.einstellung-row input {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

/* Tägliche Arbeitszeit (Mo–So) */
.tagesarbeitszeit {
  display: flex;
  gap: 8px;
}
.taz-day {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.taz-day label {
  font-size: 12px;
  color: var(--muted);
}
.taz-day input {
  width: 100%;
  min-width: 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  text-align: right;
}

/* Verteilungsfrage für die Wochenarbeitszeit */
.az-verteilen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 12px;
  background: var(--accent-soft, #eff6ff);
  border: 1px solid var(--primary, #2563eb);
  border-radius: 8px;
  font-size: 13px;
}
.az-verteilen-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Live-Abgleich Tagessumme ↔ Wochenarbeitszeit */
.az-summe {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
}
.az-summe.ok {
  color: #047857;
}
.az-summe.warn {
  color: #b45309;
}

.modal-lg .modal-body {
  grid-template-columns: repeat(3, 1fr);
}

/* Durchsuchbare Auswahl (Tätigkeit) */
.combo {
  position: relative;
  min-width: 0;
}

.combo-input-wrap {
  position: relative;
  min-width: 0;
}

.combo-input-wrap input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 8px 28px 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
}

.combo-input-wrap input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

.combo-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.combo-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 2px 0 0;
  padding: 4px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  max-height: 260px;
  overflow-y: auto;
  z-index: 60;
}

.combo-list li {
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.combo-list li:hover,
.combo-list li.aktiv {
  background: var(--row-hover);
}

.combo-list li strong {
  color: var(--primary);
  margin-right: 6px;
}

.combo-empty {
  color: var(--muted);
  cursor: default;
}
.combo-kennung {
  color: var(--muted);
  font-size: 12px;
}
/* Gewählter Mitarbeiter in der Überschrift der Stundenerfassung */
.kopf-ma {
  /* Name in der ersten Zeile, Personalnummer darunter: In einer Zeile riss
     die Nummer bei langen Namen ab – und die braucht man beim Abgleich. */
  display: inline-flex;
  flex-direction: column;
  line-height: 1.25;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
  font-weight: 600;
  color: var(--primary, #c81e2c);
}
.kopf-ma-pnr {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

/* Fehlzeiten-Reiter */
.fehl-kopf {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--row-hover);
  border-radius: 8px;
  font-size: 14px;
}
.fehl-tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 14px;
}
.fehl-tab th,
.fehl-tab td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.fehl-tab th.num,
.fehl-tab td.num {
  text-align: right;
}
.fehl-tab tr.fehl-edit {
  background: #eff6ff;
}
.fehl-akt {
  display: flex;
  gap: 8px;
}
.fehl-form {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.fehl-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.fehl-row label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--muted);
}
.fehl-row .fehl-info {
  flex: 1;
  min-width: 200px;
}
.fehl-vorschau {
  font-size: 13px;
  padding: 6px 0;
}
.fehl-satz {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0 0;
}
/* Fehlzeit-Markierungen in den Ansichten */
.uz-fehl {
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 4px;
  padding: 0 4px;
  display: inline-block;
  margin-top: 2px;
}
.tag-btn-fehl {
  border-color: #b91c1c;
  color: #b91c1c;
}
.tag-fehl-hinweis {
  margin: 6px 0;
  padding: 6px 10px;
  background: #fee2e2;
  color: #7f1d1d;
  border-radius: 6px;
  font-size: 13px;
}
.stunden-tabelle tr.z-fehl {
  background: #fef2f2;
}
.z-fehlzelle {
  color: #b91c1c;
  font-size: 12px;
  white-space: nowrap;
  text-align: right;
}
.ds-fehl {
  color: #b91c1c;
}
.tag-fehl-badge {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 4px;
  padding: 0 5px;
}
.fehl-basis {
  margin: 8px 0 12px;
  padding: 8px 10px;
  background: var(--row-hover);
  border-radius: 8px;
}
.fehl-basis-kopf {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.fehl-schalter {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.fehl-schalter-lbl {
  font-size: 12px;
  color: var(--muted);
  margin-left: 6px;
}
.fehl-schalter-lbl:first-child {
  margin-left: 0;
}
.fehl-pill {
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card, #fff);
  cursor: pointer;
  font-size: 13px;
}
.fehl-pill.aktiv {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
.fehl-werte {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fehl-wert {
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--card, #fff);
  border: 1px solid var(--border);
  color: var(--muted);
}
.fehl-wert.aktiv {
  color: var(--text, #111);
  border-color: var(--primary);
  background: #eff6ff;
}

/* Varianten-Berechnung der Ø-Std/Tag (A/B/C, untereinander mit Formel) */
.fehl-var {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.fehl-var:first-of-type {
  border-top: none;
  padding-top: 0;
}
.fehl-var-titel {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.fehl-var-werte {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* .fehl-wert als klickbarer Button: Button-Standardlook zurücksetzen */
button.fehl-wert {
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
button.fehl-wert:hover {
  border-color: var(--primary);
}
/* Legende A/B/C untereinander (kompakte Absätze) */
.fehl-legende p {
  margin: 2px 0;
}

/* Urlaubs-Detailübersicht (wie Altsystem-Dialog) im Fehlzeiten-Reiter */
.urlaub-box {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--row-hover);
  max-width: 480px;
}
.urlaub-titel {
  font-weight: 700;
  margin-bottom: 8px;
}
.urlaub-grp {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.urlaub-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0;
  font-size: 13px;
}
.urlaub-row b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.urlaub-rest b {
  color: #1e7e34;
}

/* Box + Perioden-Liste nebeneinander */
.urlaub-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}
.urlaub-liste {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--row-hover);
  min-width: 240px;
}
.urlaub-tab {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
.urlaub-tab th,
.urlaub-tab td {
  border-bottom: 1px solid var(--border);
  padding: 3px 14px 3px 0;
  text-align: left;
}
.urlaub-tab th {
  color: var(--muted);
  font-weight: 600;
}
.urlaub-tab .num {
  text-align: right;
  padding-right: 0;
  font-variant-numeric: tabular-nums;
}
.urlaub-tab tfoot td {
  font-weight: 700;
  border-bottom: none;
  padding-top: 5px;
}
.urlaub-leer {
  font-size: 13px;
  color: var(--muted);
  padding: 4px 0;
}
.urlaub-quote {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.urlaub-quote b {
  font-variant-numeric: tabular-nums;
}
.urlaub-quote-basis {
  color: var(--muted);
}

/* Beschäftigungsart-Badge neben dem Monat (GFB / Vollzeit / Teilzeit) */
/* Maße bewusst identisch zu .einsatz-chip: beide stehen nebeneinander im
   Kopf der Stundenerfassung und sollen auf einer Linie liegen. Die Farbe
   unterscheidet sie, nicht die Größe. */
.ma-typ {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ma-typ-vz {
  background: #e6f4ea;
  color: #1e7e34;
  border-color: #1e7e3433;
}
.ma-typ-tz {
  background: #e7f0ff;
  color: #1d4ed8;
  border-color: #1d4ed833;
}
.ma-typ-gfb {
  background: #fbeee0;
  color: #a1620b;
  border-color: #a1620b33;
}
.ma-typ-kf {
  background: #ede9fe;
  color: #6d28d9;
  border-color: #6d28d933;
}

/* Einsatz-Chips im Stundenerfassungs-Kopf (direkter Sprung in den Einsatz) */
.einsatz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
/* Zeilenumbruch in der Kopfleiste: das Auftrag/Einsatz-Select startet dadurch
   links in einer neuen Zeile (unter dem Mitarbeiter), statt oben rechts. */
.stunden-kopf .kopf-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}
/* Auftrag/Einsatz-Select bleibt links stabil (hüpft nicht mit den Chips). */
.stunden-kopf .einsatz-auswahl {
  flex: 0 0 auto;
}
/* Einsätze-Chips direkt neben dem Auftrag/Einsatz-Select (eine Zeile). */
.stunden-kopf .einsatz-label {
  align-items: flex-start;
}
.stunden-kopf .einsatz-label .einsatz-chips {
  justify-content: flex-start;
}
.einsatz-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}
.einsatz-chip:hover {
  background: var(--row-hover);
  border-color: var(--primary);
}
.einsatz-chip.aktiv {
  background: #dbeafe;
  border-color: var(--primary);
  color: #1e40af;
}
.einsatz-chip.inaktiv {
  opacity: 0.5;
  font-weight: 500;
}

.ts-key {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 9px 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
}

/* Export-Reiter */
.export-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.export-row .field {
  min-width: 220px;
}
.export-btn {
  min-width: auto !important;
}

.export-preview {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 14px;
  max-height: 380px;
  overflow: auto;
  white-space: pre;
  margin-top: 6px;
}

.warn-banner {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
}
.warn-banner ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.warn-banner li {
  margin: 2px 0;
}

.modal-foot {
  flex: 0 0 auto; /* unten fixiert */
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* erlaubt dem Grid-Element, schmaler als sein Inhalt zu werden
     -> verhindert horizontalen Überlauf/Scrollbalken im Dialog */
  min-width: 0;
}

.field.full {
  grid-column: 1 / -1;
}

/* Formularraster AUSSERHALB eines Dialogs (Bescheinigungen & Verträge).
   In den Masken liefert .modal-body das Raster; diese Formulare stehen direkt
   im Bereich und brauchen ein eigenes – sonst stünden .field und .group-title
   dort untereinander statt in Spalten. */
.feld-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: start;
  max-width: 880px;
  margin-top: 12px;
}

.group-title {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
  margin-top: 6px;
}

.group-title:first-child {
  margin-top: 0;
}

.field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

/* Beschriftungen einzeilig halten: bricht eine Beschriftung um, rutscht ihr
   Eingabefeld gegenüber den Nachbarfeldern nach unten. Lieber kürzer
   formulieren als die Zeile ausrichten – Hinweistexte unter dem Feld stören
   die Ausrichtung dagegen nicht. */
.field > label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Checkbox + Beschriftung auf einer Linie (Checkbox nicht auf 100% Breite) */
.check-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.field .check-inline input,
.check-inline input {
  width: auto;
  flex: none;
  margin: 0;
}

/* Mehrzeilige Felder gehoeren hier dazu: Ohne sie nimmt der Browser seine
   eigene Schreibmaschinenschrift, und ein Textbereich sieht neben den
   Eingabefeldern derselben Maske aus wie ein Fremdkoerper. */
.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}

.field textarea {
  line-height: 1.45;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}

.error-banner {
  background: #fef2f2;
  color: var(--danger-hover);
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 13px;
}

/* Monatsabschluss: Hinweis in der Stundenerfassung */
.gesperrt-hinweis {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fbbf24;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
}

/* Fortschrittsbalken (Monatsabschluss / Bewegungsdaten-Berechnung) */
.fortschritt-bahn {
  margin-top: 12px;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.fortschritt-balken {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.15s linear;
}

/* Feldnaher Hinweis auf einen unplausiblen Wert (z. B. Austritt vor Eintritt). */
.feld-fehler {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #b91c1c;
}

/* Abschluss-Zustand über der Stundenerfassung. Bewusst kräftig: ob der Monat
   zu ist und ob dieser Mitarbeiter einzeln offen steht, entscheidet darüber,
   ob eine Eingabe überhaupt ankommt – und ob die gezeigten Werte die
   abgerechneten sind oder eine Neuberechnung. */
.abschluss-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 14px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  border-left: 4px solid #dc2626;
}
/* Einzeln freigegeben: ebenfalls rot – hier droht der stille Fehler, dass die
   Korrektur nie festgeschrieben wird – aber sichtbar anders als „gesperrt". */
.abschluss-banner.offen {
  background: #fff7ed;
  color: #9a3412;
  border-color: #fdba74;
  border-left-color: #ea580c;
}
.abschluss-banner-icon {
  font-size: 16px;
  line-height: 1.2;
}

/* Herkunft der Zuschlagsstunden in der Tagesansicht (Nachtschicht über
   Mitternacht): kleiner Zusatz unter der Formel, damit erkennbar bleibt,
   aus welcher Schicht die Stunden stammen. */
.tag-quelle {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
/* Hinweiszeile am Ursprungstag: Teil der Zuschläge liegt auf dem Folgetag. */
.tages-tabelle tr.tag-uebertrag td {
  font-size: 11px;
  color: #92400e;
  background: #fffbeb;
  font-style: italic;
}

/* Die zwei gemeindeabhängigen Feiertagsschalter teilen sich EINE Rasterspalte –
   als eigene Spalten würden sie die ohnehin breite Einsatzort-Zeile sprengen. */
.eo-feiertage {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.eo-feiertage label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
}
.eo-feiertage input[type='checkbox'] {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  flex: none;
}

/* --- Anmeldung & Benutzer ---------------------------------------------- */

/* Seitenleiste als Spalte, damit der Benutzerblock unten stehen bleibt. */
.sidebar {
  display: flex;
  flex-direction: column;
}
.sidebar nav {
  flex: 0 0 auto;
}

.sidebar-benutzer {
  margin-top: auto; /* schiebt den Block an den unteren Rand */
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.sidebar-benutzer-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.sidebar-benutzer-rolle {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.sidebar-benutzer-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
}

.anmeldung {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}
.anmelde-box {
  width: 100%;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.anmelde-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
}
.anmelde-kopf img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.anmelde-titel {
  font-size: 17px;
  font-weight: 600;
}
.anmelde-unter {
  font-size: 13px;
  color: var(--muted);
}
.anmelde-hinweis {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.anmelde-box label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
}
.anmelde-box input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
}
.anmelde-box input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}
.anmelde-box button.primary {
  margin-top: 4px;
  padding: 9px 12px;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.anmelde-box button.primary:hover:not(:disabled) {
  background: var(--primary-hover);
}
.anmelde-box button.primary:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Deutlich sichtbarer Hinweis auf die Entwicklungsfassung. */
.dev-banner {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #78350f;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.45;
}
.dev-banner code {
  background: rgba(0, 0, 0, 0.06);
  padding: 0 3px;
  border-radius: 3px;
}

/* --- Dokumentansicht im Browserbetrieb -------------------------------- */
.dokansicht {
  max-width: min(1100px, 94vw);
  width: 94vw;
  height: 90vh;
  display: flex;
  flex-direction: column;
}
/* Das zuletzt angesehene Dokument bleibt markiert, auch nachdem die Ansicht
   geschlossen wurde. Wer eine Akte durchgeht, weiss sonst nicht mehr, wo er
   war. Bewusst zurueckhaltend: eine Markierung, keine Auswahl. */
.akte-tabelle tr.zuletzt-angesehen > td {
  background: #fff7e0;
}
.akte-tabelle tr.zuletzt-angesehen > td:first-child {
  box-shadow: inset 3px 0 0 #e0a800;
}

.dokansicht-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dokansicht-aktionen {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: normal;
}
/* Rubrikleiste der Sammelliste „Altsystem einsortieren": ein Klick ordnet ein
   und zeigt das naechste Blatt. Der Vorschlag der Texterkennung ist umrandet,
   nicht vorausgewaehlt – entschieden wird von Hand. */
.dokansicht-rubriken {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: #fffdf7;
}
.dokansicht-rubriken .btn.vorschlag {
  border-color: #e0a800;
  box-shadow: inset 0 0 0 1px #e0a800;
  font-weight: 600;
}
.dokansicht-inhalt {
  flex: 1 1 auto;
  min-height: 0;
  background: #f4f5f7;
}
.dokansicht-inhalt iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Logo in der Seitenleiste: dauerhaft sichtbar, dreht sich beim Rechnen. */
.brand-logo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  flex: none;
}

/* --- Rueckfragen und Hinweise ------------------------------------------ */
.dialog-box {
  max-width: 480px;
  width: min(480px, 92vw);
}
.dialog-text {
  padding: 20px;
  line-height: 1.5;
  /* Meldungen enthalten Zeilenumbrueche (\n) – die sollen auch welche sein. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- Impressum / Datenschutz ------------------------------------------ */

.rechts-fusszeile {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted, #6b7280);
}
.rechts-fusszeile button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.rechts-fusszeile button:hover {
  color: var(--fg, #111827);
}
.rechts-fusszeile-sidebar {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
}

/* Die Texte sind lang – deshalb eine ganze Seite statt eines Kastens. */
.rechts-seite {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(17, 24, 39, 0.55);
  overflow-y: auto;
  padding: 32px 16px;
}
.rechts-seite-inhalt {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  padding: 22px 28px 30px;
}
.rechts-seite-kopf {
  margin-bottom: 8px;
}
.rechts-zurueck {
  background: none;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: 13px;
  color: var(--accent, #2563eb);
  cursor: pointer;
}
.rechtstext {
  font-size: 13.5px;
  line-height: 1.6;
  color: #1f2937;
}
.rechtstext h2 {
  margin: 4px 0 14px;
  font-size: 20px;
}
.rechtstext h3 {
  margin: 20px 0 6px;
  font-size: 14px;
}
.rechtstext p {
  margin: 0 0 10px;
}
.rechtstext ul {
  margin: 0 0 10px;
  padding-left: 20px;
}
.rechtstext li {
  margin-bottom: 6px;
}
.rechtstext-stand {
  margin-top: 22px;
  font-size: 12px;
  color: #6b7280;
}
/* Auf der Anmeldeseite gehoert die Fusszeile an den unteren Rand – als
   Flex-Kind stellt sie sich sonst neben den Anmeldekasten. */
.rechts-fusszeile-anmeldung {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  margin-top: 0;
}

/* ---- Sitzungssperre ---------------------------------------------------- */

.sperr-warnung-huelle {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.45);
}
.sperr-warnung {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  padding: 20px 22px;
  text-align: center;
}
.sperr-warnung-titel {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.sperr-warnung p {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.5;
}

/* Uebertrag aus dem Vorjahr: Feld und Schaltflaechen in der Kontozeile. */
.urlaub-vortrag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.urlaub-vortrag input {
  width: 70px;
  text-align: right;
  padding: 2px 6px;
}

/* Solange ein Fenster offen ist, steht die Seite dahinter still. Sonst reicht
   der Browser das Mausrad an die Liste im Hintergrund weiter, sobald das
   Fenster selbst nichts zu scrollen hat – und beim Schliessen steht die Liste
   an einer anderen Stelle als vorher. */
body.fenster-offen .app-body {
  overflow: hidden;
}
/* Und wenn das Fenster doch scrollt: am Ende der Liste nicht weiterreichen. */
.modal-body,
.rechts-seite,
.dokansicht-inhalt {
  overscroll-behavior: contain;
}

/* Beschaeftigungszeitraum unter der Ueberschrift des Urlaubskontos. */
.urlaub-zeitraum {
  margin: -6px 0 10px;
  font-size: 12px;
  color: var(--muted, #6b7280);
}

/* Kalenderwoche neben Datumsfeldern – der Kalender des Browsers zeigt keine KW. */
.kw-hinweis {
  margin-left: 6px;
  font-size: 12px;
  color: var(--muted, #6b7280);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* EzB: eine Frage, die noch niemand beantwortet hat. Der Bogen hat 59 davon;
   wer eine überliest, bekommt ihn von der Behörde zurück. Deshalb rot, bis
   etwas ausgewählt ist – und danach unauffällig wie jedes andere Feld. */
.field.ezb-offen > label,
.field.ezb-offen > label.check-inline {
  color: var(--danger);
  font-weight: 600;
}
.field.ezb-offen > select {
  color: var(--danger);
  border-color: var(--danger);
}