:root {
  --bg: #faf9f7;
  --card-bg: #ffffff;
  --border: #e3e1de;
  --text: #202124;
  --muted: #6b6d72;
  --primary: #33363a;
  --primary-dark: #1c1d1f;
  --danger: #d64545;
  --green: #22a55d;
  --orange: #e8823c;
  --changed-bg: #fff6da;
  --sidebar-w: 240px;
}

* { box-sizing: border-box; }

/* Ohne diese Regel gewinnt bei Elementen mit eigenem "display" (z.B.
   .neu-form { display: flex }) die Klassen-Angabe gegen das
   hidden-Attribut - das Element bliebe trotz hidden sichtbar. Betrifft
   jedes per JS ein-/ausgeblendete Formular (siehe zeigeFormular() in
   base.html), nicht nur .neu-form - daher als generelle Regel, nicht nur
   dort gefixt. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Text-Links (Dokumente, Zuordnungen ...) einheitlich in Anthrazit mit feiner
   Unterstreichung statt Browser-Blau/-Lila (Robert: "auch die ganzen
   Dokumente Links bitte anpassen"). Knöpfe/Navigation haben eigene Farben. */
a:not([class]), a:not([class]):visited {
  color: var(--primary); text-decoration: underline;
  text-decoration-color: rgba(51, 54, 58, 0.35); text-underline-offset: 3px;
}
a:not([class]):hover { color: var(--primary-dark); text-decoration-color: currentColor; }

/* Ruhige Navigations-Links: Zurück-Links und "Spalten anpassen" (Robert:
   "nur als schöner Link und nicht als Button"). */
.link-dezent, .link-dezent:visited, button.link-dezent {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0; border: none; background: none;
  color: var(--muted); font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.link-dezent:hover, button.link-dezent:hover { background: none; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.zurueck-leiste { margin: 0 0 0.75rem; }

/* Checkboxen und Radio-Knöpfe in Anthrazit statt Browser-Blau (Robert: "die
   blauen Checkboxen sind auch hässlich"). */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--primary);
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

body.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}

.brand-link { text-decoration: none; color: var(--text); font-weight: 700; }

