/* Unterhaltsrechner – steurifisch Design System (steurifisch.swiss/design-system)
   Alle Werte greifen zuerst auf die Tokens der Website zurück (--text-primary, --surface-page …);
   die Fallbacks entsprechen tokens/colors.css, typography.css und spacing.css (Stand 10/2026).
   Drei Stimmen: Instrument Sans (Marke/UI), Source Serif 4 (juristischer Text), JetBrains Mono (Maschine).
   Layout: Kopfleiste mit Wortmarke · links Phasen und Abschnitte · Mitte Eingaben · rechts Ergebnis. */
:root {
  --uh-page: var(--surface-page, #ffffff);
  --uh-card: var(--surface-card, #ffffff);
  --uh-sunken: var(--surface-sunken, #f5f5f4);
  --uh-ink: var(--text-primary, #111111);
  --uh-muted: var(--text-secondary, #595959);
  --uh-machine: var(--text-machine, #595959);
  --uh-faint: #9c9c98;
  --uh-hair: var(--border-hairline, #e0e0de);
  --uh-line: var(--border-default, #cdcdc9);
  --uh-strong: var(--border-strong, #111111);
  --uh-accent: var(--color-accent, #0d4d6b);
  --uh-accent-ink: var(--color-accent-ink, #0a3a52);
  --uh-accent-soft: var(--color-accent-soft, #e3edf1);
  --uh-solid: var(--surface-ink, #111111);
  --uh-on-solid: var(--text-on-ink, #ffffff);
  --uh-focus: var(--focus-ring, #0d4d6b);
  --uh-bad: #a3261b;
  --uh-bad-soft: #fbecea;
  --uh-grotesk: var(--font-grotesk, "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
  --uh-serif: var(--font-serif, "Source Serif 4", "Iowan Old Style", Georgia, serif);
  --uh-mono: var(--font-mono, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace);
  --uh-r: var(--radius-sm, 2px);
  --uh-fast: var(--dur-fast, 120ms);
}
/* Dunkel: identisch mit [data-theme="dark"] des Design-Systems */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --uh-page: #0e0e0e; --uh-card: #161615; --uh-sunken: #1d1d1c; --uh-ink: #f4f4f2; --uh-muted: #a6a6a2; --uh-machine: #8f8f8b; --uh-faint: #6f6f6b;
    --uh-hair: #262625; --uh-line: #333331; --uh-strong: #f4f4f2; --uh-accent: #4b93b5; --uh-accent-ink: #63a7c8; --uh-accent-soft: #0f2833;
    --uh-solid: #f4f4f2; --uh-on-solid: #0e0e0e; --uh-focus: #63a7c8; --uh-bad: #f08a7e; --uh-bad-soft: #2c1714;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --uh-page: #0e0e0e; --uh-card: #161615; --uh-sunken: #1d1d1c; --uh-ink: #f4f4f2; --uh-muted: #a6a6a2; --uh-machine: #8f8f8b; --uh-faint: #6f6f6b;
  --uh-hair: #262625; --uh-line: #333331; --uh-strong: #f4f4f2; --uh-accent: #4b93b5; --uh-accent-ink: #63a7c8; --uh-accent-soft: #0f2833;
  --uh-solid: #f4f4f2; --uh-on-solid: #0e0e0e; --uh-focus: #63a7c8; --uh-bad: #f08a7e; --uh-bad-soft: #2c1714;
  color-scheme: dark;
}
/* Interne Anwendung (ERP): Sand-Kennung des Design-Systems – <div id="unterhaltsrechner" data-uhr-context="intern"> */
.uhr[data-uhr-context="intern"] { --uh-page: var(--surface-internal, #f5efe3); --uh-sunken: rgba(122, 92, 46, 0.06); --uh-hair: var(--border-internal, #e4dccb); }
:root[data-theme="dark"] .uhr[data-uhr-context="intern"] { --uh-page: #1f1a12; --uh-hair: #3a3020; }
/* In eine Seite mit eigener Kopfzeile eingebettet: <div … data-uhr-bare> blendet die Wortmarke aus */
.uhr[data-uhr-bare] .uhr-wm { display: none; }

.uhr { font-family: var(--uh-grotesk); font-size: 15px; line-height: 1.5; color: var(--uh-ink); background: var(--uh-page); font-feature-settings: "liga" 1; -webkit-font-smoothing: antialiased; }
.uhr *, .uhr *::before, .uhr *::after { box-sizing: border-box; }
.uhr :where(button, input, select, textarea) { font: inherit; color: inherit; }
.uhr .mono { font-family: var(--uh-mono); }
.uhr :focus-visible { outline: 2px solid var(--uh-focus); outline-offset: 2px; }

/* Kopfleiste wie steurifisch.swiss */
.uhr-head { border-bottom: 1px solid var(--uh-strong); }
.uhr-head-in { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 64px; flex-wrap: wrap; padding-block: 10px; }
.uhr-wm { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--uh-ink); line-height: 1; white-space: nowrap; }
.uhr-wm .n { font-weight: 600; font-size: 1.55rem; letter-spacing: -0.02em; line-height: 1.05; }
.uhr-wm .d { color: var(--uh-muted); font-size: 0.66rem; letter-spacing: 0.01em; line-height: 1.3; margin-top: 2px; }
.uhr-actions { display: flex; flex-wrap: wrap; gap: 0 18px; }
.uhr-tool { appearance: none; border: 0; background: none; cursor: pointer; padding: 12px 4px; font-size: 14px; font-weight: 600; color: var(--uh-muted); transition: color var(--uh-fast); }
.uhr-tool:hover { color: var(--uh-ink); }
.uhr-path { font-family: var(--uh-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--uh-machine); padding: 8px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; border-top: 1px solid var(--uh-hair); }
.uhr-path .sl { color: var(--uh-faint); }
.uhr-path .on { color: var(--uh-ink); }
.uhr-path .st { margin-left: auto; }
.uhr-link { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.uhr-link:hover { color: var(--uh-accent); }

/* Aktionen = .btn-ghost / .btn-primary des Design-Systems */
.uhr-acts-inline, .uhr-nav-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.uhr-act { appearance: none; display: inline-flex; align-items: center; cursor: pointer; font-weight: 500; font-size: 14px; padding: 7px 14px; border-radius: var(--uh-r); border: 1px solid var(--uh-line); background: transparent; color: var(--uh-ink); transition: all var(--uh-fast) cubic-bezier(0.2, 0, 0.1, 1); }
.uhr-act:hover { border-color: var(--uh-strong); }
.uhr-act:active { transform: translateY(1px); }
.uhr-act.primary { background: var(--uh-solid); color: var(--uh-on-solid); border-color: var(--uh-solid); }
.uhr-act.primary:hover { background: var(--uh-accent); border-color: var(--uh-accent); color: #ffffff; }
.uhr-act.quiet { border-color: transparent; color: var(--uh-muted); padding-inline: 4px; }
.uhr-act.quiet:hover { color: var(--uh-bad); border-color: transparent; }

/* Drei Spalten */
.uhr-shell { display: grid; grid-template-columns: 200px minmax(0, 1fr) 380px; grid-template-areas: "nav main side"; gap: 48px; align-items: start; padding-block: 32px 64px; }
.uhr-nav { grid-area: nav; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 20px); display: grid; gap: 32px; min-width: 0; }
.uhr-main { grid-area: main; min-width: 0; }
.uhr-side { grid-area: side; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 20px); display: grid; gap: 16px; min-width: 0; max-height: calc(100vh - 40px); overflow-y: auto; }
@media (max-width: 1280px) {
  .uhr-shell { grid-template-columns: 180px minmax(0, 1fr); grid-template-areas: "nav side" "nav main"; gap: 32px 40px; }
  .uhr-side { position: static; max-height: none; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .uhr-side > .uhr-res, .uhr-side > .uhr-warn, .uhr-side > .uhr-acts-inline { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .uhr-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "side" "main"; gap: 28px; }
  .uhr-nav { position: static; gap: 18px; }
  .uhr-side { grid-template-columns: minmax(0, 1fr); }
  .uhr-phases { grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); overflow-x: auto; gap: 12px; }
  .uhr-secs { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .uhr-path .st { margin-left: 0; width: 100%; }
}

/* Linke Navigation */
.uhr-nav-group { display: grid; gap: 8px; }
.uhr-nav-t { font-size: 13px; font-weight: 600; color: var(--uh-muted); }
.uhr-phases { list-style: none; margin: 0; padding: 0; display: grid; }
.uhr-ph { appearance: none; width: 100%; border: 0; border-top: 1px solid var(--uh-hair); background: none; cursor: pointer; text-align: left; padding: 10px 0 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; color: var(--uh-muted); transition: color var(--uh-fast); }
.uhr-phases li:last-child .uhr-ph { border-bottom: 1px solid var(--uh-hair); }
.uhr-ph:hover { color: var(--uh-ink); }
.uhr-ph.on { color: var(--uh-ink); }
.uhr-ph .l { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.uhr-ph .a { font-family: var(--uh-mono); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.uhr-ph.on .a { color: var(--uh-accent); font-weight: 500; }
.uhr-ph .d { grid-column: 1 / -1; font-family: var(--uh-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--uh-machine); }
.uhr-ph .r { grid-column: 1 / -1; font-size: 12px; color: var(--uh-faint); }
.uhr-ph .r.off { color: var(--uh-bad); }
.uhr-ph .m { grid-column: 1 / -1; display: flex; height: 2px; margin-top: 6px; background: var(--uh-sunken); }
.uhr-ph .m i { display: block; height: 100%; }
.uhr-nav-acts { margin-top: 6px; }
.uhr-nav-acts .uhr-act { font-size: 13px; padding: 5px 10px; }
.uhr-secs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.uhr-sec { appearance: none; border: 0; background: none; padding: 6px 0; cursor: pointer; color: var(--uh-muted); text-align: left; font-size: 14px; font-weight: 600; transition: color var(--uh-fast); }
.uhr-sec:hover, .uhr-sec.on { color: var(--uh-ink); }
.k-bar { background: var(--uh-accent); } .k-bu { background: var(--uh-ink); } .k-eh { background: var(--uh-faint); } .k-kg { background: var(--uh-line); } .k-none { background: var(--uh-sunken); }

/* Mitte */
.uhr-casehead { display: grid; gap: 12px; margin-bottom: 36px; }
.uhr .uhr-case-title { width: 100%; font-family: var(--uh-grotesk); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: -0.025em; line-height: 1.1; border: 0 !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
.uhr .uhr-case-title:hover { color: var(--uh-accent); }
.uhr-lead { margin: 0; font-family: var(--uh-serif); font-size: 1.0625rem; line-height: 1.6; color: var(--uh-muted); max-width: 66ch; }
.uhr-h2 { font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 18px; }
.uhr-h3 { font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; margin: 0; }
.uhr-phase-meta { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; margin-top: 8px; }
.uhr-f { display: grid; gap: 4px; min-width: 0; flex: 1 1 140px; }
.uhr-f > span { font-size: 13px; color: var(--uh-muted); }
.uhr-f.w-xs { flex: 0 0 72px; } .uhr-f.w-sm { flex: 0 1 160px; } .uhr-f.w-date { flex: 0 1 160px; } .uhr-f.grow { flex: 3 1 240px; }

.uhr select, .uhr input[type="text"], .uhr input[type="number"], .uhr input[type="date"], .uhr textarea {
  border: 1px solid var(--uh-line); background: var(--uh-card); border-radius: var(--uh-r); padding: 7px 9px; min-width: 0; width: 100%; transition: border-color var(--uh-fast);
}
.uhr input:hover, .uhr select:hover { border-color: var(--uh-strong); }
.uhr input[type="number"] { text-align: right; font-family: var(--uh-mono); font-size: 14px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.uhr input[type="number"]::-webkit-inner-spin-button, .uhr input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.uhr textarea { font-family: var(--uh-mono); font-size: 12px; min-height: 160px; }
.uhr-hint { margin: 0; font-family: var(--uh-serif); font-size: 14px; line-height: 1.55; color: var(--uh-muted); max-width: 70ch; }

/* Budgettabelle */
.uhr-sheet-wrap { overflow-x: auto; border-top: 1px solid var(--uh-strong); }
.uhr-sheet { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; }
.uhr-sheet col.c-label { width: 220px; } .uhr-sheet col.c-x { width: 30px; }
.uhr-sheet th, .uhr-sheet td { padding: 0; border-bottom: 1px solid var(--uh-hair); vertical-align: middle; }
.uhr-sheet thead th { background: var(--uh-page); padding: 12px 10px 10px; text-align: right; font-weight: 400; border-bottom: 1px solid var(--uh-line); }
.uhr-sheet thead th.lbl { text-align: left; color: var(--uh-machine); font-size: 11px; vertical-align: bottom; font-family: var(--uh-mono); letter-spacing: 0.02em; }
.uhr-sheet .cn { display: block; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.uhr-sheet .cr { display: block; font-size: 12px; color: var(--uh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uhr-sheet th.col-k .cn { color: var(--uh-accent); }
.uhr-sheet th.lbl { text-align: left; position: sticky; left: 0; background: var(--uh-page); z-index: 1; }
.uhr-sheet tbody th.lbl { padding: 0 4px 0 0; font-weight: 400; }
.uhr-sheet .rowhead { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; padding-bottom: 2px; }
.uhr-sheet .rowhead .rowname { flex: 1 1 140px; }
.uhr-sheet .rowhead .rowlv { margin: 0 0 6px 6px; }
.uhr-sheet .rowname { border-color: transparent !important; background: transparent !important; padding: 8px 6px !important; }
.uhr-sheet .rowname:hover { border-color: var(--uh-hair) !important; }
.uhr-sheet .rowname:focus { border-color: var(--uh-line) !important; background: var(--uh-card) !important; }
.uhr-sheet .rowlv { width: auto; flex: 0 0 auto; font-size: 11px; padding: 1px 4px; color: var(--uh-machine); border-color: var(--uh-hair); background: var(--uh-sunken); font-family: var(--uh-mono); }
.uhr-sheet td.cell input { border-color: transparent; border-radius: 0; background: transparent; padding: 9px 10px; }
.uhr-sheet td.cell input:hover { background: var(--uh-sunken); border-color: transparent; }
.uhr-sheet td.cell input:focus { background: var(--uh-accent-soft); outline: 2px solid var(--uh-focus); outline-offset: -2px; }
.uhr-sheet td.cell + td.cell, .uhr-sheet td.n + td.n, .uhr-sheet thead th + th { border-left: 1px solid var(--uh-hair); }
.uhr-sheet td.n { text-align: right; padding: 8px 10px; font-family: var(--uh-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uhr-sheet td.multi { color: var(--uh-muted); font-style: italic; }
.uhr-sheet tr.grp th { text-align: left; padding: 22px 0 8px; font-size: 14px; font-weight: 600; background: var(--uh-page); border-bottom: 1px solid var(--uh-line); }
.uhr-sheet tr.sub th, .uhr-sheet tr.sub td { color: var(--uh-muted); font-size: 13px; }
.uhr-sheet tr.sub th.lbl, .uhr-sheet tr.tot th.lbl, .uhr-sheet tr.bal th.lbl { padding: 8px 0; }
.uhr-sheet tr.tot th, .uhr-sheet tr.tot td { font-weight: 600; border-top: 1px solid var(--uh-strong); }
.uhr-sheet tr.bal th, .uhr-sheet tr.bal td { font-weight: 600; border-bottom: 0; }
.uhr-sheet td.neg { color: var(--uh-bad); }
.uhr-x { appearance: none; border: 0; background: none; color: var(--uh-faint); cursor: pointer; width: 28px; height: 28px; font-size: 16px; line-height: 1; flex: 0 0 auto; transition: color var(--uh-fast); }
.uhr-x:hover { color: var(--uh-bad); }
.uhr-addrow { display: grid; gap: 10px; margin-top: 14px; }
.uhr-addrow > select { width: auto; justify-self: start; }
.uhr-custom { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.uhr-custom input { flex: 2 1 200px; } .uhr-custom select { flex: 1 1 150px; width: auto; }
.uhr-custom .uhr-btn { appearance: none; cursor: pointer; font-weight: 500; font-size: 14px; padding: 7px 14px; border-radius: var(--uh-r); border: 1px solid var(--uh-solid); background: var(--uh-solid); color: var(--uh-on-solid); }

/* Personen */
.uhr-block { display: grid; gap: 14px; margin-bottom: 40px; justify-items: start; }
.uhr-block > * { justify-self: stretch; }
.uhr-block > .uhr-act { justify-self: start; }
.uhr-plist { display: grid; gap: 12px; }
.uhr-prow { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; }
.uhr-kid { border: 1px solid var(--uh-line); border-radius: var(--uh-r); background: var(--uh-card); padding: 20px 24px; display: grid; gap: 14px; }
.uhr-check { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--uh-muted); padding-bottom: 8px; }
.uhr-check input { accent-color: var(--uh-accent); }
.uhr-care { display: grid; gap: 6px; }
.uhr-care-legend { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-variant-numeric: tabular-nums; }
.uhr-care-legend .mid { color: var(--uh-muted); font-size: 13px; }
.uhr-care input[type="range"] { width: 100%; accent-color: var(--uh-accent); }
.uhr-more summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--uh-muted); list-style: none; transition: color var(--uh-fast); }
.uhr-more summary::-webkit-details-marker { display: none; }
.uhr-more summary::after { content: " ▸"; font-size: 11px; display: inline-block; transition: transform var(--uh-fast); }
.uhr-more[open] summary::after { transform: rotate(90deg); }
.uhr-more summary:hover { color: var(--uh-ink); }
.uhr-more[open] summary { margin-bottom: 10px; }
.uhr-assign { display: grid; gap: 4px; }
.uhr-arow { display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 180px); gap: 8px; align-items: center; font-size: 14px; }
.uhr-arow .n { text-align: right; font-family: var(--uh-mono); font-size: 13px; }
.uhr-arow i { color: var(--uh-muted); font-style: normal; }

/* Ermessen, Methode, Begründung */
.uhr-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.uhr-param { border: 1px solid var(--uh-line); border-radius: var(--uh-r); background: var(--uh-card); padding: 20px; display: grid; gap: 10px; align-content: start; }
.uhr-param-t { font-weight: 600; font-size: 15px; }
.uhr-inline { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.uhr-inline .w-num { width: 72px; }
.uhr-method { margin: 0; padding-left: 22px; display: grid; gap: 14px; max-width: 66ch; font-family: var(--uh-serif); font-size: 1.0625rem; line-height: 1.6; }
.uhr-method b { font-family: var(--uh-grotesk); font-weight: 600; }
.uhr-method li::marker { font-family: var(--uh-mono); font-size: 13px; color: var(--uh-machine); }
.uhr-notes { display: grid; gap: 18px; max-width: 66ch; margin-top: 18px; }
.uhr-notes p { margin: 0; font-family: var(--uh-serif); font-size: 1.0625rem; line-height: 1.62; }
.uhr-notes .ref { font-family: var(--uh-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--uh-machine); display: block; margin-bottom: 4px; }
.uhr-steps { display: grid; gap: 22px; max-width: 72ch; }
.uhr-steps ul { margin: 8px 0 0; padding-left: 18px; color: var(--uh-muted); display: grid; gap: 4px; font-family: var(--uh-mono); font-size: 12.5px; line-height: 1.55; }

/* Fallauswahl */
.uhr-cases { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.uhr-case { appearance: none; border: 1px solid var(--uh-line); border-radius: var(--uh-r); background: var(--uh-card); text-align: left; padding: 20px 22px 22px; cursor: pointer; display: grid; gap: 6px; align-content: start; color: var(--uh-ink); transition: border-color var(--uh-fast); }
.uhr-case:hover { border-color: var(--uh-strong); }
.uhr-case .t { font-weight: 600; font-size: 1.125rem; letter-spacing: -0.01em; }
.uhr-case .p { font-family: var(--uh-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--uh-machine); }
.uhr-case .x { font-family: var(--uh-serif); font-size: 15px; line-height: 1.5; color: var(--uh-muted); }
.uhr-case.saved { cursor: default; }
.uhr-case.saved .t { appearance: none; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
.uhr-case.saved .t:hover { color: var(--uh-accent); }

/* Rechte Spalte: Ergebnis */
.uhr-res { border: 1px solid var(--uh-strong); border-radius: var(--uh-r); background: var(--uh-card); padding: 22px 24px; display: grid; gap: 14px; }
.uhr-res-k { font-size: 13px; font-weight: 600; color: var(--uh-muted); }
.uhr-payer { display: grid; gap: 4px; }
.uhr-payer.next { border-top: 1px solid var(--uh-hair); padding-top: 14px; }
.uhr-payer-who { font-size: 15px; color: var(--uh-ink); font-weight: 500; }
.uhr-payer-sum { font-weight: 600; font-size: 3rem; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.uhr-payer.next .uhr-payer-sum { font-size: 1.9rem; }
.uhr-payer-sum .u { font-family: var(--uh-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.02em; color: var(--uh-machine); }
.uhr-paylines { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.uhr-paylines li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.uhr-paylines .k { width: 8px; height: 8px; }
.uhr-paylines .t i { color: var(--uh-muted); font-style: normal; }
.uhr-paylines .a { font-family: var(--uh-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.uhr-none { margin: 0; font-size: 17px; }
.uhr-ref { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-family: var(--uh-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--uh-machine); border-top: 1px solid var(--uh-hair); padding-top: 10px; }
.uhr-ref b { font-weight: 500; color: var(--uh-ink); }
.uhr-ref b.off { color: var(--uh-bad); }
.uhr-warn { display: grid; gap: 8px; border: 1px solid var(--uh-bad); border-radius: var(--uh-r); background: var(--uh-bad-soft); padding: 14px 18px; }
.uhr-warn .uhr-res-k { color: var(--uh-bad); }
.uhr-warn p { margin: 0; font-family: var(--uh-serif); font-size: 14.5px; line-height: 1.5; color: var(--uh-ink); }
.uhr-block2 { border: 1px solid var(--uh-line); border-radius: var(--uh-r); background: var(--uh-card); padding: 18px 22px; display: grid; gap: 12px; min-width: 0; }
.uhr-hh { display: grid; gap: 16px; }
.uhr-hh-row { display: grid; gap: 6px; }
.uhr-hh-name { font-size: 14px; }
.uhr-hh-name b { font-weight: 600; }
.uhr-hh-bar { display: flex; height: 6px; background: var(--uh-sunken); overflow: hidden; }
.uhr-hh-bar i { display: block; height: 100%; }
.uhr-hh-bar .need { background: var(--uh-ink); }
.uhr-hh-bar .free { background: var(--uh-accent); }
.uhr-hh-bar .gap { background: repeating-linear-gradient(135deg, var(--uh-bad) 0 2px, transparent 2px 5px); }
.uhr-hh-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
.uhr-hh-nums dt { font-size: 12px; color: var(--uh-muted); }
.uhr-hh-nums dd { margin: 0; font-family: var(--uh-mono); font-size: 13px; }
.uhr-hh-nums .neg dd { color: var(--uh-bad); }
.uhr-table-scroll { overflow-x: auto; }
.uhr-mini { width: 100%; border-collapse: collapse; font-size: 13px; }
.uhr-mini th, .uhr-mini td { padding: 6px 4px; border-bottom: 1px solid var(--uh-hair); text-align: left; font-weight: 400; vertical-align: top; }
.uhr-mini thead th { color: var(--uh-muted); font-size: 12px; font-weight: 600; }
.uhr-mini tbody th { color: var(--uh-muted); white-space: nowrap; }
.uhr-mini .n { text-align: right; font-family: var(--uh-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.uhr-mini tr:last-child th, .uhr-mini tr:last-child td { border-bottom: 0; }
.uhr-mini tr.on th, .uhr-mini tr.on td { color: var(--uh-accent); }
.uhr-mini .neg { color: var(--uh-bad); font-weight: 600; }
.uhr-mini .dim { color: var(--uh-faint); }

.uhr-io { display: grid; gap: 10px; border: 1px solid var(--uh-line); border-radius: var(--uh-r); background: var(--uh-card); padding: 18px 20px; margin-top: 18px; }
.uhr-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); background: var(--uh-solid); color: var(--uh-on-solid); padding: 9px 16px; border-radius: var(--uh-r); font-size: 14px; font-weight: 500; z-index: 50; }
.uhr-foot { border-top: 1px solid var(--uh-hair); padding-block: 16px 28px; font-size: 13px; color: var(--uh-muted); display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }
.uhr-foot .mono { font-size: 11px; letter-spacing: 0.02em; color: var(--uh-machine); }
.uhr-alert { margin: 0; color: var(--uh-bad); }

@media (prefers-reduced-motion: reduce) { .uhr * { transition: none !important; } }
@media (max-width: 560px) {
  .uhr-payer-sum { font-size: 2.4rem; }
  .uhr-arow { grid-template-columns: minmax(0, 1fr) 70px; }
  .uhr-arow select { grid-column: 1 / -1; }
  .uhr-hh-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uhr-kid { padding: 16px; }
}

/* ---------- Kompakte Einbettung im Beitrag (data-uhr-mode="kompakt") ---------- */
.uhr.lean { border: 1px solid var(--uh-strong); border-radius: 2px; background: var(--uh-card); }
.uhr.lean .uhr-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 24px; padding: 16px 20px; border-bottom: 1px solid var(--uh-hair); }
.uhr.lean .uhr-pick { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--uh-muted); }
.uhr.lean .uhr-pick select { min-width: 240px; }
.uhr.lean .uhr-tabs { display: flex; gap: 4px 20px; flex: 1; flex-wrap: wrap; }
.uhr.lean .uhr-tab { appearance: none; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; padding: 8px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--uh-muted); }
.uhr.lean .uhr-tab:hover { color: var(--uh-ink); }
.uhr.lean .uhr-tab.on { color: var(--uh-ink); border-bottom-color: var(--uh-ink); }
.uhr.lean .uhr-shell { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "main side"; gap: 32px; padding: 20px; }
.uhr.lean .uhr-side { top: 88px; max-height: calc(100vh - 108px); }
.uhr.lean .uhr-leanhead { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 20px; margin-bottom: 16px; }
.uhr.lean .uhr-leanhead .uhr-lead { flex: 1; min-width: 220px; margin: 0; font-size: 14px; }
.uhr.lean .uhr-hint, .uhr.lean .uhr-block > .uhr-hint { display: none; }
.uhr.lean .uhr-leanhh { display: grid; gap: 6px; margin: 0; }
.uhr.lean .uhr-leanhh div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.uhr.lean .uhr-leanhh dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.uhr.lean .uhr-leanhh dd.neg { color: var(--uh-bad); }
.uhr.lean .uhr-leanwarn { font-size: 13px; color: var(--uh-muted); }
.uhr.lean .uhr-leanwarn p { margin: 6px 0 0; }
@media (max-width: 900px) {
  .uhr.lean .uhr-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "main"; }
  .uhr.lean .uhr-side { position: static; max-height: none; overflow: visible; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .uhr.lean .uhr-bar, .uhr.lean .uhr-shell { padding: 14px; } .uhr.lean .uhr-pick select { min-width: 0; width: 100%; } .uhr.lean .uhr-pick { flex: 1 1 100%; } }
.uhr.lean .uhr-side { gap: 0; border: 1px solid var(--uh-strong); border-radius: var(--uh-r); background: var(--uh-card); }
.uhr.lean .uhr-side > .uhr-res { border: 0; background: none; }
.uhr.lean .uhr-side > .uhr-block2, .uhr.lean .uhr-side > .uhr-leanwarn { border: 0; border-top: 1px solid var(--uh-hair); border-radius: 0; background: none; padding: 16px 24px; }
.uhr.lean .uhr-leanwarn summary { cursor: pointer; }
.uhr.lean .uhr-side { grid-template-columns: minmax(0, 1fr); align-items: start; }
.uhr.lean .uhr-side > * { grid-column: 1 / -1; }
@media (min-width: 901px) { .uhr.lean .uhr-side { position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; } }