/* ============================================================
   dashboard.css — Live-Dashboard Modul
   ============================================================ */

/* ---- Stammdaten-Onboarding-Banner ---- */

.db-onboarding {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin-bottom: 18px;
  background: var(--warn-soft);
  border: 1px solid var(--warn-soft);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  font-family: var(--font-body);
  color: var(--warn);
}

.db-onboarding--dringend {
  background: var(--neg-soft);
  border-color: var(--neg-soft);
  border-left-color: var(--neg);
  color: var(--neg);
}

.db-onboarding-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 50%;
  color: var(--warn);
}
.db-onboarding--dringend .db-onboarding-icon {
  background: transparent;
  color: var(--neg);
}

.db-onboarding-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.db-onboarding-text strong {
  font-size: 13.5px;
  font-weight: 700;
}
.db-onboarding-text span {
  font-size: 12px;
  line-height: 1.4;
  color: inherit;
  opacity: .85;
}
.db-onboarding-text em {
  font-style: normal;
  font-weight: 600;
  background: rgba(0,0,0,.05);
  padding: 1px 6px;
  border-radius: 3px;
}

.db-onboarding-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--surface);
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  white-space: nowrap;
}
.db-onboarding-btn:hover {
  background: rgba(140,90,0,.05);
}
.db-onboarding--dringend .db-onboarding-btn {
  color: var(--neg);
  border-color: var(--neg);
}
.db-onboarding--dringend .db-onboarding-btn:hover {
  background: rgba(180,35,44,.05);
}

/* ---- Header ---- */
.db-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 16px;
  flex-wrap: wrap;
}

.db-titel {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 650;
  line-height: 1.15;
  margin-bottom: 2px;
  color: var(--text);
  letter-spacing: -.3px;
}

.db-untertitel {
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 500;
  margin-top: 0;
  line-height: 1.3;
}

/* Sekundär-Button: Outline-Style. Aktualisieren, Quick-Invoice etc. */
.db-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border-mid);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  flex-shrink: 0;
}

@media (hover: hover) {
  .db-refresh-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
  }
}

.db-refresh-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.db-refresh-btn:active {
  transform: scale(0.98);
}
.db-refresh-btn:active svg {
  animation: spin .5s linear;
}

/* Primary-Button: max EIN pro Ansicht — hier Wochenbericht */
.db-bericht-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 7px 15px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  flex-shrink: 0;
}
@media (hover: hover) {
  .db-bericht-btn:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
  }
}
.db-bericht-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}
.db-bericht-btn:active { transform: scale(0.98); }

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Branche-Tag neben dem Titel (z.B. "(Elektrotechnik)") */
.db-titel-branche {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 14px;
  margin-left: 6px;
  letter-spacing: 0;
}

/* VDE-Tag — dezenter Chip neben dem Titel (nur Branche=Elektro).
   Ruhezustand: neutraler Chip. Warnung: rote Signal-Färbung ohne Pulse. */
.db-vde-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  margin-left: 10px;
  vertical-align: middle;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-soft);
  letter-spacing: 0.05em;
}
.db-vde-tag.warnung {
  background: var(--neg-soft);
  color: var(--neg);
  border-color: var(--neg-soft);
  cursor: pointer;
  transition: border-color var(--transition);
}
.db-vde-tag.warnung:hover {
  border-color: var(--neg);
}

/* Position-Anker fuer das VDE-Popover */
.db-titel-block { position: relative; }

/* VDE-Detail-Popover (Klick auf .db-vde-tag.warnung) */
.db-vde-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  width: 280px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.18);
  padding: 12px 14px;
  font-size: 12px;
}
.db-vde-pop-titel {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-strong, #1e293b);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.db-vde-pop-liste {
  max-height: 220px;
  overflow-y: auto;
}
.db-vde-pop-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 5px 2px;
  border-bottom: 1px dashed var(--border);
}
.db-vde-pop-zeile:last-child { border-bottom: none; }
.db-vde-pop-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-strong, #1e293b);
  font-weight: 500;
}
.db-vde-pop-tage {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}
.db-vde-pop-zeile.ueberfaellig .db-vde-pop-tage {
  color: #b91c1c;
  font-weight: 700;
}
.db-vde-pop-close {
  width: 100%;
  margin-top: 10px;
  padding: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.db-vde-pop-close:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* ============================================================
   KPI-KARTEN
   ============================================================ */
.db-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1100px) { .db-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .db-kpi-grid { grid-template-columns: 1fr; } }

