/* ============================================================================
   MeinZuhause — DESIGN SYSTEM (v1)  ·  design-system.css
   ----------------------------------------------------------------------------
   Tokens (§1–4) + two-register overrides (§5) + base classes for the MZ.ui
   primitives (`ds-*`, §6). This file is the *visual* half of the system; the
   markup half lives in js/ui.js (MZ.ui.* / MZ.icon / MZ.fmt).

   Scope discipline:
     • All tokens are namespaced `--ds-*` so they never collide with the legacy
       CareerKit tokens (`--accent`, `--ink`, `--line`, …) already on :root/body.
     • All component classes are namespaced `ds-*`.
     • Register is selected via `body[data-register="pro"|"warm"]` (set by
       app-core.js switchPersona). `pro` is the default if unset.
   Loaded AFTER app.tailwind.css and app-polish.css, so these rules win on the
   surfaces that opt in to `ds-*` classes without touching the rest of the app.
   ============================================================================ */

/* ===========================================================================
   §1–4  TOKENS
   =========================================================================== */
:root {
  /* §1 Color roles ------------------------------------------------------- */
  --ds-bg:#FCFCFD; --ds-surface:#FFFFFF; --ds-surface-2:#F6F4F1;   /* CareerKit: cool near-white page · white cards · warm-grey muted/inset */
  --ds-ink:#232323; --ds-ink-soft:#5C5650; --ds-ink-mute:#938C83;
  --ds-line:#E7E4E0; --ds-line-strong:#D8D4CF;
  --ds-action:#1300FF; --ds-action-hover:#0F00CC; --ds-action-soft:#ECEAFF; --ds-action-ink:#0A0080;
  --ds-accent:#C6FA02;                 /* lime — sparingly, never a fill for text/CTAs */
  --ds-success:#0E9F6E; --ds-success-soft:#E3F5EE;
  --ds-warning:#B45309; --ds-warning-soft:#FBF0E0;   /* amber-700, AA on soft */
  --ds-danger:#C0341D;  --ds-danger-soft:#FBEAE6;
  --ds-info:#1300FF;    --ds-info-soft:#ECEAFF;
  --ds-focus:0 0 0 3px rgba(19,0,255,.18);

  /* §2 Typography -------------------------------------------------------- */
  --ds-font-display:"Bricolage Grotesque","Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  --ds-font-body:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  /* §3 Spacing (4px grid), radius, elevation ----------------------------- */
  --ds-1:4px; --ds-2:8px; --ds-3:12px; --ds-4:16px; --ds-5:20px;
  --ds-6:24px; --ds-8:32px; --ds-10:40px; --ds-12:48px;
  --ds-r-sm:8px; --ds-r-md:14px; --ds-r-lg:18px; --ds-r-xl:24px; --ds-r-pill:999px;  /* CareerKit: rounded-2xl cards */
  --ds-sh-sm:0 1px 3px rgba(35,35,35,.10),0 1px 2px -1px rgba(35,35,35,.10);   /* CareerKit shadow-sm */
  --ds-sh-md:0 4px 8px -2px rgba(35,35,35,.10),0 2px 4px -2px rgba(35,35,35,.06);   /* CareerKit shadow-md */
  --ds-sh-lg:0 12px 16px -4px rgba(35,35,35,.08),0 4px 6px -2px rgba(35,35,35,.03);   /* CareerKit shadow-lg */

  /* §4 Motion budget ----------------------------------------------------- */
  --ds-t-fast:120ms; --ds-t:180ms; --ds-t-slow:240ms;
  --ds-ease:cubic-bezier(.2,.8,.2,1);

  /* Register-controlled knobs (overridden in §5). Defaults = `pro`. */
  --ds-base-size:13.5px;
  --ds-card-pad:var(--ds-4);
  --ds-card-radius:var(--ds-r-lg);
  --ds-card-shadow:var(--ds-sh-sm);
  --ds-section-gap:var(--ds-6);
}

