/* Kanzlei-Suite - Plain CSS (kein Build-Schritt), Farbpalette 1:1 aus tailwind.config.ts uebernommen. */

:root {
  --brand-50: #eef4ff;
  --brand-100: #dbe6fe;
  --brand-500: #3159d6;
  --brand-600: #24449e;
  --brand-700: #1c3680;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-900: #0f172a;
  --radius-sm: 8px;
  --radius: 12px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-md: 0 1px 2px rgba(15,23,42,0.05), 0 4px 16px -4px rgba(15,23,42,0.08);
  /* Chevron fuer Dropdowns, damit sie nicht nach Betriebssystem-Standard aussehen. */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 380px at 85% -120px, rgba(49,89,214,0.07) 0%, transparent 62%),
    radial-gradient(900px 420px at -10% 30%, rgba(49,89,214,0.04) 0%, transparent 55%),
    var(--slate-50);
  color: var(--slate-900);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

a { color: inherit; }

.card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.btn,
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled { opacity: .45; cursor: not-allowed; }
.btn:active:not(:disabled), .btn-primary:active:not(:disabled), .btn-secondary:active:not(:disabled) { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
  color: #fff;
  box-shadow: 0 1px 2px rgba(28,54,128,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #2b50c4, var(--brand-600)); }

.btn-secondary {
  background: #fff;
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover:not(:disabled) { background: var(--slate-50); border-color: var(--slate-300); }

.btn-block { display: flex; width: 100%; margin-top: 8px; }
.btn-small { padding: 4px 10px; font-size: 12px; }

.input {
  display: block;
  width: 100%;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  padding: 7px 11px;
  font-size: 13px;
  font-family: inherit;
  background-color: #fff;
  color: var(--slate-900);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:hover:not(:disabled) { border-color: var(--slate-300); }
/* Nicht aenderbare Felder (z.B. die Mitarbeiternummer) sollen auch so aussehen. */
.input:disabled { background: var(--slate-50); color: var(--slate-500); cursor: not-allowed; }
.input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}

/* Dropdowns: native Optik durch eigenen Chevron + weiche Kanten ersetzen. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background-color: #fff;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding: 6px 28px 6px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--slate-900);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
select:hover { border-color: var(--slate-300); }
select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
select:disabled { opacity: .5; cursor: wait; }
select.input { padding-right: 28px; }

/* Status-Dropdowns in den Uebersichts-Tabellen: kompakte, farbige Pill-Optik.
   Hintergrund-/Randfarbe kommen inline aus app.js (Statusfarbe), hier nur Form. */
.ct-status-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 10px;
  padding: 4px 24px 4px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: var(--slate-900);
  cursor: pointer;
  max-width: 100%;
  transition: box-shadow .15s ease, filter .15s ease;
}
.ct-status-select:hover { filter: brightness(0.97); }
.ct-status-select:focus { outline: none; box-shadow: 0 0 0 3px var(--brand-100); }

input[type="checkbox"] {
  accent-color: var(--brand-500);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

table.data-table { border-collapse: separate; border-spacing: 0; width: 100%; }
table.data-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--slate-500);
  padding: 10px 12px;
  border-bottom: 1px solid var(--slate-200);
  background: #f8fafc;
  position: sticky;
  top: 0;
}
table.data-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--slate-100);
  font-size: 13px;
}
table.data-table tbody tr { transition: background-color .1s ease; }
table.data-table tr:hover td { background: var(--brand-50); }

/* Login / Passwort-aendern - zweispaltige, professionellere Anmeldeansicht */
.error { color: #dc2626; font-size: 13px; margin: 8px 0; }
.success { color: #16a34a; font-size: 13px; margin: 8px 0; }
.link-center { display: block; text-align: center; margin-top: 16px; font-size: 13px; color: var(--brand-600); text-decoration: none; }
.link-center:hover { text-decoration: underline; }

/* Anmeldung/Passwort: eine zentrierte Karte auf ruhigem Verlauf. */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 500px at 50% -160px, rgba(49,89,214,0.10) 0%, transparent 60%),
    radial-gradient(700px 420px at 100% 100%, rgba(49,89,214,0.05) 0%, transparent 55%),
    var(--slate-50);
}