.db-kpi-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}

/* Farbige Top-Linie pro Karte — im Enterprise-Look entfernt. */
.db-kpi-karte::before { content: none; }

/* Warnung: dezenter roter Rand statt Pulse-Animation */
.db-kpi-warnung {
  border-color: var(--neg) !important;
}

.db-kpi-warn-indikator {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neg);
}

/* Hover-Lift NUR auf echten Pointern (kein Touch-Sticky auf iPad) */
@media (hover: hover) {
  .db-kpi-karte:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--border);
  }
}
.db-kpi-karte:active { transform: translateY(0); }

/* Karten-Kopfzeile: Icon + Label */
.db-kpi-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* Icon-Chip: 36×36, radius 10, Tint-Hintergrund + kräftige Vordergrund-Farbe.
   Das ist der Stripe/Notion-Trick — Farbe nur im Icon, Rest der Karte neutral. */
.db-kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--tint-blue);
  color: var(--tint-blue-fg);
}

.db-kpi-blau    .db-kpi-icon { background: var(--tint-blue);   color: var(--tint-blue-fg); }
.db-kpi-gruen   .db-kpi-icon { background: var(--tint-green);  color: var(--tint-green-fg); }
.db-kpi-amber   .db-kpi-icon { background: var(--tint-amber);  color: var(--tint-amber-fg); }
.db-kpi-violett .db-kpi-icon { background: var(--tint-violet); color: var(--tint-violet-fg); }
.db-kpi-rot     .db-kpi-icon { background: var(--tint-red);    color: var(--tint-red-fg); }

.db-kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-dim);
}

/* Hauptzahl — immer --text; Farbe nur bei echter Kritik (Warnung-Klasse) */
.db-kpi-wert {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 650;
  line-height: 1.1;
  margin: 4px 0 6px;
  color: var(--text);
  letter-spacing: -.5px;
}

.db-kpi-warnung .db-kpi-wert { color: var(--neg); }

.db-kpi-sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ============================================================
   UMSATZ-BANNER
   ============================================================ */
.db-umsatz-banner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 18px;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

@media (max-width: 900px) {
  .db-umsatz-banner { grid-template-columns: 1fr; gap: 16px; }
}

.db-umsatz-left { min-width: 0; }

.db-umsatz-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.db-umsatz-wert {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -.4px;
}

.db-umsatz-eur {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 2px;
}

/* Sparkline */
.db-umsatz-chart {
  min-width: 0;
  overflow: hidden;
  padding: 0 4px;
}

.db-sparkline-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Farben werden inline im _renderSparkline() gesetzt (Achsenlinie
   grau, Chart-Fill weich, Linie akzent, Punkte teils weiss teils akzent).
   CSS uebersteuert das nicht mehr — sonst kollabieren die Weiss-Punkte. */

.db-spark-label {
  font-size: 10px;
  fill: var(--text-dim);
  font-family: var(--font-body);
}

/* Wert-Label am aktuellen Punkt (Juli): sitzt oberhalb, in --accent-Farbe,
   kleiner als der Karten-Hauptwert damit die Hierarchie stimmt. */
.db-spark-wert-label {
  font-size: 11px;
  font-weight: 600;
  fill: var(--accent);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

/* Rechte Stat-Boxes */
.db-umsatz-right {
  display: flex;
  gap: 24px;
  flex-shrink: 0;
  padding-left: 20px;
  border-left: 1px solid var(--border);
}

.db-stat-box {
  text-align: right;
  min-width: 60px;
}

.db-stat-zahl {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}

.db-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ============================================================
   ZWEI-SPALTEN-BEREICH
   ============================================================ */
.db-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 1600px;
  margin: 0 auto;
}

