/* M&H Manager — Oberfläche im Terminify-Markenstil (agency/wiki/markenstil.md im Brain):
   Blau #1D49E8 sparsam als Akzent, Creme als Grund, Weiß für Karten, Haarlinien statt Rahmen,
   Playfair Display kursiv für kurze Titel, Inter für alles andere. Die Seitenleiste nutzt das
   Theme „Blau“ (blaue Fläche, gebrochenes Weiß). Schriften sind selbst gehostet. */

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  /* Markenfarben */
  --blau: #1D49E8;
  --blau-strong: #1638C4;
  --blau-raised: #3159EC;
  --blau-line: #4E70F0;
  --creme: #f2ede3;
  --weiss: #f4f1ec;
  --ink: #14203f;
  --ink-muted: #5b6680;
  --mark-old: #7a8296;
  --line: #e2e5ec;

  /* Rollen */
  --background: var(--creme);
  --foreground: var(--ink);
  --card: #ffffff;
  --card-elevated: #ffffff;
  --popover: #ffffff;
  --border: var(--line);
  --border-soft: #edeef2;
  --hover: rgba(20, 32, 63, 0.035);
  --muted: #f7f5f0;
  --muted-2: #e6e2d8;
  --muted-foreground: var(--ink-muted);
  --faint-foreground: var(--mark-old);
  --primary: var(--blau);
  --primary-foreground: var(--weiss);
  --primary-tint: rgba(29, 73, 232, 0.08);
  --cta: var(--blau);
  --cta-hover: var(--blau-strong);
  --cta-foreground: var(--weiss);
  --ring: rgba(29, 73, 232, 0.28);
  --destructive: #a8321e;            /* nur für Fehler und Überfälliges */
  --destructive-tint: rgba(168, 50, 30, 0.08);
  --amber: #9a5b06;
  --amber-tint: rgba(196, 128, 18, 0.12);
  --chip-active-bg: var(--ink);
  --chip-active-fg: var(--weiss);
  --chip-count-bg: rgba(244, 241, 236, 0.2);
  --backdrop: rgba(20, 32, 63, 0.32);
  --shadow-card: 0 1px 2px rgba(20,32,63,.06), 0 12px 32px rgba(20,32,63,.08);
  --radius: 6px;          /* radius-sm: Buttons, Felder */
  --radius-xl: 14px;      /* radius-md: Karten */
  --radius-2xl: 14px;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Playfair Display", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; height: 100%; }