.auth-form-side { width: 100%; display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.auth-form-card {
  width: 100%;
  max-width: 392px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 24px 60px -20px rgba(15,23,42,0.18);
  padding: 36px 32px 30px;
}
.auth-brandrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.auth-brandrow img { display: block; flex-shrink: 0; height: auto; }
.auth-form-card h2 { font-size: 21px; font-weight: 650; margin: 0 0 6px; color: var(--slate-900); letter-spacing: -0.015em; }
.auth-form-card .muted { color: var(--slate-500); font-size: 13.5px; margin: 0 0 26px; }
.auth-form-card label { display: block; font-size: 13px; font-weight: 500; color: var(--slate-700); margin-bottom: 16px; }
.auth-form-card label input {
  margin-top: 7px;
  padding: 10px 13px;
  font-size: 14px;
  border-radius: var(--radius-sm);
}
.auth-form-card .btn-block {
  padding: 11px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  margin-top: 6px;
}

/* ───────────────────────────────────────────────────────────────────────────
   App-Geruest: Seitenleiste links, Inhalt rechts.
   ─────────────────────────────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-main > .page, .app-main > .page-narrow { flex: 1; }

.sidebar {
  width: 236px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid rgba(15,23,42,0.08);
}

.brand-logo { display: inline-flex; flex-shrink: 0; }
.brand-logo img { display: block; height: auto; }
.sb-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 14px;
  text-decoration: none; color: inherit;
}

.sb-nav { flex: 1; overflow-y: auto; padding: 4px 10px 10px; }
.sb-group {
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--slate-400);
  padding: 14px 8px 6px;
}
.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-600);
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
  margin-bottom: 1px;
}
.sb-item:hover { background: var(--slate-50); color: var(--slate-900); }
.sb-item.active { background: var(--brand-50); color: var(--brand-600); }
.sb-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
/* Kennziffer offener Nachrichten */
.sb-zahl {
  min-width: 19px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  flex-shrink: 0;
}
.sb-item.active .sb-zahl { background: var(--brand-600); }

/* Ungelesene Nachrichten: Symbol und Schrift rot, damit der Eintrag ins Auge faellt.
   Gilt auch, wenn der Eintrag gerade aktiv ist - erst nach dem Lesen faellt die Zahl
   weg und damit die Einfaerbung. */
.sb-item-rot { color: #dc2626; font-weight: 650; }
.sb-item-rot:hover { color: #b91c1c; background: #fef2f2; }
.sb-item-rot .sb-ico { background: #fef2f2; color: #dc2626; }
.sb-item.active.sb-item-rot { background: #fef2f2; color: #dc2626; }
.sb-item.active.sb-item-rot .sb-ico { background: #dc2626; color: #fff; }
.sb-item.active.sb-item-rot .sb-zahl { background: #dc2626; }

/* Nachrichtenseite */
.nr-abschnitt { font-size: 14px; font-weight: 650; margin: 26px 0 10px; display: flex; align-items: center; gap: 8px; }
.nr-zahl { background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.nr-leer { padding: 22px; text-align: center; color: var(--slate-400); font-size: 13px; }
.nr-karte { padding: 16px 18px; margin-bottom: 12px; }
.nr-kopf { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.nr-titel { margin: 0 0 4px; font-weight: 600; font-size: 14px; }
.nr-zeile { margin: 0; font-size: 13px; color: var(--slate-600); line-height: 1.5; }
.nr-notiz {
  margin: 8px 0 0; font-size: 12.5px; color: var(--slate-600);
  border-left: 3px solid var(--slate-200); padding: 2px 0 2px 10px;
}
.nr-datum { font-size: 11.5px; color: var(--slate-400); white-space: nowrap; }
.nr-aktionen { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.nr-aktionen .nr-antwort { flex: 1; min-width: 200px; }
.nr-fehler { margin: 8px 0 0; font-size: 12.5px; color: #b91c1c; }
.nr-fehler[hidden] { display: none; }
.nr-antworttext { display: block; font-size: 12.5px; color: var(--slate-600); margin-top: 4px; }
.nr-von { display: block; font-size: 11.5px; margin-top: 2px; }

/* Icon-Kacheln: je Bereich eine eigene, ruhige Farbe (wie im BA360-Vorbild). */
.sb-ico {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sb-ico svg { width: 15px; height: 15px; }
.sb-ico-mandanten   { background: #eef4ff; color: #3159d6; }
.sb-ico-team        { background: #ecfdf5; color: #059669; }
.sb-ico-kanzlei     { background: #f5f3ff; color: #7c3aed; }
.sb-ico-controlling { background: #fff7ed; color: #ea580c; }
.sb-ico-tools       { background: #ecfeff; color: #0891b2; }
.sb-ico-clients     { background: #fdf2f8; color: #db2777; }
.sb-ico-users       { background: #fefce8; color: #b45309; }
.sb-ico-offen       { background: #fff7ed; color: #b45309; }
.sb-ico-stammdaten  { background: var(--slate-100); color: var(--slate-600); }
/* Aktiver Eintrag: Kachel uebernimmt das Markenblau. */
.sb-item.active .sb-ico { background: var(--brand-500); color: #fff; }

.sb-foot { border-top: 1px solid var(--slate-100); padding: 10px 12px 12px; }
.sb-impersonate { margin-bottom: 10px; }
.sb-impersonate-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10.5px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .08em; color: var(--slate-400);
}
.sb-impersonate .impersonate-select { width: 100%; max-width: none; }

.sb-user { display: flex; align-items: center; gap: 9px; }
.sb-avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-600);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
  flex-shrink: 0;
}
.sb-user-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; flex: 1; }
.sb-user-text strong { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user-text span { font-size: 11px; color: var(--slate-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-logout {
  color: var(--slate-400);
  padding: 6px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  transition: background-color .12s ease, color .12s ease;
}
.sb-logout:hover { background: var(--slate-100); color: var(--slate-900); }
.sb-logout svg { width: 16px; height: 16px; }

/* Schmale Bildschirme: Leiste rutscht als Block nach oben, Navigation als Kachelzeile. */
@media (max-width: 940px) {
  .app-shell { flex-direction: column; }
  .sidebar { position: static; width: 100%; height: auto; border-right: none; border-bottom: 1px solid rgba(15,23,42,0.08); }
  .sb-nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 0 10px 10px; overflow: visible; }
  .sb-group { width: 100%; padding: 8px 8px 4px; }
  .sb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .sb-impersonate { margin-bottom: 0; }
}

/* Kompakte Kopfzeile der Tool-Seiten (tools/...) - Klassen wie in tools-nav.css. */
.app-header {
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  color: var(--slate-900);
  border-bottom: 1px solid rgba(15,23,42,0.08);
  position: sticky;
  top: 0;
  z-index: 50;
}
.app-header-inner { max-width: 1400px; margin: 0 auto; padding: 9px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.app-header-left { display: flex; align-items: center; gap: 20px; min-width: 0; }
.app-brand { font-weight: 650; letter-spacing: -0.015em; display: flex; align-items: center; gap: 9px; white-space: nowrap; color: var(--slate-900); }
.app-nav { display: flex; gap: 2px; font-size: 13px; flex-wrap: wrap; }
.app-nav a {
  text-decoration: none;
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  color: var(--slate-600);
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}
.app-nav a:hover { background: var(--slate-100); color: var(--slate-900); }
.app-nav a.active { background: var(--brand-50); color: var(--brand-600); }
.app-header-right { display: flex; align-items: center; gap: 12px; font-size: 13px; }

.impersonate-select {
  background-color: #fff;
  background-image: var(--select-chevron);
  border: 1px solid var(--slate-200);
  color: var(--slate-900);
  font-size: 12px;
  padding: 4px 26px 4px 10px;
  max-width: 190px;
  box-shadow: var(--shadow-sm);
}
.impersonate-select:hover { border-color: var(--slate-300); }
.impersonate-select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.impersonate-select option { color: var(--slate-900); }

.logout-link {
  text-decoration: none;
  font-size: 13px;
  color: var(--slate-500);
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  transition: background-color .15s ease, color .15s ease;
}
.logout-link:hover { background: var(--slate-100); color: var(--slate-900); }

/* Warnleiste bei aktivem Wartungsmodus */
.maintenance-bar {
  background: #dc2626;
  color: #fff;
  font-size: 13px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(15,23,42,0.15);
}
.maintenance-bar strong { font-weight: 600; }
.maintenance-bar span { opacity: .92; }
.maintenance-bar a { color: #fff; text-decoration: underline; }

.page { width: 100%; padding: 26px 30px; }
.page-narrow { max-width: 900px; margin: 0 auto; padding: 26px 30px; }
.page h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin: 0 0 4px; }
.page p.lead { color: var(--slate-500); font-size: 13.5px; margin: 0 0 18px; }

.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
.pill-btn {
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--slate-200);
  cursor: pointer;
  background: #fff;
  color: var(--slate-600);
  box-shadow: var(--shadow-sm);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pill-btn:hover { border-color: var(--slate-300); background: var(--slate-50); }
/* Als Link (Team-Übersicht, Liste "Nicht zugeordnet") soll er aussehen wie als Knopf. */
a.pill-btn { text-decoration: none; display: inline-block; }
.pill-btn.active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  box-shadow: 0 1px 3px rgba(49,89,214,0.35);
}

.ct-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }

.sort-btn { display: flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; font: inherit; color: inherit; padding: 0; text-transform: inherit; letter-spacing: inherit; }
.sort-btn:hover { color: var(--slate-700); }
.sort-arrow { color: var(--slate-300); }
.sort-arrow.active { color: var(--brand-600); }

/* Filterzeile direkt unter den Spaltenkoepfen */
.ct-count-line { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
table.data-table .ct-filter-row th {
  position: sticky;
  z-index: 29;
  background: var(--slate-50);
  padding: 4px 6px;
  border-bottom: 1px solid var(--slate-200);
  text-transform: none;
  letter-spacing: normal;
}
.ct-filter-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--slate-900);
  border: 1px solid var(--slate-200);
  border-radius: 6px;
  background-color: #fff;
  padding: 3px 7px;
}
select.ct-filter-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 10px;
  padding-right: 17px;
  cursor: pointer;
}
.ct-filter-input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-100);
}

.ct-filterbar { padding: 10px 14px; margin-bottom: 12px; }
.ct-filter-field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--slate-600); font-weight: 500; }
.ct-filter-field .input, .ct-filter-field select { width: auto; }

/* Schiebt den Verschieben-Button in der Zeile ueber der Tabelle nach rechts. */
.ct-count-spacer { flex: 1 1 auto; }

/* Verschiebekonsole */
.ct-move-choice {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.45;
  padding: 8px 10px;
  border: 1px solid var(--slate-200);
  border-radius: 7px;
  margin-bottom: 7px;
  cursor: pointer;
}
.ct-move-choice:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50, #f0f6ff); }
.ct-move-choice input { margin-top: 2px; }
.ct-move-choice .muted { font-size: 12px; }
.ct-move-areas {
  /* Untereinander, weil jede Zeile jetzt ihre eigene Zielauswahl traegt. */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 11px;
  margin: 2px 0 0 24px;
  border-left: 2px solid var(--slate-200);
}
.ct-move-areas[hidden] { display: none; }
.ct-move-area { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
/* Je Auftrag eine Zeile: links der Haken, rechts die Person, an die er geht. */
.ct-move-area-row { display: flex; align-items: center; gap: 10px; }
.ct-move-area-row .ct-move-area { flex: 0 0 160px; }
.ct-move-area-row .ct-move-area-target { flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 4px 8px; }
.ct-move-area-row .ct-move-area-target:disabled { background: var(--slate-50, #f8fafc); color: var(--slate-400, #94a3b8); }
/* Die Mandatsverantwortung ist kein Auftrag - eine Linie trennt sie ab. */
.ct-move-mv-row { border-top: 1px solid var(--slate-200, #e2e8f0); padding-top: 10px; margin-top: 4px; }
.ct-move-error {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: #b91c1c;
}
.ct-move-error[hidden] { display: none; }

/* ── Mandantenverwaltung: kompakte Anzeigezeilen ── */
.cmt-zeile td { vertical-align: middle; }
/* Sachbearbeiter und Rhythmus nicht umbrechen - sonst wird jede Zeile doppelt so hoch. */
.cmt-zeile td:nth-child(3), .cmt-zeile td:nth-child(4) { white-space: nowrap; }
.cmt-inaktiv td { color: var(--slate-400); }
.cmt-badge {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  background: var(--slate-100); color: var(--slate-500);
  border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: middle;
}

/* Auftrags-Chips: zutreffende Auftraege mit Bearbeiter, uebrige gedaempft. */
.cmt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cmt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; line-height: 1.6;
  border: 1px solid var(--slate-200); border-radius: 999px;
  padding: 1px 9px 1px 3px; background: #fff; white-space: nowrap;
}
.cmt-chip-key {
  background: var(--brand-50); color: var(--brand-600);
  font-weight: 650; border-radius: 999px; padding: 1px 7px;
}
/* Mehrere Kuerzel im selben Chip (eine Person betreut alles) zusammenruecken. */
.cmt-chip-key + .cmt-chip-key { margin-left: -3px; }
.cmt-chip-name { color: var(--slate-600); }
.cmt-chip-aus {
  padding: 1px 9px; color: var(--slate-300);
  border-style: dashed; background: transparent;
}

.cmt-aktionen { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cmt-loeschform { display: inline; }
.cmt-loeschen {
  background: none; border: none; cursor: pointer; font: inherit;
  font-size: 12px; color: var(--slate-400); padding: 4px 6px; border-radius: 6px;
  transition: background-color .12s ease, color .12s ease;
}
.cmt-loeschen:hover { background: #fef2f2; color: #dc2626; }

/* ── Bearbeiten-Dialog ── */
.cmt-edit-card { max-width: 520px; }
.cmt-edit-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmt-edit-ueberschrift {
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em;
  color: var(--slate-400); margin: 0 0 10px;
}
.cmt-check { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--slate-700); margin-top: 4px; }
/* Je Auftrag eine Zeile: links "trifft zu", rechts der Sachbearbeiter. */
.cmt-area-zeile {
  display: grid; grid-template-columns: 165px 1fr; gap: 10px;
  align-items: center; margin-bottom: 8px;
}
.cmt-area-name {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--slate-700);
}
.cmt-area-hinweis { font-size: 11px; color: var(--slate-400); margin-left: 4px; }
.cmt-area-assignee { font-size: 12.5px; }
.cmt-area-assignee:disabled { background: var(--slate-50); color: var(--slate-400); cursor: not-allowed; }

@media (max-width: 560px) {
  .cmt-edit-raster { grid-template-columns: 1fr; }
  .cmt-area-zeile { grid-template-columns: 1fr; gap: 4px; }
}

/* Dialog (Verschieben je Mandant) */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.modal-backdrop[hidden] { display: none; }
.modal-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px -12px rgba(15,23,42,0.35);
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px;
}
.modal-card h2 { font-size: 17px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
.modal-card > .muted { font-size: 13px; margin: 0 0 18px; }
.modal-section { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--slate-100); }
.modal-section:last-of-type { border-bottom: none; margin-bottom: 4px; }
.modal-label { display: block; font-size: 12.5px; font-weight: 500; color: var(--slate-700); margin-bottom: 10px; }
.modal-label .input, .modal-label select { margin-top: 5px; width: 100%; }
.modal-hint { font-size: 12px; margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Fortschrittsbalken (Controlling) */
.progress {
  height: 7px;
  background: var(--slate-100);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 3px;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
  border-radius: 999px;
}

/* ── Mitarbeiterverwaltung: Liste als reine Anzeige, Bearbeiten in Dialogen ── */
/* ── "Nicht zugeordnet" unter Meine Mandanten ── */
.offen-karte { padding: 16px 18px; margin-bottom: 20px; border-color: var(--brand-100); }
.offen-titel { font-size: 15px; font-weight: 650; margin: 0 0 2px; display: flex; align-items: center; gap: 8px; }
.offen-zahl {
  font-size: 11.5px; font-weight: 650; background: var(--brand-50); color: var(--brand-600);
  border-radius: 999px; padding: 1px 9px;
}
.offen-hinweis { font-size: 12.5px; margin: 0 0 12px; }
/* Eine Zeile je Mandant: nichts bricht um, die Aktionsspalten ziehen sich auf ihren
   Inhalt zusammen, der uebrige Platz gehoert dem Namen. */
.offen-auftraege { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; white-space: nowrap; }
.offen-tabelle td, .offen-tabelle th { vertical-align: middle; }
.offen-eng, .offen-tabelle td.offen-eng,
.offen-tabelle td.offen-aktionen { white-space: nowrap; width: 1%; }
.offen-aktionen { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.offen-name {
  display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Lange Mitarbeiternamen duerfen die Zeile nicht zweizeilig machen - voller Name im title. */
.offen-tabelle td.offen-zustaendig {
  max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.offen-haken { display: flex; align-items: center; gap: 5px; font-size: 12.5px; white-space: nowrap; }
.offen-rhythmus { width: 132px; font-size: 12.5px; flex: none; }
.offen-form { display: inline; }
.offen-link {
  background: none; border: none; padding: 0; font: inherit; font-size: 12px;
  color: var(--slate-500); text-decoration: underline; cursor: pointer;
}
.offen-link:hover { color: #b91c1c; }
.offen-wartet { font-size: 12.5px; color: #b45309; }
/* Zeile ohne Zustaendigen - faellt in der Admin-Sicht auf. */
.offen-niemand { color: #b45309; font-size: 12.5px; }
/* Hinweisband auf "Meine Mandanten": verweist auf die eigene Seite, statt die
   Arbeitsliste mit einer zweiten Tabelle zu belasten. */
.offen-hinweisband {
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--radius);
  padding: 10px 14px; margin: 0 0 16px; font-size: 12.5px; color: var(--slate-700);
}
.offen-hinweisband a { color: var(--brand-600); font-weight: 500; margin-left: 4px; }

/* Auswahl "ganzes Team / einzelne Person" - wie in der Team-Uebersicht. */
.offen-filter { margin: 0 0 14px; }

.offen-anfragen { margin: 0; padding-left: 18px; font-size: 12.5px; }
.offen-anfragen li { margin-bottom: 4px; }
/* Je Auftrag eine Zeile: links "trifft zu", rechts "geht an den Kollegen". */
.offen-zeile {
  display: grid; grid-template-columns: 1fr 120px; gap: 10px;
  align-items: center; padding: 5px 0; border-bottom: 1px solid var(--slate-100);
}
.offen-zeile:last-child { border-bottom: none; }

/* ── Mandantenabgleich (Datenupload): Bericht ── */
.mand-aktionen form { display: flex; gap: 6px; }
.mand-zahlen { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.mand-kachel {
  flex: 1 1 130px; background: #fff; border: 1px solid var(--slate-200);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 12px 14px;
}
.mand-kachel-wichtig { border-color: var(--brand-100); background: var(--brand-50); }
.mand-zahl { display: block; font-size: 22px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mand-label { display: block; font-size: 11.5px; color: var(--slate-500); margin-top: 2px; }

.mand-warnung {
  padding: 12px 14px; margin-bottom: 14px; font-size: 12.5px; color: var(--slate-700);
  border-color: #fde68a; background: #fffbeb;
}
.mand-liste { margin: 8px 0 0; padding-left: 18px; }
.mand-liste li { margin-bottom: 2px; }
.mand-ueberschrift { font-size: 13px; font-weight: 600; margin: 22px 0 8px; }
/* Name aus dem Export, zu dem es im Tool kein Konto gibt. */
.mand-fehlt { color: #b45309; border-bottom: 1px dotted #b45309; cursor: help; }

/* Kopfzeile der Mitarbeiterverwaltung: Titel links, Anlegen-Knopf rechts. */
.au-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.au-kopf h1 { margin: 0; }

.au-table td { vertical-align: middle; }
/* Rolle und Team nicht umbrechen - sonst wird jede Zeile doppelt so hoch. */
.au-table td:nth-child(3), .au-table td:nth-child(4) { white-space: nowrap; }
/* Name bewusst kleiner als sonst in Tabellen - so bleibt hinten Platz fuer Rechte
   und Aktionen, ohne dass die Tabelle waagrecht scrollen muss. */
/* Name und Adresse mit fester Hoechstbreite: ohne die bestimmt die laengste
   Import-Adresse die Spaltenbreite, weil sie nicht umbricht - die Spalte waere dann
   doppelt so breit wie noetig. Der volle Text steht jeweils im title. */
.au-name {
  display: block; max-width: 190px; font-weight: 500; font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Lange Import-Adressen kuerzen statt umbrechen - die volle steht im title. */
.au-mail {
  display: block; max-width: 190px; font-size: 11px; color: var(--slate-400);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.au-nr { color: var(--slate-500); }
.au-inaktiv td { color: var(--slate-400); }

/* Alle Chips in einer Zeile: die Spalte nimmt sich die noetige Breite, statt dass die
   Zeile doppelt so hoch wird. Ueberschuss bekommt die Mitarbeiter-Spalte, deren lange
   Import-Adressen ohnehin gekuerzt werden. */
.au-chips { display: flex; flex-wrap: nowrap; gap: 4px; }
.au-rechte-kopf, .au-table td:nth-child(5) { white-space: nowrap; width: 1%; }
/* Die Chips sind zugleich Schalter: sie zeigen den Stand und oeffnen den Dialog dazu. */
.au-chip {
  font: inherit; cursor: pointer;
  font-size: 11px; line-height: 1.9; white-space: nowrap;
  border: 1px solid var(--slate-200); border-radius: 999px; padding: 0 9px;
  color: var(--slate-500); background: #fff;
  transition: border-color .12s ease, background-color .12s ease;
}
.au-chip:hover { border-color: var(--brand-500); color: var(--brand-600); }
.au-chip-an { border-color: var(--brand-100); background: var(--brand-50); color: var(--brand-600); }
.au-chip-aus { border-style: dashed; color: var(--slate-400); }

.au-aktionen { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.au-loeschform { display: inline; }
.au-loeschen {
  background: none; border: none; cursor: pointer; font: inherit;
  font-size: 12px; color: var(--slate-400); padding: 4px 6px; border-radius: 6px;
  transition: background-color .12s ease, color .12s ease;
}
.au-loeschen:hover { background: #fef2f2; color: #dc2626; }

/* Ankreuzlisten in den Rechte-Dialogen: je Zeile ein Kästchen mit Erläuterung. */
.au-kaesten { display: flex; flex-direction: column; gap: 2px; }
.au-kasten {
  display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start;
  padding: 7px 8px; border-radius: 8px; cursor: pointer;
}
.au-kasten:hover { background: var(--slate-50); }
.au-kasten input { margin-top: 2px; }
.au-kasten-name { display: block; font-size: 13px; color: var(--slate-700); }
.au-kasten-desc { display: block; font-size: 11.5px; color: var(--slate-400); margin-top: 1px; }
/* Ohne Gesamthaken ist die Einzelauswahl gegenstandslos. */
.au-kaesten-aus { opacity: .45; }

.au-pw-code {
  display: inline-block; margin-top: 4px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px;
  padding: 4px 10px; font-size: 13px; letter-spacing: .04em;
}
.au-pw-mail { font-size: 12px; color: var(--brand-600); margin-left: 10px; }

.muted { color: var(--slate-500); }
.mono { font-variant-numeric: tabular-nums; }

.scroll-wrap { overflow: auto; }
.scroll-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-wrap::-webkit-scrollbar-track { background: transparent; }
.scroll-wrap::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: 999px;
  border: 2px solid #fff;
}
.scroll-wrap::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }

/* Mitarbeiterumsatz: die beiden Diagramme ueber der Tabelle */
.revenue-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
/* Auf schmalen Bildschirmen untereinander statt gequetscht nebeneinander. */
@media (max-width: 1100px) {
  .revenue-charts { grid-template-columns: 1fr; }
}
/* Fuellt die Kartenhoehe, damit der Ring nicht im leeren Raum schwebt. */
.revenue-pie-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  flex: 1;
}
.revenue-pie-svg { width: 210px; height: 210px; flex-shrink: 0; }
.revenue-pie-slice { transition: opacity .12s ease; cursor: default; }
.revenue-pie-legend {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.revenue-pie-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 5px;
  transition: background-color .12s ease;
}
.revenue-pie-item.is-hover { background: var(--slate-50); }
.revenue-pie-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.revenue-pie-name {
  flex: 1;
  color: var(--slate-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.revenue-pie-pct {
  color: var(--slate-900);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.revenue-pie-val {
  color: var(--slate-400);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 74px;
  text-align: right;
}

/* Ampel im Uploadbereich: zeigt, wie aktuell die hochgeladenen Daten sind */
.upload-ampel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
}
.upload-ampel-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
  /* Heller Ring, damit der Punkt auch auf farbigem Grund klar abgesetzt bleibt. */
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
}

/* ───────────────────────────────────────────────────────────────────────────
   Liquiditaetsplanung
   ─────────────────────────────────────────────────────────────────────────── */

.liq-warnung {
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #991b1b;
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  margin-bottom: 18px;
}
.liq-warnung a { font-weight: 600; }

/* Die beiden Kennzahlen-Kacheln nebeneinander, auf schmalen Schirmen untereinander. */
.liq-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.liq-kachel { padding: 18px 20px 14px; }
.liq-kachel-kopf { display: flex; align-items: center; justify-content: space-between; }
.liq-kachel-titel {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate-400);
  margin: 0;
}
.liq-kachel-wert {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.liq-kachel-wert.liq-negativ { color: #dc2626; }
.liq-kachel-unterwert {
  font-size: 12px;
  color: var(--slate-500);
  margin-top: 2px;
}
.liq-diagramm { width: 100%; height: auto; display: block; margin-top: 14px; }
.liq-diagramm-leer {
  margin-top: 18px;
  padding: 28px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--slate-400);
  border: 1px dashed var(--slate-200);
  border-radius: var(--radius-sm);
}
.liq-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--slate-500);
}
.liq-legende span { display: inline-flex; align-items: center; gap: 5px; }
.liq-punkt { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.liq-punkt-hohl { background: #fff; border: 1.5px solid var(--slate-400); }

/* Abschnittsueberschrift mit Aktionsknopf auf gleicher Hoehe. */
.liq-abschnitt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 10px;
}
.liq-abschnitt-aktionen { display: flex; align-items: center; gap: 10px; }
.liq-ueberschrift { font-size: 15px; font-weight: 600; margin: 0; }
.liq-mini { padding: 5px 11px; font-size: 12px; }

.liq-ampel { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.liq-ampel-punkt {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
}

.liq-typ {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.liq-typ-ein { background: #dcfce7; color: #15803d; }
.liq-typ-aus { background: #fee2e2; color: #b91c1c; }
.liq-gruen { color: #15803d; }
.liq-rot { color: #dc2626; }

/* ── Wochenboard ── */
.liq-board {
  display: flex;
  gap: 12px;
  padding-bottom: 10px;
  align-items: flex-start;
}
.liq-spalte {
  flex: 0 0 232px;
  width: 232px;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.liq-spalte.liq-drop-ziel { border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100); }
.liq-spalte-vergangen { opacity: .72; }

.liq-spalte-kopf,
.liq-spalte-kopf-vergangen,
.liq-spalte-kopf-ueberfaellig {
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  padding: 9px 12px;
}
.liq-spalte-kopf { background: var(--slate-900); color: #fff; }
.liq-spalte-kopf-vergangen { background: var(--slate-500); color: #fff; }
.liq-spalte-kopf-ueberfaellig { background: #fef3c7; color: #92400e; }
.liq-spalte-titel { font-size: 12.5px; font-weight: 700; }
.liq-spalte-zeitraum { font-size: 10.5px; opacity: .85; margin-top: 1px; }

.liq-spalte-anfang {
  padding: 7px 11px;
  font-size: 11px;
  color: var(--slate-400);
  border-bottom: 1px solid var(--slate-100);
  font-variant-numeric: tabular-nums;
}
.liq-spalte-posten {
  padding: 7px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-height: 60px;
  max-height: 360px;
  overflow-y: auto;
}
.liq-leer { font-size: 11.5px; color: var(--slate-300); text-align: center; padding: 12px 0; }

.liq-posten {
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-size: 12px;
  cursor: grab;
}
.liq-posten:active { cursor: grabbing; }
.liq-posten-ein { background: #f0fdf4; }
.liq-posten-aus { background: #fef2f2; }
.liq-posten-kopf { display: flex; align-items: center; gap: 4px; }
.liq-posten-name {
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.liq-marke { font-size: 10.5px; opacity: .75; flex-shrink: 0; }
.liq-marke-verschoben { color: #7c3aed; opacity: 1; }
.liq-posten-fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}
.liq-posten-betrag { font-weight: 700; font-variant-numeric: tabular-nums; }
.liq-posten-ein .liq-posten-betrag { color: #15803d; }
.liq-posten-aus .liq-posten-betrag { color: #b91c1c; }
.liq-posten-datum { font-size: 10px; color: var(--slate-400); }

.liq-spalte-fuss { padding: 8px 11px; border-top: 1px solid var(--slate-100); }
.liq-zeile {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--slate-500);
  font-variant-numeric: tabular-nums;
}
.liq-zeile-stark { font-weight: 700; color: var(--slate-900); font-size: 12px; }
.liq-trenner { height: 1px; background: var(--slate-100); margin: 5px 0; }
.liq-hinweis-vergangen {
  margin-top: 5px;
  font-size: 10px;
  color: var(--slate-400);
  font-style: italic;
}
.liq-status {
  margin-top: 6px;
  border-radius: 7px;
  padding: 4px 8px;
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.liq-status-ok { background: #dcfce7; color: #15803d; }
.liq-status-warn { background: #fef3c7; color: #92400e; }
.liq-status-alarm { background: #fee2e2; color: #b91c1c; }

.liq-unterzeile { background: var(--slate-50); }
.liq-unterzeile td { border-top: none; }

/* Ausdruck der Planung: Navigation und Bedienelemente weglassen, damit das Blatt
   nur die Zahlen zeigt. */
@media print {
  .app-header,
  .sidebar,
  .maintenance-bar,
  .liq-nicht-drucken { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #cbd5e1; }
  .page { max-width: none; padding: 0; }
}

/* ── Erfassungsmasken der Liquiditaetsplanung ── */
.liq-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 200;
}
.liq-maske {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(15, 23, 42, .3);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.liq-maske-kopf { padding: 16px 20px 0; }
.liq-maske-kopf h2 { font-size: 16px; font-weight: 600; margin: 0; }
.liq-maske-koerper { padding: 14px 20px; overflow-y: auto; }
.liq-maske-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.liq-feld { display: flex; flex-direction: column; gap: 4px; }
.liq-feld-voll { grid-column: 1 / -1; }
.liq-feld-label { font-size: 12px; font-weight: 600; color: var(--slate-600); }
.liq-feld-hinweis { font-size: 11px; color: var(--slate-400); }
.liq-maske-fuss {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--slate-100);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.liq-maske-fuss-links,
.liq-maske-fuss-rechts { display: flex; gap: 8px; flex-wrap: wrap; }
.liq-maske-fuss button { font-size: 12.5px; }
.liq-gefahr { color: #b91c1c; border-color: #fecaca; }
.liq-gefahr:hover:not(:disabled) { background: #fef2f2; }
.liq-wird-gezogen { opacity: .4; }

@media (max-width: 560px) {
  .liq-maske-raster { grid-template-columns: 1fr; }
}

/* Tool-Uebersicht (/tools.php): Kacheln mit Icon, wie im BA360-Toolset, in Suite-Blau. */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 16px; }
.tool-card {
  display: flex; flex-direction: column; align-items: flex-start;
  text-decoration: none; color: inherit; padding: 22px 20px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.tool-card:hover { border-color: var(--brand-500); transform: translateY(-3px); box-shadow: 0 10px 30px -6px rgba(15,23,42,0.14); }
.tool-ico {
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px; flex-shrink: 0;
  background: var(--brand-50); color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .18s ease, color .18s ease;
}
.tool-ico svg { width: 24px; height: 24px; display: block; }
.tool-card:hover .tool-ico { background: var(--brand-500); color: #fff; }
.tool-card h2 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.tool-card p { margin: 0 0 14px; color: var(--slate-500); font-size: 12.5px; line-height: 1.5; flex: 1; }
.tool-go { font-size: 12.5px; font-weight: 600; color: var(--brand-600); display: inline-flex; align-items: center; gap: 6px; }
.tool-go svg { width: 14px; height: 14px; transition: transform .18s ease; }
.tool-card:hover .tool-go svg { transform: translateX(3px); }
.tool-denied { border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }

/* Begruendung fehlt im Dialog "Nicht uebernehmen". */
.offen-nicht-fehler { color: #dc2626; font-size: 12.5px; margin: 6px 0 0; }
.offen-nicht-fehler[hidden] { display: none; }

/* Liste "Ohne Eintrag im Export": volle Seitenhöhe, eine Zeile je Mandant. */
.mand-oe-hinweis { font-size: 12.5px; margin: 0 0 10px; max-width: 900px; }
.mand-oe-leiste { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; flex-wrap: wrap; }
.mand-oe-leiste #oe-zahl { font-size: 12.5px; min-width: 150px; }
.mand-oe-fussnote { font-size: 12px; flex: 1 1 320px; }
.mand-oe-kasten { max-height: calc(100vh - 260px); }
.mand-oe-tabelle { width: 100%; }
.mand-oe-tabelle td, .mand-oe-tabelle th { vertical-align: middle; }
.mand-oe-haken { width: 36px; padding-right: 0; }
.mand-oe-name, .mand-oe-tabelle td.mand-oe-sb {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mand-oe-name { max-width: 520px; }
.mand-oe-tabelle td.mand-oe-sb { max-width: 170px; }

/* Buchhaltungs-Rhythmus direkt in der Mandantenübersicht umstellen. Kompakt wie die
   Status-Dropdowns daneben; Chevron und Rahmen erbt es von der globalen select-Regel. */
.ct-fibu-select {
  width: 100%;
  /* Ohne Mindestbreite quetschen die breiteren Statusspalten daneben die Spalte auf
     wenige Pixel zusammen - "quartalsweise" waere dann nicht mehr lesbar. */
  min-width: 112px;
  padding: 4px 22px 4px 8px;
  background-position: right 6px center;
  background-size: 10px;
  font-size: 12px;
  color: var(--slate-600);
  box-shadow: none;
}
.ct-fibu-select:focus { box-shadow: 0 0 0 3px var(--brand-100); }