@media (max-width: 800px) { .db-cols { grid-template-columns: 1fr; } }

/* ---- Karten ---- */
.db-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.db-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}

.db-card-titel {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  letter-spacing: -.1px;
}

.db-card-link {
  background: none;
  border: none;
  color: var(--accent-blue);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 3px 0;
  transition: opacity var(--transition);
}

.db-card-link:hover { opacity: .7; }

.db-card-body { flex: 1; }

/* ---- Listen-Zeilen ---- */
.db-list-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}

.db-list-zeile:last-child { border-bottom: none; }
@media (hover: hover) {
  .db-list-zeile:hover { background: var(--surface-2); }
}

/* Termin-Datum-Block */
.db-termin-datum {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  flex-shrink: 0;
}

.db-termin-heute {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.db-termin-wt {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .3px;
}

.db-termin-heute .db-termin-wt { color: var(--accent-blue); }

.db-termin-uhr {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 1px;
}

.db-heute-tag {
  display: inline-block;
  background: var(--accent-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  margin-left: auto;
  flex-shrink: 0;
  letter-spacing: .3px;
}

/* Auftrags-Block */
.db-au-nummer {
  display: flex;
  flex-direction: column;
  min-width: 90px;
  flex-shrink: 0;
}

.db-au-nr-text {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.db-au-datum {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Gemeinsame Info-Spalte */
.db-list-info {
  flex: 1;
  min-width: 0;
}

.db-list-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-list-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status-Punkt */
.db-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: auto;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15);
}

.db-status-entwurf       { background: #FFC107; }
.db-status-gesendet      { background: #28A745; }
.db-status-bestaetigt    { background: #16a34a; }
.db-status-abgeschlossen { background: #6C757D; }

/* Leer-Zustand in Karten */
.db-leer {
  padding: 28px 18px;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
}

/* ============================================================
   LIQUIDITÄTS-VORSCHAU WIDGET
   ============================================================ */

.db-liquiditaet-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 22px;
  overflow: hidden;
}

.db-liq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.db-liq-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.1px;
}

.db-liq-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-soft);
  padding: 2px 8px;
  border-radius: 20px;
}

.db-liq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--border);
}

.db-liq-item {
  padding: 14px 20px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.db-liq-item:last-child { border-right: none; }
.db-liq-saldo-item { background: var(--surface-2); }

.db-liq-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-dim);
}

.db-liq-val {
  font-size: 18px;
  font-weight: 600;
  font-feature-settings: "tnum";
  line-height: 1.2;
  letter-spacing: -.2px;
  color: var(--text);
}

.db-liq-count {
  font-size: 11px;
  color: var(--text-muted);
}

.db-liq-einnahme { color: var(--pos); }
.db-liq-ausgabe  { color: var(--neg); }
.db-liq-positiv  { color: var(--pos); }
.db-liq-negativ  { color: var(--neg); }
/* Neutraler Zahlenwert: kein Rot/Grün wenn Wert exakt 0 ist. */
.db-liq-neutral  { color: var(--text-muted); }

.db-liq-warnung {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 12px;
  font-weight: 500;
  border-bottom: 1px solid var(--warn-soft);
}

/* ============================================================
   CHEF-EMPFEHLUNG
   ============================================================ */

.db-chef-empfehlung {
  padding: 4px 0 8px;
}

.db-chef-header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
}