body {
  font-family: var(--sans);
  background: var(--background);
  color: var(--foreground);
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  transition: background .2s ease, color .2s ease;
}
button { font-family: inherit; font-size: inherit; cursor: pointer; color: inherit; background: none; border: none; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
svg { flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted-foreground); }
.faint { color: var(--faint-foreground); }
.small { font-size: .85rem; }
.tnum { font-variant-numeric: tabular-nums; }
.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* ---------- Shell: Sidebar + Main ---------- */
.shell { display: flex; min-height: 100svh; }
.sidebar, .drawer {
  --sb-text: var(--weiss);
  --sb-muted: #E4EAFF;
  background: var(--blau); color: var(--sb-text);
}
.sidebar {
  width: 256px; flex-shrink: 0;
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
}
.sidebar .logo-row, .drawer .logo-row { display: flex; align-items: center; gap: 8px; padding: 16px 8px; white-space: nowrap; }
.sidebar .logo-row img, .drawer .logo-row img { height: 28px; width: auto; display: block; }
.brandmark { display: inline-flex; align-items: center; }
.brandmark img { height: 24px; width: auto; display: block; }
.logo-badge {
  border-radius: var(--radius); background: var(--blau-strong); padding: 3px 7px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
  color: var(--sb-muted);
}
.nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  border-radius: var(--radius); padding: 10px 12px;
  font-size: .92rem; font-weight: 500;
  color: var(--sb-muted);
  transition: background .15s, color .15s;
  width: 100%; text-align: left;
}
.nav-item svg { width: 16px; height: 16px; color: var(--sb-muted); transition: color .15s; }
.nav-item:hover { background: var(--blau-strong); color: var(--sb-text); }
.nav-item:hover svg { color: var(--sb-text); }
.nav-item.active { background: var(--weiss); color: var(--blau); font-weight: 600; }
.nav-item.active svg { color: var(--blau); }
.nav-item:focus-visible { outline-color: var(--weiss); }
.nav-bottom { display: flex; flex-direction: column; gap: 8px; }
.nav-item.settings.active { background: var(--weiss); color: var(--blau); }
.nav-item.settings.active svg { color: var(--blau); }
.user-card {
  border: 1px solid var(--blau-line); background: var(--blau-strong);
  border-radius: var(--radius-xl); padding: 12px;
  display: flex; align-items: center; gap: 12px;
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--weiss); color: var(--blau);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
}
.user-card .who { min-width: 0; flex: 1; }
.user-card .who .name { font-size: .9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card .who .role { font-size: .75rem; color: var(--sb-muted); }
.iconbtn {
  border-radius: var(--radius); padding: 8px; color: var(--faint-foreground);
  transition: background .15s, color .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.iconbtn:hover { background: var(--muted-2); color: var(--foreground); }
.sidebar .iconbtn, .drawer .iconbtn { color: var(--sb-muted); }
.sidebar .iconbtn:hover, .drawer .iconbtn:hover { background: var(--blau-raised); color: var(--sb-text); }
.iconbtn svg { width: 16px; height: 16px; }

/* Mobile Header + Drawer */
.mobile-header { display: none; }
.drawer-back { position: fixed; inset: 0; z-index: 90; background: var(--backdrop); backdrop-filter: blur(2px); }
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 91; width: 288px;
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  animation: drawer-in .2s ease;
}
@keyframes drawer-in { from { transform: translateX(-2.5rem); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 1023px) {
  .sidebar { display: none; }
  .mobile-header {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--blau-line); background: var(--blau); color: var(--weiss);
    padding: 12px 16px; position: sticky; top: 0; z-index: 40;
  }
}

/* ---------- Seiten-Layout ---------- */
main { flex: 1; min-width: 0; }
.page { padding: 32px 20px; }
@media (min-width: 640px) { .page { padding: 32px 32px; } }
.page.narrow { max-width: 1024px; margin: 0 auto; }
.page.wide { max-width: 1280px; margin: 0 auto; }
.page-head { margin-bottom: 24px; }
.page-head h1 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 2.25rem; line-height: 1.1;
  color: var(--primary); font-variant-numeric: lining-nums; text-wrap: balance; }
.page-head .eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.page-head .sub { margin-top: 8px; color: var(--muted-foreground); max-width: 680px; }
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.backlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .88rem; color: var(--muted-foreground); margin-bottom: 12px;
  transition: color .15s;
}
.backlink:hover { color: var(--foreground); }
.backlink svg { width: 15px; height: 15px; }

/* ---------- Karten ---------- */
.card {
  border: 1px solid var(--border); background: var(--card);
  border-radius: var(--radius-2xl); padding: 24px; margin-bottom: 16px;
}
.card > h2, .section-title {
  font-size: 12px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em;
  color: var(--muted-foreground); margin-bottom: 16px;
}
.card > h3.card-title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.5rem; color: var(--primary); margin-bottom: 12px; }
.card-plain { border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-2xl); }
.subsection {
  border: 1px solid var(--border-soft); background: var(--hover);
  border-radius: var(--radius-xl); padding: 16px; margin-bottom: 12px;
}