.brand-mark { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand-logo { display: block; height: 44px; width: auto; border-radius: 6px; }
.brand-sub { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }

.brand-mark-lg { display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 2rem; }
.brand-mark-lg .brand-logo { height: 84px; }
.brand-mark-lg .brand-sub { font-size: 0.8rem; }

/* Logo hat einen opaken weißen Hintergrund (kein Transparenz-PNG) - braucht
   daher eine helle Karte, um auf der dunklen Sidebar nicht zu kollidieren
   (gleiches Muster wie beim ooo-manager). */
/* Logo und App-Name zentriert (Robert: "bitte das Logo und den Titel zentrieren"). */
.brand-mark-sidebar { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; text-align: center; }
.brand-mark-sidebar .brand-logo {
  height: 68px; background: #fff; padding: 10px; border-radius: 10px; box-sizing: content-box;
}
.brand-mark-sidebar .brand-sub { font-size: 0.7rem; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--primary);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  padding: 1.5rem 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.sidebar-brand .brand-link { color: #fff; font-size: 1rem; line-height: 1.3; display: block; }
.sidebar-brand .brand-sub {
  display: block; margin-top: 0.35rem; font-size: 0.65rem; color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase; letter-spacing: 0.1em;
}

.sidebar-nav {
  flex: 1;
  padding: 0.75rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

/* Hilfe-Links ganz unten über dem Benutzer, abgesetzt vom Hauptmenü. */
.sidebar-unten { margin-top: auto; padding-top: 0.75rem; display: flex; flex-direction: column; gap: 2px; }

.sidebar-section {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  padding: 0.85rem 0.7rem 0.4rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}

.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }
.nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-item.active { background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 600; }

.sidebar-user {
  position: relative;
  padding: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.user-menu-button {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* sonst zentriert die allgemeine button-Regel */
  gap: 0.6rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0.4rem;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  text-align: left;
}

.user-menu-button:hover { background: rgba(255, 255, 255, 0.08); }

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.user-name {
  font-size: 0.85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-dropdown {
  display: none;
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(100% + 0.4rem);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  padding: 0.3rem;
  z-index: 1000;
}

.user-menu-dropdown.open { display: block; }

.user-menu-dropdown a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
}

.user-menu-dropdown a:hover { background: var(--bg); }
/* "Simulation beenden" im Benutzer-Menü sieht aus wie "Abmelden". */
.user-menu-dropdown button.link-knopf {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
}
.user-menu-dropdown button.link-knopf:hover { background: var(--bg); }

/* "Benutzer simulieren": oben fixiert und unübersehbar, damit niemand
   vergisst, dass er gerade mit fremden Augen schaut. */
.simulation-balken {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.9rem;
  background: #fff1e6;
  border: 1px solid var(--orange);
  border-radius: 10px;
  font-size: 0.9rem;
}
.simulation-balken form { margin: 0; }

.content {
  flex: 1;
  min-width: 0;
  max-width: 1500px;
  margin: 0 auto;
  padding: 2rem 2.5rem;
}

/* ── Mobiler Shell (Hamburger-Menü statt fixer 240px-Sidebar) ────────────
   Robert: "vor allem für das Hochladen von Dokumenten eine Mobilversion
   [...] einfach mobile friendly" - die feste Sidebar allein sorgt auf einem
   Handy-Bildschirm dafür, dass für den eigentlichen Inhalt kaum noch Platz
   bleibt. Unter der Breakpoint-Grenze wird die Sidebar zur ausblendbaren
   Schublade (position:fixed, per Transform ein-/ausgefahren), die per
   Hamburger-Knopf in einer schmalen mobilen Kopfzeile geöffnet wird. */
.mobile-topbar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--primary);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1100;
}
.mobile-menu-knopf {
  background: none;
  border: none;
  color: #fff;
  padding: 0.3rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.mobile-menu-knopf svg { width: 26px; height: 26px; display: block; }
.mobile-topbar .brand-mark { color: #fff; }
.mobile-topbar .brand-sub { color: rgba(255, 255, 255, 0.6); }

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1150;
}


/* Mehrspaltige Formulare für Stammdaten etc. Bewusst FESTE Spaltenzahl statt
   auto-fit: auto-fit erzeugt je nach verfügbarer Breite mal 1, mal 2, mal 3
   Spalten und wirkt dadurch "zufällig" uneinheitlich - ein fester
   2-Spalten/1-Spalten-Bruch über eine Media Query sieht auf jeder
   Fensterbreite gleich aufgeräumt aus. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
  align-items: start;
  min-width: 0;
}
.form-grid label { grid-column: span 1; min-width: 0; }
/* .span-2/.span-full gelten fuer JEDES direkte Grid-Kind (nicht nur <label>) -
   z.B. .form-actions, .dokument-bereich, .checkbox-reihe sind <div>s, die
   trotzdem die volle Formularbreite einnehmen sollen. */
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-full { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }
}

.cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.25rem;
  align-items: start;
}
.cards-row .card { margin-bottom: 0; min-width: 0; overflow-x: hidden; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
}
.card.card-fehler { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.pflicht-stern { color: var(--danger); }
/* "Für die Aktivierung nötig" - orange wie der Entwurf-Status. Leere Felder
   bekommen einen zarten orangen Rand/Hintergrund, bis etwas eingetragen ist. */
.aktivierung-marker { color: var(--orange); font-size: 0.7em; vertical-align: 0.15em; }
input.aktivierung-feld:placeholder-shown { border-color: #f2c9a4; background: #fffaf5; }
input.aktivierung-feld::placeholder { color: #c98a55; }
.aktivierung-fehlt {
  display: inline-block;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: #fdf3e3;
  color: #8a5a12;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Client-seitige Feld-Validierung (z.B. "Gültig ab" vor dem aktuellen Stand) -
   markiert nur das betroffene Feld, statt das ganze Formular per Redirect zu
   schließen (Robert: "Nicht schließen. Weil dann muss ich ja wieder von vorne
   anfangen."). */
.feld-ungueltig { border-color: var(--danger) !important; }
.feld-fehler { display: block; color: var(--danger); font-size: 0.85rem; margin-top: 0.3rem; }

.ein-austritt-spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2rem;
  align-items: start;
}
@media (max-width: 700px) {
  .ein-austritt-spalten { grid-template-columns: 1fr; }
}
.ein-austritt-gruppe { margin-bottom: 1.25rem; }
.ein-austritt-gruppe:last-of-type { margin-bottom: 0.75rem; }
.dokument-slot {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  margin-top: 0.5rem;
}
.dokument-slot:last-child { border-bottom: none; }
.dokument-slot-label { font-weight: 600; }
.dokument-slot-kopf { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-height: 2.25rem; }
/* Label links, Status-Chip und Knopf rechtsbündig - so stehen "Dokument
   öffnen"/"kein Dokument hinterlegt" und "Zuordnen"/"Ändern" in allen Slots
   in derselben Spalte. */
.dokument-slot-kopf .dokument-slot-label { min-width: 160px; flex: 1; }
.dokument-slot-aktionen { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }

/* "Dokument öffnen" (Link/Button) und "kein Dokument hinterlegt" (Platzhalter)
   sollen exakt gleich groß/umrandet aussehen, damit der Slot nicht je nach
   Zustand "springt" (Robert: "soll genauso in einem Rahmen sein"). Der
   Platzhalter bekommt einen gestrichelten statt durchgezogenen Rahmen, damit
   er trotzdem klar als "nicht klickbar" erkennbar bleibt. */
/* Gleiche Höhe wie die Knöpfe daneben (Zuordnen/Ändern), sonst stehen die
   Slots je nach Zustand versetzt (Robert: Ivys Wiedereintritt). */
.dokument-chip { line-height: 1.125rem; }
.dokument-chip-leer {
  display: inline-block;
  padding: 0.45rem 0.95rem;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.125rem;
}

/* Datei-Auswahl-Buttons sind technisch <label>-Elemente (siehe datei_knopf-
   Makro) und würden sonst die globale label{font-weight:600}-Regel erben und
   fett wirken wie kein anderer Button. */
label.button { font-weight: 400; }

/* "Datei wählen" als schlichter Button statt des nativen, uneinheitlichen
   Datei-Inputs: der eigentliche <input type="file"> trägt das hidden-Attribut,
   ein damit über for/id verknüpftes <label> löst den Datei-Dialog trotzdem aus
   (funktioniert bei hidden-Inputs in allen gängigen Browsern). */
.dokument-datei-name { font-style: italic; }
.dokument-datei-name:empty { display: none; }

/* Native <select>-Felder, die optisch wie ein sekundärer Button wirken sollen
   (z. B. "vorhandenes Dokument wählen") statt wie ein volles Formularfeld. */
select.select-button {
  width: auto;
  min-width: 0;
  /* Rechts mehr Platz, damit der Pfeil nicht am Rand klebt (Robert). */
  padding: 0.45rem 2.25rem 0.45rem 0.95rem;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
  /* Ohne explizite line-height weicht die native Zeilenhöhe eines <select>
     leicht von einem <button>/<label> mit identischem Padding ab (browser-
     abhängige interne Kästchenmaße) - dadurch wirkten Dropdown und Buttons
     in einer Reihe nie exakt gleich hoch/ausgerichtet. */
  line-height: 1.25rem;
}
select.select-button:hover { background: var(--bg); }

/* Alle Aktions-Elemente in einer .dokument-slot-aktionen-Zeile (Buttons,
   Datei-wählen-Label, Dropdowns) auf derselben Grundlinie/Höhe ausrichten. */
.dokument-slot-aktionen > * { vertical-align: middle; }
.dokument-slot-aktionen .button,
.dokument-slot-aktionen button { line-height: 1.25rem; }

/* Aufklapp-Panel für "+ Zuordnen"/"Ändern" (vorhandenes Dokument wählen ODER
   neues hochladen) - "display:flex" gilt nur, wenn das Panel NICHT das
   hidden-Attribut trägt, sonst würde es die native [hidden]{display:none}-
   Regel des Browsers überstimmen (beide sind Klassen-/Attribut-Selektoren
   mit derselben Spezifität - die Autoren-Regel gewinnt sonst immer, egal in
   welcher Reihenfolge). */
.dokument-zuordnen-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
/* Eine Zeile: [Vorhandenes Dokument wählen …]  oder  [Neu hochladen] */
.dokument-wahl { display: flex; align-items: center; gap: 0.6rem 0.75rem; flex-wrap: wrap; }
/* Mindestbreite, damit lange Dateinamen lesbar bleiben - in schmalen Spalten
   (Ein-/Austritt) rutschen "oder" + "Neu hochladen" dann in die nächste Zeile. */
.dokument-wahl select { flex: 1 1 16rem; min-width: 0; margin: 0; }
.dokument-wahl .dokument-hochladen-knopf { margin: 0; white-space: nowrap; line-height: 1.25rem; background: var(--card-bg); }
.dokument-wahl .dokument-hochladen-knopf:hover { background: var(--bg); }
.dokument-neu-gruppe { display: flex; align-items: center; gap: 0.75rem; }
.dokument-oder { color: var(--muted); font-size: 0.85rem; }
/* Erst sichtbar, wenn eine neue Datei gewählt ist: Dateiname, ggf.
   "Bereits unterschrieben" und "verwerfen". */
.dokument-upload-info:not([hidden]) { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dokument-upload-info .dokument-datei-name { font-weight: 600; font-style: normal; overflow-wrap: anywhere; }
.dokument-upload-info .dokument-datei-name::before { content: "Neue Datei: "; font-weight: 400; color: var(--muted); }
.dokument-upload-info .checkbox-label { margin: 0; color: var(--text); font-size: 0.9rem; }
/* Dritte Möglichkeit: aus der Vorlage des Mandanten erzeugen. */
.dokument-erzeugen { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; }
.dokument-erzeugen button { margin: 0; background: var(--card-bg); }
.dokument-erzeugen-titel { font-size: 0.9rem; }
/* "Aus der Vorlage erzeugen" bei neuen Einträgen - als deutlich sichtbare
   Option statt kleiner Checkbox (Robert: "muss etwas markanter sein"). */
.vorlage-option {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem;
  padding: 0.55rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card-bg);
}
.vorlage-option[hidden] { display: none; }
.vorlage-option:hover { border-color: var(--muted); }
.vorlage-option:has(input[type="checkbox"]:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); background: #f1f2f3; }
.vorlage-option-haken { display: inline-flex; align-items: center; gap: 0.7rem; margin: 0; color: var(--text); font-size: 0.9rem; font-weight: 400; cursor: pointer; }
.vorlage-option-haken input { width: 1.15rem; height: 1.15rem; margin: 0; flex: none; accent-color: var(--primary); }
.vorlage-option-haken > span { display: grid; gap: 0.1rem; }
.vorlage-option-haken strong { font-weight: 600; }
.vorlage-option-haken small { color: var(--muted); font-size: 0.8rem; }
/* PDF | Word als kleine Umschaltfläche */
.vorlage-formatwahl { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.vorlage-formatwahl label { position: relative; margin: 0; cursor: pointer; }
.vorlage-formatwahl input { position: absolute; opacity: 0; pointer-events: none; }
.vorlage-formatwahl span { display: block; padding: 0.25rem 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); background: var(--card-bg); }
.vorlage-formatwahl label + label span { border-left: 1px solid var(--border); }
.vorlage-formatwahl input:checked + span { background: var(--primary); color: #fff; }
.vorlage-formatwahl input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: -2px; }
/* Je Dokument eine Zeile ohne Umbruch ("Kündigungsschreiben fehlt"). */
.dv-dok-zeile .badge { white-space: nowrap; }
button.link-knopf {
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}
button.link-knopf:hover { background: none; color: var(--text); }

@media screen and (max-width: 880px) {
  .dokument-wahl { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .dokument-wahl select { flex: none; }
  .dokument-neu-gruppe { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  .dokument-oder { text-align: center; }
  .dokument-wahl .dokument-hochladen-knopf { text-align: center; }
}

.checkbox-reihe { display: flex; gap: 1.75rem; flex-wrap: wrap; margin-top: 1rem; }
.checkbox-reihe .checkbox-label { margin: 0; }

/* Eine Geschäftsfeld/Anteil-%-Zeile (siehe geschaeftsfeld_zeilen() in
   mitarbeiter_detail.html) - Auswahl nimmt den meisten Platz, Anteil-Feld
   bleibt schmal, "Entfernen" nur bei Zeile 2+ vorhanden. */
.geschaeftsfeld-zeilen-liste { display: flex; flex-direction: column; }
.geschaeftsfeld-zeile { display: flex; gap: 1rem; align-items: flex-end; }
.geschaeftsfeld-zeile > label { flex: 1; min-width: 0; }
.geschaeftsfeld-zeile > label.geschaeftsfeld-anteil-feld { flex: 0 0 110px; }
.geschaeftsfeld-zeile > button { flex: 0 0 auto; margin-bottom: 0.25rem; }

/* Genug Abstand zwischen den Speichern/Abbrechen-Buttons eines aufgeklappten
   Formulars und dem darauffolgenden "+ Neuen Stand erfassen"-Button, damit
   beides nicht optisch ineinanderläuft. */
.formular-collapsible { margin-bottom: 1.5rem; }
.stand-trigger-knopf { margin-top: 1.5rem; }
.stand-trigger-leiste { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
/* Gemeinsame Zeitachse Gehalt/Stunden + Pausierungen (Robert: "1 gemeinsame
   chronologische Tabelle", "Es darf keine Lücken geben"). */
/* Dienstverhältnis als eine Tabelle, je Typ eingefärbt (Robert: "je nach
   Typus eben einfärbt (ähnlich wie die Pausierung)") - Farbe als Streifen
   links + leichter Hintergrund, dieselben Farben in Typ-Badge und Filter. */
.dv-tabelle .dv-zeile > td:first-child { box-shadow: inset 3px 0 0 var(--dv-streifen, transparent); white-space: nowrap; }
.dv-tabelle tr.dv-einaus { --dv-streifen: #22a55d; }
.dv-tabelle tr.dv-einaus > td { background: #f5fbf7; }
.dv-tabelle tr.dv-gehalt { --dv-streifen: #8a8d92; }
.dv-tabelle tr.dv-gf { --dv-streifen: #e8823c; }
.dv-tabelle tr.dv-gf > td { background: #fffaf5; }
.dv-tabelle tr.dv-pause { --dv-streifen: #1a56a8; }
.dv-tabelle tr.dv-pause > td { background: #f3f7fd; }
.dv-tabelle tr.zeile-luecke { --dv-streifen: #d64545; }
.dv-tabelle tr.zeile-luecke > td { background: #fdecec; color: #b3261e; font-weight: 600; white-space: normal; }
.dv-tabelle tr.dv-ausgefiltert { display: none; }
.dv-typ {
  display: inline-block; padding: 0.05rem 0.55rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.dv-typ-einaus { background: #e6f4ea; color: #1e7b3c; }
.dv-typ-gehalt { background: #eceef0; color: #33363a; }
.dv-typ-gf { background: #fdf0e4; color: #a5541a; }
.dv-typ-pause { background: #e5eefb; color: #1a56a8; }
.dv-typ-luecke { background: #f9d6d6; color: #b3261e; }
.dv-geaendert { background: var(--changed-bg); border-radius: 3px; padding: 0 0.2rem; }
.dv-tabelle tr.dv-gehalt > td:nth-child(4) > span:not(.dv-notiz) { white-space: nowrap; }
.dv-notiz { display: block; font-size: 0.8rem; color: var(--muted); }
.dv-hinweise { margin: 0 0 0.75rem; padding-left: 1.1rem; display: grid; gap: 0.15rem; font-size: 0.9rem; }
@media screen and (max-width: 880px) { .dv-tabelle tr.dv-zeile { cursor: pointer; } }
.dv-pfeil { display: inline-block; width: 0.9rem; color: var(--muted); }
.dv-pfeil::before { content: "▸"; display: inline-block; transition: transform 0.15s ease; }
.dv-tabelle tr.offen .dv-pfeil::before { transform: rotate(90deg); }
/* Dokumente-Tab: Gruppen je Dokumenttyp, eingeklappt nur der Kopf sichtbar. */
tbody.dok-gruppe:not(.offen) > tr:not(.dok-gruppe-kopf) { display: none; }
tr.dok-gruppe-kopf { cursor: pointer; }
tr.dok-gruppe-kopf > td { background: var(--bg); }
tr.dok-gruppe-kopf:hover > td { background: #f1efec; }
tr.dok-gruppe-kopf:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
tbody.dok-gruppe.offen .dv-pfeil::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .dv-pfeil::before { transition: none; } }
.dv-tabelle tr.dv-details > td { background: var(--bg); padding: 0.75rem 1rem 1rem; white-space: normal; }
.dv-details-inhalt { display: grid; gap: 0.6rem; }
.dv-details-inhalt p { margin: 0; }
.dv-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.5rem 1.25rem; margin: 0; }
.dv-dl > div { min-width: 0; }
.dv-dl dt { font-size: 0.75rem; font-weight: 600; color: var(--muted); }
.dv-dl dd { margin: 0.1rem 0 0; overflow-wrap: anywhere; }
.dv-dl-breit { grid-column: 1 / -1; }
.dv-details-titel { font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dv-dok-liste { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; }
.dv-dok-liste a { overflow-wrap: anywhere; }
.dv-dok-typ { font-weight: 600; margin-right: 0.4rem; }
.dv-details-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Details-Fenster abgeschlossener Einträge: nur lesen, Werte grau hinterlegt. */
.pm-modal-box .dv-details-inhalt { gap: 0.85rem; }
.dv-details-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.dv-details-ueberschrift { margin: 0; }
/* "Anmeldung, Dienstvertrag fehlt" darf umbrechen - dann eckig statt Pille. */
.dv-tabelle td .badge.warn { border-radius: 6px; }
/* Je Dokument eine eigene Zeile, auch die fehlenden. */
.dv-dok-zeile { display: block; white-space: nowrap; }
.dv-dok-zeile + .dv-dok-zeile { margin-top: 0.25rem; }
/* DV-Historie: jede Zeile als abgerundetes Kärtchen in der Farbe ihres Typs,
   mit etwas Luft dazwischen (Robert: "jeder Zeile einen so runden Rahmen in
   der entsprechenden Farbe [...] Das schließt die Zeilen sauberer ein").
   Eintritt + erster Gehalt/Stunden- und Geschäftsfeld-Stand bilden EIN
   gemeinsames Kärtchen, innen nur gestrichelt getrennt, die Folgezeilen
   eingerückt. Technik: die Luft ist ein transparenter Rand (Hintergrund nur
   bis zur Innenkante), der farbige Rahmen sind innere Schatten - so folgen
   beide den runden Ecken; runde Ecken an Zellen gehen nur mit
   border-collapse: separate. */
.dv-historie { border-collapse: separate; border-spacing: 0; border: none; background: transparent; border-radius: 0; }
.dv-historie thead th { background: transparent; }
/* Alles in der Zeile vertikal mittig (die DV-Änderungen-Tabelle bleibt oben ausgerichtet). */
.dv-tabelle.dv-historie td, .dv-tabelle.dv-historie th { vertical-align: middle; }
.dv-historie tr.dv-einaus { --dv-fuellung: #f5fbf7; --dv-rahmen: #a9d6b7; }
.dv-historie tr.dv-gehalt { --dv-fuellung: #fbfbfc; --dv-rahmen: #d3d6da; }
.dv-historie tr.dv-gf { --dv-fuellung: #fffaf5; --dv-rahmen: #f1cfac; }
.dv-historie tr.dv-pause { --dv-fuellung: #f3f7fd; --dv-rahmen: #b8cced; }
.dv-historie tr.dv-austritt { --dv-streifen: #c97a7a; --dv-fuellung: #fdf7f7; --dv-rahmen: #e6bcbc; }
.dv-historie tr.zeile-luecke { --dv-fuellung: #fdecec; --dv-rahmen: #eba5a5; }
.dv-historie tr.dv-gruppe { --dv-streifen: #22a55d; --dv-fuellung: #f3faf5; --dv-rahmen: #a9d6b7; }
.dv-historie tr.dv-zeile > td {
  background: var(--dv-fuellung) padding-box;
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  box-shadow: inset 0 2px 0 var(--dv-rahmen), inset 0 -2px 0 var(--dv-rahmen);
}
.dv-historie tr.dv-zeile > td:first-child {
  border-top-left-radius: 12px; border-bottom-left-radius: 12px;
  box-shadow: inset 4px 0 0 var(--dv-streifen, var(--dv-rahmen)), inset 0 2px 0 var(--dv-rahmen), inset 0 -2px 0 var(--dv-rahmen);
}
.dv-historie tr.dv-zeile > td:last-child {
  border-top-right-radius: 12px; border-bottom-right-radius: 12px;
  box-shadow: inset -2px 0 0 var(--dv-rahmen), inset 0 2px 0 var(--dv-rahmen), inset 0 -2px 0 var(--dv-rahmen);
}
/* Gruppe: oben nur die erste, unten nur die letzte Zeile mit Rahmen und Luft. */
.dv-historie tr.dv-gruppe-start > td, .dv-historie tr.dv-gruppe-mitte > td { border-bottom: 1px dashed #cfe5d6; }
.dv-historie tr.dv-gruppe-mitte > td, .dv-historie tr.dv-gruppe-ende > td { border-top: 0; }
.dv-historie tr.dv-gruppe-start > td { box-shadow: inset 0 2px 0 var(--dv-rahmen); }
.dv-historie tr.dv-gruppe-mitte > td { box-shadow: none; }
.dv-historie tr.dv-gruppe-ende > td { box-shadow: inset 0 -2px 0 var(--dv-rahmen); }
.dv-historie tr.dv-gruppe-start > td:first-child { box-shadow: inset 4px 0 0 var(--dv-streifen), inset 0 2px 0 var(--dv-rahmen); border-bottom-left-radius: 0; }
.dv-historie tr.dv-gruppe-mitte > td:first-child { box-shadow: inset 4px 0 0 var(--dv-streifen); border-radius: 0; }
.dv-historie tr.dv-gruppe-ende > td:first-child { box-shadow: inset 4px 0 0 var(--dv-streifen), inset 0 -2px 0 var(--dv-rahmen); border-top-left-radius: 0; }
.dv-historie tr.dv-gruppe-start > td:last-child { box-shadow: inset -2px 0 0 var(--dv-rahmen), inset 0 2px 0 var(--dv-rahmen); border-bottom-right-radius: 0; }
.dv-historie tr.dv-gruppe-mitte > td:last-child { box-shadow: inset -2px 0 0 var(--dv-rahmen); border-radius: 0; }
.dv-historie tr.dv-gruppe-ende > td:last-child { box-shadow: inset -2px 0 0 var(--dv-rahmen), inset 0 -2px 0 var(--dv-rahmen); border-top-right-radius: 0; }
.dv-historie tr.dv-gruppe-mitte > td:first-child, .dv-historie tr.dv-gruppe-ende > td:first-child { padding-left: 1.6rem; }
.dv-historie tr.dv-gruppe-mitte > td:first-child::before, .dv-historie tr.dv-gruppe-ende > td:first-child::before { content: "└"; color: #8fc4a1; margin-right: 0.35rem; margin-left: -0.9rem; }
/* Austritt dezent rötlich - kräftiges Rot bleibt den Lücken vorbehalten. */
.dv-tabelle tr.dv-austritt { --dv-streifen: #c97a7a; }
.dv-typ-austritt { background: #f7e4e4; color: #9b2c2c; }
.dv-nur-lesen .dv-dl { background: #f1f2f3; border-radius: 8px; padding: 0.75rem 1rem; }
.dv-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.25rem 0 0.75rem; }
.dv-filter-titel { font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-right: 0.2rem; }
button.dv-filter-chip {
  padding: 0.25rem 0.8rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  border: 1px solid transparent;
}
button.dv-filter-chip.dv-typ-einaus, button.dv-filter-chip.dv-typ-einaus:hover { background: #e6f4ea; color: #1e7b3c; }
button.dv-filter-chip.dv-typ-gehalt, button.dv-filter-chip.dv-typ-gehalt:hover { background: #eceef0; color: #33363a; }
button.dv-filter-chip.dv-typ-gf, button.dv-filter-chip.dv-typ-gf:hover { background: #fdf0e4; color: #a5541a; }
button.dv-filter-chip.dv-typ-pause, button.dv-filter-chip.dv-typ-pause:hover { background: #e5eefb; color: #1a56a8; }
button.dv-filter-chip:hover { border-color: currentColor; }
button.dv-filter-chip[aria-pressed="false"],
button.dv-filter-chip[aria-pressed="false"]:hover { background: var(--card-bg); color: var(--muted); border-color: var(--border); text-decoration: line-through; }

/* Hervorgehobenes Fenster mit abgedunkeltem Hintergrund (siehe
   pmModalOeffnen/pmModalSchliessen bzw. pmSeiteAlsModalOeffnen in
   base.html) - ursprünglich als Testballon fürs Bearbeiten im Anpassungen-
   Tab ("wäre es für die Usability besser wenn nur der Eintrag den ich
   gerade bearbeite im Vordergrund ist"), mittlerweile auch für ganze
   eigenständige Seiten wie "Neue/r Mitarbeiter/in" oder "Dokument
   hochladen" im Einsatz. Der jeweilige Inhalt wird per JS HIERHER
   verschoben (nicht kopiert) - bei einem Abschnitt einer größeren Seite
   beim Schließen wieder an seinen Ursprungsort zurückgestellt, bei einer
   ganzen eigenständigen Seite navigiert das Schließen stattdessen weg. */
.pm-modal-backdrop {
  position: fixed;
  inset: 0;
  /* Höher als alles andere Fixe/Sticky (mobile-topbar 1100, sidebar 1200,
     aktionen-panel/dropdown-checkbox-panel 1300) - sonst schiebt sich auf
     Mobil die sticky Kopfzeile (.mobile-topbar) VOR das Fenster und
     verdeckt dessen oberen Rand (Robert: "bei der mobilen Darstellung ist
     der obere Rand dieser hervorgehobenen Fenster nicht sichtbar"). */
  z-index: 1400;
  background: rgba(32, 33, 36, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 4vh 1rem;
}
/* Kleine Auswahl-Fenster (Mandant wählen) schmal statt 900px breit. */
.pm-modal-box:has(> #mitarbeiter-anlegen-start-seite) { max-width: 460px; }
.dt-formular { display: grid; gap: 0.75rem; }
.dt-formular > label { margin-top: 0; }
.dt-gruppe { display: grid; grid-template-columns: 6rem 1fr; align-items: center; gap: 0.75rem; }
.dt-gruppe-titel { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.dt-gruppe .checkbox-reihe { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; }
.dt-gruppe .checkbox-label { margin: 0; }
@media screen and (max-width: 880px) { .dt-gruppe { grid-template-columns: 1fr; gap: 0.35rem; } }
.neu-dokumente { display: grid; gap: 0.6rem; }
.neu-dokument-zeile { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; gap: 0.75rem; }
/* "oder aus der Vorlage erzeugen" in eigener Zeile unter "Datei wählen" - die Beschriftung bleibt auf Höhe des Knopfs. */
.neu-dokument-vorlage { flex-basis: 100%; display: flex; align-items: center; gap: 0.75rem; }
.neu-dokument-vorlage .vorlage-option { flex: 1 1 auto; justify-content: space-between; }
.neu-dokument-datei { display: flex; align-items: center; gap: 0.6rem 1rem; min-width: 0; flex-wrap: wrap; }
.neu-dokument-datei .dokument-datei-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neu-dokument-zeile[hidden] { display: none; }
.neu-dokument-typ { font-size: 0.9rem; font-weight: 600; }
.neu-dokument-zeile .checkbox-label { margin: 0; white-space: nowrap; }
@media screen and (max-width: 880px) {
  .neu-dokument-zeile { grid-template-columns: 1fr; gap: 0.35rem; }
}
.pm-modal-box {
  position: relative;
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  max-width: 900px;
  width: 100%;
  padding: 1.5rem;
  padding-top: 3rem;
  margin: auto 0;
}
/* Einziger Schließen-Weg neben "Abbrechen" - Hintergrund-Klick/Escape
   schließen bewusst nicht (siehe pmModalSchliessenOderZurueck in base.html),
   damit Eingaben nicht versehentlich verloren gehen. */
.pm-modal-schliessen-knopf {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  z-index: 1;
}
.pm-modal-schliessen-knopf:hover { background: var(--bg); color: var(--text); }
body.pm-modal-offen { overflow: hidden; }
@media (max-width: 700px) {
  .pm-modal-backdrop { padding: 0; align-items: stretch; }
  .pm-modal-box { border-radius: 0; max-width: none; min-height: 100%; }
}

.filter-leiste { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; padding: 1rem 1.25rem; }
.filter-gruppe { display: flex; flex-direction: column; gap: 0.35rem; }
.filter-gruppe-label { font-size: 0.8rem; color: var(--muted); }
/* Freitext-Feld und Dropdown-Knöpfe auf exakt dieselbe Breite/Höhe bringen,
   damit die drei Filter in einer Ebene stehen statt uneinheitlich zu wirken. */
.filter-gruppe input[type="search"] { margin: 0; width: 220px; }
.stichtag-filter { margin: 0; }
.stichtag-filter label { margin: 0; }
.stichtag-filter input[type="date"] { margin: 0; width: 220px; }
.filter-leiste .dropdown-checkbox-knopf { min-width: 220px; }

.dropdown-checkbox { position: relative; display: inline-block; }
.dropdown-checkbox-knopf {
  min-width: 160px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.dropdown-checkbox-panel {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  z-index: 20;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  padding: 0.6rem 0.75rem;
}
.dropdown-checkbox-panel label.checkbox-label { display: flex; margin: 0.3rem 0; white-space: nowrap; }
.dropdown-trenner { border: none; border-top: 1px solid var(--border); margin: 0.4rem 0; }
/* Zuordnungs-Dropdown (Dokumente-Tab) verhält sich wie ein kleines Fenster:
   abgedunkelter Hintergrund, Klick daneben bewirkt nichts. */
.zuordnung-backdrop { position: fixed; inset: 0; z-index: 1250; background: rgba(32, 33, 36, 0.3); }
.dropdown-checkbox-panel.zuordnung-panel { z-index: 1300; max-height: 70vh; }
/* OK/Abbrechen bleiben beim inneren Scrollen unten sichtbar. */
.zuordnung-panel .form-actions {
  position: sticky; bottom: -0.6rem; margin: 0.6rem -0.75rem -0.6rem; padding: 0.6rem 0.75rem;
  background: var(--card-bg); border-top: 1px solid var(--border);
}

body.login-page {
  background: radial-gradient(circle at 50% -10%, #eceded 0%, var(--bg) 60%);
  min-height: 100vh;
}
body.login-page .content { max-width: none; padding: 0; }

.login-wrap {
  min-height: calc(100vh - 57px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-card {
  width: 100%;
  max-width: 360px;
  padding: 2.5rem 2rem;
  box-shadow: 0 20px 45px rgba(31, 36, 48, 0.08);
  border-radius: 14px;
}

.login-card h1 { margin: 0 0 1.5rem; font-size: 1.3rem; text-align: center; }
.login-card form { width: 100%; }

.alert-error, .fehler {
  background: #fdecec;
  color: #b3261e;
  border: 1px solid #f6c8c5;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.alert-erfolg {
  background: #e9f7ef;
  color: #1e6b3c;
  border: 1px solid #bfe6cd;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-header h1 { margin: 0; font-size: 1.4rem; }

/* Alle Knöpfe gleich hoch und gleich ausgerichtet (Robert: "die Buttons [...]
   tlw. nicht sauber ausgerichtet und unterschiedlich groß"): jeder Knopf hat
   einen 1px-Rahmen (primär in Knopffarbe), dieselbe Schrift/Zeilenhöhe - egal
   ob <button> oder <a class="button">. */
.button, button, input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  box-sizing: border-box;
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  border-radius: 6px;
  padding: 0.45rem 0.95rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
}
.button:visited { color: #fff; }
/* Datei-Knöpfe sind <label class="button"> - ohne den Abstand normaler
   Formular-Beschriftungen, sonst sitzen sie tiefer als die Nachbarknöpfe. */
label.button { margin: 0; font-weight: 500; }

.button:hover, button:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
/* Gesperrte Knöpfe sichtbar ausgegraut, ohne Hover-Effekt. */
button:disabled, button:disabled:hover, button.secondary:disabled:hover { opacity: 0.45; cursor: not-allowed; background: var(--card-bg); border-color: var(--border); color: var(--muted); }

.button.secondary, button.secondary, .button.secondary:visited {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.button.secondary:hover, button.secondary:hover { background: var(--bg); border-color: #cfccc7; color: var(--text); }

.button.danger, button.danger, .button.danger:visited {
  background: var(--card-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
}
.button.danger:hover, button.danger:hover { background: #fdecec; border-color: var(--danger); color: var(--danger); }

.inline-form { display: inline; }
/* "Löschen" in derselben Zeile wie Speichern/Abbrechen, aber links abgesetzt
   (Robert: "Das ist ja alles eine Zeile?") - der Knopf gehört per form= zu
   einem leeren Lösch-Formular neben dem Bearbeiten-Formular. */
.form-actions .aktion-links { margin-right: auto; }
/* ↑/↓ zum Reihen (dienstliche Felder je Mandant). */
button.reihen-knopf { padding: 0.3rem 0.6rem; min-width: 2rem; }

.table-scroll {
  overflow-x: auto;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  margin: 1rem 0;
}

table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

th, td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 0.88rem;
  vertical-align: middle;
}

/* Tabellen, in denen mehrere Zeilen zusammen EINEN "Stand" bilden (z.B.
   Geschäftsfeld-Aufteilung auf mehrere Zeilen) - Trennlinie nur zwischen den
   Ständen, nicht zwischen den Einzelzeilen desselben Standes. */
.tabelle-gruppiert td:not([rowspan]) { border-bottom: none; }
.tabelle-gruppiert tr.gruppen-ende td:not([rowspan]) { border-bottom: 1px solid var(--border); }

/* Alle Tabellen-Überschriften reservieren einheitlich Platz für zwei Zeilen
   und richten den Text oben aus - so steht jede Kopfzeile auf gleicher Höhe,
   egal ob eine einzelne Spaltenüberschrift umbricht oder nicht. */
th {
  background: #fafbfc;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: normal;
  vertical-align: top;
  height: 2.6em;
  line-height: 1.25;
}

td.geaendert { background: var(--changed-bg); }

/* Manuell verschiebbare/verbreiterbare Spalten der Mitarbeiterliste (Robert:
   "die Spaltenbreite manuell verändern [...] und evtl. sogar die
   Reihenfolge") - bewusst auf #mitarbeiter-tabelle beschränkt, nicht
   app-weit auf jede Tabelle (siehe pmSpalten... in mitarbeiter_liste.html). */
#mitarbeiter-tabelle th { position: relative; user-select: none; box-sizing: border-box; }
/* Namen immer in derselben Farbe statt Browser-Blau/-Lila (Robert: "dieses
   hässliche blau bzw. lila von den Links"). */
#mitarbeiter-tabelle td.col-name a,
#mitarbeiter-tabelle td.col-name a:visited { color: var(--text); font-weight: 600; text-decoration: none; }
/* Ganze Zeile führt zur Person (Robert: "nur fett ist fast zu unscheinbar
   [...] dass man drauf klicken kann") - Hover-Hintergrund, Hand-Cursor und
   ein Pfeil hinter dem Namen. Klick-Logik siehe mitarbeiter_liste.html. */
#mitarbeiter-tabelle tbody tr { cursor: pointer; }
#mitarbeiter-tabelle tbody tr:hover > td { background: #f3f2ef; }
#mitarbeiter-tabelle td.col-name a::after {
  content: "›"; display: inline-block; margin-left: 0.45rem;
  color: var(--muted); font-weight: 400; transition: transform 0.15s ease;
}
#mitarbeiter-tabelle tbody tr:hover td.col-name a { text-decoration: underline; text-underline-offset: 3px; }
#mitarbeiter-tabelle tbody tr:hover td.col-name a::after { transform: translateX(3px); color: var(--text); }
@media (prefers-reduced-motion: reduce) { #mitarbeiter-tabelle td.col-name a::after { transition: none; } }
#mitarbeiter-tabelle th.sortierbar { cursor: pointer; }
#mitarbeiter-tabelle th.sortierbar:hover { background: #f1f2f4; }
/* Ziehpunkt zum Verbreitern: dezente Trennlinie am rechten Rand, beim
   Darüberfahren/Ziehen kräftig. Breite Trefferfläche, schmale Linie. */
#mitarbeiter-tabelle .spalte-griff {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
}
#mitarbeiter-tabelle .spalte-griff::after {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 25%;
  right: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--border);
  transition: background 0.12s, top 0.12s, bottom 0.12s;
}
#mitarbeiter-tabelle .spalte-griff:hover::after,
#mitarbeiter-tabelle th.spalte-wird-skaliert .spalte-griff::after { top: 0; bottom: 0; background: var(--primary); }
/* Gezogene Spalte (Kopf + Zellen) bleibt sichtbar an ihrem Platz, nur blass. */
#mitarbeiter-tabelle .spalte-wird-gezogen { opacity: 0.35; }
.spalte-geist {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  padding: 0.65rem 0.9rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spalte-einfuege-linie {
  position: fixed;
  z-index: 999;
  width: 3px;
  border-radius: 2px;
  background: var(--primary);
  pointer-events: none;
}
body.spalte-zieht, body.spalte-zieht * { cursor: grabbing !important; user-select: none; }
body.spalte-skaliert, body.spalte-skaliert * { cursor: col-resize !important; user-select: none; }
/* Feste Spaltenbreiten (siehe pmMitarbeiterTabellenBreiteAktualisieren in
   mitarbeiter_liste.html): jede Breite ist verbindlich, die Tabelle darf
   breiter als ihr Container werden (.table-scroll scrollt dann). Inhalt, der
   nicht passt, bricht um bzw. wird abgeschnitten statt in die Nachbarspalte
   zu ragen; Überschriften bleiben einzeilig. */
#mitarbeiter-tabelle.spalten-fixiert { table-layout: fixed; min-width: 0; }
#mitarbeiter-tabelle.spalten-fixiert td { overflow: hidden; }
#mitarbeiter-tabelle.spalten-fixiert th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.muted { color: var(--muted); font-size: 0.85rem; }

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.badge.ok { background: #e6f4ea; color: #1e7b3c; }
.badge.warn { background: #fdf3e3; color: #8a5a12; }
.badge.status-ausgeschieden { background: #fdecec; color: #b3261e; }
.badge.status-pausiert { background: #e5eefb; color: #1a56a8; }
.badge.status-geplant { background: #efeafb; color: #5b3fa6; }

.dokumente-warnungen { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }

.card > h3, .card > h4 { margin-top: 0; }
.card h4 { font-size: 0.95rem; color: var(--primary); }

label {
  display: block;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
/* Feld unter der Beschriftung immer mit etwas Luft (Robert: Abstand zwischen
   "Mitarbeiter/in" und "bitte wählen" zu klein). */
label > select, label > textarea,
label > input:not([type="checkbox"]):not([type="radio"]):not([type="file"][hidden]) { display: block; margin-top: 0.35rem; }
label > select.select-button { width: 100%; }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="file"],
input[type="search"],
textarea, select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  background: #fff;
  color: var(--text);
}

/* Schreibgeschützte Felder (z. B. "Gültig ab" des ersten Standes = Eintritt)
   sichtbar als nicht editierbar. */
input[readonly] { background: var(--bg); color: var(--muted); cursor: not-allowed; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(51, 54, 58, 0.12);
}

.checkbox-label, label.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
}
.checkbox-label input, label.checkbox-label input { width: auto; }

/* Speichern/Abbrechen rechtsbündig (Robert: "damit es übersichtlicher
   bleibt") statt linksbündig - gilt auch für einzelne Bearbeiten-Buttons auf
   den Fakten-Karten, dort liest sich ein rechtsbündiger Button ebenso gut. */
.form-actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; justify-content: flex-end; }

/* Tabellen-Aktionszelle (Bearbeiten/Löschen) im Anpassungen-Tab: einheitlich
   rechtsbündig über alle 3 Bereiche (Ein-/Austritt, Gehalt, Geschäftsfeld). */
.aktion-zelle { white-space: nowrap; text-align: right; }
/* Knöpfe in der Aktionsspalte mit gleichem Abstand nebeneinander. */
.aktion-zelle > button, .aktion-zelle > .button, .aktion-zelle > .inline-form { margin-left: 0.4rem; }
.aktion-zelle > :first-child { margin-left: 0; }
/* Dieselbe Ausrichtung für alle übrigen Tabellen, deren letzte Spalte nur
   Knöpfe enthält (Stammdaten, Benutzer, Onboarding-Checkliste ...) -
   rechtsbündig, einheitlicher Abstand. */
table td:last-child:has(> button, > .button, > .inline-form) { text-align: right; white-space: nowrap; }
table td:last-child:has(> button, > .button, > .inline-form) > :is(button, .button, .inline-form) { margin-left: 0.4rem; }
table td:last-child:has(> button, > .button, > .inline-form) > :first-child { margin-left: 0; }

/* Notiz-Spalte der Mitarbeiterliste - Freitext kann lang werden, daher pro
   Zeile abgeschnitten statt die Zeilenhöhe zu sprengen; voller Text per
   title-Attribut (Tooltip) weiterhin abrufbar. */
.col-notiz { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Umrandeter Abschnitt innerhalb eines Anpassungs-Formulars - "Infos" (die
   eigentlichen Felder) und "Zugehörige Dokumente" (der/die Dokument-Slots)
   sind jeweils ein eigener, klar abgegrenzter Block statt optisch
   ineinanderzulaufen. */
.formular-abschnitt {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1rem 0.25rem;
  margin-top: 1rem;
}
.formular-abschnitt:first-child { margin-top: 0; }
.formular-abschnitt-titel {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.9rem;
}

/* "Auf einen Blick": Status als senkrechtes Band am linken Kartenrand, in
   den Farben des jeweiligen Status-Badges. */
.card.blick-karte { position: relative; overflow: hidden; padding-left: 3.5rem; }
.blick-status-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
}
.blick-status-band span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.blick-status-band.ok { background: #e6f4ea; color: #1e7b3c; }
.blick-status-band.warn { background: #fdf3e3; color: #8a5a12; }
.blick-status-band.status-ausgeschieden { background: #fdecec; color: #b3261e; }
.blick-status-band.status-pausiert { background: #e5eefb; color: #1a56a8; }
.blick-status-band.status-geplant { background: #efeafb; color: #5b3fa6; }

/* Dokumente-Kasten | Notiz nebeneinander (Robert: "Feld mit den fehlenden
   Dokumenten nur halbe Breite [...] daneben ein Notizfeld") - als ein Raster,
   damit Überschriften, Kästen und Knopf je auf einer Linie liegen und beide
   Kästen gleich hoch sind. Mobil untereinander. */
.blick-obere-reihe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "dok-titel notiz-titel"
    "dok-box      notiz-feld"
    "dok-aktionen notiz-aktionen";
  gap: 0.35rem 1rem;
  margin-bottom: 1.25rem;
}
.blick-feld-titel { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.blick-dok-titel { grid-area: dok-titel; }
.blick-notiz-titel { grid-area: notiz-titel; }
.blick-dok-box { grid-area: dok-box; margin: 0; min-height: 5.5rem; }
.blick-dok-box ul { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; }
.blick-dok-box ul:last-child { margin-bottom: 0; }
.blick-aktivierung-liste { margin: 0.2rem 0 0.5rem; }
.blick-aktivierung-liste:last-child { margin-bottom: 0; }
.blick-dok-aktionen { grid-area: dok-aktionen; margin-top: 0.4rem; }
.blick-notiz-feld { grid-area: notiz-feld; min-height: 5.5rem; resize: vertical; }
.blick-notiz-aktionen { grid-area: notiz-aktionen; margin-top: 0.4rem; }
.alert-ok {
  background: #e6f4ea;
  color: #1e7b3c;
  border: 1px solid #bfe3c9;
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
}
@media screen and (max-width: 880px) {
  .card.blick-karte { padding-left: 2.6rem; }
  .blick-gruppe dl.ansicht { grid-template-columns: 7rem minmax(0, 1fr); }
  .blick-status-band { width: 1.6rem; }
  .blick-obere-reihe {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "dok-titel" "dok-box" "dok-aktionen" "notiz-titel" "notiz-feld" "notiz-aktionen";
  }
  .blick-notiz-titel { margin-top: 0.75rem; }
}

/* "Auf einen Blick": zwei beschriftete Gruppen (Anstellung | Gehalt &
   Arbeitszeit) mit Label/Wert-Zeilen, auf schmalen Bildschirmen untereinander. */
.blick-gruppen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.blick-gruppe-titel {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Label und Wert in derselben Schriftgröße und an der Grundlinie
   ausgerichtet - sonst verschieben sich die Zeilen gegeneinander. */
.blick-gruppe dl.ansicht { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.55rem 1rem; align-items: baseline; }
.blick-gruppe dl.ansicht dt,
.blick-gruppe dl.ansicht dd { font-size: 0.9rem; line-height: 1.4; }
.blick-gruppe dl.ansicht dd { font-variant-numeric: tabular-nums; }

/* Private/Dienstliche Stammdaten (Fakten-Tab) sollen gleich hoch sein, wenn
   sie zu zweit nebeneinander stehen - .cards-row selbst bleibt bei
   align-items:start (wird an anderer Stelle ggf. mit mehr als 2 Karten
   unterschiedlicher Höhe genutzt), diese Variante streckt gezielt. */
.cards-row-stretch { align-items: stretch; }
.cards-row-stretch .card { display: flex; flex-direction: column; }
/* Der Ansicht-Zustand (read-only, vor "Bearbeiten") wächst mit, damit der
   Bearbeiten-Button immer ganz unten sitzt - egal wie kurz/lang die dl daneben
   ist (Robert: "egal wie voll die Box ist, immer am selben Ort"). */
.cards-row-stretch .card > [id^="ansicht-"] {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.cards-row-stretch .card > [id^="ansicht-"] .form-actions { margin-top: auto; }

/* ── Ansicht/Bearbeiten-Umschalter (read-only bis "Bearbeiten" geklickt) ── */
.ansicht-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.ansicht-kopf h3, .ansicht-kopf h4 { margin: 0; }

dl.ansicht {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.4rem 1.5rem;
  margin: 0;
  min-width: 0;
}
dl.ansicht dt { color: var(--muted); font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
/* overflow-wrap statt reinem word-break: bricht nur, wenn eine Zeile sonst
   den Kartenrand sprengen würde (lange IBANs/E-Mails), lässt normalen Text
   aber an Wortgrenzen umbrechen. min-width:0 ist nötig, weil Grid-Zellen
   sonst nie unter die Breite ihres längsten unzerbrechlichen Inhalts
   schrumpfen - genau das Overflow-Problem auf schmalen Displays. */
dl.ansicht dd { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; min-width: 0; }

/* Einheitlich ausgerichtete "Neu anlegen"-Mini-Formulare (Geschäftsfeld,
   Dokumenttyp, Mandant, Benutzer, ...): Label+Feld nehmen den verfügbaren
   Platz gleichmäßig ein, der Anlegen-Button sitzt immer an derselben Stelle. */
.neu-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.neu-form > label {
  flex: 1 1 220px;
  margin-top: 0;
}
.neu-form > .checkbox-label {
  flex: 0 0 auto;
  margin-top: 0;
}
.neu-form > button { flex: 0 0 auto; }

.row-form-container { padding: 0.75rem; background: var(--bg); border-radius: 8px; }

/* ── Mitarbeiter-Detail: Kopfzeile + Tabs ─────────────────────────────── */
.person-header {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.person-header h1 { margin: 0; }
.badge.gross { font-size: 0.95rem; padding: 0.3rem 0.9rem; }

.tab-nav {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.tab-link {
  padding: 0.6rem 1.1rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.tab-link:hover { color: var(--text); }
.tab-link.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ── Druckansicht ─────────────────────────────────────────────────────────
   Universelles Ausblenden von Bedienelementen (Filter, Aktionen, Sidebar),
   die auf einem Ausdruck keinen Sinn ergeben - .no-print auf dem jeweiligen
   Element setzen. A4 quer, weil z.B. die Mitarbeiterliste je nach gewählten
   Spalten recht breit werden kann. */
@media print {
  .no-print, .sidebar, .sidebar-user { display: none !important; }
  body.app-shell { display: block; }
  .content { max-width: none; margin: 0; padding: 0; }
  .table-scroll { overflow: visible; }
  table { font-size: 9pt; }
  a { color: inherit; text-decoration: none; }
  @page { size: A4 portrait; margin: 12mm; }
}

/* ── Mobile Layout-Anpassungen ────────────────────────────────────────────
   Bewusst GANZ AM ENDE der Datei (nicht direkt bei den Basis-Regeln, die sie
   überschreiben sollen) - bei gleicher Selektor-Spezifität gewinnt in CSS die
   spätere Regel, unabhängig von einer @media-Bedingung. Weiter oben führte das
   dazu, dass z.B. die spätere Basis-Regel ".tab-nav { display:flex }" die
   frühere Mobil-Regel ".tab-nav { display:none }" wieder überstimmt hat. */
.aktionen-menu-knopf { display: none; font-size: 1.2rem; line-height: 1; padding: 0.45rem 0.75rem; }
.tab-nav-mobil { display: none; }

/* "screen and" ist hier Pflicht, nicht nur Stil: eine gedruckte A4-Seite
   (siehe @media print oben, 12mm Rand) rendert mit ca. 700px Inhaltsbreite -
   das liegt UNTER der 880px-Grenze. Ohne "screen and" würden beim Drucken
   also z.B. Tabellenspalten per .mobil-versteckt verschwinden (Robert: "Die
   Druckversion der Mitarbeiterliste klappt nicht mehr [...] Scheint was mit
   der Einführung der mobilen Stylesheets zu tun zu haben" - genau das war
   die Ursache). */
@media screen and (max-width: 880px) {
  body.app-shell { display: block; }
  .mobile-topbar { display: flex; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.25);
  }
  .sidebar.offen { transform: translateX(0); }
  .sidebar-backdrop.offen { display: block; }
  .content { padding: 1.25rem 1rem; max-width: none; }
  .page-header h1 { font-size: 1.2rem; }
  .card { padding: 1.1rem; }

  /* Aktions-Zeilen mit mehreren Buttons (Papierkorb, Spalten anpassen, ...)
     nehmen auf einem Handy-Bildschirm zu viel Platz weg und brechen
     unschön um - werden hinter einem "⋮"-Knopf als Menü versteckt (Robert:
     "Die buttons mit Papierkorb und so müssen auch in ein Menü"). */
  .aktionen-menu-knopf { display: inline-flex; }
  .aktionen-panel { display: none !important; }
  .aktionen-panel.offen {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    position: fixed;
    top: 4.5rem;
    right: 1rem;
    left: 1rem;
    z-index: 1300;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    max-height: 75vh;
    overflow-y: auto;
  }
  .aktionen-panel.offen form { width: 100%; }

  /* Tabs (Fakten/Anpassungen/...) als <select> statt einer Leiste, die sonst
     umbricht oder gescrollt werden müsste (Robert: "wären die Tabs auch
     besser in einem Menü aufgehoben"). */
  .tab-nav { display: none; }
  .tab-nav-mobil { display: block; margin-bottom: 1.25rem; }

  /* Tabellen: nur die wichtigste(n) Spalte(n) zeigen, Rest per Tippen auf
     die Zeile (siehe .zeile-tippbar unten) - "Hauptsache nicht scrollen". */
  /* Die Desktop-Mindestbreite (siehe table{min-width:640px}) sorgt sonst
     dafür, dass eine Tabelle trotz ausgeblendeter Spalten breit bleibt und
     die verbliebenen 1-2 Spalten unnötig auseinanderzieht statt sich auf
     die tatsächlich sichtbaren Inhalte zu verschmälern. */
  table { min-width: 0; }
  .mobil-versteckt { display: none; }
  .dv-tabelle th, .dv-tabelle td { padding-left: 0.4rem; padding-right: 0.4rem; }
  .dv-pfeil { width: 0.75rem; }
  .dv-typ { font-size: 0.7rem; padding: 0.05rem 0.45rem; }
  #mitarbeiter-tabelle th:not(:first-child),
  #mitarbeiter-tabelle td:not(:first-child) { display: none; }
  /* Name als tippbare "Karte" statt schmaler blauer Link (Robert: "eher wie
     ein Button dargestellt [...] nicht so knapp linksbündig"). */
  #mitarbeiter-tabelle thead { display: none; }
  #mitarbeiter-tabelle td:first-child { padding: 0.4rem 1rem; }
  #mitarbeiter-tabelle td:first-child a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
  }
  #mitarbeiter-tabelle td:first-child a::after { content: "›"; color: var(--muted); font-weight: 400; margin-left: 0; transform: none; }
  #mitarbeiter-tabelle tbody tr:hover td.col-name a { text-decoration: none; }
  #mitarbeiter-tabelle td:first-child a:active { background: var(--border); }
  /* Aktion-Spalte (Bearbeiten/Löschen-Buttons) der Anpassungen/Dokumente-
     Tabellen weicht der antippbaren Zeile (siehe .zeile-tippbar). */
  .aktion-zelle { display: none; }

  /* Dropdown-Panels (Mailen-Auswahl, Filter, Zuordnungen, ...) sind sonst
     relativ zu ihrem auslösenden Knopf positioniert - auf schmalen Screens
     kann das je nach Knopf-Position aus dem sichtbaren Bereich hinauslaufen
     (Robert: "kommt das dropdown irgendwo"). Auf Mobil stattdessen immer als
     Panel am unteren Bildschirmrand andocken, unabhängig vom Auslöser. */
  .dropdown-checkbox-panel {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: auto;
    bottom: 1rem;
    width: auto;
    min-width: 0;
    max-height: 70vh;
    z-index: 1300;
  }

  /* Tabellenzeilen mit mehreren nebeneinander gesetzten Aktions-Buttons
     (style="white-space:nowrap") sonst erzwingen horizontales Scrollen auf
     einem schmalen Bildschirm (z.B. Mandanten-Übersicht) - stattdessen
     umbrechen lassen. */
  td[style*="white-space:nowrap"] { white-space: normal !important; }
  td[style*="white-space:nowrap"] > * { margin: 0.15rem 0.3rem 0.15rem 0; }
}

@media screen and (max-width: 480px) {
  .content { padding: 1rem 0.75rem; }
}

/* Ganze Zeile antippbar statt nur ein kleiner "Bearbeiten"-Knopf (nützlich
   auf Mobil, schadet aber auch am Desktop nicht) - siehe pmZeileTippen() in
   base.html, das Klicks auf Buttons/Links/Formulare innerhalb der Zeile
   davon ausnimmt. */
.zeile-tippbar { cursor: pointer; }

/* Reporting: Personalkosten-Sätze je Jahr */
#personalkosten-saetze .ansicht-kopf { flex-wrap: wrap; gap: 0.75rem; }
.personalkosten-neues-jahr { display: flex; gap: 0.5rem; align-items: center; }
.personalkosten-neues-jahr button { white-space: nowrap; }
.personalkosten-neues-jahr input { width: 6.5rem; }
.personalkosten-felder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0 1rem;
}
/* Eingabefelder einer Reihe bündig, auch wenn eine Beschriftung umbricht. */
.personalkosten-felder label:not(.checkbox-label) { margin-top: 0.6rem; display: flex; flex-direction: column; justify-content: flex-end; }
.personalkosten-dag { align-self: end; margin-bottom: 0.5rem; }
.personalkosten-tabelle { min-width: 0; overflow: visible; }
.personalkosten-tabelle th[scope="row"] {
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}
.personalkosten-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.personalkosten-tabelle th, .personalkosten-tabelle td { padding: 0.45rem 0.9rem; }
.personalkosten-tabelle .aktuelles-jahr { background: #f4f5f7; }
.personalkosten-tabelle thead th.aktuelles-jahr { background: #eceef1; color: var(--text); }
.personalkosten-tabelle td.geaendert { background: var(--changed-bg); }
.personalkosten-tabelle tr.personalkosten-probe-start > * { border-top: 2px solid var(--border); }
.geaendert-legende { background: var(--changed-bg); padding: 0 0.3rem; border-radius: 3px; }
/* Mobil: Beschriftungsspalte bleibt beim seitlichen Scrollen stehen und
   darf umbrechen, damit mehr Platz für die Jahresspalten bleibt. */
@media screen and (max-width: 880px) {
  .personalkosten-tabelle th[scope="row"],
  .personalkosten-tabelle thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card-bg);
    white-space: normal;
    min-width: 7.5rem;
    max-width: 9rem;
    box-shadow: 1px 0 0 var(--border);
  }
  .personalkosten-tabelle thead th:first-child { background: #fafbfc; }
  .personalkosten-tabelle th, .personalkosten-tabelle td { padding: 0.45rem 0.6rem; }
}

/* Mitarbeiterliste: Stand zum Stichtag und Anzahl - auf dem Handy nicht
   nötig (Robert), dort ausgeblendet. */
.mitarbeiter-anzahl { margin: 0; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tabellen-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 0.5rem; }
@media screen and (max-width: 880px) {
  .stichtag-leiste, .mitarbeiter-anzahl, .tabellen-kopf { display: none !important; }
}
/* Mitarbeiterliste: Stand zum Stichtag */
.stichtag-leiste { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 1rem; }
.stichtag-leiste label { margin: 0; }
.stichtag-leiste input[type="date"] { width: auto; }
.stichtag-hinweis {
  background: #e5eefb;
  color: #1a56a8;
  border: 1px solid #c7d8f3;
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
}
.stichtag-hinweis-text { display: flex; flex-direction: column; gap: 0.15rem; }
.stichtag-hinweis-titel { font-size: 1rem; }
.stichtag-hinweis .button { white-space: nowrap; }

/* Reporting: Mandanten-Filter + Berechnen in einer Leiste, Summenzeilen */
.reporting-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin: 1rem 0 0; }
.reporting-filter { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.reporting-filter label { margin: 0; }
.reporting-filter select { width: auto; }
.reporting-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reporting-tabelle tr.summenzeile td { font-weight: 700; background: #f4f5f7; border-bottom: 2px solid var(--border); }
.klapp-kopf { cursor: pointer; margin-bottom: 0; }
.klapp-hinweis { font-size: 0.9rem; }
.saetze-werkzeuge { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 1rem 0 0.25rem; }
.nav-zaehler { display: inline-block; min-width: 1.3rem; padding: 0 0.35rem; margin-left: 0.35rem; border-radius: 999px; background: var(--orange); color: #fff; font-size: 0.72rem; font-weight: 700; text-align: center; line-height: 1.3rem; }
.lohnzettel-vorschau tr.zeile-unerkannt td { background: #fff8e6; }
.lohnzettel-vorschau select { min-width: 14rem; }
/* Mein Bereich: Lohnzettel nach Jahr gruppiert (ab dem zweiten Jahr). */
.lz-jahr { border-top: 1px solid var(--border); }
.lz-jahr:first-of-type { border-top: none; }
.lz-jahr > summary { cursor: pointer; padding: 0.6rem 0; display: flex; align-items: baseline; gap: 0.6rem; list-style: none; }
.lz-jahr > summary::-webkit-details-marker { display: none; }
.lz-jahr > summary::before { content: "▸"; color: var(--muted); transition: transform 0.15s; display: inline-block; }
.lz-jahr[open] > summary::before { transform: rotate(90deg); }
.lz-jahr-titel { font-weight: 600; }
.lz-jahr > .table-scroll { margin-bottom: 0.75rem; }
/* Lohnset-Import: schon importierter Monat / Monat passt. */
.alert-warnung { background: #fff8e6; color: #7a5410; border: 1px solid #f0d58a; border-radius: 8px; padding: 0.6rem 0.9rem; font-size: 0.85rem; margin-bottom: 1rem; }
.lz-monat-ok { color: #1e6b3c; font-size: 0.85rem; margin: 0 0 0.75rem; }
.lz-mail-ersetzt { margin-top: 0.35rem; }
.lz-fehlend { margin-top: 1rem; padding: 0.75rem 0.9rem; border: 1px solid #f0d58a; border-radius: 8px; background: #fff8e6; font-size: 0.9rem; }
.lz-fehlend ul { margin: 0.4rem 0 0; padding-left: 1.1rem; columns: 2; }
.lz-fehlend li[hidden] { display: none; }
.lz-alle-da { margin-top: 1rem; color: #1e7b3c; }
.lohnzettel-fertig-liste { font-size: 0.9rem; line-height: 1.8; margin: 0.5rem 0 1rem; }
.eingereicht-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* Eingereicht: einheitliche Entscheidungs-Zeile Übernehmen | Grund | Ablehnen. */
#benutzer-tabelle tr.rolle-ausgeblendet { display: none; }
/* Sprung aus dem Mitarbeiter-Fakten-Tab ("Unter Benutzer verwalten") markiert die Zeile. */
#benutzer-tabelle tr:target > td { background: #fdf3e7; }
#benutzer-tabelle tr:target { scroll-margin-top: 5rem; }

/* Dokumente (Verwaltung): Filterzeile, Auswahl und Sammel-Löschen. */
.dokumente-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem 1rem; align-items: end; }
.dokumente-filter-knoepfe { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 0.1rem; white-space: nowrap; }
.dokumente-auswahl-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.dokumente-auswahl-aktion { display: flex; align-items: center; gap: 0.75rem; }
.dokumente-tabelle th.auswahl-spalte, .dokumente-tabelle td.auswahl-spalte { width: 2rem; padding-right: 0; }
.dokumente-tabelle td.auswahl-spalte input { width: 1rem; height: 1rem; margin: 0; cursor: pointer; }
.dokumente-tabelle tr.ausgewaehlt > td { background: #fdf3e7; }
.dokumente-tabelle th .sortier-link { color: inherit; text-decoration: none; display: inline-block; }
.dokumente-tabelle th .sortier-link:hover { color: var(--text); }
.dokumente-tabelle th.sortiert .sortier-link { color: var(--text); }
.rolle { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.rolle-administrator { background: #eceef0; color: #33363a; }
.rolle-manager { background: #e6f4ea; color: #1e7b3c; }
.rolle-mitarbeiter { background: #e5eefb; color: #1a56a8; }
tr.zeile-system > td { color: var(--muted); background: var(--bg); }
table.antrag-tabelle { table-layout: fixed; width: 100%; }
.antrag-tabelle th:nth-child(1) { width: 17%; }
.antrag-tabelle th:nth-child(2), .antrag-tabelle th:nth-child(3) { width: 19%; }
/* Rechtsbündig, feste Breiten -> in allen Zeilen (Stammdaten wie Dokumente) genau untereinander. */
.entscheidung { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 0.5rem 1rem; }
td.entscheidung-spalte, th.entscheidung-spalte { text-align: right; vertical-align: middle; }
.entscheidung-teil > button { min-width: 7.2rem; }
.entscheidung-teil { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.entscheidung-teil select { width: auto; min-width: 11rem; margin: 0; }
.entscheidung-teil input[type="text"] { width: 9rem; margin: 0; }
.antrag-bemerkung { margin: 0 0 0.4rem; }
.antrag-block { margin-bottom: 1.25rem; }
.antrag-block + .antrag-block { padding-top: 1rem; border-top: 1px solid var(--border); }
.antrag-block .ansicht-kopf { margin-bottom: 0.4rem; }
table.antrag-tabelle { min-width: 0; margin: 0.25rem 0; }
.antrag-tabelle td, .antrag-tabelle th { padding: 0.4rem 0.6rem; }
.mb-aenderung { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 0.25rem 0 1rem; }
td.mb-aktionen { white-space: nowrap; text-align: right; }
td.mb-aktionen > * + * { margin-left: 0.4rem; }
.eingereicht-form select { width: auto; min-width: 12rem; }
.zugang-status { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; }
.hochrechnung-card { margin-top: 1rem; }
.vorlage-leiste { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1rem; }
.vorlage-leiste .neu-form { margin: 0; display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.vorlage-leiste .neu-form label { margin: 0; }
.vorlage-leiste .neu-form input, .vorlage-leiste .neu-form select { width: 14rem; max-width: 100%; }
.vorlage-hinweis { margin: 0.5rem 0 0; font-size: 0.85rem; }
.hochrechnung-jahre { display: flex; gap: 0.5rem; }
.hochrechnung-steuerung { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; justify-content: flex-end; }
.wert-umschalter { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.wert-umschalter button { background: var(--card-bg); color: var(--muted); border: none; border-radius: 0; padding: 0.4rem 0.8rem; font-size: 0.85rem; font-weight: 600; }
.wert-umschalter button + button { border-left: 1px solid var(--border); }
.wert-umschalter button:hover { background: #f6f5f3; color: var(--text); }
.wert-umschalter button[aria-pressed="true"] { background: var(--primary); color: #fff; }
.hochrechnung-card .w-stunden, .hochrechnung-card .w-vzae { display: none; }
.hochrechnung-card[data-ansicht="stunden"] .w-kosten, .hochrechnung-card[data-ansicht="vzae"] .w-kosten { display: none; }
.hochrechnung-card[data-ansicht="stunden"] .w-stunden, .hochrechnung-card[data-ansicht="vzae"] .w-vzae { display: inline; }
/* Echte Kosten aus Lohnzetteln - nur in der Kosten-Ansicht (Stunden kommen immer aus dem Vertrag). */
.hochrechnung-card[data-ansicht="kosten"] .hochrechnung-tabelle td.ist { background: #e6f4ea; }
.hochrechnung-card[data-ansicht="kosten"] .hochrechnung-tabelle td.ist-teil { background: #f2f9f4; }
.hochrechnung-card:not([data-ansicht="kosten"]) .w-kosten-hinweis { display: none; }
.ist-legende, .ist-teil-legende { padding: 0 0.3rem; border-radius: 3px; color: var(--text); }
.ist-legende { background: #e6f4ea; }
.ist-teil-legende { background: #f2f9f4; }
/* clip statt hidden: kein eigener Scroll-Container, sonst greift "sticky" nicht */
.hochrechnung-tabelle { overflow: clip; }
.hochrechnung-tabelle td { font-size: 0.8rem; }
.hochrechnung-tabelle th, .hochrechnung-tabelle td { padding-left: 0.22rem; padding-right: 0.22rem; }
.hochrechnung-tabelle tr > :first-child { padding-left: 0.75rem; padding-right: 0.6rem; }
.hochrechnung-tabelle tr > :last-child { padding-right: 0.75rem; }
/* Geschäftsfeld bleibt beim seitlichen Scrollen (schmale Fenster) stehen */
.hochrechnung-tabelle tr > :first-child { white-space: nowrap; position: sticky; left: 0; background: var(--card-bg); z-index: 1; box-shadow: inset -1px 0 0 var(--border); }
.hochrechnung-tabelle { border-left: none; }
.hochrechnung-tabelle tr.summenzeile > :first-child { background: #f4f5f7; }
.hochrechnung-tabelle thead tr > :first-child { background: #fafbfc; }
.hochrechnung-tabelle .prognose { font-style: italic; color: var(--muted); }
.hochrechnung-tabelle tr.summenzeile td.prognose { color: var(--text); }
.hochrechnung-tabelle tr.hochrechnung-mandant th { height: auto; background: var(--card-bg); text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding-top: 1rem; border-bottom: 1px solid var(--border); }
.hochrechnung-tabelle tbody:first-of-type tr.hochrechnung-mandant th { padding-top: 0.4rem; }
.prognose-legende { font-style: italic; }
.hochrechnung-tabelle tr.hochrechnung-gf { cursor: pointer; }
.hochrechnung-tabelle tr.hochrechnung-gf:hover > td { background: #f6f5f3; }
.hochrechnung-tabelle tr.hochrechnung-gf.offen .dv-pfeil::before { transform: rotate(90deg); }
.hochrechnung-tabelle tr.hochrechnung-gf:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.hochrechnung-tabelle tr.hochrechnung-person > td { font-size: 0.76rem; color: var(--muted); background: #fbfaf8; padding-top: 0.35rem; padding-bottom: 0.35rem; }
.hochrechnung-tabelle tr.hochrechnung-person > td:first-child { padding-left: 1.9rem; background: #fbfaf8; }
.hochrechnung-tabelle tr.hochrechnung-person a { color: var(--text); }
.hochrechnung-anteil { font-size: 0.68rem; color: #a3a4a8; margin-left: 0.15rem; }
.hochrechnung-hinweise { margin: 0.25rem 0 0.75rem; padding-left: 1.1rem; font-size: 0.85rem; }
.hochrechnung-hinweise li { margin: 0.1rem 0; }
}

/* Onboarding-Tab: je Punkt ✓ (grün, eingerichtet) / ✗ (rot, braucht es nicht) */
.tab-zaehler { font-size: 0.75rem; color: var(--muted); font-weight: 400; margin-left: 0.2rem; }
.onboarding-punkte { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.4rem 1.5rem; }
.onboarding-punkt {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid transparent;
}
.onboarding-punkt.onboarding-erledigt { background: #e6f4ea; border-color: #bfe3c9; }
.onboarding-punkt.onboarding-nicht_benoetigt { background: #fdecec; border-color: #f6c8c5; }
.onboarding-punkt.onboarding-benoetigt { background: #fdf6e0; border-color: #f0dc9a; }
.onboarding-punkt.onboarding-nicht_benoetigt .onboarding-text { color: #b3261e; }
.onboarding-knoepfe { display: flex; gap: 0.3rem; flex: none; }
.onboarding-knoepfe input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ob-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.ob-knopf:hover { border-color: var(--muted); }
.onboarding-knoepfe input:focus-visible + .ob-knopf { box-shadow: 0 0 0 3px rgba(51, 54, 58, 0.18); }
.onboarding-knoepfe input:checked + .ob-ja { background: var(--green); border-color: var(--green); color: #fff; }
.onboarding-knoepfe input:checked + .ob-nein { background: var(--danger); border-color: var(--danger); color: #fff; }
.onboarding-knoepfe input:checked + .ob-benoetigt { background: #e0a800; border-color: #e0a800; color: #fff; }
.onboarding-text { padding-top: 0.2rem; font-size: 0.9rem; }
.onboarding-vermerk { display: block; font-size: 0.75rem; color: var(--muted); }
.ob-zahl-ja { color: #1e7b3c; font-weight: 600; }
.ob-zahl-nein { color: #b3261e; font-weight: 600; }
.ob-zahl-benoetigt { color: #9a7400; font-weight: 600; }
/* Punkte mit Standort-Liste (ChurchTools, SALTO) über die ganze Breite. */
.onboarding-punkt-liste { grid-column: 1 / -1; flex-wrap: wrap; }
.onboarding-punkt-liste .onboarding-text { flex: 1 1 0; min-width: 0; }
.onboarding-standorte { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.3rem; padding-left: calc(3 * 1.7rem + 2 * 0.3rem + 0.6rem); }
button.ob-standort, .ob-standort {
  display: inline-flex; line-height: 1.5; min-height: 0; align-items: center; margin: 0; padding: 0.1rem 0.55rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--card-bg);
  color: var(--muted); font-size: 0.8rem; font-weight: 600; cursor: pointer; user-select: none;
}
button.ob-standort:hover { border-color: var(--muted); background: var(--card-bg); color: var(--muted); }
.ob-standort-legende { font-size: 0.75rem; align-self: center; margin-left: 0.3rem; }
.ob-standort:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(51, 54, 58, 0.18); }
button.ob-standort[data-status="benoetigt"], button.ob-standort[data-status="benoetigt"]:hover { background: #e0a800; border-color: #e0a800; color: #fff; }
button.ob-standort[data-status="erledigt"], button.ob-standort[data-status="erledigt"]:hover { background: var(--green); border-color: var(--green); color: #fff; }
.onboarding-planner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem 1.25rem; margin: 0.25rem 0 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.onboarding-planner-grund { color: #9a7400; }
.onboarding-planner-text { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; min-width: 0; flex: 1 1 20rem; }
.onboarding-punkt.onboarding-nicht_benoetigt .onboarding-standorte { display: none; }
/* Verwaltung > Onboarding-Checkliste */
.onboarding-verwaltung tr.zeile-inaktiv > td { color: var(--muted); }
.ob-standort-anzeige {
  display: inline-block; margin: 0.1rem 0.25rem 0.1rem 0; padding: 0 0.5rem;
  border: 1px solid var(--border); border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: var(--text);
}
.ob-standort-anzeige.inaktiv { color: var(--muted); text-decoration: line-through; }
.onboarding-reihenfolge-feld { flex: 0 0 7rem !important; }
.onboarding-bearbeiten { display: grid; gap: 1rem; }
.onboarding-unter-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.onboarding-unter-zeile.inaktiv input { color: var(--muted); text-decoration: line-through; }
.onboarding-unter-form { display: inline-flex; gap: 0.5rem; align-items: center; }
.onboarding-unter-form input { margin-top: 0; width: 14rem; max-width: 100%; }
@media screen and (max-width: 880px) {
  .onboarding-unter-zeile { display: grid; grid-template-columns: minmax(4rem, 1fr) auto auto; gap: 0.3rem; }
  .onboarding-unter-zeile .onboarding-unter-form { display: contents; }
  .onboarding-unter-form input { width: auto; min-width: 0; }
  .onboarding-unter-zeile button { padding: 0.4rem 0.45rem; font-size: 0.82rem; }
  .onboarding-unter-zeile .badge { display: none; }
  form.onboarding-unter-zeile { grid-template-columns: minmax(4rem, 1fr) auto; }
}
@media screen and (max-width: 880px) {
  .onboarding-standorte { padding-left: 0; }
}
.sonderzahlung-form { display: flex; align-items: flex-end; gap: 0.75rem 1rem; flex-wrap: wrap; }
.sonderzahlung-form select { width: auto; min-width: 14rem; }
/* Rechnung hochladen: drei gleich breite, gleich hohe Felder, Knopf auf derselben Linie. */
.rechnung-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 0.75rem 1rem; margin-bottom: 1.25rem; }
.rechnung-form label { margin-top: 0; }
.rechnung-form select, .rechnung-form input, .rechnung-form button { height: 2.5rem; box-sizing: border-box; }
.rechnung-form input[type="file"] { padding: 0.3rem 0.5rem; font-size: 0.85rem; color: var(--muted); }
.rechnung-form input[type="file"]::file-selector-button {
  margin-right: 0.6rem; padding: 0.25rem 0.7rem; border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.rechnung-form input[type="file"]::file-selector-button:hover { border-color: var(--primary); }
.rechnung-form button { white-space: nowrap; }
@media screen and (max-width: 880px) {
  .rechnung-form { grid-template-columns: 1fr; }
  .rechnung-form button { justify-self: end; }
}
.datengrundlage-card { margin-top: 1rem; }
.datengrundlage-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; font-size: 0.85rem; }
.datengrundlage-legende .dg + .dg, .datengrundlage-legende .dg { margin-left: 0.4rem; }
.datengrundlage-legende .dg:first-child { margin-left: 0; }
.datengrundlage-tabelle th.zahl, .datengrundlage-tabelle td.zahl { text-align: center; }
.dg { display: inline-block; min-width: 1.9rem; padding: 0.05rem 0.3rem; border-radius: 4px; font-size: 0.72rem; font-weight: 600; text-align: center; line-height: 1.4; }
.dg-lz, .dg-re { background: #e6f4ea; color: #1e7b3c; }
.dg-fehlt { background: #fdf0e6; color: #b85f1f; }
.dg-vertrag { background: #eceef0; color: var(--muted); }
.dg-hochrechnung { color: #a3a4a8; font-style: italic; font-weight: 400; }


/* Protokoll (Anmeldungen, E-Mails, Aufgaben, Anträge) neben der Änderungshistorie. */
.nowrap { white-space: nowrap; }
.badge.fehler { background: #fdecec; color: #b3261e; }
.tab-fehler {
  display: inline-block;
  min-width: 1.2rem;
  padding: 0 0.35rem;
  margin-left: 0.25rem;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.2rem;
  text-align: center;
}
.protokoll-filter { padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; }
.protokoll-filter form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.5rem; }
.protokoll-filter form > label:not(.checkbox-label) { margin: 0; min-width: 260px; }
.protokoll-filter .checkbox-label { margin: 0; padding-bottom: 0.55rem; }
.protokoll-fehlertext { margin-top: 0.3rem; font-size: 0.82rem; color: var(--danger); max-width: 28rem; white-space: pre-line; }
@media screen and (max-width: 880px) {
  .protokoll-filter form > label:not(.checkbox-label) { min-width: 0; width: 100%; }
}

/* DV-Änderungen je Monat (Reporting) - zum Gegenprüfen mit dem Lohnset. */
.nur-druck { display: none; }
.dv-monat { display: flex; flex-direction: column; gap: 0.3rem; }
.dv-monat-label { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.dv-monat-wahl { display: flex; gap: 0.4rem; align-items: center; }
.dv-monat-wahl select { width: auto; min-width: 11rem; }
.dv-monat-wahl .button { min-width: 2.4rem; }
.dv-zusammenfassung { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin: 0 0 0.9rem; }
.dv-chip {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  background: #eeedeb;
  color: var(--text);
}
.dv-art-eintritt { background: #e6f4ea; color: #1e7b3c; }
.dv-art-austritt { background: #fdecec; color: #b3261e; }
.dv-art-pausierung { background: #e5eefb; color: #1a56a8; }
.dv-art-gehalt-stunden { background: #fdf3e3; color: #8a5a12; }
/* Lohnzettel-Abgleich: Bereiche */
.la-lohnzettel { background: #fdecec; color: #b3261e; }
.la-stammdaten { background: #e5eefb; color: #1a56a8; }
.la-anstellung { background: #e6f4ea; color: #1e7b3c; }
.la-entgelt { background: #fdf3e3; color: #8a5a12; }
.la-tabelle td.la-wert { overflow-wrap: anywhere; min-width: 10rem; }
.la-tabelle .la-hinweis { font-size: 0.8rem; margin-top: 0.15rem; }
.la-tabelle td.la-aktionen { width: 1%; }
.la-tabelle td.la-aktionen form { display: block; margin: 0 0 0.25rem; }
.la-tabelle td.la-aktionen button { white-space: nowrap; }
.la-tabelle td.la-aktionen button { padding: 0.25rem 0.6rem; font-size: 0.82rem; }
.la-tabelle tr.la-ignoriert td { color: var(--muted); }
.la-tabelle tr.la-ignoriert td.la-wert { text-decoration: line-through; text-decoration-color: rgba(107, 109, 114, 0.5); }
.dv-tabelle td { vertical-align: top; }
.dv-tabelle th:last-child, .dv-tabelle td.dv-hinweis { min-width: 10rem; }
.dv-tabelle td.dv-hinweis { font-size: 0.82rem; }
.dv-tabelle tbody.dv-person { border-top: 2px solid var(--border); }
.dv-name { min-width: 11rem; }
.dv-name > a, .dv-name > span { display: block; margin-bottom: 0.2rem; }
.dv-name .badge { display: inline-block; }
/* Werte nie umbrechen - je Wert eine Zeile, die Tabelle scrollt notfalls. */
.dv-tabelle td.dv-alt, .dv-tabelle td.dv-neu { white-space: nowrap; }
.dv-alt { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(107, 109, 114, 0.5); }
.dv-neu { font-weight: 600; }
.dv-fremd td { color: var(--muted); }
@media print {
  .nur-druck { display: inline; }
  .dv-tabelle tbody.dv-person { break-inside: avoid; }
  .dv-chip { border: 1px solid #ccc; }
}
@media screen and (max-width: 880px) {
  .dv-name { min-width: 10rem; }
}
.dv-vorschau-titel { margin: 1.75rem 0 0.75rem; font-size: 1.1rem; }
.dv-vorschau-titel .muted { font-size: 0.9rem; font-weight: 400; }

/* Neue Version eines Dokuments (z. B. unterschriebener Scan) */
/* "Unterschrift fehlt" + Hochladen als ein Element: links der Status (wie
   .badge.warn), rechts der Knopf - gemeinsame Pille, in einer Zeile. */
.dok-unterschrift { display: inline-flex; align-items: stretch; margin: 0; vertical-align: middle; border-radius: 999px; border: 1px solid #ecd9b4; overflow: hidden; white-space: nowrap; font-size: 0.78rem; font-weight: 600; line-height: 1.2; }
.dok-unterschrift-status { background: #fdf3e3; color: #8a5a12; padding: 0.2rem 0.6rem; }
.dok-unterschrift-knopf { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; padding: 0.2rem 0.65rem; background: var(--card-bg); color: var(--primary); border-left: 1px solid #ecd9b4; cursor: pointer; font-size: inherit; font-weight: 600; }
.dok-unterschrift-knopf svg { width: 0.85rem; height: 0.85rem; flex: none; }
.dok-unterschrift-knopf:hover, .dok-unterschrift-knopf:focus-visible { background: var(--primary); color: #fff; outline: none; }
.dok-neue-version { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.dok-neue-version input[type=file] { width: auto; }

/* Dokumentvorlagen: Mandanten-Stammdaten und Editor */
.vorlagen-tabelle td { vertical-align: middle; }
.vorlagen-tabelle td:first-child { width: 4rem; }
.vorlage-editor { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
.vorlage-text textarea { width: 100%; min-height: 34rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85rem; line-height: 1.5; resize: vertical; }
.vorlage-hilfe h3 { margin-top: 0; }
.vorlage-hilfe h3 + p { margin-top: -0.4rem; }
.vorlage-platzhalter, .vorlage-format { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: 0.35rem; font-size: 0.85rem; }
.vorlage-hilfe code { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0 0.3rem; font-size: 0.8rem; }
.vorlage-platzhalter button.link-dezent { padding: 0; }
@media screen and (max-width: 880px) {
  .vorlage-editor { grid-template-columns: 1fr; }
}
/* Vorlagen-Knöpfe beim Mitarbeiter: "Titel: PDF | Word" */
.vorlage-knoepfe { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin: 0; }
.vorlage-knoepfe .vorlage-name { font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-right: 0.15rem; }
.vorlage-knoepfe button { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.vorlage-fassungen { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; font-size: 0.85rem; max-height: 16rem; overflow-y: auto; }
.vorlage-diff { white-space: pre-wrap; font-size: 0.82rem; line-height: 1.5; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem; max-height: 70vh; overflow: auto; }
.vorlage-diff span { display: block; }
.diff-weg { background: #fdecec; color: #b3261e; }
.diff-neu { background: #e6f4ea; color: #1e7b3c; }

/* Auf dem Handy nicht gebraucht (Reporting, Lohnset-Import, Vorlagen) */
@media screen and (max-width: 880px) {
  .nur-desktop { display: none !important; }
}

/* Benutzerverwaltung: kompakte Liste, schmales Bearbeiten-Formular */
#benutzer-tabelle td { vertical-align: middle; }
.benutzer-name { white-space: nowrap; }
.benutzer-name-zeile { display: inline-flex; align-items: center; gap: 0.35rem; }
.benutzer-email { display: block; font-size: 0.8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22rem; }
.benutzer-mandanten { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18rem; font-size: 0.9rem; }
.mein-bereich-symbol { display: inline-flex; color: var(--muted); }
.mein-bereich-symbol svg { width: 1rem; height: 1rem; }
.mein-bereich-symbol:hover { color: var(--primary); }
.benutzer-bearbeiten { max-width: 44rem; padding: 0.25rem 0; }
@media screen and (max-width: 880px) { .benutzer-zeile { cursor: pointer; } }
.pm-modal-box .benutzer-bearbeiten { max-width: none; background: none; padding: 0; border-radius: 0; }
.benutzer-bearbeiten .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.benutzer-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.4rem; }
@media screen and (max-width: 880px) {
  .benutzer-bearbeiten .form-grid { grid-template-columns: 1fr; }
}
.benutzer-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.benutzer-kopf h3 { margin: 0; }
.benutzer-kopf-aktionen form { margin: 0; }
.benutzer-kopf-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; margin-left: auto; }
.benutzer-aktionen select { width: auto; max-width: 100%; min-width: 16rem; }
.benutzer-fuss { border-top: 1px solid var(--border); padding-top: 1rem; margin-top: 1.25rem; }

/* Vorlagen-Seite: Tätigkeitsbeschreibungen je Geschäftsfeld */
details.taetigkeiten { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
details.taetigkeiten summary { cursor: pointer; font-weight: 600; }
.taetigkeiten-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 0 1rem; }
.taetigkeiten-felder textarea { width: 100%; font: inherit; font-size: 0.9rem; }
.taetigkeit-feld { margin-top: 0.75rem; }
.taetigkeit-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-bottom: 0.25rem; }
.taetigkeit-kopf .checkbox-label { margin: 0; font-weight: 400; color: var(--text); }