.db-chef-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 20px;
  cursor: pointer;
  transition: background var(--transition);
  border-left: 3px solid transparent;
}
.db-chef-item:hover { background: var(--surface-hover, #f8fafc); }

.db-chef-skonto  { border-left-color: var(--pos); }
.db-chef-mahnung { border-left-color: var(--neg); }

.db-chef-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.db-chef-skonto  .db-chef-icon { color: var(--pos); }
.db-chef-mahnung .db-chef-icon { color: var(--neg); }

.db-chef-text {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}

.db-chef-highlight {
  font-weight: 600;
}
.db-chef-skonto  .db-chef-highlight { color: var(--pos); }
.db-chef-mahnung .db-chef-highlight { color: var(--neg); }

.db-chef-sub {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  color: var(--text-muted);
}

.db-chef-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 12px;
  color: var(--pos);
  font-weight: 500;
}

@media (max-width: 640px) {
  .db-liq-grid { grid-template-columns: 1fr 1fr; }
  .db-liq-saldo-item { grid-column: span 2; }
}

/* ---- Ampel-Badge ---- */
.db-ampel-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.db-ampel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---- Mahn-Vorschau-Karte — kein farbiger Top-Border mehr im Enterprise-Look ---- */
.db-mahn-vorschau { }

.db-mahn-titel {
  color: var(--neg);
}

.db-mahn-anzahl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--neg);
  color: #fff;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  margin-left: 4px;
}

.db-mahn-body {
  padding: 0;
}

.db-mahn-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}

.db-mahn-zeile:last-child {
  border-bottom: none;
}

@media (hover: hover) {
  .db-mahn-zeile:hover { background: var(--neg-soft); }
}