/* KPI-Karten (kompakt, Icon-Kachel links) */
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 20px; }
.kpi {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); background: var(--card);
  border-radius: var(--radius-2xl); padding: 16px 20px;
  text-align: left; width: 100%;
}
.kpi.clickable { cursor: pointer; transition: border-color .15s; }
.kpi.clickable:hover { border-color: var(--primary); }
.kpi .tile {
  width: 40px; height: 40px; border-radius: var(--radius-xl); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.kpi .tile svg { width: 20px; height: 20px; }
.kpi .label { font-size: .78rem; color: var(--muted-foreground); }
.kpi .value { font-family: var(--display); font-size: 1.45rem; font-weight: 400; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .hint { font-size: .72rem; color: var(--faint-foreground); }
.kpi .txt { min-width: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius); border: 1px solid transparent;
  height: 40px; padding: 0 16px;
  font-size: .9rem; font-weight: 500; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn svg { width: 16px; height: 16px; }
.btn.cta, .btn.primary { background: var(--cta); color: var(--cta-foreground); font-weight: 600; border-color: var(--cta); }
.btn.cta:hover, .btn.primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); }
.btn.outline { border-color: var(--primary); color: var(--primary); background: transparent; font-weight: 600; }
.btn.outline:hover { background: var(--primary-tint); }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn .arrow { transition: none; } .btn:hover .arrow { transform: none; } }
.btn.ghost:hover { background: var(--hover); }
.btn.danger { background: var(--destructive-tint); color: var(--destructive); }
.btn.danger:hover { background: color-mix(in srgb, var(--destructive) 22%, transparent); }
.btn.small { height: 32px; padding: 0 12px; font-size: .84rem; border-radius: var(--radius); }
.btn.small svg { width: 14px; height: 14px; }

/* ---------- Formulare ---------- */
label.field { display: block; margin-bottom: 14px; flex: 1; min-width: 0; }
label.field > span, .field-label {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 7px;
}
input[type=text], input[type=date], input[type=month], input[type=number], input[type=email], input[type=password], input[type=tel], input[type=search], input[type=url], select, textarea {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #ffffff; color: var(--foreground);
  font-size: .92rem;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
textarea { height: auto; padding: 10px 12px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--faint-foreground); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); background: #ffffff; }
input:disabled, select:disabled, textarea:disabled { background: var(--muted); color: var(--muted-foreground); }
input.invalid, select.invalid, textarea.invalid { border-color: var(--destructive); }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--primary); }
.field-hint { font-size: .78rem; color: var(--faint-foreground); margin-top: 5px; }
.field-error { font-size: .82rem; color: var(--destructive); margin-top: 5px; }
.inline { display: flex; gap: 12px; }
.inline > * { flex: 1; min-width: 0; }

/* Suche mit Icon. Die Grundbreite von 220 px lässt die Toolbar umbrechen, bevor das Feld unlesbar schmal wird
   (Kundenliste auf dem Handy); wo es schon mindestens so breit war, ändert sich nichts. */
.searchwrap { position: relative; flex: 1 1 220px; max-width: 340px; }
.searchwrap svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--faint-foreground); pointer-events: none;
}
.searchwrap input { padding-left: 38px; }

/* Toolbar über Listen */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

/* Filter-Chips mit Zählern */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; }
.chip {
  display: inline-flex; flex-shrink: 0; align-items: center; gap: 7px;
  border-radius: 999px; padding: 7px 14px;
  font-size: .88rem; border: 1px solid var(--border);
  color: var(--muted-foreground);
  transition: background .15s, color .15s;
}
.chip:hover { background: var(--hover); }
.chip.active { background: var(--chip-active-bg); color: var(--chip-active-fg); border-color: transparent; font-weight: 600; }
.chip .count { border-radius: 999px; padding: 1px 7px; font-size: .74rem; background: var(--muted-2); color: var(--muted-foreground); }
.chip.active .count { background: var(--chip-count-bg); color: var(--chip-active-fg); }

/* ---------- Tabellen ---------- */
.tablecard { border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-2xl); overflow: hidden; margin-bottom: 16px; }
/* position: relative macht den Scrollrahmen zum Bezugsrahmen für absolut positionierte Hilfstexte (.sr-only im
   Tabellenkopf). Ohne das entkommen sie dem Rahmen und verbreitern auf dem Handy die ganze Seite. */
