/* ── Themes (Phase 55) ──────────────────────────────────────────────────────────
   Alle Farben laufen über semantische CSS-Variablen. :root = Standard-Theme
   (der bisherige Look, pixelgleich). body[data-theme="dunkel"|"hell"]
   überschreiben NUR Variablen — keine Regel-Duplikate. */
:root {
  /* Flächen + Text (Inhaltsbereich) */
  --bg: #f5f5f5;                 /* Seitengrund */
  --text: #333;                  /* Fließtext */
  --text-stark: #1a1a2e;         /* Überschriften / Kennzahlen */
  --text-dunkel: #1e293b;        /* Hover-Text Unternavigation */
  --text-mittel: #475569;        /* Labels, Sekundär-Buttons */
  --text-sekundaer: #64748b;     /* Tabellenköpfe, Hinweise */
  --text-gedimmt: #94a3b8;       /* leise Hinweise, Platzhalter */
  --text-menue: #374151;         /* Dropdown-Menü-Einträge */
  --text-deaktiviert: #cbd5e1;   /* deaktivierte Menü-Einträge */
  --karte-bg: #fff;
  --karte-rand: #e2e8f0;
  --rand: #e2e8f0;               /* Standardrahmen (Tabellenkopf, Leisten) */
  --rand-zart: #f1f5f9;          /* zarte Trennlinien (Tabellenzeilen, Modal-Fuß) */
  --rand-stark: #cbd5e1;         /* Kachel-Hover-Rahmen */
  --flaeche: #f8fafc;            /* Zeilen-Hover, deaktivierte Eingaben */
  --flaeche-2: #f1f5f9;          /* Sekundär-Button, Menü-Hover, Balken-Spur */
  --leiste-bg: #fafbfc;          /* Aktionsleiste über Listen */
  --eingabe-bg: #fff;
  --eingabe-rand: #e2e8f0;
  --filter-rand: #d1d5db;        /* Rahmen der Tabellen-Filterzeile (tabellen-steuerung) */
  --auswahl-bg: #eff6ff;         /* ausgewählte Zeile / aktiver Suchfeld-Eintrag */
  --btn-sekundaer-hover: #e2e8f0;
  /* Akzent */
  --akzent: #2563eb;             /* Primär-Buttons, aktive Navigation */
  --akzent-hover: #1d4ed8;
  --akzent-marke: #3B6FF5;       /* Marken-Blau (Logo) */
  --akzent-text: #fff;
  /* Signalfarben */
  --gefahr: #dc2626;
  --gefahr-bg: #fee2e2;
  --gefahr-bg-hover: #fecaca;
  --ok-bg: #d1fae5;
  --ok-text: #065f46;
  --warn-bg: #fef3c7;
  --warn-text: #92400e;
  --info-bg: #dbeafe;
  --info-text: #1e40af;
  /* Modal + Schatten */
  --modal-backdrop: rgba(0, 0, 0, 0.5);
  --schatten: 0 4px 16px rgba(0, 0, 0, .12);
  /* Logo-Wasserzeichen (SVG hat fixes Navy — dunkles Theme hellt per Filter auf) */
  --wasserzeichen-filter: none;
  --wasserzeichen-deckkraft: .12;
  /* Sidebar */
  --sidebar-bg: #1e2a3a;
  --sidebar-rand: #2d3f52;
  --sidebar-text: #9db0c4;       /* Navigationslinks */
  --sidebar-text-hell: #cdd6e0;  /* Grundfarbe der Sidebar */
  --sidebar-titel: #fff;         /* Logo-Schriftzug */
  --sidebar-gedimmt: #6b7c91;    /* Versionszeile */
  --sidebar-hover-bg: #2d3f52;
  --sidebar-hover-text: #fff;
  --sidebar-aktiv-bg: #2563eb;
  --sidebar-aktiv-text: #fff;
  /* Statusleiste */
  --status-bg: #1e2a3a;
  --status-rand: #2d3f52;
  --status-text: #9db0c4;
  --status-text-stark: #cdd6e0;
  --status-knopf-bg: #2d3f52;
  --status-knopf-rand: #46586c;
  --status-knopf-text: #e2e8f0;
  --status-knopf-hover-bg: #2563eb;
  --status-knopf-hover-rand: #3b82f6;
  --status-abmelden-hover-bg: #b91c1c;
  --status-abmelden-hover-rand: #dc2626;
  --status-ok: #34d399;
  --status-fehler: #f87171;
  --status-hinweis: #fbbf24;
}

/* Dunkles Theme: Inhalt in Schiefer-Tönen, Sidebar bleibt Navy (minimal dunkler) */
body[data-theme="dunkel"] {
  color-scheme: dark;            /* native Controls (Scrollbars, Datumswähler) dunkel */
  --bg: #0f172a;
  --text: #e2e8f0;
  --text-stark: #f1f5f9;
  --text-dunkel: #e2e8f0;
  --text-mittel: #cbd5e1;
  --text-sekundaer: #94a3b8;
  --text-gedimmt: #64748b;
  --text-menue: #cbd5e1;
  --text-deaktiviert: #475569;
  --karte-bg: #1e293b;
  --karte-rand: #334155;
  --rand: #334155;
  --rand-zart: #2b384d;
  --rand-stark: #475569;
  --flaeche: #253349;
  --flaeche-2: #334155;
  --leiste-bg: #1a2537;
  --eingabe-bg: #0f172a;
  --eingabe-rand: #334155;
  --filter-rand: #3e4d66;
  --auswahl-bg: #1e3a5f;
  --btn-sekundaer-hover: #3e4d66;
  --akzent: #3B6FF5;
  --akzent-hover: #5b8cff;
  --akzent-marke: #5b8cff;
  --gefahr: #f87171;
  --gefahr-bg: rgba(248, 113, 113, .14);
  --gefahr-bg-hover: rgba(248, 113, 113, .26);
  --ok-bg: rgba(74, 222, 128, .14);
  --ok-text: #4ade80;
  --warn-bg: rgba(251, 191, 36, .14);
  --warn-text: #fbbf24;
  --info-bg: rgba(91, 140, 255, .2);
  --info-text: #93c5fd;
  --modal-backdrop: rgba(0, 0, 0, 0.72);
  --schatten: 0 4px 16px rgba(0, 0, 0, .5);
  /* Navy-Logo invertieren + Farbton zurückdrehen → helles Schieferblau auf dunklem Grund */
  --wasserzeichen-filter: invert(1) hue-rotate(180deg);
  --wasserzeichen-deckkraft: .14;
  --sidebar-bg: #16202e;
  --sidebar-rand: #26334a;
  --status-bg: #16202e;
  --status-rand: #26334a;
}

/* Helles Theme: helle Sidebar mit Navy-Text, sehr heller Inhalt */
body[data-theme="hell"] {
  --bg: #fafafa;
  --karte-bg: #fff;
  --leiste-bg: #fcfcfd;
  --modal-backdrop: rgba(15, 23, 42, 0.4);
  --sidebar-bg: #f8fafc;
  --sidebar-rand: #e2e8f0;
  --sidebar-text: #3a4763;
  --sidebar-text-hell: #202A44;
  --sidebar-titel: #202A44;
  --sidebar-gedimmt: #94a3b8;
  --sidebar-hover-bg: #eff6ff;
  --sidebar-hover-text: #202A44;
  --sidebar-aktiv-bg: #eff6ff;
  --sidebar-aktiv-text: #1d4ed8;
  --status-bg: #f8fafc;
  --status-rand: #e2e8f0;
  --status-text: #475569;
  --status-text-stark: #202A44;
  --status-knopf-bg: #fff;
  --status-knopf-rand: #cbd5e1;
  --status-knopf-text: #334155;
  --status-ok: #059669;
  --status-fehler: #dc2626;
  --status-hinweis: #b45309;
}

/* Klassisches Theme: an alte Windows-Oberflächen (95/2000) angelehnt —
   Silbergrau-Flächen, Navy #000080 als Akzent (Titelleisten-Blau), weiße
   Eingabefelder, kräftige Grau-Ränder statt zarter Trennlinien. */