/* ===========================================================================
   §5  TWO REGISTERS — one token set, scoped knob overrides.
       Set by app-core.js: verwalter/eigentuemer → 'pro', mieter → 'warm'.
   =========================================================================== */
body[data-register="pro"] {
  --ds-base-size:13.5px;
  --ds-card-pad:var(--ds-4);
  --ds-card-radius:var(--ds-r-lg);
  --ds-card-shadow:var(--ds-sh-sm);
  --ds-section-gap:var(--ds-6);
}
body[data-register="warm"] {
  --ds-base-size:15px;
  --ds-card-pad:var(--ds-6);
  --ds-card-radius:var(--ds-r-xl);
  --ds-card-shadow:var(--ds-sh-md);
  --ds-section-gap:var(--ds-8);
}

/* ===========================================================================
   DARK THEME — redefine the ds-* tokens so EVERY ds-* surface (cards, tables,
   page headers, stat cards, badges, buttons) adapts. Previously only the shell +
   dashboard had dark rules (app-polish.css), so tool pages stayed white-on-dark.
   Palette harmonises with the shell: body #141228, panels #1A1733.
   =========================================================================== */
html[data-theme="dark"] {
  --ds-bg:#141228; --ds-surface:#1A1733; --ds-surface-2:#221D40;
  --ds-ink:#F3F1ED; --ds-ink-soft:#C9C5BE; --ds-ink-mute:#9A948B;
  --ds-line:rgba(255,255,255,.12); --ds-line-strong:rgba(255,255,255,.22);
  --ds-action:#8C7CFF; --ds-action-hover:#A99CFF; --ds-action-soft:#251F52; --ds-action-ink:#CFC7FF;
  --ds-success:#34D399; --ds-success-soft:#103223;
  --ds-warning:#FBBF24; --ds-warning-soft:#3A2C12;
  --ds-danger:#FF6B5C;  --ds-danger-soft:#3A1B17;
  --ds-info:#8C7CFF;    --ds-info-soft:#251F52;
  --ds-focus:0 0 0 3px rgba(140,124,255,.35);
}
/* .ds-action is a light indigo on dark, used both as fill (primary btn) and as
   text (links/ghost). White on the light fill fails AA, so use dark ink there. */
html[data-theme="dark"] .ds-btn-primary { color:#16142F; }

/* ===========================================================================
   §6  PRIMITIVE BASE CLASSES — every class an MZ.ui.* helper emits.
       Kept token-driven + minimal. Anything an emitter renders has a rule here.
       Scoped under `.ds-scope` so we never restyle legacy markup by accident:
       MZ.ui.mount() / page hosts add `ds-scope` to the host.
   =========================================================================== */
.ds-scope {
  font-family: var(--ds-font-body);
  font-size: var(--ds-base-size);
  color: var(--ds-ink);
  line-height: 1.5;
}
.ds-scope *,
.ds-scope *::before,
.ds-scope *::after { box-sizing: border-box; }

.ds-scope .num,
.ds-num { font-variant-numeric: tabular-nums; }

/* ---- page header (top of every tool page) -------------------------------- */
.ds-pagehead { display:flex; align-items:flex-start; gap:var(--ds-4);
  margin-bottom:var(--ds-6); }
.ds-pagehead-ico { flex:0 0 auto; width:44px; height:44px; border-radius:var(--ds-r-md);
  display:grid; place-items:center; background:var(--ds-action-soft); color:var(--ds-action);
  margin-top:2px; }
.ds-pagehead-main { flex:1 1 auto; min-width:0; }
.ds-pagehead-title { font-family:var(--ds-font-display); font-weight:800; letter-spacing:-0.02em;
  font-size:28px; line-height:34px; color:var(--ds-ink); margin:0; }
.ds-pagehead-sub { color:var(--ds-ink-soft); font-size:14.5px; line-height:22px; margin-top:2px; }
.ds-pagehead-actions { flex:0 0 auto; display:flex; gap:var(--ds-2); align-items:center;
  flex-wrap:wrap; justify-content:flex-end; }
body[data-register="warm"] .ds-pagehead-title { font-size:32px; line-height:38px; }
@media (max-width:640px){
  /* Phones: let the header wrap so the full-width actions row (below) drops onto
     its own line. Without this, .ds-pagehead-actions{width:100%} in a nowrap flex
     row collapses .ds-pagehead-main to 0px — the title + subtitle then wrap one
     word per line and the action button sits on top of the squeezed title. */
  .ds-pagehead { flex-wrap:wrap; }
  .ds-pagehead-title { font-size:24px; line-height:30px; }
  .ds-pagehead-actions { width:100%; justify-content:flex-start; margin-top:var(--ds-2); }
}

/* ---- section title + eyebrow label --------------------------------------- */
.ds-sectiontitle { font-family:var(--ds-font-display); font-weight:700; letter-spacing:-0.01em;
  font-size:16px; line-height:24px; color:var(--ds-ink); margin:var(--ds-6) 0 var(--ds-3); }
.ds-sectiontitle:first-child { margin-top:0; }
.ds-label { font-size:12px; line-height:16px; font-weight:600; letter-spacing:0.02em;
  text-transform:uppercase; color:var(--ds-ink-mute); }

/* ---- card ---------------------------------------------------------------- */
.ds-card { background:var(--ds-surface); border:1px solid var(--ds-line);
  border-radius:var(--ds-card-radius); box-shadow:var(--ds-card-shadow);
  padding:var(--ds-card-pad); }
.ds-card + .ds-card { margin-top:var(--ds-3); }
/* Harmonise the app's ORIGINAL .card (used by the legacy section "Überblick"
   landings) with the DS card tokens, so those few pages render pixel-consistent
   with the .ds-card tool pages — same radius + shadow per register (pro/warm). */
body .card { border-radius:var(--ds-card-radius); box-shadow:var(--ds-card-shadow); }
/* attention card — flat, subtle amber wash for a "most urgent" callout (no gradient) */
.ds-card.ds-card-attn { border-color:var(--ds-warning-soft);
  background:color-mix(in srgb, var(--ds-warning-soft) 55%, var(--ds-surface)); margin-bottom:var(--ds-4); }
.ds-card-head { display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--ds-3); margin-bottom:var(--ds-3); }
.ds-card-head:last-child { margin-bottom:0; }
.ds-card-titles { min-width:0; }
.ds-card-title { font-family:var(--ds-font-display); font-weight:700; font-size:16px;
  line-height:24px; color:var(--ds-ink); }
.ds-card-sub { font-size:13px; line-height:18px; color:var(--ds-ink-soft); margin-top:1px; }
.ds-card-actions { flex:0 0 auto; display:flex; gap:var(--ds-2); align-items:center; }

/* ---- KPI row + stat card ------------------------------------------------- */
.ds-kpirow { display:grid; gap:var(--ds-3);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-bottom:var(--ds-6); }
.ds-statcard { background:var(--ds-surface); border:1px solid var(--ds-line);
  border-radius:var(--ds-card-radius); box-shadow:var(--ds-card-shadow);
  padding:var(--ds-4); }
.ds-statcard-top { display:flex; align-items:center; justify-content:space-between; gap:var(--ds-2); }
.ds-statcard-label { font-size:12px; font-weight:600; letter-spacing:0.02em; text-transform:uppercase;
  color:var(--ds-ink-mute); }
.ds-statcard-val { font-family:var(--ds-font-display); font-weight:800; font-size:26px; line-height:32px;
  letter-spacing:-0.02em; color:var(--ds-ink); font-variant-numeric:tabular-nums; margin-top:var(--ds-2); }
.ds-statcard-sub { font-size:12.5px; line-height:18px; color:var(--ds-ink-soft); margin-top:2px;
  display:flex; align-items:center; gap:var(--ds-2); }
