:root {
  --primary: #1d4ed8;
  --primary-light: #dbeafe;
  --primary-dark: #1e40af;
  --sidebar-bg: #f8fafc;
  --sidebar-text: #475569;
  --sidebar-hover: #e2e8f0;
  --sidebar-active: #1d4ed8;
  --sidebar-border: #e2e8f0;
  --sidebar-text-strong: #0f172a;
  --sidebar-text-muted: #94a3b8;
  --sidebar-brand-bg: #f1f5f9;
  --bg: #f1f5f9;
  --card: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-2: #64748b;
  /* Vorher #94a3b8 (2,6:1 auf Weiß) — Hinweise und Leerzustände waren kaum lesbar. */
  --text-3: #6b7a90;
  --success: #16a34a;
  --success-bg: #dcfce7;
  --warning: #b45309;
  --warning-bg: #fef3c7;
  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,.1);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1);
}

/* ── DARK MODE ───────────────────────────────────────────────────────────── */

body.dark-mode {
  --primary: #3b82f6;
  --primary-light: #1e3a5f;
  --primary-dark: #60a5fa;
  --sidebar-bg: #080f1a;
  --sidebar-text: #94a3b8;
  --sidebar-hover: #1e293b;
  --sidebar-active: #2563eb;
  --sidebar-border: #1e293b;
  --sidebar-text-strong: #e2e8f0;
  --sidebar-text-muted: #64748b;
  --sidebar-brand-bg: #0f172a;
  --bg: #0f172a;
  --card: #1e293b;
  --border: #334155;
  --text: #f1f5f9;
  --text-2: #94a3b8;
  --text-3: #64748b;
  --success: #22c55e;
  --success-bg: #14532d;
  --warning: #f59e0b;
  --warning-bg: #451a03;
  --danger: #f87171;
  --danger-bg: #450a0a;
  --shadow: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
}
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #0f172a;
  color: var(--text);
  border-color: var(--border);
}
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  background: #1e293b;
}
body.dark-mode .seq-table th,
body.dark-mode .pos-table thead th { background: #1e293b; }
body.dark-mode .pos-table tr:nth-child(even) { background: rgba(255,255,255,.02); }
body.dark-mode .data-table tr:hover td { background: rgba(255,255,255,.05); }
/* Entspricht rgba(255,255,255,.05) über --card, aber deckend — siehe .col-aktionen. */
body.dark-mode .data-table tbody tr:hover { background: #28323f; }
body.dark-mode .heading-row { background: #1e3a5f !important; }
body.dark-mode .warning-banner { background: #1c0f00; border-color: #ea580c; color: #fed7aa; }
body.dark-mode .legal-check-item.ok { background: #052e16; }
body.dark-mode .legal-check-item.missing { background: #1f0505; }
body.dark-mode .legal-all-ok { background: #052e16; border-color: #166534; color: #4ade80; }
body.dark-mode .due-date-badge { background: #1e293b; }
body.dark-mode .due-date-badge.overdue { background: #1f0505; border-color: #7f1d1d; color: #fca5a5; }
body.dark-mode .info-banner { background: #1e3a5f; border-color: #1d4ed8; color: #93c5fd; }
body.dark-mode .badge-draft   { background:#1e293b; color:#94a3b8; }

/* Dark mode toggle button (sidebar) */
#dark-mode-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  color: var(--sidebar-text);
  cursor: pointer;
  border-radius: 6px;
  background: none;
  border: none;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
#dark-mode-toggle:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
#dark-mode-toggle svg { width: 17px; height: 17px; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

/* ── LAYOUT ──────────────────────────────────────────────────────────────── */

#app { display: flex; height: 100vh; overflow: hidden; }

#sidebar {
  width: 220px;
  min-width: 220px;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  border-bottom: 1px solid var(--sidebar-border);
  background: var(--sidebar-brand-bg);
  color: var(--sidebar-text-strong);
  font-size: 15px;
  font-weight: 600;
}
.brand svg { width: 22px; height: 22px; color: var(--primary); flex-shrink: 0; }

.nav-list { list-style: none; padding: 8px 0; }
.nav-group-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sidebar-text-muted);
  padding: 14px 16px 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: var(--sidebar-text);
  text-decoration: none;
  border-radius: 6px;
  margin: 1px 6px;
  font-size: 13.5px;
  transition: background .15s, color .15s;
}
.nav-link svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
.nav-link.active { background: var(--primary); color: #fff; }

/* Docs submenu */
.nav-group-toggle { width: calc(100% - 12px); background: none; border: none; cursor: pointer; text-align: left; }
.nav-chevron { width: 13px !important; height: 13px !important; margin-left: auto; flex-shrink: 0; transition: transform .2s; }
.nav-group-toggle.open .nav-chevron { transform: rotate(180deg); }
.nav-group-toggle.open { color: var(--sidebar-text-strong); }
.nav-submenu { list-style: none; overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.nav-submenu.open { max-height: 460px; }
.nav-sub-link { padding-left: 36px !important; font-size: 13px !important; }
/* Archiv: eine Stufe tiefer unter Angebote bzw. Aufträge */
.nav-sub-sub-link { padding-left: 54px !important; font-size: 12.5px !important; }
.nav-sub-sub-link svg { width: 15px; height: 15px; }

#content { flex: 1; overflow-y: auto; }
/* Breite wächst mit dem Bildschirm (vorher fest 1100 px: auf 1440/1920 blieb
   rechts Platz frei, während die Rechnungsliste die Spalte „Offen“ abschnitt). */
#page-container { padding: 28px; max-width: 1440px; }
/* Belegnummer bleibt in einer Zeile, Marken wie „Schlussrechnung“ dürfen darunter
   umbrechen — sonst hielten sie die Spalte auf 250 px. */
.doc-nr { white-space: normal; }
.doc-nr > a { white-space: nowrap; }
.doc-nr .ref-badge, .doc-nr .badge-channel { display: inline-block; white-space: nowrap; }

/* ── CARDS & COMMON ──────────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* ── Statistik bar chart ──────────────────────────────────────────────────── */
.stat-bar-chart { display:flex; align-items:flex-end; gap:6px; height:180px; }
.stat-bar-col   { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; gap:2px; }
.stat-bar-val   { font-size:9px; color:var(--text-3); min-height:12px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.stat-bar-wrap  { flex:1; width:100%; display:flex; align-items:flex-end; }
.stat-bar-fill  { width:100%; background:var(--primary); border-radius:3px 3px 0 0; min-height:2px; transition:height .3s; }
.stat-bar-empty { background:var(--border); opacity:.4; }
.stat-bar-lbl   { font-size:10px; color:var(--text-2); text-align:center; margin-top:3px; }
.stat-bar-cnt   { font-size:9px; color:var(--text-3); text-align:center; min-height:11px; }
.stat-row-empty td { color:var(--text-3); }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.page-header h1 { font-size: 22px; font-weight: 700; }
.page-header .actions { display: flex; gap: 8px; }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, opacity .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: var(--card); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg); }
.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-danger:hover { background: #fca5a5; }
.btn-success { background: var(--success-bg); color: var(--success); }
.btn-success:hover { background: #86efac; }
/* Dritte Stufe zwischen primär und sekundär: getönt statt volltonig. Der
   nächste Arbeitsschritt soll auffallen, aber nicht mit „Speichern" um die
   Aufmerksamkeit streiten — zwei gleich kräftige blaue Knöpfe nebeneinander
   sagen dem Auge, beides sei gleich wichtig. */
.btn-accent { background: var(--primary-light); color: var(--primary); border-color: transparent; }
.btn-accent:hover { background: #c7dcfd; }
body.dark-mode .btn-accent:hover { background: #24466f; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-icon { padding: 6px; border-radius: 6px; background: transparent; border: none; cursor: pointer; color: var(--text-2); }
.btn-icon:hover { background: var(--bg); color: var(--text); }
.btn-icon svg { width: 16px; height: 16px; }
.btn:disabled { opacity: .5; cursor: default; }

/* ── FORMS ───────────────────────────────────────────────────────────────── */

.form-group { margin-bottom: 16px; }
.form-row { display: grid; gap: 16px; }
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 5px; }

/* Überschrift einer Feldgruppe (mehrere Eingaben, kein einzelnes Ziel). Ein
   <label> ohne for-Attribut wäre hier falsch: Hilfsmittel kündigen es an und
   springen dann ins Leere. */
.form-label-static { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: 5px; }

input[type=text], input[type=number], input[type=email], input[type=tel],
input[type=date], input[type=password], select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--text);
  background: var(--card);
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(29,78,216,.12);
}
textarea { resize: vertical; min-height: 70px; }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }


/* ── DASHBOARD ───────────────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.dashboard-greeting {
  margin-bottom: 18px;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 70%, #6366f1) 100%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.dashboard-greeting-text {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.01em;
}
.stats-grid.dashboard-widgets {
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.stat-label { font-size: 12px; font-weight: 500; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.stat-value { font-size: 28px; font-weight: 700; color: var(--text); margin: 4px 0; }
.stat-sub { font-size: 12px; color: var(--text-3); }
.stat-card.highlight { border-left: 4px solid var(--primary); }
.buch-kachel { margin-bottom: 24px; }
.buch-kachel-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin-bottom: 12px; flex-wrap: wrap; }
.buch-kachel-werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 4px; }
.buch-kachel-zahl { font-size: 18px; font-weight: 700; margin: 4px 0 2px; }
.buch-kachel-drop { margin-top: 12px; padding: 14px 16px; border: 2px dashed var(--border); border-radius: var(--radius); text-align: center; cursor: pointer; color: var(--text-2); font-size: 13px; transition: border-color .15s, background .15s; }
.buch-kachel-drop small { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 2px; }
.buch-kachel-drop:hover, .buch-kachel-drop:focus-visible, .buch-kachel-drop.aktiv { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); color: var(--primary); }
.buch-kachel-abschnitt { margin: 14px 0 4px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text-2); }
.buch-kachel-zeile { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.buch-kachel-zeile:last-child { border-bottom: 0; }
.buch-kachel-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.buch-kachel-text strong, .buch-kachel-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buch-kachel-text strong { font-size: 13px; font-weight: 600; }
.buch-kachel-text small { font-size: 11.5px; color: var(--text-3); }
.buch-kachel-betrag { font-weight: 700; font-size: 13px; white-space: nowrap; }
@media (max-width: 600px) { .buch-kachel-werte { grid-template-columns: 1fr 1fr; } .buch-kachel-werte > :first-child { grid-column: 1 / -1; } }

/* Auftragsbestand über der Auftragsliste */
.auftragsbestand { margin-bottom: 16px; }
.auftragsbestand .stat-value { font-variant-numeric: tabular-nums; }
.doc-archiv-hinweis { font-size: 13px; color: var(--text-3); margin: -8px 0 16px; max-width: 70ch; }
.doc-folge { font-size: 11.5px; color: var(--text-3); font-weight: 400; margin-top: 2px; }

/* ── TABLES ──────────────────────────────────────────────────────────────── */

.table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Waagerecht rollen statt abschneiden — und zwar auf JEDER Breite.
     Vorher stand hier `overflow: hidden` und `overflow-x: auto` kam erst unter
     768 px dazu: oberhalb wurde eine zu breite Tabelle stillschweigend
     abgeschnitten, ohne Rollbalken. Man kam an die Knöpfe der letzten Spalte
     gar nicht heran, auch nicht durch Schieben. Senkrecht bleibt es bei
     `hidden`, sonst bekäme jede Tabelle einen zweiten Rollbalken. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow);
}
/* Verlaufsschatten am rechten Rand — der einzige Hinweis, dass rechts noch
   etwas kommt. Stand bisher nur im Mobilblock. */
.positions-table-wrap::after,
.table-wrap::after {
  content: '';
  position: sticky;
  right: 0;
  display: block;
  width: 24px;
  height: 1px;
  margin-top: -1px;
  margin-left: auto;
  background: linear-gradient(90deg, transparent, var(--card));
  pointer-events: none;
}

table.data-table {
  width: 100%;
  border-collapse: collapse;
}
/* ── Stufenlose Dichte ───────────────────────────────────────────────────────
   Zellabstand und Schriftgröße wachsen mit dem Fenster, statt an zwei
   Haltepunkten zu springen. Damit passt sich der Inhalt der Auflösung
   fortlaufend an, statt erst bei 768 px etwas zu merken: auf 1024 px rücken
   die Spalten enger zusammen und die Tabelle passt, auf 1920 px steht sie
   luftig. Die Grenzen sind eng gesteckt — darunter wird es unleserlich,
   darüber gewinnt man nichts mehr. */
.data-table th {
  background: var(--bg);
  font-size: clamp(10.5px, 0.62vw, 11.5px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-2);
  padding: clamp(7px, 0.52vw, 10px) clamp(7px, 0.73vw, 14px);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.data-table td {
  padding: clamp(7px, 0.57vw, 11px) clamp(7px, 0.73vw, 14px);
  font-size: clamp(12.5px, 0.75vw, 14px);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #f8fafc; }

/* ── Klebende Aktionsspalte ───────────────────────────────────────────────────
   In den Buchhaltungslisten stand der Stift in der zehnten Spalte. Wurde die
   Tabelle breiter als ihr Behälter, lag er außerhalb des Bildes und man musste
   die Ansicht erst nach rechts schieben, um eine Ausgabe zu bearbeiten.

   Die Zeile bekommt dafür einen eigenen, DECKENDEN Grund und die Zelle erbt
   ihn: eine durchscheinende Farbe ließe den durchlaufenden Inhalt unter der
   klebenden Spalte hindurchscheinen. Deshalb ist auch der Überfahr-Ton hier
   ausgeschrieben statt als rgba wie sonst. */
.data-table tbody tr { background: var(--card); }
.data-table tbody tr:hover { background: #f8fafc; }
.data-table .col-aktionen {
  position: sticky; right: 0; z-index: 2;
  white-space: nowrap; background: inherit;
}
.data-table thead .col-aktionen { background: var(--bg); }
/* Diese beiden Zeilen müssen die allgemeine Überfahr-Regel schlagen: `tr:hover
   td` ist spezifischer als `.col-aktionen`, und im Dunkelmodus ist sie
   durchscheinend — die klebende Zelle wurde dadurch beim Überfahren
   durchsichtig und der Inhalt lief sichtbar darunter hindurch. */
.data-table tr:hover td.col-aktionen { background: #f8fafc; }
body.dark-mode .data-table tr:hover td.col-aktionen { background: #28323f; }

/* Dasselbe generisch: trägt eine Tabelle irgendwo Aktionsknöpfe, bleibt ihre
   letzte Spalte am Rand stehen. Über :has, damit die zwölf Fundstellen nicht
   einzeln ausgezeichnet werden müssen — und damit eine künftige Tabelle es von
   selbst erbt. :has ist im Haus schon in Gebrauch (siehe .seq-table weiter
   unten), also keine neue Voraussetzung. */
.data-table:has(.actions-cell) thead th:last-child,
.data-table:has(.actions-cell) tbody td:last-child,
.data-table:has(.actions-cell) tfoot td:last-child {
  position: sticky; right: 0; z-index: 2;
  white-space: nowrap; background: inherit;
}
.data-table:has(.actions-cell) thead th:last-child { background: var(--bg); }
.data-table:has(.actions-cell) tr:hover td:last-child { background: #f8fafc; }
body.dark-mode .data-table:has(.actions-cell) tr:hover td:last-child { background: #28323f; }

/* Ganze Zeile anfassbar — damit niemand das kleine Symbol am Rand treffen muss. */
.data-table tr.row-klickbar { cursor: pointer; }

/* Das Band zwischen Telefon und Schreibtisch — kleines Notebook, Tablet quer.
   Dort galt bisher KEINE Tabellenregel: der Mobilblock endet bei 767, der Rest
   ist auf breite Bildschirme gerechnet. Engere Zellen verschaffen zwei bis drei
   Spalten Luft, ohne etwas wegzunehmen. */
@media (max-width: 1279px) {
  /* Überschriften dürfen umbrechen. `white-space: nowrap` auf th zwingt sonst
     jede Spalte auf die Breite ihrer Überschrift — „Leistungsdatum" allein
     hält so 110 px besetzt, obwohl darunter nur ein Datum steht. Umbrechen
     verbirgt nichts und verschafft bei zehn Spalten mehrere hundert Pixel. */
  .data-table th { white-space: normal; }
}

@media (max-width: 1023px) {
  /* Zellabstand und Schrift regelt clamp() oben stufenlos — hier bleibt nur,
     was sich nicht rechnen lässt: drei Kanban-Spalten sind auf einem kleinen
     Notebook zu eng. */
  .kanban-board { grid-template-columns: 1fr 1fr; }
}

/* Tabellen, die von sich aus breit sind. Als Klasse und nicht als Stilattribut:
   ein inline min-width sticht jede Klasse und hebelte damit die Regel für
   schmale Geräte weiter unten aus. */
/* „So breit hätte ich es gern" — aber nie auf Kosten des Fensters. min() gibt
   nach, sobald der Platz knapper ist: die Tabelle staucht sich erst, und erst
   wenn der Inhalt wirklich nicht mehr passt, entsteht der Rollbalken. Ein
   nacktes min-width erzwang stattdessen sofort den Überlauf. */
.tbl-breit { min-width: min(900px, 100%); }
.tbl-sehr-breit { min-width: min(1000px, 100%); }
.tbl-mittel { min-width: min(700px, 100%); }

/* Änderungsverlauf im Ausgaben-Dialog. Zugeklappt, weil die meisten ihn nicht
   brauchen — und erst beim Aufklappen wird nachgeladen. */
.exp-verlauf { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.exp-verlauf > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-2);
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.exp-verlauf > summary::-webkit-details-marker { display: none; }
.exp-verlauf > summary::before { content: '▸'; font-size: 10px; }
.exp-verlauf[open] > summary::before { content: '▾'; }
.exp-verlauf > summary:hover { color: var(--primary); }

/* Buchhaltung: Ausgaben und Anlagen. Die Mindestbreite stand vorher inline und
   schlug damit die Regel für schmale Geräte weiter unten.

   Sie bleibt großzügig: seit die Aktionsspalte stehen bleibt, ist Schieben kein
   Schaden mehr, gequetschte Spalten aber sehr wohl — bei 760 px brach schon
   „Betriebshaftpflicht" in drei Zeilen um. */
.tbl-buch { min-width: min(880px, 100%); }
/* break-word, NICHT word-break: letzteres trennt mitten im Wort, auch wenn eine
   Leerstelle in der Nähe wäre („Papierhau / s Krüger"). */
/* Gedeckelt, damit eine lange Beschreibung die Tabelle nicht über den Rand
   hinausschiebt — sie bricht dann lieber um. */
/* Gedeckelt, damit eine lange Beschreibung die Tabelle nicht über den Rand
   hinausschiebt — sie bricht dann lieber um. */
.tbl-buch .zelle-text { white-space: normal; overflow-wrap: break-word; max-width: 260px; }
/* „Steuer & Versicherung" allein hielt die Spalte auf 156 px und schob die
   Tabelle damit auch auf breiten Bildschirmen über den Rand. */
.tbl-buch .buch-cat-badge { white-space: normal; }
/* Zehn Spalten sind dicht; mit dem gewohnten Zellabstand blieb die Tabelle auch
   auf 1440 px ein Stück zu breit, und der Betrag der letzten Zahlenspalte
   verschwand unter der klebenden Aktionsspalte. */
.tbl-buch th, .tbl-buch td { padding-left: 10px; padding-right: 10px; }
.tbl-buch .num { white-space: nowrap; }
/* Alle Spalten sichtbar, ohne Schieben: break-word zählt bei der Spaltenbreite
   nicht mit, ein langes Wort („shenzhenshishunshidianzi…“, „INV-DF-DEU-…“)
   hielt seine Spalte deshalb auf voller Länge und schob Steuer, Brutto, Beleg
   und DATEV aus dem Bild. anywhere bricht weiter zuerst an Leerstellen, darf
   aber notfalls im Wort trennen — damit kann die Tabelle in die Breite passen. */
.tbl-buch .zelle-text { overflow-wrap: anywhere; max-width: none; min-width: 90px; }
/* Ausgaben: dreizehn Spalten — dichter gesetzt, damit sie ab rund 1280 px
   Fensterbreite ohne Schieben ins Bild passen. Beträge proportional mit
   Tabellenziffern statt Monospace: gleich gut lesbar, ein Fünftel schmaler. */
.tbl-buch[data-spalten="ausgaben"] th { white-space: normal; }
.tbl-buch[data-spalten="ausgaben"] th, .tbl-buch[data-spalten="ausgaben"] td { padding-left: 6px; padding-right: 6px; }
.tbl-buch[data-spalten="ausgaben"] .num { font-family: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tbl-buch[data-spalten="ausgaben"] .buch-cat-badge { font-size: 10.5px; padding: 2px 6px; }
.tbl-buch[data-spalten="ausgaben"] .datev-knopf { padding-left: 7px; padding-right: 7px; }
.tbl-buch[data-spalten="ausgaben"] .col-aktionen .btn-icon { padding: 4px; }
@media (max-width: 1365px) {
  .tbl-buch[data-spalten="ausgaben"] th, .tbl-buch[data-spalten="ausgaben"] td { padding-left: 4px; padding-right: 4px; }
}
.data-table .actions-cell { display: flex; gap: 4px; align-items: center; }
.data-table .num { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; font-weight: 600; }
.data-table .amount { text-align: right; font-weight: 600; white-space: nowrap; }
.th-sort { cursor: pointer; user-select: none; }
.th-sort:hover { color: var(--primary); }
.si { font-size: 10px; opacity: 0.3; }
.si.si-on { opacity: 1; color: var(--primary); }

/* ── STATUS BADGES ───────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
/* In Tabellen dürfen mehrwortige Marken („Unterschrift angefordert“) zweizeilig
   werden — einzeilig hielten sie ganze Spalten breit und schoben die Tabelle
   über den Rand. Einwortige Marken bleiben einzeilig. */
.data-table td .badge { white-space: normal; line-height: 1.25; border-radius: 10px; }
.badge-draft    { background: #f1f5f9; color: #475569; }
.badge-sent     { background: #dbeafe; color: #1d4ed8; }

.badge-paid     { background: #dcfce7; color: #15803d; }
.badge-overdue  { background: #fee2e2; color: #dc2626; }
.badge-cancelled{ background: #f1f5f9; color: #94a3b8; }
.badge-angebot  { background: #ede9fe; color: #7c3aed; }
.badge-auftrag  { background: #fef3c7; color: #b45309; }
.badge-rechnung { background: #dbeafe; color: #1d4ed8; }
.badge-storno   { background: #fee2e2; color: #dc2626; }

.payment-select {
  appearance: none;
  border: none;
  border-radius: 4px;
  padding: 2px 18px 2px 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  /* Eigene Breite nach Inhalt: die allgemeine Feldregel (width:100%) stutzte
     „Bezahlt“ in schmalen Spalten auf „Bezahl“. */
  width: auto;
}
/* Beträge brechen nicht um („6.292,12 €“ stand sonst mit dem € in Zeile zwei). */
.data-table .doc-offen { white-space: nowrap; }
.payment-offen   { background: #fee2e2; color: #dc2626; }
.payment-bezahlt { background: #dcfce7; color: #15803d; }
body.dark-mode .payment-offen   { background: #450a0a; color: #fca5a5; }
body.dark-mode .payment-bezahlt { background: #052e16; color: #86efac; }

/* ── DOCUMENT FORM ───────────────────────────────────────────────────────── */

.doc-form-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.doc-form-header h1 { font-size: 20px; font-weight: 700; flex: 1; }

.form-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.form-section-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-section-body { padding: 18px; }

/* Positions table */
.positions-table-wrap { overflow-x: auto; }

table.pos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pos-table th {
  background: var(--primary);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 9px 8px;
  text-align: left;
  white-space: nowrap;
}
.pos-table th.right { text-align: right; }
.pos-table td {
  padding: 4px 4px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.pos-table tr.pos-row:nth-child(even) td { background: #f8fafc; }
.pos-table tr.pos-row:hover td { background: var(--primary-light); }
.pos-table tr.heading-row td { background: #f1f5f9; }

.pos-table input, .pos-table select {
  padding: 5px 7px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
}
.pos-table input:focus, .pos-table select:focus {
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(29,78,216,.15);
}
.pos-table .col-pos    { width: 48px; text-align: center; }
.pos-table .col-type   { width: 90px; }
.pos-table .col-desc   { min-width: 200px; }
.pos-table .col-qty    { width: 75px; }
.pos-table .col-unit   { width: 75px; }
.pos-table .col-price  { width: 100px; }
.pos-table .col-tax    { width: 65px; }
.pos-table .col-disc   { width: 60px; }
.pos-table .col-total  { width: 90px; text-align: right; color: var(--primary); font-weight: 600; padding-right: 8px; white-space: nowrap; }
.pos-table .col-del    { width: 30px; text-align: center; }
.pos-table .col-opt    { width: 30px; text-align: center; }
/* Der Löschen-Knopf ist die letzte Spalte und lief bei elf Spalten aus dem
   Bild. Er bleibt stehen — die Zeilenfarben werden dafür ausgeschrieben, weil
   eine klebende Zelle einen deckenden Grund braucht. Ist die Spalte gesperrt
   (Rechnung, GoBD), blendet das Skript sie aus; display:none sticht sticky. */
.pos-table .col-del { position: sticky; right: 0; z-index: 2; background: var(--card); }
.pos-table tr.pos-row:nth-child(even) td.col-del { background: #f8fafc; }
.pos-table tr.pos-row:hover td.col-del { background: var(--primary-light); }
.pos-table tr.heading-row td.col-del { background: #f1f5f9; }
body.dark-mode .pos-table .col-del { background: var(--card); }
body.dark-mode .pos-table tr.pos-row:nth-child(even) td.col-del { background: #232f42; }
.pos-num-cell { font-size: 11px; color: var(--text-3); text-align: center; padding-top: 9px; cursor: grab; user-select: none; white-space: nowrap; }
.pos-num-cell:active { cursor: grabbing; }
.pos-grip { color: var(--text-3); opacity: .25; margin-right: 3px; font-size: 12px; line-height: 1; transition: opacity .15s; }
.pos-row:hover .pos-grip { opacity: .7; }
.pos-row.dragging { opacity: .5; background: var(--primary-light); }

/* ── ZIEHEN UND ABLEGEN (allgemein) ──────────────────────────────────────────
   Gilt für Projektzeilen und Aufgabenkarten. Der Positionseditor der Belege
   behält seine eigenen Regeln darüber. */
.drag-handle {
  color: var(--text-3);
  opacity: .3;
  cursor: grab;
  user-select: none;
  font-size: 13px;
  line-height: 1;
  transition: opacity .15s;
}
.drag-handle:active { cursor: grabbing; }
tr:hover > .grip-cell > .drag-handle,
.task-card:hover .drag-handle { opacity: .75; }
/* Gesperrter Griff: sichtbar, aber ohne Versprechen. */
.drag-handle.off { opacity: .15; cursor: default; }
.grip-cell { width: 28px; text-align: center; padding-left: 6px !important; padding-right: 0 !important; }
/* Die beiden Werkzeuge gehören nebeneinander. Seit die Griffspalte dazukam,
   ist die Tabelle enger und sie brachen sonst untereinander um. */
.proj-actions { white-space: nowrap; }

tr.dragging, .task-card.dragging {
  opacity: .5;
  background: var(--primary-light);
}
tr.dragging > td { border-color: var(--primary); }
/* Spalte, in der die Karte landen würde. */
.sort-target { outline: 2px dashed var(--primary); outline-offset: -2px; border-radius: 8px; }

/* Leere Spalte muss trotzdem etwas sein, worauf man zielen kann. */
.kanban-drop { min-height: 48px; }
.pos-row.dragging td { border-color: var(--primary); }


.pos-details-input {
  font-size: 12px;
  color: var(--text-2);
  padding: 3px 7px;
  width: 100%;
  background: transparent;
  border: 1px dashed transparent;
  border-radius: 4px;
}
.pos-details-input:focus { background: #fff; border-color: var(--border); }


/* Totals section */
.totals-box {
  display: flex;
  justify-content: flex-end;
  padding: 16px 18px;
}
.totals-inner { min-width: 300px; }
.totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13.5px;
}
.totals-row.total-final {
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
}
.totals-row .t-label { color: var(--text-2); }
.totals-row.total-final .t-label { color: rgba(255,255,255,.85); }
.totals-row .t-value { font-weight: 600; white-space: nowrap; }
.totals-divider { border: none; border-top: 1px solid var(--border); margin: 6px 0; }

/* ── SETTINGS ────────────────────────────────────────────────────────────── */

.settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
  padding-bottom: -2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.settings-tab {
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }


.preview-img {
  max-height: 120px;
  max-width: 300px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid var(--border);
  margin-bottom: 8px;
}

/* Color picker */
.color-input-wrap { display: flex; align-items: center; gap: 10px; }
.color-input-wrap input[type=color] {
  width: 44px;
  height: 36px;
  padding: 2px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Number sequences table */
.seq-table { width: 100%; border-collapse: collapse; }
.seq-table th { background: var(--bg); padding: 9px 12px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; color: var(--text-2); border-bottom: 1px solid var(--border); text-align: left; }
.seq-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.seq-table tr:last-child td { border-bottom: none; }
.seq-preview { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; color: var(--primary); background: var(--primary-light); padding: 2px 8px; border-radius: 4px; }

/* ── CUSTOMER PICKER ─────────────────────────────────────────────────────── */

.customer-picker-wrap { position: relative; }
.customer-picker-input { cursor: pointer; }
.customer-picker-input::placeholder { color: var(--text-3); }
.customer-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  z-index: 100;
  max-height: 240px;
  overflow-y: auto;
}
.customer-option {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 13.5px;
  transition: background .1s;
}
.customer-option:hover { background: var(--bg); }
.customer-option .cname { font-weight: 500; }
.customer-option .csub { font-size: 12px; color: var(--text-3); }

/* ── TOAST ───────────────────────────────────────────────────────────────── */

#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  background: #1e293b;
  color: #fff;
  font-size: 13.5px;
  box-shadow: var(--shadow-md);
  animation: slideIn .2s ease;
  min-width: 260px;
}
.toast.success { background: #15803d; }
.toast.error   { background: #dc2626; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ── MODAL ───────────────────────────────────────────────────────────────── */

#modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Etwas Luft, damit der Dialog bei knapper Bildschirmhöhe nicht Kante an
     Kante steht. */
  padding: 16px;
  box-sizing: border-box;
}
#modal-overlay.hidden { display: none; }
/* Klick neben den Dialog schließt ihn nicht — er wackelt nur kurz. */
#modal-box.modal-wackeln { animation: modal-wackeln .35s ease; }
@keyframes modal-wackeln {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); } 40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { #modal-box.modal-wackeln { animation: none; outline: 2px solid var(--primary); } }

/* Allgemeines Ausblenden. Bisher gab es die Klasse nur für die Modalhülle —
   ein `.hidden` auf einem .form-row blieb dadurch sichtbar, weil dessen
   display:grid ohne Gegenregel gewann. */
.hidden { display: none !important; }
#modal-box {
  background: var(--card);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  max-width: 480px;
  width: 100%;
  padding: 24px;
  /* Höhe deckeln und rollen — auf JEDER Auflösung. Das stand bisher nur im
     Mobilblock; darüber wuchs ein langer Dialog über den Bildschirm hinaus und
     wurde, weil die Hülle ihn mittig setzt, oben UND unten abgeschnitten —
     ohne Rollbalken. Auf einem Notebook mit 768 px Höhe war der
     Speichern-Knopf damit schlicht unerreichbar. */
  max-height: min(88vh, 88svh);
  overflow-y: auto;
  overscroll-behavior: contain;
}
#modal-box.modal-email { max-width: 640px; }
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.modal-text  { color: var(--text-2); margin-bottom: 20px; line-height: 1.6; }
.modal-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  /* Klebt unten, damit Abbrechen und Speichern erreichbar bleiben, egal wie
     lang der Inhalt darüber ist. */
  position: sticky; bottom: 0; z-index: 1;
  background: var(--card);
  padding-top: 12px; margin-top: 4px;
}

/* E-Mail field grid (An / CC / BCC / Betreff) */
.email-fields {
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  font-size: 13.5px;
}
.email-field-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.email-field-row:last-child { border-bottom: none; }
.email-field-lbl {
  width: 58px;
  flex-shrink: 0;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg);
  align-self: stretch;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--border);
}
.email-field-row input {
  flex: 1;
  border: none;
  border-radius: 0;
  padding: 9px 12px;
  font-size: 13.5px;
  background: transparent;
  box-shadow: none;
}
.email-field-row input:focus {
  outline: none;
  border: none;
  box-shadow: none;
  background: #fafbff;
}
.mail-error-box {
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: 6px;
  font-size: 13px;
}

/* Template chips (email modal) */
.template-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.template-chip {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  white-space: nowrap;
}
.template-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.template-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Document protocol log */
.doc-log-wrap { padding: 0 18px 18px; }
.doc-log-loading, .doc-log-empty { color: var(--text-3); font-size: 13px; padding: 12px 0; }
.doc-log { display: flex; flex-direction: column; gap: 0; }
.doc-log-entry {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.doc-log-entry:last-child { border-bottom: none; }
.doc-log-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 1px;
}
.doc-log-content { flex: 1; min-width: 0; }
.doc-log-desc { font-size: 13.5px; font-weight: 500; color: var(--text); }
.doc-log-meta { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.doc-log-time { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }

/* ── MISC ────────────────────────────────────────────────────────────────── */


.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.search-bar input { max-width: 320px; }

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font-size: 13.5px;
  cursor: pointer;
  padding: 6px 0;
  text-decoration: none;
}
.back-btn:hover { color: var(--primary); }
.back-btn svg { width: 16px; height: 16px; }


.info-banner {
  background: var(--primary-light);
  color: var(--primary-dark);
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* Warning banner (dashboard overdue) */
.warning-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff7ed;
  border: 1.5px solid #f97316;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13.5px;
  color: #7c2d12;
  margin-bottom: 20px;
  cursor: pointer;
}
.warning-banner:hover { background: #ffedd5; }

/* Fälligkeitsdatum badge */
.due-date-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  width: fit-content;
}
.due-date-badge.overdue {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #9f1239;
}

/* Legal checklist in settings */
.legal-checklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.legal-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
}
.legal-check-item.ok   { background: #f0fdf4; }
.legal-check-item.missing { background: #fef2f2; }
.legal-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.legal-check-item.ok    .legal-check-icon { background: #dcfce7; color: #16a34a; }
.legal-check-item.missing .legal-check-icon { background: #fee2e2; color: #dc2626; }
.legal-check-label { flex: 1; font-weight: 500; }
.legal-check-hint  { font-size: 12px; color: var(--text-3); }
.legal-all-ok {
  padding: 8px 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  color: #15803d;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
}

/* Dashboard widgets */
.clock-card   { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); color: #fff; }
.weather-card { background: linear-gradient(135deg, #0369a1 0%, #38bdf8 100%); color: #fff; }
.clock-card .stat-label,  .clock-card .stat-sub,
.weather-card .stat-label, .weather-card .stat-sub  { color: rgba(255,255,255,.75); }
.clock-card .stat-value, .weather-card .stat-value  { color: #fff; }
#clock-kw { font-size: 12px; opacity: .7; margin-top: 4px; }

/* Weather 3-day forecast */
.weather-forecast-row { display: flex; gap: 6px; margin-top: 2px; }
.weather-forecast-day { flex: 1; background: rgba(255,255,255,.15); border-radius: 8px; padding: 6px 4px; text-align: center; }
.wf-label { font-size: 11px; font-weight: 600; opacity: .8; margin-bottom: 2px; }
.wf-icon  { font-size: 18px; line-height: 1.2; }
.wf-temp  { font-size: 11px; margin-top: 2px; display: flex; gap: 4px; justify-content: center; }
.wf-max   { font-weight: 700; }
.wf-min   { opacity: .65; }

/* Dunning / Mahnwesen section */
.dunning-section {
  margin-top: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dunning-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-weight: 600;
  font-size: 13.5px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}
.dunning-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.dunning-card:last-child { border-bottom: none; }
.dunning-card:hover { background: var(--bg); }

.dunning-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
  border-left: 3px solid;
  padding-left: 10px;
}
.dunning-level-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: none;
}
.dunning-level-name {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.dunning-doc-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: 2px;
}
.dunning-card-center { flex: 1; min-width: 0; }
.dunning-customer {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}
.dunning-dates {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 6px;
}
.dunning-next {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dunning-next-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
}
.dunning-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 600;
}
.dunning-badge.red    { background: #fee2e2; color: #991b1b; }
.dunning-badge.orange { background: #ffedd5; color: #9a3412; }
.dunning-badge.blue   { background: #dbeafe; color: #1e40af; }

.dunning-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* Urgency row backgrounds */
.dunning-overdue  { background: #fff5f5; }
.dunning-urgent   { background: #fffbeb; }
.dunning-upcoming { background: var(--card); }

body.dark-mode .dunning-overdue  { background: #1f0505; }
body.dark-mode .dunning-urgent   { background: #1c1002; }
body.dark-mode .dunning-badge.red    { background: #450a0a; color: #fca5a5; }
body.dark-mode .dunning-badge.orange { background: #431407; color: #fdba74; }
body.dark-mode .dunning-badge.blue   { background: #1e3a5f; color: #93c5fd; }
body.dark-mode .dunning-section { border-color: var(--border); }
body.dark-mode .dunning-section-header { background: var(--bg); }

.optional-hint { font-size: 11.5px; color: var(--text-3); }

hr.section-sep { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

.ref-badge {
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  /* Ohne das wird die Marke als schrumpfbares Flex-Kind auf Wortbreite
     gestaucht und bricht mitten in der Belegnummer um. */
  white-space: nowrap;
}

.status-select {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--card);
  color: var(--text);
}

/* ── BELEGKOPF ───────────────────────────────────────────────────────────────
   Eigene Klassen statt .doc-form-header: die teilen sich sechs weitere Masken
   (Kunde, Artikel, Projekt, Inventur, Dauerauftrag), und die brauchen den
   gestapelten Aufbau nicht.

   Drei Zeilen übereinander — zurück, Titel, Marken — dann eine Linie, dann die
   Aktionen. Vorher standen alle drei nebeneinander in einer Flex-Zeile; der
   Titel nahm mit flex:1 den freien Raum, die Knopfleiste gab mit flex-shrink:0
   nichts ab, und die Bezugsmarke dazwischen wurde auf Wortbreite gestaucht. Auf
   Notebook-Breite brach „Bezug: AN-2026-0008" dadurch auf vier Zeilen um. */
.doc-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 20px;
}
.doc-head .back-btn { align-self: flex-start; }
.doc-head h1 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.doc-head-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.doc-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
/* Trennt „Speichern" vom Rest — die einzige Aktion, die etwas festhält.
   Als Abstand, nicht als Strich: der Kopf sitzt auf --bg, und eine Haarlinie
   in --border ist darauf nicht zu sehen. Drei Achtel Leerraum gegen ein
   Achtel zwischen den übrigen Knöpfen liest das Auge als Gruppengrenze. */
.doc-head-sep { width: 16px; flex-shrink: 0; }
.doc-head-actions .btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── GETEILTER KNOPF ─────────────────────────────────────────────────────────
   Links der nächste Schritt, rechts das Chevron mit den übrigen. Zwei echte
   Knöpfe statt eines mit zwei Klickflächen: so stimmen Tabulatorreihenfolge,
   Fokusring und Vorlesehilfe ohne Sonderbehandlung. */
.btn-split { display: inline-flex; align-items: stretch; }
.btn-split > .btn { border-radius: 0; }
.btn-split > .btn:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.btn-split > .btn:last-child  { border-top-right-radius: 6px; border-bottom-right-radius: 6px; padding-left: 8px; padding-right: 8px; }
.btn-split > .btn + .btn { margin-left: -1px; }
.btn-split > .btn-primary + .btn-primary { box-shadow: inset 1px 0 0 rgba(255,255,255,.28); }
.btn-split > .btn-accent  + .btn-accent  { box-shadow: inset 1px 0 0 rgba(29,78,216,.18); }
body.dark-mode .btn-split > .btn-accent + .btn-accent { box-shadow: inset 1px 0 0 rgba(148,197,255,.22); }
.btn-split > .btn:hover { position: relative; z-index: 1; }
.btn-split > .btn svg { width: 15px; height: 15px; }

/* Knopf, der nur ein Symbol trägt — quadratisch statt breit, damit er neben
   den beschrifteten Gruppen nicht wie eine dritte Beschriftung wirkt. */
.btn-only-icon { padding: 8px; }
.btn-only-icon svg { width: 16px; height: 16px; }

/* Schmale Bildschirme: die Leiste bekommt eine eigene Regel, weil sie im
   Belegkopf nicht mehr .doc-actions heißt. Der Hauptschritt und Speichern
   dürfen wachsen, die Symbolknöpfe nicht. */
@media (max-width: 767px) {
  .doc-head-actions { justify-content: flex-start; gap: 6px; }
  /* Drei Reihen statt einer gequetschten: der nächste Schritt trägt den
     längsten Text und bekommt die erste Reihe für sich, Ausgeben und das
     Mehr-Menü teilen sich die zweite, Speichern liegt breit darunter. */
  .doc-head-actions > .btn-split { flex: 1 1 100%; }
  .doc-head-actions > .btn-split > .btn:first-child { flex: 1; min-width: 0; justify-content: center; }
  .doc-head-actions > .btn { flex: 1; min-width: 0; justify-content: center; }
  .doc-head-actions > .btn-only-icon { flex: 0 0 auto; }
  .doc-head-actions > #save-doc-btn { flex: 1 1 100%; }
  .doc-head-sep { display: none; }
  .doc-head h1 { font-size: 17px; }
  .menu { max-width: calc(100vw - 16px); }
}
/* Sehr lange Beschriftungen kürzen statt überlaufen — „Trotzdem unterschreiben
   lassen" passt sonst auf keinem Telefon in die Zeile. */
.doc-head-actions .btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── AKTIONSMENÜ ─────────────────────────────────────────────────────────────
   Liegt fest im Fenster (position:fixed am body), nicht im Kopf: #content
   scrollt, ein absolut positioniertes Panel würde an dessen unterem Rand
   abgeschnitten. Unter dem Dialog (z-index 1000), über allem anderen. */
.menu {
  position: fixed;
  z-index: 900;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  max-width: 320px;
  padding: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  animation: menu-auf .15s cubic-bezier(.2, .8, .3, 1);
}
@keyframes menu-auf { from { opacity: 0; transform: translateY(-4px); } }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.menu-item:hover { background: var(--bg); }
.menu-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.menu-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-3); }
.menu-item:hover svg { color: var(--text-2); }
.menu-item.danger { color: var(--danger); }
.menu-item.danger svg, .menu-item.danger:hover svg { color: var(--danger); }
.menu-item.danger:hover { background: var(--danger-bg); }
.menu-sep { height: 1px; margin: 4px 8px; background: var(--border); }

@media (prefers-reduced-motion: reduce) {
  .menu { animation: none; }
}

/* ── DOC ACTIONS (extracted from inline style) ───────────────────────────── */

.doc-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
}

/* ── MOBILE TOP BAR ──────────────────────────────────────────────────────── */

#topbar { display: none; }

#hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--sidebar-text-strong);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
#hamburger:hover { background: var(--sidebar-hover); }

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sidebar-text-strong);
  font-size: 15px;
  font-weight: 600;
}
.topbar-brand svg { color: var(--primary); }

/* ── SIDEBAR BACKDROP (mobile) ───────────────────────────────────────────── */

#sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  display: block;
}
#sidebar-backdrop.visible { opacity: 1; pointer-events: all; }

/* ── RESPONSIVE: iPad Hochformat (768 – 1023 px) ─────────────────────────── */

/* Bis 1180 px statt bis 1023: bei genau 1024 px stand die volle Seitenleiste
   mit 220 px im Weg und ließ dem Inhalt nur 746 px — die Auftragsliste passte
   deshalb als einzige nicht. Auf einem Bildschirm dieser Größe gehört der
   Platz dem Inhalt, nicht der Beschriftung neben den Symbolen. */
@media (min-width: 768px) and (max-width: 1180px) {
  #sidebar {
    width: 64px;
    min-width: 64px;
    flex-shrink: 0;
  }
  .brand {
    justify-content: center;
    padding: 18px 0;
  }
  .brand-text { display: none; }
  .nav-text   { display: none; }
  .nav-group-label { display: none; }
  .nav-link {
    justify-content: center;
    padding: 11px 0;
    margin: 2px 8px;
  }
  .nav-link svg { width: 20px; height: 20px; }
  .nav-group-toggle { justify-content: center; width: calc(100% - 16px); }
  .nav-chevron { display: none !important; }
  .nav-submenu { max-height: none !important; }
  .nav-sub-link { padding-left: 0 !important; justify-content: center; }
  .nav-sub-sub-link svg { width: 16px; height: 16px; }

  #page-container { padding: 20px; }

  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid.dashboard-widgets { grid-template-columns: repeat(2, 1fr); }

  .form-row.cols-3 { grid-template-columns: 1fr 1fr; }
  .form-row.cols-4 { grid-template-columns: 1fr 1fr; }

  /* prevent grid-column:span from expanding 2-col grid */
  .form-row.cols-3 > *,
  .form-row.cols-4 > * { grid-column: auto !important; }

  .doc-form-header { flex-wrap: wrap; gap: 8px; }
  .doc-actions { margin-left: 0; width: 100%; justify-content: flex-end; }

  #modal-box { max-width: min(480px, calc(100vw - 32px)); }
}

/* ── RESPONSIVE: iPad Querformat + Desktop (≥ 1024 px) ──────────────────── */
/* default CSS already handles this — sidebar 220px, full grids             */

/* ── RESPONSIVE: Mobile Hochformat (< 768 px) ───────────────────────────── */

@media (max-width: 767px) {

  /* ── iOS zoom prevention: inputs must be ≥16px ── */
  /* Die großen Felder der Zählmaske (.inv-qty, .inv-scan) sind ohnehin ≥16px
     und behalten ihre Größe — das !important hatte sie auf 16px gestutzt. */
  input:not(.inv-qty):not(.inv-scan), select, textarea { font-size: 16px !important; }

  /* ── Topbar ── */
  #topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    background: var(--sidebar-bg);
    z-index: 500;
    padding: 0 14px;
    border-bottom: 1px solid var(--sidebar-border);
  }

  /* ── App layout ── */
  #app { height: calc(100vh - 52px); margin-top: 52px; }

  /* ── Sidebar: off-canvas ── */
  #sidebar {
    position: fixed;
    top: 0; left: -280px;
    width: 270px; min-width: 270px;
    height: 100vh;
    z-index: 999;
    transition: left .25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
  }
  #sidebar.open { left: 0; }

  /* ── Content ── */
  #content { width: 100%; }
  #page-container { padding: 12px; }

  /* ── Page header ── */
  .page-header { flex-wrap: wrap; gap: 8px; padding-bottom: 4px; }
  .page-header h1 { font-size: 18px; }
  .page-header .actions { flex-wrap: wrap; gap: 6px; width: 100%; }
  .page-header .actions select,
  .page-header .actions .btn { flex: 1; min-width: 0; }

  /* ── Form layout ── */
  .form-row.cols-2,
  .form-row.cols-3,
  .form-row.cols-4 { grid-template-columns: 1fr; }
  .form-row > * { grid-column: 1 !important; }
  .form-section-body { padding: 14px; }
  .form-section-header { padding: 12px 14px; font-size: 13px; }

  /* ── Doc form ── */
  .doc-form-header { flex-wrap: wrap; align-items: center; gap: 8px; }
  .doc-form-header h1 { font-size: 16px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .doc-actions { width: 100%; margin-left: 0 !important; justify-content: flex-start; gap: 6px; flex-wrap: wrap; }
  .doc-actions .btn { flex: 1; min-width: 80px; justify-content: center; }
  .doc-actions .btn-icon { flex: 0; }

  /* ── Positions table ── */
  table.pos-table { min-width: 720px; }
  table.pos-table { font-size: 12px; }
  .pos-table th, .pos-table td { padding: 4px 3px; }
  .pos-table .col-type   { width: 70px; }
  .pos-table .col-qty    { width: 55px; }
  .pos-table .col-unit   { width: 55px; }
  .pos-table .col-price  { width: 80px; }
  .pos-table .col-tax    { width: 52px; }
  .pos-table .col-disc   { width: 46px; }

  /* ── Totals ── */
  .totals-box { padding: 12px 14px; }
  .totals-inner { min-width: 0; width: 100%; }

  /* ── Data tables ── */
  .data-table { min-width: 480px; }

  /* Dashboard: open invoices become mobile cards instead of a squeezed table. */
  .open-invoices-wrap { overflow: visible; }
  .open-invoices-wrap > div:first-child {
    align-items: flex-start !important;
    gap: 4px;
    flex-direction: column;
  }
  .open-invoices-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 10px;
  }
  .open-invoices-table thead { display: none; }
  .open-invoices-table tbody { display: block; padding: 0 12px 12px; }
  .open-invoices-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    box-shadow: var(--shadow);
  }
  .open-invoices-table td {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    font-size: 13px;
  }
  .open-invoices-table td::before {
    color: var(--text-3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .open-invoices-table td:nth-child(1)::before { content: 'Nummer'; }
  .open-invoices-table td:nth-child(2)::before { content: 'Kunde'; }
  .open-invoices-table td:nth-child(3)::before { content: 'Datum'; }
  .open-invoices-table td:nth-child(4)::before { content: 'Brutto'; }
  .open-invoices-table td:nth-child(5)::before { content: 'Offen'; }
  .open-invoices-table td:nth-child(1),
  .open-invoices-table td:nth-child(2),
  .open-invoices-table td:nth-child(6) { grid-column: 1 / -1; }
  .open-invoices-table td:nth-child(4),
  .open-invoices-table td:nth-child(5) { text-align: left !important; }
  .open-invoices-table td:nth-child(6) .btn { width: 100%; justify-content: center; }

  /* ── Stat cards ── */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stats-grid.dashboard-widgets { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 20px; }
  .stat-card { padding: 14px 12px; }

  /* ── Search bar ── */
  .search-bar { flex-wrap: wrap; gap: 8px; }
  .search-bar input { max-width: 100% !important; flex: 1; min-width: 0; }
  .search-bar select { flex: 1; min-width: 0; }

  /* ── Buttons ── */
  .btn { padding: 9px 12px; min-height: 38px; }
  .btn-sm { padding: 7px 10px; min-height: 32px; }
  .btn-icon { padding: 8px; min-height: 36px; min-width: 36px; }
  .doc-actions .btn-primary { flex-grow: 1.4; }

  /* ── Tab rows: horizontal scroll (no wrapping) ── */
  .proj-tabs,
  .settings-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .proj-tabs::-webkit-scrollbar,
  .settings-tabs::-webkit-scrollbar { display: none; }
  .proj-tab { flex-shrink: 0; white-space: nowrap; padding: 9px 14px; font-size: 13px; }
  .settings-tab { flex-shrink: 0; white-space: nowrap; padding: 8px 14px; }

  /* ── Kanban ── */
  .kanban-board { grid-template-columns: 1fr; }
  .proj-stat-grid { grid-template-columns: 1fr 1fr; }

  /* ── Calendar ── */
  .cal-cell { min-height: 58px; padding: 4px 3px; }
  .cal-day-num { font-size: 11px; }
  .cal-apt { font-size: 10px; padding: 1px 3px; }
  .cal-apt-time { display: none; }
  .cal-th { font-size: 10px; padding: 7px 0; letter-spacing: 0; }

  /* ── Modal ──
     Nur noch, was hier ANDERS ist als in der Grundregel: von unten
     eingeschoben statt mittig, volle Breite, etwas flacher. Deckelung,
     Rollen und die klebende Knopfleiste stehen jetzt oben und gelten überall. */
  #modal-overlay { align-items: flex-end; padding: 0; }
  #modal-box {
    width: 100%;
    max-width: 100%;
    max-height: 85vh;
    max-height: 85svh;
    margin: 0;
    padding: 20px 16px 28px;
    border-radius: 18px 18px 0 0;
  }

  /* ── Toast ── */
  #toast-container { left: 12px; right: 12px; bottom: 12px; }
  .toast { min-width: unset; width: 100%; }

  /* ── Settings sequence table ── */
  .seq-table { min-width: 560px; }
  .form-section-body:has(.seq-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0; }

  /* ── Buchhaltung: header controls wrap to 2 rows ── */
  .buch-method-row { flex-wrap: wrap; }
  .buch-method-hint { display: none !important; }
  #buch-year, #buch-month { flex: 1; min-width: 0; }

  /* ── Buchhaltung: KPI grid ── */
  .buch-kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .buch-kpi-card { padding: 12px 14px; gap: 10px; }
  .buch-kpi-icon { width: 36px; height: 36px; font-size: 14px; }
  .buch-kpi-value { font-size: 17px; }
  .buch-kpi-sub { font-size: 11px; }

  /* ── Buchhaltung: main layout ── */
  .buch-main-row { grid-template-columns: 1fr; }
  .buch-summary-grid { grid-template-columns: 1fr; }
  .buch-aging-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .buch-side-cards { flex-direction: row; flex-wrap: wrap; }
  .buch-side-card { flex: 1; min-width: 140px; }

  /* ── Dunning ── */
  .dunning-card { flex-wrap: wrap; }

  /* ── Back button ── */
  .back-btn { padding: 8px 0; }

  /* ── Dashboard greeting ── */
  .dashboard-greeting { padding: 14px 16px; }
  .dashboard-greeting-text { font-size: 18px; }

  /* ── Document list: card layout ── */
  #doc-table { min-width: 0; border-collapse: separate; border-spacing: 0 8px; }
  #doc-table thead { display: none; }
  #doc-table tbody { display: block; }
  #doc-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    box-shadow: var(--shadow);
  }
  #doc-table td { display: none; }
  #doc-table td:nth-child(1) {
    display: flex; align-items: center;
    grid-column: 1; grid-row: 1;
    font-weight: 600; font-size: 14px;
  }
  #doc-table td:nth-child(2) {
    display: block;
    grid-column: 1 / -1; grid-row: 2;
    font-size: 13px; color: var(--text-2); padding-top: 1px;
  }
  #doc-table td.amount {
    display: flex; align-items: center; justify-content: flex-end;
    grid-column: 2; grid-row: 1;
    font-weight: 600; font-size: 13px;
  }
  #doc-table .doc-rest-mobil {
    display: inline; margin-left: 6px;
    color: var(--danger); font-weight: 500; font-size: 12px;
  }
  #doc-table td:last-child {
    display: flex; align-items: center; gap: 6px;
    grid-column: 1 / -1; grid-row: 3;
    border-top: 1px solid var(--border);
    padding-top: 8px; margin-top: 4px;
  }

  /* ── Kunden list: hide secondary columns ── */
  table:has(#cust-tbody) { min-width: 0; }
  table:has(#cust-tbody) th:nth-child(1),
  table:has(#cust-tbody) td:nth-child(1),
  table:has(#cust-tbody) th:nth-child(3),
  table:has(#cust-tbody) td:nth-child(3),
  table:has(#cust-tbody) th:nth-child(4),
  table:has(#cust-tbody) td:nth-child(4),
  table:has(#cust-tbody) th:nth-child(5),
  table:has(#cust-tbody) td:nth-child(5) { display: none; }

  /* ── Dashboard Letzte Dokumente: hide Typ + Datum ── */
  table:has(#recent-tbody) { min-width: 0; }
  table:has(#recent-tbody) th:nth-child(1),
  table:has(#recent-tbody) td:nth-child(1),
  table:has(#recent-tbody) th:nth-child(4),
  table:has(#recent-tbody) td:nth-child(4) { display: none; }
}

/* ── STATUS ACTION BUTTONS ─────────────────────────────────────────────────── */
.btn-success { background: #16a34a; color: #fff; border: none; }
.btn-success:hover { background: #15803d; }


.locked-banner {
  background: #fef3c7; border: 1px solid #fcd34d; color: #92400e;
  border-radius: 8px; padding: 10px 16px; margin-bottom: 16px;
  font-size: 13px; font-weight: 500;
}


/* ── SIDEBAR USER AREA ───────────────────────────────────────────────────── */
.sidebar-user-area {
  margin-top: auto;
  padding: 10px 14px;
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sidebar-user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--sidebar-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 10.5px; color: var(--sidebar-text-muted); }


.sidebar-logout-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  border-top: 1px solid var(--sidebar-border);
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.sidebar-logout-row:hover {
  background: rgba(239,68,68,.1);
  color: var(--danger);
}
.sidebar-logout-row svg { flex-shrink: 0; }

/* ── FULL CALENDAR PAGE ──────────────────────────────────────────────────── */
.cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.cal-nav-label {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  text-align: center;
}
.cal-grid {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.cal-header-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.cal-th {
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-2);
  padding: 9px 0;
}
.cal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-cell {
  min-height: 100px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px;
  cursor: pointer;
  transition: background .1s;
  overflow: hidden;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell-empty { cursor: default; background: var(--bg); opacity: .5; }
.cal-cell:not(.cal-cell-empty):hover { background: var(--primary-light); }
.cal-cell-today { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.cal-day-num {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 4px;
  line-height: 1;
}
.cal-day-num.today {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
}
.cal-apt {
  font-size: 11.5px;
  padding: 2px 5px;
  border-radius: 4px;
  margin-bottom: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .1s;
}
.cal-apt:hover { opacity: .8; }
.cal-apt-time {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
  flex-shrink: 0;
}
.cal-apt-title {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-weight: 500;
}
.cal-color-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cal-color-opt input { display: none; }
.cal-color-opt span {
  display: block;
  width: 24px; height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: transform .1s, border-color .1s;
}
.cal-color-opt input:checked + span {
  border-color: var(--text);
  transform: scale(1.15);
}
.cal-color-opt span:hover { transform: scale(1.1); }

/* ── MODAL FORM ──────────────────────────────────────────────────────────── */
.modal-form { margin-bottom: 20px; }
.modal-form .form-group { margin-bottom: 14px; }
.modal-form .form-group:last-child { margin-bottom: 0; }
.modal-form label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.modal-form input, .modal-form select { width: 100%; box-sizing: border-box; }
/* Häkchen und Optionsknöpfe behalten ihre eigene Größe: mit width:100% schrumpften
   sie in schmalen Tabellenspalten auf 0 px (Positionsauswahl der Abschlagsrechnung). */
.modal-form input[type=checkbox], .modal-form input[type=radio] { width: auto; }
/* Ankreuzfeld mit Erklärsatz daneben: die Beschriftungsregel darüber stellt
   jedes label in Großbuchstaben — richtig für ein Feldetikett, falsch für
   einen ganzen Satz, der dann schreit. */
.modal-form label.hinweis-kasten { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; color: var(--text); }

/* ── APPOINTMENT MODAL ───────────────────────────────────────────────────── */


.btn-sm { padding: 7px 14px; font-size: 13px; }

/* ── DOCUMENT LAYOUT PREVIEW ─────────────────────────────────────────────── */
.doc-preview-block { transition: opacity .2s, box-shadow .15s, transform .1s; }
.doc-preview-block[draggable="true"]:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.doc-preview-block[draggable="true"]:active { cursor: grabbing; }
.doc-preview-block.drag-over {
  outline: 2px dashed var(--primary);
  outline-offset: 2px;
  transform: scale(1.015);
}

/* Project detail tabs */
.proj-tabs { display:flex; gap:2px; border-bottom: 2px solid var(--border); margin-bottom:20px; }
.proj-tab { padding:10px 18px; border:none; background:none; cursor:pointer; font-size:14px; color:var(--text-2); font-weight:500; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color .15s; }
.proj-tab:hover { color:var(--text); }
.proj-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }

/* Kanban */
.kanban-board { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:start; }
.kanban-col { background:var(--bg); border-radius:10px; padding:14px; }
.kanban-col-header { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2); margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; }
.task-card { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:8px; }
.task-card-title { font-size:14px; font-weight:600; color:var(--text); margin-bottom:6px; }
.task-card-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.task-card-actions { display:flex; gap:4px; justify-content:flex-end; }

/* Verknüpfte Belege — auf der Karte und im Aufgabendialog dieselbe Marke.
   flex:none wie bei .ref-badge: als schrumpfbares Flex-Kind bräche die Marke
   sonst mitten in der Belegnummer um. */
.task-card-docs,
.task-doc-chips { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.task-doc-chips:empty { display:none; }
.task-doc-chip {
  display:inline-flex; align-items:center; gap:4px; flex:none;
  /* --text und nicht --text-2 wie bei .ref-badge: die Marke ist ein Verweis,
     kein Etikett. #64748b auf #f1f5f9 sind 4,0:1 und damit unter der Grenze,
     ab der kleine Schrift lesbar bleibt. */
  font-size:12px; color:var(--text); background:var(--bg);
  border:1px solid var(--border); border-radius:4px; padding:3px 8px;
  white-space:nowrap; text-decoration:none;
}
a.task-doc-chip { cursor:pointer; }
a.task-doc-chip:hover { color:var(--primary); border-color:var(--primary); }
.task-doc-chip-x {
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; margin-left:2px;
  color:var(--text-3); cursor:pointer; line-height:0;
}
.task-doc-chip-x svg { width:12px; height:12px; }
.task-doc-chip-x:hover { color:var(--danger); }
.priority-badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; }

/* Progress bar */
.proj-progress { height:8px; background:var(--border); border-radius:4px; overflow:hidden; margin:8px 0; }
.proj-progress-fill { height:100%; background:var(--primary); border-radius:4px; transition:width .3s; }

/* Stat cards */
.proj-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:20px; }
.proj-stat-card { background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.proj-stat-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2); margin-bottom:4px; }
.proj-stat-value { font-size:22px; font-weight:700; color:var(--text); }

/* Comments */
.comment-item { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:12px 14px; margin-bottom:10px; }
.comment-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.comment-author { font-size:12px; font-weight:700; color:var(--text); }
.comment-time { font-size:11px; color:var(--text-3); }
.comment-body { font-size:14px; color:var(--text); line-height:1.5; white-space:pre-wrap; }

/* Milestone row */
.milestone-row { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--card); border:1px solid var(--border); border-radius:8px; margin-bottom:8px; }
.milestone-check { width:18px; height:18px; cursor:pointer; accent-color:var(--primary); }
.milestone-title { flex:1; font-size:14px; font-weight:500; }
.milestone-title.done { text-decoration:line-through; color:var(--text-3); }


/* ── BUCHHALTUNG ─────────────────────────────────────────────────────────── */

/* KPI Cards */
.buch-kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.buch-kpi-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px 20px; display:flex; align-items:center; gap:16px; }
.buch-kpi-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px; font-weight:800; }
.buch-kpi-label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2); margin-bottom:4px; }
.buch-kpi-value { font-size:22px; font-weight:800; color:var(--text); line-height:1.1; }
.buch-kpi-sub { font-size:12px; color:var(--text-3); margin-top:3px; }
.buch-kpi-sub.pos { color:var(--success); }
.buch-kpi-sub.neg { color:var(--danger); }
.buch-neg { color:var(--danger) !important; }

/* Main row layout */
.buch-main-row { display:grid; grid-template-columns:1fr 220px; gap:20px; align-items:start; }

/* Bar chart */
.buch-chart-card { padding:20px; }
.buch-chart { display:flex; align-items:flex-end; gap:6px; height:140px; padding-top:8px; }
.buch-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:0; }
.buch-bar-wrap { flex:1; width:100%; display:flex; align-items:flex-end; }
.buch-bar { width:100%; background:var(--primary); border-radius:4px 4px 0 0; position:relative; min-height:0; transition:height .3s; opacity:.85; }
.buch-bar:hover { opacity:1; }
.buch-bar-net { position:absolute; bottom:0; left:0; right:0; background:var(--primary); border-radius:4px 4px 0 0; opacity:1; }
.buch-bar { background: rgba(29,78,216,.35); }
.buch-bar-net { background:var(--primary); }
.buch-bar-label { font-size:10px; color:var(--text-3); margin-top:4px; white-space:nowrap; }
.buch-legend { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-2); margin-top:12px; }
.buch-legend-dot { display:inline-block; width:10px; height:10px; border-radius:2px; }

/* Side cards */
.buch-side-cards { display:flex; flex-direction:column; gap:16px; }
.buch-side-card { padding:18px; }
.buch-side-card.buch-warn { border-left:3px solid var(--danger); }
.buch-side-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2); margin-bottom:6px; }
.buch-side-value { font-size:24px; font-weight:800; color:var(--text); line-height:1; margin-bottom:4px; }
.buch-side-sub { font-size:12px; color:var(--text-3); }
.buch-side-overdue { font-size:12px; color:var(--danger); font-weight:600; margin-top:6px; }

/* EÜR summary */
.buch-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.buch-summary-card { padding:20px; }
.buch-summary-title { font-size:13px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; }
.buch-summary-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:14px; color:var(--text); }
.buch-summary-divider { border-top:2px solid var(--border); margin:8px 0; }

/* VAT */
.buch-rate-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; font-weight:700; background:var(--primary-light); color:var(--primary); }

/* Aging */
.buch-aging-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.buch-aging-card { padding:14px 16px; }
.buch-aging-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2); margin-bottom:6px; }
.buch-aging-value { font-size:18px; font-weight:700; color:var(--text); }

/* Expense categories */
.buch-cat-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; background:var(--bg); color:var(--text-2); border:1px solid var(--border); white-space:nowrap; }

/* Responsive */
@media (max-width:1100px) {
  .buch-kpi-grid { grid-template-columns:1fr 1fr; }
  .buch-aging-grid { grid-template-columns:1fr 1fr 1fr; }
}

.badge-channel {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--primary);
  color: #fff;
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.85;
  letter-spacing: 0.02em;
}

/* ── Inventur-Erfassung ──────────────────────────────────────────────────────
   Gezählt wird im Lager, am Tablet, mit vollen Händen. Deshalb große Ziel-
   flächen, ein sehr großes Zahlenfeld und Karten statt Tabelle: .data-table
   erzwingt min-width 480px mit Horizontalscroll und ist dafür untauglich. */
.inv-count-bar {
  position: sticky; top: 0; z-index: 20; background: var(--card, #fff);
  border-bottom: 1px solid var(--border); padding: 10px 0 12px; margin-bottom: 14px;
}
body.dark-mode .inv-count-bar { background: var(--card, #1e293b); }
.inv-progress { height: 8px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
.inv-progress > div { height: 100%; background: var(--primary); transition: width .25s ease; }
.inv-progress.done > div { background: var(--success, #16a34a); }
.inv-scan {
  width: 100%; font-size: 17px; height: 48px; padding: 0 14px;
  border: 2px solid var(--primary); border-radius: var(--radius, 8px);
}
.inv-scan:focus { outline: none; box-shadow: 0 0 0 3px rgba(29,78,216,.15); }
.inv-focus {
  border: 1px solid var(--border); border-radius: var(--radius, 8px);
  padding: 18px; background: var(--card, #fff); margin-bottom: 14px;
}
body.dark-mode .inv-focus { background: var(--card, #1e293b); }
.inv-focus h2 { font-size: 20px; margin: 0 0 4px; line-height: 1.25; }
.inv-meta { font-size: 13px; color: var(--text-2); display: flex; gap: 14px; flex-wrap: wrap; }
.inv-qty-row { display: flex; gap: 10px; align-items: stretch; margin-top: 16px; }
.inv-qty {
  flex: 1; font-size: 30px; font-weight: 600; height: 62px; text-align: center;
  border: 2px solid var(--border); border-radius: var(--radius, 8px); min-width: 0;
}
.inv-qty:focus { outline: none; border-color: var(--primary); }
/* Die Einheit steht als Platzhalter im Feld — bei 30 px wäre sie sonst so
   dominant wie eine eingetippte Zahl. */
.inv-qty::placeholder { font-size: 15px; font-weight: 400; color: var(--text-3); }
.inv-step {
  width: 62px; height: 62px; font-size: 26px; border: 1px solid var(--border);
  background: var(--bg-2); border-radius: var(--radius, 8px); cursor: pointer; flex-shrink: 0;
}
.inv-step:active { background: var(--border); }
.inv-result { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius, 8px); font-size: 14px; }
.inv-result.ok   { background: #dcfce7; color: #166534; }
.inv-result.diff { background: #fef3c7; color: #92400e; }
.inv-card {
  display: flex; gap: 12px; align-items: center; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: var(--radius, 8px); margin-bottom: 7px;
  cursor: pointer; background: var(--card, #fff);
}
body.dark-mode .inv-card { background: var(--card, #1e293b); }
.inv-card:hover { border-color: var(--primary); }
.inv-card.is-counted { opacity: .62; }
.inv-card.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(29,78,216,.12); }
.inv-card-main { flex: 1; min-width: 0; }
.inv-card-main strong { display: block; font-size: 14px; }
.inv-card-sub { font-size: 12px; color: var(--text-3); }
.inv-card-qty { font-size: 15px; font-weight: 600; white-space: nowrap; }
.inv-queue {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  background: #fef3c7; color: #92400e; border: 1px solid #f59e0b;
  border-radius: var(--radius, 8px); padding: 9px 13px; font-size: 13px;
  display: flex; gap: 10px; align-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
@media (max-width: 640px) {
  .inv-qty { font-size: 26px; height: 56px; }
  .inv-step { width: 54px; height: 56px; }
  .inv-focus { padding: 14px; }
}


/* ── Hinweiskästen und Sperrbanner (mit Dark-Mode-Variante) ─────────────── */
.locked-banner {
  background: var(--warning-bg); color: var(--warning); border: 1px solid #f59e0b;
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; font-weight: 600;
}
.warn-box {
  background: var(--warning-bg); color: var(--warning); border: 1px solid #f59e0b;
  border-radius: 6px; padding: 9px 11px; margin-bottom: 12px; font-size: 12.5px;
}
.info-box {
  background: var(--primary-light); color: var(--primary-dark); border: 1px solid var(--primary);
  border-radius: 6px; padding: 9px 11px; margin-bottom: 12px; font-size: 12.5px;
}
body.dark-mode .locked-banner, body.dark-mode .warn-box { background: #3b2a06; color: #fcd34d; border-color: #b45309; }
body.dark-mode .info-box { background: #1e3a5f; color: #bfdbfe; border-color: #3b82f6; }

/* ── Digitale Unterschrift ─────────────────────────────────────────────── */
.badge-pending { background: #fef3c7; color: #b45309; }
/* Rest der Rechnung — nur in der Kartenansicht schmaler Bildschirme (Mobilblock). */
.doc-rest-mobil { display: none; }
.sig-box { border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; background: var(--card, #fff); }
.sig-box.sig-ok { border-color: #86efac; background: #f0fdf4; }
.sig-box.sig-warn { border-color: #fcd34d; background: #fffbeb; }
.sig-box.sig-bad { border-color: #fca5a5; background: #fef2f2; }
.sig-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sig-title { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.sig-grid { display: grid; grid-template-columns: 170px 1fr; gap: 4px 14px; font-size: 12.5px; margin-top: 10px; }
.sig-grid b { color: var(--text-2); font-weight: 600; }
.sig-grid code { font-size: 11px; word-break: break-all; }
.sig-hist { margin-top: 10px; font-size: 12px; color: var(--text-2); }
.sig-hist li { margin: 2px 0 2px 16px; }
.sig-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 26px; letter-spacing: .35em; text-align: center; padding: 14px; border: 2px dashed #94a3b8; border-radius: 10px; margin: 10px 0; }

/* ── TO-DO (todo.js) ─────────────────────────────────────────────────────────
   Apple-Erinnerungen als Vorbild: links Ansichten und Listen, rechts die
   Aufgaben. Das Detailpanel liegt als Schublade über dem Inhalt — #page-
   container ist auf 1100 px begrenzt, eine dritte Spalte wäre dort zu eng. */
.nav-link { position: relative; }
.nav-badge {
  margin-left: auto; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.nav-badge[hidden] { display: none; }
.nav-badge.ueberfaellig { background: var(--danger); }
.nav-link.active .nav-badge { background: #fff; color: var(--primary); }
.nav-link.active .nav-badge.ueberfaellig { color: var(--danger); }

.todo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.todo-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; }
.todo-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.todo-kachel {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center;
  gap: 6px 8px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; cursor: pointer; text-align: left; color: var(--text); box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.todo-kachel:hover { border-color: var(--k); }
.todo-kachel:active { transform: scale(.98); }
.todo-kachel.aktiv { border-color: var(--k); box-shadow: 0 0 0 2px color-mix(in srgb, var(--k) 30%, transparent); }
.todo-kachel-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--k); color: #fff; display: grid; place-items: center; }
.todo-kachel-icon svg { width: 15px; height: 15px; }
.todo-kachel-zahl { justify-self: end; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.todo-kachel-name { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--text-2); }
.todo-listen-kopf { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; padding: 0 4px; }
.todo-listen { display: flex; flex-direction: column; gap: 2px; }
.todo-liste-eintrag, .todo-archiv-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  font-size: 14px; color: var(--text); background: none; border: none; width: 100%; text-align: left;
}
.todo-liste-eintrag:hover, .todo-archiv-link:hover { background: var(--card); }
.todo-liste-eintrag.aktiv, .todo-archiv-link.aktiv { background: var(--primary-light); font-weight: 600; }
.todo-liste-eintrag:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.todo-liste-eintrag.dragging { opacity: .5; }
.todo-liste-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-punkt { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.todo-zahl { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.todo-archiv-link { color: var(--text-2); border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; margin-top: 4px; padding-top: 12px; }
.todo-archiv-link svg { width: 16px; height: 16px; }
.todo-archiv-link span:nth-child(2) { flex: 1; }

.todo-main { min-width: 0; }
.todo-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.todo-kopf h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.todo-kopf-aktionen { display: flex; align-items: center; gap: 6px; }
.todo-suche { width: 200px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); color: var(--text); font-size: 13.5px; }

.todo-neu { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.todo-neu[hidden], .todo-marken[hidden] { display: none; }
.todo-neu:focus-within { border-color: var(--primary); }
.todo-neu input { flex: 1; border: none; background: none; padding: 4px 0; font-size: 15px; color: var(--text); outline: none; min-width: 0; }
.todo-marken { display: flex; flex-wrap: wrap; gap: 6px; min-height: 8px; margin: 8px 0 10px 4px; }
.todo-marke { font-size: 12px; padding: 2px 9px; border-radius: 10px; background: var(--primary-light); color: var(--primary-dark); }
.todo-marke.prioritaet { background: var(--warning-bg); color: var(--warning); }

.todo-gruppe { margin-bottom: 18px; }
.todo-gruppe-titel { font-size: 15px; font-weight: 700; margin: 14px 4px 6px; color: var(--text); }
.todo-gruppe-titel span { color: var(--text-3); font-weight: 500; font-size: 13px; margin-left: 4px; }
.todo-gruppe-titel.rot { color: var(--danger); }
.todo-liste-rows { background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }

.todo-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 10px 11px 14px;
  border-bottom: 1px solid var(--border); background: var(--card); overflow: hidden;
  transition: height .28s ease, padding .28s ease, opacity .2s ease, background .15s;
}
.todo-row:last-child { border-bottom: none; }
.todo-row:hover { background: color-mix(in srgb, var(--bg) 60%, var(--card)); }
.todo-row.offen { background: var(--primary-light); }
.todo-row.neu { animation: todoNeu .9s ease; }
.todo-row.weg { opacity: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; }
.todo-row.dragging { opacity: .5; }
.todo-row .drag-handle { margin-top: 2px; }
@keyframes todoNeu { from { background: var(--primary-light); } to { background: var(--card); } }

/* Der runde Knopf: leer ein Ring in Listenfarbe, erledigt gefüllt mit Häkchen. */
.todo-check {
  --p: var(--primary);
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  border: 2px solid color-mix(in srgb, var(--p) 55%, var(--text-3)); background: transparent;
  display: grid; place-items: center; cursor: pointer; padding: 0; color: #fff;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.todo-check svg { width: 13px; height: 13px; stroke-width: 3.2; opacity: 0; transform: scale(.4); transition: opacity .15s ease, transform .22s cubic-bezier(.34,1.56,.64,1); }
.todo-check:hover { border-color: var(--p); }
.todo-check:hover svg { opacity: .35; transform: scale(.85); color: var(--p); }
.todo-check:active { transform: scale(.88); }
.todo-check:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
.todo-check.an, .ist-erledigt > .todo-check { background: var(--p); border-color: var(--p); }
.todo-check.an svg, .ist-erledigt > .todo-check svg { opacity: 1; transform: scale(1); color: #fff; }
.todo-check.klein { width: 18px; height: 18px; }
.todo-check.klein svg { width: 11px; height: 11px; }
.todo-check-leer { border-style: dashed; cursor: default; }
.todo-check-leer:hover { border-color: color-mix(in srgb, var(--p) 55%, var(--text-3)); }

.todo-inhalt { flex: 1; min-width: 0; cursor: pointer; }
.todo-zeile-titel { display: flex; align-items: baseline; gap: 6px; font-size: 15px; line-height: 1.35; color: var(--text); }
.todo-text { overflow-wrap: anywhere; transition: color .2s; }
.ist-erledigt .todo-text, .im-archiv .todo-text { color: var(--text-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-3) 70%, transparent); }
.todo-prio { font-weight: 800; color: var(--warning); letter-spacing: -.05em; }
.todo-prio.p3 { color: var(--danger); }
.todo-flag { width: 14px; height: 14px; color: #ea580c; flex-shrink: 0; align-self: center; margin-left: 2px; }
.todo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; font-size: 12.5px; color: var(--text-2); }
.todo-meta svg { width: 13px; height: 13px; vertical-align: -2px; }
.todo-datum.rot { color: var(--danger); font-weight: 600; }
.todo-datum.heute { color: var(--primary); font-weight: 600; }
.todo-listchip { display: inline-flex; align-items: center; gap: 5px; }
.todo-listchip .todo-punkt { width: 8px; height: 8px; }
.todo-beleg { background: var(--primary-light); color: var(--primary-dark); border: none; border-radius: 5px; padding: 1px 7px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.todo-beleg:hover { text-decoration: underline; }
.todo-fortschritt { font-variant-numeric: tabular-nums; }
.todo-kinder { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.todo-kind { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text); }
.todo-kind.fertig span, .todo-kind.fertig input { color: var(--text-3); text-decoration: line-through; }
.todo-mehr { opacity: 0; transition: opacity .15s; flex-shrink: 0; }
.todo-row:hover .todo-mehr, .todo-mehr:focus-visible, .todo-mehr[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .todo-mehr { opacity: .7; } }

.todo-leer { text-align: center; padding: 56px 20px; color: var(--text-3); }
.todo-leer svg { width: 40px; height: 40px; stroke-width: 1.5; margin-bottom: 8px; }
.todo-leer p { font-size: 14px; }

/* Rückgängig-Toast */
.todo-toast { gap: 14px; }
.todo-toast-knopf { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 4px 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.todo-toast-knopf:hover { background: rgba(255,255,255,.3); }

/* ── To-do: Apple-Bedienung (10/2026) ─────────────────────────────────────── */
/* Kachel „Erledigt" über die ganze Breite, flach. */
.todo-kachel[data-ansicht="erledigt"] { grid-column: 1 / -1; grid-template-columns: auto 1fr auto; grid-template-rows: auto; }
.todo-kachel[data-ansicht="erledigt"] .todo-kachel-name { grid-column: auto; grid-row: 1; grid-column-start: 2; }
.todo-kachel[data-ansicht="erledigt"] .todo-kachel-zahl { grid-column-start: 3; grid-row: 1; font-size: 16px; color: var(--text-2); }
.todo-kachel[data-ansicht="erledigt"] .todo-kachel-icon { width: 24px; height: 24px; }

/* Schnelleingabe: Vorschläge sind Knöpfe — antippen lässt das Wort im Titel. */
button.todo-marke { border: none; cursor: pointer; font-family: inherit; }
button.todo-marke:hover { filter: brightness(.96); }
.todo-marke.liste { background: var(--success-bg); color: var(--success); }
.todo-marke.aus { background: none; color: var(--text-3); text-decoration: line-through; box-shadow: inset 0 0 0 1px var(--border); }
.todo-neu-hilfe { font-size: 12px; color: var(--text-3); }

/* Erledigte je Liste einblenden. */
.todo-erledigt-fuss { display: flex; align-items: center; gap: 14px; padding: 4px 6px 16px; font-size: 13px; color: var(--text-3); }
.todo-erledigt-fuss > span { flex: 1; }
.todo-link-knopf { background: none; border: none; padding: 4px 2px; color: var(--primary); font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; }
.todo-link-knopf:hover { text-decoration: underline; }
.todo-link-knopf[hidden] { display: none; }
.todo-gruppe-erledigt .todo-gruppe-titel { color: var(--text-3); }
.todo-row.wird-geoeffnet > .todo-check { background: transparent; }
.todo-row.wird-geoeffnet > .todo-check svg { opacity: 0; }
.todo-row.wird-geoeffnet .todo-text { color: var(--text); text-decoration: none; }

/* Unteraufgaben auf-/zuklappen. */
.todo-aufklappen { display: inline-flex; align-items: center; gap: 3px; border: none; background: none; padding: 0 2px; color: inherit; font: inherit; cursor: pointer; font-variant-numeric: tabular-nums; }
.todo-aufklappen svg { width: 11px; height: 11px; transition: transform .15s; }
.todo-aufklappen.auf svg { transform: rotate(90deg); }
.todo-aufklappen:hover { color: var(--primary); }

/* Links in To-dos: im Titel unterstrichen, aus der Notiz als Chip. */
.todo-a { color: var(--primary); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent); text-underline-offset: 2px; overflow-wrap: anywhere; }
.todo-a:hover { text-decoration-color: var(--primary); }
.im-archiv .todo-a, .todo-kind.fertig .todo-a { color: inherit; }
.todo-linkchip { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; color: var(--primary); text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.todo-linkchip:hover { text-decoration: underline; }
.todo-linkchip svg { width: 12px; height: 12px; flex-shrink: 0; }
.td-linkliste { display: flex; flex-wrap: wrap; gap: 6px; }
/* Platz für die Scrollleiste immer freihalten: sonst wird das Panel nach dem
   Messen der Notizhöhe schmaler, lange Links brechen neu um und die letzte
   Zeile verschwindet unter dem Rand. */
.td-inhalt { scrollbar-gutter: stable; }
/* Im Panel nichts stauchen — es scrollt. Sonst schrumpfte das Notizfeld,
   sobald das Panel länger als der Bildschirm war, und Text verschwand. */
.td-inhalt > * { flex-shrink: 0; }
.td-linkliste:empty { display: none; }
.todo-linkchip.gross { max-width: 100%; box-sizing: border-box; font-size: 13px; padding: 4px 10px; border-radius: 14px; background: var(--primary-light); }

/* Inline umbenennen. */
.todo-inline { flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--text); border: none; border-bottom: 1px solid var(--primary); background: none; padding: 0; outline: none; }

/* Wischen (Handy): Aktionen liegen hinter der Zeile. */
.todo-row { position: relative; }
.todo-wisch { position: absolute; inset: 0; pointer-events: none; --dx: 0px; }
.todo-wisch-links, .todo-wisch-rechts { position: absolute; top: 0; bottom: 0; display: flex; overflow: hidden; pointer-events: auto; }
.todo-wisch-links { left: 0; width: max(var(--dx), 0px); background: var(--success); color: #fff; align-items: center; gap: 6px; padding-left: 0; font-size: 13px; font-weight: 600; }
.todo-wisch-links svg { width: 18px; height: 18px; margin-left: 16px; flex-shrink: 0; }
.todo-wisch-links span { white-space: nowrap; }
.todo-wisch-rechts { right: 0; width: max(calc(var(--dx) * -1), 0px); }
.todo-wisch-rechts button { flex: 1; border: none; color: #fff; font-size: 13px; font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; cursor: pointer; }
.todo-wisch-markieren { background: #ea580c; }
.todo-wisch-loeschen { background: var(--danger); }

/* Detailpanel: Kopf mit Liste, Zeilen mit Symbol und Schalter wie bei Apple. */
.td-kopf { align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 0 22px; }
.td-kopf-liste { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); font-weight: 600; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.td-label { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.td-label small { color: var(--primary); font-size: 12.5px; }
.td-ico { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.td-ico svg { width: 14px; height: 14px; }
.td-ico.rot { background: #dc2626; }
.td-ico.orange { background: #ea580c; }
.td-schalter.gruen input:checked + span { background: var(--success); }
.td-ausklapp { border-bottom: 1px solid var(--border); padding: 4px 0 2px; }
.td-ausklapp .td-datum { padding: 4px 0 8px; }
.td-ausklapp .td-schnell { border-bottom: none; }
.td-ausklapp .td-zeile { border-bottom: none; border-top: 1px solid var(--border); }
.td-chip.an { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); }
.td-verknuepfen { margin-top: -6px; }
.td-verknuepfen .td-suche-wrap[hidden] { display: none; }

/* Freigaben (todo.js): Personensymbol, Auswahlmodus, Verwaltung */
.todo-nav-fuss { display: flex; flex-direction: column; }
.todo-freigaben-link { border-top: none; margin-top: 0; padding-top: 8px; border-radius: 8px; }
.todo-geteilt { display: inline-flex; align-items: center; color: var(--primary); flex-shrink: 0; }
.todo-geteilt svg { width: 14px; height: 14px; }
.todo-meta .todo-geteilt svg { width: 13px; height: 13px; }
.todo-auswahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; margin: 0 0 10px; background: var(--primary-light); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 10px; position: sticky; top: 0; z-index: 2; }
.todo-auswahl[hidden] { display: none; }
.todo-auswahl-zahl { flex: 1; min-width: 140px; font-size: 13.5px; font-weight: 600; color: var(--primary-dark); }
.todo-auswahl .btn svg { width: 14px; height: 14px; vertical-align: -2px; }
.todo-waehlen { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; cursor: pointer; }
.todo-waehlen input { width: 18px; height: 18px; cursor: pointer; }
.todo-row.gewaehlt { background: var(--primary-light); }

.fg-was { margin: 0 0 12px; font-size: 14px; }
.fg-personen { display: flex; flex-direction: column; gap: 6px; }
.fg-person, .modal-form label.fg-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.modal-form label.fg-check { display: flex; }
.fg-person:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.fg-person small { color: var(--text-3); }
.fg-person .rot, .td-fg .rot { color: var(--danger); }
.modal-form label.fg-person, .modal-form label.fg-check { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--text); margin: 0; }
.fg-person input, .fg-check input { width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
.fg-person > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fg-inhalt-kurz { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.fg-listen { display: flex; flex-direction: column; gap: 6px; }
.fg-listen .fg-check { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; }
.fg-listen .fg-check:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.fg-schon { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; margin-bottom: 12px; border-radius: 8px; background: var(--primary-light); color: var(--primary-dark); font-size: 13px; }
.fg-schon svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.fg-bestehend { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.fg-bestehend > summary { cursor: pointer; font-size: 13.5px; color: var(--primary); font-weight: 500; padding: 2px 0 8px; }
.modal-form label small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-3); }
#fg-neu[hidden], .fg-senden-wrap[hidden] { display: none; }
.fg-senden-wrap { display: flex; align-items: flex-end; padding-bottom: 8px; }
.fg-hinweis { font-size: 12.5px; color: var(--text-3); margin: 6px 0 0; }
.fg-ok { color: var(--success); }
.fg-link-feld { display: flex; gap: 8px; margin: 10px 0; }
.fg-link-feld input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.fg-link-feld .btn svg, .fg-aktionen .btn svg, .td-fg-knopf svg { width: 14px; height: 14px; vertical-align: -2px; }

.fg-karte { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.fg-karte.gesperrt, .fg-karte.abgelaufen { opacity: .75; }
.fg-kopf { display: flex; align-items: center; gap: 10px; }
.fg-name { font-size: 16px; font-weight: 700; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fg-zustand { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 10px; background: var(--success-bg, #dcfce7); color: var(--success); }
.fg-zustand.gesperrt { background: var(--danger-bg, #fee2e2); color: var(--danger); }
.fg-zustand.abgelaufen { background: var(--warning-bg); color: var(--warning); }
.fg-info { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: var(--text-2); margin: 4px 0 10px; }
.fg-inhalt { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fg-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 4px 2px 10px; border: 1px solid var(--border); border-radius: 14px; font-size: 13px; background: var(--bg); overflow-wrap: anywhere; }
.fg-chip.fertig { color: var(--text-3); text-decoration: line-through; }
.fg-chip .btn-icon { width: 22px; height: 22px; padding: 3px; }
.fg-chip .btn-icon svg { width: 12px; height: 12px; }
.fg-leer, .td-fg-leer { font-size: 13px; color: var(--text-3); }
.fg-aktionen { display: flex; flex-wrap: wrap; gap: 6px; }
.fg-verlauf { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.fg-verlauf[hidden] { display: none; }
.fg-zeile { font-size: 12.5px; color: var(--text-2); display: flex; gap: 8px; overflow-wrap: anywhere; }
.fg-wann { color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.td-fg { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 3px 0; }
.td-fg > span:nth-child(2) { flex: 1; min-width: 0; }
.td-fg small { color: var(--text-3); }
.td-fg-knopf { margin-top: 6px; }
.td-verlauf { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.td-verlauf-titel { font-size: 11.5px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }

/* Listen-Dialog: Farbwahl */
.todo-farben { display: flex; flex-wrap: wrap; gap: 10px; }
.todo-farbe { cursor: pointer; }
.todo-farbe input { position: absolute; opacity: 0; pointer-events: none; }
.todo-farbe span { display: block; width: 28px; height: 28px; border-radius: 50%; background: var(--f); box-shadow: 0 0 0 2px var(--card), 0 0 0 2px transparent; transition: box-shadow .15s; }
.todo-farbe input:checked + span { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--f); }
.todo-farbe input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 4px; }

/* Detailpanel als Schublade */
.todo-detail {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw; z-index: 900;
  background: var(--card); border-left: 1px solid var(--border); box-shadow: -8px 0 30px rgba(0,0,0,.12);
  display: flex; flex-direction: column; animation: todoPanel .22s ease;
}
.todo-detail[hidden] { display: none; }
@keyframes todoPanel { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.td-kopf { display: flex; justify-content: flex-end; padding: 10px 12px 0; }
.td-inhalt { flex: 1; overflow-y: auto; padding: 4px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.td-titel, .td-notiz { width: 100%; border: none; background: none; resize: none; color: var(--text); font-family: inherit; outline: none; overflow: hidden; }
.td-titel { font-size: 20px; font-weight: 700; line-height: 1.3; }
.td-notiz { font-size: 14px; color: var(--text-2); min-height: 44px; }
.td-titel:focus, .td-notiz:focus { background: var(--bg); border-radius: 6px; }
.td-block { border: 1px solid var(--border); border-radius: 10px; padding: 4px 14px; }
.td-block-titel { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); padding: 10px 0 6px; }
.td-block-titel span { color: var(--text-3); margin-left: 4px; }
.td-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.td-zeile:last-child { border-bottom: none; }
.td-zeile > label, .td-zeile > span { color: var(--text); }
.td-zeile select { max-width: 60%; }
.td-datum { display: flex; gap: 6px; align-items: center; }
.td-datum input[type="date"] { width: 150px; }
.td-datum input[type="time"] { width: 100px; }
.td-intervall { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.td-intervall input { width: 64px; }
.td-schnell { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 10px; border-bottom: 1px solid var(--border); }
.td-chip { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 14px; padding: 3px 11px; font-size: 12.5px; cursor: pointer; }
.td-chip:hover { border-color: var(--primary); color: var(--primary); }
.td-segment { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.td-segment button { border: none; background: none; padding: 5px 11px; font-size: 13px; cursor: pointer; color: var(--text); border-right: 1px solid var(--border); font-weight: 700; }
.td-segment button:first-child { font-weight: 500; }
.td-segment button:last-child { border-right: none; }
.td-segment button.an { background: var(--primary); color: #fff; }
.td-schalter { position: relative; width: 42px; height: 24px; cursor: pointer; flex-shrink: 0; }
.td-schalter input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.td-schalter span { position: absolute; inset: 0; border-radius: 12px; background: var(--border); transition: background .18s; pointer-events: none; }
.td-schalter span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; }
.td-schalter input:checked + span { background: #ea580c; }
.td-schalter input:checked + span::after { transform: translateX(18px); }
.td-schalter input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.td-links { display: flex; flex-wrap: wrap; gap: 6px; }
.td-link { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; }
.td-link .btn-icon { width: 24px; height: 24px; }
.td-link .btn-icon svg { width: 13px; height: 13px; }
.td-suche-wrap { position: relative; padding: 8px 0 12px; }
.td-suche-wrap input { width: 100%; }
.td-treffer { position: absolute; left: 0; right: 0; top: calc(100% - 8px); z-index: 5; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md); max-height: 260px; overflow-y: auto; }
.td-treffer[hidden] { display: none; }
.td-treffer button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: none; background: none; cursor: pointer; font-size: 13.5px; color: var(--text); }
.td-treffer button:hover, .td-treffer button:focus-visible { background: var(--primary-light); }
.td-treffer small { color: var(--text-3); margin-left: 4px; }
.td-treffer-leer { padding: 10px 12px; color: var(--text-3); font-size: 13px; }
.td-kinder { display: flex; flex-direction: column; }
.td-kinder .todo-kind { padding: 5px 0; }
.td-kinder .todo-kind input { flex: 1; border: none; background: none; padding: 2px 0; font-size: 14px; color: var(--text); min-width: 0; }
.td-kinder .todo-kind input:focus { outline: none; border-bottom: 1px solid var(--primary); }
.td-kinder .btn-icon { width: 26px; height: 26px; opacity: .5; }
.td-kinder .btn-icon:hover { opacity: 1; }
.td-kind-neu { width: 100%; border: none !important; background: none !important; padding: 8px 0 12px 27px !important; font-size: 14px; color: var(--text); }
.td-kind-neu:focus { outline: none; }
.td-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-3); margin-top: auto; padding-top: 6px; }
.td-loeschen { color: var(--danger) !important; }
.td-loeschen svg { width: 14px; height: 14px; }

/* Übersicht: To-dos heute */
.todo-dash { margin-top: 20px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.todo-dash-kopf { display: flex; align-items: center; gap: 8px; padding: 10px 14px 10px 18px; font-weight: 600; font-size: 13.5px; border-bottom: 1px solid var(--border); background: var(--bg); }
.todo-dash-kopf > svg { width: 16px; height: 16px; color: var(--primary); }
.todo-dash-kopf > span { flex: 1; }
.todo-dash-kopf .rot { color: var(--danger); }
.todo-dash-zeile { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--border); font-size: 14px; overflow: hidden; transition: height .28s ease, padding .28s ease, opacity .2s; }
.todo-dash-zeile:last-child { border-bottom: none; }
.todo-dash-zeile.weg { opacity: 0; padding-top: 0; padding-bottom: 0; }
.todo-dash-zeile .todo-check { margin-top: 0; }
.todo-dash-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-dash-zeile.ist-erledigt .todo-dash-titel { color: var(--text-3); text-decoration: line-through; }
.todo-dash-zeile .todo-datum { font-size: 12.5px; color: var(--text-2); }
.todo-dash-mehr { padding: 8px 18px; font-size: 12.5px; color: var(--text-3); }

body.dark-mode .todo-detail { box-shadow: -8px 0 30px rgba(0,0,0,.5); }
body.dark-mode .todo-row.offen { background: var(--primary-light); }
body.dark-mode .nav-link.active .nav-badge { color: var(--sidebar-active); }

/* Tablet: Seitenleiste nur mit Symbolen — Marke als Punkt am Symbol. */
@media (min-width: 768px) and (max-width: 1180px) {
  .nav-badge { position: absolute; top: 3px; right: 8px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; margin: 0; }
  .todo { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 1023px) {
  .todo-detail { width: 360px; }
}
/* Handy: Listen als waagerechte Leiste, Panel als Vollbild. */
@media (max-width: 767px) {
  .todo { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .todo-nav { position: static; gap: 10px; }
  .todo-kacheln { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .todo-kachel[data-ansicht="erledigt"] { grid-column: auto; grid-template-columns: 1fr; grid-template-rows: auto; }
  .todo-kachel[data-ansicht="erledigt"] .todo-kachel-name, .todo-kachel[data-ansicht="erledigt"] .todo-kachel-zahl { grid-column: auto; grid-row: auto; }
  .todo-kachel[data-ansicht="erledigt"] .todo-kachel-zahl { font-size: 17px; color: var(--text); }
  .todo-kachel[data-ansicht="erledigt"] .todo-kachel-icon { width: 24px; height: 24px; }
  .todo-neu-hilfe { display: none; }
  .todo-detail .td-titel { font-size: 20px !important; }
  .todo-kachel { padding: 8px; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 2px; }
  .todo-kachel-zahl { justify-self: center; font-size: 17px; }
  .todo-kachel-icon { width: 24px; height: 24px; }
  .todo-kachel-name { font-size: 11.5px; }
  .todo-listen-kopf { display: none; }
  .todo-listen { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 2px; scrollbar-width: none; }
  .todo-listen::-webkit-scrollbar { display: none; }
  .todo-liste-eintrag { width: auto; flex-shrink: 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); font-size: 13.5px; }
  .todo-liste-name { max-width: 140px; }
  .todo-archiv-link { width: auto; align-self: flex-start; border-top: none; margin: 0; padding: 4px 6px; font-size: 13.5px; }
  .todo-nav-fuss { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
  .fg-link-feld { flex-direction: column; }
  .todo-kopf h1 { font-size: 22px; }
  .todo-kopf-aktionen { width: 100%; }
  .todo-suche { flex: 1; width: auto; }
  .todo-neu input { font-size: 16px; }
  .todo-detail { width: 100vw; border-left: none; }
  .td-inhalt { padding: 4px 16px 24px; }
  .td-datum input[type="date"] { width: 140px; }
  .td-zeile { flex-wrap: wrap; }
  .todo-dash-kopf { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .todo-row, .todo-dash-zeile, .todo-check, .todo-check svg, .todo-detail, .td-schalter span, .td-schalter span::after { transition: none !important; animation: none !important; }
}

/* ── Verträge (vertraege.js) ─────────────────────────────────────────────── */
.vt-intro { color: var(--text-3); font-size: 13px; margin: -8px 0 16px; max-width: 900px; }
.vt-kacheln .stat-value.vt-klein { font-size: 22px; }
.vt-kacheln .rot, .vt-tabelle .rot { color: var(--danger); font-weight: 600; }
.vt-block { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px; overflow: hidden; }
.vt-block.faellig { border-left: 4px solid var(--warning); }
.vt-block h2 { font-size: 14px; font-weight: 700; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
.vt-block h2 span { color: var(--text-3); font-weight: 500; margin-left: 4px; }
.vt-termin { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.vt-termin:last-child { border-bottom: none; }
.vt-termin-text { flex: 1; min-width: 180px; font-size: 14px; }
.vt-betrag { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.vt-grau { color: var(--text-3); font-size: 12.5px; font-weight: 400; }
.vt-filter { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; flex-wrap: wrap; }
.vt-filter select { width: auto; min-width: 200px; }
.vt-sortierung { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); margin: 0; }
.vt-sortierung select { min-width: 230px; }
@media (max-width: 767px) { .vt-filter > select, .vt-sortierung, .vt-sortierung select { flex: 1 1 100%; width: 100%; min-width: 0; } }
.vt-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; cursor: pointer; }
.vt-check input { width: auto; }
.vt-zeile { cursor: pointer; }
.vt-zeile:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.vt-leer { text-align: center; padding: 34px 16px; color: var(--text-3); }
.vt-leer.rot { color: var(--danger); }
.vt-leer .btn { margin-left: 8px; }
.vt-gruppe { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.vt-gruppe small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-3); }
.vt-vorschau { font-size: 13px; color: var(--text-2); background: var(--primary-light); border-radius: 8px; padding: 9px 12px; margin-top: 8px; }
.vt-vorschau:empty { display: none; }
.vt-form-aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.vt-form-aktionen .btn svg { width: 14px; height: 14px; vertical-align: -2px; }
.vt-verlauf-zeile { display: grid; grid-template-columns: 100px 100px 1fr; gap: 8px; font-size: 13px; padding: 3px 0; }
.vt-modal-text { font-size: 14px; margin: 0 0 12px; }
@media (max-width: 767px) {
  .vt-knoepfe { width: 100%; }
  .vt-knoepfe .btn { flex: 1; }
  .vt-filter select { min-width: 0; flex: 1; }
}

/* Freigabe: iPhone-Zugang */
.fg-iphone.an { color: var(--success); }
.fg-aktionen .btn svg, .fg-iphone-knoepfe .btn svg { width: 14px; height: 14px; vertical-align: -2px; }
.fg-iphone-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fg-iphone-daten { display: grid; gap: 6px; margin: 12px 0; padding: 12px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); }
.fg-iphone-daten div { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.fg-iphone-daten span { width: 110px; font-size: 12.5px; color: var(--text-2); }
.fg-iphone-daten code { font-size: 14px; font-weight: 600; user-select: all; overflow-wrap: anywhere; }
.fg-iphone-schritte { margin: 0 0 10px; padding-left: 20px; font-size: 13px; line-height: 1.7; }
.fg-iphone-schritte small { color: var(--text-3); }

/* ── Versand-Pop-up am Briefsymbol der Belegliste ─────────────────────────── */
.btn-icon.versendet { color: var(--success); }
#versand-karte {
  position: fixed; z-index: 3000; max-width: min(320px, calc(100vw - 16px));
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-md); padding: 10px 12px;
  font-size: 12.5px; line-height: 1.45; pointer-events: none;
}
#versand-karte[hidden] { display: none; }
#versand-karte .vk-titel { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--success); margin-bottom: 6px; }
#versand-karte .vk-titel svg { width: 14px; height: 14px; flex-shrink: 0; }
#versand-karte .vk-zeile { display: flex; flex-wrap: wrap; column-gap: 6px; padding: 3px 0; border-top: 1px solid var(--border); }
#versand-karte .vk-zeile:first-of-type { border-top: 0; }
#versand-karte .vk-art { color: var(--text-2); }
#versand-karte .vk-art::before { content: '·'; margin-right: 6px; color: var(--text-3); }
#versand-karte .vk-an { flex-basis: 100%; color: var(--text-2); overflow-wrap: anywhere; }
#versand-karte .vk-mehr { margin-top: 4px; color: var(--text-3); font-size: 11.5px; }
.mail-schon-versendet {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 8px 10px;
  border-radius: 8px; background: var(--success-bg); color: var(--success); font-size: 13px;
}
.mail-schon-versendet svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.vt-auto { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 6px; line-height: 1.4;
  text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; color: var(--text); }
.vt-auto small { font-weight: 400; font-size: 12.5px; }
.vt-auto input { margin-top: 3px; flex-shrink: 0; }

/* Steuer-Prognose: was die Rücklage nicht enthält (Kapitalgesellschaft) */
.buch-nicht-enthalten { margin-top: 20px; padding: 16px 20px; border-left: 4px solid var(--warning); }
.buch-nicht-enthalten ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.buch-nicht-enthalten li { margin-bottom: 4px; }

/* ── Zahllink-Fenster (Online bezahlen) ─────────────────────────────────── */
.zl { display: flex; flex-direction: column; gap: 14px; }
.zl-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.zl-info { min-width: 0; }
.zl-label { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zl-betrag { font-size: 28px; font-weight: 700; line-height: 1.2; margin: 2px 0; font-variant-numeric: tabular-nums; }
.zl-sub { font-size: 12.5px; color: var(--text-2); }
.zl-qr { flex-shrink: 0; width: 104px; height: 104px; padding: 6px; background: #fff; border-radius: 8px; border: 1px solid var(--border); }
.zl-link { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px;
  border: 1px solid var(--border); border-radius: 10px; }
.zl-url { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; }
.zl-hinweis { font-size: 13px; color: var(--text-2); padding: 10px 12px; border-radius: 10px; background: var(--bg); }
.zl-aktionen { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.zl-aktionen .btn { justify-content: center; gap: 6px; text-decoration: none; }
.zl-aktionen .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.zl-fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-3); border-top: 1px solid var(--border); padding-top: 12px; }
.zl-neu { background: none; border: 0; padding: 0; font-size: 12px; color: var(--text-2); text-decoration: underline; cursor: pointer; }
.zl-neu:hover { color: var(--danger, #dc2626); }
@media (max-width: 520px) {
  .zl-kopf { flex-direction: column-reverse; align-items: flex-start; }
  .zl-aktionen { grid-template-columns: 1fr; }
}

/* ── Belege einlesen (Stapel-Import mit Drag & Drop) ─────────────────────── */
#modal-box.modal-beleg { max-width: 780px; }
.beleg-drop {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 26px 16px; border: 2px dashed var(--border); border-radius: 10px;
  background: var(--bg); color: var(--text-2); cursor: pointer; transition: border-color .15s, background .15s;
}
.beleg-drop strong { color: var(--text); font-size: 15px; }
.beleg-drop span { font-size: 12.5px; }
.beleg-drop:hover, .beleg-drop:focus-visible, .beleg-drop.aktiv { border-color: var(--primary); background: var(--primary-light); outline: none; }
.beleg-drop-icon { font-size: 26px; line-height: 1; color: var(--primary); }
.beleg-liste { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; }
.beleg-liste:empty { display: none; }
.beleg-zeile {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px;
}
.beleg-zeile.aktiv { border-color: var(--primary); background: var(--primary-light); }
.beleg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beleg-fehler { grid-column: 1 / -1; color: var(--danger); font-size: 12px; }
.beleg-karte { margin-top: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.beleg-karte-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; font-size: 13px; }
.beleg-karte-kopf span { color: var(--text-2); }
.beleg-warn {
  background: var(--warning-bg); color: var(--warning); border: 1px solid #f59e0b;
  padding: 8px 11px; border-radius: 6px; margin-bottom: 8px; font-size: 12.5px; line-height: 1.45;
}
.beleg-felder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
#bp-anlage-felder { grid-template-columns: repeat(2, 1fr); margin-top: 10px; }
#bp-anlage-felder[hidden] { display: none; }
.beleg-frage { margin: 6px 0 0; padding: 12px 14px; border: 1.5px solid var(--primary); border-radius: 8px; }
.beleg-frage legend { padding: 0 6px; font-weight: 700; font-size: 13.5px; }
.beleg-frage label { display: flex; align-items: center; gap: 8px; margin: 4px 0; cursor: pointer; font-size: 13.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text); }
.beleg-ki-empf { margin-top: 8px; font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.beleg-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* Rechnungs-Posteingang */
.beleg-mail {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-bottom: 10px; padding: 8px 11px;
  border-radius: 6px; background: var(--bg); font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere;
}
.beleg-mail a { margin-left: auto; font-weight: 600; white-space: nowrap; }
.beleg-verwerfen { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 12px; padding: 10px 11px;
  border: 1px solid var(--danger); border-radius: 6px; }
.beleg-verwerfen[hidden] { display: none; }
.beleg-verwerfen label { margin: 0; }
.beleg-verwerfen input { flex: 1 1 220px; }
.posteingang-hinweis { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  padding: 12px 16px; margin-bottom: 16px; border-left: 4px solid var(--primary); font-size: 13.5px; }
.posteingang-zahl { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px;
  background: #fff; color: var(--primary); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.amazon-hinweis { border-left-color: #f59e0b; }
.amz-zeile { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); }
.amz-info { flex: 1 1 260px; min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.amz-info div { font-size: 12.5px; color: var(--text-2); }
.amz-status { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.amz-ok { color: var(--success); }
.amz-fehlt { color: var(--danger); }
.amz-wartet { color: #b45309; }
.postfach-zeile { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.postfach-info { min-width: 0; flex: 1 1 260px; line-height: 1.5; overflow-wrap: anywhere; }
.postfach-info div { font-size: 12.5px; color: var(--text-2); }
.postfach-knoepfe { display: flex; gap: 6px; align-items: center; }
.beleg-fertig { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: var(--success-bg); color: var(--success); font-size: 13px; }
@media (max-width: 640px) {
  .beleg-felder { grid-template-columns: 1fr 1fr; }
  #bp-anlage-felder { grid-template-columns: 1fr; }
  #bp-methode-info { grid-column: auto !important; }
}
.beleg-drop.kompakt { flex-direction: row; justify-content: center; gap: 10px; padding: 10px 14px; }
.beleg-drop.kompakt .beleg-drop-icon { font-size: 18px; }
.beleg-drop.kompakt strong { font-size: 13.5px; }
.beleg-drop.kompakt span { display: none; }
/* DATEV-Übermittlung (Ausgaben, Sammelversand) */
.datev-ok { display: inline-block; font-size: 11px; font-weight: 600; color: var(--success); background: var(--success-bg); padding: 1px 7px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.datev-knopf { padding: 2px 8px !important; font-size: 11.5px !important; }
.beleg-auto-datev, .datev-alle { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text); cursor: pointer; }
.datev-liste { margin-top: 8px; max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.datev-zeile { display: grid; grid-template-columns: auto 90px 1fr auto minmax(90px, auto); gap: 10px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--border); font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); margin: 0; cursor: pointer; }
.datev-zeile:last-child { border-bottom: 0; }
.datev-zeile.gesperrt { color: var(--text-3); cursor: default; }
.datev-stand { font-size: 12px; color: var(--text-3); text-align: right; }
@media (max-width: 640px) { .datev-zeile { grid-template-columns: auto 1fr; } .datev-zeile > span:nth-child(2), .datev-zeile .num { display: none; } }

/* ── Buchhaltung: Cockpit und Monatsabschluss ───────────────────────────── */
.cockpit-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.cockpit-kachel { padding: 16px 18px; }
.cockpit-k-label { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.cockpit-k-wert { font-size: 24px; font-weight: 800; margin-top: 6px; }
.cockpit-k-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; line-height: 1.4; }
.cockpit-raster { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.cockpit-titel { font-weight: 700; font-size: 13.5px; margin-bottom: 10px; }
.cockpit-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 150px; align-items: end; }
.cockpit-monat { display: flex; flex-direction: column; align-items: center; height: 100%; }
.cockpit-balken { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.cockpit-balken span { width: 42%; min-height: 1px; border-radius: 3px 3px 0 0; }
.cockpit-monat-label { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.cockpit-kat { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 8px; align-items: center; font-size: 12.5px; margin: 4px 0; }
.cockpit-kat-bar { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.cockpit-kat-bar i { display: block; height: 100%; background: #f59e0b; }
.cockpit-frist { display: grid; grid-template-columns: 90px 1fr; gap: 8px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.cockpit-frist em { color: var(--text-3); font-style: normal; }
.cockpit-pruef { font-size: 12.5px; padding: 7px 10px; border-radius: 6px; margin: 4px 0; line-height: 1.45; }
.cockpit-pruef[role="button"] { cursor: pointer; }
.cockpit-pruef-art { display: inline-block; min-width: 46px; font-weight: 700; text-transform: uppercase; font-size: 10.5px; letter-spacing: .04em; }
.abschluss-punkt { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.abschluss-symbol { font-weight: 800; text-align: center; }
.abschluss-punkt.ok .abschluss-symbol { color: var(--success); }
.abschluss-punkt.offen .abschluss-symbol { color: var(--danger); }
.abschluss-punkt.hinweis .abschluss-symbol { color: var(--warning); }
@media (max-width: 900px) { .cockpit-raster { grid-template-columns: 1fr; } }
/* Viele Reiter (Buchhaltung): waagerecht scrollen statt abschneiden */
#buch-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
#buch-tabs .proj-tab { white-space: nowrap; flex-shrink: 0; }
/* Suche in den Ausgaben */
.ausgaben-suche { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px solid var(--border); }
.ausgaben-suche input[type="search"] { flex: 1 1 320px; max-width: 520px; }
.ausgaben-suche label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-2); cursor: pointer; }
.ausgaben-zaehler { margin-left: auto; font-size: 12.5px; color: var(--text-3); }
.ausgaben-suche input[type="search"] {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 13.5px;
  background: var(--card); color: var(--text);
}
.ausgaben-suche input[type="search"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.cockpit-pruef[role="button"] { display: flex; align-items: baseline; gap: 6px; transition: filter .12s, box-shadow .12s; }
.cockpit-pruef[role="button"]:hover, .cockpit-pruef[role="button"]:focus-visible { filter: brightness(.96); box-shadow: inset 0 0 0 1.5px currentColor; outline: none; }
.cockpit-pruef-oeffnen { margin-left: auto; white-space: nowrap; font-weight: 700; font-size: 11.5px; opacity: .8; padding-left: 8px; }

/* ── Einstellungen: Seitenleiste mit Bereichen, Suche, Unterseite ─────────── */
.einst-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.einst-nav {
  position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 10px;
}
.einst-suche {
  width: 100%; height: 36px; margin-bottom: 8px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 13.5px;
}
.einst-suche:focus { outline: 2px solid var(--primary); outline-offset: -1px; background: var(--card); }
.einst-kat { margin-top: 10px; }
.einst-kat[hidden] { display: none; }
.einst-kat-titel { padding: 0 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.einst-link {
  display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: none;
  color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; line-height: 1.3;
}
.einst-link:hover { background: var(--bg); }
.einst-link:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.einst-link.aktiv { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.einst-link.treffer:not(.aktiv) { box-shadow: inset 3px 0 0 var(--primary); }
.einst-link[hidden] { display: none; }
.einst-keine { padding: 10px; font-size: 13px; color: var(--text-3); }
.einst-keine[hidden] { display: none; }
.einst-kopf { margin-bottom: 14px; }
.einst-kopf h2 { margin: 2px 0 0; font-size: 20px; }
.einst-pfad { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.einst-zurueck { display: none; margin-bottom: 8px; padding: 0; border: 0; background: none; color: var(--primary); font: inherit; font-size: 13px; cursor: pointer; }
.einst-inhalt .form-section + .form-section { margin-top: 20px; }
.einst-speichern { position: sticky; bottom: 0; display: flex; justify-content: flex-end; margin-top: 16px; padding: 12px 0;
  background: linear-gradient(to bottom, transparent, var(--bg) 35%); }
@media (max-width: 860px) {
  .einst-layout { grid-template-columns: 1fr; gap: 16px; }
  .einst-nav { position: static; max-height: none; }
  .einst-zurueck { display: inline-block; }
}

/* Vorlagen-Reiter (E-Mail-Vorlagen, Mahn- & Nachfasstexte) */
.vorlagen-reiter { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 18px; border-bottom: 2px solid var(--border); }
.vorlagen-tab { padding: 7px 14px; margin-bottom: -2px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-2);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.vorlagen-tab:hover { color: var(--text); }
.vorlagen-tab.aktiv { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.vorlagen-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.vorlagen-panel[hidden] { display: none; }

/* Zahlungsstand der Ausgaben */
.zahl-status { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11.5px; font-weight: 600; }
.zahl-bezahlt { background: var(--success-bg); color: var(--success); }
.zahl-offen { background: var(--warning-bg); color: var(--warning); }
.zahl-ueberfaellig { background: var(--danger-bg); color: var(--danger); }
.beleg-zahlung { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.beleg-zahlung input[type="date"] { width: auto; max-width: 170px; }
.beleg-zahlung input.gedimmt { opacity: .45; }

/* Spalte „Bezahlt“ in der Ausgabenliste */
.data-table td.zahl-zelle { white-space: nowrap; font-size: 12px; line-height: 1.3; }
.data-table td.zahl-zelle span { display: block; font-size: 11px; opacity: .85; }
.data-table td.zahl-ja { background: var(--success-bg); color: var(--success); }
.data-table td.zahl-nein { background: var(--danger-bg); color: var(--danger); }
.data-table td.zahl-privat { background: #f3e8ff; color: #7c3aed; }
/* Rückerstattung ohne Lieferantengutschrift (Rückgabe, Preisnachlass) */
.data-table td.zahl-rueck { background: #e0f2fe; color: #0369a1; }
body.dark-mode .data-table td.zahl-rueck { background: #0c2a3d; color: #7dd3fc; }
.rueck-marke { display: inline-block; font-size: 10px; background: #e0f2fe; color: #0369a1; padding: 1px 6px; border-radius: 8px; line-height: 1.35; }
body.dark-mode .rueck-marke { background: #0c2a3d; color: #7dd3fc; }
.data-table tr.row-rueck td:not(.col-aktionen) { color: var(--text-2); }
.rueck-info { font-size: 12.5px; line-height: 1.5; color: var(--text-2); background: var(--bg); border: 1px solid var(--border); border-left: 3px solid #0ea5e9; border-radius: 6px; padding: 9px 12px; margin: 4px 0 12px; }
.rueck-info .btn { margin-top: 6px; }
.rueck-text { font-size: 13px; margin: 0 0 12px; line-height: 1.5; }
.rueck-zeile { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.rueck-zeile span { color: var(--text-2); }
.rueck-zeile strong { text-align: right; font-weight: 600; }
.modal-form label.exp-privat-schalter, .exp-privat-schalter { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text); cursor: pointer; }
.exp-privat-schalter input { margin-top: 2px; }

/* ── Spalten verschieben / Breite / ein-ausblenden (spalten.js) ─────────────── */
.spalten-leiste { display: flex; justify-content: flex-end; padding: 6px 12px 0; }
.spalten-knopf { border: 1px solid var(--border); background: var(--card); color: var(--text-2); border-radius: 6px;
  padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.spalten-knopf:hover { color: var(--text); border-color: var(--text-3); }
.data-table th.spalte-beweglich { position: relative; cursor: grab; }
.data-table th.spalte-beweglich:active { cursor: grabbing; }
.data-table th.spalte-zieht { opacity: .5; }
.data-table th.marke-links { box-shadow: inset 3px 0 0 var(--primary); }
.data-table th.marke-rechts { box-shadow: inset -3px 0 0 var(--primary); }
.spalte-griff { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 3; touch-action: none; }
.spalte-griff::after { content: ''; position: absolute; top: 25%; bottom: 25%; left: 4px; width: 1px; background: var(--border); }
.spalte-griff:hover::after, .spalte-griff:focus-visible::after { background: var(--primary); width: 2px; }
.spalte-griff:focus-visible { outline: none; }
body.spalte-zieht-breite, body.spalte-zieht-breite * { cursor: col-resize !important; user-select: none !important; }
/* Feste Breiten nach dem Ziehen: Inhalt bricht um bzw. wird abgeschnitten */
table.data-table.spalten-fest { table-layout: fixed; min-width: 0; }
table.data-table.spalten-fest th, table.data-table.spalten-fest td { overflow: hidden; text-overflow: ellipsis; }
table.data-table.spalten-fest td { white-space: normal; overflow-wrap: anywhere; }
@media (min-width: 768px) { .data-table .spalte-aus { display: none; } }
@media (max-width: 767px) { .spalten-leiste, .spalte-griff { display: none; } }
.spalten-menue { position: absolute; z-index: 1000; min-width: 220px; max-width: 300px; padding: 10px 12px; background: var(--card);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md); font-size: 13px; }
.spalten-menue-titel { font-weight: 700; margin-bottom: 6px; }
.spalten-menue label { display: flex; gap: 8px; align-items: center; padding: 3px 0; margin: 0; text-transform: none; letter-spacing: 0;
  font-weight: 500; color: var(--text); cursor: pointer; }
.spalten-menue-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.spalten-menue-knoepfe button { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 12px; cursor: pointer; }
.spalten-menue-hinweis { margin-top: 8px; font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
table.data-table.spalten-fest td.num, table.data-table.spalten-fest td.amount { white-space: nowrap; }

/* ══ Projektmodul v2 ═══════════════════════════════════════════════════════ */
.pj-werkzeug { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; margin-bottom: 12px; }
.pj-werkzeug input[type="search"] { flex: 1 1 240px; }
.pj-werkzeug select { width: auto; }
.pj-anzahl { margin-left: auto; font-size: 12.5px; color: var(--text-3); }
.pj-leer { text-align: center; padding: 28px !important; color: var(--text-3); }
.pj-leer-klein { font-size: 13px; color: var(--text-3); padding: 6px 0; }
.pj-laden { padding: 24px; color: var(--text-3); }
.pj-nr { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.pj-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; flex: none; }
.pj-pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 600; color: var(--f);
  background: color-mix(in srgb, var(--f) 14%, transparent); white-space: nowrap; }
.pj-prio { display: inline-block; padding: 0 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; color: var(--f);
  border: 1px solid color-mix(in srgb, var(--f) 45%, transparent); white-space: nowrap; }
.pj-warn { font-size: 10.5px; color: var(--danger); background: var(--danger-bg); padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
.pj-ava { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--f);
  color: #fff; font-size: 10px; font-weight: 700; vertical-align: middle; flex: none; }
.pj-ava.gross { width: 30px; height: 30px; font-size: 12px; }
.pj-bar { display: inline-block; width: 70px; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; vertical-align: middle; }
.pj-bar i { display: block; height: 100%; border-radius: 3px; }
.pj-fort { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pj-fort small { color: var(--text-3); font-size: 11px; }
.pj-griff-sp { width: 24px; }
.pj-link { border: 0; background: none; padding: 0; color: var(--primary); font: inherit; cursor: pointer; text-align: left; }
.pj-link:hover { text-decoration: underline; }
.pj-link.durch { text-decoration: line-through; color: var(--text-3); }
.pj-chip { display: inline-block; padding: 1px 8px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font-size: 11.5px; color: var(--text-2); }
.rot { color: var(--danger) !important; }

/* Formular */
.pj-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.pj-form .full { grid-column: 1 / -1; }
.pj-form small { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 3px; }
.pj-farben { display: flex; gap: 8px; }
.pj-farbe { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.pj-farbe.aktiv { border-color: var(--text); box-shadow: 0 0 0 2px var(--card) inset; }
.pj-mitgl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; max-height: 180px; overflow: auto; padding: 4px 0; }
.pj-mitgl label { display: flex; align-items: center; gap: 6px; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text); font-size: 13px; }

/* Kopf und Kennzahlen */
.pj-kopf { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; padding: 4px 0 14px;
  border-bottom: 3px solid var(--pf); margin-bottom: 16px; }
.pj-kopf-links { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.pj-kopf h1 { margin: 0; font-size: 24px; overflow-wrap: anywhere; }
.pj-kopf-nr { font-size: 12px; color: var(--text-3); font-family: 'SF Mono', 'Fira Code', monospace; }
.pj-kopf-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 6px; font-size: 13px; color: var(--text-2); }
.pj-kopf-rechts { display: flex; gap: 8px; }
.pj-status-wahl { width: auto; padding: 3px 8px; font-size: 12.5px; height: auto; }
.pj-mitgl-reihe { display: inline-flex; }
.pj-mitgl-reihe .pj-ava { margin-left: -5px; border: 2px solid var(--card); }
.pj-mitgl-reihe .pj-ava:first-child { margin-left: 0; }
.pj-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pj-kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.pj-kpi span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 700; }
.pj-kpi strong { font-size: 20px; }
.pj-kpi small { font-size: 11.5px; color: var(--text-2); }
.pj-kpi .pj-bar { width: 100%; }
.pj-kpi.rot strong { color: var(--danger); }
.pj-kpi.gelb strong { color: var(--warning); }
.pj-tabs { margin-bottom: 14px; }

/* Aufgaben-Leiste */
.pj-aufgaben-leiste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pj-schnell input { width: 100%; height: 40px; padding: 0 12px; border: 1px dashed var(--primary); border-radius: 8px; background: var(--card); font: inherit; font-size: 14px; color: var(--text); }
.pj-schnell input:focus { border-style: solid; outline: 2px solid color-mix(in srgb, var(--primary) 25%, transparent); }
.pj-schnell-vorschau { min-height: 16px; font-size: 12px; color: var(--primary); padding: 2px 4px; }
.pj-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pj-filter input[type="search"] { flex: 1 1 180px; }
.pj-filter select { width: auto; }
.pj-umschalter { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; margin-left: auto; }
.pj-umschalter button { border: 0; background: var(--card); color: var(--text-2); padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.pj-umschalter button.aktiv { background: var(--primary); color: #fff; }

/* Kanban */
.pj-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.pj-spalte { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; max-height: calc(100vh - 260px); min-height: 120px; }
.pj-spalte header { display: flex; align-items: center; gap: 6px; padding: 10px 10px 6px; border-top: 3px solid var(--sf); border-radius: 10px 10px 0 0; }
.pj-spalte header strong { font-size: 13px; }
.pj-spalte header small { color: var(--text-3); font-size: 12px; }
.pj-spalte header .btn-icon { margin-left: auto; }
.pj-spalte-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sf); }
.pj-spalte-inhalt { padding: 4px 8px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.pj-spalte-leer { font-size: 12px; color: var(--text-3); text-align: center; padding: 14px 0; border: 1px dashed var(--border); border-radius: 8px; }
.pj-karte { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px; cursor: pointer; box-shadow: var(--shadow); }
.pj-karte:hover { border-color: var(--primary); }
.pj-karte:focus-visible { outline: 2px solid var(--primary); }
.pj-karte.zieht { opacity: .4; }
.pj-karte.erledigt .pj-karte-titel { text-decoration: line-through; color: var(--text-3); }
.pj-karte-titel { font-size: 13.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.pj-karte-fuss { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 7px; font-size: 11.5px; color: var(--text-2); }
.pj-karte-ava { margin-left: auto; }
.pj-marke { height: 3px; background: var(--primary); border-radius: 2px; }
.pj-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.pj-label { display: inline-flex; align-items: center; gap: 2px; padding: 0 7px; border-radius: 9px; font-size: 11px; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.pj-label button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 2px; font-size: 13px; line-height: 1; }
.pj-mini { white-space: nowrap; }
.pj-datum.rot { font-weight: 700; }

/* Liste */
.pj-tabelle .pj-wahl, .pj-tabelle .pj-erl { width: 28px; }
.pj-tabelle tr.pj-gruppe td { background: var(--bg); font-weight: 700; font-size: 12.5px; }
.pj-tabelle tr.pj-erledigt .pj-link { text-decoration: line-through; color: var(--text-3); }
.pj-tabelle tr.pj-teil td.pj-titel-zelle { padding-left: 28px; }
.pj-inline { border: 1px solid transparent; background: transparent; padding: 2px 4px; height: auto; font-size: 12.5px; width: auto; max-width: 160px; }
.pj-inline:hover, .pj-inline:focus { border-color: var(--border); background: var(--card); }
.pj-zahl { width: 70px; }
.pj-bulk { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; margin-bottom: 8px;
  background: var(--primary-light); border: 1px solid var(--primary); border-radius: 8px; font-size: 13px; }
.pj-bulk[hidden] { display: none; }
.pj-bulk select, .pj-bulk input { width: auto; height: 30px; font-size: 12.5px; }

/* Seitenpanel */
.pj-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); z-index: 900; background: var(--card); border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,.12); overflow-y: auto; padding: 12px 18px 24px; display: flex; flex-direction: column; gap: 6px; }
.pj-panel-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }
.pj-panel-titel { font-size: 19px; font-weight: 700; border: 1px solid transparent; background: transparent; resize: none; padding: 4px; color: var(--text); font-family: inherit; overflow: hidden; }
.pj-panel-titel:hover, .pj-panel-titel:focus { border-color: var(--border); }
.pj-panel-felder { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; align-items: center; font-size: 13px; }
.pj-panel-felder label { margin: 0; color: var(--text-3); font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.pj-panel-felder select, .pj-panel-felder input { height: 32px; font-size: 13px; }
.pj-labels-edit { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pj-labels-edit input { width: 110px; height: 26px; font-size: 12px; }
.pj-panel-ue { margin: 12px 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.pj-panel-ue small { font-weight: 500; color: var(--text-3); }
.pj-panel-beschr { width: 100%; font: inherit; font-size: 13.5px; }
.pj-check label { display: flex; align-items: center; gap: 8px; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text); font-size: 13.5px; }
.pj-check label span { flex: 1; }
.pj-check input:not([type="checkbox"]), .pj-teile input:not([type="checkbox"]) { width: 100%; height: 30px; font-size: 13px; margin-top: 4px; }
.pj-teil-zeile { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 13.5px; }
.pj-teil-zeile .pj-link { flex: 1; }
.pj-belege { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-datei { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; }
.pj-datei a { overflow-wrap: anywhere; }
.pj-datei small { color: var(--text-3); white-space: nowrap; }
.pj-datei .btn-icon { margin-left: auto; }
.pj-datei-hoch { display: inline-block; margin: 4px 0 0; color: var(--primary); cursor: pointer; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.pj-komm { display: flex; flex-direction: column; gap: 10px; }
.pj-k { display: flex; gap: 8px; }
.pj-k > div { flex: 1; min-width: 0; }
.pj-k-kopf { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.pj-k-kopf small { color: var(--text-3); }
.pj-k-kopf .btn-icon { margin-left: auto; }
.pj-k-text { font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.pj-erwaehnt { color: var(--primary); font-weight: 600; }
.pj-komm-neu { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; align-items: flex-end; }
.pj-komm-neu textarea { width: 100%; font: inherit; font-size: 13.5px; }
.pj-erw { position: absolute; bottom: 100%; left: 0; z-index: 10; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md); padding: 4px; min-width: 220px; }
.pj-erw[hidden] { display: none; }
.pj-erw button { display: flex; gap: 6px; align-items: center; width: 100%; border: 0; background: none; padding: 5px 8px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; color: var(--text); border-radius: 6px; }
.pj-erw button:hover { background: var(--bg); }
.pj-panel-verlauf summary { cursor: pointer; font-size: 12.5px; color: var(--text-2); margin-top: 10px; }
.pj-panel-fuss { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.pj-panel-fuss small { color: var(--text-3); }
.pj-verlauf { font-size: 12.5px; padding: 3px 0; color: var(--text-2); }
.pj-verlauf small { color: var(--text-3); }

/* Übersicht, Meilensteine, Zeiten, Dateien */
.pj-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.pj-karte-box { padding: 14px 16px; }
.pj-karte-box h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); margin: 4px 0 8px; }
.pj-karte-box h3:not(:first-child) { margin-top: 16px; }
.pj-text { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.pj-vert { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto auto; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; }
.pj-vert .pj-bar { width: 90px; }
.pj-ms-neu, .pj-zeit-neu, .pj-fg-neu { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pj-ms-neu input:first-child, .pj-zeit-neu #pj-z-text, .pj-fg-neu input { flex: 1 1 200px; }
.pj-zeit-neu input[type="number"] { width: 80px; }
.pj-zeit-neu select, .pj-ms-neu input[type="date"], .pj-zeit-neu input[type="date"] { width: auto; }
.pj-zeit-summe { font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.pj-ms { display: grid; grid-template-columns: 24px minmax(0, 1fr) 150px 170px 32px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.pj-ms.fertig .pj-ms-t { text-decoration: line-through; color: var(--text-3); }
.pj-ms-t { border: 1px solid transparent; background: transparent; font: inherit; font-weight: 600; }
.pj-ms-t:focus { border-color: var(--border); }
.pj-ms-fort { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--text-3); }
.pj-drop { display: block; padding: 22px; border: 2px dashed var(--border); border-radius: 10px; text-align: center; color: var(--text-2); cursor: pointer; margin: 0 0 12px;
  text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13.5px; }
.pj-drop.aktiv { border-color: var(--primary); background: var(--primary-light); }
.pj-fg { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pj-fg > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pj-fg small { color: var(--text-3); font-size: 11.5px; overflow-wrap: anywhere; }
.pj-sp-zeile { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.pj-sp-zeile input[type="color"] { width: 36px; height: 32px; padding: 2px; }
.pj-sp-zeile input:not([type="color"]) { flex: 1; }
.pj-sp-zeile select { width: auto; }
.pj-menue { position: absolute; z-index: 1000; min-width: 220px; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-md); }
.pj-menue button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 6px; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; }
.pj-menue button:hover { background: var(--bg); }
.pj-kuerzel td { padding: 4px 10px 4px 0; font-size: 13.5px; }
.pj-kuerzel kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; font-size: 12px; background: var(--bg); }

/* Meine Aufgaben */
.pj-meine-gruppe h4 { margin: 12px 0 6px; font-size: 13px; }
.pj-meine-gruppe h4 small { color: var(--text-3); font-weight: 500; }
.pj-meine { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-bottom: 1px solid var(--border); background: none; padding: 7px 4px; font: inherit; cursor: pointer; text-align: left; color: var(--text); }
.pj-meine:hover { background: var(--bg); }
.pj-meine-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; }
.pj-meine-t small { color: var(--text-3); font-size: 11.5px; }
.pj-meine-d { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.pj-meine-d.rot { color: var(--danger); font-weight: 700; }

/* Glocke */
#pj-glocke { position: relative; border: 0; background: none; color: var(--sidebar-text); cursor: pointer; padding: 6px; border-radius: 6px; display: flex; }
#pj-glocke svg { width: 18px; height: 18px; }
#pj-glocke:hover { background: var(--sidebar-hover); }
.pj-glocke-zahl { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.pj-glocke-zahl[hidden] { display: none; }
.pj-glocke-menue { position: fixed; z-index: 1100; width: min(360px, calc(100vw - 16px)); max-height: 60vh; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md); padding: 6px; }
.pj-glocke-kopf { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; font-size: 13.5px; }
.pj-glocke-kopf button { border: 0; background: none; color: var(--primary); cursor: pointer; font: inherit; font-size: 12.5px; }
.pj-glocke-e { display: flex; flex-direction: column; gap: 2px; width: 100%; border: 0; background: none; padding: 8px; border-radius: 6px; text-align: left; font: inherit; font-size: 13px; color: var(--text-2); cursor: pointer; }
.pj-glocke-e.neu { color: var(--text); font-weight: 600; background: color-mix(in srgb, var(--primary) 8%, transparent); }
.pj-glocke-e:hover { background: var(--bg); }
.pj-glocke-e small { color: var(--text-3); font-weight: 400; font-size: 11px; }
.pj-glocke-leer { padding: 14px; color: var(--text-3); font-size: 13px; }

/* Befehlspalette */
#pj-palette { position: fixed; inset: 0; z-index: 2000; background: rgba(15,23,42,.35); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.pj-palette-box { width: min(560px, calc(100vw - 24px)); background: var(--card); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.25); overflow: hidden; }
.pj-palette-box input { width: 100%; height: 50px; border: 0; border-bottom: 1px solid var(--border); padding: 0 16px; font: inherit; font-size: 16px; background: var(--card); color: var(--text); border-radius: 0; }
.pj-palette-box input:focus { outline: none; }
.pj-palette-liste { max-height: 50vh; overflow-y: auto; padding: 6px; }
.pj-palette-e { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 8px; text-align: left; font: inherit; cursor: pointer; color: var(--text); }
.pj-palette-e span { display: flex; flex-direction: column; font-size: 14px; }
.pj-palette-e small { color: var(--text-3); font-size: 11.5px; }
.pj-palette-e.aktiv, .pj-palette-e:hover { background: var(--primary-light); }
.pj-palette-hinweis { padding: 12px; color: var(--text-3); font-size: 13px; }

@media (max-width: 767px) {
  .pj-form { grid-template-columns: 1fr; }
  .pj-kanban { grid-auto-columns: 82vw; scroll-snap-type: x mandatory; }
  .pj-spalte { scroll-snap-align: start; max-height: none; }
  .pj-umschalter { margin-left: 0; }
  .pj-kopf h1 { font-size: 20px; }
  .pj-ms { grid-template-columns: 24px 1fr; }
  .pj-ms input[type="date"], .pj-ms-fort { grid-column: 2; }
  .pj-panel { width: 100vw; }
  .pj-panel-felder { grid-template-columns: 90px 1fr; }
  .pj-vert { grid-template-columns: minmax(0, 1fr) 70px auto; }
  .pj-vert .pj-bar { width: 70px; }
}
.pj-chip-weg { border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 0 0 0 4px; font-size: 13px; }
.pj-beleg-suche { position: relative; width: 100%; margin-top: 4px; }
.pj-beleg-suche input { width: 100%; height: 30px; font-size: 13px; }
.pj-beleg-suche .pj-erw { top: 100%; bottom: auto; width: 100%; }
.pj-werkzeug input[type="search"], .pj-filter input[type="search"] { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card); color: var(--text); font: inherit; font-size: 13.5px; }
.pj-werkzeug input[type="search"]:focus, .pj-filter input[type="search"]:focus { outline: 2px solid var(--primary); outline-offset: -1px; }

/* ── Projekte Etappe 2: Finanzen, Timer, Stundenzettel ─────────────────── */
.pj-fin-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.pj-leist td { vertical-align: top; }
.pj-leist .pj-zahl { width: 84px; text-align: right; }
.pj-ab-vorschau { margin: 10px 0; max-height: 46vh; overflow: auto; }
.pj-ab-vorschau small { color: var(--text-2); }
.pj-chip-ok { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.pj-chip-grau { opacity: .7; }
.pj-z-abr { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; }
#pj-timer { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px;
  background: var(--surface, #fff); color: var(--text); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.18); max-width: calc(100vw - 32px); }
#pj-timer.lang { border-color: var(--danger); }
.pj-timer-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); animation: pj-puls 1.4s infinite; flex: none; }
@keyframes pj-puls { 50% { opacity: .3; } }
.pj-timer-info { background: none; border: 0; color: inherit; display: flex; flex-direction: column; align-items: flex-start; cursor: pointer; min-width: 0; padding: 0; text-align: left; }
.pj-timer-zeit { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; }
.pj-timer-info small { color: var(--text-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-timer-stop { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--danger); color: #fff; cursor: pointer; font-size: 13px; flex: none; }
.pj-sz-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pj-sz th.heute { color: var(--primary); }
.pj-sz-zelle { width: 58px; text-align: right; padding: 4px 6px; }
.pj-sz-neu select { max-width: 100%; }
@media (max-width: 640px) { #pj-timer { right: 8px; left: 8px; bottom: 8px; } .pj-timer-info small { max-width: 50vw; } }
.pj-leist-box { margin-bottom: 16px; }
.pj-leist-name { max-width: none; width: 100%; min-width: 180px; }
.pj-leist td:first-child { width: 34%; }
@media (max-width: 640px) {
  .pj-leist thead { display: none; }
  .pj-leist tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .pj-leist td { border: 0; padding: 0; text-align: left; }
  .pj-leist td:first-child { grid-column: 1 / -1; width: auto; }
  .pj-leist td:nth-child(2) { grid-column: 1 / -1; }
  .pj-leist .pj-zahl { width: 100%; text-align: left; }
}
.pj-ab-vorschau td.num, .pj-ab-vorschau th.num { white-space: nowrap; }
.pj-sz-zelle { width: 64px; }

/* ── Projekte Etappe 3: Gantt, Auslastung, Kalender ────────────────────── */
.pj-g-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.pj-g-rechts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.pj-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.pj-seg button { border: 0; background: var(--surface, #fff); color: var(--text-2); padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.pj-seg button + button { border-left: 1px solid var(--border); }
.pj-seg button.aktiv { background: var(--primary); color: #fff; }
.pj-g-check { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-2); }
.pj-g-hinweis { font-size: 12px; color: var(--text-3); margin: 0 0 10px; }
.pj-gantt { display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr); border: 1px solid var(--border); border-radius: 10px; background: var(--surface, #fff); overflow: hidden; }
.pj-g-namen { border-right: 1px solid var(--border); min-width: 0; }
.pj-g-kopf-l { height: 46px; display: flex; align-items: flex-end; padding: 0 10px 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); border-bottom: 1px solid var(--border); }
.pj-g-name { height: 34px; display: flex; align-items: center; gap: 4px; padding: 0 8px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); font-size: 13px; min-width: 0; }
.pj-g-name a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.pj-g-name a:hover { color: var(--primary); }
.pj-g-name.kind { padding-left: 26px; font-size: 12.5px; }
.pj-g-name.fertig a { color: var(--text-3); text-decoration: line-through; }
.pj-g-name.ms { color: var(--text-3); font-size: 12px; }
.pj-g-klapp { width: 18px; flex: none; background: none; border: 0; color: var(--text-3); cursor: pointer; padding: 0; font-size: 12px; }
.pj-g-scroll { overflow-x: auto; overflow-y: hidden; position: relative; }
.pj-g-kopf { height: 46px; border-bottom: 1px solid var(--border); position: relative; }
.pj-g-monate, .pj-g-skala { position: relative; height: 23px; }
.pj-g-monat { position: absolute; top: 0; height: 23px; line-height: 23px; padding-left: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); border-left: 1px solid var(--border); white-space: nowrap; overflow: hidden; }
.pj-g-tag { position: absolute; top: 0; height: 23px; line-height: 23px; text-align: center; font-size: 11px; color: var(--text-3); border-left: 1px solid color-mix(in srgb, var(--border) 50%, transparent); white-space: nowrap; overflow: hidden; }
.pj-g-tag.we, .pj-g-tag.ft { color: var(--text-3); opacity: .6; }
.pj-g-tag.ft { color: var(--danger); }
.pj-g-flaeche { position: relative; }
.pj-g-frei { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--text-3) 9%, transparent); }
.pj-g-frei.ft { background: color-mix(in srgb, var(--danger) 9%, transparent); }
.pj-g-linie { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--border); }
.pj-g-zeile { position: absolute; left: 0; right: 0; height: 34px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); pointer-events: none; }
.pj-g-heute { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--danger); opacity: .7; pointer-events: none; z-index: 2; }
.pj-g-bar { position: absolute; height: 20px; border-radius: 5px; background: color-mix(in srgb, var(--bf) 30%, var(--surface, #fff)); border: 1px solid var(--bf);
  cursor: grab; z-index: 3; overflow: visible; touch-action: none; user-select: none; }
.pj-g-bar.kind { height: 16px; margin-top: 2px; }
.pj-g-bar.krit { border: 2px solid var(--danger); }
.pj-g-bar.fertig { opacity: .55; }
.pj-g-bar.neu { background: color-mix(in srgb, var(--primary) 25%, transparent); border: 1px dashed var(--primary); }
.pj-g-bar.ziel { outline: 2px solid var(--primary); outline-offset: 2px; }
.pj-g-fort { position: absolute; inset: 0 auto 0 0; background: var(--bf); opacity: .55; border-radius: 4px 0 0 4px; pointer-events: none; }
.pj-g-text { position: absolute; left: 6px; right: 6px; top: 0; line-height: 18px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); pointer-events: none; }
.pj-g-griff { position: absolute; top: -1px; bottom: -1px; width: 7px; cursor: ew-resize; }
.pj-g-griff.l { left: -3px; } .pj-g-griff.r { right: -3px; }
.pj-g-anker { position: absolute; right: -15px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--surface, #fff); border: 2px solid var(--primary); cursor: crosshair; opacity: 0; transition: opacity .12s; }
.pj-g-bar:hover .pj-g-anker, body.pj-ziehen .pj-g-anker { opacity: 1; }
.pj-g-leer { position: absolute; left: 0; height: 34px; cursor: crosshair; z-index: 1; }
.pj-g-leer span { position: sticky; left: 8px; font-size: 11.5px; color: var(--text-3); line-height: 34px; padding-left: 8px; }
.pj-g-basis { position: absolute; height: 4px; border-radius: 2px; background: var(--text-3); opacity: .45; z-index: 2; pointer-events: none; }
.pj-g-ms { position: absolute; width: 14px; height: 14px; background: #7c3aed; transform: rotate(45deg); z-index: 3; border-radius: 2px; }
.pj-g-ms.fertig { background: var(--success); }
.pj-g-pfeile { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; overflow: visible; }
.pj-g-pfeil path { fill: none; stroke: var(--text-2); stroke-width: 1.4; }
.pj-g-pfeil path.treff { stroke: transparent; stroke-width: 10; pointer-events: stroke; cursor: pointer; }
.pj-g-pfeil.krit path:not(.treff) { stroke: var(--danger); }
.pj-g-pfeil:hover path:not(.treff) { stroke: var(--primary); stroke-width: 2; }
#pj-pfeil path { fill: var(--text-2); }
.pj-g-zug { stroke: var(--primary); stroke-width: 2; stroke-dasharray: 4 3; }
body.pj-ziehen, body.pj-ziehen * { cursor: grabbing !important; user-select: none; }
@media (max-width: 760px) { .pj-gantt { grid-template-columns: 120px minmax(0, 1fr); } .pj-g-rechts { margin-left: 0; } }

.pj-al td { vertical-align: middle; }
.pj-al-zelle { display: inline-flex; flex-direction: column; align-items: flex-end; min-width: 70px; padding: 4px 8px; border-radius: 6px; line-height: 1.2; }
.pj-al-zelle small { color: var(--text-2); font-size: 11px; }
.pj-al-zelle .abw { color: var(--warning); }
.pj-al-zelle.gruen { background: color-mix(in srgb, var(--success) 14%, transparent); }
.pj-al-zelle.gelb { background: color-mix(in srgb, var(--warning) 20%, transparent); }
.pj-al-zelle.rot { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.pj-al-person.ziel td { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.pj-al-aufgabe td { font-size: 12.5px; background: color-mix(in srgb, var(--text-3) 4%, transparent); }
.pj-al-aufgabe td:first-child { padding-left: 34px; cursor: grab; }
.pj-al-aufgabe small { color: var(--text-3); margin-left: 6px; }

.cal-apt.pj-kal { background: color-mix(in srgb, #7c3aed 8%, transparent); border-left: 3px dashed #7c3aed; }
.cal-apt.pj-kal.meilenstein { font-weight: 600; }
.cal-apt.pj-kal.fertig { opacity: .5; text-decoration: line-through; }
.cal-feiertag { display: block; font-size: 10px; font-weight: 500; color: var(--danger); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-cell-feiertag { background: color-mix(in srgb, var(--danger) 4%, transparent); }
.cal-proj-schalter { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-2); margin-left: auto; }

/* ── Projekte Etappe 4: Portfolio, Automationen, Portal, KI ────────────── */
.pj-ampel { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: var(--text-3); opacity: .45; vertical-align: middle; }
.pj-ampel.gruen { background: var(--success); opacity: 1; }
.pj-ampel.gelb { background: var(--warning); opacity: 1; }
.pj-ampel.rot { background: var(--danger); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); }
.pj-pf td { vertical-align: middle; }
.pj-pf th { white-space: normal; }
.pj-kpi a { color: var(--primary); }
.pj-pf td small { display: block; color: var(--text-3); }
.pj-inline-check { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--text); text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap; }
.pj-chip-portal { background: color-mix(in srgb, #7c3aed 14%, transparent); color: #7c3aed; }
.pj-regeln { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.pj-regel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; }
.pj-regel.aus { opacity: .55; }
.pj-regel small { color: var(--text-2); }
.pj-schalter { position: relative; width: 34px; height: 20px; flex: none; }
.pj-schalter input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; cursor: pointer; z-index: 1; }
.pj-schalter span { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: background .15s; }
.pj-schalter span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.pj-schalter input:checked + span { background: var(--success); }
.pj-schalter input:checked + span::after { transform: translateX(14px); }
.pj-schalter input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.pj-regel-neu summary { cursor: pointer; font-weight: 600; color: var(--primary); margin: 4px 0 10px; }
.pj-plan { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.pj-plan.aus { opacity: .55; }
.pj-plan small { color: var(--text-2); }
.pj-plan-knoepfe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pj-portal-link { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.pj-portal-link .pj-fg { border: 0; padding: 0; margin: 0; }
.pj-portal-rechte { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.pj-ki-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 44vh; overflow: auto; }
.pj-ki-vorschlag { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid var(--border); border-radius: 8px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); cursor: pointer; }
.pj-ki-vorschlag small { color: var(--text-2); }
.pj-portal-link .pj-chip { align-self: flex-start; width: auto; }

/* Passkeys (Einstellungen › Mein Konto) */
.pk-liste { display: flex; flex-direction: column; }
.pk-zeile { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pk-zeile:last-child { border-bottom: 0; }
.pk-text { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.pk-text small { font-size: 12px; color: var(--text-3); }
.pk-marke { font-size: 10px; background: #ede9fe; color: #6d28d9; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }

/* ── Belegdesign: Wahl per Drag & Drop ───────────────────────────────────── */
.design-wahl { display: grid; grid-template-columns: minmax(150px, 190px) 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 720px) { .design-wahl { grid-template-columns: 1fr; } }
.design-ablage {
  border: 2px dashed var(--border); border-radius: var(--radius); padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.design-ablage-kopf { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.design-ablage-name { font-weight: 600; font-size: 14px; }
.design-ablage-hinweis { font-size: 11.5px; color: var(--text-3); }
.design-ablage-bereit { border-color: var(--primary); }
.design-ablage-aktiv { background: var(--primary-light); border-style: solid; transform: scale(1.02); }
.design-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.design-karte {
  display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); cursor: grab; touch-action: none; user-select: none;
  transition: box-shadow .15s ease, opacity .15s ease;
}
.design-karte:hover { box-shadow: var(--shadow-md); }
.design-karte.ist-aktiv { border-color: var(--primary); }
.design-karte.design-zieht { opacity: .35; }
.design-karte-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.design-karte-titel { font-weight: 600; font-size: 13.5px; }
.design-karte-zusatz { font-weight: 400; font-size: 11.5px; color: var(--text-3); }
.design-karte-info { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.design-karte-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.design-geist {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; cursor: grabbing;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .25); opacity: .95;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.briefbogen-ablage { border: 2px dashed transparent; border-radius: var(--radius); padding: 4px; margin: -6px; transition: border-color .15s ease, background-color .15s ease; }
.briefbogen-ablage-aktiv { border-color: var(--primary); background: var(--primary-light); }

/* Skizze eines Belegs (A4-Verhältnis) — nur Andeutung, kein echtes Rendering */
.ds-blatt { position: relative; flex: none; width: 74px; height: 105px; background: #fff; border: 1px solid #d5dae1; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.ds-blatt i { position: absolute; display: block; border-radius: 1px; background: #cbd2dc; }
.ds-klassisch .ds-logo  { right: 8px; top: 5px; width: 18px; height: 14px; border-radius: 50%; background: #dfe4ea; }
.ds-klassisch .ds-firma { left: 7px; top: 22px; width: 22px; height: 7px; background: #9aa3b0; }
.ds-klassisch .ds-adr   { left: 7px; top: 33px; width: 24px; height: 9px; }
.ds-klassisch .ds-info  { right: 7px; top: 33px; width: 22px; height: 9px; }
.ds-klassisch .ds-titel { left: 7px; top: 46px; width: 18px; height: 3px; background: #1d4ed8; }
.ds-klassisch .ds-tkopf { left: 7px; right: 7px; top: 52px; height: 4px; background: #1d4ed8; }
.ds-klassisch .ds-z     { left: 7px; right: 7px; height: 5px; background: #fff; border: 1px solid #b8b8b8; }
.ds-klassisch .ds-z:nth-of-type(7) { top: 56px; } .ds-klassisch .ds-z:nth-of-type(8) { top: 61px; } .ds-klassisch .ds-z:nth-of-type(9) { top: 66px; }
.ds-klassisch .ds-summe { right: 7px; top: 74px; width: 24px; height: 9px; background: #fff; border: 1px solid #b8b8b8; }
.ds-klassisch .ds-fuss  { left: 18px; right: 18px; bottom: 5px; height: 5px; background: #e2e6eb; }
.ds-modern .ds-logo   { right: 6px; top: 5px; width: 10px; height: 10px; background: #0c1a2d; }
.ds-modern .ds-firma  { left: 6px; top: 6px; width: 26px; height: 3px; background: #0c1a2d; }
.ds-modern .ds-ruecks { left: 6px; top: 19px; width: 24px; height: 1px; background: #cbd2dc; }
.ds-modern .ds-adr    { left: 6px; top: 22px; width: 24px; height: 9px; background: #94a0b0; }
.ds-modern .ds-info   { right: 6px; top: 17px; width: 20px; height: 13px; background: #dfe4ea; }
.ds-modern .ds-titel  { left: 6px; top: 36px; width: 20px; height: 4px; background: #0c1a2d; }
.ds-modern .ds-tkopf  { left: 6px; right: 6px; top: 44px; height: 4px; background: #e8ecf1; border-bottom: 1px solid #0c1a2d; }
.ds-modern .ds-z      { left: 6px; right: 6px; height: 4px; background: transparent; border-bottom: 1px solid #e3e7ed; }
.ds-modern .ds-z:nth-of-type(8) { top: 49px; } .ds-modern .ds-z:nth-of-type(9) { top: 54px; } .ds-modern .ds-z:nth-of-type(10) { top: 59px; }
.ds-modern .ds-summe  { right: 6px; top: 66px; width: 26px; height: 5px; background: #0c1a2d; }
.ds-modern .ds-kasten { left: 6px; right: 6px; top: 75px; height: 11px; background: #f1f4f8; border-left: 2px solid #0c1a2d; }
.ds-modern .ds-fuss   { left: 6px; right: 6px; bottom: 4px; height: 5px; background: linear-gradient(90deg, #e2e6eb 22%, transparent 22% 26%, #e2e6eb 26% 48%, transparent 48% 52%, #e2e6eb 52% 74%, transparent 74% 78%, #e2e6eb 78%); }
body.dark-mode .design-ablage-aktiv { background: rgba(59,130,246,.15); }
@media (prefers-reduced-motion: reduce) { .design-ablage, .design-karte { transition: none; } .design-ablage-aktiv { transform: none; } }

/* ── Ausgabe-Dialog: Raster, das auf jeder Breite hält ───────────────────────
   Vorher standen die Spalten als Inline-Grid ohne min-width:0. iOS-Safari gibt
   Datumsfeldern eine feste Mindestbreite — „Fällig am" schob sich dadurch in
   „Bezahlt am", und unterschiedlich lange Beschriftungen versetzten die Felder
   einer Zeile gegeneinander. Jetzt: Spalten dürfen schrumpfen, Beschriftungen
   bleiben einzeilig (Hinweise stehen unter dem Feld), schmale Bildschirme
   bekommen weniger Spalten. */
#modal-box.modal-ausgabe { max-width: 600px; }
.exp-raster { display: grid; gap: 0 12px; align-items: start; }
.exp-raster > * { min-width: 0; }
/* Jede Zelle hält ihren Abstand nach unten — auch die letzte einer Zeile, sonst
   klebte im einspaltigen Handy-Layout das nächste Label am Feld darüber. */
.modal-form .exp-raster > .form-group,
.modal-form .exp-raster > .form-group:last-child { margin-bottom: 14px; }
.exp-raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.exp-raster-betrag { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modal-form .exp-raster label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-form input[type=date] {
  min-width: 0; max-width: 100%;
  -webkit-appearance: none; appearance: none;
  min-height: 36px; line-height: 1.3;
}
.modal-form input[type=date]::-webkit-date-and-time-value { text-align: left; }
.exp-datum-heute { display: flex; gap: 6px; min-width: 0; }
.exp-datum-heute input { flex: 1 1 auto; }
.exp-datum-heute .btn { flex: none; }
.exp-hilfe { font-size: 11.5px; color: var(--text-3); margin-top: 4px; line-height: 1.4; }
.exp-satz-knoepfe { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.modal-form label.exp-check {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 0; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; color: var(--text);
  white-space: normal;
}
.modal-form .exp-check input[type=checkbox] { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--primary); }
.exp-privat-schalter input[type=checkbox] { width: 18px; height: 18px; flex: none; accent-color: var(--primary); }
/* Kästchen in der rechten Spalte steht auf Höhe des Eingabefelds links. */
.modal-form label.exp-check-karte { margin-top: 22px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); min-height: 36px; box-sizing: border-box; }
/* Abschnittsüberschrift im Dialog: bündig mit den Feldern, nicht eingerückt wie in den Karten. */
#modal-box .form-section-header.exp-abschnitt { padding: 14px 0 8px; margin: 6px 0 12px; }

@media (max-width: 560px) {
  .exp-raster-betrag { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-raster-betrag .exp-satz { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 420px) {
  .exp-raster-2 { grid-template-columns: minmax(0, 1fr); }
  .modal-form label.exp-check-karte { margin-top: 0; }
}

/* ── Reiterleisten: nur waagerecht scrollen ──────────────────────────────────
   overflow-x: auto macht eine Leiste automatisch auch senkrecht scrollbar
   (CSS: ist eine Achse nicht „visible", wird die andere „auto"). Die Reiter
   ragten mit margin-bottom: -2px über die Linie hinaus — genau diese 2 px
   ließen sich auf dem iPad hoch und runter schieben. Jetzt: senkrecht
   abgeschnitten, und die graue Linie ist ein Schatten innen, damit die blaue
   Unterstreichung des aktiven Reiters dabei nicht mit abgeschnitten wird. */
.proj-tabs, .settings-tabs, #buch-tabs {
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  border-bottom: none;
  box-shadow: inset 0 -2px 0 var(--border);
  padding-bottom: 0;
}
.proj-tabs .proj-tab, .settings-tabs .settings-tab { margin-bottom: 0; }
@media (max-width: 1023px) {
  .proj-tabs, .settings-tabs { padding-bottom: 0; }
}

/* ── Abgleich Konto ↔ Buchhaltung: gleiche Spalten in allen Gruppen ─────── */
.bank-abgleich-gruppe { border-top: 1px solid var(--border); }
.bank-abgleich-gruppe > summary { list-style: none; }
.bank-abgleich-gruppe > summary::-webkit-details-marker { display: none; }
.bank-abgleich-tabelle { table-layout: fixed; width: 100%; }
.bank-abgleich-tabelle td { overflow: hidden; text-overflow: ellipsis; }
.bank-abgleich-tabelle .ba-datum { width: 110px; }
.bank-abgleich-tabelle .ba-name { width: 28%; }
.bank-abgleich-tabelle .ba-betrag { width: 120px; }
.bank-abgleich-tabelle .ba-aktion { width: 96px; }
@media (max-width: 640px) {
  .bank-abgleich-tabelle col.ba-text, .bank-abgleich-tabelle td.ba-text { display: none; }
  .bank-abgleich-tabelle .ba-datum { width: 84px; }
  .bank-abgleich-tabelle .ba-name { width: auto; }
  .bank-abgleich-tabelle .ba-betrag { width: 92px; }
  .bank-abgleich-tabelle .ba-aktion { width: 76px; }
}
.bank-abgleich-gruppe > summary { display: block !important; line-height: 1.5; }
.bank-abgleich-gruppe > summary > * { margin-right: 8px; }
.data-table.bank-abgleich-tabelle { min-width: 0 !important; }
@media (max-width: 640px) {
  .bank-abgleich-tabelle td { padding-left: 8px; padding-right: 8px; font-size: 12.5px; }
}

/* ── Zahlungseingänge: Kopf, Kacheln, Entscheidungsliste ───────────────────── */
.bank-untertitel { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.bank-abruf-hinweis { margin: 0 0 12px; font-size: 12.5px; color: var(--text-2); }
.bank-abruf-hinweis > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.bank-abruf-hinweis > summary::-webkit-details-marker { display: none; }
.bank-abruf-hinweis > div { padding: 8px 0 0 16px; line-height: 1.5; }
.bank-punkt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.bank-punkt-grau { background: var(--text-3); }
.bank-konto-zeile { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.bank-konto-zeile strong { color: var(--text); }
.bank-kachel-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.bank-kachel {
  display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color .15s ease, transform .15s ease; font: inherit; color: inherit; min-width: 0;
}
.bank-kachel:hover { border-color: var(--primary); }
.bank-kachel:active { transform: scale(.98); }
.bank-kachel-titel { font-size: 12px; color: var(--text-2); font-weight: 600; }
.bank-kachel-wert { font-size: 26px; font-weight: 700; line-height: 1.1; }
.bank-kachel-unter { font-size: 12px; color: var(--text-3); }
.bank-kachel.gut .bank-kachel-wert { color: var(--success); }
.bank-kachel.offen { border-color: var(--primary); }
.bank-kachel.offen .bank-kachel-wert { color: var(--primary); }
.bank-kachel.fehler .bank-kachel-wert { color: var(--danger); }
.bank-tab-zahl { font-size: 11.5px; font-weight: 700; color: var(--primary); }
.bank-hinweis-zeile { font-size: 13px; color: var(--text-2); margin: 0 0 12px; }
.bank-gruppe { margin-bottom: 16px; overflow: hidden; }
.bank-gruppe-kopf { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.bank-gruppe-kopf > span { font-size: 12px; font-weight: 700; color: var(--primary); margin-left: 4px; }
.bank-gruppe-kopf > div { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
.bank-zeile { padding: 12px 16px; border-bottom: 1px solid var(--border); display: grid; gap: 4px; grid-template-columns: minmax(0, 1fr); }
/* Langer Vorschlagsknopf darf umbrechen — auf dem Telefon schnitt er sonst die Zeile ab. */
.bank-zeile-aktion .btn { white-space: normal; text-align: left; max-width: 100%; }
.bank-zeile:last-child { border-bottom: none; }
.bank-zeile-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.bank-zeile-datum { font-size: 12px; color: var(--text-3); }
.bank-zeile-betrag { font-weight: 700; white-space: nowrap; }
.bank-zeile-betrag.rein { color: var(--success); }
.bank-zeile-betrag.raus { color: var(--danger); }
.bank-zeile-name { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.bank-zeile-zweck { font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.bank-zeile-aktion { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
.bank-zeile-hinweis { font-size: 12px; color: var(--text-3); }
.bank-wahl { display: grid; gap: 8px; }
.bank-wahl-knopf {
  display: grid; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--text); cursor: pointer; font: inherit;
}
.bank-wahl-knopf:hover { border-color: var(--primary); }
.bank-wahl-knopf span { font-size: 12px; color: var(--text-2); }
.bank-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
@media (max-width: 900px) { .bank-kachel-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .bank-kachel { padding: 12px; } .bank-kachel-wert { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .bank-kachel { transition: none; } .bank-kachel:active { transform: none; } }

.btn[hidden] { display: none !important; }
@media (max-width: 640px) {
  .page-header .actions.bank-aktionen { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .page-header .actions.bank-aktionen .btn { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
  .page-header .actions.bank-aktionen .btn-primary { flex-basis: 100%; }
}

/* ── Kundenart im Kundenformular ─────────────────────────────────────────── */
.kundenart { margin: 4px 0 16px; }
.kundenart-titel { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.kundenart-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kundenart-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.kundenart-option:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.kundenart-option input { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: var(--primary); }
.kundenart-option span { display: grid; gap: 2px; }
.kundenart-option small { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.kundenart-haken { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.kundenart-haken label { display: flex; gap: 8px; align-items: center; font-size: 13.5px; cursor: pointer; }
.kundenart-haken input { width: 16px; height: 16px; accent-color: var(--primary); }
.kundenart-haken small { color: var(--text-3); }
.kundenart-hilfe { font-size: 12px; color: var(--text-3); margin: 6px 0 0; }
@media (max-width: 560px) { .kundenart-wahl { grid-template-columns: minmax(0, 1fr); } }

/* ── Tags an Artikeln und Positionen ─────────────────────────────────────── */
.tag-auswahl { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tag-auswahl label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text); margin: 0; }
.tag-auswahl input { width: 16px; height: 16px; accent-color: var(--primary); }
.tag-chip { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 10px; margin: 0 4px 0 0; background: var(--sidebar-hover); color: var(--text-2); }
.tag-chip.tag-uniqscreen { background: #dbeafe; color: #1d4ed8; }
.tag-chip.tag-avv { background: #ede9fe; color: #6d28d9; }
.tag-chip.tag-content { background: #fef3c7; color: #b45309; }
body.dark-mode .tag-chip { filter: brightness(.85); }
.pos-tag-zeile { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.pos-tag-knopf { font-size: 11px; padding: 1px 8px; border: 1px dashed var(--border); border-radius: 10px; background: none; color: var(--text-3); cursor: pointer; }
.pos-tag-knopf:hover { color: var(--primary); border-color: var(--primary); }

/* ── Rechtstexte ─────────────────────────────────────────────────────────── */
.rt-art { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.rt-art-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rt-art-kopf a { font-size: 12.5px; }
.rt-tabelle { margin-top: 8px; }
.rt-status { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; background: var(--sidebar-hover); color: var(--text-2); }
.rt-status.rt-veroeffentlicht { background: var(--success-bg); color: var(--success); }
.rt-status.rt-entwurf { background: var(--warning-bg); color: var(--warning); }
#modal-box.modal-rechtstext { max-width: min(1200px, calc(100vw - 32px)); }
.rt-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rt-spalten textarea { width: 100%; min-height: 55vh; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.rt-vorschau { border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; height: 55vh; overflow: auto; font-size: 13px; line-height: 1.55; background: var(--card); }
.rt-vorschau h1 { font-size: 18px; } .rt-vorschau h2 { font-size: 15px; margin: 14px 0 4px; } .rt-vorschau h3 { font-size: 13.5px; margin: 10px 0 2px; }
@media (max-width: 900px) { .rt-spalten { grid-template-columns: minmax(0, 1fr); } .rt-spalten textarea, .rt-vorschau { min-height: 40vh; height: auto; } }

.rt-abgleich { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; font-size: 13px; }

/* ── Steuerberatung (nur lesen) ───────────────────────────────────────────── */
.kanzlei-leiste { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 20px 28px -8px; max-width: 1384px; box-sizing: border-box; padding: 10px 16px;
  border-radius: 10px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; font-size: 13px; line-height: 1.45; }
.kanzlei-leiste strong { white-space: nowrap; }
@media (max-width: 1024px) { .kanzlei-leiste { margin: 14px 20px -6px; } }
@media (max-width: 640px) { .kanzlei-leiste { margin: 10px 12px 0; font-size: 12.5px; } }
body.dark-mode .kanzlei-leiste { background: #172554; border-color: #1e40af; color: #dbeafe; }
.einl-link { display: block; width: 100%; box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all;
  padding: 8px 10px; border-radius: 7px; background: var(--bg); border: 1px solid var(--border); user-select: all; }

/* ── Gesamtprüfung 10/2026: Tabellen ohne Schieben ab 1280 px ───────────────── */
/* Ziehgriff der letzten Spalte ragte 4 px über die Tabelle (Phantom-Rollbalken). */
.data-table th:last-child > .spalte-griff { right: 0; }
/* Kopf der Zahlenspalten wie die übrigen Köpfe — .data-table .num (Monospace 13 px)
   schlug .data-table th und machte die Spalten breiter. */
.data-table th.num { font-family: inherit; font-size: clamp(10.5px, 0.62vw, 11.5px); }
/* Anlagenverzeichnis: wie die Ausgaben dicht gesetzt (vorher 162 px zu breit bei 1280). */
.tbl-buch[data-spalten="anlagen"] th { white-space: normal; }
.tbl-buch[data-spalten="anlagen"] th, .tbl-buch[data-spalten="anlagen"] td { padding-left: 5px; padding-right: 5px; }
.tbl-buch[data-spalten="anlagen"] .num { font-family: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tbl-buch[data-spalten="anlagen"] .buch-cat-badge { font-size: 10.5px; padding: 2px 6px; }
/* Buchungsjournal: lange Belegnummern/Namen ohne Leerstelle brechen um. */
.data-table[data-spalten="journal"] .zelle-text { white-space: normal; overflow-wrap: anywhere; min-width: 80px; }
/* Reiterleiste der Buchhaltung: zweizeilig statt drei Reiter außer Sicht. */
@media (min-width: 1024px) { #buch-tabs { flex-wrap: wrap; overflow-x: visible; } }
/* …auch gegen die dichten Tabellenregeln (.tbl-buch[data-spalten=…] .num) */
.tbl-buch[data-spalten] th.num { font-size: clamp(10.5px, 0.62vw, 11.5px); }