body[data-theme="klassisch"] {
  --bg: #c8c8c8;
  --text: #000;
  --text-stark: #000;
  --text-dunkel: #000;
  --text-mittel: #1f1f1f;
  --text-sekundaer: #3c3c3c;
  --text-gedimmt: #6b6b6b;
  --text-menue: #000;
  --text-deaktiviert: #808080;
  --karte-bg: #e8e8e8;
  --karte-rand: #8e8e8e;
  --rand: #9a9a9a;
  --rand-zart: #c2c2c2;
  --rand-stark: #808080;
  --flaeche: #dcdcdc;
  --flaeche-2: #d2d2d2;
  --leiste-bg: #d9d9d9;
  --eingabe-bg: #fff;
  --eingabe-rand: #7a7a7a;
  --filter-rand: #8e8e8e;
  --auswahl-bg: #d2ddf0;
  --btn-sekundaer-hover: #c6c6c6;
  --akzent: #000080;
  --akzent-hover: #1a1a9a;
  --akzent-marke: #000080;
  --gefahr: #b00000;
  --gefahr-bg: #f0caca;
  --gefahr-bg-hover: #e6b0b0;
  --ok-bg: #cfe4cf;
  --ok-text: #1d5c1d;
  --warn-bg: #f0e2b4;
  --warn-text: #6e4a00;
  --info-bg: #d2ddf0;
  --info-text: #1a2f7a;
  --modal-backdrop: rgba(0, 0, 0, 0.45);
  --schatten: 2px 2px 6px rgba(0, 0, 0, .35);
  /* Sidebar = Navy wie die klassische Titelleiste; aktiver Eintrag invertiert */
  --sidebar-bg: #000080;
  --sidebar-rand: #3a3a9a;
  --sidebar-text: #c8d0e8;
  --sidebar-text-hell: #e6e9f5;
  --sidebar-titel: #fff;
  --sidebar-gedimmt: #8890c0;
  --sidebar-hover-bg: #1a1a9a;
  --sidebar-hover-text: #fff;
  --sidebar-aktiv-bg: #d4d0c8;
  --sidebar-aktiv-text: #000080;
  /* Statusleiste = silberne Leiste mit dunklem Text (Knopf-Hover hell halten,
     die Knopf-Textfarbe gilt auch im Hover) */
  --status-bg: #d4d0c8;
  --status-rand: #8e8e8e;
  --status-text: #333;
  --status-text-stark: #000;
  --status-knopf-bg: #e4e0d8;
  --status-knopf-rand: #8e8e8e;
  --status-knopf-text: #000;
  --status-knopf-hover-bg: #c6d3ea;
  --status-knopf-hover-rand: #000080;
  --status-abmelden-hover-bg: #e6b0b0;
  --status-abmelden-hover-rand: #b00000;
  --status-ok: #1d7a1d;
  --status-fehler: #b00000;
  --status-hinweis: #7a5a00;
  /* Navy-Logo bleibt ungefiltert — auf Silbergrau gut erkennbar */
  --wasserzeichen-deckkraft: .10;
}

/* Basis-Reset und Schriften */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Haupt-Layout: Sidebar + Inhalt nebeneinander */
#app {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Rechter Bereich: Inhalt oben, Statusleiste unten – steht neben der Sidebar */
#hauptbereich {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Statusfußzeile am unteren Rand */
#statusleiste {
  flex-shrink: 0;
  height: 34px;
  background: var(--status-bg);
  border-top: 1px solid var(--status-rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 12px;
  color: var(--status-text);
  gap: 16px;
}

#statusleiste .status-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

#statusleiste .status-rechts {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

#statusleiste .status-trenner {
  color: var(--status-rand);
}

/* KI-Assistent-Button (Phase 41) + Theme-Umschalter (Phase 55) teilen das
   Statusleisten-Button-Design */
#btn-ki-panel,
#btn-theme,
#btn-mandant-wechseln {
  background: var(--status-knopf-bg);
  border: 1px solid var(--status-knopf-rand);
  border-radius: 4px;
  color: var(--status-knopf-text);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  line-height: 1.3;
  transition: background .15s, border-color .15s, color .15s;
}

#btn-ki-panel:hover,
#btn-theme:hover,
#btn-mandant-wechseln:hover {
  background: var(--status-knopf-hover-bg);       /* Blau-Ton — neutrale Aktion (Wechseln, kein Verlassen) */
  border-color: var(--status-knopf-hover-rand);
  color: #fff;
}

/* Aufklapp-Menü des Theme-Umschalters (öffnet nach OBEN über der Statusleiste) */
#theme-menue {
  position: fixed;
  background: var(--karte-bg);
  border: 1px solid var(--rand);
  border-radius: 6px;
  box-shadow: var(--schatten);
  z-index: 2200;
  min-width: 150px;
  padding: 4px 0;
}
#theme-menue button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-menue);
}
#theme-menue button:hover { background: var(--flaeche-2); }