.ds-statcard.tone-success .ds-statcard-val { color:var(--ds-success); }
.ds-statcard.tone-warning .ds-statcard-val { color:var(--ds-warning); }
.ds-statcard.tone-danger  .ds-statcard-val { color:var(--ds-danger); }
.ds-statcard.tone-action  .ds-statcard-val { color:var(--ds-action); }
.ds-delta { display:inline-flex; align-items:center; gap:2px; font-weight:600;
  font-variant-numeric:tabular-nums; }
.ds-delta.up   { color:var(--ds-success); }
.ds-delta.down { color:var(--ds-danger); }
.ds-spark { display:block; flex:0 0 auto; }

/* ---- table --------------------------------------------------------------- */
.ds-table-wrap { border:1px solid var(--ds-line); border-radius:var(--ds-card-radius);
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  background:var(--ds-surface); box-shadow:var(--ds-card-shadow); }
.ds-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.ds-table thead th { position:sticky; top:0; z-index:1; background:var(--ds-surface-2);
  text-align:left; font-size:11.5px; font-weight:700; letter-spacing:0.02em; text-transform:uppercase;
  color:var(--ds-ink-mute); padding:var(--ds-2) var(--ds-3); border-bottom:1px solid var(--ds-line); white-space:nowrap; }
.ds-table tbody td { padding:var(--ds-3); border-bottom:1px solid var(--ds-line);
  color:var(--ds-ink); vertical-align:middle; }
.ds-table tbody tr:last-child td { border-bottom:0; }
.ds-table tbody tr { transition:background-color var(--ds-t-fast) var(--ds-ease); }
.ds-table tbody tr:hover { background:var(--ds-surface-2); }
.ds-table .ds-num { text-align:right; font-variant-numeric:tabular-nums; }
.ds-table th.ds-num { text-align:right; }
/* zebra only in pro register (denser, data-first) */
body[data-register="pro"] .ds-table tbody tr:nth-child(even) { background:var(--ds-surface-2); }
body[data-register="pro"] .ds-table tbody tr:nth-child(even):hover { background:var(--ds-line); }
.ds-table-rowlink { cursor:pointer; }

/* Phones: a dense multi-column data table is unreadable at 390px (and the grey
   header + zebra are what made the app look like a spreadsheet). Reflow each row
   into a clean white card with "LABEL  value" lines — same surface vocabulary as
   the rest of the app. data-label is emitted per <td> by MZ.ui.table(). */
@media (max-width:640px){
  .ds-table-wrap { border:0; box-shadow:none; background:transparent; overflow:visible; }
  .ds-table { font-size:13.5px; }
  .ds-table thead { display:none; }   /* column names are shown per-cell via data-label */
  .ds-table tbody, .ds-table tr, .ds-table td { display:block; width:auto; }
  .ds-table tr { background:var(--ds-surface); border:1px solid var(--ds-line);
    border-radius:var(--ds-r-md); box-shadow:var(--ds-card-shadow);
    padding:2px var(--ds-4); margin-bottom:var(--ds-2); }
  .ds-table tr:last-child { margin-bottom:0; }
  /* no zebra / no hover-fill on the card layout */
  body[data-register="pro"] .ds-table tbody tr:nth-child(even),
  body[data-register="pro"] .ds-table tbody tr:nth-child(even):hover,
  .ds-table tbody tr:hover { background:var(--ds-surface); }
  /* label ABOVE value, both left-aligned — handles composite cells (badge + name +
     purpose), buttons and plain scalars uniformly without cramming/right-align. */
  .ds-table td { display:block; padding:9px 0; border:0; border-bottom:1px solid var(--ds-line);
    text-align:left; white-space:normal; }
  .ds-table td.ds-num { text-align:left; }
  .ds-table tr td:last-child { border-bottom:0; }
  .ds-table td:empty { display:none; }                       /* drop blank cells */
  .ds-table td::before { content:attr(data-label); display:block; margin-bottom:3px;
    font-size:11px; font-weight:600; letter-spacing:.02em;
    text-transform:uppercase; color:var(--ds-ink-soft); }   /* ink-soft = AA at 11px */
  .ds-table td[data-label=""]::before { display:none; }      /* unlabelled col → no prefix */
}