.tablewrap { overflow-x: auto; position: relative; }
table.list { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.list th {
  text-align: left; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted-foreground);
  padding: 12px 16px; border-bottom: 1px solid var(--border-soft);
}
table.list td { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.list tbody tr { transition: background .12s, --row-bg .12s; }
table.list tbody tr:last-child td { border-bottom: none; }
table.list tbody tr:not(.nohover):hover { background: var(--hover); --row-bg: var(--hover); cursor: pointer; }
table.list td.num, table.list th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.list td.docno { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty-note { color: var(--faint-foreground); text-align: center; padding: 44px 16px; font-size: .9rem; }

/* Aktionsspalte breiter Tabellen: class="sticky-right" an th und td der letzten Spalte. Scrollt die Tabelle in
   ihrem .tablewrap waagerecht, bleibt die Spalte am rechten Rand stehen. Die Zelle ist deckend in der Farbe der
   Karte (auf anderem Grund: --sticky-bg setzen). Getönte Zeilen geben ihre Tönung über --row-bg weiter, damit die
   Zelle dieselbe Farbe zeigt wie der Rest der Zeile: beim Überfahren schon gesetzt; wer Zeilen markiert oder
   streift, setzt an der Zeile neben background auch --row-bg. Die Trennlinie links zeichnet die Zelle innen.
   Erst ab 640 px: Auf dem Handy würde eine stehende Spalte mit Textknopf die halbe Tabelle verdecken, dort
   scrollt die Tabelle wie bisher als Ganzes. */
@property --row-bg { syntax: '<color>'; inherits: true; initial-value: transparent; }
@media (min-width: 640px) {
  table.list th.sticky-right, table.list td.sticky-right {
    position: sticky; right: 0; z-index: 1;
    background: linear-gradient(var(--row-bg, transparent), var(--row-bg, transparent)) var(--sticky-bg, var(--card));
    box-shadow: inset 1px 0 0 var(--border-soft);
  }
}

/* Breite Tabellen (class="list dense"): engerer Abstand zwischen den Spalten. Außen bleiben die 16 px, damit der
   Zelltext bündig mit dem Kartentext steht. */
table.list.dense th:not(:first-child), table.list.dense td:not(:first-child) { padding-left: 10px; }
table.list.dense th:not(:last-child), table.list.dense td:not(:last-child) { padding-right: 10px; }

/* ---------- Status-Pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; border: 1px solid; padding: 3px 10px;
  font-size: .76rem; font-weight: 500; white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.bezahlt, .badge.gruen, .badge.blau { background: var(--primary-tint); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.badge.offen { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); }
.badge.teilbezahlt, .badge.gelb { background: var(--amber-tint); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 28%, transparent); }
.badge.ueberfaellig, .badge.rot { background: var(--destructive-tint); color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 25%, transparent); }
.badge.storniert { background: var(--muted); color: var(--faint-foreground); border-color: var(--border); text-decoration: line-through; }
.badge.entwurf { background: transparent; color: var(--faint-foreground); border-style: dashed; border-color: var(--muted-2); }
.badge.final { background: var(--primary-tint); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.badge.neutral { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); }

/* ---------- Info-/Warnboxen ---------- */
.info-box {
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  background: var(--primary-tint);
  border-radius: var(--radius-xl); padding: 14px 18px; margin-bottom: 16px; font-size: .92rem;
}
.warn-box {
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  background: var(--amber-tint); color: var(--amber);
  border-radius: var(--radius-xl); padding: 13px 16px; margin-bottom: 14px; font-size: .92rem;
}
.error-box {
  border: 1px solid color-mix(in srgb, var(--destructive) 30%, transparent);
  background: var(--destructive-tint); color: var(--destructive);
  border-radius: var(--radius-xl); padding: 13px 16px; margin-bottom: 14px; font-size: .92rem;
}

/* ---------- Modal ---------- */
.modal-back {
  position: fixed; inset: 0; z-index: 100;
  background: var(--backdrop); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fade-in .1s ease;
}
.modal {
  background: var(--popover); border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  padding: 20px; width: 100%; max-width: 640px; max-height: 88svh; overflow-y: auto;
  animation: pop-in .12s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.modal.wide { max-width: 1000px; }
.modal h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 14px; }
.modal .btn-row { margin-top: 18px; justify-content: flex-end; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.95); } }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Toast ---------- */
#toast { position: fixed; top: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--popover); color: var(--foreground);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 11px 16px; font-size: .9rem;
  box-shadow: 0 8px 30px rgba(0,0,0,.18);
  animation: toast-in .18s ease;
}
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.toast.error::before { background: var(--destructive); }
.toast.success::before { background: var(--primary); }
.toast.warn::before { background: var(--amber); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Speicherstatus-Dock (unten rechts) ---------- */
.save-dock {
  position: fixed; bottom: 20px; right: 20px; z-index: 80;
  display: flex; align-items: center; gap: 8px;
  border-radius: 999px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(8px);
  padding: 9px 14px; font-size: .82rem; font-weight: 600;
  box-shadow: 0 10px 40px rgba(0,0,0,.16);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.save-dock.visible { opacity: 1; }
.save-dock .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.save-dock.saving .dot { background: var(--amber); animation: pulse 1s ease-in-out infinite; }
.save-dock.error { color: var(--destructive); }
.save-dock.error .dot { background: var(--destructive); }
@keyframes pulse { 50% { opacity: .4; } }

/* ---------- Segmented Control ---------- */
.seg { display: inline-flex; border: 1px solid var(--border); background: var(--muted); border-radius: var(--radius-xl); padding: 4px; }
.seg button { border-radius: var(--radius); padding: 7px 16px; font-size: .88rem; font-weight: 500; color: var(--muted-foreground); transition: background .15s, color .15s; }
.seg button.active { background: var(--chip-active-bg); color: var(--chip-active-fg); font-weight: 600; }

/* ---------- Statistik ---------- */
.statgrid { display: grid; gap: 16px; }
@media (min-width: 1024px) { .statgrid.two { grid-template-columns: 1fr 1fr; } }
.chart { display: flex; align-items: flex-end; gap: 8px; height: 190px; padding: 10px 4px 0; }
.chart .bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; cursor: pointer; }
.chart .bar { width: 68%; max-width: 42px; background: var(--primary); border-radius: 6px 6px 2px 2px; min-height: 3px; transition: filter .15s; }
.chart .bar-wrap:hover .bar { filter: brightness(1.15); }
.chart .bar.empty { background: var(--muted-2); }
.chart .month { font-size: .72rem; color: var(--faint-foreground); margin-top: 8px; }
.chart .month.active { color: var(--primary); font-weight: 700; }

/* ---------- Empty State ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px dashed var(--muted-2); border-radius: var(--radius-xl);
  padding: 40px 16px; text-align: center; margin-top: 8px;
}
.empty-state .es-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--muted); color: var(--faint-foreground);
  display: flex; align-items: center; justify-content: center;
}
.empty-state .es-icon svg { width: 20px; height: 20px; }
.empty-state .es-title { margin-top: 12px; font-weight: 500; }
.empty-state .es-text { margin-top: 4px; max-width: 340px; font-size: .88rem; color: var(--faint-foreground); }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; padding: 20px;
  background: var(--background);
}
.login-card {
  position: relative; width: 420px; max-width: 100%;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-2xl); padding: 40px;
  box-shadow: var(--shadow-card);
}
.login-card img.wordmark { height: 40px; display: block; margin: 0 auto 18px; }
.login-card .login-brand { text-align: center; margin-bottom: 6px; font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.9rem; color: var(--primary); }
.login-card .login-sub {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: .82rem; color: var(--muted-foreground); margin-bottom: 26px;
}
.login-card .login-sub { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }

/* ---------- Editor-Kopf ---------- */
.editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.editor-head .left { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.editor-head h1.title, .editor-head h2.title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 1.9rem; line-height: 1.15; color: var(--primary); margin: 0; font-variant-numeric: lining-nums; }
.editor-head .sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .84rem; color: var(--muted-foreground); margin-top: 5px; }
.editor-head .right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .grid2 { grid-template-columns: 1fr; } }
.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
/* minmax(0, 1fr): Die Spalten richten sich nach dem Platz, nicht nach dem breitesten Inhalt. Breite Tabellen
   scrollen dann in ihrem .tablewrap, statt die Seite zu verbreitern. */