.db-mahn-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-mahn-kunde {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.db-mahn-nr {
  font-size: 11px;
  color: var(--text-muted);
  font-family: monospace;
}

.db-mahn-rechts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.db-mahn-betrag {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.db-mahn-tage {
  font-size: 11px;
  font-weight: 600;
  color: var(--neg);
  background: var(--neg-soft);
  padding: 1px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.db-mahn-mehr {
  padding: 8px 18px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

/* ============================================================
   LAYOUT-ITERATION 3 (2026-07-09): Zonen-Architektur
   ------------------------------------------------------------
   Dashboard zerlegt in 3 benannte Zonen (HEUTE / FINANZEN /
   OPTIMIERUNG & VERLAUF). Zonen-Abstand 32px, Karten-Abstand
   innerhalb 16px — Zugehoerigkeit durch Naehe.
   Content-Container 1200px, damit auf breiten Monitoren keine
   Karten endlos gedehnt werden.
   ============================================================ */

.db-content {
  max-width: 1200px;
  margin-inline: auto;
  padding: 0 24px 24px;
}

@media (max-width: 1100px) {
  .db-content { padding: 0 16px 16px; }
}

/* Kopfbereich: Titel-Block links, Actions rechts (Wochenbericht + Ghost-Reload) */
.db-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 0 8px;
  gap: 16px;
  flex-wrap: wrap;
}
.db-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Icon-only Ghost-Button (Aktualisieren) */
.db-refresh-btn--icon {
  padding: 7px 8px;
  gap: 0;
  min-width: 34px;
  justify-content: center;
}
.db-refresh-btn--icon span { display: none; }

/* Zone */
.db-zone {
  margin-top: 32px;
}
.db-zone:first-of-type { margin-top: 20px; }

.db-zone-titel {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 0 0 12px;
  padding: 0 4px;
}

.db-zone-cards {
  display: grid;
  gap: 16px;
  align-items: stretch;
}

/* Zone 1: HEUTE — 3fr Termine + 2fr KPI-Grid, gleiche Hoehe */
.db-zone-heute .db-zone-cards {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}
@media (max-width: 1100px) {
  .db-zone-heute .db-zone-cards { grid-template-columns: 1fr; }
}

/* Kompakte KPIs (Zone-1-rechts, 2x2-Grid) */
.db-kpi-grid-kompakt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: stretch;
}
@media (max-width: 600px) {
  .db-kpi-grid-kompakt { grid-template-columns: 1fr; }
}

.db-kpi-karte.db-kpi-kompakt {
  padding: 16px;
}
.db-kpi-kompakt .db-kpi-icon {
  width: 32px;
  height: 32px;
}
.db-kpi-kompakt .db-kpi-icon svg { width: 16px; height: 16px; }
.db-kpi-kompakt .db-kpi-kopf {
  margin-bottom: 10px;
  gap: 8px;
}
.db-kpi-kompakt .db-kpi-wert {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -.3px;
  margin: 2px 0 4px;
}
.db-kpi-kompakt .db-kpi-sub {
  font-size: 11.5px;
  line-height: 1.35;
}

/* Termine-Karte (Zone-1-links): fuellt die Hoehe des KPI-Grids */
.db-zone-heute .db-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.db-zone-heute .db-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Empty-State fuer Termine-Karte (0 Termine) */
.db-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 20px;
  min-height: 180px;
  text-align: center;
}
.db-empty-state-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.db-empty-state-titel {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.db-empty-state-sub {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.4;
  max-width: 240px;
}
.db-empty-state-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
@media (hover: hover) {
  .db-empty-state-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}
.db-empty-state-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Header-Aktion pro Karte: Text-Link mit Lucide-Icon (Quick-Invoice, VDE-Prüfung) */
.db-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0;
}
.db-card-action svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
@media (hover: hover) {
  .db-card-action:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}
.db-card-action:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Zone 2: FINANZEN — kombinierte Karte, intern durch Border getrennt */
.db-finanz-karte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.db-finanz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.db-finanz-header-links {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.db-finanz-section {
  border-top: 1px solid var(--border);
  padding: 16px 20px;
}
.db-finanz-section--umsatz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}
@media (max-width: 900px) {
  .db-finanz-section--umsatz { grid-template-columns: 1fr; }
}
.db-finanz-umsatz-left { min-width: 0; }

/* Umsatz-Header kompakt: Label/Wert eine Zeile groesser als KPI-Sub,
   damit die Zeile visuell gleiches Gewicht wie die Liq-KPIs oben hat.
   Zielhoehe der Sektion: ~180px (Header ~48 + Chart 120 + Achsenlabels). */
.db-finanz-section--umsatz .db-umsatz-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.db-finanz-section--umsatz .db-umsatz-wert {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -.3px;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 8px;
}
.db-finanz-section--umsatz .db-umsatz-chart {
  height: 120px;
  overflow: hidden;
  padding: 0;
}
.db-finanz-section--umsatz .db-umsatz-chart svg {
  display: block;
  height: 120px;
  max-height: 120px;
}

.db-finanz-umsatz-stats {
  display: flex;
  gap: 24px;
  padding-left: 20px;
  border-left: 1px solid var(--border);
  flex-shrink: 0;
  align-self: center;
}
@media (max-width: 900px) {
  .db-finanz-umsatz-stats {
    padding-left: 0;
    border-left: none;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
}

/* 3-Spalten-Liq-Grid ohne aeussere Border, weil in Finanz-Karte eingebettet */
.db-finanz-section--liq {
  padding: 0;
}
.db-finanz-section--liq .db-liq-grid {
  border-bottom: none;
}

.db-finanz-footer {
  border-top: 1px solid var(--border);
  padding: 12px 20px;
}

/* Zone 3: OPTIMIERUNG & VERLAUF — 50/50 */
.db-zone-optimierung .db-zone-cards {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 1100px) {
  .db-zone-optimierung .db-zone-cards { grid-template-columns: 1fr; }
}
.db-zone-optimierung .db-card,
.db-zone-optimierung .db-ki-widget {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.db-zone-optimierung .db-ki-widget .db-ki-grid {
  flex: 1;
}

/* Auswertung-Widget in Zone 3: 2x2-Grid statt 1x4 */
.db-ki-widget--2x2 .db-ki-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 0;
}
.db-ki-widget--2x2 .db-ki-tile {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
}
.db-ki-widget--2x2 .db-ki-tile:nth-child(2n)    { border-right: none; }
.db-ki-widget--2x2 .db-ki-tile:nth-last-child(-n+2) { border-bottom: none; }
.db-ki-widget--2x2 .db-ki-tile:first-child { padding-left: 16px; }
.db-ki-widget--2x2 .db-ki-tile:last-child  { padding-right: 16px; }

@media (max-width: 480px) {
  .db-ki-widget--2x2 .db-ki-grid { grid-template-columns: 1fr; }
  .db-ki-widget--2x2 .db-ki-tile { border-right: none; }
  .db-ki-widget--2x2 .db-ki-tile:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .db-ki-widget--2x2 .db-ki-tile:last-child { border-bottom: none; }
}