/* ---- badge --------------------------------------------------------------- */
.ds-badge { display:inline-flex; align-items:center; gap:var(--ds-1);
  padding:2px var(--ds-2); border-radius:var(--ds-r-pill); font-size:11.5px; font-weight:600;
  line-height:16px; white-space:nowrap; }
.ds-badge svg { width:13px; height:13px; }
.ds-badge.tone-neutral { background:var(--ds-line); color:var(--ds-ink-soft); }
.ds-badge.tone-action  { background:var(--ds-action-soft); color:var(--ds-action-ink); }
.ds-badge.tone-success { background:var(--ds-success-soft); color:var(--ds-success); }
.ds-badge.tone-warning { background:var(--ds-warning-soft); color:var(--ds-warning); }
.ds-badge.tone-danger  { background:var(--ds-danger-soft); color:var(--ds-danger); }
.ds-badge.tone-info    { background:var(--ds-info-soft); color:var(--ds-info); }

/* ---- button -------------------------------------------------------------- */
.ds-btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--ds-2);
  min-height:44px; padding:0 var(--ds-4); border-radius:var(--ds-r-md);
  font-family:var(--ds-font-body); font-size:13.5px; font-weight:600; line-height:1;
  border:1px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background-color var(--ds-t) var(--ds-ease), color var(--ds-t) var(--ds-ease),
    border-color var(--ds-t) var(--ds-ease), opacity var(--ds-t) var(--ds-ease);
  user-select:none; position:relative; }
.ds-btn svg { width:16px; height:16px; flex:0 0 auto; }
.ds-btn:focus-visible { outline:none; box-shadow:var(--ds-focus); }
.ds-btn[disabled], .ds-btn.is-busy { pointer-events:none; opacity:.7; }
.ds-btn-sm { min-height:34px; padding:0 var(--ds-3); font-size:12.5px; }
.ds-btn-lg { min-height:48px; padding:0 var(--ds-5); font-size:15px; }
.ds-btn-primary { background:var(--ds-action); color:#fff; }
.ds-btn-primary:hover { background:var(--ds-action-hover); }
.ds-btn-secondary { background:var(--ds-surface); color:var(--ds-ink); border-color:var(--ds-line-strong); }
.ds-btn-secondary:hover { border-color:var(--ds-action); color:var(--ds-action); }
.ds-btn-ghost { background:transparent; color:var(--ds-action); }
.ds-btn-ghost:hover { background:var(--ds-action-soft); }
.ds-btn-danger { background:var(--ds-danger); color:#fff; }
.ds-btn-danger:hover { filter:brightness(.94); }
/* busy spinner — no layout shift (label stays, spinner overlays) */
.ds-btn.is-busy .ds-btn-label { opacity:0; }
.ds-btn.is-busy::after { content:''; position:absolute; width:16px; height:16px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:ds-spin .6s linear infinite; }
@keyframes ds-spin { to { transform:rotate(360deg); } }
/* Phones: a button with a long label (e.g. tendering's "Ausschreibung anlegen ·
   3 Vergleichsangebote einholen") is white-space:nowrap and would bleed off the
   right edge (clipped by the page's overflow-x:hidden). Cap it to its container
   and let the label wrap. Placed AFTER the .ds-btn base so it wins on source order. */
@media (max-width:640px){
  .ds-btn { max-width:100%; white-space:normal; line-height:1.2; }
}

/* ---- toolbar + filter input + field -------------------------------------- */
.ds-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--ds-3);
  flex-wrap:wrap; margin-bottom:var(--ds-4); }