.board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .board { grid-template-columns: minmax(0, 1fr); } }

.pos-table td { vertical-align: top; }
.pos-table input, .pos-table select { height: 36px; font-size: .88rem; }

.preview-frame { width: 100%; height: 78svh; border: 1px solid var(--border); border-radius: var(--radius-xl); background: #ebe7de; }

/* Dropzone / Upload-Bereiche */
.dropzone {
  border: 2px dashed var(--muted-2); border-radius: var(--radius-xl);
  padding: 40px 20px; text-align: center; color: var(--muted-foreground); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--primary); background: var(--primary-tint); }

/* ---------- Dashboard ---------- */
.legend { display: flex; gap: 14px; font-size: .8rem; color: var(--muted-foreground); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend .sw.cur { background: var(--primary); }
.legend .sw.prev { background: #c9d3f8; }

.chart2 { display: flex; align-items: flex-end; gap: 6px; padding: 14px 2px 0; }
.c2-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; }
.c2-bars { display: flex; align-items: flex-end; gap: 3px; height: 190px; }
.c2-bar { width: 14px; border-radius: 5px 5px 2px 2px; transition: filter .15s; }
.c2-bar.cur { background: var(--primary); }
.c2-bar.prev { background: #c9d3f8; }
.c2-col:hover .c2-bar.cur { filter: brightness(1.12); }
.c2-val { font-size: .64rem; color: var(--faint-foreground); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.c2-label { font-size: .72rem; color: var(--muted-foreground); margin-top: 2px; }

.bar-row { margin-bottom: 14px; }
.br-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 5px; }
.br-name { font-size: .92rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-val { font-size: .92rem; font-weight: 600; white-space: nowrap; }
.br-track { height: 8px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.br-fill { height: 100%; border-radius: 999px; background: var(--primary); }
.br-meta { font-size: .76rem; color: var(--faint-foreground); margin-top: 4px; }

.cov-block { border: 1px solid var(--border-soft); border-radius: var(--radius-xl); padding: 14px 16px; margin-bottom: 12px; background: var(--hover); }
.cov-block.light { padding: 10px 12px; }
.cov-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cov-name { font-weight: 600; }
.tl { display: flex; gap: 3px; flex-wrap: wrap; }
.tl-cell { flex: 1; min-width: 42px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: .62rem; border: 1px solid transparent; }
.tl-cell.ok { background: var(--primary-tint); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 22%, transparent); }
.tl-cell.gap { background: var(--destructive-tint); color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 25%, transparent); font-weight: 700; }
.tl-cell.open { background: var(--amber-tint); color: var(--amber); border-color: color-mix(in srgb, var(--amber) 25%, transparent); }
.tl-cell.now { background: var(--muted); color: var(--faint-foreground); border-style: dashed; border-color: var(--muted-2); }

/* ---------- Ergänzungen M&H ---------- */
.titel-kursiv { font-family: var(--display); font-style: italic; font-weight: 400; color: var(--primary); font-variant-numeric: lining-nums; }
.label-caps { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-foreground); }
.surface-alt { background: var(--creme); }
.tax-explain { border-left: 2px solid var(--primary); padding: 8px 12px; background: var(--primary-tint); border-radius: 0 var(--radius) var(--radius) 0; font-size: .86rem; margin-top: 8px; }
.checklist { list-style: none; display: flex; flex-direction: column; gap: 10px; }
/* Nur die Punkte selbst (direkte Kinder): Listen innerhalb eines Punkts, z. B. „Kunden anzeigen“ in den Kontrollen,
   bleiben gewöhnliche Listen. Die erste Spalte trägt das Symbol, die zweite darf schrumpfen (minmax(0, 1fr)). */
.checklist > li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.checklist > li > svg { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.checklist > .ok > svg { stroke: var(--primary); }
.checklist > .no > svg { stroke: var(--mark-old); }
.checklist .detail { font-size: .8rem; color: var(--muted-foreground); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: .9rem; }
.kv dt { color: var(--muted-foreground); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; word-break: break-word; }
.hash { font-family: var(--mono); font-size: .76rem; color: var(--muted-foreground); word-break: break-all; }
.problem-list { margin: 6px 0 0 18px; display: flex; flex-direction: column; gap: 4px; }
.pos-kind { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pos-kind button { padding: 4px 10px; font-size: .78rem; color: var(--muted-foreground); }
.pos-kind button.active { background: var(--ink); color: var(--weiss); }
.otp-input { letter-spacing: .4em; font-size: 1.3rem !important; text-align: center; font-variant-numeric: tabular-nums; }
.qr-img { width: 200px; height: 200px; display: block; margin: 8px auto; border: 1px solid var(--border); border-radius: var(--radius-xl); }
tr.reversed td { color: var(--faint-foreground); text-decoration: line-through; }
.pill-link { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Kennzahl-Kacheln mit Tonart statt Hex-Farbe */
.kpi .tile.primary { background: var(--primary-tint); color: var(--primary); }
.kpi .tile.neutral { background: var(--muted); color: var(--muted-foreground); }
.kpi .tile.danger { background: var(--destructive-tint); color: var(--destructive); }
.kpi .tile.warn { background: var(--amber-tint); color: var(--amber); }
/* Auswahllisten in Dialogen */
.pick-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; max-height: 52svh; overflow-y: auto; }
.pick-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); cursor: pointer; text-align: left; width: 100%; }
.pick-row:last-child { border-bottom: none; }
.pick-row:hover { background: var(--hover); }
.pick-row.selected { background: var(--primary-tint); }
.check-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.table-foot { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border-soft); font-size: .86rem; color: var(--muted-foreground); }
.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; }