/* Linke Navigationsleiste */
#sidebar {
  width: 200px;
  min-width: 200px;
  background: var(--sidebar-bg);
  color: var(--sidebar-text-hell);
  display: flex;
  flex-direction: column;
  padding: 0;
}

#logo {
  padding: 20px 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--sidebar-titel);
  border-bottom: 1px solid var(--sidebar-rand);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Logo-Marke (vier Quadrate) – nimmt über currentColor die Textfarbe an,
   funktioniert dadurch auf dunklem (Sidebar) wie hellem Hintergrund (Overlays) */
.logo-mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.logo-text {
  letter-spacing: 0.06em;
}

.logo-erp {
  color: var(--akzent-marke);
  margin-left: 5px;
}

#nav-liste {
  list-style: none;
  padding: 12px 0;
  flex: 1;
}

/* Programmversion: dezent am unteren Sidebar-Rand */
#app-version {
  padding: 9px 16px;
  font-size: 11px;
  color: var(--sidebar-gedimmt);
  border-top: 1px solid var(--sidebar-rand);
  letter-spacing: 0.3px;
}

#nav-liste li {
  margin: 2px 8px;
}

.nav-trenner {
  border-top: 1px solid var(--sidebar-rand);
  margin: 8px 0 !important;
}

.nav-link {
  display: block;
  padding: 9px 12px;
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.nav-link:hover {
  background: var(--sidebar-hover-bg);
  color: var(--sidebar-hover-text);
}

.nav-link.aktiv {
  background: var(--sidebar-aktiv-bg);
  color: var(--sidebar-aktiv-text);
}

/* Rechter Inhaltsbereich */
#inhalt {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 32px;
}

/* Globales Logo-Wasserzeichen — erscheint dezent unten rechts auf JEDER Seite.
   Liegt per z-index:-1 hinter dem Seiteninhalt (SVG mit transparentem
   Hintergrund). Gilt automatisch auch für neue Seiten. */
#inhalt::after {
  content: "";
  position: fixed;
  right: 24px;
  bottom: 56px;
  width: 60%;
  max-width: 820px;
  height: 300px;
  background: url('assets/logo-vadero.svg') no-repeat bottom right;
  background-size: contain;
  filter: var(--wasserzeichen-filter);
  opacity: var(--wasserzeichen-deckkraft);
  pointer-events: none;
  z-index: -1;
}

/* Seitenüberschriften */
.seiten-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.seiten-kopf h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-stark);
}

/* Karten / Boxen */
.karte {
  background: var(--karte-bg);
  border-radius: 8px;
  border: 1px solid var(--karte-rand);
  padding: 24px;
  margin-bottom: 16px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s;
}

/* Kompakte Button-Variante (z.B. Aktionen in Tabellenzeilen beim Bankimport) */
.btn-klein {
  padding: 4px 10px;
  font-size: 12px;
}

.btn-primaer {
  background: var(--akzent);
  color: var(--akzent-text);
}

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

.btn-sekundaer {
  background: var(--flaeche-2);
  color: var(--text-mittel);
  border: 1px solid var(--rand);
}

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

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

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

/* Standard-deaktivierter Button (ausgegraut) */
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* „inaktiv": sieht aus wie deaktiviert, bleibt aber klickbar — ein Klug ohne
   gültige Auswahl löst dann eine Statuszeilen-Meldung aus (Guard in app.js). */
.btn.inaktiv { opacity: .5; cursor: not-allowed; }
.btn-sekundaer.inaktiv:hover { background: var(--flaeche-2); }
.btn-gefahr.inaktiv:hover    { background: var(--gefahr-bg); }
.btn-primaer.inaktiv:hover   { background: var(--akzent); }

/* Tabellen */
.tabelle {
  width: 100%;
  border-collapse: collapse;
}

.tabelle th {
  text-align: left;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-sekundaer);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--rand);
}

.tabelle td {
  padding: 12px;
  border-bottom: 1px solid var(--rand-zart);
  vertical-align: middle;
}

/* „Jetzt liefern"/„Jetzt buchen": Zahlen-Spinner ausblenden. Bei den schmalen,
   rechtsbündigen Mengenfeldern fingen die Spinner-Pfeile den Klick ab, sodass das
   Feld „manchmal nicht eingabebereit" wirkte. Ohne Spinner ist die ganze Breite tippbar. */
.we-menge::-webkit-inner-spin-button,
.we-menge::-webkit-outer-spin-button,
.ls-menge::-webkit-inner-spin-button,
.ls-menge::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.we-menge, .ls-menge { appearance: textfield; -moz-appearance: textfield; }

.tabelle tr:last-child td {
  border-bottom: none;
}

.tabelle tbody tr:hover {
  background: var(--flaeche);
}

/* Status-Badges */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.badge-offen {
  background: var(--warn-bg);
  color: var(--warn-text);
}

.badge-bezahlt {
  background: var(--ok-bg);
  color: var(--ok-text);
}

.badge-teilbezahlt {
  background: var(--info-bg);
  color: var(--info-text);
}

/* Auswertungs-Kacheln (Dashboard mit Drilldown) */
.aw-kachel {
  text-align: left;
  background: var(--karte-bg);
  border: 1px solid var(--karte-rand);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  font: inherit;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

.aw-kachel:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  border-color: var(--rand-stark);
}

.badge-gruen {
  background: var(--ok-bg);
  color: var(--ok-text);
}

.badge-grau {
  background: var(--flaeche-2);
  color: var(--text-sekundaer);
}

/* Formulare */
.formular-gruppe {
  margin-bottom: 16px;
}

.formular-gruppe label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mittel);
  margin-bottom: 6px;
}

.formular-gruppe input,
.formular-gruppe select,
.formular-gruppe textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--eingabe-rand);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
  background: var(--eingabe-bg);
  transition: border-color 0.15s;
}

.formular-gruppe input:focus,
.formular-gruppe select:focus,
.formular-gruppe textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Raster für Formulare nebeneinander */
.formular-raster {
  display: grid;
  gap: 16px;
}

.formular-raster-2 {
  grid-template-columns: 1fr 1fr;
}

.formular-raster-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Modal-Dialog */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  background: var(--karte-bg);
  border-radius: 10px;
  padding: 28px;
  width: 600px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.modal-kopf h2 {
  font-size: 18px;
  font-weight: 600;
}

.modal-schliessen {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--text-gedimmt);
  line-height: 1;
}

.modal-schliessen:hover {
  color: var(--text);
}

.modal-fusszeile {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rand-zart);
}

/* Leer-Zustand */
.leer-zustand {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-gedimmt);
}

.leer-zustand p {
  font-size: 15px;
  margin-bottom: 16px;
}

/* Nützliches */
.rechtsbuendig { text-align: right; }
.hinweis { font-size: 12px; color: var(--text-gedimmt); margin-top: 4px; }

/* Aktionsleiste über Listen-Tabellen */
.aktion-leiste {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rand);
  background: var(--leiste-bg);
}

.aktion-info {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-sekundaer);
  font-weight: 500;
}

/* Vertikale Trennlinie zwischen semantischen Button-Gruppen in der Aktionsleiste */
.aktion-trenner {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: var(--rand);
}

/* Export-Dropdown in der Aktionsleiste */
.export-dd { position: relative; display: inline-block; }
.export-dd-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--karte-bg);
  border: 1px solid var(--rand);
  border-radius: 6px;
  box-shadow: var(--schatten);
  z-index: 50;
  min-width: 160px;
  padding: 4px 0;
}
.export-dd-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-menue);
}
.export-dd-menu button:hover { background: var(--flaeche-2); }

/* Aktions-Menüs in der Aktionsleiste (Phase 36) — gleiches Muster wie Export ▾ */
.aktion-dd { position: relative; display: inline-block; }
.aktion-dd-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--karte-bg);
  border: 1px solid var(--rand);
  border-radius: 6px;
  box-shadow: var(--schatten);
  z-index: 50;
  min-width: 200px;
  padding: 4px 0;
}
.aktion-dd-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-menue);
}
.aktion-dd-menu button:hover:not(:disabled) { background: var(--flaeche-2); }
.aktion-dd-menu button:disabled { color: var(--text-deaktiviert); cursor: default; }
.aktion-dd-menu button.eintrag-gefahr:not(:disabled) { color: var(--gefahr); }