.ds-toolbar-left, .ds-toolbar-right { display:flex; align-items:center; gap:var(--ds-2); flex-wrap:wrap; }
.ds-filter { position:relative; display:inline-flex; align-items:center; }
.ds-filter svg { position:absolute; left:var(--ds-3); width:16px; height:16px; color:var(--ds-ink-mute);
  pointer-events:none; }
.ds-filter input { min-height:40px; padding:0 var(--ds-3) 0 var(--ds-8);
  border:1px solid var(--ds-line-strong); border-radius:var(--ds-r-md); background:var(--ds-surface);
  font-family:var(--ds-font-body); font-size:13.5px; color:var(--ds-ink); min-width:220px; }
.ds-filter input:focus { outline:none; box-shadow:var(--ds-focus); border-color:var(--ds-action); }
.ds-field { display:block; margin-bottom:var(--ds-3); }
.ds-field-label { display:block; font-size:12.5px; font-weight:600; color:var(--ds-ink-soft);
  margin-bottom:var(--ds-1); }

/* ---- empty state --------------------------------------------------------- */
.ds-empty { text-align:center; padding:var(--ds-10) var(--ds-6); color:var(--ds-ink-soft);
  border:1px dashed var(--ds-line-strong); border-radius:var(--ds-card-radius);
  background:var(--ds-surface-2); }
.ds-empty-ico { width:44px; height:44px; margin:0 auto var(--ds-3); border-radius:var(--ds-r-md);
  display:grid; place-items:center; background:var(--ds-success-soft); color:var(--ds-success); }
.ds-empty-title { font-family:var(--ds-font-display); font-weight:700; font-size:15px; color:var(--ds-ink); }
.ds-empty-hint { font-size:13px; color:var(--ds-ink-soft); margin-top:var(--ds-1);
  max-width:42ch; margin-left:auto; margin-right:auto; }
.ds-empty-action { margin-top:var(--ds-4); }

/* ---- donut --------------------------------------------------------------- */
.ds-donut { display:inline-flex; align-items:center; gap:var(--ds-3); }
.ds-donut-legend { display:flex; flex-direction:column; gap:var(--ds-1); font-size:12.5px; }
.ds-donut-legend i { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:6px; }

/* ---- "Demo-Daten" / "Sandbox" chips (§9 de-hedging) ---------------------- */
.ds-demochip { display:inline-flex; align-items:center; gap:6px; padding:3px var(--ds-2);
  border-radius:var(--ds-r-pill); font-size:11.5px; font-weight:600; line-height:14px;
  background:var(--ds-line); color:var(--ds-ink-soft); border:1px solid var(--ds-line-strong);
  font-family:var(--ds-font-body); white-space:nowrap; cursor:default; }
.ds-demochip svg { width:13px; height:13px; }
.ds-demochip .dot { width:6px; height:6px; border-radius:50%; background:var(--ds-ink-mute); }
.ds-sandbox { display:inline-flex; align-items:center; gap:5px; padding:2px var(--ds-2);
  border-radius:var(--ds-r-pill); font-size:11px; font-weight:600; line-height:14px;
  background:var(--ds-warning-soft); color:var(--ds-warning); white-space:nowrap; }
.ds-sandbox svg { width:12px; height:12px; }

/* ---- contextBanner — inbound deep-link banner (UI.contextBanner) ---------- */
/* Shown at the top of a tool reached via a cross-tool deep-link. All colours are
   --ds-* tokens, so it inherits dark mode automatically. No left-stripe accent
   (we removed those elsewhere) — a soft action-tinted fill + icon chip instead. */
.ds-ctxbanner { display:flex; align-items:center; gap:var(--ds-3);
  background:var(--ds-action-soft); border:1px solid var(--ds-line);
  border-radius:var(--ds-r-md); padding:10px var(--ds-3); margin-bottom:var(--ds-4); }
.ds-ctxbanner-ico { flex:0 0 auto; width:38px; height:38px; border-radius:var(--ds-r-md);
  display:grid; place-items:center; background:var(--ds-surface); color:var(--ds-action); }