/* Ergänzungen aus den Ansichten */
.field-warn { font-size: .82rem; color: var(--amber); margin-top: 5px; }
.pos-kind button:disabled { opacity: .55; cursor: not-allowed; }
.status-line { font-size: .78rem; color: var(--muted-foreground); margin-top: 3px; }
.status-line.warn { color: var(--amber); }
.status-line.ok { color: var(--primary); }
.tablecard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 20px 16px 16px; border-bottom: 1px solid var(--border-soft); }
.history { list-style: none; display: flex; flex-direction: column; }
.history > li { padding: 10px 0; border-bottom: 1px solid var(--border-soft); }
.history > li:last-child { border-bottom: none; }
.history .h-head { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--muted-foreground); }
.row.tight { row-gap: 0; }

/* Ergänzungen für den Rechnungs-Editor */
.btn[hidden], .iconbtn[hidden] { display: none; }
.preview-col { position: sticky; top: 16px; min-width: 0; align-self: start; }
.pos-table td { padding: 12px 8px; }
.label-caps.primary { color: var(--primary); }
.iconbtn.sm { padding: 4px; }
.iconbtn.sm svg { width: 14px; height: 14px; }
.attach-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.attach-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: .88rem; }
.attach-list li:last-child { border-bottom: none; }
@media (max-width: 900px) { .preview-col { position: static; } }

/* Runde 2: Editor */
table.list.pos-table td { padding: 12px 8px; vertical-align: top; }
.pick-row.top { align-items: flex-start; }
.dropzone.compact { padding: 18px 16px; }
.pre-wrap { white-space: pre-wrap; }

/* Runde 3: lange Dateinamen in Fehler- und Hinweislisten umbrechen */
.problem-list li { overflow-wrap: anywhere; }

/* Runde 4: Hinweise der Integritätsprüfung mit „Quittieren“ (Einstellungen und Protokoll) */
.hint-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.hint-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; }
.hint-list li > span { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.hint-list .btn { flex-shrink: 0; background: var(--card); }
.ack-hints { margin: 0 0 14px; font-size: .9rem; }
.ack-hints > summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: .85rem; }
.ack-list { list-style: none; display: flex; flex-direction: column; margin-top: 8px; }
.ack-list li { padding: 8px 0; border-bottom: 1px solid var(--border-soft); overflow-wrap: anywhere; }
.ack-list li:last-child { border-bottom: none; }