/* Ausgewählte Zeile blau hinterlegen */
.tabelle tbody tr.ausgewaehlt td {
  background: var(--auswahl-bg);
}

/* Tabellenzeilen klickbar machen */
.tabelle tbody tr {
  cursor: pointer;
}

/* Checkbox-Spalte in Listen */
.cb-spalte {
  width: 44px;
  text-align: center !important;
  padding: 8px !important;
}

/* Abmelden-Button in Statusleiste — bewusst auffällig, damit gut auffindbar */
#btn-abmelden {
  background: var(--status-knopf-bg);
  border: 1px solid var(--status-knopf-rand);
  border-radius: 4px;
  color: var(--status-knopf-text);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  line-height: 1.3;
  transition: background .15s, border-color .15s, color .15s;
}
#btn-abmelden:hover {
  background: var(--status-abmelden-hover-bg);       /* Rot-Ton signalisiert das Abmelden/Verlassen */
  border-color: var(--status-abmelden-hover-rand);
  color: #fff;
}

/* Eigenes Passwort ändern — gleicher Stil wie Abmelden, neutraler (blauer) Hover */
#btn-passwort-aendern {
  background: var(--status-knopf-bg);
  border: 1px solid var(--status-knopf-rand);
  border-radius: 4px;
  color: var(--status-knopf-text);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  line-height: 1.3;
  transition: background .15s, border-color .15s, color .15s;
}
#btn-passwort-aendern:hover { background: var(--status-knopf-hover-bg); border-color: var(--status-knopf-hover-rand); color: #fff; }

/* Nur-Lesen-Modus (Phase 48): fehlt dem Benutzer das Schreibrecht des Moduls,
   trägt der Inhaltsbereich .nur-lesen — Anlegen/Bearbeiten/Löschen + Aktions-/
   Menü-Buttons mit Schreibcharakter werden ausgeblendet. Löst das alte
   body[data-rolle="leserecht"] ab (feiner: je Modul statt global). */
.nur-lesen .seiten-kopf .btn-primaer,
.nur-lesen #btn-aktion-bearbeiten,
.nur-lesen #btn-aktion-loeschen,
.nur-lesen .btn-neu,
.nur-lesen [id^="btn-aktion-"].schreib-aktion {
  display: none !important;
}

/* Untermenü-Navigation (linke vertikale Leiste) — einheitlich für Einstellungen + Systemeinstellungen */
.unter-nav {
  width: 190px;
  min-width: 190px;
}

.unter-nav .karte {
  padding: 6px;
}

.unter-nav-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text-sekundaer);
  text-decoration: none;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.unter-nav-link:hover { background: var(--flaeche-2); color: var(--text-dunkel); }
.unter-nav-link.aktiv { background: var(--akzent); color: var(--akzent-text); font-weight: 500; }

/* Nicht klickbare Gruppenüberschrift zwischen Untermenü-Links (Menü-Konsolidierung 2026-07-13) */
.unter-nav-gruppe {
  display: block;
  padding: 10px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-gedimmt);
}
.unter-nav-gruppe:not(:first-child) { border-top: 1px solid var(--rand-zart); margin-top: 4px; }

/* ── Such-Combobox (Phase 34, renderer/suchfeld.ts) ─────────────────────────── */
.suchfeld-wrap { position: relative; display: block; }
.suchfeld-eingabe {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--eingabe-rand);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--eingabe-bg);
  /* kein data:-Icon — die index.html-CSP erlaubt nur 'self' (Lupe stattdessen als ::after) */
}
.suchfeld-wrap::after {
  content: '⌕';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  font-size: 16px;
  color: var(--text-gedimmt);
  pointer-events: none;
}
.suchfeld-eingabe:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.suchfeld-eingabe:disabled { background-color: var(--flaeche); color: var(--text-gedimmt); cursor: not-allowed; }
.suchfeld-liste {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 220px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--karte-bg);
  border: 1px solid var(--rand);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
  z-index: 3000; /* über Modal-Overlays */
}
.suchfeld-eintrag { padding: 7px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suchfeld-eintrag.aktiv { background: var(--auswahl-bg); }
.suchfeld-eintrag.gewaehlt { font-weight: 600; color: var(--akzent-hover); }
.suchfeld-leer { padding: 10px 12px; font-size: 13px; color: var(--text-gedimmt); }