.ds-ctxbanner-body { flex:1 1 auto; min-width:0; }
.ds-ctxbanner-title { font-weight:600; font-size:14px; color:var(--ds-ink); }
.ds-ctxbanner-sub { font-size:12px; color:var(--ds-ink-soft); margin-top:2px; }
.ds-ctxbanner-actions { flex:0 0 auto; display:flex; align-items:center; gap:var(--ds-2); }
.ds-ctxbanner-x { width:32px; height:32px; border-radius:var(--ds-r-md); border:0; background:transparent;
  color:var(--ds-ink-mute); cursor:pointer; font-size:20px; line-height:1; }
.ds-ctxbanner-x:hover { background:var(--ds-surface); color:var(--ds-ink); }
@media (max-width:640px){ .ds-ctxbanner { flex-wrap:wrap; } .ds-ctxbanner-actions { width:100%; justify-content:flex-end; } }

/* ---- row flash — briefly highlight a deep-link target row/card ------------ */
.ds-flash { animation:ds-flash 2.2s var(--ds-ease); }
@keyframes ds-flash {
  0%,18% { background:var(--ds-action-soft); box-shadow:0 0 0 2px var(--ds-action) inset; }
  100%   { background:transparent; box-shadow:none; }
}

/* ===========================================================================
   §4  MOTION — page-enter fade (warm only) + reduced-motion guard
   =========================================================================== */
body[data-register="warm"] .ds-scope.ds-enter { animation:ds-fade var(--ds-t) var(--ds-ease); }
@keyframes ds-fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  .ds-scope, .ds-scope * { animation:none !important; transition:none !important; }
  .ds-btn.is-busy::after { animation:none !important; }
}

/* ===========================================================================
   SIDEBAR register density — make the verwalter/eigentuemer sidebar feel 'pro'
   (tighter rows, muted chrome). Warm (mieter) keeps the roomier default.
   These augment js/shell.js markup (which now emits MZ.icon SVGs).
   =========================================================================== */
#mz-sidebar .mz-nav-ico svg { width:18px; height:18px; }
#mz-sidebar .mz-nav-ico { color:var(--ds-ink-mute); display:inline-flex; align-items:center;
  justify-content:center; }
#mz-sidebar .mz-nav-item.active .mz-nav-ico { color:var(--ds-action); }
body[data-register="pro"] #mz-sidebar .mz-nav-item { padding-top:7px; padding-bottom:7px; }
body[data-register="pro"] #mz-sidebar .mz-sb-nav { row-gap:1px; }

/* ===========================================================================
   DASHBOARD bridge — the per-persona cockpit (#mz-dash-grid) keeps its bespoke
   widget classes (styled in app-polish.css) but now renders through MZ.icon +
   MZ.ui.emptyState + the .ds-kpirow. Tidy the seams here.
   =========================================================================== */
#mz-dash-grid .mz-w-ico svg { width:15px; height:15px; }
#mz-dash-grid .mz-w-action svg { width:14px; height:14px; vertical-align:-2px; }
#mz-dash-grid .mz-act-chev svg,
#mz-dash-grid .mz-doc-chev svg,
#mz-dash-grid .mz-quick-ico svg,
#mz-dash-grid .mz-doc-ico svg,
#mz-dash-grid .mz-cta-ico svg,
#mz-dash-grid .mz-cta-btn svg { width:auto; height:auto; }
/* a DS emptyState dropped into a widget body is more compact than the page one */
#mz-dash-grid .mz-w-body .ds-empty { padding:var(--ds-5) var(--ds-3); border:0; background:transparent; }
#mz-dash-grid .mz-w-body .ds-empty-ico { width:38px; height:38px; }
/* the cockpit KPI row is 4-up on wide screens like the old grid */
@media (min-width:881px){ #mz-dash-grid .ds-kpirow { grid-template-columns:repeat(4,1fr); } }