/* Project-owned additions on top of the Klingberg app.css (which is re-copied
   from the design bundle, so keep our tweaks here instead). */

/* Make the HTML `hidden` attribute reliable: .btn sets display:inline-flex,
   which (author style) overrides the UA `[hidden]{display:none}`, so a
   `<button hidden class="btn">` (e.g. the Beleg "Entfernen"/✕ clear buttons)
   would show even with nothing attached. This reset restores the intent. */
[hidden]{ display:none !important; }

/* Notification bell badge */
.nav-btn{ position:relative; }
.nav-badge{
  position:absolute; top:2px; right:2px;
  min-width:16px; height:16px; padding:0 4px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--danger); color:#fff; border-radius:var(--radius-pill);
  font-size:10px; font-weight:var(--fw-bold); line-height:1;
}
.nav-badge:empty{ display:none; }

/* Green "needs attention" dot (e.g. Prüfung has items to check) */
.nav-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#2ea043;
  vertical-align:middle; box-shadow:0 0 0 2px rgba(46,160,67,.18); }
/* Menü-Items richten seit dem flex-start-Umbau (Icon an erster Zeile) alles
   oben aus — der Punkt soll aber mittig zur Zeile sitzen. */
.menu__item .nav-dot{ align-self:center; }

/* OP-match suggestion in a credit row */
.op-match{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:8px;
  padding:8px; border:1px solid var(--green-200, #bfe3c8); background:var(--green-50, #f0f9f2); border-radius:8px; }

/* Manual OP assignment picker (review rows) */
.op-manual{ margin-top:8px; }
.op-picker-form{ margin-top:6px; display:flex; flex-direction:column; gap:6px; max-width:460px; }
.op-picker{ display:flex; flex-direction:column; gap:2px; max-height:220px; overflow:auto;
  border:1px solid var(--line); border-radius:8px; padding:6px; background:var(--surface); }
.op-pick-item{ display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:6px; cursor:pointer; }
.op-pick-item:hover{ background:var(--green-50); }
.op-pick-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.op-pick-split{ display:flex; flex-wrap:wrap; gap:4px 8px; padding:0 6px 5px 30px; }
.op-split-part{ font-size:11px; color:var(--muted); background:var(--n-100); border-radius:4px; padding:1px 6px; white-space:nowrap; }
/* Teilzahlung: per-invoice "davon zahlen" + the running counter */
.op-pay{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); padding:0 6px 4px 30px; }
.op-pay-input{ width:110px; padding:3px 6px; text-align:right; }
.op-pay-input:disabled{ opacity:.5; }
.op-suggest{ font-size:12px; color:var(--green-700,#2f7a3f); background:var(--green-50); border:1px solid var(--green-200,#cde8d2); border-radius:6px; padding:5px 8px; margin-bottom:4px; }
.op-pick-row.is-suggested{ background:var(--green-50); border-radius:6px; }
.op-picker__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px; }
.op-remaining{ color:var(--warning,#b45309); }
.op-remaining.is-zero{ color:var(--green-600,#2f7a3f); }

/* Beleg picker (review / nachreichen rows) */
.beleg-picker{ display:flex; flex-direction:column; gap:4px; margin-top:6px;
  max-height:220px; overflow:auto; border:1px solid var(--line); border-radius:8px; padding:6px; background:var(--surface); }
.beleg-pick-item{ display:flex; align-items:center; gap:8px; text-align:left;
  background:transparent; border:none; border-radius:6px; padding:6px 8px; cursor:pointer; font:inherit; }
.beleg-pick-item:hover{ background:var(--green-50); }
.beleg-pick-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.beleg-slot{ font-size:12px; color:var(--muted); }
.beleg-slot.has-beleg{ color:var(--brand-strong); font-weight:var(--fw-bold); }

/* Unread notification item in the bell dropdown */
.menu__item.is-unread{ font-weight:var(--fw-bold); }
.menu__item.is-unread::after{
  content:""; margin-left:auto; flex:none;
  width:8px; height:8px; border-radius:50%; background:var(--accent);
}

/* --- Buchungen (Archiv) --- */
/* Quick filter chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; padding:6px 12px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:var(--surface); color:var(--n-700);
  font-size:13px; font-weight:var(--fw-semibold); text-decoration:none; white-space:nowrap;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.chip:hover{ background:var(--green-50); color:var(--brand-strong); }
.chip.is-active{ background:var(--brand-strong); border-color:var(--brand-strong); color:#fff; }

/* Sortable table headers */
.th-sort{ color:inherit; text-decoration:none; white-space:nowrap; display:inline-flex; gap:2px; }
.th-sort:hover{ color:var(--brand-strong); }

/* Notices */
.notice{ padding:12px 16px; border-radius:var(--radius-md); font-size:14px; margin-top:var(--space-4);
  border:1px solid var(--line); background:var(--surface); }
.notice--warn{ border-color:#e6c200; background:#fdf7dd; color:#6b5900; }
.notice code{ background:rgba(0,0,0,.06); padding:1px 5px; border-radius:4px; }

/* Steuer-Rücklagen coverage hero */
.reserve-hero{ background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--brand);
  border-radius:var(--card-radius); padding:22px 26px; margin-top:var(--space-5); }
.reserve-hero.is-ok{ border-left-color:#2ea043; }
.reserve-hero.is-short{ border-left-color:var(--money-neg, #c0392b); }
.reserve-hero .balance__value{ font-size:38px; }
.reserve-hero.is-short .balance__value{ color:var(--money-neg, #c0392b); }
.reserve-hero.is-ok .balance__value{ color:#2ea043; }

/* Pager */
.pager{ display:flex; align-items:center; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:var(--space-5); }
.pager__link{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 9px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-size:14px; font-variant-numeric:tabular-nums; text-decoration:none;
  transition:background .12s ease, border-color .12s ease;
}
.pager__link:hover{ background:var(--green-50); border-color:var(--green-200, #bfe3c8); }
.pager__link.is-current{ background:var(--brand); border-color:var(--brand); color:#fff; font-weight:var(--fw-bold); }
.pager__link.is-disabled{ opacity:.4; pointer-events:none; }
.pager__gap{ min-width:20px; text-align:center; color:var(--muted); }

/* Inline correction editor (native <details>) */
.buchung-group td{ vertical-align:top; }
.cell-actions{ min-width:280px; }
.row-edit > summary{ list-style:none; cursor:pointer; display:inline-flex; }
.row-edit > summary::-webkit-details-marker{ display:none; }
.row-edit[open] > summary{ margin-bottom:8px; }
.row-edit .row-form{ max-width:340px; }

/* Correction history */
.buchung-group__history td{ background:var(--n-100); }
.buchung-group__history summary{ cursor:pointer; font-size:12px; }
.history-list{ margin:6px 0 2px; padding-left:16px; font-size:12px; color:var(--n-700); }
.history-list li{ margin:3px 0; }
.history-list s{ color:var(--muted); }

/* --- Import (temporary bridge) --- */
.import-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:var(--space-5); margin-top:var(--space-6);
}
.dropzone{
  display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  padding:32px 20px; cursor:pointer;
  border:2px dashed var(--n-300); border-radius:var(--radius-lg); background:var(--surface);
  transition:border-color .15s ease, background .15s ease;
}
.dropzone:hover{ border-color:var(--brand-strong); background:var(--green-50); }
.dropzone.is-drag{ border-color:var(--brand-strong); background:var(--green-100); }
.dropzone__icon svg{ width:34px; height:34px; color:var(--brand-strong); }
.dropzone__title{ font-family:var(--font-head); font-weight:var(--fw-extra); font-size:16px; color:var(--ink); }
.dropzone__hint{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.dropzone__cta{ font-size:13px; color:var(--n-700); margin-top:4px; }
.dropzone__file{ font-size:13px; font-weight:var(--fw-bold); color:var(--brand-strong); }
.dropzone__file:empty{ display:none; }
.dropzone-form__fallback{ margin-top:8px; }
/* With JS the change event auto-submits, so hide the manual button. */
html.js .dropzone-form__fallback{ display:none; }
.import-result{ margin-top:10px; }
.import-msg{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:var(--radius-md); font-size:14px;
}
.import-msg svg{ width:18px; height:18px; flex:none; }
.import-msg--ok{ background:var(--success-soft); color:#3f5c18; }
.import-msg--error{ background:var(--danger-soft); color:#8c2f1c; }

/* Buchungen archive: "Korrigieren" is a small button in the last column; the
   correction form opens as a full-width row below (spanning the whole table)
   instead of being cramped into the last cell. Scoped so kassenbuch is
   untouched. */
#buchungen-table .cell-actions{ min-width:110px; }
.correction-row > td{ background:var(--green-50); padding:14px 16px; }
.correction-form{ display:flex; flex-direction:column; gap:10px; max-width:900px; }
.correction-form__grid{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.correction-form__grid .field{ display:flex; flex-direction:column; gap:4px; }
.correction-form__grid .field .input, .correction-form__grid .field .select-native{ min-width:150px; }
.correction-form__grid .field--grow{ flex:1; min-width:240px; }
.correction-form__row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* BWA / Auswertungen */
.kpi__sub{ display:block; margin-top:2px; }
.cat-bar{ height:4px; border-radius:2px; background:var(--brand); opacity:.5; margin-top:4px; }

/* Zugangsdaten (credential vault) */
.cred-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.cred{ border:1px solid var(--n-200); border-radius:10px; padding:14px 16px; background:var(--n-00,#fff); }
.cred__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:10px; }
.cred__name{ font-weight:var(--fw-bold,700); font-size:15px; margin-right:6px; }
.cred__actions{ display:flex; gap:4px; flex:none; }
.cred__fields{ display:grid; grid-template-columns:auto 1fr; gap:5px 12px; margin:0; font-size:13px; }
.cred__fields dt{ color:var(--muted); white-space:nowrap; }
.cred__fields dd{ margin:0; display:flex; align-items:center; gap:6px; min-width:0; }
.cred-val{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cred-pw{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.02em; }
.cred-copy{ border:0; background:transparent; cursor:pointer; font-size:13px; padding:2px 4px; border-radius:4px; line-height:1; flex:none; }
.cred-copy:hover{ background:var(--n-100); }
.cred-notes{ white-space:normal; color:var(--n-700); }

/* HTMX row fade-out: gebuchte/zugeordnete Zeile blendet langsam aus statt zu verschwinden */
tr.htmx-swapping, tbody.htmx-swapping{ opacity:0; transition:opacity .6s ease-out; }

/* Review queue: the "Rechnung manuell zuordnen" picker opens as a full-width
   row below the transaction (like the Buchungen correction form). The row is
   collapsed until the picker is actually loaded into it. */
tr.oppick-row{ display:none; }
tr.oppick-row:has(.op-picker-form){ display:table-row; }
.oppick-row > td{ background:var(--green-50); padding:12px 16px; }
.oppick-row .op-picker-form{ max-width:820px; }

/* Toast — surfaces why an action was refused (otherwise a 4xx swaps nothing) */
.toast-stack{ position:fixed; top:16px; right:16px; z-index:2000; display:flex; flex-direction:column; gap:8px; max-width:min(440px,92vw); }
.toast{ padding:11px 14px; border-radius:10px; font-size:13px; line-height:1.4; box-shadow:0 6px 24px rgba(0,0,0,.18); opacity:1; transition:opacity .4s ease; }
.toast--error{ background:#fbeaea; border:1px solid #e2b4b4; color:#7f1d1d; }

/* ============================================================
   IN-APP HELP (Onboarding, Taskflow #726)
   Calm, persistent guidance — deliberately distinct from .alert, which
   signals transient status. Teaching empty states reuse the .empty component.
   ============================================================ */
.help-intro{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--surface-soft); border:1px solid var(--green-200);
  border-radius:var(--radius-md); padding:14px 18px; margin-bottom:var(--space-6);
  color:var(--brand-deep); font-size:var(--fs-body); line-height:var(--lh-body);
}
.help-intro__icon{ flex:none; width:22px; height:22px; color:var(--brand-strong); margin-top:1px; }
.help-intro__icon svg{ width:22px; height:22px; display:block; }
.help-intro__body{ min-width:0; }
.help-intro__body p{ margin:0; font-weight:var(--fw-medium); }
.help-intro__body p + p{ margin-top:6px; }

/* "Mehr erklären" expander — native <details>, no JS needed */
.help-more{ margin-top:8px; font-size:var(--fs-sm); }
.help-more > summary{
  cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  color:var(--link); font-weight:var(--fw-semibold); list-style:none;
}
.help-more > summary::-webkit-details-marker{ display:none; }
.help-more > summary::before{
  content:"?"; flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-ink); font-weight:var(--fw-bold); font-size:12px;
}
.help-more[open] > summary{ margin-bottom:8px; }
.help-more__body{ color:var(--muted); line-height:var(--lh-body); max-width:62ch; }
.help-more__body p{ margin:0 0 6px; }
.help-more__body p:last-child{ margin-bottom:0; }

/* Calm disclaimer line (e.g. "keine Steuerberatung") for tax/report screens */
.help-disclaimer{
  display:flex; gap:8px; align-items:center;
  color:var(--muted); font-size:var(--fs-sm); margin-top:var(--space-3);
}
.help-disclaimer svg{ width:15px; height:15px; flex:none; }

/* Numbered step list — used by Erste Schritte and the Hilfe recipes (#726) */
.guide-steps{ list-style:none; margin:0 0 var(--space-8); padding:0; counter-reset:step;
  display:flex; flex-direction:column; gap:12px; }
.guide-steps > li{ display:flex; gap:16px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:16px 18px; }
.guide-steps > li::before{
  counter-increment:step; content:counter(step); flex:none;
  width:32px; height:32px; border-radius:50%; background:var(--green-100); color:var(--brand-strong);
  font-family:var(--font-head); font-weight:var(--fw-bold); font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.guide-steps__body{ min-width:0; }
.guide-steps__body h3{ margin:0 0 4px; font-size:var(--fs-h4); font-family:var(--font-head); }
.guide-steps__body p{ margin:0 0 10px; color:var(--muted); line-height:var(--lh-body); max-width:62ch; }
.guide-steps__body p:last-child{ margin-bottom:0; }
.guide-section-title{ font-family:var(--font-head); font-size:var(--fs-h3); margin:var(--space-8) 0 var(--space-4); }

/* Glossar — plain-language definition list (#726) */
.glossar{ margin:0; max-width:760px; }
.glossar > div{ padding:16px 0; border-bottom:1px solid var(--line); scroll-margin-top:90px; }
.glossar > div:last-child{ border-bottom:none; }
.glossar dt{ font-family:var(--font-head); font-weight:var(--fw-bold); font-size:var(--fs-h4); color:var(--ink); margin-bottom:4px; }
.glossar dd{ margin:0; color:var(--muted); line-height:var(--lh-body); max-width:64ch; }

/* Hilfe recipes — index cards + print (#726 Phase 4) */
.recipe-list{ display:flex; flex-direction:column; gap:10px; }
.recipe-card{ display:flex; align-items:center; gap:14px; padding:16px 18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  text-decoration:none; color:var(--ink); transition:border-color .15s, box-shadow .15s; }
.recipe-card:hover{ border-color:var(--green-300); box-shadow:var(--shadow-sm); }
.recipe-card__icon{ flex:none; width:40px; height:40px; border-radius:50%; background:var(--green-50);
  color:var(--brand-strong); display:flex; align-items:center; justify-content:center; }
.recipe-card__icon svg{ width:20px; height:20px; }
.recipe-card__body{ display:flex; flex-direction:column; min-width:0; flex:1; }
.recipe-card__title{ font-family:var(--font-head); font-weight:var(--fw-bold); }
.recipe-card__sub{ color:var(--muted); font-size:var(--fs-sm); }
.recipe-card__chev{ flex:none; width:18px; height:18px; color:var(--muted); }

@media print{ .app-nav, .toast-stack, .no-print{ display:none !important; } }

/* Opt-in „Erhöhte Lesbarkeit“ — flips the design tokens for larger, higher-
   contrast text app-wide. Per account (#726 Phase 5). The base CSS is token-
   driven (body, headings, meta use var(--fs-*)/var(--muted)), so overriding the
   tokens on the root cascades; a few common hardcoded small sizes are nudged. */
html.theme-readable{
  --fs-body:18px; --fs-body-lg:19px; --fs-sm:16px; --fs-caption:14px;
  --fs-h4:20px; --fs-h3:25px; --fs-h2:36px; --fs-h1:44px;
  --lh-body:1.7;
  --muted:#4c4c42;   /* darker → higher contrast on light backgrounds */
  --line:#c7c6bb;    /* stronger borders */
}
html.theme-readable .cell-sub{ font-size:14px; }
html.theme-readable .alert,
html.theme-readable .badge,
html.theme-readable .kpi__label,
html.theme-readable .page-header__meta{ font-size:16px; }

/* --- „Frag die Bücher" floating assistant -------------------------------- */
.asst{ position:fixed; right:20px; bottom:20px; z-index:1000; }
.asst__fab{ display:inline-flex; align-items:center; gap:8px; padding:12px 16px;
  border:none; border-radius:999px; background:var(--brand-strong,#357a38); color:#fff;
  font:inherit; font-weight:600; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.asst__fab svg{ width:18px; height:18px; }
.asst__fab:hover{ background:var(--green-800,#2b6330); }
.asst.is-open .asst__fab{ display:none; }
.asst__panel{ display:none; flex-direction:column; width:360px; max-width:calc(100vw - 32px);
  height:520px; max-height:calc(100vh - 32px); background:var(--surface,#fff);
  border:1px solid var(--line,#dcdcd2); border-radius:14px; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.28); }
.asst.is-open .asst__panel{ display:flex; }
.asst__head{ display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-bottom:1px solid var(--line,#dcdcd2); background:var(--surface-soft,#f3f7ee); }
.asst__icon{ display:inline-flex; padding:4px; border:none; background:transparent;
  color:var(--muted,#6f6f64); cursor:pointer; border-radius:6px; }
.asst__icon:hover{ background:rgba(0,0,0,.06); color:inherit; }
.asst__log{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; }
.asst__form{ display:flex; gap:6px; padding:10px; border-top:1px solid var(--line,#dcdcd2); }
.asst__form .input{ flex:1; }
.asst__form .btn{ padding:8px 10px; }

/* chat bubbles (shared by page + widget) */
.asst-x{ display:flex; flex-direction:column; gap:6px; }
.asst-x__q{ align-self:flex-end; max-width:85%; background:var(--brand-strong,#357a38);
  color:#fff; padding:8px 11px; border-radius:12px 12px 3px 12px; white-space:pre-wrap; }
.asst-x__a{ align-self:flex-start; max-width:92%; background:var(--surface-soft,#f3f7ee);
  border:1px solid var(--line,#dcdcd2); padding:8px 11px; border-radius:12px 12px 12px 3px;
  white-space:pre-wrap; }
.asst-x__src{ display:block; margin-top:6px; font-size:.78em; color:var(--muted,#6f6f64); }

/* full-page conversation log */
.asst-page-log{ display:flex; flex-direction:column; gap:12px; max-height:60vh;
  overflow-y:auto; padding:4px; }

@media (max-width:480px){
  .asst{ right:12px; bottom:12px; }
  .asst__panel{ width:calc(100vw - 24px); height:calc(100vh - 90px); }
}

/* assistant „typing" indicator (three animated dots) */
.asst-msgs{ display:flex; flex-direction:column; gap:10px; }
.asst-typing{ display:none; align-self:flex-start; }
.asst-typing.htmx-request{ display:block; }
.asst-typing__bubble{ display:inline-flex; gap:4px; align-items:center;
  background:var(--surface-soft,#f3f7ee); border:1px solid var(--line,#dcdcd2);
  padding:11px 13px; border-radius:12px 12px 12px 3px; }
.asst-typing__bubble span{ width:7px; height:7px; border-radius:50%;
  background:var(--muted,#6f6f64); animation:asstDot 1.2s infinite ease-in-out; }
.asst-typing__bubble span:nth-child(2){ animation-delay:.15s; }
.asst-typing__bubble span:nth-child(3){ animation-delay:.3s; }
@keyframes asstDot{ 0%,70%,100%{ opacity:.3; transform:translateY(0); }
  35%{ opacity:1; transform:translateY(-4px); } }
@media (prefers-reduced-motion: reduce){
  .asst-typing__bubble span{ animation:none; opacity:.6; } }

/* assistant empty-state prompt starters (green suggestion bubbles) */
.asst-suggestions{ display:flex; flex-direction:column; gap:8px; padding:4px 2px; }
.asst-suggestions__hint{ margin:0 0 2px; color:var(--muted,#6f6f64); font-size:.9em; }
.asst-suggestion{ align-self:flex-start; max-width:95%; text-align:left; cursor:pointer;
  font:inherit; line-height:1.3; background:var(--surface-soft,#f3f7ee);
  color:var(--brand-strong,#357a38); border:1px solid var(--brand-strong,#357a38);
  border-radius:14px; padding:8px 12px; transition:background .12s, color .12s; }
.asst-suggestion:hover{ background:var(--brand-strong,#357a38); color:#fff; }

/* assistant confirm-before-write card (Kassensturz) */
.asst-confirm{ align-self:stretch; display:flex; flex-direction:column; gap:8px;
  border:1px solid var(--brand-strong,#357a38); border-radius:12px;
  padding:10px 12px; background:var(--surface-soft,#f3f7ee); }
.asst-confirm__body{ display:flex; align-items:center; gap:6px; }
.asst-confirm__actions{ display:flex; gap:8px; }

/* Wider content on large screens — the whole layout (nav, flash, main) keys off
   --content-max, so bumping it here widens everything consistently. Capped at
   1600px so tables get room while text lines stay scannable. */
@media (min-width: 1440px){ :root{ --content-max:1280px; } }
@media (min-width: 1680px){ :root{ --content-max:1440px; } }
@media (min-width: 1920px){ :root{ --content-max:1600px; } }

/* On wide screens the KPI row tiles cleanly into 4 columns (4 stat cards, the
   full-width Eingangsrechnungen banner, then the two half-width cards), so the
   cards fill the space instead of leaving trailing gaps at the row's end. */
@media (min-width: 1200px){ .kpi-row{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }