@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Components/Admin/AdminNavMenu.razor.rz.scp.css */
.w4l-nav-badge[b-27mox87p18] {
    margin-left: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--w4l-warning);
    color: var(--foreground-on-accent-rest);
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* /Components/Admin/InvoiceAdmin.razor.rz.scp.css */
.ia-filter-open[b-n54y4linu8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    cursor: pointer;
}

.ia-confirm-row[b-n54y4linu8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 0;
}

.ia-confirm-actions[b-n54y4linu8] {
    display: flex;
    gap: 12px;
}
/* /Components/Admin/NewsletterCampaigns.razor.rz.scp.css */
/* Surface (fill, radius, padding) comes from .w4l-edit-panel in utilities.css — here only the
   editor internals. Inputs keep the global .w4l-text-input look; this file just stacks the
   labelled fields and gives the actions row its spacing. */

.nlc-editor[b-ri9zl3e03h] {
    margin-top: 16px;
}

.nlc-fields[b-ri9zl3e03h] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nlc-fields label[b-ri9zl3e03h] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nlc-label[b-ri9zl3e03h] {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
}

/* Link + label sit side by side on wide screens and wrap on narrow ones. */
.nlc-cta[b-ri9zl3e03h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.nlc-english[b-ri9zl3e03h] {
    margin-top: 4px;
}

.nlc-english > summary[b-ri9zl3e03h] {
    cursor: pointer;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
    margin-bottom: 8px;
}

.nlc-actions[b-ri9zl3e03h] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
/* /Components/Admin/PricingAdmin.razor.rz.scp.css */
.pricing-panel[b-b2bdvk1ubg] {
    margin-bottom: 24px;
}

.pricing-subhead[b-b2bdvk1ubg] {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    margin-bottom: 6px;
}

.pricing-form-grid[b-b2bdvk1ubg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.pricing-form-grid label[b-b2bdvk1ubg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
}

.pricing-wide[b-b2bdvk1ubg] {
    grid-column: 1 / -1;
}

.pricing-tier-row[b-b2bdvk1ubg] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 8px;
}

.pricing-tier-row label[b-b2bdvk1ubg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
}

.pricing-actions[b-b2bdvk1ubg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.pricing-check[b-b2bdvk1ubg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.86rem;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.pricing-import[b-b2bdvk1ubg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 420px;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
}

.pricing-note[b-b2bdvk1ubg] {
    margin: 4px 0 0;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

.pricing-changes[b-b2bdvk1ubg] {
    margin: 4px 0 0;
    padding-left: 1.2rem;
    font-family: var(--monospace-font, ui-monospace, monospace);
    font-size: 0.8rem;
    color: var(--neutral-foreground-rest);
}

/* The raw schema message from the service — diagnostic, clearly secondary to the headline. */
.pricing-error-detail[b-b2bdvk1ubg] {
    display: block;
    margin-top: 6px;
    font-family: var(--monospace-font, ui-monospace, monospace);
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
    word-break: break-word;
}

.pricing-row--inactive[b-b2bdvk1ubg] {
    opacity: 0.55;
}
/* /Components/Admin/UsageAdmin.razor.rz.scp.css */
/* Area-breakdown proportional bar (relative to the busiest area in the current filter). */
.w4l-usage-bar-track[b-9ip6zn8ncg] {
    width: 100%;
    min-width: 80px;
    height: 8px;
    border-radius: 4px;
    background: var(--neutral-fill-secondary-rest);
    overflow: hidden;
}

.w4l-usage-bar[b-9ip6zn8ncg] {
    height: 100%;
    border-radius: 4px;
    background: var(--accent-fill-rest);
}

/* Per-user timeline: one block per Swiss calendar day, newest first (server-ordered). */
.w4l-usage-timeline-day[b-9ip6zn8ncg] {
    margin-bottom: 1rem;
}

.w4l-usage-timeline-date[b-9ip6zn8ncg] {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 4px;
}

.w4l-usage-timeline-list[b-9ip6zn8ncg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.w4l-usage-timeline-list li[b-9ip6zn8ncg] {
    display: flex;
    gap: 12px;
    align-items: baseline;
    font-size: 13px;
    padding: 4px 8px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.w4l-usage-timeline-list li .num[b-9ip6zn8ncg] {
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-hint);
    min-width: 48px;
}

.w4l-usage-timeline-list li .mono[b-9ip6zn8ncg] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.w4l-usage-timeline-list li .muted[b-9ip6zn8ncg] {
    color: var(--neutral-foreground-hint);
}

/* Error timeline rows: same color-mix pattern as UsageErrorBoundary.razor.css — the
   --error-fill-rest/--error-foreground-rest/--color-danger-subtle tokens are undefined no-ops
   in this repo, so the runtime --error token is mixed by hand instead. */
.w4l-usage-timeline-list li.w4l-usage-timeline-error[b-9ip6zn8ncg] {
    border-left: 3px solid var(--error, #d13438);
    /* 3px border + 5px padding = the 8px the plain `li` rule uses, so error and usage rows keep a
       flush left edge. Compounded with the list class on purpose: the bare class alone loses to
       `.w4l-usage-timeline-list li` on specificity and the padding would silently not apply. */
    padding-left: 5px;
    background-color: color-mix(in srgb, var(--error, #d13438) 12%, transparent);
    color: var(--error, #d13438);
    flex-wrap: wrap;
}

.w4l-usage-timeline-error code[b-9ip6zn8ncg] {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--neutral-foreground-rest);
}
/* /Components/Admin/UserManager.razor.rz.scp.css */
/* Master-detail: table left, detail right, always two equal columns; stacks below ~1100px.
   The detail column is always shown — a selection always exists once there are rows
   (see AutoSelectIfNeeded in UserManager.razor). */
.w4l-user-master-detail[b-20aorbe2vx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.w4l-user-detail-col[b-20aorbe2vx] {
    min-width: 0;
}

.w4l-admin-table-selectable tbody tr[b-20aorbe2vx] {
    cursor: pointer;
}

.w4l-admin-table-selectable tbody tr.is-selected[b-20aorbe2vx] {
    background: var(--neutral-fill-secondary-rest);
}

@media (max-width: 1100px) {
    .w4l-user-master-detail[b-20aorbe2vx] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Admin/Users/UserDetailPanel.razor.rz.scp.css */
.w4l-user-detail[b-ro4pmamept] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Lightweight tab strip; content panes are display-toggled by the component (FAST rule 6). */
.w4l-tabs[b-ro4pmamept] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.w4l-tab[b-ro4pmamept] {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--neutral-foreground-rest);
    font-size: 13px;
}

.w4l-tab.is-active[b-ro4pmamept] {
    border-bottom-color: var(--accent-fill-rest);
    font-weight: 600;
}

/* Reused verbatim from UsageAdmin.razor.css — scoped CSS does not cross components. */
.w4l-usage-timeline-day[b-ro4pmamept] { margin-bottom: 1rem; }
.w4l-usage-timeline-date[b-ro4pmamept] { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.w4l-usage-timeline-list[b-ro4pmamept] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.w4l-usage-timeline-list li[b-ro4pmamept] { display: flex; gap: 12px; align-items: baseline; }
/* /Components/Admin/VoucherAdmin.razor.rz.scp.css */
.voucher-create[b-g0r29wsowh] {
    margin-bottom: 24px;
}

.voucher-form-grid[b-g0r29wsowh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.voucher-form-grid label[b-g0r29wsowh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
}

.voucher-note-field[b-g0r29wsowh] {
    grid-column: 1 / -1;
}

.voucher-input[b-g0r29wsowh] {
    font-family: var(--body-font, "Segoe UI", sans-serif);
    font-size: var(--type-ramp-base-font-size, 14px);
    height: 32px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border: calc(var(--stroke-width, 1) * 1px) solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    background-color: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    outline: none;
}

.voucher-input:hover[b-g0r29wsowh] { border-color: var(--neutral-stroke-hover); }

.voucher-input:focus[b-g0r29wsowh] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.voucher-form-actions[b-g0r29wsowh] {
    margin-top: 16px;
}

.voucher-created-code[b-g0r29wsowh] {
    font-family: var(--monospace-font, ui-monospace, monospace);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.voucher-row--disabled[b-g0r29wsowh] {
    opacity: 0.55;
}
/* /Components/Application/Charts/OwnerComparisonChart.razor.rz.scp.css */
/* OwnerComparisonChart — per-owner combined stack (Household / Person 1 / Person 2).
   With no headings or side markers the charts align cleanly in one column, and
   the shared y-scale reads true. */

.owner-cmp[b-38ebtkmfcq] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.owner-cmp-stack[b-38ebtkmfcq] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 6px;
}

/* Combined view — single overlaid chart (ResultChartJsV2). */
.owner-cmp-combined[b-38ebtkmfcq] {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Inactive rendering (multi vs combined) — kept mounted, just not shown. */
.owner-cmp-origin[b-38ebtkmfcq] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

/* Equal-height row per owner. */
.owner-cmp-row[b-38ebtkmfcq] {
    display: flex;
    flex: 1;
    min-height: 0;
    position: relative;
}

/* Hidden via the pill bar — the row is dropped, remaining charts reclaim the space. */
.owner-cmp-row--gone[b-38ebtkmfcq] {
    display: none;
}

/* ── Shared series legend ── */
.owner-cmp-legend[b-38ebtkmfcq] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 0.75rem;
    color: var(--neutral-foreground-rest);
    margin-top: 8px;
    flex-shrink: 0;
}

.owner-cmp-legend-item[b-38ebtkmfcq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.owner-cmp-legend-swatches[b-38ebtkmfcq] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.owner-cmp-legend-swatch[b-38ebtkmfcq] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
/* /Components/Application/Charts/OwnerPillBar.razor.rz.scp.css */
/* OwnerPillBar — die geteilte Pill-Optik lebt in utilities.css (.w4l-pill*).
   Hier nur die komponenten-spezifischen Extras. */

/* Bar sitzt im Charts-Tab-Header und darf nicht schrumpfen. */
.owner-pillbar[b-iwupq4cmjs] {
    flex-shrink: 0;
}

/* ── Combine-Button — dezenter Icon-Only-Toggle ── */
.owner-pill-combine[b-iwupq4cmjs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 2px;
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.owner-pill-combine:hover[b-iwupq4cmjs] {
    background: var(--neutral-fill-secondary-hover);
}

/* Aktiv — Charts überlagert. */
.owner-pill-combine--on[b-iwupq4cmjs] {
    border-color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 16%, transparent);
}
/* /Components/Application/Charts/OwnershipOriginChart.razor.rz.scp.css */
.origin-cmp[b-3msevf2upt] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

/* Start-page-card variant: a single compact Household sub-chart. Fills the
   host's explicit-height wrapper (Large 160px / Compact 120px / List 64px). */
.origin-cmp--sparkline[b-3msevf2upt] {
    height: 100%;
}

.origin-cmp-stack[b-3msevf2upt] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
}

.origin-cmp-row[b-3msevf2upt] {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    display: flex;
}

.origin-cmp-row--gone[b-3msevf2upt] {
    display: none;
}

.origin-cmp-legend[b-3msevf2upt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.85rem;
    justify-content: center;
    padding-top: 0.45rem;
    flex-shrink: 0;
    font-size: 0.75rem;
}

.origin-cmp-legend-item[b-3msevf2upt] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.origin-cmp-legend-swatches[b-3msevf2upt] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.origin-cmp-legend-swatch[b-3msevf2upt] {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    display: inline-block;
}

.origin-cmp-hint[b-3msevf2upt] {
    display: flex;
    justify-content: center;
    padding-top: 0.2rem;
    flex-shrink: 0;
    font-size: 0.68rem;
    opacity: 0.75;
    text-align: center;
}
/* /Components/Application/Charts/TaxOriginChart.razor.rz.scp.css */
.tax-origin[b-ied1tiphfu] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.tax-origin-chart[b-ied1tiphfu] {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.tax-origin-legend[b-ied1tiphfu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.85rem;
    justify-content: center;
    flex-shrink: 0;
    padding-top: 0.45rem;
    font-size: 0.75rem;
}

.tax-origin-legend-item[b-ied1tiphfu] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.tax-origin-legend-swatch[b-ied1tiphfu] {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}
/* /Components/Application/Forms/AhvWithdrawalForm.razor.rz.scp.css */
.ahvw-root[b-s5yw8qpe86] {
    padding: 1rem 0;
}

.ahvw-chart[b-s5yw8qpe86] {
    width: 100%;
    height: 360px;
    display: block;
    touch-action: none;
    user-select: none;
}

/* ── Step list (one row per draw, ascending staircase) ── */
.ahvw-steps[b-s5yw8qpe86] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ahvw-step[b-s5yw8qpe86] {
    padding: 10px 14px;
    border: 0.5px solid var(--neutral-stroke-divider-rest);
    border-left: 3px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.12s;
}

.ahvw-step:not(.ahvw-step--selected):hover[b-s5yw8qpe86] {
    border-color: var(--neutral-stroke-hover);
}

.ahvw-step--selected[b-s5yw8qpe86] {
    border-left-color: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
}

.ahvw-step-head[b-s5yw8qpe86] {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
}

/* Status-card body: distinct, highlighted metrics rather than a cramped meta line. */
.ahvw-step-stats[b-s5yw8qpe86] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 10px;
}

.ahvw-stat[b-s5yw8qpe86] {
    flex: 1 1 0;
    min-width: 92px;
    padding: 7px 10px;
    border-radius: 5px;
    background: var(--neutral-fill-secondary-rest, rgba(0, 0, 0, 0.03));
}

.ahvw-stat-label[b-s5yw8qpe86] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ahvw-stat-value[b-s5yw8qpe86] {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
}

.ahvw-step-id[b-s5yw8qpe86] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ahvw-step-badge[b-s5yw8qpe86] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--accent-fill-rest);
}

.ahvw-step-name[b-s5yw8qpe86] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.ahvw-icon-btn[b-s5yw8qpe86] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
}

.ahvw-icon-btn:hover[b-s5yw8qpe86] {
    background: var(--neutral-fill-secondary-rest);
}
/* /Components/Application/Forms/HomeForm.razor.rz.scp.css */
.home-chart-zone[b-j7b23aj53r] {
    width: 100%;
    padding: 8px 0 16px 0;
}

/* Chevron-Stepper: extrahiert in die Shared-Komponente LifecycleStepper
   (LifecycleStepper.razor.css). */

/* ── Panels (CSS-toggled, never @if — FAST leak rule) ────────── */
.hf-panel[b-j7b23aj53r] {
    width: 100%;
    box-sizing: border-box;
    padding-top: 8px;
}
.hf-panel--hidden[b-j7b23aj53r] {
    display: none;
}

/* ── Hypotheken: Auto-Modus (read-only Zeilen) + Modus-Toggle ──────────── */
.hf-automode-label[b-j7b23aj53r] {
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
    align-self: center;
    white-space: nowrap;
}

.hf-mortgage-list[b-j7b23aj53r] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hf-mortgage-ro[b-j7b23aj53r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-2);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.hf-mortgage-ro .hf-mro-name[b-j7b23aj53r] {
    font-weight: 600;
    min-width: 7rem;
}

.hf-mortgage-ro .hf-mro-amount[b-j7b23aj53r] {
    font-weight: 600;
}

.hf-mortgage-ro .hf-mro-period[b-j7b23aj53r] {
    margin-left: auto;
    color: var(--neutral-foreground-hint, #707a87);
}

/* Net-proceeds line directly under the sale-price field (live settlement). */
.hf-sale-net-line[b-j7b23aj53r] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    margin-top: 0.25rem;
}

/* ── Kleine Feld-Überschrift über Pill-Switches (Type / Amortization) ──── */
.hf-field-caption[b-j7b23aj53r] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint, #707a87);
    margin-bottom: 0.25rem;
}

/* ── Max-Kaufpreis-Karten (1 / 2 Hypotheken) unter dem Purchase-Price-Feld ──
   Visuell an die fin-stat-cards im StandardFinancingPanel angelehnt. ──────── */
.hf-afford-cards[b-j7b23aj53r] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 4px;
}

.hf-afford-card[b-j7b23aj53r] {
    flex: 1 1 140px;
    min-width: 140px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
    cursor: help;
}

.hf-afford-card--over[b-j7b23aj53r] {
    border-color: var(--warning-foreground, #b06a00);
}

.hf-afford-label[b-j7b23aj53r] {
    font-size: 10px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
}

.hf-afford-value[b-j7b23aj53r] {
    font-size: 18px;
    font-weight: 700;
    margin-top: 1px;
    text-align: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hf-afford-card--over .hf-afford-value[b-j7b23aj53r] {
    color: var(--warning-foreground, #b06a00);
}

.hf-afford-sub[b-j7b23aj53r] {
    font-size: 0.68rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}

.hf-afford-card--over .hf-afford-sub[b-j7b23aj53r] {
    color: var(--warning-foreground, #b06a00);
    font-weight: 600;
}

/* Warn-Engine-Findings (Schritt ④ + Tranche): geteilter Bullet-Block MortgageFindingsBlock. */
/* /Components/Application/Forms/HouseholdStructureForm.razor.rz.scp.css */
/* ==========================================================================
   HouseholdStructureForm — Chip-style, Fluent Blazor color tokens
   Neutral at rest, accent only on active/highlighted states.
   Works in both light and dark mode via Fluent CSS variables.
   ========================================================================== */

/* ====== MAIN GRID ====== */
.hs5[b-7gimchsr73] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 0;
    row-gap: 0;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 20px 12px;
}

/* ====== CARDS (Person 1 / Person 2) — chip style ====== */
.hs5-card[b-7gimchsr73] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 16px 28px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    border: none;
    background: var(--neutral-fill-stealth-rest);
    position: relative;
    cursor: default;
    box-shadow: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.hs5-card--p1[b-7gimchsr73] { grid-column: 1; grid-row: 1; }
.hs5-card--p2[b-7gimchsr73] { grid-column: 3; grid-row: 1; }

/* Active: accent-tinted background, subtle elevation */
.hs5-card--active[b-7gimchsr73] {
    background: var(--neutral-fill-rest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hs5-card--surface-toggle[b-7gimchsr73] {
    cursor: pointer;
}

.hs5-card--surface-toggle:hover[b-7gimchsr73] {
    background: var(--neutral-fill-hover);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Inactive: muted, clickable */
.hs5-card--inactive[b-7gimchsr73] {
    opacity: 0.6;
    cursor: pointer;
}

.hs5-card--inactive:hover[b-7gimchsr73] {
    opacity: 0.85;
    background: var(--neutral-fill-stealth-hover);
}

/* ====== AVATAR CIRCLES ====== */
.hs5-card-avatar[b-7gimchsr73] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--neutral-fill-secondary-rest);
}

/* Active avatar: accent ring for visibility */
.hs5-card--active .hs5-card-avatar[b-7gimchsr73],
.hs5-card--rel-active .hs5-card-avatar[b-7gimchsr73] {
    background: color-mix(in srgb, var(--accent-fill-rest) 15%, var(--neutral-fill-secondary-rest));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-fill-rest) 30%, transparent);
}

/* Person avatar circles stay on the neutral accent (same as relationship /
   child icons); the person's scenario colour lives in the slim bar next to
   the name (.hs5-person-bar) instead. */

/* Name row: slim person-colour bar next to the name */
.hs5-name-row[b-7gimchsr73] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.hs5-person-bar[b-7gimchsr73] {
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--hs5-person-color, var(--accent-fill-rest));
    flex-shrink: 0;
}

.hs5-card-avatar--small[b-7gimchsr73] {
    width: 52px;
    height: 52px;
}

.hs5-card-avatar--medium[b-7gimchsr73] {
    width: 68px;
    height: 68px;
}

.hs5-card-avatar--empty[b-7gimchsr73] {
    background: var(--neutral-fill-secondary-rest);
}

/* ====== RELATIONSHIP WRAPPER ====== */
.hs5-rel-wrapper[b-7gimchsr73] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 0;
}

/* Connector lines — neutral at rest */
.hs5-rel-line[b-7gimchsr73] {
    flex: 1;
    height: 1px;
    background: transparent;
    min-width: 8px;
}

.hs5-rel-line--active[b-7gimchsr73] {
    height: 3px;
    background: var(--accent-fill-rest);
}

/* Dotted line when divorce/separation is defined */
.hs5-rel-line--broken[b-7gimchsr73] {
    height: 3px;
    background: none;
    border-top: 3px dashed var(--accent-fill-rest);
}

/* Broken heart badge on relationship card */
.hs5-broken-heart[b-7gimchsr73] {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--neutral-fill-rest);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

/* Disability badge on person cards */
.hs5-disability-badge[b-7gimchsr73] {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--neutral-fill-rest);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    z-index: 2;
}

/* Relationship chip */
.hs5-card--rel[b-7gimchsr73] {
    flex-shrink: 0;
    padding: 22px 14px 26px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    border: none;
    background: var(--neutral-fill-stealth-rest);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 58%;
    box-shadow: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.hs5-card--rel-inactive[b-7gimchsr73] {
    opacity: 0.55;
    cursor: pointer;
}

.hs5-card--rel-inactive:hover[b-7gimchsr73] {
    opacity: 0.8;
    background: var(--neutral-fill-stealth-hover);
}

.hs5-card--rel-active[b-7gimchsr73] {
    background: var(--neutral-fill-rest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.hs5-card--rel-active:hover[b-7gimchsr73] {
    background: var(--neutral-fill-hover);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hs5-card--married[b-7gimchsr73] {
    background: var(--neutral-fill-rest);
}

/* ====== NAVIGATION HINT ====== */
.hs5-nav-hint[b-7gimchsr73] {
    position: absolute;
    bottom: 7px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--neutral-fill-stealth-rest);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 1;
}

.hs5-card:hover .hs5-nav-hint[b-7gimchsr73],
.hs5-children-box:hover .hs5-nav-hint[b-7gimchsr73] {
    opacity: 1;
}

.hs5-nav-hint:hover[b-7gimchsr73] {
    background: var(--neutral-fill-stealth-hover);
}

/* Close badges mirror NavigationChevron visually; wrappers only control placement. */
.hs5-close-hint[b-7gimchsr73] {
    position: absolute;
    top: 7px;
    right: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.hs5-card:hover > .hs5-close-hint[b-7gimchsr73],
.hs5-close-hint:focus-within[b-7gimchsr73] {
    opacity: 1;
}

/* ====== CHILDREN BLOCKS ====== */
.hs5-children[b-7gimchsr73] {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 20px;
}

.hs5-children--p1[b-7gimchsr73]     { grid-column: 1; padding-right: 10px; }
.hs5-children--shared[b-7gimchsr73] { grid-column: 2; padding: 0 10px; }
.hs5-children--p2[b-7gimchsr73]     { grid-column: 3; padding-left: 10px; }

.hs5-children--disabled[b-7gimchsr73] {
    opacity: 0.45;
    pointer-events: none;
}

/* --- Lane toggle: slim label bar + small triangle tip (ported from lwr).
   A native <button>; purely reveals/collapses an EMPTY lane — never mutates data. --- */
.hs5-lane-toggle[b-7gimchsr73] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    user-select: none;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
}

.hs5-lane-toggle-text[b-7gimchsr73] {
    display: block;
    padding: 6px 8px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.03em;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-fill-stealth-rest);
    border-radius: calc(var(--layer-corner-radius) * 1px);
    transition: background 0.15s ease, color 0.15s ease;
}

/* Triangle tip: small pointer flush under the rectangle — keeps the genealogy
   "descendants hang below" cue without being the button itself. */
.hs5-lane-toggle-tip[b-7gimchsr73] {
    width: 16px;
    height: 8px;
    margin: 0 auto;
    background: var(--neutral-fill-stealth-rest);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: background 0.15s ease;
}

.hs5-lane-toggle:hover .hs5-lane-toggle-text[b-7gimchsr73],
.hs5-lane-toggle:hover .hs5-lane-toggle-tip[b-7gimchsr73] {
    background: var(--neutral-fill-stealth-hover);
}

.hs5-lane-toggle--on .hs5-lane-toggle-text[b-7gimchsr73],
.hs5-lane-toggle--on .hs5-lane-toggle-tip[b-7gimchsr73] {
    background: color-mix(in srgb, var(--accent-fill-rest) 15%, var(--neutral-fill-secondary-rest));
}

.hs5-lane-toggle--on .hs5-lane-toggle-text[b-7gimchsr73] {
    color: var(--accent-fill-rest);
}

.hs5-lane-toggle--on:hover .hs5-lane-toggle-text[b-7gimchsr73],
.hs5-lane-toggle--on:hover .hs5-lane-toggle-tip[b-7gimchsr73] {
    background: color-mix(in srgb, var(--accent-fill-rest) 22%, var(--neutral-fill-secondary-rest));
}

/* --- Children box: card surface matching the person cards (.hs5-card--active) —
   the lane bar stays slim above; the open box carries the shared chip surface. --- */
.hs5-children-box[b-7gimchsr73] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 8px 10px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: var(--neutral-fill-rest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
    margin-top: 12px;
}

.hs5-children-grid[b-7gimchsr73] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    width: 100%;
    align-content: flex-start;
}

/* ====== CHILD MINI-CARDS ====== */
.hs5-child[b-7gimchsr73] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 11px 7px 8px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    border: none;
    background: transparent;
    width: 78px;
    min-height: 82px;
    position: relative;
    cursor: default;
    box-shadow: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

button.hs5-child:hover[b-7gimchsr73],
.hs5-child.nav-chevron-host:hover[b-7gimchsr73] {
    background: var(--neutral-fill-stealth-hover);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.hs5-child-icon[b-7gimchsr73] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-fill-rest) 15%, var(--neutral-fill-secondary-rest));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-fill-rest) 25%, transparent);
}

.hs5-child-name[b-7gimchsr73] {
    font-size: 0.68rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.hs5-child-close[b-7gimchsr73] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
}

/* --- Add pill: compact dashed button with visible caption (lwr AddPersonCard idiom) --- */
.hs5-child-add[b-7gimchsr73] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    align-self: center;
    padding: 6px 12px;
    border: 1px dashed var(--neutral-stroke-rest);
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: transparent;
    opacity: 0.7;
    cursor: pointer;
    font: inherit;
    transition: opacity 0.15s ease;
}

.hs5-child-add:hover[b-7gimchsr73] {
    opacity: 1;
}

.hs5-add-label[b-7gimchsr73] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--accent-fill-rest);
    white-space: nowrap;
}

/* Wizard mode renders the child card as a native button (click removes) —
   neutralize the UA button chrome and make the pointer honest. */
button.hs5-child[b-7gimchsr73] {
    cursor: pointer;
    font: inherit;
}

/* ====== NAVIGATION MESSAGE ====== */
.hs5-nav-message[b-7gimchsr73] {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-stealth-rest);
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    margin-top: 8px;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 639px) {
    .hs5[b-7gimchsr73] {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 12px 6px;
    }

    .hs5-rel-wrapper[b-7gimchsr73] {
        flex-direction: column;
        align-items: stretch;
    }

    .hs5-rel-line[b-7gimchsr73] { display: none; }

    .hs5-card--rel[b-7gimchsr73] {
        width: auto;
        flex-direction: row;
        gap: 12px;
        padding: 14px 16px;
    }

    .hs5-card-avatar--small[b-7gimchsr73] {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .hs5-card[b-7gimchsr73] {
        flex-direction: row;
        gap: 12px;
        padding: 14px 16px;
    }

    .hs5-card-avatar[b-7gimchsr73] {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    .hs5-children--p1[b-7gimchsr73],
    .hs5-children--shared[b-7gimchsr73],
    .hs5-children--p2[b-7gimchsr73] {
        padding: 0;
        margin-top: 12px;
    }

    .hs5-children-box[b-7gimchsr73] {
        margin-top: 12px;
    }
}

/* ==========================================================================
   Title row with embedded swatch picker (household accent color).
   The swatch picker itself is styled globally in site.css (.w4l-swatch-row).
   ========================================================================== */
.hs5-title-row[b-7gimchsr73] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
}

.hs5-title-main[b-7gimchsr73] {
    flex: 1;
    min-width: 0;
}
/* /Components/Application/Forms/IntercantonalAllocationCard.razor.rz.scp.css */
/* Ausscheidungsspiegel — eine Spalte pro Kanton. Fläche/Padding kommen vom Host
   (YearTaxDeclarationCard-Sektion); hier nur Tabellen-Styling analog .ytd-table. */
.ika-block[b-uek6l8ih5i] {
    min-width: 0;
}

/* Sektionstitel im Rhythmus der Nachbar-Sektionen (.ytd-section-title). */
.ika-section-title[b-uek6l8ih5i] {
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 14px 0 4px;
}

/* Kantonswappen im Spaltenkopf, auf Zeilenhöhe des Kanton-Kürzels. */
.ika-flag[b-uek6l8ih5i] {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: -0.18em;
}

.ika-table[b-uek6l8ih5i] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-ramp-base-font-size);
}

.ika-table td[b-uek6l8ih5i],
.ika-table th[b-uek6l8ih5i] {
    padding: 5px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.ika-table th[b-uek6l8ih5i] {
    font-weight: 600;
    text-align: left;
    vertical-align: bottom;
}

.ika-num[b-uek6l8ih5i] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 20px;
}

.ika-canton[b-uek6l8ih5i] {
    display: block;
}

.ika-commune[b-uek6l8ih5i] {
    display: block;
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 400;
    color: var(--neutral-foreground-hint);
}

.ika-total-col[b-uek6l8ih5i] {
    color: var(--neutral-foreground-hint);
    border-left: 1px solid var(--neutral-stroke-divider-rest);
    padding-left: 20px;
}

/* Sektions-Zwischentitel innerhalb der Tabelle (Wealth / Income / Tax). */
.ika-group td[b-uek6l8ih5i] {
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 12px;
    border-bottom: none;
}

.ika-info td[b-uek6l8ih5i] {
    color: var(--neutral-foreground-hint);
    border-bottom: none;
}

.ika-subtotal td[b-uek6l8ih5i] {
    font-weight: 600;
}

.ika-total td[b-uek6l8ih5i] {
    font-weight: 600;
    border-bottom: none;
    border-top: 2px solid var(--neutral-stroke-strong-rest);
}
/* /Components/Application/Forms/PensionBuyInForm.razor.rz.scp.css */
/* PensionBuyInForm — KPI cards + bar-per-year editor + selected-year panel. */

/* ── KPI result cards ────────────────────────────────────────────────
   Fixed min-height so the row height is invariant across instant-estimate
   updates (— ↔ value, "≈" prefix). Without this the cards reflow while a bar
   handle is being dragged and the editor below shifts out from under the cursor.
   Scoped to the KPI cards only — the shared OpenWefBalanceCard.CardStyle is left
   untouched (it is reused by the Interest-rate and Home-Ownership cards). */
.bi-kpi-card[b-tkf5cr3uuc] {
    min-height: 78px;
    justify-content: center;
}

/* ── Instant-estimate "≈" marker ─────────────────────────────────────
   Space is ALWAYS reserved: when the estimate settles to the exact engine value,
   only the marker fades out — the number never shifts horizontally. */
.bi-approx[b-tkf5cr3uuc] {
    opacity: 1;
    transition: opacity 0.25s ease;
}

.bi-approx--settled[b-tkf5cr3uuc] {
    opacity: 0;
}

/* ── Selected-year panel — constant-layout status card ─────────────────
   ALWAYS occupies its full space: the row set is fixed (values flip to «—»),
   the chip strip reserves its height, and the empty state hides content via
   visibility (NOT display) — so selecting a year or dragging a bar never
   changes the page height and the editor above never shifts under the
   pointer (a height change with the page scrolled to the bottom scroll-clamps
   the chart away mid-drag). */
.bi-sel[b-tkf5cr3uuc] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    /* Full available width: flex item in the parent's vertical FluentStack
       (align-items: start) — without a definite width it shrinks to fit. */
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--neutral-stroke-divider-rest, rgba(0, 0, 0, 0.1));
    border-radius: 8px;
    background: var(--neutral-layer-1, rgba(0, 0, 0, 0.015));
    overflow-anchor: none;
}

/* Empty state: keep the reserved space (placeholder), hide the content and
   show a centred hint instead. */
.bi-sel--empty > *[b-tkf5cr3uuc] {
    visibility: hidden;
}

.bi-sel--empty[b-tkf5cr3uuc] {
    border-style: dashed;
}

.bi-sel--empty[b-tkf5cr3uuc]::after {
    content: "Click a year in the chart to add or edit its buy-in";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 16px;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint, #717171);
}

/* Two calculations side by side, equal halves: amount/waterfall (left) +
   return breakdown (right); they wrap below each other only on narrow screens. */
.bi-sel-columns[b-tkf5cr3uuc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px 32px;
    width: 100%;
}

.bi-sel-left[b-tkf5cr3uuc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 300px;
    min-width: 0;
}

.bi-sel-right[b-tkf5cr3uuc] {
    flex: 1 1 300px;
    min-width: 0;
}

/* Amount field + Max button side by side (button aligned to the field's baseline). */
.bi-sel-amount-row[b-tkf5cr3uuc] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

/* Status facts — fixed two-column grid (label | value), rows never disappear.
   Full column width so the value edge lines up with the breakdown table. */
.bi-facts-grid[b-tkf5cr3uuc] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 16px;
    font-size: 0.8rem;
    color: var(--neutral-foreground-rest, var(--w4l-chrome-axis-text));
}

.bi-facts-value[b-tkf5cr3uuc] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Status chips — the strip reserves one chip line even when no chip shows,
   so a chip appearing mid-drag does not change the panel height. */
.bi-chips[b-tkf5cr3uuc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 6px;
    min-height: 24px;
}

.bi-chip[b-tkf5cr3uuc] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.4;
    white-space: nowrap;
    cursor: help;
}

.bi-chip--warn[b-tkf5cr3uuc] {
    color: var(--w4l-warning, #b7791f);
    border: 1px solid var(--w4l-warning, #b7791f);
}

.bi-chip--info[b-tkf5cr3uuc] {
    color: var(--neutral-foreground-rest, var(--w4l-chrome-axis-text));
    border: 1px solid var(--w4l-info, #3b82f6);
}

/* ── Return breakdown ──────────────────────────────────────────────── */
.bi-breakdown-title[b-tkf5cr3uuc] {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.bi-breakdown[b-tkf5cr3uuc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.bi-breakdown td[b-tkf5cr3uuc] {
    padding: 2px 0;
}

.bi-breakdown td:last-child[b-tkf5cr3uuc] {
    text-align: right;
}

.bi-breakdown-total td[b-tkf5cr3uuc] {
    border-top: 1px solid var(--neutral-stroke-rest, rgba(0, 0, 0, 0.1));
    padding-top: 4px;
    font-weight: 700;
}

.bi-muted[b-tkf5cr3uuc] {
    font-size: 0.78rem;
    opacity: 0.7;
    padding: 4px 0;
}

/* ── Selected-year waterfall split (repayment / deductible buy-in) ──── */
.bi-split[b-tkf5cr3uuc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.bi-split-row[b-tkf5cr3uuc] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bi-split-row .bi-split-amount[b-tkf5cr3uuc] {
    margin-left: auto;
}

/* «Booked» sum row under the three waterfall segments. */
.bi-split-row--total[b-tkf5cr3uuc] {
    border-top: 1px solid var(--neutral-stroke-divider-rest, rgba(0, 0, 0, 0.1));
    margin-top: 2px;
    padding-top: 3px;
    font-weight: 600;
}

.bi-dot[b-tkf5cr3uuc] {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: 0 0 auto;
}

.bi-dot--repayment[b-tkf5cr3uuc] { background: var(--w4l-info, #3b82f6); }
.bi-dot--deductible[b-tkf5cr3uuc] { background: var(--w4l-positive, #10b981); }
.bi-dot--blocked[b-tkf5cr3uuc] { background: var(--w4l-warning, #b7791f); }
.bi-dot--none[b-tkf5cr3uuc] { background: transparent; }
/* /Components/Application/Forms/PensionFundForm.razor.rz.scp.css */
.pf-chart-zone[b-3smlyru5mq] {
    width: 100%;
    padding: 8px 0 16px 0;
}

/* ── Chevron stepper ─────────────────────────────────────────────
   Three-piece composition per chevron:
     - left SVG cap (18×60) for the V-notch diagonals
     - middle div with top/bottom borders only (rectangular — no
       diagonals to alias)
     - right SVG cap (18×60) for the right-point diagonals
   Diagonals live in real SVG paths, not stretched, so the browser's
   vector rasteriser anti-aliases them cleanly at every form width.
   8 px flex gap separates the chevrons — no overlap, no z-index, no
   border-triangle pixel math.                                     */

.pf-stepper[b-3smlyru5mq] {
    display: flex;
    gap: 8px;
    width: 100%;
    margin: 8px 0 16px 0;
}

.pf-chevron[b-3smlyru5mq] {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: stretch;
    height: 60px;
    color: var(--c-text);
    font-family: inherit;
    font-size: var(--type-ramp-plus-1-font-size);
    font-weight: 500;
    transition: color 150ms ease;
}

.pf-cap[b-3smlyru5mq] {
    flex: 0 0 18px;
    height: 60px;
    display: block;
    overflow: visible;
}

.pf-fill[b-3smlyru5mq] {
    fill: var(--c-fill);
    transition: fill 150ms ease;
}

.pf-stroke[b-3smlyru5mq] {
    fill: none;
    stroke: var(--c-border);
    stroke-width: 2;
    stroke-linejoin: miter;
    stroke-linecap: butt;
    stroke-miterlimit: 4;
    transition: stroke 150ms ease;
}

.pf-body[b-3smlyru5mq] {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
    background: var(--c-fill);
    border-top:    2px solid var(--c-border);
    border-bottom: 2px solid var(--c-border);
    transition: background-color 150ms ease, border-color 150ms ease;
}

.pf-label[b-3smlyru5mq] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── State palette ──────────────────────────────────────────── */

.pf-chevron.is-pending[b-3smlyru5mq] {
    --c-fill:   var(--neutral-layer-2);
    --c-border: var(--neutral-stroke-divider-rest);
    --c-text:   var(--neutral-foreground-hint);
}

.pf-chevron.is-done[b-3smlyru5mq] {
    --c-fill:   color-mix(in srgb, var(--accent-fill-rest)  8%, var(--neutral-layer-2));
    --c-border: color-mix(in srgb, var(--accent-fill-rest) 30%, var(--neutral-stroke-divider-rest));
    --c-text:   var(--neutral-foreground-rest);
}

.pf-chevron.is-active[b-3smlyru5mq] {
    --c-fill:   color-mix(in srgb, var(--accent-fill-rest) 12%, var(--neutral-layer-1));
    --c-border: var(--accent-fill-rest);
    --c-text:   var(--accent-foreground-rest);
}

.pf-chevron[aria-selected="true"][b-3smlyru5mq] {
    font-weight: 600;
}

.pf-chevron:hover:not(.is-active)[b-3smlyru5mq] {
    --c-fill: color-mix(in srgb, var(--accent-fill-rest) 12%, var(--neutral-layer-2));
    --c-text: var(--neutral-foreground-rest);
}

.pf-chevron:focus-visible[b-3smlyru5mq] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

@media (max-width: 639px) {
    .pf-chevron[b-3smlyru5mq] {
        font-size: var(--type-ramp-base-font-size);
    }
    .pf-label[b-3smlyru5mq] {
        display: none;
    }
}

/* ── Panels ─────────────────────────────────────────────────── */
.pf-panel[b-3smlyru5mq] {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding-top: 24px;
    /* The panel is a flex item in a vertical FluentStack — without an explicit
       width it is shrink-to-fit, so a child SVG sized width:100% resolves against
       an indefinite container and collapses the whole panel narrow. A definite
       100% width makes the percentage-sized Sankeys stretch to the full width. */
    width: 100%;
    box-sizing: border-box;
}
.pf-panel--hidden[b-3smlyru5mq] {
    display: none;
}

/* Section wrappers must also span the full panel width so their content
   (Sankey SVGs, FluentGrids) has a definite box to fill. */
.pf-section[b-3smlyru5mq] {
    width: 100%;
    box-sizing: border-box;
}

/* Title→content spacer. No visible rule — the element only carries the bottom
   margin that gives each section title breathing room to its content. */
.pf-section-divider[b-3smlyru5mq] {
    margin: 0 0 18px 0;
    border: 0;
    height: 0;
}

/* ── Insurance · income-bridge daily-allowance mini-table ─────────
   Native table (no FluentDataGrid) so the coverage/duration inputs are
   leak-free native <input>s. KTG cells are greyed + inert when the sickness
   daily allowance is not insured. */
.pf-daily-allowance[b-3smlyru5mq] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
    font-size: 0.85rem;
}
.pf-daily-allowance th[b-3smlyru5mq] {
    text-align: left;
    font-weight: 600;
    font-size: 0.72rem;
    opacity: 0.7;
    padding: 4px 10px 4px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    white-space: nowrap;
}
.pf-daily-allowance td[b-3smlyru5mq] {
    padding: 6px 10px 6px 0;
    vertical-align: middle;
}
.pf-daily-allowance .pf-cell-disabled[b-3smlyru5mq] {
    opacity: 0.4;
    pointer-events: none;
}
/* /Components/Application/Forms/PensionPlanForm.razor.rz.scp.css */
.pp-root[b-m0sepudjvf] {
    padding: 1rem 0;
}

.pp-chart[b-m0sepudjvf] {
    width: 100%;
    height: 360px;
    display: block;
    touch-action: none;
    user-select: none;
}

.pp-steps[b-m0sepudjvf] {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pp-step[b-m0sepudjvf] {
    padding: 12px 14px;
    background: transparent;
    border: 0.5px solid var(--neutral-stroke-divider-rest);
    border-left: 3px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.12s;
}

.pp-step:not(.pp-step--selected):hover[b-m0sepudjvf] {
    border-color: var(--neutral-stroke-hover);
}

.pp-step--selected[b-m0sepudjvf] {
    border-color: var(--accent-fill-rest);
}

.pp-step-head[b-m0sepudjvf] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.pp-step-id[b-m0sepudjvf] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pp-step-badge[b-m0sepudjvf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--accent-fill-rest);
    color: var(--accent-foreground-rest);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pp-step-name[b-m0sepudjvf] {
    font-size: 14px;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.pp-step-meta[b-m0sepudjvf] {
    flex: 1;
    font-size: 13px;
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
}

.pp-icon-btn[b-m0sepudjvf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
}

.pp-icon-btn:hover[b-m0sepudjvf] {
    background: var(--neutral-fill-secondary-rest);
}

.pp-detail-grid[b-m0sepudjvf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pp-row[b-m0sepudjvf] {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
    margin-bottom: 4px;
}

.pp-row-sub[b-m0sepudjvf] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
    margin-bottom: 0;
}

.pp-readout[b-m0sepudjvf] {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.pp-auto-tag[b-m0sepudjvf] {
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 8px;
    color: var(--accent-foreground-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 15%, transparent);
    vertical-align: middle;
}

.pp-reset-link[b-m0sepudjvf] {
    margin-left: 6px;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--accent-fill-rest);
    cursor: pointer;
    text-decoration: underline;
}

.pp-reset-link:hover[b-m0sepudjvf] {
    color: var(--accent-fill-hover);
}

@media (max-width: 639px) {
    .pp-detail-grid[b-m0sepudjvf] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Application/Forms/RentalForm.razor.rz.scp.css */
.rf-chart-zone[b-7sny8lbj1e] {
    width: 100%;
    padding: 8px 0 16px 0;
}

/* Net-proceeds line directly under the sale-price field (live settlement). */
.rf-sale-net-line[b-7sny8lbj1e] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    margin-top: 0.25rem;
}

/* ── Panels (CSS-toggled, never @if — FAST leak rule; Muster HomeForm) ───── */
.hf-panel[b-7sny8lbj1e] {
    width: 100%;
    box-sizing: border-box;
    padding-top: 8px;
}
.hf-panel--hidden[b-7sny8lbj1e] {
    display: none;
}

/* ── Ertragswert-Panel (Object-Step) ─────────────────────────────────────── */
.rf-earnings[b-7sny8lbj1e] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 16px;
}

.rf-collateral-toggle[b-7sny8lbj1e] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
    margin-top: 0.5rem;
    white-space: nowrap;
}

/* ── Kosten-Waterfall (Use-Step, reiner Readout): Leerstand | Bewirtschaftung |
   Rückstellung | Nettomiete — Farb-Punkte wiederholen sich vor den Quoten-Feldern. */
.rf-waterfall[b-7sny8lbj1e] {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 28px;
    border-radius: 4px;
    overflow: hidden;
}

.rf-wf-seg[b-7sny8lbj1e] {
    flex-basis: 0%;
    min-width: 2px;
}

.rf-wf-vac[b-7sny8lbj1e] { background: var(--w4l-bar-strong); }
.rf-wf-op[b-7sny8lbj1e]  { background: var(--w4l-bar-mid); }
.rf-wf-res[b-7sny8lbj1e] { background: var(--w4l-bar-soft); }
.rf-wf-net[b-7sny8lbj1e] { background: color-mix(in srgb, var(--w4l-positive) 45%, transparent); }

.rf-wf-readout[b-7sny8lbj1e] {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
}

.rf-quota-dot[b-7sny8lbj1e] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-bottom: 2px;
}

/* ── fin-*-Anatomie (Bar + StatCards): kopiert aus EffectiveAffordabilitySection
   (scoped CSS ist komponentengebunden — Duplikat nötig). ─────────────────── */
.fin-afford-head[b-7sny8lbj1e] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.74rem;
    color: var(--neutral-foreground-rest);
    margin: 0.45rem 0 0.15rem;
    font-variant-numeric: tabular-nums;
}

.fin-afford-head > span:last-child[b-7sny8lbj1e] {
    font-weight: 700;
    font-size: 0.85rem;
}

.fin-bar[b-7sny8lbj1e] {
    position: relative;
    display: flex;
    width: 100%;
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}

.fin-afford-bar[b-7sny8lbj1e] {
    height: 30px;
}

.fin-income-zone[b-7sny8lbj1e] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: color-mix(in srgb, var(--w4l-income-accent) 16%, transparent);
    border-right: 2px solid var(--w4l-income-accent);
}

.fin-segs[b-7sny8lbj1e] {
    position: absolute;
    inset: 0;
    display: flex;
}

.fin-bar .seg[b-7sny8lbj1e] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

.seg-int[b-7sny8lbj1e] { background: var(--w4l-bar-strong); }
.seg-amo[b-7sny8lbj1e] { background: var(--w4l-bar-mid); }
.seg-mnt[b-7sny8lbj1e] { background: var(--w4l-bar-soft); }

.fin-marker[b-7sny8lbj1e] {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 0;
    border-left: 2px dashed var(--neutral-foreground-rest);
    pointer-events: none;
}

.fin-ok[b-7sny8lbj1e]   { color: var(--w4l-positive); }
.fin-over[b-7sny8lbj1e] { color: var(--w4l-negative); }

.fin-legend[b-7sny8lbj1e] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.85rem;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--neutral-foreground-rest);
}

.fin-legend .dot[b-7sny8lbj1e] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.fin-dot-income[b-7sny8lbj1e] {
    background: color-mix(in srgb, var(--w4l-income-accent) 25%, transparent);
    border: 1px solid var(--w4l-income-accent);
}

.fin-legend-marker[b-7sny8lbj1e] { opacity: 0.8; }

.fin-stats[b-7sny8lbj1e] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    margin-top: 0.5rem;
}

.fin-stat-card[b-7sny8lbj1e] {
    flex: 1 1 0;
    min-width: 130px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
}

.fin-stat-label[b-7sny8lbj1e] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
}

.fin-stat-value[b-7sny8lbj1e] {
    font-size: 22px;
    font-weight: 700;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fin-stat-sub[b-7sny8lbj1e] {
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.fit-good[b-7sny8lbj1e]    { color: var(--w4l-positive); }
.fit-caution[b-7sny8lbj1e] { color: var(--w4l-negative); }

/* ── Responsive: KPI-Karten 4 → 2×2 (sm) → 1 Spalte (xs). ────────────────── */
@media (max-width: 639px) {
    .fin-stats .fin-stat-card[b-7sny8lbj1e] {
        flex-basis: calc(50% - 4px);
    }
}

@media (max-width: 479px) {
    .fin-stats .fin-stat-card[b-7sny8lbj1e] {
        flex-basis: 100%;
    }
}
/* /Components/Application/Forms/StatutoryRelativesForm.razor.rz.scp.css */
/* ==========================================================================
   StatutoryRelativesForm («Erbenbaum») — Fluent tokens, hs5 visual language.
   Neutral at rest, accent only for the entitled Parentel band and live chips.
   Works in light and dark mode via Fluent CSS variables.
   ========================================================================== */

.lwr[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 8px 12px 20px;

    /* ONE footprint for EVERY person (parents, grandparents, siblings, children, grandchildren,
       uncles, testator, spouse) + the escheat card — «alle Personen gleich». */
    --lwr-person-w: 164px;
    --lwr-person-min-h: 82px;  /* wider + a touch shorter */
}

/* ====== 3-column generation grid ====== */
.lwr-grid[b-do5bvbswqx] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 12px;
    align-items: stretch;
}

.lwr-cell--c1[b-do5bvbswqx] { grid-column: 1; }
.lwr-cell--c2[b-do5bvbswqx] { grid-column: 2; }
.lwr-cell--c3[b-do5bvbswqx] { grid-column: 3; }

/* 3rd Parentel: paternal | maternal grandparents split 50:50 across the full width
   (uses the freed middle space). Same grid drives the GP cards and the uncle/aunt lanes. */
.lwr-gp-row[b-do5bvbswqx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    align-items: stretch;
}

.lwr-gp-row .lwr-lane--paternal[b-do5bvbswqx] { grid-column: 1; }
.lwr-gp-row .lwr-lane--maternal[b-do5bvbswqx] { grid-column: 2; }

.lwr-cell[b-do5bvbswqx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

/* Erblinie segments between the generation rows */
.lwr-spine-gap[b-do5bvbswqx] {
    height: 18px;
    width: 3px;
    margin: 0 auto;
    background: color-mix(in srgb, var(--accent-fill-rest) 45%, transparent);
    border-radius: 2px;
}

/* ====== Parentel bands ====== */
.lwr-band[b-do5bvbswqx] {
    border-radius: calc(var(--layer-corner-radius) * 1px);
    /* Transparent — each Parentel reads as its own block via the border alone (no fill). */
    background: transparent;
    border: 1px solid var(--neutral-stroke-rest);
    padding: 0 0 4px;
    position: relative;
    transition: opacity 0.2s ease, background 0.2s ease;
}

/* Active Parentel: distinguished by a crisp accent frame + accent title, NOT a background fill
   (the subtle fill read as too low-contrast). Same surface as the other bands. */
.lwr-band--active[b-do5bvbswqx] {
    border-color: var(--accent-fill-rest);
    box-shadow: inset 0 0 0 1px var(--accent-fill-rest);
}

.lwr-band--active .lwr-band-title[b-do5bvbswqx] {
    color: var(--accent-fill-rest);
}

/* Disabled band: not a relevant Parentel (a closer one inherits / no heirs).
   Filled surface + muted foreground instead of whole-band opacity — the title and
   the relevance chip stay readable; dashed border + no chevron signal "inactive". */
.lwr-band--disabled[b-do5bvbswqx] {
    background: var(--neutral-fill-secondary-rest);
    border-style: dashed;
}

.lwr-band--disabled .lwr-band-title[b-do5bvbswqx] {
    color: var(--neutral-foreground-hint);
}

.lwr-band--disabled .lwr-relevance-chip[b-do5bvbswqx] {
    background: var(--neutral-fill-rest);
}

.lwr-band--disabled .lwr-band-header[b-do5bvbswqx] {
    cursor: default;
}

.lwr-band--disabled .lwr-band-header:hover[b-do5bvbswqx] {
    background: transparent;
}

.lwr-band--disabled .lwr-band-chevron[b-do5bvbswqx] {
    display: none;
}

.lwr-band--displaced .lwr-band-body[b-do5bvbswqx] {
    /* Secondary, but still readable + interactive (a displaced band can still be the one where
       the user adds the siblings/uncles that would make it the active heir). */
    opacity: 0.75;
}

/* Band header — a real button (keyboard + aria-expanded) */
.lwr-band-header[b-do5bvbswqx] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    color: var(--neutral-foreground-rest);
    border-radius: calc(var(--layer-corner-radius) * 1px);
    text-align: left;
}

.lwr-band-header:hover[b-do5bvbswqx] {
    background: var(--neutral-fill-stealth-hover);
}

.lwr-band-header:focus-visible[b-do5bvbswqx] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: -2px;
}

.lwr-band-title[b-do5bvbswqx] {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.lwr-band-chevron[b-do5bvbswqx] {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.lwr-band-body[b-do5bvbswqx] {
    padding: 8px 12px 10px;
}

/* Relevance chip in the band header */
.lwr-relevance-chip[b-do5bvbswqx] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lwr-relevance-chip--active[b-do5bvbswqx] {
    background: color-mix(in srgb, var(--accent-fill-rest) 18%, var(--neutral-fill-secondary-rest));
    color: var(--accent-fill-rest);
}

/* ====== THE unified person card (every person + the escheat card share this) ====== */
.lwr-person-wrap[b-do5bvbswqx] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lwr-person[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    width: var(--lwr-person-w);
    min-height: var(--lwr-person-min-h);
    padding: 9px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: transparent;
    position: relative;
    font: inherit;
    color: var(--neutral-foreground-rest);
    text-align: center;
    transition: background 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

button.lwr-person[b-do5bvbswqx] { cursor: pointer; }
div.lwr-person[b-do5bvbswqx] { cursor: default; }

button.lwr-person:hover[b-do5bvbswqx] {
    background: var(--neutral-fill-hover);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

button.lwr-person:focus-visible[b-do5bvbswqx] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 2px;
}

/* Life state — alive FILLS, deceased is transparent (point 2). */
.lwr-person--alive[b-do5bvbswqx] { background: var(--neutral-fill-secondary-rest); }
.lwr-person--deceased[b-do5bvbswqx] { background: transparent; }
.lwr-person--deceased .lwr-person-name[b-do5bvbswqx] { color: var(--neutral-foreground-hint); }
.lwr-person--deceased .lwr-person-icon[b-do5bvbswqx] { opacity: 0.55; }

.lwr-person--unknown[b-do5bvbswqx] {
    background: transparent;
    outline: 1.5px dashed var(--neutral-stroke-rest);
    outline-offset: -1.5px;
}

/* Testator anchor — same footprint, distinguished by accent tint + border only. */
.lwr-person--anchor[b-do5bvbswqx] {
    cursor: default;
    background: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-fill-rest) 45%, transparent);
}

/* Person line: {icon} name inline, single font size (point 3), left-aligned. */
.lwr-person-line[b-do5bvbswqx] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
    min-width: 0;
}

.lwr-person-icon[b-do5bvbswqx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--neutral-foreground-hint);
}

.lwr-person-name[b-do5bvbswqx] {
    font-size: 0.75rem;
    font-weight: 700;
    /* Wrap to a 2nd line instead of ellipsis. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.15;
    text-align: left;
    min-width: 0;
}

/* Deceased marker: a cross after the name (accent), replaces the status heart. */
.lwr-person-cross[b-do5bvbswqx] {
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent-fill-rest);
}

/* Reserved chip slot (point 1: † / % never change the geometry). */
.lwr-person-chip-slot[b-do5bvbswqx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    width: 100%;
    flex-shrink: 0;
}

/* Compact labeled add-button — deliberately SMALLER than a person card so the tree
   reads as "people + affordances", not as ghost people. */
.lwr-person--add[b-do5bvbswqx] {
    flex-direction: row;
    gap: 6px;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 6px 12px;
    justify-content: center;
    align-self: center;
    border-style: dashed;
    opacity: 0.7;
}

.lwr-person--add:hover[b-do5bvbswqx] { opacity: 1; box-shadow: none; }

.lwr-add-label[b-do5bvbswqx] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--accent-fill-rest);
    white-space: nowrap;
}

/* Subtitle in the chip slot (testator year / spouse status) when there is no % chip. */
.lwr-person-subtitle[b-do5bvbswqx] {
    font-size: 0.6rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 3rd Parentel: discrete heading + two identical grandparent person cards (no couple card). */
.lwr-gp-side[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lwr-gp-heading[b-do5bvbswqx] {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-bottom: 8px;
}

.lwr-gp-persons[b-do5bvbswqx] {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Corner badges + hover-revealed close/nav on the unified wrap. */
.lwr-person-wrap:hover .lwr-close-hint[b-do5bvbswqx],
.lwr-close-hint:focus-within[b-do5bvbswqx] {
    opacity: 1;
}

.lwr-person-wrap:hover .lwr-nav-hint[b-do5bvbswqx] {
    opacity: 1;
}

.lwr-person-wrap .lwr-dagger-badge[b-do5bvbswqx] {
    top: 4px;
    left: 4px;
}

.lwr-person-wrap .lwr-nav-hint[b-do5bvbswqx] {
    bottom: 6px;
    right: 6px;
}

/* ====== Badges ====== */
/* Deceased marker †: accent-coloured and prominent (replaces the old plant/Stamm badge). */
.lwr-dagger-badge[b-do5bvbswqx] {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--neutral-fill-rest);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent-fill-rest);
    z-index: 2;
    pointer-events: none;
}

/* On siblings/uncles the † doubles as the representation toggle (deceased leaves descendants —
   nieces/nephews/cousins step in, ZGB 458 III / 457 III): clickable, filled ring when on. */
.lwr-dagger-badge--stamm[b-do5bvbswqx] {
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.7;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.lwr-dagger-badge--stamm:hover[b-do5bvbswqx] {
    opacity: 1;
}

.lwr-dagger-badge--stamm:focus-visible[b-do5bvbswqx] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}

.lwr-dagger-badge--stamm-on[b-do5bvbswqx] {
    opacity: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15),
        inset 0 0 0 2px color-mix(in srgb, var(--accent-fill-rest) 55%, transparent);
}

.lwr-unknown-hint[b-do5bvbswqx] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, #b45309 20%, var(--neutral-fill-rest));
    color: #b45309;
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    z-index: 2;
    cursor: help;
}

/* ====== Share / warning chips ====== */
.lwr-share-chip[b-do5bvbswqx] {
    font-size: 0.66rem;
    font-weight: 700;
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    margin-top: 2px;
}

/* Vorverstorbenes Kind, das nur als Stamm-Platzhalter erbt: Anteil ausgegraut. */
.lwr-share-chip--muted[b-do5bvbswqx] {
    opacity: 0.45;
}

.lwr-warn-chip[b-do5bvbswqx] {
    font-size: 0.66rem;
    font-weight: 700;
    color: #b45309;
    background: color-mix(in srgb, #b45309 16%, transparent);
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    margin-top: 2px;
    cursor: help;
}

/* ====== Parents row + connector ====== */
/* Father | ——link—— | Mother as a centered flex pair so the line is CONTINUOUS between the cards. */
.lwr-parents-row[b-do5bvbswqx] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lwr-parents-row .lwr-person-wrap[b-do5bvbswqx] {
    width: auto;
    flex: 0 1 var(--lwr-person-w);
}

.lwr-parents-link[b-do5bvbswqx] {
    flex: 1 1 auto;
    max-width: 140px;
    min-width: 20px;
    height: 3px;
    background: color-mix(in srgb, var(--accent-fill-rest) 55%, transparent);
    border-radius: 2px;
}

/* ====== Sibling lanes ====== */
.lwr-lanes[b-do5bvbswqx] {
    margin-top: 12px;
    align-items: start;
}

.lwr-lane[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

.lwr-lane--paternal[b-do5bvbswqx] { grid-column: 1; }
.lwr-lane--full[b-do5bvbswqx]     { grid-column: 2; }
.lwr-lane--maternal[b-do5bvbswqx] { grid-column: 3; }

/* Clickable compact lane selector — a label RECTANGLE (room for wrapping text) with a small
   downward triangle tip beneath it (like the HouseholdStructure children triangles). Click to
   unlock/collapse the lane's entry box. */
.lwr-lane-toggle[b-do5bvbswqx] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    user-select: none;
    cursor: pointer;
}

.lwr-lane-toggle-text[b-do5bvbswqx] {
    display: block;
    padding: 6px 8px;
    text-align: center;
    font-size: 0.64rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-fill-stealth-rest);
    border-radius: calc(var(--layer-corner-radius) * 1px);
    transition: background 0.15s ease, color 0.15s ease;
}

/* Triangle tip: a small pointer flush under the rectangle. */
.lwr-lane-toggle-tip[b-do5bvbswqx] {
    width: 16px;
    height: 8px;
    margin: 0 auto;
    background: var(--neutral-fill-stealth-rest);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: background 0.15s ease;
}

.lwr-lane-toggle:hover .lwr-lane-toggle-text[b-do5bvbswqx],
.lwr-lane-toggle:hover .lwr-lane-toggle-tip[b-do5bvbswqx] {
    background: var(--neutral-fill-stealth-hover);
}

.lwr-lane-toggle--on .lwr-lane-toggle-text[b-do5bvbswqx],
.lwr-lane-toggle--on .lwr-lane-toggle-tip[b-do5bvbswqx] {
    background: color-mix(in srgb, var(--accent-fill-rest) 15%, var(--neutral-fill-secondary-rest));
}

.lwr-lane-toggle--on .lwr-lane-toggle-text[b-do5bvbswqx] {
    color: var(--accent-fill-rest);
}

.lwr-lane-toggle--on:hover .lwr-lane-toggle-text[b-do5bvbswqx],
.lwr-lane-toggle--on:hover .lwr-lane-toggle-tip[b-do5bvbswqx] {
    background: color-mix(in srgb, var(--accent-fill-rest) 22%, var(--neutral-fill-secondary-rest));
}

.lwr-lane-box[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px 14px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: transparent;
    margin-top: 12px;
    position: relative;
}

/* Discreet note when captured relatives are currently hidden (a closer ancestor is alive) —
   keeps retained data discoverable without cluttering the tree. */
.lwr-hidden-hint[b-do5bvbswqx] {
    font-size: 0.68rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: 10px;
    padding: 4px 8px;
}

/* ====== Mini cards (siblings + children) ====== */
.lwr-mini-grid[b-do5bvbswqx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    width: 100%;
    align-content: flex-start;
}

.lwr-mini-wrap[b-do5bvbswqx] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lwr-mini[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 8px;
    border: none;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: transparent;
    width: var(--lwr-chip-w);
    min-height: 44px;
    justify-content: center;
    position: relative;
    cursor: pointer;
    font: inherit;
    color: var(--neutral-foreground-rest);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.lwr-mini:hover[b-do5bvbswqx] {
    background: var(--neutral-fill-stealth-hover);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.lwr-mini:focus-visible[b-do5bvbswqx] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}

.lwr-mini-name[b-do5bvbswqx] {
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.lwr-mini-caption[b-do5bvbswqx] {
    font-size: 0.6rem;
    color: var(--neutral-foreground-hint);
}

.lwr-mini--deceased .lwr-mini-name[b-do5bvbswqx] {
    color: var(--neutral-foreground-hint);
}

.lwr-mini--add[b-do5bvbswqx] {
    justify-content: center;
    opacity: 0.6;
}

.lwr-mini--add:hover[b-do5bvbswqx] {
    opacity: 1;
    box-shadow: none;
}

/* Sibling close badge (hover reveal, NavigationChevron inside) */
.lwr-close-hint[b-do5bvbswqx] {
    position: absolute;
    top: 2px;
    right: 2px;
    /* Immer leicht sichtbar (Auffindbarkeit des «Ausschaltens»), voll bei Hover/Fokus. */
    opacity: 0.35;
    transition: opacity 0.2s ease;
    z-index: 3;
}

/* Bare accent × — no round background, just the cross. */
.lwr-remove-x[b-do5bvbswqx] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: none;
    background: transparent;
    color: var(--accent-fill-rest);
    cursor: pointer;
    line-height: 0;
}

.lwr-remove-x:focus-visible[b-do5bvbswqx] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}

.lwr-mini-wrap:hover .lwr-close-hint[b-do5bvbswqx],
.lwr-close-hint:focus-within[b-do5bvbswqx] {
    opacity: 1;
}

/* Mini-card badges sit tighter than on the big cards */
.lwr-mini-wrap .lwr-dagger-badge[b-do5bvbswqx] {
    top: 1px;
    left: 1px;
    width: 21px;
    height: 21px;
    font-size: 0.95rem;
}

/* ====== Testator row ====== */
/* A centered Testator | ——link—— | Spouse pair with a CONTINUOUS line. The escheat/incomplete
   context is taken OUT OF FLOW (absolute, left) so the pair stays centred whether or not it exists. */
.lwr-testator-row[b-do5bvbswqx] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lwr-testator-context[b-do5bvbswqx] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: flex-start;
    max-width: 42%;
}

/* 3-column grid: the TESTATOR sits in the centre column (always horizontally centred), the
   spouse + connecting line hang off to the right; the empty left column balances them. */
.lwr-testator-pair[b-do5bvbswqx] {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.lwr-testator-pair > .lwr-person-wrap[b-do5bvbswqx] {
    grid-column: 2;
    justify-self: center;
}

.lwr-testator-spouse-side[b-do5bvbswqx] {
    grid-column: 3;
    justify-self: stretch;
    display: flex;
    align-items: center;
    min-width: 0;
}

.lwr-testator-spouse-side > .lwr-person-wrap[b-do5bvbswqx] {
    flex: 0 0 auto;
}

.lwr-rel-line[b-do5bvbswqx] {
    flex: 1 1 auto;
    max-width: 140px;
    min-width: 20px;
    height: 3px;
    border-radius: 2px;
}

.lwr-rel-line--married[b-do5bvbswqx] {
    background: var(--accent-fill-rest);
}

.lwr-rel-line--cohab[b-do5bvbswqx] {
    background: none;
    border-top: 3px dashed var(--neutral-stroke-rest);
}

/* Divorced / separated before the death: the bond is severed, so is the statutory right. */
.lwr-rel-line--dissolved[b-do5bvbswqx] {
    background: none;
    border-top: 3px dotted var(--neutral-stroke-rest);
    opacity: 0.6;
}

.lwr-card--spouse[b-do5bvbswqx] {
    cursor: default;
}

/* ====== Escheat / incomplete context cards — own warning-toned card left of the testator ====== */
/* Escheat card: SAME footprint as a person card (point 5), warning-toned. */
.lwr-escheat-card[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: var(--lwr-person-w);
    min-height: var(--lwr-person-min-h);
    padding: 12px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: color-mix(in srgb, #b45309 8%, var(--fill-color));
    border: 1px solid color-mix(in srgb, #b45309 35%, transparent);
    font-size: 0.66rem;
    font-weight: 700;
    color: #b45309;
    text-align: center;
    cursor: help;
}

.lwr-incomplete-card[b-do5bvbswqx] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: color-mix(in srgb, #b45309 8%, var(--fill-color));
    border: 1px solid color-mix(in srgb, #b45309 35%, transparent);
    font-size: 0.72rem;
    font-weight: 600;
    color: #b45309;
    cursor: help;
}

/* ====== Children box (band 1) ====== */
.lwr-children-box[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px 14px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: transparent;
    position: relative;
}

.lwr-band--displaced .lwr-children-box[b-do5bvbswqx],
.lwr-band--displaced .lwr-lane-box[b-do5bvbswqx] {
    box-shadow: none;
    background: var(--neutral-fill-stealth-rest);
}

.lwr-empty-hint[b-do5bvbswqx] {
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
    padding: 8px 4px;
}

/* nav hint (hover reveal, hs5 idiom) */
.lwr-nav-hint[b-do5bvbswqx] {
    position: absolute;
    bottom: 7px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--neutral-fill-stealth-rest);
    opacity: 0;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 2;
}

.lwr-children-box:hover .lwr-nav-hint[b-do5bvbswqx],
.lwr-card--spouse:hover .lwr-nav-hint[b-do5bvbswqx] {
    opacity: 1;
}

.lwr-nav-hint:hover[b-do5bvbswqx] {
    background: var(--neutral-fill-stealth-hover);
}

/* ====== Notes, GP middle note ====== */
.lwr-note[b-do5bvbswqx] {
    margin-top: 8px;
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
    padding: 6px 10px;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: var(--neutral-fill-stealth-rest);
}

/* ====== Screenreader live region ====== */
.lwr-live[b-do5bvbswqx] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ====== Stamm columns (child + grandchildren) ====== */
.lwr-stamm-row[b-do5bvbswqx] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    width: 100%;
    align-items: flex-start;
}

.lwr-stamm-col[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: var(--lwr-person-w);
}

.lwr-grandchildren[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.lwr-stamm-connector[b-do5bvbswqx] {
    width: 2px;
    height: 10px;
    background: color-mix(in srgb, var(--accent-fill-rest) 35%, transparent);
    border-radius: 1px;
}

/* Smaller mini variant for grandchildren / uncles & aunts */
.lwr-mini--small[b-do5bvbswqx] {
    width: var(--lwr-chip-sm-w);
    min-height: 40px;
    padding: 7px 6px;
}

/* ====== Grandparent couple cards (3rd Parentel) ====== */
.lwr-card--gpcouple[b-do5bvbswqx] {
    cursor: default;
    padding: 12px 10px;
    gap: 8px;
    max-width: none; /* fill its 50% column instead of the shared 184px footprint */
}

/* Side-by-side (grandfather | grandmother) — the card now fills a 50% column, so there's room. */
.lwr-gp-pair[b-do5bvbswqx] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: stretch;
    justify-content: center;
    width: 100%;
}

.lwr-gp-person[b-do5bvbswqx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
    border: none;
    border-radius: calc(var(--layer-corner-radius) * 1px);
    background: transparent;
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer;
    font: inherit;
    color: var(--neutral-foreground-rest);
    transition: background 0.15s ease;
}

.lwr-gp-person:hover[b-do5bvbswqx] {
    background: var(--neutral-fill-stealth-hover);
}

.lwr-gp-person:focus-visible[b-do5bvbswqx] {
    outline: 2px solid var(--focus-stroke-outer);
    outline-offset: 1px;
}

.lwr-gp-person--deceased .lwr-person-icon[b-do5bvbswqx] {
    opacity: 0.4;
}

.lwr-gp-person-label[b-do5bvbswqx] {
    font-size: 0.62rem;
    font-weight: 600;
    white-space: nowrap;
}

.lwr-gp-person--deceased .lwr-gp-person-label[b-do5bvbswqx] {
    color: var(--neutral-foreground-hint);
}

/* ====== Responsive ====== */
@media (max-width: 639px) {
    .lwr-grid[b-do5bvbswqx],
    .lwr-gp-row[b-do5bvbswqx],
    .lwr-parents-row[b-do5bvbswqx],
    .lwr-testator-pair[b-do5bvbswqx] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .lwr-testator-row[b-do5bvbswqx] {
        flex-direction: column;
        align-items: stretch;
    }

    .lwr-testator-context[b-do5bvbswqx] {
        position: static;
        transform: none;
        max-width: none;
    }

    .lwr-spine-gap[b-do5bvbswqx],
    .lwr-parents-link[b-do5bvbswqx],
    .lwr-rel-line[b-do5bvbswqx] {
        display: none;
    }

    .lwr-lanes[b-do5bvbswqx] {
        margin-top: 10px;
    }

    .lwr-lane-box[b-do5bvbswqx] {
        margin-top: 4px;
    }
}
/* /Components/Application/Forms/VestedBenefitAccountForm.razor.rz.scp.css */
/* Chart directly under the panel title — same rhythm as .home-chart-zone / .pf-chart-zone.
   The fixed height plus overflow guard keeps Chart.js from growing the panel on re-render. */
.vba-chart-zone[b-2xa7trs9d9] {
    width: 100%;
    height: 200px;
    min-height: 0;
    overflow: hidden;
    padding: 8px 0 16px 0;
    box-sizing: content-box;
}
/* /Components/Application/Forms/YearAssetStatementCard.razor.rz.scp.css */
/* Rahmen/Fläche/Padding kommen von .w4l-edit-panel (Band-Muster für selektionsabhängige
   Detail-Cards, siehe Docs/DesignBacklog.md); hier bleibt nur die volle Breite. */
.yas-card[b-aun68ed71c] {
    width: 100%;
}

.yas-empty[b-aun68ed71c] {
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-base-font-size);
    padding: 8px 0;
}

.yas-body[b-aun68ed71c] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.yas-donut[b-aun68ed71c] {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
}

.yas-table[b-aun68ed71c] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-ramp-base-font-size);
}

.yas-table td[b-aun68ed71c] {
    padding: 6px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.yas-cat[b-aun68ed71c] {
    display: flex;
    align-items: center;
}

.yas-dot[b-aun68ed71c] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 8px;
    flex: 0 0 auto;
}

.yas-num[b-aun68ed71c] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 24px;
}

.yas-pct[b-aun68ed71c] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 16px;
    color: var(--neutral-foreground-hint);
    width: 3.5em;
}

.yas-total td[b-aun68ed71c] {
    font-weight: 600;
    border-bottom: none;
    border-top: 2px solid var(--neutral-stroke-strong-rest);
}

/* Donut left, table right on wide screens; stacked on narrow. */
@media (min-width: 640px) {
    .yas-body[b-aun68ed71c] {
        flex-direction: row;
        align-items: center;
    }

    .yas-donut[b-aun68ed71c] {
        flex: 0 0 240px;
        margin: 0;
    }

    .yas-table[b-aun68ed71c] {
        flex: 1 1 auto;
    }
}
/* /Components/Application/Forms/YearBudgetCard.razor.rz.scp.css */
/* Rahmen/Fläche/Padding kommen von .w4l-edit-panel (Band-Muster für selektionsabhängige
   Detail-Cards, siehe Docs/DesignBacklog.md); hier bleibt nur die volle Breite. */
.ybc-card[b-7fko4ooqbu] {
    width: 100%;
}

.ybc-empty[b-7fko4ooqbu] {
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-base-font-size);
    padding: 8px 0;
}

.ybc-body[b-7fko4ooqbu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ybc-table-col[b-7fko4ooqbu] {
    min-width: 0;
}

.ybc-donut-col[b-7fko4ooqbu] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.ybc-table[b-7fko4ooqbu] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-ramp-base-font-size);
}

.ybc-table td[b-7fko4ooqbu] {
    padding: 5px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.ybc-dot[b-7fko4ooqbu] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
}

.ybc-num[b-7fko4ooqbu] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 24px;
}

.ybc-total td[b-7fko4ooqbu] {
    font-weight: 600;
    border-bottom: none;
    border-top: 2px solid var(--neutral-stroke-strong-rest);
}

/* Table left, donut right on wide screens; stacked on narrow. */
@media (min-width: 640px) {
    .ybc-body[b-7fko4ooqbu] {
        flex-direction: row;
        align-items: stretch;
    }

    .ybc-table-col[b-7fko4ooqbu] {
        flex: 1 1 0;
    }

    .ybc-donut-col[b-7fko4ooqbu] {
        flex: 0 0 260px;
    }
}
/* /Components/Application/Forms/YearIncomeStatementCard.razor.rz.scp.css */
/* Rahmen/Fläche/Padding kommen von .w4l-edit-panel (Band-Muster für selektionsabhängige
   Detail-Cards, siehe Docs/DesignBacklog.md); hier bleibt nur die volle Breite. */
.yin-card[b-h5fxk8k71h] {
    width: 100%;
}

.yin-section-title[b-h5fxk8k71h] {
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 14px 0 4px;
}

.yin-table[b-h5fxk8k71h] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-ramp-base-font-size);
}

.yin-table td[b-h5fxk8k71h] {
    padding: 5px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.yin-num[b-h5fxk8k71h] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 24px;
}

.yin-total td[b-h5fxk8k71h] {
    font-weight: 600;
    border-bottom: none;
    border-top: 2px solid var(--neutral-stroke-strong-rest);
}

.yin-cost td[b-h5fxk8k71h] {
    color: var(--neutral-foreground-hint);
}

.yin-info td[b-h5fxk8k71h] {
    color: var(--neutral-foreground-hint);
    border-bottom: none;
}
/* /Components/Application/Forms/YearPensionStatementCard.razor.rz.scp.css */
/* Rahmen/Fläche/Padding kommen von .w4l-edit-panel (Band-Muster für selektionsabhängige
   Detail-Cards, siehe Docs/DesignBacklog.md); hier bleibt nur die volle Breite. */
.yps-card[b-lhsxsr2cs5] {
    width: 100%;
}

/* Objekt-Überschrift (eine PK / ein FZK) — der Punkt trägt die Chart-Farbe, damit
   der Block sichtbar zum geklickten Balkensegment gehört. */
.yps-block-title[b-lhsxsr2cs5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--type-ramp-plus-1-font-size);
    font-weight: 600;
    margin: 20px 0 2px;
}

.yps-block-title:first-of-type[b-lhsxsr2cs5] {
    margin-top: 8px;
}

.yps-dot[b-lhsxsr2cs5] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.yps-section-title[b-lhsxsr2cs5] {
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 14px 0 4px;
}

.yps-table[b-lhsxsr2cs5] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-ramp-base-font-size);
}

.yps-table td[b-lhsxsr2cs5] {
    padding: 5px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.yps-num[b-lhsxsr2cs5] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 24px;
}

.yps-opening td[b-lhsxsr2cs5] {
    font-weight: 600;
}

.yps-total td[b-lhsxsr2cs5] {
    font-weight: 600;
    border-bottom: none;
    border-top: 2px solid var(--neutral-stroke-strong-rest);
}

.yps-info td[b-lhsxsr2cs5] {
    color: var(--neutral-foreground-hint);
}

/* Trägt eine Handlung/einen Zustand (gesperrter Abzug, unerklärte Differenz) — kein Hilfstext. */
.yps-warn td[b-lhsxsr2cs5] {
    color: var(--w4l-warning);
    border-bottom: none;
}

.yps-empty[b-lhsxsr2cs5] {
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-base-font-size);
    padding: 8px 0;
}
/* /Components/Application/Forms/YearTaxDeclarationCard.razor.rz.scp.css */
/* Rahmen/Fläche/Padding kommen jetzt von .w4l-edit-panel (Band-Muster wie die Income-Panels);
   hier bleibt nur die Layout-Rolle (volle Breite + Zwei-Spalten-Grid im Split-Jahr, s.u.). */
.ytd-card[b-8z078x9y4r] {
    width: 100%;
}

/* Kopfzeile: YearCardHeader (Titel links, Pfeile + ✕ rechts). Der Wrapper bleibt,
   weil das Split-Jahr-Grid unten .ytd-card-head als Grid-Item adressiert; der
   Abstand nach unten kommt aus dem Header selbst (.ych-head). */
.ytd-card-head[b-8z078x9y4r] {
    min-width: 0;
}

/* Two declarations (split year) sit side by side on wide screens, stack on narrow.
   Kein full-height Personenfarb-Streifen mehr (früher border-left: 3px): die Person wird
   nur noch durch den kleinen Marker + die eingefärbte Kopfzeile markiert — analog zum
   dezenten Personen-Marker in der Titelzeile (PersonChip). */
.ytd-block[b-8z078x9y4r] {
    margin-bottom: 18px;
}

/* Ein Sektions-Wrapper = ein Grid-Item pro Zeilen-Spur im Split-Jahr (subgrid, s.u.).
   Im Ein-Personen-/schmalen Fall ein simpler Block; min-width:0 lässt breite Tabellen
   im .w4l-table-scroll scrollen statt die Spalte zu sprengen. */
.ytd-sec[b-8z078x9y4r] {
    min-width: 0;
}

/* Kleiner Personen-Marker in der Blockkopfzeile (ersetzt den früheren Seitenstreifen):
   ein schmaler vertikaler Farbbalken wie der PersonChip im Seitentitel. */
.ytd-owner-dot[b-8z078x9y4r] {
    display: inline-block;
    width: 4px;
    height: 0.95em;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: -0.12em;
    background: var(--owner-color, var(--neutral-stroke-strong-rest));
}

.ytd-head-unit[b-8z078x9y4r] {
    color: var(--owner-color, var(--neutral-foreground-rest));
}

.ytd-block:last-child[b-8z078x9y4r] {
    margin-bottom: 0;
}

.ytd-head[b-8z078x9y4r] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ytd-flag[b-8z078x9y4r] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 2px;
}

.ytd-head-text[b-8z078x9y4r] {
    display: flex;
    flex-direction: column;
}

.ytd-head-unit[b-8z078x9y4r] {
    font-weight: 600;
}

.ytd-head-loc[b-8z078x9y4r] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.ytd-section-title[b-8z078x9y4r] {
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 14px 0 4px;
}

.ytd-table[b-8z078x9y4r] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--type-ramp-base-font-size);
}

.ytd-table td[b-8z078x9y4r] {
    padding: 5px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.ytd-num[b-8z078x9y4r] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-left: 24px;
}

.ytd-total td[b-8z078x9y4r] {
    font-weight: 600;
    border-bottom: none;
    border-top: 2px solid var(--neutral-stroke-strong-rest);
}

.ytd-info td[b-8z078x9y4r] {
    color: var(--neutral-foreground-hint);
    border-bottom: none;
}

.ytd-summary[b-8z078x9y4r] {
    margin-top: 12px;
}

/* Rate stat cards (Portfolio-style) */
.ytd-stats[b-8z078x9y4r] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.ytd-stat[b-8z078x9y4r] {
    flex: 1 1 0;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
    background: var(--neutral-layer-2, var(--neutral-fill-secondary-rest));
}

.ytd-stat-label[b-8z078x9y4r] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.ytd-stat-value[b-8z078x9y4r] {
    font-size: var(--type-ramp-plus-3-font-size);
    line-height: var(--type-ramp-plus-3-line-height);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ytd-stat-hint[b-8z078x9y4r] {
    font-size: var(--type-ramp-minus-2-font-size, 0.7rem);
    color: var(--neutral-foreground-hint);
}

@media (min-width: 900px) {
    /* Split-Jahr (2 Deklarationen nebeneinander): beide Blöcke teilen sich über subgrid
       EINE Zeilen-Spur pro Sektion, damit „Taxable income", „Deductions", … in beiden
       Spalten auf DERSELBEN Höhe beginnen — inkl. der Rate-Cards. Jeder Block liefert
       dieselben 10 direkten Items (head + 9 × .ytd-sec, fehlende Sektionen als leere
       Platzhalter, s. Razor). Zeilenhöhe = Max beider Spalten; der Zeilen-Abstand kommt
       aus dem internen Titel-/Card-Margin (kein row-gap), damit beidseitig leere
       Sektionen wirklich kollabieren und keine Phantom-Lücke hinterlassen.
       NB: repeat(11, …) == Anzahl der Block-Items — bei Änderung der Sektionsliste im
       Razor mitziehen. */
    .ytd-card:has(.ytd-block + .ytd-block)[b-8z078x9y4r] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 28px;
        grid-template-rows: auto repeat(11, auto);
    }

    .ytd-card:has(.ytd-block + .ytd-block) .ytd-card-head[b-8z078x9y4r] {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .ytd-card:has(.ytd-block + .ytd-block) .ytd-block[b-8z078x9y4r] {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: 2 / span 11;
        min-width: 0;
        margin-bottom: 0;
    }
}
/* /Components/Application/Pages/Diagnostics.razor.rz.scp.css */
/* /Diagnostics - the two swapped panes. Both are flex children of .diagnostic-page-content
   (global, components.css) and take the whole remaining height; exactly one is display:flex
   at a time, set inline from C#. Colours are FluentUI tokens only. */

.diag-tree-pane[b-ietsqcdqsk],
.diag-detail-pane[b-ietsqcdqsk] {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    flex-direction: column;
}

.diag-detail-pane:focus[b-ietsqcdqsk] {
    outline: none;
}

.diag-filter-input[b-ietsqcdqsk] {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.6rem;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-input-rest);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
}

.diag-filter-input:focus[b-ietsqcdqsk] {
    outline: none;
    border-color: var(--accent-fill-rest);
}

.diag-tree-scroll[b-ietsqcdqsk] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    padding: 0.25rem;
}

.diag-tree-empty[b-ietsqcdqsk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

.diag-link-btn[b-ietsqcdqsk] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--accent-foreground-rest);
    text-decoration: underline;
}

.diag-detail-head[b-ietsqcdqsk] {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.diag-back-btn[b-ietsqcdqsk] {
    background: none;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 4px;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
}

.diag-back-btn:hover[b-ietsqcdqsk],
.diag-back-btn:focus-visible[b-ietsqcdqsk] {
    background: var(--neutral-fill-secondary-hover);
}

.diag-detail-title[b-ietsqcdqsk] {
    font-weight: 600;
}

.diag-detail-count[b-ietsqcdqsk],
.diag-detail-parent[b-ietsqcdqsk] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
}

/* The parent path is the long part - let it be the one that gets cut. */
.diag-detail-parent[b-ietsqcdqsk] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Application/Pages/Taxes.razor.rz.scp.css */
/* Residence page — braided residence-track editor + segment panel. */

.residence-editor-head[b-s21ik645zz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.residence-editor-head-main[b-s21ik645zz] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.residence-flag-lg[b-s21ik645zz] {
    width: 48px;
    height: 34px;
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.residence-pick-row[b-s21ik645zz] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.residence-pick[b-s21ik645zz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    font-size: 0.8125rem;
    border-radius: 8px;
    border: 0.5px solid var(--neutral-stroke-divider-rest);
    background: transparent;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.residence-pick:hover[b-s21ik645zz] {
    background: var(--neutral-fill-secondary-rest, rgba(0, 0, 0, 0.04));
}

.residence-pick-active[b-s21ik645zz] {
    border: 2px solid var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
}

.residence-auto-tag[b-s21ik645zz] {
    margin-left: 5px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 3px;
    padding: 0 3px;
}

.residence-action-row[b-s21ik645zz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.residence-action-title[b-s21ik645zz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* ── Domicile location cards: radio-card grid (a11y skeleton per ModeCardGroup). ── */
.residence-cards[b-s21ik645zz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    width: 100%;
    margin: 6px 0 0;
    padding: 0;
    border: none;
    min-inline-size: 0;
}

.residence-card[b-s21ik645zz] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 8px;
    background: var(--neutral-fill-stealth-rest);
    cursor: pointer;
    transition: border-color 0.1s ease, background 0.1s ease;
    box-sizing: border-box;
}

.residence-card:hover[b-s21ik645zz] {
    background: var(--neutral-fill-stealth-hover);
}

.residence-card--on[b-s21ik645zz] {
    border-color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent);
}

.residence-card--on:hover[b-s21ik645zz] {
    background: color-mix(in srgb, var(--accent-fill-rest) 10%, transparent);
}

/* Single-candidate segment: same card, no interaction affordance. */
.residence-card--static[b-s21ik645zz] {
    cursor: default;
}

/* Visually hidden but focusable/announceable radio (recipe: ModeCardGroup). */
.residence-card__input[b-s21ik645zz] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Forward the hidden input's focus ring onto the card. */
.residence-card:has(.residence-card__input:focus-visible)[b-s21ik645zz] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.residence-card__title[b-s21ik645zz] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.residence-card__flag[b-s21ik645zz] {
    width: 28px;
    height: 20px;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.residence-card__muni[b-s21ik645zz] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.residence-card__canton[b-s21ik645zz] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    margin-left: auto;
    flex-shrink: 0;
}

.residence-card__meta[b-s21ik645zz] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    min-width: 0;
}

/* State-carrying heuristic tag: the engine auto-picked this domicile by value. */
.residence-heuristic-tag[b-s21ik645zz] {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--warning-foreground-rest, #9a6700);
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 0 3px;
    white-space: nowrap;
}

/* Screen-reader-only text (title= alone is not SR-reliable). */
.residence-vh[b-s21ik645zz] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Application/Pages/Wizard.razor.rz.scp.css */
/* Styles for the household structure builder have moved to HouseholdStructureForm.razor.css */
/* /Components/Application/Shared/ActionPlanFilterBar.razor.rz.scp.css */
/* ActionPlanFilterBar — die geteilte Pill-Optik lebt in utilities.css (.w4l-pill*).
   Hier nur die komponenten-spezifischen Extras. */

.ap-filter-spacer[b-gps0b80prv] {
    flex: 1;
    min-width: 8px;
}

.ap-filter-reset[b-gps0b80prv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--neutral-foreground-hint);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ap-filter-reset:hover[b-gps0b80prv] {
    background: var(--neutral-fill-secondary-hover);
}

/* Mobile: the pill bar scrolls horizontally instead of wrapping into many rows. */
@media (max-width: 639px) {
    .w4l-pillbar[b-gps0b80prv] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .w4l-pillbar[b-gps0b80prv]::-webkit-scrollbar {
        display: none;
    }
}
/* /Components/Application/Shared/ActionPlanMeasurePanel.razor.rz.scp.css */
/* ActionPlanMeasurePanel — FAST-free edit panel of the Massnahmenplan.
   Surface comes from .w4l-edit-panel (utilities.css); here only the internals. */

.apm-panel[b-y0xs3zfpra] {
    margin: 8px 0 12px 0;
}

/* ── Header: title + [Delete] │ hairline │ [X] (FundForm order, native) ────── */

.apm-head[b-y0xs3zfpra] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.apm-title[b-y0xs3zfpra] {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apm-actions[b-y0xs3zfpra] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.apm-icon-btn[b-y0xs3zfpra] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.apm-icon-btn:hover[b-y0xs3zfpra] {
    background: var(--neutral-fill-secondary-hover);
}

/* Rot nur als Hover-Hinweis, kein Klick-Zustand (DesignBacklog §3). */
.apm-delete:hover svg[b-y0xs3zfpra] {
    color: var(--error, #d13438);
}

.apm-sep[b-y0xs3zfpra] {
    width: 1px;
    height: 18px;
    background: var(--neutral-stroke-rest);
    margin: 0 2px;
}

/* ── Mobile three-dot menu (native <details>) ──────────────────────────────── */

.apm-actions__mobile[b-y0xs3zfpra] {
    display: none;
    position: relative;
}

.apm-actions__mobile summary[b-y0xs3zfpra] {
    list-style: none;
}

.apm-actions__mobile summary[b-y0xs3zfpra]::-webkit-details-marker {
    display: none;
}

.apm-menu[b-y0xs3zfpra] {
    position: absolute;
    right: 0;
    top: 30px;
    z-index: 20;
    min-width: 120px;
    padding: 4px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-floating, var(--fill-color));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.apm-menu button[b-y0xs3zfpra] {
    display: block;
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    text-align: left;
    cursor: pointer;
}

.apm-menu button:hover[b-y0xs3zfpra] {
    background: var(--neutral-fill-secondary-hover);
}

@media (max-width: 639px) {
    .apm-actions__desktop[b-y0xs3zfpra] {
        display: none;
    }

    .apm-actions__mobile[b-y0xs3zfpra] {
        display: inline-flex;
    }
}

/* ── Pill rows (own measures): Responsible + Type, both single-select ──────── */

.apm-pillrow[b-y0xs3zfpra] {
    margin: 6px 0 0 0;
}

.apm-pillrow + .apm-fields[b-y0xs3zfpra] {
    margin-top: 12px;
}

.apm-pillrow-label[b-y0xs3zfpra] {
    align-self: center;
    margin-right: 4px;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

/* ── Timing radio group ─────────────────────────────────────────────────────── */

.apm-radio-row[b-y0xs3zfpra] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    min-height: 32px;
    align-items: center;
}

.apm-radio[b-y0xs3zfpra] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--neutral-foreground-rest);
}

.apm-radio input[type="radio"][b-y0xs3zfpra] {
    margin: 0;
    accent-color: var(--accent-fill-rest);
    cursor: pointer;
}

/* ── Fields ────────────────────────────────────────────────────────────────── */

.apm-fields[b-y0xs3zfpra] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.apm-field[b-y0xs3zfpra] {
    display: block;
    min-width: 0;
}

.apm-field--wide[b-y0xs3zfpra] {
    grid-column: 1 / -1;
}

/* Shared field components (TextField / YearMonthField / NumberField) stretch to the cell. */
.apm-field[b-y0xs3zfpra]  .ym-field {
    display: block;
    width: 100%;
}

@media (max-width: 639px) {
    .apm-fields[b-y0xs3zfpra] {
        grid-template-columns: 1fr;
    }
}

/* Native inputs styled like .w4l-select (utilities.css) so the panel reads as one system. */
.apm-input[b-y0xs3zfpra] {
    font-family: var(--body-font, "Segoe UI", sans-serif);
    font-size: var(--type-ramp-base-font-size, 14px);
    height: 32px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border: calc(var(--stroke-width, 1) * 1px) solid var(--neutral-stroke-rest, #d1d1d1);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    background-color: var(--neutral-fill-input-rest, #fafafa);
    color: var(--neutral-foreground-rest, #242424);
    outline: none;
}

.apm-input:hover[b-y0xs3zfpra] {
    border-color: var(--neutral-stroke-hover, #a1a1a1);
}

.apm-input:focus[b-y0xs3zfpra] {
    border-color: var(--accent-fill-rest, #0078d4);
    box-shadow: 0 0 0 1px var(--accent-fill-rest, #0078d4);
}

.apm-textarea[b-y0xs3zfpra] {
    height: auto;
    padding: 6px 8px;
    resize: vertical;
}

/* ── Generated (read-only) view ────────────────────────────────────────────── */

.apm-generated-hint[b-y0xs3zfpra] {
    margin-bottom: 10px;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.apm-readonly[b-y0xs3zfpra] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    color: var(--neutral-foreground-rest);
}

.apm-cat-dot[b-y0xs3zfpra] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}
/* /Components/Application/Shared/ActionPlanOverview.razor.rz.scp.css */
/* ActionPlanOverview — three stacked GanttTimeline instances on one shared scale.
   ::deep adjustments keep the shared component untouched. */

.ap-ov[b-hcubwib8l8] {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

/* ── Diamond lane: event emojis / cluster badges via DiamondTemplate ───────── */

/* Emojis and cluster badges are click targets (scroll-to-node / expand) — read as links. */
.ap-ov-events[b-hcubwib8l8]  .gantt-diamond {
    cursor: pointer;
}

/* Fallback for events without a known emoji: replicates the former neutral diamond. */
.ap-ov-diamond-fallback[b-hcubwib8l8] {
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background-color: color-mix(in srgb, var(--neutral-foreground-hint) 70%, transparent);
    border: 1.5px solid var(--neutral-foreground-hint);
    border-radius: 2px;
}

/* Count badge for a multi-event cluster. */
.ap-ov-cluster-badge[b-hcubwib8l8] {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--neutral-foreground-hint) 25%, transparent);
    border: 1.5px solid var(--neutral-foreground-hint);
    color: var(--neutral-foreground-rest);
    font-size: 11px;
    font-weight: 700;
}

.ap-ov-cluster-badge--open[b-hcubwib8l8] {
    background: var(--accent-fill-rest);
    border-color: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
}

/* Expanded cluster: one chip per event group, directly under the events lane. */
.ap-ov-cluster-strip[b-hcubwib8l8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 2px 0 6px;
    padding-left: 228px; /* under the timeline area, past the 220px label column */
}

@media (max-width: 899px) {
    .ap-ov-cluster-strip[b-hcubwib8l8] {
        padding-left: 0;
    }
}

/* ── Recurring rows: thin lanes, compact labels ────────────────────────────── */

.ap-ov-rec[b-hcubwib8l8]  .gantt-row {
    min-height: 26px;
}

.ap-ov-rec[b-hcubwib8l8]  .gantt-bar {
    height: 12px;
}

.ap-ov-rec-label[b-hcubwib8l8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    font-size: var(--type-ramp-minus-1-font-size);
}

.ap-ov-rec-label--done .ap-ov-rec-text[b-hcubwib8l8] {
    opacity: 0.6;
}

.ap-ov-rec-label input[type="checkbox"][b-hcubwib8l8] {
    flex: 0 0 auto;
    margin: 0;
}

.ap-ov-rec-glyph[b-hcubwib8l8] {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--neutral-foreground-hint);
}

.ap-ov-rec-text[b-hcubwib8l8] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Group row: N measures sharing one range × owner — one bar, chips on click. */
.ap-ov-rec-label--group .ap-ov-rec-text[b-hcubwib8l8] {
    font-weight: 600;
}

.ap-ov-rec-dot[b-hcubwib8l8] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* ── Brush lane (first lane — carries the shared year axis) ────────────────── */

.ap-ov-brush[b-hcubwib8l8] {
    margin-bottom: 2px;
}

.ap-ov-brush[b-hcubwib8l8]  .gantt-row {
    min-height: 30px;
}

/* Permanent selection is a means to keep the grips active — it must not read as "active row". */
.ap-ov-brush[b-hcubwib8l8]  .gantt-row.gantt-row-selected {
    background: transparent;
}

.ap-ov-brush[b-hcubwib8l8]  .gantt-bar {
    height: 16px;
    background: color-mix(in srgb, var(--accent-fill-rest) 22%, transparent);
    border: 1.5px solid var(--accent-fill-rest);
}

.ap-ov-brush-label[b-hcubwib8l8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.ap-ov-brush-reset[b-hcubwib8l8] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 999px;
    background: transparent;
    color: var(--neutral-foreground-rest);
    font-size: var(--type-ramp-minus-2-font-size);
    padding: 0 8px;
    cursor: pointer;
}

.ap-ov-brush-reset:hover[b-hcubwib8l8] {
    background: var(--neutral-fill-secondary-hover);
}

/* ── Chip states shared by the cluster/recurring strips ────────────────────── */

.ap-ov-cluster-strip .ap-ov-chip input[type="checkbox"][b-hcubwib8l8] {
    flex: 0 0 auto;
    margin: 0;
}

.ap-ov-chip--selected[b-hcubwib8l8] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

/* ── Mobile chip fallback for recurring measures ───────────────────────────── */

.ap-ov-chips[b-hcubwib8l8] {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0;
}

.ap-ov-chip[b-hcubwib8l8] {
    --cat-color: var(--neutral-stroke-rest);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--cat-color) 45%, transparent);
    background: color-mix(in srgb, var(--cat-color) 10%, transparent);
    color: var(--neutral-foreground-rest);
    font-size: var(--type-ramp-minus-1-font-size);
    cursor: pointer;
}

.ap-ov-chip--done[b-hcubwib8l8] {
    opacity: 0.5;
}

.ap-ov-chip-text[b-hcubwib8l8] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-ov-chip-until[b-hcubwib8l8] {
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

@media (max-width: 639px) {
    .ap-ov-rec[b-hcubwib8l8] {
        display: none;
    }

    .ap-ov-chips[b-hcubwib8l8] {
        display: flex;
    }

    /* Touch: the brush lane needs a bigger hit area. */
    .ap-ov-brush[b-hcubwib8l8]  .gantt-row {
        min-height: 44px;
    }
}
/* /Components/Application/Shared/ActionPlanSpine.razor.rz.scp.css */
/* ActionPlanSpine — vertical event spine. Rail language borrowed from /Timeline
   (solid past / dashed future); rows follow the .w4l-row hairline pattern, no cards. */

.aps-spine[b-ztz9tixf0d] {
    display: flex;
    flex-direction: column;
}

/* ── Node: rail column + body ──────────────────────────────────────────────── */

.aps-node[b-ztz9tixf0d] {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0 10px;
    scroll-margin-top: 80px; /* anchor jumps land below the sticky header */
}

.aps-rail[b-ztz9tixf0d] {
    position: relative;
}

.aps-rail-line[b-ztz9tixf0d] {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    transform: translateX(-50%);
}

.aps-node--past .aps-rail-line[b-ztz9tixf0d] {
    background: var(--neutral-stroke-strong-rest);
}

.aps-node--future .aps-rail-line[b-ztz9tixf0d] {
    background: repeating-linear-gradient(
        to bottom,
        var(--neutral-stroke-strong-rest) 0px,
        var(--neutral-stroke-strong-rest) 2px,
        transparent 2px,
        transparent 6px
    );
}

.aps-rail-dot[b-ztz9tixf0d] {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 11px;
    height: 11px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--neutral-layer-1, var(--fill-color));
    border: 3px solid var(--neutral-stroke-strong-rest);
    z-index: 1;
}

.aps-node--now .aps-rail-dot[b-ztz9tixf0d] {
    border-color: var(--accent-fill-rest);
}

.aps-body[b-ztz9tixf0d] {
    min-width: 0;
    padding: 4px 0 18px 0;
}

/* ── Node head ─────────────────────────────────────────────────────────────── */

.aps-head[b-ztz9tixf0d] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 2px 0 4px 0;
}

.aps-year[b-ztz9tixf0d] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--accent-foreground-rest);
    white-space: nowrap;
}

.aps-year--now[b-ztz9tixf0d] {
    color: var(--accent-fill-rest);
}

.aps-title[b-ztz9tixf0d] {
    font-weight: 600;
    font-size: var(--type-ramp-plus-1-font-size);
    color: var(--neutral-foreground-rest);
    min-width: 0;
}

/* Collapsed fully-done node: one clickable line. */
.aps-head--collapsed[b-ztz9tixf0d] {
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: var(--neutral-foreground-hint);
    border-radius: 4px;
    padding: 2px 4px 4px 0;
}

.aps-head--collapsed:hover[b-ztz9tixf0d] {
    background: var(--neutral-fill-secondary-hover);
}

.aps-head--collapsed .aps-title[b-ztz9tixf0d] {
    font-size: var(--type-ramp-base-font-size);
    color: var(--neutral-foreground-hint);
}

.aps-check[b-ztz9tixf0d] {
    color: var(--success, #107c10);
    font-weight: 700;
}

.aps-done-count[b-ztz9tixf0d] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.aps-collapse-btn[b-ztz9tixf0d] {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-minus-1-font-size);
    cursor: pointer;
    border-radius: 4px;
    padding: 1px 6px;
}

.aps-collapse-btn:hover[b-ztz9tixf0d] {
    background: var(--neutral-fill-secondary-hover);
}

.aps-owner-chip[b-ztz9tixf0d] {
    --owner-color: var(--neutral-stroke-rest);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--owner-color) 55%, transparent);
    background: color-mix(in srgb, var(--owner-color) 12%, transparent);
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    white-space: nowrap;
}

.aps-owner-dot[b-ztz9tixf0d] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--owner-color);
}

/* ── Measure rows (.w4l-row hairline pattern) ──────────────────────────────── */

.aps-rows[b-ztz9tixf0d] {
    display: flex;
    flex-direction: column;
}

.aps-row[b-ztz9tixf0d] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0.45rem 0;
}

.aps-row + .aps-row[b-ztz9tixf0d] {
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.aps-row--done[b-ztz9tixf0d] {
    opacity: 0.5;
}

.aps-row--done .aps-row-text[b-ztz9tixf0d] {
    color: var(--neutral-foreground-hint);
}

.aps-row--selected[b-ztz9tixf0d] {
    background: color-mix(in srgb, var(--accent-fill-rest) 8%, transparent);
    border-radius: 4px;
}

.aps-row-check[b-ztz9tixf0d] {
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
}

.aps-row-text[b-ztz9tixf0d] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    text-align: left;
    font-size: var(--type-ramp-base-font-size);
    font-family: inherit;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.aps-row-text:hover[b-ztz9tixf0d] {
    color: var(--accent-fill-rest);
}

.aps-hint-badge[b-ztz9tixf0d] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: var(--type-ramp-minus-2-font-size);
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-hint);
    text-decoration: none;
}

.aps-row-remarks[b-ztz9tixf0d] {
    flex: 0 0 auto;
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-minus-1-font-size);
    cursor: help;
}

.aps-when-chip[b-ztz9tixf0d] {
    --cat-color: var(--neutral-stroke-rest);
    flex: 0 0 auto;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--cat-color) 45%, transparent);
    background: color-mix(in srgb, var(--cat-color) 10%, transparent);
    font-size: var(--type-ramp-minus-1-font-size);
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.aps-row-owner[b-ztz9tixf0d] {
    flex: 0 0 auto;
    align-self: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.aps-panel-slot[b-ztz9tixf0d] {
    margin-top: 6px;
}

/* Manual measure without a title yet: keep the row clickable and say so. */
.aps-row-untitled[b-ztz9tixf0d] {
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

/* ── Gap segment (dashed rail only — no year-count label) ──────────────────── */

.aps-gap[b-ztz9tixf0d] {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0 10px;
    min-height: 22px;
}

.aps-gap-rail[b-ztz9tixf0d] {
    position: relative;
}

.aps-gap-rail[b-ztz9tixf0d]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(
        to bottom,
        var(--neutral-stroke-rest) 0px,
        var(--neutral-stroke-rest) 1px,
        transparent 1px,
        transparent 7px
    );
}

/* Event emoji in the node head (Timeline convention). */
.aps-emoji[b-ztz9tixf0d] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* ── Phase badge on the rail ───────────────────────────────────────────────── */

.aps-phase-badge-row[b-ztz9tixf0d] {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 0 10px;
    margin: 2px 0;
}

.aps-phase-badge[b-ztz9tixf0d] {
    grid-column: 2;
    justify-self: start;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-hint);
    font-size: var(--type-ramp-minus-1-font-size);
    font-weight: 600;
    white-space: nowrap;
}

/* ── Anchor flash (added by actionPlan.js on deep-link arrival) ────────────── */

.ap-group-flash[b-ztz9tixf0d] {
    animation: apsFlash-b-ztz9tixf0d 1.6s ease;
}

@keyframes apsFlash-b-ztz9tixf0d {
    0% { box-shadow: 0 0 0 2px var(--accent-fill-rest); }
    100% { box-shadow: 0 0 0 2px transparent; }
}

/* ── Mobile ────────────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
    .aps-node[b-ztz9tixf0d],
    .aps-gap[b-ztz9tixf0d],
    .aps-phase-badge-row[b-ztz9tixf0d] {
        grid-template-columns: 18px 1fr;
        gap: 0 8px;
    }

    .aps-row[b-ztz9tixf0d] {
        flex-wrap: wrap;
    }

    .aps-when-chip[b-ztz9tixf0d] {
        margin-left: 26px;
        order: 5;
    }
}

/* ── Severity axis ───────────────────────────────────────────────────────────
   Deadline-bound rows get a left marker and a badge; informational rows recede.
   The recommended default stays unstyled — marking all three would flatten the
   very distinction the axis exists to make. */
.aps-row--critical[b-ztz9tixf0d] {
    border-left: 2px solid var(--w4l-negative);
    padding-left: 6px;
    margin-left: -8px;
}

.aps-row--info .aps-row-text[b-ztz9tixf0d] {
    color: var(--neutral-foreground-hint);
}

.aps-sev-badge[b-ztz9tixf0d] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: var(--type-ramp-minus-2-font-size);
    font-weight: 600;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--w4l-negative) 15%, transparent);
    color: var(--w4l-negative);
    text-decoration: none;
}

/* A completed deadline is no longer urgent — drop the marker so done rows read as done. */
.aps-row--done.aps-row--critical[b-ztz9tixf0d] {
    border-left-color: transparent;
}

/* ── Deadlines ───────────────────────────────────────────────────────────────
   A preclusive period (Verwirkungsfrist) is filled, not outlined: it is the one
   badge in the plan that means "miss this and the right is gone". A procedural
   deadline carries the same shape in neutral tones, so the two read as the same
   kind of information at different weight. */
.aps-deadline-badge[b-ztz9tixf0d] {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 8px;
    font-size: var(--type-ramp-minus-2-font-size);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid var(--neutral-stroke-rest);
    color: var(--neutral-foreground-hint);
}

.aps-deadline-badge--forfeit[b-ztz9tixf0d] {
    border-color: transparent;
    background: var(--w4l-negative);
    color: var(--foreground-on-accent-rest);
}

/* Done means the deadline was met — stop shouting about it. */
.aps-row--done .aps-deadline-badge--forfeit[b-ztz9tixf0d] {
    background: transparent;
    border-color: var(--neutral-stroke-rest);
    color: var(--neutral-foreground-hint);
}
/* /Components/Application/Shared/AdvisorReviewDialog.razor.rz.scp.css */
.w4l-revdlg-backdrop[b-5io5vvlgjm] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.w4l-revdlg[b-5io5vvlgjm] {
    width: min(560px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.25);
}

.w4l-revdlg-title[b-5io5vvlgjm] {
    margin: 0;
    font-size: 1.05rem;
    color: var(--neutral-foreground-rest);
}

.w4l-revdlg-field[b-5io5vvlgjm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.w4l-revdlg-label[b-5io5vvlgjm] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.w4l-revdlg-sub[b-5io5vvlgjm] {
    font-weight: 400;
    color: var(--neutral-foreground-hint);
}

.w4l-revdlg-skill[b-5io5vvlgjm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
}

.w4l-revdlg-skill-pick[b-5io5vvlgjm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 0;
}

.w4l-revdlg-skill-stars[b-5io5vvlgjm] {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
}

.w4l-revdlg-skill-stars--lg .w4l-revdlg-star[b-5io5vvlgjm] {
    font-size: 22px;
    padding: 0 2px;
}

.w4l-revdlg-star[b-5io5vvlgjm] {
    background: none;
    border: none;
    padding: 0 1px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: var(--neutral-stroke-rest);
}

.w4l-revdlg-star.is-on[b-5io5vvlgjm] {
    color: var(--w4l-rating-star, #e8a33d);
}

.w4l-revdlg-text[b-5io5vvlgjm] {
    font: inherit;
    font-size: 0.9rem;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

.w4l-revdlg-radio[b-5io5vvlgjm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    cursor: pointer;
}

.w4l-revdlg-hint[b-5io5vvlgjm] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

/* A hint, not a rejection: it states what would be removed, and the send button stays enabled. */
.w4l-revdlg-warn[b-5io5vvlgjm] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--w4l-warning-fg, #b45309);
}

.w4l-revdlg-rules[b-5io5vvlgjm] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--neutral-foreground-hint);
    padding: 8px 10px;
    background: var(--neutral-fill-secondary);
    border-radius: 6px;
}

.w4l-revdlg-actions[b-5io5vvlgjm] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.w4l-revdlg-cancel[b-5io5vvlgjm],
.w4l-revdlg-send[b-5io5vvlgjm] {
    font: inherit;
    font-size: 0.88rem;
    padding: 7px 16px;
    border-radius: 6px;
    cursor: pointer;
}

.w4l-revdlg-cancel[b-5io5vvlgjm] {
    background: transparent;
    border: 1px solid var(--neutral-stroke-rest);
    color: var(--neutral-foreground-rest);
}

.w4l-revdlg-send[b-5io5vvlgjm] {
    background: var(--accent-fill-rest);
    border: 1px solid var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest, #fff);
    font-weight: 600;
}

.w4l-revdlg-send:disabled[b-5io5vvlgjm] {
    opacity: 0.5;
    cursor: default;
}

/* ── Own review, read-only ─────────────────────────────────────────────────
   Shown instead of the "you already reviewed" notice. */
.w4l-revdlg-own-row[b-5io5vvlgjm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
}

.w4l-revdlg-own-caption[b-5io5vvlgjm] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
}

.w4l-revdlg-own-stars[b-5io5vvlgjm] {
    display: inline-flex;
    gap: 2px;
    flex: 0 0 auto;
}

/* Same glyph and colours as the interactive row, without the affordances — no pointer,
   no hit area, so it reads as a record rather than a control. */
.w4l-revdlg-star.is-static[b-5io5vvlgjm] {
    cursor: default;
    padding: 0 1px;
}

.w4l-revdlg-own-text[b-5io5vvlgjm] {
    margin: 0;
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--neutral-layer-2);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--neutral-foreground-rest);
    white-space: pre-wrap;
}
/* /Components/Application/Shared/AdvisorReviewList.razor.rz.scp.css */
.w4l-rev-list[b-t0qymn2l4e] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.w4l-rev[b-t0qymn2l4e] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-layer-2);
}

.w4l-rev-head[b-t0qymn2l4e] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.w4l-rev-skills[b-t0qymn2l4e] {
    font-size: 0.82rem;
    color: var(--neutral-foreground-rest);
}

.w4l-rev-meta[b-t0qymn2l4e] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
}

.w4l-rev-verified[b-t0qymn2l4e] {
    color: var(--accent-foreground-rest);
    font-weight: 600;
}

.w4l-rev-disputed[b-t0qymn2l4e] {
    color: var(--w4l-warning-fg, #b45309);
}

.w4l-rev-text[b-t0qymn2l4e] {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--neutral-foreground-rest);
    white-space: pre-wrap;
}

/* Indented but not shrunk — the reply stands in for a deletion right, so it must not read as a
   footnote to the review it answers. */
.w4l-rev-response[b-t0qymn2l4e] {
    margin-top: 4px;
    padding-inline-start: 12px;
    border-inline-start: 2px solid var(--neutral-stroke-rest);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.w4l-rev-response-label[b-t0qymn2l4e] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

.w4l-rev-empty[b-t0qymn2l4e] {
    margin: 8px 4px;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}
/* /Components/Application/Shared/AllocationRiskBar.razor.rz.scp.css */
/* AllocationRiskBar — the allocation bar doubling as the slider track.

   ::deep is used deliberately: the visual is AssetAllocationView, whose own scoped CSS sizes
   .aav-bar for read-only display (14px). Here it is a drag target and needs a grabbable height,
   so it is re-sized from the outside rather than by adding a "mode" parameter to that component. */

.arb[b-d77jpgzfuc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    user-select: none;
}

.arb__header[b-d77jpgzfuc] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.arb__title[b-d77jpgzfuc] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* Band-heat chip: a transparent tint plus a hairline in the same hue carries the signal; the text
   stays in the normal foreground at normal weight so it remains legible in both themes (the heat
   scale as type would fail contrast at this size).

   Grid-stacked with a hidden sizer so the chip's width is fixed by the WIDEST content it can ever
   hold — the box must not resize while the value ticks under a drag. */
.arb__value[b-d77jpgzfuc] {
    display: inline-grid;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.arb__value-sizer[b-d77jpgzfuc],
.arb__value-text[b-d77jpgzfuc] {
    grid-area: 1 / 1;
    text-align: center;
}

/* Reserves the width without being seen or read out. */
.arb__value-sizer[b-d77jpgzfuc] {
    visibility: hidden;
    pointer-events: none;
}

/* ── Band ticks (above the bar) ──
   No horizontal margin: the labels must use the same 0..100% mapping as the track, or they
   drift apart toward the edges. */
.arb__tick-labels[b-d77jpgzfuc] {
    position: relative;
    height: 16px;
}

.arb__tick-label[b-d77jpgzfuc] {
    position: absolute;
    bottom: 0;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.arb__tick-label--start[b-d77jpgzfuc] { transform: none; }
.arb__tick-label--end[b-d77jpgzfuc] { transform: translateX(-100%); }

/* Stepped mode carries no tick TEXT (fund names are far too long side by side) — the row collapses
   to a thin gap so the bar does not float under an empty strip. */
.arb__tick-labels--bare[b-d77jpgzfuc] {
    height: 4px;
}

/* Rung marks crossing the bar. In stepped mode these are the snap points; they sit above the
   segments but below the handle, and stay light so they never compete with the allocation. */
.arb__tick[b-d77jpgzfuc] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid color-mix(in srgb, var(--neutral-layer-1) 55%, transparent);
    pointer-events: none;
    z-index: 1;
}

/* ── Track area (the rect the drag measures) ── */
.arb__track-area[b-d77jpgzfuc] {
    position: relative;
    touch-action: none;
    cursor: ew-resize;
}

.arb--readonly .arb__track-area[b-d77jpgzfuc] {
    cursor: default;
}

/* The allocation bar itself, grown to a drag-friendly height. Geometry matches the financing
   bars on Homes → Financing (.fin-bar: 26px / radius 4px) so the two read as the same object. */
.arb__track-area[b-d77jpgzfuc]  .aav-bar {
    height: 26px;
    border-radius: 4px;
}

/* Risk-capacity ceiling. A LINE, not a shaded region above it — the ceiling falls with the
   remaining horizon, so late in a plan it lands on band 1 and a fill would cover the entire
   track, wiping out the allocation it is drawn over. */
.arb__capacity-line[b-d77jpgzfuc] {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 0;
    border-left: 1.5px dashed var(--neutral-foreground-hint);
    pointer-events: none;
}

/* The derived recommendation, where there is one. */
.arb__suggested[b-d77jpgzfuc] {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 0;
    border-left: 2px dashed var(--accent-fill-rest);
    opacity: 0.85;
    pointer-events: none;
    z-index: 1;
}

/* Split line at the handle — mirrors .fsc-split on the financing structure chart (2.5px, 2px
   proud of the bar top and bottom) so the two draggable bars read as the same mechanism. */
.arb__split[b-d77jpgzfuc] {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 0;
    border-left: 2.5px solid var(--neutral-foreground-rest);
    transform: translateX(-1px);
    pointer-events: none;
    z-index: 2;
}

/* ── Handle ──
   Styled in full here rather than inherited: the .value-slider__knob rules live in ValueSlider's
   inline <style>, which is only present in the DOM when a ValueSlider happens to render on the
   same page — this control must not depend on that. The class is kept on the element purely as
   the hit-test hook valueSliderDrag.js dispatches on.

   Deliberately the same 16px hit area / 12px circle as the site-wide grip, plus a light ring:
   this knob sits on saturated asset-class colours, not a neutral track. */
.arb__knob[b-d77jpgzfuc] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
    touch-action: none;
    z-index: 3;
}

.arb__knob[b-d77jpgzfuc]::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--neutral-layer-1);
    border: 1.5px solid var(--neutral-foreground-rest);
    box-sizing: border-box;
    transition: transform 0.1s ease;
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--neutral-layer-1) 85%, transparent),
                0 1px 3px rgb(0 0 0 / 0.35);
}

.arb__knob:hover[b-d77jpgzfuc]::before,
.arb__knob:focus-visible[b-d77jpgzfuc]::before {
    transform: scale(1.18);
}

.arb__knob:focus-visible[b-d77jpgzfuc] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
    border-radius: 50%;
}

/* Touch: wider hit area + bigger knob, mirroring the site-wide grip. */
@media (pointer: coarse) {
    .arb__knob[b-d77jpgzfuc] {
        width: 32px;
        margin-left: -16px;
    }

    .arb__knob[b-d77jpgzfuc]::before {
        width: 16px;
        height: 16px;
    }
}

/* ── Legend ──
   A fixed grid, not a wrapping flex row: with auto-fill columns the row set and column widths
   depend only on the container, so nothing re-flows when a percentage changes width or a class
   drops to 0 %. Percentages are tabular and right-aligned in a fixed column for the same reason —
   the numbers tick in place instead of nudging the labels around. */
.arb__legend[b-d77jpgzfuc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 4px 16px;
    margin-top: 10px;
}

.arb__legend-item[b-d77jpgzfuc] {
    display: grid;
    grid-template-columns: 10px 1fr 3.2em;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    min-width: 0;
}

/* A class that is absent at this position keeps its row and recedes — it must not vanish, or the
   legend would re-flow exactly when the user is dragging past it. */
.arb__legend-item--empty[b-d77jpgzfuc] {
    opacity: 0.45;
}

.arb__swatch[b-d77jpgzfuc] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.arb__legend-label[b-d77jpgzfuc] {
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arb__legend-pct[b-d77jpgzfuc] {
    color: var(--neutral-foreground-hint);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Marker labels ──
   Names the dashed lines, in the manner of .fsc-mark under the financing structure chart. Without
   these the lines are unexplained decoration. */
.arb__marks[b-d77jpgzfuc] {
    position: relative;
    height: 14px;
    margin-top: 3px;
}

.arb__mark[b-d77jpgzfuc] {
    position: absolute;
    top: 0;
    font-size: 0.68rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--neutral-foreground-hint);
    pointer-events: none;
}

.arb__mark--suggested[b-d77jpgzfuc] {
    color: var(--accent-foreground-rest);
    font-weight: 600;
}
/* /Components/Application/Shared/AppointmentMonthView.razor.rz.scp.css */
.mv-root[b-gutt85z5lf] { border: 1px solid var(--neutral-stroke-rest); border-radius: 8px; overflow: hidden; }
.mv-dow[b-gutt85z5lf] { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--neutral-stroke-rest); }
.mv-dow-cell[b-gutt85z5lf] { padding: 4px; text-align: center; font-size: 0.72rem; color: var(--neutral-foreground-hint); text-transform: uppercase; }
.mv-grid[b-gutt85z5lf] { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(84px, auto); }

.mv-day[b-gutt85z5lf] { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px; border: none; border-top: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 50%, transparent); border-left: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 50%, transparent); background: transparent; color: var(--neutral-foreground-rest); font: inherit; cursor: pointer; text-align: left; min-width: 0; }
.mv-day:hover[b-gutt85z5lf] { background: color-mix(in srgb, var(--accent-fill-rest) 6%, transparent); }
.mv-day:focus-visible[b-gutt85z5lf] { outline: 2px solid var(--accent-fill-rest); outline-offset: -2px; }
.mv-day.is-outside[b-gutt85z5lf] { opacity: 0.45; }
.mv-day.is-today[b-gutt85z5lf] { background-color: color-mix(in srgb, var(--accent-fill-rest) 4%, transparent); }   /* same tint as the week view's today column */
.mv-day.is-today .mv-day-num[b-gutt85z5lf] { color: var(--accent-fill-rest); font-weight: 700; }
.mv-day-num[b-gutt85z5lf] { font-size: 0.8rem; font-variant-numeric: tabular-nums; }

.mv-entries[b-gutt85z5lf] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mv-chip[b-gutt85z5lf] { display: flex; align-items: center; gap: 4px; border-radius: 4px; padding: 0 3px; font-size: 0.7rem; min-width: 0; }
.mv-chip-text[b-gutt85z5lf] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-dot[b-gutt85z5lf] { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.mv-more[b-gutt85z5lf] { font-size: 0.68rem; color: var(--neutral-foreground-hint); }

.mv-k-confirmed .mv-dot[b-gutt85z5lf] { background: var(--accent-fill-rest); }
.mv-k-pending .mv-dot[b-gutt85z5lf] { background: color-mix(in srgb, var(--accent-fill-rest) 45%, transparent); }
.mv-k-approval .mv-dot[b-gutt85z5lf] { background: var(--w4l-warning); }
.mv-k-past .mv-dot[b-gutt85z5lf] { background: var(--neutral-foreground-hint); }

/* Wide cells: the chip carries the status as a background too (echoes the week-view block
   palette) — a confirmed meeting and an unanswered proposal must differ at a glance.
   In the dot-only degrade (≤110px cells / phones) the chip has no padding, so these tints
   collapse to a faint halo around the dot — acceptable. */
.mv-k-confirmed[b-gutt85z5lf] { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent); }
.mv-k-pending[b-gutt85z5lf] { background: color-mix(in srgb, var(--accent-fill-rest) 7%, transparent); }
.mv-k-approval[b-gutt85z5lf] { background: color-mix(in srgb, var(--w4l-warning) 15%, transparent); }

/* Degrade ladder (spec §5): below ~110px cell width the text hides, dot + nothing else;
   ≤639px only dots in a row. Container queries express "cell width", supported everywhere .NET 10 runs. */
.mv-day[b-gutt85z5lf] { container-type: inline-size; }
@container (max-width: 110px) {
    .mv-chip-text[b-gutt85z5lf] { display: none; }
    .mv-chip[b-gutt85z5lf] { padding: 0; }
    .mv-entries[b-gutt85z5lf] { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 639px) {
    .mv-grid[b-gutt85z5lf] { grid-auto-rows: minmax(48px, auto); }
    .mv-chip-text[b-gutt85z5lf] { display: none; }
    .mv-entries[b-gutt85z5lf] { flex-direction: row; flex-wrap: wrap; }
}
/* /Components/Application/Shared/AppointmentWeekView.razor.rz.scp.css */
/* Week/day view — all colors are theme tokens or color-mix on tokens (raw-hex lint enforced). */
.wv-root[b-xi7f9dj66l] {
    --wv-row-h: 24px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    overflow: hidden;
}

.wv-head[b-xi7f9dj66l] { display: grid; grid-template-columns: 48px repeat(var(--wv-days), 1fr); border-bottom: 1px solid var(--neutral-stroke-rest); }
.wv-day-head[b-xi7f9dj66l] { padding: 6px 4px; text-align: center; display: flex; flex-direction: column; gap: 1px; }
.wv-day-head.is-today .wv-day-date[b-xi7f9dj66l] { color: var(--accent-fill-rest); font-weight: 600; }
.wv-day-name[b-xi7f9dj66l] { font-size: 0.72rem; color: var(--neutral-foreground-hint); text-transform: uppercase; }
.wv-day-date[b-xi7f9dj66l] { font-size: 0.85rem; }

.wv-body[b-xi7f9dj66l] { display: grid; grid-template-columns: 48px repeat(var(--wv-days), 1fr); outline: none; }
.wv-body:focus-visible[b-xi7f9dj66l] { box-shadow: inset 0 0 0 2px var(--accent-fill-rest); }

.wv-gutter-cell[b-xi7f9dj66l] { height: var(--wv-row-h); font-size: 0.7rem; color: var(--neutral-foreground-hint); text-align: right; padding-right: 6px; font-variant-numeric: tabular-nums; }

.wv-day-col[b-xi7f9dj66l] { position: relative; height: calc(var(--wv-row-h) * var(--wv-rows)); border-left: 1px solid color-mix(in srgb, var(--neutral-stroke-rest) 50%, transparent); background-image: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--neutral-stroke-rest) 35%, transparent) 0 1px, transparent 1px calc(var(--wv-row-h) * 2)); }
.wv-day-col.is-today[b-xi7f9dj66l] { background-color: color-mix(in srgb, var(--accent-fill-rest) 4%, transparent); }

/* Layer 1 — availability / bookable tint. Quiet fill, no borders (spec §4: no graph paper). */
.wv-tint[b-xi7f9dj66l] { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--accent-fill-rest) 9%, transparent); pointer-events: none; }

/* Layer 2 — clickable open slots. Invisible at rest inside the tint; lifted on hover/focus. */
.wv-slot[b-xi7f9dj66l] { position: absolute; left: 1px; right: 1px; border: none; background: transparent; cursor: pointer; padding: 0; border-radius: 4px; color: transparent; }
.wv-slot:hover[b-xi7f9dj66l], .wv-slot.is-focused[b-xi7f9dj66l] { background: color-mix(in srgb, var(--accent-fill-rest) 22%, transparent); color: var(--neutral-foreground-rest); }
.wv-slot.is-picked[b-xi7f9dj66l] { background: color-mix(in srgb, var(--accent-fill-rest) 30%, transparent); outline: 2px solid var(--accent-fill-rest); color: var(--neutral-foreground-rest); }
.wv-slot:focus-visible[b-xi7f9dj66l] { outline: 2px solid var(--accent-fill-rest); color: var(--neutral-foreground-rest); }
.wv-slot-time[b-xi7f9dj66l] { font-size: 0.72rem; font-variant-numeric: tabular-nums; }

/* Collect mode (propose times): pickable slots are lifted at rest so the user sees what can be
   picked — the hover-reveal affordance does not exist on touch and is undiscoverable otherwise. */
.wv-root.is-collect .wv-slot[b-xi7f9dj66l] { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent); color: var(--neutral-foreground-rest); }
.wv-root.is-collect .wv-slot:hover[b-xi7f9dj66l], .wv-root.is-collect .wv-slot.is-focused[b-xi7f9dj66l] { background: color-mix(in srgb, var(--accent-fill-rest) 26%, transparent); }

/* Layer 3 — appointment blocks. */
.wv-block[b-xi7f9dj66l] { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 0; overflow: hidden; border-radius: 5px; border: 1px solid transparent; padding: 2px 5px; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.wv-block.is-selected[b-xi7f9dj66l] { outline: 2px solid var(--accent-fill-rest); outline-offset: 1px; }
.wv-block.is-focused[b-xi7f9dj66l] { outline: 2px dashed var(--accent-fill-rest); }
.wv-block:focus-visible[b-xi7f9dj66l] { outline: 2px solid var(--accent-fill-rest); }
.wv-block-time[b-xi7f9dj66l] { font-size: 0.7rem; font-variant-numeric: tabular-nums; opacity: 0.9; }
.wv-block-name[b-xi7f9dj66l] { font-size: 0.76rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wv-block-mode[b-xi7f9dj66l] { font-size: 0.7rem; }

.wv-b-confirmed[b-xi7f9dj66l] { background: var(--accent-fill-rest); color: var(--foreground-on-accent-rest); }
.wv-b-pending[b-xi7f9dj66l] { background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent); border: 1px dashed var(--accent-fill-rest); color: var(--neutral-foreground-rest); }
.wv-b-approval[b-xi7f9dj66l] { background: color-mix(in srgb, var(--w4l-warning) 20%, transparent); border-color: var(--w4l-warning); color: var(--neutral-foreground-rest); }
.wv-b-past[b-xi7f9dj66l] { background: var(--neutral-fill-secondary-rest); color: var(--neutral-foreground-hint); }
.wv-b-minutedue[b-xi7f9dj66l] { background: var(--neutral-fill-secondary-rest); color: var(--neutral-foreground-rest); border-color: var(--w4l-warning); border-style: solid; }
.wv-b-cancelled[b-xi7f9dj66l] { background: var(--neutral-fill-secondary-rest); color: var(--neutral-foreground-hint); text-decoration: line-through; opacity: 0.7; }

/* Current time = accent (joins the existing "today = accent" encoding: today column tint +
   today date). Amber is reserved for the needs-approval state on this surface. */
.wv-now[b-xi7f9dj66l] { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent-fill-rest); pointer-events: none; }
.wv-now[b-xi7f9dj66l]::before { content: ""; position: absolute; left: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fill-rest); }

@media (max-width: 639px) {
    .wv-root[b-xi7f9dj66l] { --wv-row-h: 44px; }   /* touch minimum — the day column scrolls, it never compresses */
}
/* /Components/Application/Shared/AssetAllocationView.razor.rz.scp.css */
/* Stacked variant — segmented bar + legend (carried over from FundAllocationBar). */
.aav-bar[b-3wcr104nmy] {
    display: flex;
    width: 100%;
    height: 14px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--neutral-stroke-rest);
}

.aav-seg[b-3wcr104nmy] { height: 100%; }

.aav-legend[b-3wcr104nmy] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.aav-legend-item[b-3wcr104nmy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

/* Rows variant — one labelled row per class (carried over from the risk-slider forms). */
.aav-rows[b-3wcr104nmy] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aav-row[b-3wcr104nmy] {
    display: grid;
    grid-template-columns: 12px minmax(90px, auto) 1fr 36px;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
}

.aav-name[b-3wcr104nmy] { color: var(--neutral-foreground-rest); }

.aav-track[b-3wcr104nmy] {
    height: 8px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--neutral-foreground-hint) 18%, transparent);
    overflow: hidden;
}

.aav-fill[b-3wcr104nmy] {
    display: block;
    height: 100%;
    border-radius: 4px;
    opacity: 0.85;
}

/* Shared */
.aav-swatch[b-3wcr104nmy] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    display: inline-block;
}

.aav-pct[b-3wcr104nmy] {
    color: var(--neutral-foreground-hint);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* /Components/Application/Shared/ChecklistLibraryPanel.razor.rz.scp.css */
/* ChecklistLibraryPanel — browsable Swiss life-situation checklist library. */

.cl-lib[b-damzg3eqtz] { font-size: var(--type-ramp-base-font-size); }

.cl-search[b-damzg3eqtz] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cl-search-input[b-damzg3eqtz] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font-size: var(--type-ramp-base-font-size);
}

.cl-count[b-damzg3eqtz] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.cl-notes[b-damzg3eqtz] {
    margin-bottom: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--neutral-fill-secondary-rest);
}

.cl-notes summary[b-damzg3eqtz],
.cl-theme summary[b-damzg3eqtz] {
    cursor: pointer;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    padding: 4px 0;
}

.cl-notes ul[b-damzg3eqtz] { margin: 6px 0 2px 0; padding-left: 18px; }
.cl-notes li[b-damzg3eqtz] { color: var(--neutral-foreground-hint); font-size: var(--type-ramp-minus-1-font-size); line-height: 1.4; }

.cl-theme[b-damzg3eqtz] {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    padding: 4px 0;
}

.cl-block[b-damzg3eqtz] { padding: 2px 0 6px 8px; }

.cl-block-title[b-damzg3eqtz] {
    font-weight: 600;
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
    margin: 4px 0 2px 0;
}

.cl-block ul[b-damzg3eqtz] { margin: 0; padding-left: 18px; list-style: disc; }

.cl-block li[b-damzg3eqtz] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    line-height: 1.4;
    padding: 2px 0;
}

.cl-item-text[b-damzg3eqtz] { flex: 1; color: var(--neutral-foreground-rest); }

.cl-add[b-damzg3eqtz] {
    flex-shrink: 0;
    border: 1px solid var(--accent-stroke-control-rest);
    background: transparent;
    color: var(--accent-foreground-rest);
    border-radius: 999px;
    font-size: var(--type-ramp-minus-2-font-size);
    font-weight: 600;
    padding: 1px 8px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.1s ease, background-color 0.1s ease;
}

.cl-block li:hover .cl-add[b-damzg3eqtz] { opacity: 1; }

.cl-add:hover[b-damzg3eqtz] { background: color-mix(in srgb, var(--accent-fill-rest) 14%, transparent); }

/* ── Theme opt-in (summary row) ──────────────────────────────────────────────
   A theme has three mutually exclusive states: already in the plan, addable for
   a chosen year, or covered by the model. The summary is a flex row so the
   controls sit right of the title without pushing the disclosure triangle. */
.cl-theme summary[b-damzg3eqtz] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-theme-title[b-damzg3eqtz] {
    flex: 1;
    min-width: 0;
}

.cl-theme-state[b-damzg3eqtz] {
    flex-shrink: 0;
    font-size: var(--type-ramp-minus-2-font-size);
    font-weight: 400;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.cl-theme-state--on[b-damzg3eqtz] {
    color: var(--accent-foreground-rest);
    font-weight: 600;
}

.cl-theme-add[b-damzg3eqtz] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cl-theme-year[b-damzg3eqtz] {
    font-size: var(--type-ramp-minus-2-font-size);
    padding: 1px 4px;
    height: auto;
}

.cl-theme-remove[b-damzg3eqtz] {
    flex-shrink: 0;
    border: 1px solid var(--neutral-stroke-rest);
    background: transparent;
    color: var(--neutral-foreground-hint);
    border-radius: 999px;
    font-size: var(--type-ramp-minus-2-font-size);
    padding: 1px 8px;
    cursor: pointer;
}

.cl-theme-remove:hover[b-damzg3eqtz] {
    border-color: var(--neutral-stroke-strong-rest);
    color: var(--neutral-foreground-rest);
}
/* /Components/Application/Shared/DiagnosticPathTreeView.razor.rz.scp.css */
/* Diagnostic object-path tree. Dense on purpose - this is an admin debugging tool, and the
   table below it is the point. Colours are FluentUI tokens only (no raw hex, RawHexLintTests). */

.dpt-node[b-no7208jo9g] {
    margin: 0;
}

/* display:flex would drop the native disclosure triangle (the marker is tied to
   display:list-item), so the triangle is drawn explicitly. That also makes it deterministic
   across browsers instead of inheriting each engine's default glyph. */
.dpt-summary[b-no7208jo9g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    white-space: nowrap;
    list-style: none;
}

.dpt-summary[b-no7208jo9g]::-webkit-details-marker {
    display: none;
}

.dpt-summary[b-no7208jo9g]::before {
    content: "▸"; /* right-pointing triangle */
    flex-shrink: 0;
    width: 0.75rem;
    color: var(--neutral-foreground-hint);
}

.dpt-node[open] > .dpt-summary[b-no7208jo9g]::before {
    content: "▾"; /* down-pointing triangle */
}

.dpt-summary:hover[b-no7208jo9g],
.dpt-summary:focus-visible[b-no7208jo9g] {
    background: var(--neutral-fill-secondary-hover);
}

/* Indent one level per nesting step. The component recurses, so this compounds by itself. */
.dpt-children[b-no7208jo9g] {
    padding-left: 0.9rem;
}

.dpt-leaf[b-no7208jo9g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.dpt-leaf:hover[b-no7208jo9g],
.dpt-leaf:focus-visible[b-no7208jo9g] {
    background: var(--neutral-fill-secondary-hover);
}

/* Persistent selection, so returning from the detail pane lands on the row you left. */
.dpt-leaf--selected[b-no7208jo9g] {
    background: var(--neutral-fill-secondary-rest);
    font-weight: 600;
}

/* Count chip - how many diagnostic series this node carries ITSELF. On a leaf it is a plain
   label (the whole row is already the button); on a branch summary it is the click target for
   that node's own data, because the rest of the summary toggles the disclosure. A node with no
   series of its own simply has no chip - the absence is the statement. */
.dpt-label[b-no7208jo9g] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.dpt-count[b-no7208jo9g] {
    flex-shrink: 0;
    margin-left: auto;
    padding: 0 0.35rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-hint);
    background: var(--neutral-fill-secondary-rest);
}

button.dpt-count[b-no7208jo9g] {
    border: none;
    cursor: pointer;
}

button.dpt-count:hover[b-no7208jo9g],
button.dpt-count:focus-visible[b-no7208jo9g] {
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-secondary-hover);
}

.dpt-count--selected[b-no7208jo9g] {
    color: var(--neutral-foreground-rest);
    font-weight: 600;
}
/* /Components/Application/Shared/DomicileLocationEditor.razor.rz.scp.css */
/* DomicileLocationEditor — read-only derived-location display; the editable case
   delegates to the shared LocationPicker (same picker as the Home form). */

.domicile-flag[b-qsrfjapioi] {
    width: 22px;
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2);
}

.domicile-field-label[b-qsrfjapioi] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 6px;
}

/* ── Derived (read-only) domicile location ── */
.domicile-derived-location[b-qsrfjapioi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 5px;
    background: var(--neutral-fill-secondary-rest, rgba(0, 0, 0, 0.04));
    font-weight: 600;
    width: fit-content;
}
/* /Components/Application/Shared/DomicileTaxAllocationPanel.razor.rz.scp.css */
/* DomicileTaxAllocationPanel — non-interactive status cards for the derived
   display/booking rule. */

.domicile-alloc[b-fyjrpvhmds] {
    width: 100%;
}

.domicile-alloc-cards[b-fyjrpvhmds] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.domicile-alloc-card[b-fyjrpvhmds] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 8px;
    background: var(--neutral-fill-stealth-rest);
    cursor: default;
}

.domicile-alloc-card__title[b-fyjrpvhmds] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}
/* /Components/Application/Shared/EffectiveAffordabilitySection.razor.rz.scp.css */
/* ── Tragbarkeits-Bar + StatCards (kopiert aus StandardFinancingPanel.razor.css;
      scoped CSS ist komponentengebunden, daher die für diese Section nötigen Regeln
      hier dupliziert). ───────────────────────────────────────────────────────── */
.fin-afford-head[b-tx9znro6p5] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.74rem;
    color: var(--neutral-foreground-rest);
    margin: 0.45rem 0 0.15rem;
    font-variant-numeric: tabular-nums;
}

.fin-afford-head > span:last-child[b-tx9znro6p5] {
    font-weight: 700;
    font-size: 0.85rem;
}

.fin-bar[b-tx9znro6p5] {
    position: relative;
    display: flex;
    width: 100%;
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}

.fin-afford-bar[b-tx9znro6p5] {
    height: 30px;
}

.fin-income-zone[b-tx9znro6p5] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: color-mix(in srgb, var(--w4l-income-accent) 16%, transparent);
    border-right: 2px solid var(--w4l-income-accent);
}

.fin-segs[b-tx9znro6p5] {
    position: absolute;
    inset: 0;
    display: flex;
}

.fin-bar .seg[b-tx9znro6p5] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

.seg-int[b-tx9znro6p5] { background: var(--w4l-bar-strong); }
.seg-amo[b-tx9znro6p5] { background: var(--w4l-bar-mid); }
.seg-mnt[b-tx9znro6p5] { background: var(--w4l-bar-soft); }

.fin-marker[b-tx9znro6p5] {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 0;
    border-left: 2px dashed var(--neutral-foreground-rest);
    pointer-events: none;
}

.fin-ok[b-tx9znro6p5]   { color: var(--w4l-positive); }
.fin-over[b-tx9znro6p5] { color: var(--w4l-negative); }

.fin-legend[b-tx9znro6p5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.85rem;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--neutral-foreground-rest);
}

.fin-legend .dot[b-tx9znro6p5] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.fin-dot-income[b-tx9znro6p5] {
    background: color-mix(in srgb, var(--w4l-income-accent) 25%, transparent);
    border: 1px solid var(--w4l-income-accent);
}

.fin-legend-marker[b-tx9znro6p5] { opacity: 0.8; }

.fin-stats[b-tx9znro6p5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    margin-top: 0.5rem;
}

.fin-stat-card[b-tx9znro6p5] {
    flex: 1 1 0;
    min-width: 130px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
}

.fin-stat-label[b-tx9znro6p5] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
}

.fin-stat-value[b-tx9znro6p5] {
    font-size: 22px;
    font-weight: 700;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fin-stat-sub[b-tx9znro6p5] {
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.fit-good[b-tx9znro6p5]    { color: var(--w4l-positive); }
.fit-caution[b-tx9znro6p5] { color: var(--w4l-negative); }
/* /Components/Application/Shared/ExampleScenarioBanner.razor.rz.scp.css */
/* Dezente Statusleiste — Farbe wie die Edit-Panel-Fläche (--neutral-fill-secondary,
   W4L.Web/CLAUDE.md "Struktur im Arbeitsbereich"), kleiner Radius, kein Schatten. */
.w4l-example-banner[b-cg1od28z19] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-hint);
    font-size: 0.85rem;
}
/* /Components/Application/Shared/FinanceStepSection.razor.rz.scp.css */
/* ── FinanceStepSection — banale Section mit Status-Chip in der Titelzeile
      (das frühere Schritt-Chrome ①–⑤/Collapse/Rail ist 2026-07-16 entfernt). ── */

.fss-chip[b-t073msvcbd] {
    flex: none;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.fss-chip--ok[b-t073msvcbd] {
    color: var(--w4l-positive);
    border-color: color-mix(in srgb, var(--w4l-positive) 45%, transparent);
    background: color-mix(in srgb, var(--w4l-positive) 10%, transparent);
}

.fss-chip--warn[b-t073msvcbd] {
    color: var(--warning-foreground-rest, #b8860b);
    border-color: color-mix(in srgb, var(--warning-foreground-rest, #b8860b) 45%, transparent);
    background: color-mix(in srgb, var(--warning-foreground-rest, #b8860b) 10%, transparent);
}

.fss-chip--bad[b-t073msvcbd] {
    color: var(--w4l-negative);
    border-color: color-mix(in srgb, var(--w4l-negative) 45%, transparent);
    background: color-mix(in srgb, var(--w4l-negative) 10%, transparent);
}

.fss-chip--pending[b-t073msvcbd] {
    color: var(--neutral-foreground-hint);
    border-color: var(--neutral-stroke-rest);
    background: var(--neutral-layer-2);
}
/* /Components/Application/Shared/GanttResidenceTimeline.razor.rz.scp.css */
/* GanttResidenceTimeline — scoped CSS. Both sections render via the shared GanttTimeline, so this
   only styles the bits injected into its Label/Bar templates plus the section titles. */

.grt[b-jlvzoahnaf] {
    width: 100%;
    font-size: 0.8125rem;
}

.grt-sectiontitle[b-jlvzoahnaf] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 4px 0 6px;
}

.grt-sectiontitle-2[b-jlvzoahnaf] {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

/* Owner chip + Auto badge in the overview label. */
.grt-owner-chip[b-jlvzoahnaf] {
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--chip, var(--neutral-foreground-hint));
    border: 1px solid color-mix(in srgb, var(--chip, var(--neutral-stroke-rest)) 55%, transparent);
    border-radius: 8px;
    padding: 0 5px;
    line-height: 1.4;
}

.grt-auto[b-jlvzoahnaf] {
    flex-shrink: 0;
    margin-left: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 3px;
    padding: 0 3px;
}

/* Stealth deep-link button on an overview bar label: open the object on its editing page
   (home → Homes, rent → Budget). Faint until hovered, like other stealth header icons. */
.grt-open[b-jlvzoahnaf] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 1px;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    opacity: 0.55;
    border-radius: 3px;
}
.grt-open:hover[b-jlvzoahnaf] { opacity: 1; color: var(--accent-fill-rest); }
.grt-open:focus-visible[b-jlvzoahnaf] { outline: 2px solid var(--accent-fill-rest); outline-offset: 1px; opacity: 1; }

/* Phase row label bits (domicile section): the "customized plan" badge doubling as the
   reset-to-automatic action. */
.grt-reset[b-jlvzoahnaf] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 4px;
    margin: 0;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}
.grt-reset:hover[b-jlvzoahnaf] { color: var(--accent-fill-rest); border-color: var(--accent-fill-rest); }
.grt-reset:focus-visible[b-jlvzoahnaf] { outline: 2px solid var(--accent-fill-rest); outline-offset: 1px; }

/* Domicile segment bands inside a phase bar: a flex row whose children grow in proportion to each
   segment's year span, filling the bar. Each band is styled to be PIXEL-IDENTICAL to an overview
   GanttTimeline bar (same 1.4px owner border, radius, padding, height, font) — so a phase reads as a
   contiguous row of residence bars. The container is also the per-phase drag track for the knobs. */
.grt-bands[b-jlvzoahnaf] {
    position: relative;
    width: 100%;
    align-self: stretch;
}

.grt-band[b-jlvzoahnaf] {
    position: absolute;
    top: 0;
    bottom: 0;
    /* left/width set inline (percent of the phase span — identical math to the split handle). */
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1.4px solid currentColor; /* currentColor = the band's owner colour (set inline) */
    font-size: 0.75rem;
    font-weight: 500;
}
/* Round only the outer corners (first/last segment); internal joins stay square so the two adjacent
   owner-coloured borders form a crisp divider centred exactly on the boundary (under the handle). */
.grt-band-first[b-jlvzoahnaf] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.grt-band-last[b-jlvzoahnaf] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.grt-bands-editable .grt-band[b-jlvzoahnaf] { cursor: pointer; }
.grt-bands-editable .grt-band:hover[b-jlvzoahnaf] { filter: brightness(1.08); }
.grt-band-selected[b-jlvzoahnaf] { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; z-index: 1; }

.grt-band-flag[b-jlvzoahnaf] {
    width: 15px; height: 11px; object-fit: contain; border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25); flex-shrink: 0;
}
.grt-band-name[b-jlvzoahnaf] {
    color: inherit; /* owner colour, like the overview bar text */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Split handle (draggable; class names match residenceHtmlTrack.js: .hrt-knob / .hrt-bubble).
   No line — just a round white knob like the GanttTimeline time-handles, centred on the split. ── */
.hrt-knob[b-jlvzoahnaf] { position: absolute; top: 0; bottom: 0; width: 0; cursor: ew-resize; z-index: 3; touch-action: none; }
.hrt-knob-dot[b-jlvzoahnaf] {
    position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--neutral-layer-1); border: 1.5px solid var(--neutral-foreground-rest);
}
.hrt-knob:hover .hrt-knob-dot[b-jlvzoahnaf] { transform: translate(-50%, -50%) scale(1.18); }

/* Derived domicile switch (auto flip inside an overlap window): hollow dashed dot — the switch
   currently follows the home purchase automatically; dragging it pins the move year. */
.hrt-knob-derived .hrt-knob-dot[b-jlvzoahnaf] {
    background: transparent;
    border-style: dashed;
    border-color: var(--neutral-foreground-hint);
}
.hrt-knob-derived:hover .hrt-knob-dot[b-jlvzoahnaf] { border-color: var(--neutral-foreground-rest); }
.hrt-bubble[b-jlvzoahnaf] {
    position: absolute; left: 50%; top: -18px; transform: translateX(-50%); visibility: hidden;
    background: var(--neutral-foreground-rest); color: var(--neutral-layer-1);
    font-size: 0.7rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grösserer Dot als sichtbare Affordance. */
@media (pointer: coarse) {
    .hrt-knob[b-jlvzoahnaf]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        right: -16px;
    }

    .hrt-knob-dot[b-jlvzoahnaf] { width: 18px; height: 18px; }
}
/* /Components/Application/Shared/InvestmentStrategyTimeline.razor.rz.scp.css */
/* InvestmentStrategyTimeline — scoped CSS. Styles the bands + split knobs injected into the shared
   GanttTimeline's Bar/Label templates. Mirrors RiskProfileTimeline's band/knob look (flat preset
   tint instead of a per-year fit gradient). */

.ist[b-idw4da4zmn] {
    width: 100%;
}

.ist-owner-chip[b-idw4da4zmn] {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--chip, var(--neutral-foreground-hint));
    line-height: 1;
}

/* In-bar strategy bands: absolutely positioned by percent of the lane span; the container doubles
   as the per-lane drag track for the split knobs. */
.ist-bands[b-idw4da4zmn] {
    position: relative;
    width: 100%;
    align-self: stretch;
}

.ist-band[b-idw4da4zmn] {
    position: absolute;
    top: 0;
    bottom: 0;
    /* left/width set inline (percent of the lane span — identical math to the split knob). */
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1.4px solid var(--neutral-stroke-strong-rest); /* subtle, closer to text; theme-adaptive */
    font-size: 0.75rem;
    font-weight: 400;
    cursor: pointer;
}

.ist-band:hover[b-idw4da4zmn] { filter: brightness(1.08); }

/* Round only outer corners so internal joins read as crisp dividers under the knobs. */
.ist-band-first[b-idw4da4zmn] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.ist-band-last[b-idw4da4zmn] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.ist-band-selected[b-idw4da4zmn] { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; z-index: 1; }

.ist-band-name[b-idw4da4zmn] {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Split knob (draggable; class names match residenceHtmlTrack.js: .hrt-knob / .hrt-bubble). ── */
.hrt-knob[b-idw4da4zmn] { position: absolute; top: 0; bottom: 0; width: 0; cursor: ew-resize; z-index: 3; touch-action: none; }

.hrt-knob-dot[b-idw4da4zmn] {
    position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--neutral-layer-1); border: 1.5px solid var(--neutral-foreground-rest);
}

.hrt-knob:hover .hrt-knob-dot[b-idw4da4zmn] { transform: translate(-50%, -50%) scale(1.18); }

.hrt-bubble[b-idw4da4zmn] {
    position: absolute; left: 50%; top: -18px; transform: translateX(-50%); visibility: hidden;
    background: var(--neutral-foreground-rest); color: var(--neutral-layer-1);
    font-size: 0.7rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grösserer Dot als sichtbare Affordance. */
@media (pointer: coarse) {
    .hrt-knob[b-idw4da4zmn]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        right: -16px;
    }

    .hrt-knob-dot[b-idw4da4zmn] { width: 18px; height: 18px; }
}
/* /Components/Application/Shared/InvestTimeline.razor.rz.scp.css */
/* InvestTimeline — scoped CSS. Styles the bands + split knobs injected into the shared
   GanttTimeline's Bar/Label templates. Mirrors InvestmentStrategyTimeline's band/knob look so the
   bands fill the flex bar height (align-self: stretch + top/bottom anchoring, NOT height:100% which
   collapses) and the draggable boundary knobs are actually visible (the .hrt-knob CSS must live in THIS
   component's scope — CSS isolation does not share it across components). */

.cdt[b-l6y88yl2r1] {
    width: 100%;
}

/* In-bar deployment bands: absolutely positioned by percent of the lane span; the container doubles
   as the per-lane drag track for the split knobs. */
.cdt-bands[b-l6y88yl2r1] {
    position: relative;
    width: 100%;
    align-self: stretch;
}

.cdt-band[b-l6y88yl2r1] {
    position: absolute;
    top: 0;
    bottom: 0;
    /* left/width set inline (percent of the lane span — identical math to the split knob). */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1.4px solid var(--neutral-stroke-strong-rest); /* subtle, closer to text; theme-adaptive */
    font-size: 0.75rem;
    font-weight: 400;
    cursor: pointer;
}

.cdt-band:hover[b-l6y88yl2r1] { filter: brightness(1.08); }

.cdt-band-first[b-l6y88yl2r1] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.cdt-band-last[b-l6y88yl2r1] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.cdt-band-selected[b-l6y88yl2r1] { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; z-index: 1; }

.cdt-band-name[b-l6y88yl2r1] {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    position: relative; /* stays above the per-year tint cells */
    z-index: 1;
}

/* Per-year tint cell: absolute slice of the band, green alpha scales with the CHF invested that
   year (inline background); the band's overflow:hidden clips it to the rounded corners. */
.cdt-yearcell[b-l6y88yl2r1] {
    position: absolute;
    top: 0;
    bottom: 0;
}

/* ── Split knob (draggable; class names match residenceHtmlTrack.js: .hrt-knob / .hrt-bubble). ── */
.hrt-knob[b-l6y88yl2r1] { position: absolute; top: 0; bottom: 0; width: 0; cursor: ew-resize; z-index: 3; touch-action: none; }

.hrt-knob-dot[b-l6y88yl2r1] {
    position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--neutral-layer-1); border: 1.5px solid var(--neutral-foreground-rest);
}

.hrt-knob:hover .hrt-knob-dot[b-l6y88yl2r1] { transform: translate(-50%, -50%) scale(1.18); }

.hrt-bubble[b-l6y88yl2r1] {
    position: absolute; left: 50%; top: -18px; transform: translateX(-50%); visibility: hidden;
    background: var(--neutral-foreground-rest); color: var(--neutral-layer-1);
    font-size: 0.7rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grösserer Dot als sichtbare Affordance. */
@media (pointer: coarse) {
    .hrt-knob[b-l6y88yl2r1]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        right: -16px;
    }

    .hrt-knob-dot[b-l6y88yl2r1] { width: 18px; height: 18px; }
}
/* /Components/Application/Shared/LiabilitiesKpiRow.razor.rz.scp.css */
/* ── LiabilitiesKpiRow — Entschuldungs-Kennzahlen-Cards (Pattern: MortgageKpiRow) ── */
.lkr[b-85a6n8a7br] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
}

.lkr-card[b-85a6n8a7br] {
    flex: 1 1 0;
    min-width: 130px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
}

.lkr-label[b-85a6n8a7br] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
}

.lkr-value[b-85a6n8a7br] {
    font-size: 22px;
    font-weight: 700;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lkr-sub[b-85a6n8a7br] {
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
/* /Components/Application/Shared/LifecycleStepper.razor.rz.scp.css */
/* ── Chevron stepper (Lebenszyklus: Object → Finance → Use → Sell) ─────────
   Aus HomeForm.razor.css extrahiert (Shared: HomeForm + RentalForm). Pro Chevron
   ein linkes SVG-Cap (V-Kerbe), rechteckiger Body (top/bottom borders) und ein
   rechtes SVG-Cap (Spitze). 8 px flex gap, kein Overlap. */

.hf-stepper[b-2njqoad3xc] {
    display: flex;
    gap: 8px;
    width: 100%;
    margin: 8px 0 16px 0;
}

.hf-chevron[b-2njqoad3xc] {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: stretch;
    height: 60px;
    color: var(--c-text);
    font-family: inherit;
    font-size: var(--type-ramp-plus-1-font-size);
    font-weight: 500;
    transition: color 150ms ease;
}

.hf-cap[b-2njqoad3xc] {
    flex: 0 0 18px;
    height: 60px;
    display: block;
    overflow: visible;
}

.hf-fill[b-2njqoad3xc] {
    fill: var(--c-fill);
    transition: fill 150ms ease;
}

.hf-stroke[b-2njqoad3xc] {
    fill: none;
    stroke: var(--c-border);
    stroke-width: 2;
    stroke-linejoin: miter;
    stroke-linecap: butt;
    stroke-miterlimit: 4;
    transition: stroke 150ms ease;
}

.hf-body[b-2njqoad3xc] {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
    background: var(--c-fill);
    border-top:    2px solid var(--c-border);
    border-bottom: 2px solid var(--c-border);
    transition: background-color 150ms ease, border-color 150ms ease;
}

.hf-label[b-2njqoad3xc] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── State palette ──────────────────────────────────────────── */

.hf-chevron.is-pending[b-2njqoad3xc] {
    --c-fill:   var(--neutral-layer-2);
    --c-border: var(--neutral-stroke-divider-rest);
    --c-text:   var(--neutral-foreground-hint);
}

.hf-chevron.is-done[b-2njqoad3xc] {
    --c-fill:   color-mix(in srgb, var(--accent-fill-rest)  8%, var(--neutral-layer-2));
    --c-border: color-mix(in srgb, var(--accent-fill-rest) 30%, var(--neutral-stroke-divider-rest));
    --c-text:   var(--neutral-foreground-rest);
}

.hf-chevron.is-active[b-2njqoad3xc] {
    --c-fill:   color-mix(in srgb, var(--accent-fill-rest) 12%, var(--neutral-layer-1));
    --c-border: var(--accent-fill-rest);
    --c-text:   var(--accent-foreground-rest);
}

.hf-chevron[aria-selected="true"][b-2njqoad3xc] {
    font-weight: 600;
}

.hf-chevron:hover:not(.is-active)[b-2njqoad3xc] {
    --c-fill: color-mix(in srgb, var(--accent-fill-rest) 12%, var(--neutral-layer-2));
    --c-text: var(--neutral-foreground-rest);
}

.hf-chevron:focus-visible[b-2njqoad3xc] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

/* ≤639px: kompaktere Schrift; ≤479px: nur Icons (aria-label bleibt). */
@media (max-width: 639px) {
    .hf-chevron[b-2njqoad3xc] {
        font-size: var(--type-ramp-base-font-size);
    }
}

@media (max-width: 479px) {
    .hf-label[b-2njqoad3xc] {
        display: none;
    }
}
/* /Components/Application/Shared/LocationPicker.razor.rz.scp.css */
/* LocationPicker — flag-chip canton picker + municipality combobox.
   Styles mirror DomicileManager's picker (scoped CSS does not cross components). */

.location-field-label[b-8byq2dfwea] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 6px;
}

/* Dynamic wrap — as many chips per row as fit. */
.flag-chip-wrap[b-8byq2dfwea] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.flag-chip[b-8byq2dfwea] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 56px;
    box-sizing: border-box;
    padding: 4px 2px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 5px;
    background: var(--neutral-fill-stealth-rest);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.flag-chip:hover[b-8byq2dfwea] {
    background: var(--neutral-fill-secondary-hover);
}

.flag-chip img[b-8byq2dfwea] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}

.flag-chip span[b-8byq2dfwea] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

/* B7 — visible automatik: the canton switch picked the cantonal capital. */
.municipality-auto-hint[b-8byq2dfwea] {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--neutral-foreground-hint);
}

.flag-chip-selected[b-8byq2dfwea] {
    border-color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}
/* /Components/Application/Shared/ModeCardGroup.razor.rz.scp.css */
.mcg[b-gqo9g15zmq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
    min-inline-size: 0;
}

.mcg-card[b-gqo9g15zmq] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    background: var(--neutral-fill-stealth-rest);
    cursor: pointer;
    transition: border-color 0.1s ease, background 0.1s ease;
    min-height: 96px;
    box-sizing: border-box;
}

.mcg-card:hover[b-gqo9g15zmq] {
    background: var(--neutral-fill-stealth-hover);
}

.mcg-card--on[b-gqo9g15zmq] {
    border-color: var(--accent-fill-rest);
    background: var(--neutral-layer-1);
    box-shadow: inset 0 0 0 1px var(--accent-fill-rest);
}

.mcg-card--disabled[b-gqo9g15zmq] {
    cursor: default;
    opacity: 0.6;
}

/* Visually hidden but focusable/announceable radio. */
.mcg-input[b-gqo9g15zmq] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Forward the hidden input's focus ring onto the card. */
.mcg-card:has(.mcg-input:focus-visible)[b-gqo9g15zmq] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.mcg-head[b-gqo9g15zmq] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mcg-title[b-gqo9g15zmq] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.mcg-badge[b-gqo9g15zmq] {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-fill-rest) 18%, transparent);
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.mcg-glyph[b-gqo9g15zmq] {
    display: block;
    height: 26px;
}

/* Glyph fragments come from the caller — scoped attribute differs, so reach through. */
.mcg-glyph[b-gqo9g15zmq]  svg {
    display: block;
    height: 100%;
}

.mcg-desc[b-gqo9g15zmq] {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--neutral-foreground-hint);
}
/* /Components/Application/Shared/MortgageDetailEditor.razor.rz.scp.css */
/* ── MortgageDetailEditor — selektions-getriebener Tranchen-Editor ── */
.mde[b-t52d6bza1k] {
    width: 100%;
}

/* Verschachteltes Edit-Panel (Tranche im Home-Panel): kompakteres Padding als das
   Default-w4l-edit-panel — und statt der gestapelten (dunkleren) Panel-Füllung der
   BASIS-Seitengrund (Sichttest-Entscheid 2026-07-16): das Inset hebt sich HELL vom
   gefüllten Home-Panel ab, gleiche Farbe wie der Seitenhintergrund. */
.mde-panel[b-t52d6bza1k] {
    padding: 0.85rem 1rem 1rem;
    background: var(--fill-color);
}

/* Zwei Inhalts-Blöcke (Amortisation | Hypotheken) — Haarlinie ZWISCHEN den Blöcken,
   keine Karte pro Block (Docs/DesignBacklog.md §2, .w4l-row-Prinzip). ::deep, weil der
   erste Block ein FluentGrid ist (Kind-Komponente ⇒ ohne Scope-Attribut). */
.mde-panel[b-t52d6bza1k]  .mde-block + .mde-block {
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    margin-top: 1rem;
    padding-top: 0.85rem;
}

/* ── Tranchen-Header: Findings als EIN Bullet-Block (MortgageFindingsBlock), volle Breite ── */
.mde-tr-findings[b-t52d6bza1k] {
    width: 100%;
    margin-top: 0.5rem;
}

/* ── Segment-Sektion (Hypotheken IN der Tranche) ── */
.mde-seg-section[b-t52d6bza1k] {
    margin-top: 0.9rem;
}

/* Kleine Abschnitts-Titel (IconTitle H6) — Abstand zum folgenden Inhalt. */
.mde-sec-title[b-t52d6bza1k] {
    margin-bottom: 0.4rem;
}

/* Laufzeit-Slider der Plan-Generierung — flext zwischen Produkt-Pills und Button. */
.mde-genplan-term[b-t52d6bza1k] {
    flex: 1 1 14rem;
    min-width: 12rem;
    max-width: 22rem;
}

.mde-seg-count[b-t52d6bza1k] {
    display: inline-block;
    min-width: 1.2rem;
    text-align: center;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 0.05rem 0.3rem;
    border-radius: 999px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-divider-rest);
}

/* ── Block-Chip-Leiste: ein klickbarer Chip pro Hypothek (Detail-Navigation zur
   Master-Selektion im Gantt oben) + nicht-klickbarer Payoff-End-Chip. ── */
.mde-seg-chips[b-t52d6bza1k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0.5rem 0 0.25rem;
}

.mde-seg-chip[b-t52d6bza1k] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

button.mde-seg-chip:hover[b-t52d6bza1k] {
    background: var(--neutral-fill-stealth-hover);
}

/* Aktiver Chip: Tranchen-Farbfaden (Split-Slider ↔ Gantt-Lane ↔ Inset-Rand ↔ Chip). */
.mde-seg-chip--sel[b-t52d6bza1k] {
    border-color: var(--chip-accent, var(--accent-fill-rest));
    background: color-mix(in srgb, var(--chip-accent, var(--accent-fill-rest)) 12%, transparent);
    font-weight: 600;
}

/* Payoff-End-Chip: reine Anzeige (Blockende-Tilgung), Warn-Valenz wie mde-chip--warn. */
.mde-seg-chip--end[b-t52d6bza1k] {
    cursor: help;
    color: var(--w4l-warn-fg, #8a5a00);
    background: var(--w4l-warn-bg, rgba(240, 173, 78, 0.16));
    border: 1px dashed var(--w4l-warn-fg, #c98a00);
}

/* ── Segment-Inset: eingerückt, linker Akzent-Rand in der Tranchen-Farbe — bewusst OHNE
   Hintergrund/Radius (keine «Card in Card»), die Einrückung + der Farbstreifen genügen. ── */
.mde-seg-inset[b-t52d6bza1k] {
    margin-top: 0.5rem;
    margin-left: 0.75rem;
    padding: 0.25rem 0 0.35rem 0.75rem;
    border-left: 3px solid var(--accent-fill-rest);
}

/* Laufzeit-/Zins-Container im Inset (Slider halbe Breite). */
.mde-seg-term[b-t52d6bza1k] {
    flex: 1 1 50%;
    max-width: 50%;
    min-width: 14rem;
}

.mde-seg-rate[b-t52d6bza1k] {
    flex: 1 1 50%;
    max-width: 50%;
    min-width: 14rem;
}

/* Mortgage-Inset-Kopf: Titel + Header-Aktions-Icons (Block-Navigation über die Chips). */
.mde-seg-head[b-t52d6bza1k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.mde-seg-spacer[b-t52d6bza1k] { flex: 1 1 auto; }

.mde-seg-title[b-t52d6bza1k] {
    font-size: 0.82rem;
    font-weight: 600;
}

.mde-seg-row[b-t52d6bza1k] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.mde-attach-hint[b-t52d6bza1k] {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.68rem;
    color: var(--neutral-foreground-hint);
}


/* Status-Chips (Produkt-Warnung / Interest-only-Bestätigung) */
.mde-chip[b-t52d6bza1k] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.1;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    margin-top: 0.35rem;
}

.mde-chip--warn[b-t52d6bza1k] {
    color: var(--w4l-warn-fg, #8a5a00);
    background: var(--w4l-warn-bg, rgba(240, 173, 78, 0.16));
    border: 1px dashed var(--w4l-warn-fg, #c98a00);
}

.mde-chip--ok[b-t52d6bza1k] {
    color: var(--w4l-ok-fg, #1f7a3d);
    background: var(--w4l-ok-bg, rgba(46, 160, 87, 0.14));
    border: 1px solid transparent;
}

/* Mortgage plan: Produkt-Pills + Laufzeit-Slider + Generate/Extend in einer Zeile
   (im Amortisations-Block, oberhalb der Haarlinie zur Hypotheken-Sektion). */
.mde-genplan[b-t52d6bza1k] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
/* /Components/Application/Shared/MortgageFindingsBlock.razor.rz.scp.css */
/* ── MortgageFindingsBlock — ein Block, Bullet-Zeilen, 100 % Breite ── */
.mfb[b-initjj9vdq] {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
    background: var(--neutral-layer-2);
    padding: 0.5rem 0.75rem;
}

/* Rahmen-Tönung nach höchstem Schweregrad — dezent, die Punkte tragen das Detail. */
.mfb--bad[b-initjj9vdq] {
    border-color: color-mix(in srgb, var(--w4l-negative) 45%, transparent);
    background: color-mix(in srgb, var(--w4l-negative) 6%, var(--neutral-layer-2));
}

.mfb--warn[b-initjj9vdq] {
    border-color: color-mix(in srgb, var(--warning-foreground-rest, #b8860b) 45%, transparent);
    background: color-mix(in srgb, var(--warning-foreground-rest, #b8860b) 6%, var(--neutral-layer-2));
}

.mfb--info[b-initjj9vdq] {
    border-color: color-mix(in srgb, var(--accent-fill-rest) 35%, transparent);
    background: color-mix(in srgb, var(--accent-fill-rest) 5%, var(--neutral-layer-2));
}

.mfb-list[b-initjj9vdq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mfb-item[b-initjj9vdq] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--neutral-foreground-rest);
}

.mfb-dot[b-initjj9vdq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    align-self: center;
}

.mfb-dot--bad[b-initjj9vdq]  { background: var(--w4l-negative); }
.mfb-dot--warn[b-initjj9vdq] { background: var(--warning-foreground-rest, #b8860b); }
.mfb-dot--info[b-initjj9vdq] { background: var(--accent-fill-rest); }
/* /Components/Application/Shared/MortgageStructureTimeline.razor.rz.scp.css */
/* ── MortgageStructureTimeline — Zinsbindungs-Blöcke + Drag-Knobs im BarTemplate der
   geteilten GanttTimeline-Shell (leak-frei, native Inhalte). Label-Spalte, Jahres-Skala
   und ⚑-Marker kommen von der Shell (gantt-*-Klassen). ── */
.mst[b-pf6ij7sp03] {
    margin: 0.25rem 0;
}

.mst-empty[b-pf6ij7sp03] {
    font-size: 0.8rem;
    opacity: 0.75;
}

/* Band-Container = Drag-Track (hrt-track-area) über die volle Bar-Höhe. */
.mst-bands[b-pf6ij7sp03] {
    position: relative;
    width: 100%;
    align-self: stretch;
    min-height: 30px;
}

/* 0-Tranche (Voll-Cash, §14): Struktur bleibt sichtbar, aber gedimmt. */
.mst-bands--zero[b-pf6ij7sp03] {
    opacity: 0.4;
    filter: saturate(0.4);
}

/* Lane endet VOR dem Objekt (Schuld vollständig amortisiert): harter End-Cap am rechten
   Rand + ✓ — die 2. Hypothek verschwindet sichtbar, wenn die 66⅔-Linie erreicht ist. */
.mst-bands--ends[b-pf6ij7sp03] {
    border-right: 2px solid var(--w4l-ok-fg, #2ea057);
}

/* ✓ RECHTS der grünen End-Linie (erst die Linie = Amortisationsende, dann der Haken). */
.mst-bands--ends[b-pf6ij7sp03]::after {
    content: "✓";
    position: absolute;
    top: -2px;
    left: calc(100% + 3px);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--w4l-ok-fg, #2ea057);
    line-height: 1;
}

/* Schuldenfrei-/Ziel-Marker IN der Lane: grüne Linie am Ende des letzten Amortisations-
   jahres + ✓ rechts davon (gleiche Sprache wie der --ends-Cap des Trägers). Klicks fallen
   zur Row/den Blöcken durch. */
.mst-amort-end[b-pf6ij7sp03] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px solid var(--w4l-ok-fg, #2ea057);
    cursor: help; /* Tooltip erklärt schuldenfrei/Ziel; Klick bubbelt zur Row (Lane-Selektion) */
    z-index: 2;
}

.mst-amort-end[b-pf6ij7sp03]::after {
    content: "✓";
    position: absolute;
    top: -2px;
    left: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--w4l-ok-fg, #2ea057);
    line-height: 1;
}

/* Payoff-Warn-Tick: Blockende-Tilgung vor dem Perioden-Ende (Plan zu kurz) — gleiche
   Marker-Sprache wie .mst-amort-end, aber Warn-Valenz + ↦ statt ✓. */
.mst-payoff-end[b-pf6ij7sp03] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px dashed var(--w4l-warn-fg, #c98a00);
    cursor: help;
    z-index: 2;
}

.mst-payoff-end[b-pf6ij7sp03]::after {
    content: "↦";
    position: absolute;
    top: -2px;
    left: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--w4l-warn-fg, #c98a00);
    line-height: 1;
}

/* Amortisations-Glyph im kompakten Lane-Label (Details im Tooltip). */
.mst-amort-glyph[b-pf6ij7sp03] {
    margin-left: 0.25rem;
    font-weight: 700;
    color: var(--w4l-ok-fg, #2ea057);
    cursor: help;
}

/* Warn-Punkt (höchster Finding-Level der Tranche) im Lane-Label */
.mst-warn-dot[b-pf6ij7sp03] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    margin-right: 0.25rem;
}

.mst-warn-dot--2[b-pf6ij7sp03] { background: var(--w4l-negative, #c0392b); }
.mst-warn-dot--1[b-pf6ij7sp03] { background: var(--warning-foreground-rest, #b8860b); }
.mst-warn-dot--0[b-pf6ij7sp03] { background: var(--accent-fill-rest, #2563eb); }

/* Zinsbindungs-Blöcke innerhalb der Bar */
.mst-block[b-pf6ij7sp03] {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    min-width: 0;
    border: 1px solid #2f8f68; /* Fixed = grün (GlobalSeriesColors.Green) */
    border-radius: 4px;
    background: rgba(47, 143, 104, 0.18);
    cursor: pointer;
    font-size: 0.62rem;
    line-height: 1.1;
    color: inherit;
}

/* SARON = blau (GlobalSeriesColors.SteelBlue) */
.mst-block--saron[b-pf6ij7sp03] {
    border-color: #3f6fa8;
    background: rgba(63, 111, 168, 0.18);
}

/* Klassische variable Hypothek = orange (GlobalSeriesColors.Orange, property-debt cost). */
.mst-block--variable[b-pf6ij7sp03] {
    border-color: #c67a2f;
    background: rgba(198, 122, 47, 0.20);
}

/* Plan-lose Tranche: Engine-Fallback «Variable +1.25pp» sichtbar gemacht — gestrichelt +
   blass = nicht committet; Klick fällt zur Row durch (Lane-Selektion → Generate-CTA). */
.mst-block--auto[b-pf6ij7sp03] {
    border: 1px dashed #c67a2f;
    background: rgba(198, 122, 47, 0.07);
}

.mst-block--auto .mst-block-line1[b-pf6ij7sp03] {
    font-style: italic;
    font-weight: 600;
}

.mst-block--sel[b-pf6ij7sp03] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
    z-index: 1;
}

.mst-block:focus-visible[b-pf6ij7sp03] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
    z-index: 1;
}

.mst-block-line1[b-pf6ij7sp03] {
    font-weight: 700;
    white-space: nowrap;
}

.mst-block-line2[b-pf6ij7sp03] {
    opacity: 0.75;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ── Ziehbare Block-Grenzen (Klassennamen = residenceHtmlTrack.js-Vertrag). ── */
.hrt-knob[b-pf6ij7sp03] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    cursor: ew-resize;
    z-index: 4; /* über Blöcken (--sel hat z-index 1) */
    touch-action: none;
}

.hrt-knob-dot[b-pf6ij7sp03] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 11px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--neutral-layer-1);
    border: 1.5px solid var(--neutral-foreground-rest);
}

.hrt-knob:hover .hrt-knob-dot[b-pf6ij7sp03] {
    transform: translate(-50%, -50%) scale(1.18);
}

.hrt-bubble[b-pf6ij7sp03] {
    position: absolute;
    left: 50%;
    top: -20px;
    transform: translateX(-50%);
    visibility: hidden;
    background: var(--neutral-foreground-rest);
    color: var(--neutral-layer-1);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 5;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grösserer Dot als sichtbare Affordance. */
@media (pointer: coarse) {
    .hrt-knob[b-pf6ij7sp03]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        right: -16px;
    }

    .hrt-knob-dot[b-pf6ij7sp03] { width: 18px; height: 18px; }
}

/* Legende */
.mst-legend[b-pf6ij7sp03] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    margin-top: 0.4rem;
    font-size: 0.68rem;
    color: var(--neutral-foreground-hint);
}

.mst-dot[b-pf6ij7sp03] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.mst-dot-fixed[b-pf6ij7sp03] {
    background: rgba(47, 143, 104, 0.25);
    border: 1px solid #2f8f68;
}

.mst-dot-saron[b-pf6ij7sp03] {
    border: 1px solid #3f6fa8;
    background: rgba(63, 111, 168, 0.25);
}

.mst-dot-variable[b-pf6ij7sp03] {
    border: 1px solid #c67a2f;
    background: rgba(198, 122, 47, 0.25);
}

.mst-dot-auto[b-pf6ij7sp03] {
    border: 1px dashed #c67a2f;
    background: rgba(198, 122, 47, 0.07);
}
/* /Components/Application/Shared/PensionBuyInBarEditor.razor.rz.scp.css */
/* PensionBuyInBarEditor — pure HTML/SVG bar-per-year editor (FAST-leak-free). */

.bie-host[b-bcnxse7l00] {
    /* Full available width: the host is a flex item in the parent's vertical
       FluentStack (align-items: start, not stretch). Without a definite width it
       shrinks to fit and the child SVG's width:100% collapses against an
       indefinite box — the editor then renders far narrower than its siblings
       (the KPI grid sets width:100% explicitly). Mirrors the note in
       PensionFundForm's .pf-panel rule. */
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
}

/* SVG child elements do not carry the isolation scope attribute — reach them via ::deep. */
.bie-host[b-bcnxse7l00]  .bie-handle:focus-visible .bie-grip {
    stroke-width: 3;
}

/* The selected year's handle is emphasised (larger, opaque). */
.bie-host[b-bcnxse7l00]  .bie-handle--selected .bie-grip {
    r: 6.5;
    stroke-width: 3;
}

/* Hover affordance on always-visible handles (incl. empty years at the baseline). */
.bie-host[b-bcnxse7l00]  .bie-handle:hover .bie-grip {
    r: 6.5;
}

/* Touch: grössere unsichtbare Hit-Circles (CSS-r überstimmt das r=12-Attribut)
   + Grip in Hover-Grösse, da es kein Hover gibt (Selected bleibt via stroke-width erkennbar). */
@media (pointer: coarse) {
    .bie-host[b-bcnxse7l00]  .bie-handle circle:not(.bie-grip) { r: 16px; }
    .bie-host[b-bcnxse7l00]  .bie-grip { r: 6.5px; }
}

/* Open-WEF-balance step line (end-of-year levels, informational, aria-hidden). */
.bie-host[b-bcnxse7l00]  .bie-wef-line {
    stroke: var(--w4l-info, #3b82f6);
    stroke-width: 1.5;
    stroke-dasharray: 4 3;
    fill: none;
}
/* /Components/Application/Shared/PhaseFinancingTimeline.razor.rz.scp.css */
/* PhaseFinancingTimeline — scoped CSS. Phase bands in the upper tier carry a soft risk-colour wash
   (fill + border colour set inline per phase — the SAME colour that links the invest-start diamond and
   funding ramp to the phase; kept low-opacity so the lane stays distinct from the fully saturated
   Investment-Strategy lane), the selected phase's risk-tinted funding ramp + the ▲ invest-start markers
   in the lower tier. Knob classes match residenceHtmlTrack.js (.hrt-knob / .hrt-track-area), same as
   the sibling lanes. */

.pft[b-md7smxg4r3] {
    width: 100%;
}

.pft-bands[b-md7smxg4r3] {
    position: relative;
    width: 100%;
    align-self: stretch;
    min-height: 34px; /* two visual tiers: bands (top ~65%) + ramp/markers (bottom ~35%) */
}

/* Consumption-phase bands: upper tier. Fill + border colour are set inline per phase (risk-colour
   wash, zebra-alternating opacity); the values below are only fallbacks. */
.pft-band[b-md7smxg4r3] {
    position: absolute;
    top: 0;
    bottom: 32%;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1.4px solid var(--neutral-stroke-strong-rest);
    background: color-mix(in srgb, var(--neutral-foreground-hint) 10%, transparent);
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.pft-band:hover[b-md7smxg4r3] { filter: brightness(1.12); }

.pft-band-first[b-md7smxg4r3] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.pft-band-last[b-md7smxg4r3] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.pft-band-selected[b-md7smxg4r3] { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; z-index: 1; }

.pft-band-name[b-md7smxg4r3] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    font-size: 0.62rem;
}

/* Retirement anchor: dashed vertical line over the full lane height. */
.pft-marker[b-md7smxg4r3] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1.5px dashed var(--neutral-foreground-hint);
    pointer-events: none;
    z-index: 0;
}

/* Invest-start markers: small ▲ ticks on the lane's bottom edge, tinted per phase risk band. */
.pft-fund-marker[b-md7smxg4r3] {
    position: absolute;
    bottom: 1px;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid; /* colour set inline (risk band) */
    opacity: 0.75;
    pointer-events: none;
    z-index: 1;
}

.pft-fund-marker-selected[b-md7smxg4r3] { opacity: 1; }

/* Funding ramp (selected phase only): lower tier, left→right opacity gradient in the risk colour. */
.pft-ramp[b-md7smxg4r3] {
    position: absolute;
    bottom: 2px;
    height: 26%;
    border-radius: 2px;
    pointer-events: none;
    z-index: 1;
}

/* Present-value label above the invest-start handle (selected phase only). */
.pft-fund-label[b-md7smxg4r3] {
    position: absolute;
    top: 1px;
    transform: translateX(-50%);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--neutral-layer-1) 75%, transparent);
    padding: 0 4px;
    border-radius: 3px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}

/* ── Knobs (contract classes shared with residenceHtmlTrack.js). ── */
.hrt-knob[b-md7smxg4r3] { position: absolute; top: 0; bottom: 0; width: 0; cursor: ew-resize; z-index: 3; touch-action: none; }

/* Boundary knobs centre on the PHASE BAND (top 0..68% of the lane), not the full lane height. */
.hrt-knob-dot[b-md7smxg4r3] {
    position: absolute; left: 50%; top: 34%; width: 12px; height: 12px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--neutral-layer-1); border: 1.5px solid var(--neutral-foreground-rest);
}

.hrt-knob:hover .hrt-knob-dot[b-md7smxg4r3] { transform: translate(-50%, -50%) scale(1.18); }

/* The invest-start knob is a DIAMOND (rotated square) riding the lower tier, tinted per phase —
   visually distinct from the round boundary knobs so the two drags cannot be confused. */
.pft-fund-knob .hrt-knob-dot.pft-fund-dot[b-md7smxg4r3] {
    top: 72%;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
    /* border colour set inline (risk band) */
}

.pft-fund-knob:hover .hrt-knob-dot.pft-fund-dot[b-md7smxg4r3] { transform: translate(-50%, -50%) rotate(45deg) scale(1.18); }

.hrt-bubble[b-md7smxg4r3] {
    position: absolute; left: 50%; top: -18px; transform: translateX(-50%); visibility: hidden;
    background: var(--neutral-foreground-rest); color: var(--neutral-layer-1);
    font-size: 0.7rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grössere Dots als sichtbare Affordance (Rund-Knob UND Fund-Diamant). */
@media (pointer: coarse) {
    .hrt-knob[b-md7smxg4r3]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        right: -16px;
    }

    .hrt-knob-dot[b-md7smxg4r3] { width: 18px; height: 18px; }
}
/* /Components/Application/Shared/PillarThreeContributionsTimeline.razor.rz.scp.css */
/* PillarThreeContributionsTimeline — scoped CSS. Styles the contribution bands + split knobs
   injected into the shared GanttTimeline's Bar/Label templates. Mirrors InvestmentStrategyTimeline's
   band/knob look; the band tint is a cyan scaled by the segment's fill level. */

.p3c[b-y61okwisg2] {
    width: 100%;
}

/* In-bar contribution bands: absolutely positioned by percent of the lane span; the container
   doubles as the per-lane drag track for the split knobs. */
.p3c-bands[b-y61okwisg2] {
    position: relative;
    width: 100%;
    align-self: stretch;
}

.p3c-band[b-y61okwisg2] {
    position: absolute;
    top: 0;
    bottom: 0;
    /* left/width set inline (percent of the lane span — identical math to the split knob). */
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1.4px solid currentColor;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.p3c-band:hover[b-y61okwisg2] { filter: brightness(1.08); }

.p3c-band-first[b-y61okwisg2] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.p3c-band-last[b-y61okwisg2] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.p3c-band-selected[b-y61okwisg2] { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; z-index: 1; }

.p3c-band-name[b-y61okwisg2] {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Split knob (draggable; class names match residenceHtmlTrack.js: .hrt-knob / .hrt-bubble). ── */
.hrt-knob[b-y61okwisg2] { position: absolute; top: 0; bottom: 0; width: 0; cursor: ew-resize; z-index: 3; touch-action: none; }

.hrt-knob-dot[b-y61okwisg2] {
    position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--neutral-layer-1); border: 1.5px solid var(--neutral-foreground-rest);
}

.hrt-knob:hover .hrt-knob-dot[b-y61okwisg2] { transform: translate(-50%, -50%) scale(1.18); }

.hrt-bubble[b-y61okwisg2] {
    position: absolute; left: 50%; top: -18px; transform: translateX(-50%); visibility: hidden;
    background: var(--neutral-foreground-rest); color: var(--neutral-layer-1);
    font-size: 0.7rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grösserer Dot als sichtbare Affordance. */
@media (pointer: coarse) {
    .hrt-knob[b-y61okwisg2]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        right: -16px;
    }

    .hrt-knob-dot[b-y61okwisg2] { width: 18px; height: 18px; }
}
/* /Components/Application/Shared/RatingStars.razor.rz.scp.css */
/* Two stacked copies of the same glyph run: the track in a muted tone, the fill clipped to the
   score. Because both use identical text, the fill lines up exactly without any per-star markup. */
.w4l-stars[b-ls5h3j0jtv] {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    line-height: 1;
    font-size: 14px;
    letter-spacing: 1px;
    vertical-align: middle;
}

.w4l-stars--sm[b-ls5h3j0jtv] {
    font-size: 12px;
    letter-spacing: 0.5px;
}

.w4l-stars-track[b-ls5h3j0jtv] {
    color: var(--neutral-stroke-rest);
}

.w4l-stars-fill[b-ls5h3j0jtv] {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    overflow: hidden;
    color: var(--w4l-rating-star, #e8a33d);
}
/* /Components/Application/Shared/RentalScorecard.razor.rz.scp.css */
/* ── fin-*-Anatomie (StatCards): kopiert aus RentalForm.razor.css / EffectiveAffordabilitySection
   (scoped CSS ist komponentengebunden — Duplikat nötig). ─────────────────── */
.fin-stats[b-oeso14958j] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    margin-top: 0.5rem;
}

.fin-stat-card[b-oeso14958j] {
    flex: 1 1 0;
    min-width: 130px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
}

.fin-stat-label[b-oeso14958j] {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
}

.fin-stat-value[b-oeso14958j] {
    font-size: 22px;
    font-weight: 700;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fin-stat-sub[b-oeso14958j] {
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.fit-good[b-oeso14958j]    { color: var(--w4l-positive); }
.fit-caution[b-oeso14958j] { color: var(--w4l-negative); }

/* ── Responsive: KPI-Karten 4 → 2×2 (sm) → 1 Spalte (xs). ────────────────── */
@media (max-width: 639px) {
    .fin-stats .fin-stat-card[b-oeso14958j] {
        flex-basis: calc(50% - 4px);
    }
}

@media (max-width: 479px) {
    .fin-stats .fin-stat-card[b-oeso14958j] {
        flex-basis: 100%;
    }
}
/* /Components/Application/Shared/ReportTemplateEditor.razor.rz.scp.css */
/* ReportTemplateEditor — per-tenant report structure editor (chapters, cover, header/footer,
   contact lines) with a resolved-order preview list. Native HTML only (FAST-leak rule). */

.rte[b-n0h99mhu2g] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 24px;
    font-size: var(--type-ramp-base-font-size);
}

.rte-title[b-n0h99mhu2g] {
    margin: 0 0 12px 0;
    font-size: var(--type-ramp-plus-1-font-size);
    color: var(--neutral-foreground-rest);
}

.rte-subtitle[b-n0h99mhu2g] {
    margin: 20px 0 8px 0;
    font-size: var(--type-ramp-base-font-size);
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.rte-field[b-n0h99mhu2g] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.rte-label[b-n0h99mhu2g] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.rte-toggle[b-n0h99mhu2g] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    color: var(--neutral-foreground-rest);
}

.rte-text[b-n0h99mhu2g],
.rte-textarea[b-n0h99mhu2g] {
    padding: 6px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}

.rte-textarea[b-n0h99mhu2g] {
    resize: vertical;
}

.rte-table[b-n0h99mhu2g] {
    width: 100%;
    border-collapse: collapse;
}

.rte-row[b-n0h99mhu2g] {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.rte-row--appendix[b-n0h99mhu2g] {
    background: var(--neutral-fill-secondary-rest);
}

.rte-cell-check[b-n0h99mhu2g] {
    width: 24px;
    padding: 6px 4px;
}

.rte-cell-label[b-n0h99mhu2g] {
    padding: 6px 8px;
    color: var(--neutral-foreground-rest);
}

.rte-cell-move[b-n0h99mhu2g] {
    width: 56px;
    padding: 6px 4px;
    white-space: nowrap;
    text-align: right;
}

.rte-badge[b-n0h99mhu2g] {
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--type-ramp-minus-2-font-size);
    font-weight: 600;
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-hint);
}

.rte-move-btn[b-n0h99mhu2g] {
    border: 1px solid var(--neutral-stroke-rest);
    background: transparent;
    color: var(--neutral-foreground-rest);
    border-radius: 4px;
    width: 22px;
    height: 22px;
    line-height: 1;
    font-size: var(--type-ramp-minus-2-font-size);
    cursor: pointer;
}

.rte-move-btn:hover[b-n0h99mhu2g] {
    border-color: var(--accent-stroke-control-rest);
    color: var(--accent-foreground-rest);
}

.rte-actions[b-n0h99mhu2g] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.rte-btn[b-n0h99mhu2g] {
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid var(--neutral-stroke-rest);
    background: transparent;
    color: var(--neutral-foreground-rest);
    font: inherit;
    cursor: pointer;
}

.rte-btn--primary[b-n0h99mhu2g] {
    border-color: var(--accent-fill-rest);
    background: var(--accent-fill-rest);
    color: var(--foreground-on-accent-rest);
}

.rte-saved[b-n0h99mhu2g] {
    font-size: var(--type-ramp-minus-1-font-size);
    color: var(--neutral-foreground-hint);
}

.rte-preview[b-n0h99mhu2g] {
    border-left: 1px solid var(--neutral-stroke-divider-rest);
    padding-left: 20px;
}

.rte-preview-list[b-n0h99mhu2g] {
    margin: 0;
    padding-left: 20px;
    color: var(--neutral-foreground-rest);
}

.rte-preview-item[b-n0h99mhu2g] {
    padding: 3px 0;
    font-size: var(--type-ramp-minus-1-font-size);
}

.rte-preview-item--appendix[b-n0h99mhu2g] {
    color: var(--neutral-foreground-hint);
}
/* /Components/Application/Shared/ReserveCorridorHint.razor.rz.scp.css */
.rch[b-y66hqdgt31] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
}

.rch-zone[b-y66hqdgt31] {
    display: flex;
    align-items: center;
    padding: 3px 10px;
    min-height: 20px;
    background: var(--neutral-fill-stealth-rest);
}

.rch-zone--band[b-y66hqdgt31] {
    background: transparent;
}

/* The two actionable zones, faint by default … */
.rch-zone--surplus[b-y66hqdgt31] {
    background: color-mix(in srgb, #4b9e6a 8%, transparent);
}

.rch-zone--shortfall[b-y66hqdgt31] {
    background: color-mix(in srgb, #dc2626 6%, transparent);
}

/* … and emphasised on the side the hosting form acts on (same tints as the Gantt lanes). */
.rch-zone--hl-invest[b-y66hqdgt31] {
    background: color-mix(in srgb, #4b9e6a 22%, transparent);
    color: var(--neutral-foreground-rest);
}

.rch-zone--hl-withdraw[b-y66hqdgt31] {
    background: color-mix(in srgb, #dc2626 18%, transparent);
    color: var(--neutral-foreground-rest);
}

.rch-line[b-y66hqdgt31] {
    display: flex;
    align-items: center;
    height: 0;
    border-top: 1px dashed var(--neutral-stroke-strong, var(--neutral-stroke-rest));
    position: relative;
}

.rch-linelabel[b-y66hqdgt31] {
    position: absolute;
    right: 8px;
    top: -0.62em;
    padding: 0 4px;
    background: var(--neutral-layer-2, var(--fill-color, transparent));
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
    line-height: 1.2;
}

.rch-zonetext[b-y66hqdgt31] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Application/Shared/RiskFitTimeline.razor.rz.scp.css */
.rf[b-mgmhrnc17d] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.rf-lane[b-mgmhrnc17d] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rf-legend[b-mgmhrnc17d] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--neutral-foreground-hint);
}

.rf-legend-item[b-mgmhrnc17d] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.rf-swatch[b-mgmhrnc17d] {
    width: 16px;
    height: 0;
    display: inline-block;
}

.rf-swatch-port[b-mgmhrnc17d] {
    border-top: 2px solid var(--neutral-foreground-rest);
}

.rf-swatch-prof[b-mgmhrnc17d] {
    border-top: 2px dashed var(--neutral-foreground-hint);
}

.rf-swatch-fit[b-mgmhrnc17d] {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    opacity: 0.55;
}

.rf-plot-row[b-mgmhrnc17d] {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.rf-yaxis[b-mgmhrnc17d] {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
}

.rf-ytick[b-mgmhrnc17d] {
    position: absolute;
    right: 4px;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
}

.rf-svg-wrap[b-mgmhrnc17d] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.rf-svg-wrap svg[b-mgmhrnc17d] {
    display: block;
    width: 100%;
}

.rf-grid[b-mgmhrnc17d] {
    stroke: var(--neutral-stroke-rest);
    stroke-width: 1;
    opacity: 0.35;
}

.rf-line[b-mgmhrnc17d] {
    fill: none;
}

.rf-line-port[b-mgmhrnc17d] {
    stroke: var(--neutral-foreground-rest);
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.rf-line-prof[b-mgmhrnc17d] {
    stroke: var(--neutral-foreground-hint);
    stroke-width: 2;
    stroke-dasharray: 5 4;
    stroke-linejoin: round;
}

.rf-xaxis[b-mgmhrnc17d] {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--neutral-foreground-hint);
    margin-top: 2px;
}
/* /Components/Application/Shared/RiskProfileTimeline.razor.rz.scp.css */
/* RiskProfileTimeline — scoped CSS. Styles the bands + split knobs injected into the shared
   GanttTimeline's Bar/Label templates. Mirrors GanttResidenceTimeline's band/knob look. */

.rp[b-konj5wepsd] {
    width: 100%;
}

.rp-owner-chip[b-konj5wepsd] {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--chip, var(--neutral-foreground-hint));
    line-height: 1;
}

/* In-bar risk bands: absolutely positioned by percent of the lane span; the container doubles as
   the per-lane drag track for the split knobs. */
.rp-bands[b-konj5wepsd] {
    position: relative;
    width: 100%;
    align-self: stretch;
}

.rp-band[b-konj5wepsd] {
    position: absolute;
    top: 0;
    bottom: 0;
    /* left/width set inline (percent of the lane span — identical math to the split knob). */
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1.4px solid var(--neutral-stroke-strong-rest); /* subtle, closer to text; theme-adaptive */
    font-size: 0.75rem;
    font-weight: 400;
    cursor: pointer;
}

.rp-band:hover[b-konj5wepsd] { filter: brightness(1.08); }

/* Round only outer corners so internal joins read as crisp dividers under the knobs. */
.rp-band-first[b-konj5wepsd] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.rp-band-last[b-konj5wepsd] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.rp-band-selected[b-konj5wepsd] { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; z-index: 1; }

/* Capacity not yet computed (no simulation) → dashed, slightly muted. */
.rp-band-pending[b-konj5wepsd] { border-style: dashed; opacity: 0.85; }

/* Small filled dot signalling the risk-band heat colour (frame + text stay neutral). */
.rp-band-dot[b-konj5wepsd] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rp-band-name[b-konj5wepsd] {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Split knob (draggable; class names match residenceHtmlTrack.js: .hrt-knob / .hrt-bubble). ── */
.hrt-knob[b-konj5wepsd] { position: absolute; top: 0; bottom: 0; width: 0; cursor: ew-resize; z-index: 3; touch-action: none; }

.hrt-knob-dot[b-konj5wepsd] {
    position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--neutral-layer-1); border: 1.5px solid var(--neutral-foreground-rest);
}

.hrt-knob:hover .hrt-knob-dot[b-konj5wepsd] { transform: translate(-50%, -50%) scale(1.18); }

.hrt-bubble[b-konj5wepsd] {
    position: absolute; left: 50%; top: -18px; transform: translateX(-50%); visibility: hidden;
    background: var(--neutral-foreground-rest); color: var(--neutral-layer-1);
    font-size: 0.7rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grösserer Dot als sichtbare Affordance. */
@media (pointer: coarse) {
    .hrt-knob[b-konj5wepsd]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        right: -16px;
    }

    .hrt-knob-dot[b-konj5wepsd] { width: 18px; height: 18px; }
}
/* /Components/Application/Shared/ScheduleActionRail.razor.rz.scp.css */
/* Side panel in the exact /Sharing fm-col recipe: quiet tint running the FULL scroll-body height
   (negative top/bottom margins reclaim the page-body padding so the tint spans from the IconTitle
   line to the footer), flush to the work-area edge on the right. The host grid must use gap:0 +
   align-items:stretch + grid-template-rows:1fr for the stretch to reach the footer.
   All colors are theme tokens / color-mix (raw-hex lint). */
.rail-root[b-195rcxg5um] {
    --sc-panel-bg: color-mix(in srgb, var(--neutral-fill-secondary-rest) 50%, transparent);
    display: flex; flex-direction: column; gap: 18px; min-width: 0;
    background: var(--sc-panel-bg);
    margin-top: -1.625rem; margin-bottom: -1.5rem; margin-right: -1rem;
    padding: 1.625rem 16px 1.5rem 14px;
}
@media (min-width: 900px) {
    .rail-root[b-195rcxg5um] { margin-right: -1.5rem; }
}
@media (max-width: 859px) {
    .rail-root[b-195rcxg5um] { background: none; margin: 0; padding: 0 0 14px; }
}

/* Section header — the /Sharing .fm-col-head recipe. min-height 32px aligns the first header's
   divider with the Calendar|Availability tab strip's bottom border in the main column
   (tab: 6px pad + ~17px line + 6px pad + 2px border + 1px strip border ≈ 32px). */
.rail-col-head[b-195rcxg5um] { flex: none; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem;
                 color: var(--neutral-foreground-rest); padding-bottom: 10px; margin-bottom: 10px;
                 border-bottom: 1px solid var(--neutral-stroke-divider-rest);
                 min-height: 32px; box-sizing: border-box; }
.rail-col-head > span[b-195rcxg5um] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rail-section[b-195rcxg5um] { display: flex; flex-direction: column; min-width: 0; }

.rail-upcoming[b-195rcxg5um] { display: flex; flex-direction: column; gap: 4px; }
.rail-up-row[b-195rcxg5um] { display: flex; align-items: center; gap: 8px; border: none; background: transparent; cursor: pointer; padding: 4px 2px; font: inherit; font-size: 0.82rem; color: var(--neutral-foreground-rest); text-align: left; border-radius: 6px; min-width: 0; }
.rail-up-row:hover[b-195rcxg5um] { background: color-mix(in srgb, var(--accent-fill-rest) 8%, transparent); }
.rail-up-row:focus-visible[b-195rcxg5um] { outline: 2px solid var(--accent-fill-rest); outline-offset: 1px; }
.rail-up-dot[b-195rcxg5um] { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent-fill-rest); }
.rail-up-dot.is-approval[b-195rcxg5um] { background: var(--w4l-warning); }
.rail-up-when[b-195rcxg5um] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rail-up-who[b-195rcxg5um] { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--neutral-foreground-hint); }
.rail-up-mode[b-195rcxg5um] { flex: none; font-size: 0.8rem; }

.rail-selection[b-195rcxg5um] { min-height: 40px; margin-bottom: 10px; }

.rail-cards[b-195rcxg5um] { margin-top: 8px; }
.rail-cards-summary[b-195rcxg5um] { cursor: pointer; font-size: 0.85rem; color: var(--neutral-foreground-hint); list-style: none; padding: 4px 0; }
.rail-cards-summary[b-195rcxg5um]::-webkit-details-marker { display: none; }
.rail-cards-body[b-195rcxg5um] { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; padding-top: 4px; }

@media (max-width: 859px) {
    .rail-cards-body[b-195rcxg5um] { max-height: none; }
}
/* /Components/Application/Shared/SchedulerWeekGrid.razor.rz.scp.css */
/* SchedulerWeekGrid — isolated (Blazor CSS scoping applies automatically to this file).
   PE5: the only breakpoint on /Schedule is 860px — no second value introduced here. */

.swg-root[b-x1hztyj2lc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swg-grid[b-x1hztyj2lc] {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(32px, 1fr));
    max-height: 480px;
    overflow-y: auto;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
}

.swg-corner[b-x1hztyj2lc] {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
    background: var(--neutral-layer-1);
}

.swg-daylabel[b-x1hztyj2lc] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--neutral-layer-1);
    border: none;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 2px;
    cursor: pointer;
    color: var(--neutral-foreground-rest);
}

.swg-daylabel:hover[b-x1hztyj2lc],
.swg-daylabel:focus-visible[b-x1hztyj2lc] {
    color: var(--accent-fill-rest);
}

.swg-timelabel[b-x1hztyj2lc] {
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.swg-cell[b-x1hztyj2lc] {
    height: 20px;
    border-top: 1px solid var(--neutral-stroke-rest);
    border-left: 1px solid var(--neutral-stroke-rest);
    background: var(--neutral-fill-secondary-rest);
    cursor: pointer;
    touch-action: none; /* the pointer-capture paint gesture owns this axis, not page scroll */
    user-select: none;
}

.swg-cell.is-on[b-x1hztyj2lc] {
    background: var(--accent-fill-rest);
}

.swg-legend[b-x1hztyj2lc] {
    font-size: 0.78rem;
    color: var(--neutral-foreground-hint);
    display: flex;
    align-items: center;
    gap: 6px;
}

.swg-legend i[b-x1hztyj2lc] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--neutral-fill-secondary-rest);
}

.swg-legend i.is-on[b-x1hztyj2lc] {
    background: var(--accent-fill-rest);
}

.swg-legend i + i[b-x1hztyj2lc] {
    margin-left: 10px;
}

/* ── ≤860px alternative + keyboard path ──────────────────────────────────────────────────
   Both trees always render; only `display` toggles — never @if (Docs/BlazorFastLeaks.md). */

.swg-mobile[b-x1hztyj2lc] {
    display: none;
}

@media (max-width: 860px) {
    .swg-mobile[b-x1hztyj2lc] {
        display: block;
    }
    .swg-grid[b-x1hztyj2lc],
    .swg-legend[b-x1hztyj2lc] {
        display: none;
    }
}

/* Keyboard path: Enter on a day header forces the list open regardless of viewport width. */
.swg-mobile.is-kb-open[b-x1hztyj2lc] {
    display: block;
}

.swg-kb-close[b-x1hztyj2lc] {
    display: block;
    margin-bottom: 6px;
    border: 1px dashed var(--neutral-stroke-rest);
    background: transparent;
    border-radius: 6px;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    padding: 2px 8px;
}

.swg-kb-close:hover[b-x1hztyj2lc] {
    border-color: var(--accent-fill-rest);
    color: var(--neutral-foreground-rest);
}

.swg-day-row[b-x1hztyj2lc] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.swg-day-name[b-x1hztyj2lc] {
    flex: none;
    width: 34px;
    font-weight: 600;
    font-size: 0.85rem;
}

.swg-ranges[b-x1hztyj2lc] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.swg-range[b-x1hztyj2lc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
}

.swg-range-sep[b-x1hztyj2lc] {
    color: var(--neutral-foreground-hint);
}

.swg-range-del[b-x1hztyj2lc],
.swg-range-add[b-x1hztyj2lc] {
    border: 1px dashed var(--neutral-stroke-rest);
    background: transparent;
    border-radius: 6px;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--neutral-foreground-hint);
    padding: 2px 8px;
}

.swg-range-del:hover[b-x1hztyj2lc],
.swg-range-add:hover[b-x1hztyj2lc] {
    border-color: var(--accent-fill-rest);
    color: var(--neutral-foreground-rest);
}
/* /Components/Application/Shared/SettlementFlow.razor.rz.scp.css */
/* SettlementFlow — P1 fixed left, P2 fixed right; a colored double chevron next to
   the amount carries the direction (no underline/line — nothing to overlap text).
   Person colors arrive theme-resolved via inline styles. */

.sf[b-4epely663e] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 6px;
}

/* Person: neutral text + discreet identity-color chip on the left. */
.sf-party[b-4epely663e] {
    flex: 0 1 auto;
    max-width: 34%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--neutral-foreground-rest);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sf-party--right[b-4epely663e] {
    text-align: right;
}

.sf-chip[b-4epely663e] {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.sf-mid[b-4epely663e] {
    flex: 1 1 auto;
    min-width: 40px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}

.sf-chevron[b-4epely663e] {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: -2px;
    line-height: 1;
    align-self: center;
}

.sf--bound .sf-chevron[b-4epely663e] {
    opacity: 0.65;
}

.sf-amount[b-4epely663e] {
    font-weight: 700;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
}

.sf-detail[b-4epely663e] {
    font-weight: 500;
    font-size: 0.8rem;
    opacity: 0.7;
}

.sf-none[b-4epely663e] {
    font-weight: 500;
    font-size: 0.85rem;
    opacity: 0.7;
    text-align: center;
}

/* Mobile: stays one row — stacking would destroy the left/right semantics. */
@media (max-width: 639px) {
    .sf[b-4epely663e] {
        gap: 8px;
    }

    .sf-party[b-4epely663e] {
        font-size: 0.85rem;
    }
}
/* /Components/Application/Shared/StandardFinancingPanel.razor.rz.scp.css */
/* ── CSS-Balken (leak-frei, theme-aware via FluentUI-Tokens) ─────────────
   Seit dem Split in Section-Komponenten (CollateralValue-/MinimumRequirements-/
   EquitySourcesSection) leben die fin-*-Elemente in Kind-Komponenten — alle Regeln
   laufen deshalb über ::deep unterhalb des .fin-flow-Wrappers (Single Source,
   keine Duplikation in den Kind-CSS-Dateien). */
.fin-flow[b-3820nzjr7w]  .fin-chart-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 0.2rem;
}

.fin-flow[b-3820nzjr7w]  .fin-row-label {
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint, #707a87);
    margin: 0.3rem 0 0.15rem;
    font-variant-numeric: tabular-nums;
}

.fin-flow[b-3820nzjr7w]  .fin-bar {
    position: relative;
    display: flex;
    width: 100%;
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-rest);
}

/* ── Tragbarkeits-Bar: der Bruttolohn ist die helle Hintergrund-Zone,
      die Kostensegmente liegen als Layer darüber und "verbrauchen" den Lohn. ── */
.fin-flow[b-3820nzjr7w]  .fin-afford-bar {
    height: 30px;
}

.fin-flow[b-3820nzjr7w]  .fin-income-zone {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: color-mix(in srgb, var(--w4l-income-accent) 16%, transparent);
    border-right: 2px solid var(--w4l-income-accent);
}

.fin-flow[b-3820nzjr7w]  .fin-segs {
    position: absolute;
    inset: 0;
    display: flex;
}

.fin-flow[b-3820nzjr7w]  .fin-ok   { color: var(--w4l-positive); }
.fin-flow[b-3820nzjr7w]  .fin-over { color: var(--w4l-negative); }

.fin-flow[b-3820nzjr7w]  .fin-dot-income {
    background: color-mix(in srgb, var(--w4l-income-accent) 25%, transparent);
    border: 1px solid var(--w4l-income-accent);
}

.fin-flow[b-3820nzjr7w]  .fin-bar .seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
}

/* Tragbarkeit: grau = Kostenkomponenten */
.fin-flow[b-3820nzjr7w]  .seg-int { background: var(--w4l-bar-strong); }
.fin-flow[b-3820nzjr7w]  .seg-amo { background: var(--w4l-bar-mid); }
.fin-flow[b-3820nzjr7w]  .seg-mnt { background: var(--w4l-bar-soft); }

.fin-flow[b-3820nzjr7w]  .fin-bar.under { box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.5); }
.fin-flow[b-3820nzjr7w]  .fin-bar.over { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.6); }

.fin-flow[b-3820nzjr7w]  .fin-marker {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 0;
    border-left: 2px dashed var(--neutral-foreground-rest);
    pointer-events: none;
}

.fin-flow[b-3820nzjr7w]  .fin-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.85rem;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--neutral-foreground-rest);
}

.fin-flow[b-3820nzjr7w]  .fin-legend .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.fin-flow[b-3820nzjr7w]  .fin-legend-marker { opacity: 0.8; }

/* ── StatCards (Pattern: StrategyForm .stat-card) — Struktur + Conclusions ── */
.fin-flow[b-3820nzjr7w]  .fin-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    margin-top: 0.5rem;
}

.fin-flow[b-3820nzjr7w]  .fin-stat-card {
    flex: 1 1 0;
    min-width: 130px;
    padding: 8px 10px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
}

/* Liquiditäts-Warnung: frei verfügbare Mittel decken das Mindest-Eigenkapital nicht. */
.fin-flow[b-3820nzjr7w]  .fin-stat-card--warn {
    border-color: var(--warning-foreground-rest, #b8860b);
    background: color-mix(in srgb, var(--warning-foreground-rest, #b8860b) 9%, var(--neutral-layer-1));
}

.fin-flow[b-3820nzjr7w]  .fin-stat-label {
    font-size: 11px;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: center;
}

.fin-flow[b-3820nzjr7w]  .fin-stat-value {
    font-size: 22px;
    font-weight: 700;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fin-flow[b-3820nzjr7w]  .fit-good    { color: var(--w4l-positive); }
.fin-flow[b-3820nzjr7w]  .fit-caution { color: var(--w4l-negative); }

/* Gedämpfte Zusatzzeile unter dem Stat-Value (z.B. «min. income …»). */
.fin-flow[b-3820nzjr7w]  .fin-stat-sub {
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Imputed-cost-Aufschlüsselung (Unterhalt / Zins / Amortisation) in der ersten Card. */
.fin-flow[b-3820nzjr7w]  .fin-breakdown {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
    margin-top: 4px;
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
}

.fin-flow[b-3820nzjr7w]  .fin-breakdown > span:nth-child(odd) {
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.fin-flow[b-3820nzjr7w]  .fin-breakdown > span:nth-child(even) {
    text-align: right;
    font-weight: 600;
}

.fin-flow[b-3820nzjr7w]  .fin-breakdown > span.fin-bd-total {
    border-top: 1px solid var(--neutral-stroke-divider-rest);
    margin-top: 2px;
    padding-top: 3px;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.fin-flow[b-3820nzjr7w]  .fin-breakdown .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 0.3rem;
    vertical-align: middle;
}

/* 100 % Eigenkapital: Tragbarkeits-Elemente sind nicht relevant → gedimmt */
.fin-flow[b-3820nzjr7w]  .fin-muted {
    opacity: 0.35;
    filter: grayscale(0.7);
    pointer-events: none;
    user-select: none;
}

/* Icon-only Reset-Button rechts neben dem Section-Titel (HeaderActions der Steps). */
.fin-flow[b-3820nzjr7w]  .fin-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 6px;
    color: var(--neutral-foreground-hint);
    flex: none;
}

.fin-flow[b-3820nzjr7w]  .fin-reset-btn:hover {
    background: var(--neutral-fill-stealth-hover);
    color: var(--neutral-foreground-rest);
}

.fin-flow[b-3820nzjr7w]  .fin-reset-btn:focus-visible {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 1px;
}
/* /Components/Application/Shared/StartToolsSection.razor.rz.scp.css */
/* Kachel-Optik der Rechner-Schnellzugriffe auf /Start.
   Bewusst identisch zu den borderless Scenario-Cards (ScenarioPreviewCard):
   gerundete, subtil gefüllte Fläche statt Kasten — kein Rahmen, kein Schatten.
   Anders als dort gibt es keinen Selektionszustand: die Kacheln navigieren nur,
   deshalb auch <a href> statt onclick (leak-frei, mittelklick-/tastaturfähig). */
.w4l-tool-tile[b-93avjxplib] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    background: color-mix(in srgb, var(--neutral-fill-secondary-rest) 50%, transparent);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.w4l-tool-tile:hover[b-93avjxplib],
.w4l-tool-tile:focus-visible[b-93avjxplib] {
    background: color-mix(in srgb, var(--neutral-fill-secondary-hover) 60%, transparent);
}

.w4l-tool-tile:focus-visible[b-93avjxplib] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -2px;
}

.w4l-tool-tile-head[b-93avjxplib] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.w4l-tool-tile-title[b-93avjxplib] {
    font-weight: 700;
}

.w4l-tool-tile-teaser[b-93avjxplib] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}
/* /Components/Application/Shared/WithdrawTimeline.razor.rz.scp.css */
/* WithdrawTimeline — scoped CSS. Mirror of InvestTimeline.razor.css (the .hrt-knob CSS must
   live in THIS component's scope — CSS isolation does not share it across components). Bands fill the flex
   bar height via align-self: stretch + top/bottom anchoring (NOT height:100%, which collapses). */

.cwt[b-knzy2ge2bl] {
    width: 100%;
}

.cwt-bands[b-knzy2ge2bl] {
    position: relative;
    width: 100%;
    align-self: stretch;
}

.cwt-band[b-knzy2ge2bl] {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1.4px solid var(--neutral-stroke-strong-rest); /* subtle, closer to text; theme-adaptive */
    font-size: 0.75rem;
    font-weight: 400;
    cursor: pointer;
}

.cwt-band:hover[b-knzy2ge2bl] { filter: brightness(1.08); }

.cwt-band-first[b-knzy2ge2bl] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.cwt-band-last[b-knzy2ge2bl] { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

.cwt-band-selected[b-knzy2ge2bl] { outline: 2px solid var(--accent-fill-rest); outline-offset: -1px; z-index: 1; }

.cwt-band-name[b-knzy2ge2bl] {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    position: relative; /* stays above the per-year tint cells */
    z-index: 1;
}

/* Per-year tint cell: absolute slice of the band, red alpha scales with the CHF withdrawn that
   year (inline background); the band's overflow:hidden clips it to the rounded corners. */
.cwt-yearcell[b-knzy2ge2bl] {
    position: absolute;
    top: 0;
    bottom: 0;
}

/* ── Split knob (draggable; class names match residenceHtmlTrack.js: .hrt-knob / .hrt-bubble). ── */
.hrt-knob[b-knzy2ge2bl] { position: absolute; top: 0; bottom: 0; width: 0; cursor: ew-resize; z-index: 3; touch-action: none; }

.hrt-knob-dot[b-knzy2ge2bl] {
    position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
    transform: translate(-50%, -50%); border-radius: 50%;
    background: var(--neutral-layer-1); border: 1.5px solid var(--neutral-foreground-rest);
}

.hrt-knob:hover .hrt-knob-dot[b-knzy2ge2bl] { transform: translate(-50%, -50%) scale(1.18); }

.hrt-bubble[b-knzy2ge2bl] {
    position: absolute; left: 50%; top: -18px; transform: translateX(-50%); visibility: hidden;
    background: var(--neutral-foreground-rest); color: var(--neutral-layer-1);
    font-size: 0.7rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

/* Touch: breitere unsichtbare Grab-Fläche (der width:0-Knob ist sonst nur über den Dot greifbar)
   + grösserer Dot als sichtbare Affordance. */
@media (pointer: coarse) {
    .hrt-knob[b-knzy2ge2bl]::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -16px;
        right: -16px;
    }

    .hrt-knob-dot[b-knzy2ge2bl] { width: 18px; height: 18px; }
}
/* /Components/Application/Shared/YearCardHeader.razor.rz.scp.css */
.ych-head[b-3vnvdqn74o] {
    margin-bottom: 12px;
}

/* Native close button (same recipe as the former per-card ✕ buttons; FAST-free). */
.ych-close[b-3vnvdqn74o] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--type-ramp-plus-1-font-size);
    line-height: 1;
    color: var(--neutral-foreground-hint);
    padding: 4px 6px;
    border-radius: calc(var(--control-corner-radius) * 1px);
    flex-shrink: 0;
}

.ych-close:hover[b-3vnvdqn74o] {
    background: var(--neutral-fill-secondary-rest);
    color: var(--neutral-foreground-rest);
}
/* /Components/Cookies/CookieConsent.razor.rz.scp.css */
#cookieconsent[b-lyytcutyn1] {
    position: relative;
    display: flex;
    z-index: 998;
    width: 100%;
    justify-content: space-between;
    text-align: left;
    background-color: var(--neutral-layer-2);
    font-size: 13px;
    line-height: var(--type-ramp-minus-1-line-height);
}

[b-lyytcutyn1] .info {
    margin: 0;
    padding-left: 5% !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

[b-lyytcutyn1] .infoicon {
    display: table-cell !important;
    padding: 12px !important;
    width: 24px !important;
    height: 24px !important;
}

[b-lyytcutyn1] .infomessage {
    display: table-cell !important;
    vertical-align: middle !important;
    padding: 0 !important;
    font-size: 13px;
    line-height: var(--type-ramp-minus-1-line-height);
}

[b-lyytcutyn1] .buttons {
    display: inline-block;
    margin-left: 5%;
    margin-right: 5%;
    min-width: 40%;
    min-width: calc((150px + 3 * 4px) * 2 + 150px);
    min-width: fit-content;
    align-self: center;
    position: relative;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

[b-lyytcutyn1] .button {
    min-width: 150px;
}

@media (max-width: 899px) {

    [b-lyytcutyn1] .info,
    [b-lyytcutyn1] .buttons {
        padding-top: 8px;
        padding-bottom: 12px;
        padding-left: 3.75%;
        padding-right: 3.75%;
        margin: 0;
        width: 92.5%;
    }

    [b-lyytcutyn1] .button {
        width: 100%;
    }
}

/* /Components/Cookies/ManageCookies.razor.rz.scp.css */
dl[b-5pxstyzg6x] {
    margin-top: 36px;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
    text-transform: none;
}

dt[b-5pxstyzg6x] {
    margin-top: 20px;
    float: none;
    font-family: Segoe UI, SegoeUI, Arial, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    list-style: none;
}

dt > h4[b-5pxstyzg6x] {
    margin: 0;
    padding: 0;
}

form[b-5pxstyzg6x] {
    height: 446px;
    overflow: auto;
}

.explainer[b-5pxstyzg6x], .choices[b-5pxstyzg6x] {
    margin-bottom: 13px;
}

.buttons[b-5pxstyzg6x] {
    display: inline-block;
    margin-left: 5%;
    margin-right: 5%;
    min-width: 40%;
    min-width: calc((150px + 3 * 4px) * 2 + 150px);
    min-width: fit-content;
    align-self: center;
    position: relative;
}

.button[b-5pxstyzg6x] {
    min-width: 150px;
}

/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-904d5ntfjs],
.components-reconnect-repeated-attempt-visible[b-904d5ntfjs],
.components-reconnect-failed-visible[b-904d5ntfjs],
.components-pause-visible[b-904d5ntfjs],
.components-resume-failed-visible[b-904d5ntfjs],
.components-rejoining-animation[b-904d5ntfjs] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-904d5ntfjs],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-904d5ntfjs],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-904d5ntfjs],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-904d5ntfjs],
#components-reconnect-modal.components-reconnect-retrying[b-904d5ntfjs],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-904d5ntfjs],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-904d5ntfjs],
#components-reconnect-modal.components-reconnect-failed[b-904d5ntfjs],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-904d5ntfjs] {
    display: block;
}


#components-reconnect-modal[b-904d5ntfjs] {
    background-color: var(--fill-color);
    color: var(--neutral-foreground-rest);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-904d5ntfjs 0.5s both;
}

#components-reconnect-modal[open][b-904d5ntfjs] {
    animation: components-reconnect-modal-slideUp-b-904d5ntfjs 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-904d5ntfjs 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}


#components-reconnect-modal[b-904d5ntfjs]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-904d5ntfjs 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-904d5ntfjs {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-904d5ntfjs {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-904d5ntfjs {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-904d5ntfjs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-904d5ntfjs] {
    margin: 0;
    text-align: center;
    color: var(--neutral-foreground-rest);
}

#components-reconnect-modal button[b-904d5ntfjs] {
    border: 0;
    background-color: var(--accent-fill-rest);
    color: var(--accent-foreground-rest);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-904d5ntfjs] {
        background-color: var(--accent-fill-hover);
    }

    #components-reconnect-modal button:active[b-904d5ntfjs] {
        background-color: var(--accent-fill-active);
    }

.components-rejoining-animation[b-904d5ntfjs] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-904d5ntfjs] {
        position: absolute;
        /*border: 3px solid #0087ff;*/
        border: 3px solid var(--accent-base-color);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-904d5ntfjs 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-904d5ntfjs] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-904d5ntfjs {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SidePanelHost.razor.rz.scp.css */
/* Rechtes Side-Dock (BotChat / Live-Chat / Help) — ersetzt die frühere
   DialogService-Panel-Chrome. Kein Backdrop, keine pointer-events-Tricks: nur dieser
   Streifen belegt Bildschirm, alles daneben bleibt bedienbar.

   Die Breite kommt aus --w4l-panel-width (tokens.css / base.css) — DIESELBE Quelle, aus
   der der Content-Push sein padding-right zieht. Der Fallback greift nur, falls die Regel
   `body:has(.w4l-sidepanel)` je verloren geht: dann ist das Dock lieber sichtbar (und
   überdeckt) als 0px breit. */
.w4l-sidepanel[b-dpobdl29qv] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: var(--w4l-panel-width, min(480px, 100vw));
    z-index: 999; /* same layer the DialogService panels used (ZIndex.Dialog) */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--fill-color);
    border-left: 1px solid var(--neutral-stroke-divider-rest);
    /* Schwebende Ebene über dem Content → Schatten. Im Push-Modus (s.u.) fällt er weg. */
    box-shadow: -6px 0 18px rgba(0, 0, 0, 0.18);
}

/* Ab 1760px schiebt das Dock den Content, statt ihn zu überdecken (base.css; darüber
   geht sich die 2-Spalten-Preview neben dem Dock noch aus). Damit ist es keine schwebende
   Ebene mehr, sondern eine Shell-Region wie Navigation und Preview — und Shell-Regionen
   tragen in dieser Sprache eine Linie, keinen Schatten (Docs/DesignBacklog.md: «Linien
   statt Karten»). Der Schatten bleibt nur im Overlay-Modus darunter, wo er die Ebenen
   tatsächlich trennt. */
@media (min-width: 1760px) {
    .w4l-sidepanel[b-dpobdl29qv] {
        box-shadow: none;
    }
}

/* Maximized video dock: the strip grows to the full viewport width and overlays the whole app,
   nav included. The content push (base.css ≥1760px) still pads by --w4l-panel-width, but the
   content sits entirely behind the overlay anyway. */
.w4l-sidepanel-max[b-dpobdl29qv] {
    width: 100vw;
    border-left: none;
}

/* Minimized video dock (screen-share): a small floating pill bottom-right instead of the full
   strip. Content comes from VideoDock's .vd-pill; this wrapper only positions it. */
.w4l-sidepanel-video-pill[b-dpobdl29qv] {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 999;
}
/* /Components/Layout/ThemeSwitcher.razor.rz.scp.css */
/* ThemeSwitcher verwendet die gleichen Styles wie LanguageSelector via .header.language-select-no-arrow */
/* /Components/Layout/UsageErrorBoundary.razor.rz.scp.css */
/* Inline replacement for the page content after a caught circuit exception. Kept deliberately
   plain — no FluentUI component is created on this path (Docs/BlazorFastLeaks.md). */
.w4l-error-boundary[b-pmu31f31of] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--error, #d13438) 45%, var(--neutral-layer-floating));
    border-radius: calc(var(--control-corner-radius) * 1px);
    background-color: color-mix(in srgb, var(--error, #d13438) 12%, var(--neutral-layer-floating));
    color: var(--neutral-foreground-rest);
}

.w4l-error-boundary-reload[b-pmu31f31of] {
    color: var(--error, #d13438);
    font-weight: 600;
    text-decoration: underline;
}
/* /Components/Public/Pages/Blog/BlogIndex.razor.rz.scp.css */
/* Blog index — marketing-styled listing (Hero + card band + footer, like Product/About).
   Cards sit on a --neutral-layer-1 band. Each is a bordered tile that reads well WITH or
   WITHOUT an image (v1 has no cover upload, so many posts carry none): an eyebrow meta line,
   a strong title, a clamped lead preview and a quiet "Read article →" cue that nudges on hover.
   Colours via tokens; the only literals are the low-opacity hover shadow and the transparent
   accent tint (allowed exceptions per W4L.Web/CLAUDE.md + Docs/Css.md). */

/* Fill the viewport below the header so a short page still reaches the bottom — the band
   (flex:1) absorbs the slack and keeps the page footer pinned down. On long pages the div
   simply grows past the fold and the marketing wrapper scrolls as before.

   `flex: 1 0 auto` — grow, but NEVER shrink — is load-bearing, not decoration: this div is
   itself a flex item of the fixed-height .marketing-layout-wrapper (column flex, height =
   100dvh - header). With the default flex-shrink of 1 plus an explicit min-height (which
   replaces a flex item's automatic minimum size), the div collapsed to exactly the wrapper
   height while its content kept painting past the box — and the copyright line, laid out
   right underneath the collapsed box, landed in the middle of the card band.
   The grow half also makes the header-height token unnecessary: the free space the wrapper
   has left over after the copyright line is exactly what this div should fill. */
.w4l-blog-page[b-lnqqjy6oad] {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

.w4l-blog-band[b-lnqqjy6oad] {
    flex: 1 0 auto;
}

.w4l-blog-index[b-lnqqjy6oad] {
    max-width: var(--w4l-content-max-width);
    margin: 0 auto;
    /* Responsive side inset so cards never touch the band edges — same clamp rhythm as the
       marketing sections (e.g. UseCasesSection "By your side…"). border-box keeps the padding
       inside the width instead of overflowing it. */
    padding-inline: clamp(16px, 4vw, 40px);
    box-sizing: border-box;
}

.w4l-blog-cards[b-lnqqjy6oad] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
    width: 100%;
    /* Uniform card height: every row shares the tallest card's height (1fr) and each card
       stretches to fill it, so preview cards are always equally tall regardless of title
       length or whether a cover image is present. The body absorbs the slack and pins the
       read cue to the bottom (see .w4l-blog-card-body / -cue). */
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.w4l-blog-card[b-lnqqjy6oad] {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: var(--neutral-layer-2);
    text-decoration: none;
    color: var(--neutral-foreground-rest);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.w4l-blog-card:hover[b-lnqqjy6oad] {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}

.w4l-blog-card:focus-visible[b-lnqqjy6oad] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

/* Image banner (optional). object-fit keeps aspect regardless of source size. */
.w4l-blog-card-media[b-lnqqjy6oad] {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--neutral-layer-3);
}

.w4l-blog-card-media img[b-lnqqjy6oad] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.w4l-blog-card:hover .w4l-blog-card-media img[b-lnqqjy6oad] {
    transform: scale(1.04);
}

.w4l-blog-card-body[b-lnqqjy6oad] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 22px 24px;
    /* Grow to fill the (equal-height) card so cards without a cover image match those with one. */
    flex: 1;
}

/* Meta as an eyebrow above the title. */
.w4l-blog-meta[b-lnqqjy6oad] {
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--neutral-foreground-hint);
}

.w4l-blog-card h2[b-lnqqjy6oad] {
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 0;
    color: var(--neutral-foreground-rest);
}

/* Lead preview — clamped to three lines so uneven teasers keep the grid tidy. */
.w4l-blog-card-lead[b-lnqqjy6oad] {
    margin: 0;
    line-height: 1.6;
    color: var(--neutral-foreground-hint);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Quiet read cue — the card's one accent flourish; the arrow slides on hover. */
.w4l-blog-card-cue[b-lnqqjy6oad] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Pin to the bottom of the (stretched) body so uneven teasers still line the cue up. */
    margin-top: auto;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-fill-rest);
}

.w4l-blog-card-arrow[b-lnqqjy6oad] {
    transition: transform 0.18s ease;
}

.w4l-blog-card:hover .w4l-blog-card-arrow[b-lnqqjy6oad] {
    transform: translateX(4px);
}

.w4l-blog-empty[b-lnqqjy6oad] {
    padding: 48px 0;
    text-align: center;
    font-size: 1.05rem;
    color: var(--neutral-foreground-hint);
}

@media (prefers-reduced-motion: reduce) {
    .w4l-blog-card[b-lnqqjy6oad],
    .w4l-blog-card-media img[b-lnqqjy6oad],
    .w4l-blog-card-arrow[b-lnqqjy6oad] {
        transition: none;
    }

    .w4l-blog-card:hover[b-lnqqjy6oad] {
        transform: none;
    }

    .w4l-blog-card:hover .w4l-blog-card-media img[b-lnqqjy6oad],
    .w4l-blog-card:hover .w4l-blog-card-arrow[b-lnqqjy6oad] {
        transform: none;
    }
}

.w4l-blog-pager[b-lnqqjy6oad] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
    font-size: 0.92rem;
    color: var(--neutral-foreground-hint);
}

.w4l-blog-pager a[b-lnqqjy6oad] {
    font-weight: 600;
    color: var(--accent-fill-rest);
    text-decoration: none;
}
/* /Components/Public/Pages/Blog/BlogPostPage.razor.rz.scp.css */
/* Reading layout (Docs/Blog.md §7) — public-page-only chrome.

   The shared parts (the .w4l-blog-prose measure column and the rules for the injected
   article body) live globally in wwwroot/css/utilities.css, because the author preview
   (BlogPostEdit.razor) and the admin review preview (BlogAdmin.razor) render the same
   class without CSS isolation. One source of truth, no ::deep copies to drift.

   Everything below belongs to this page's own markup only, so it is scoped and needs
   no ::deep. */

/* Two-column reading frame: article + an in-flow author section, capped and centred with a
   symmetric responsive side inset so the text is indented on BOTH edges, not just the left. */
.w4l-blog-article[b-v01mp187c1] {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px clamp(16px, 4vw, 40px) 64px;
    box-sizing: border-box;
}

.w4l-blog-back[b-v01mp187c1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent-fill-rest);
    text-decoration: none;
}

.w4l-blog-back-arrow[b-v01mp187c1] {
    transition: transform 0.18s ease;
}

.w4l-blog-back:hover .w4l-blog-back-arrow[b-v01mp187c1] {
    transform: translateX(-4px);
}

.w4l-blog-layout[b-v01mp187c1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    gap: clamp(32px, 4vw, 56px);
    /* stretch (not start) so the author column runs the full article height — its divider
       line then spans top to bottom and gives the article a clear right boundary, even where
       the author content itself is short. Room below is a hook for a future right rail
       (related articles, …). */
    align-items: stretch;
}

/* min-width:0 lets a wide child (code block, table, image) shrink instead of blowing the
   grid track out and crowding the author column. */
.w4l-blog-main[b-v01mp187c1] {
    min-width: 0;
}

/* Left column holds the article. Override the global prose centring so the text fills the
   column between the page inset and the author divider. The prose lives inside the
   BlogArticleView child component, so pierce with ::deep. */
.w4l-blog-main[b-v01mp187c1]  .w4l-blog-prose {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Author section — an in-flow column to the right of the article, set off by a single
   divider line (not a floating card). It scrolls with the article's flow layout. */
.w4l-blog-aside[b-v01mp187c1] {
    border-left: 1px solid var(--neutral-stroke-rest);
    padding-left: clamp(24px, 3vw, 40px);
}

.w4l-blog-author-card[b-v01mp187c1] {
    display: flex;
    flex-direction: column;
}

.w4l-blog-author-eyebrow[b-v01mp187c1] {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
}

.w4l-blog-author-name[b-v01mp187c1] {
    margin: 6px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--neutral-foreground-rest);
}

.w4l-blog-author-headline[b-v01mp187c1] {
    margin: 4px 0 0;
    font-size: 0.95rem;
    color: var(--neutral-foreground-rest);
}

.w4l-blog-author-affiliation[b-v01mp187c1] {
    margin: 4px 0 0;
    font-size: 0.88rem;
    color: var(--neutral-foreground-hint);
}

.w4l-blog-author-bio[b-v01mp187c1] {
    margin-top: 12px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--neutral-foreground-hint);
}

/* Stack on narrow screens: article first, author section below — the divider line moves
   from the left edge to the top so it still reads as a set-off section. */
@media (max-width: 860px) {
    .w4l-blog-layout[b-v01mp187c1] {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .w4l-blog-aside[b-v01mp187c1] {
        border-left: none;
        border-top: 1px solid var(--neutral-stroke-rest);
        padding-left: 0;
        padding-top: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .w4l-blog-back-arrow[b-v01mp187c1] {
        transition: none;
    }

    .w4l-blog-back:hover .w4l-blog-back-arrow[b-v01mp187c1] {
        transform: none;
    }
}

.w4l-blog-author-avatar[b-v01mp187c1] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 12px;
    border: 1px solid var(--neutral-stroke-rest);
}
/* /Components/Public/Pages/Business/BusinessCtaSection.razor.rz.scp.css */
.biz-cta-wrapper[b-tl6tzn4v7n] {
    max-width: var(--w4l-content-max-width, 1910px);
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

.biz-cta-box[b-tl6tzn4v7n] {
    /* rgba/color-mix background keeps text fully opaque (no opacity on parent) */
    background: color-mix(in srgb, var(--accent-fill-focus) 90%, transparent);
    color: var(--neutral-fill-active);
    border-radius: 16px;
    padding: 60px 48px;
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
}

.biz-cta-box h2[b-tl6tzn4v7n] {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 700;
    margin: 0 0 24px 0;
}

.biz-cta-box p[b-tl6tzn4v7n] {
    font-size: clamp(1rem, 2vw, 1.2rem);
    opacity: 0.85;
    max-width: 600px;
    margin: 0 auto 40px auto;
}

.biz-cta-buttons[b-tl6tzn4v7n] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 899px) {
    .biz-cta-wrapper[b-tl6tzn4v7n] {
        padding: 0 20px;
    }

    .biz-cta-box[b-tl6tzn4v7n] {
        padding: 40px 24px;
    }
}
/* /Components/Public/Pages/Business/BusinessHero.razor.rz.scp.css */
.biz-hero[b-x9sxauvnng] {
    background: var(--neutral-layer-3);
    width: 100%;
}

.biz-hero-inner[b-x9sxauvnng] {
    text-align: center;
    /*max-width: 860px;*/
    margin: 0 auto;
}

.biz-hero-title[b-x9sxauvnng] {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--accent-fill-rest);
    margin-bottom: 1rem;
}

.biz-hero-sub[b-x9sxauvnng] {
    font-size: 1.25rem;
    color: var(--neutral-foreground-rest);
    line-height: 1.6;
}
/* /Components/Public/Pages/Business/BusinessHowItWorksSection.razor.rz.scp.css */
.biz-how-root[b-qnch7ygib7] {
    width: 100%;
    padding: 0 clamp(6px, 2vw, 32px);
}

.biz-how-badge[b-qnch7ygib7] {
    display: inline-block;
    background: var(--accent-fill-rest);
    color: var(--neutral-fill-rest);
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 24px;
    width: fit-content;
}

.biz-how-copy[b-qnch7ygib7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.biz-how-title[b-qnch7ygib7] {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
}

.biz-how-subtitle[b-qnch7ygib7] {
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.7;
    margin: 0 0 32px 0;
    color: var(--neutral-foreground-hint);
}

/* The list carries the sequence; the numbers below are the visible half of the same fact,
   which is why list-style is off rather than the numbers being decorative duplicates. */
.biz-how-steps[b-qnch7ygib7] {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin: 0;
    padding: 0;
}

.biz-how-step[b-qnch7ygib7] {
    padding-left: 20px;
    border-left: 2px solid var(--accent-fill-rest);
}

.biz-how-step-label[b-qnch7ygib7] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.biz-how-step-number[b-qnch7ygib7] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-fill-rest);
    letter-spacing: 2px;
}

.biz-how-step-divider[b-qnch7ygib7] {
    color: var(--accent-fill-rest);
    opacity: 0.5;
}

.biz-how-step-title[b-qnch7ygib7] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--neutral-foreground-rest);
}

.biz-how-step-body[b-qnch7ygib7] {
    color: var(--neutral-foreground-hint);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

/* Top-aligned, not centred: the tile starts level with the headline, the way the video sits
   opposite the copy in WhatIsWealth4Life on the life host. */
.biz-how-video[b-qnch7ygib7] {
    display: block;
}
/* /Components/Public/Pages/Business/BusinessMomentsSection.razor.rz.scp.css */
.biz-moments-root[b-joea0xhrsy] {
    width: 100%;
    min-width: 100%;
}

.biz-moments-header[b-joea0xhrsy] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 0 clamp(6px, 2vw, 32px);
}

.biz-moments-badge[b-joea0xhrsy] {
    display: inline-block;
    background: var(--accent-fill-rest);
    color: var(--neutral-fill-rest);
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 24px;
    width: fit-content;
}

.biz-moments-title[b-joea0xhrsy] {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

/* Same side inset as the header (and as the B2C FeaturesSection card grid). */
.biz-moments-cards[b-joea0xhrsy] {
    padding: 0 clamp(6px, 2vw, 32px);
}

[b-joea0xhrsy] .biz-moment-card {
    padding: 36px;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[b-joea0xhrsy] .biz-moment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13);
}

[b-joea0xhrsy] .biz-moment-card:focus-visible {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.biz-moment-icon[b-joea0xhrsy] {
    width: 64px;
    height: 64px;
    background: var(--accent-fill-rest);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.biz-moment-title[b-joea0xhrsy] {
    margin: 0 0 12px 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.biz-moment-body[b-joea0xhrsy] {
    color: var(--neutral-foreground-hint);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}
/* /Components/Public/Pages/Business/BusinessTeaser.razor.rz.scp.css */
.biz-teaser-bleed[b-w6zepqadbx] {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
}

.biz-teaser[b-w6zepqadbx] {
    position: relative;
    width: 100%;
    min-height: 50vh;
    overflow: hidden;
    /* Dark base derived from the accent token — shows through until the slide images have loaded. */
    background:
        radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--accent-fill-rest) 38%, transparent) 0%, transparent 60%),
        linear-gradient(155deg,
            color-mix(in srgb, var(--accent-fill-rest) 40%, black) 0%,
            color-mix(in srgb, var(--accent-fill-rest) 16%, black) 55%,
            black 100%);
}

.biz-teaser-slide[b-w6zepqadbx] {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: opacity 3s ease-in-out;
}

.biz-teaser-overlay[b-w6zepqadbx] {
    position: relative;
    z-index: 5;
    width: 100%;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Light scrim: just enough to carry the white type over the bright photos — darker where the
       text sits (top for the headline, bottom for the caption, plus a soft left wash), and nearly
       clear across the middle so the image stays visible. */
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, 0.32) 0%,
            rgba(0, 0, 0, 0.10) 35%,
            rgba(0, 0, 0, 0.14) 62%,
            rgba(0, 0, 0, 0.42) 100%),
        linear-gradient(to right,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.04) 55%,
            rgba(0, 0, 0, 0) 100%);
}

.biz-teaser-top[b-w6zepqadbx] {
    max-width: var(--w4l-content-max-width, 1910px);
    margin: 0 auto;
    width: 100%;
}

.biz-teaser-content[b-w6zepqadbx] {
    color: white;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
    padding: clamp(16px, 4vw, 40px);
    padding-left: clamp(20px, 6vw, 60px);
    max-width: 1100px;
}

.biz-teaser-headline[b-w6zepqadbx] {
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}

.biz-teaser-subheadline[b-w6zepqadbx] {
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    font-weight: 400;
    margin: 20px 0 0 0;
    opacity: 0.9;
    max-width: 760px;
    line-height: 1.5;
}

.biz-teaser-captions[b-w6zepqadbx] {
    text-align: center;
    color: white;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
    padding: 20px clamp(16px, 4vw, 40px) 100px;
    width: 100%;
}

.biz-teaser-caption[b-w6zepqadbx] {
    font-size: clamp(1.3rem, 3.5vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
    width: 100%;
    transition: opacity 1.2s ease-in-out;
}

@media (max-width: 639px) {
    .biz-teaser-captions[b-w6zepqadbx] {
        padding-bottom: 88px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .biz-teaser-slide[b-w6zepqadbx],
    .biz-teaser-caption[b-w6zepqadbx] {
        transition: none;
    }
}
/* /Components/Public/Pages/Business/BusinessTrustSection.razor.rz.scp.css */
.biz-trust-root[b-9hzgufqkiw] {
    max-width: var(--w4l-content-max-width, 1910px);
    margin: 0 auto;
    width: 100%;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 48px);
}

.biz-trust-header[b-9hzgufqkiw] {
    text-align: center;
    margin-bottom: clamp(32px, 5vw, 56px);
}

.biz-trust-title[b-9hzgufqkiw] {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
}

.biz-trust-subtitle[b-9hzgufqkiw] {
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.7;
    margin: 0 auto;
    color: var(--neutral-foreground-hint);
}

.biz-trust-item[b-9hzgufqkiw] {
    height: 100%;
    text-align: center;
    padding: 12px;
}

.biz-trust-icon[b-9hzgufqkiw] {
    width: 56px;
    height: 56px;
    background: var(--accent-fill-rest);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px auto;
}

.biz-trust-item-title[b-9hzgufqkiw] {
    margin: 0 0 10px 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.biz-trust-item-body[b-9hzgufqkiw] {
    color: var(--neutral-foreground-hint);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}
/* /Components/Public/Pages/Business/ForBusinessSection.razor.rz.scp.css */
.biz-pill-group[b-1acentbyr3] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}

.biz-pill[b-1acentbyr3] {
    background: var(--neutral-layer-2);
    padding: 10px 20px;
    border-radius: 100px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.biz-feature-list[b-1acentbyr3] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.biz-feature[b-1acentbyr3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.biz-feature.biz-feature-last[b-1acentbyr3] {
    margin-bottom: 0;
}

.biz-feature p[b-1acentbyr3] {
    margin: 4px 0 0 0;
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

/* /Components/Public/Pages/PaymentReturn.razor.rz.scp.css */
.payment-return[b-tvoowtu2bd] {
    max-width: 720px;
    margin: 2rem auto 4rem;
    padding: 0 1rem;
}

.payment-return-wait[b-tvoowtu2bd],
.payment-return-text[b-tvoowtu2bd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 0;
    text-align: center;
}

.payment-return-text p[b-tvoowtu2bd] {
    margin: 0 0 0.5rem;
    color: var(--neutral-foreground-hint);
}

.payment-return-text h2[b-tvoowtu2bd] {
    margin: 0;
}
/* /Components/Public/Pages/Purchase/PaymentFailurePanel.razor.rz.scp.css */
.payment-failed[b-q98ia9vg39] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 2rem 1rem;
}
.payment-failed-hint[b-q98ia9vg39] { color: var(--neutral-foreground-hint); font-size: 0.85rem; margin: 0; }
.payment-failed-actions[b-q98ia9vg39] { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 479px) {
    .payment-failed-actions[b-q98ia9vg39] { flex-direction: column; width: 100%; }
    .payment-failed-actions[b-q98ia9vg39]  fluent-button { width: 100%; }
}
/* /Components/Public/Pages/Purchase/PaymentStatusPanel.razor.rz.scp.css */
.payment-status-timeout[b-tn7b6k82dw] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
    text-align: center;
}

.payment-status-recheck[b-tn7b6k82dw] {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--accent-foreground-rest);
    text-decoration: underline;
    cursor: pointer;
}

.payment-status-timeout[hidden][b-tn7b6k82dw] {
    display: none;
}
/* /Components/Public/Pages/Purchase/PaymentStep.razor.rz.scp.css */
.payment-step[b-g4wrngiwfl] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.payment-summary[b-g4wrngiwfl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    background: var(--neutral-fill-secondary-rest);
}

.payment-row[b-g4wrngiwfl] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: var(--type-ramp-base-font-size, 14px);
}

.payment-row--credit[b-g4wrngiwfl] {
    color: var(--w4l-positive);
}

.payment-row--total[b-g4wrngiwfl] {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--neutral-stroke-rest);
    font-weight: 700;
    font-size: 1.05rem;
}

.payment-row--subscription[b-g4wrngiwfl] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: baseline;
}

.payment-row-label[b-g4wrngiwfl] {
    color: var(--neutral-foreground-hint);
}

.payment-row-desc[b-g4wrngiwfl] {
    text-align: right;
}

.payment-row--voucher[b-g4wrngiwfl] {
    display: grid;
    grid-template-columns: auto minmax(160px, 220px);
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.payment-voucher-input[b-g4wrngiwfl] {
    font-family: var(--body-font, "Segoe UI", sans-serif);
    font-size: var(--type-ramp-base-font-size, 14px);
    height: 32px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 8px;
    border: calc(var(--stroke-width, 1) * 1px) solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    background-color: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    outline: none;
    text-transform: uppercase;
}

.payment-voucher-input:hover[b-g4wrngiwfl] { border-color: var(--neutral-stroke-hover); }

.payment-voucher-input:focus[b-g4wrngiwfl] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}

.payment-voucher-input[aria-invalid="true"][b-g4wrngiwfl] { border-color: var(--w4l-negative); }

.payment-voucher-status[b-g4wrngiwfl],
.payment-voucher-error[b-g4wrngiwfl] {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    text-align: right;
}

.payment-voucher-status[b-g4wrngiwfl] { color: var(--neutral-foreground-hint); }
.payment-voucher-error[b-g4wrngiwfl]  { color: var(--w4l-negative); font-weight: 600; }

.payment-note[b-g4wrngiwfl] {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
    margin: 0;
}

.payment-term-note[b-g4wrngiwfl] {
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
}

@media (max-width: 479px) {
    .payment-row--subscription[b-g4wrngiwfl] { grid-template-columns: 1fr auto; }
    .payment-row--subscription .payment-row-desc[b-g4wrngiwfl] { grid-column: 1 / -1; text-align: left; font-size: var(--type-ramp-minus-1-font-size, 12px); color: var(--neutral-foreground-hint); }
    .payment-row--voucher[b-g4wrngiwfl] { grid-template-columns: 1fr; }
}
/* /Components/Public/Pages/Purchase/PurchaseReceiptCard.razor.rz.scp.css */
.purchase-receipt-head h2[b-y8p256m87d] { margin: 0 0 0.75rem 0; }
.purchase-receipt-head p[b-y8p256m87d]  { margin: 0; max-width: 480px; color: var(--neutral-foreground-hint); }

.purchase-receipt-facts[b-y8p256m87d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 380px;
    text-align: left;
}
.purchase-receipt-facts > div[b-y8p256m87d] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.purchase-receipt-facts > div > span:first-child[b-y8p256m87d] { color: var(--neutral-foreground-hint); }
.purchase-receipt-facts > div > span:last-child[b-y8p256m87d]  { font-weight: 600; text-align: right; word-break: break-word; }
.purchase-receipt-discount > span:last-child[b-y8p256m87d] { color: var(--w4l-positive); }

.purchase-receipt-footnote[b-y8p256m87d] {
    margin: 0;
    max-width: 480px;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

/* FluentCard MinimalStyle renders div.fluent-card-minimal-style; the scoped wrapper selector
   (0,3,0) outranks the library's own scoped padding (0,2,0). */
.purchase-receipt[b-y8p256m87d]  .fluent-card-minimal-style {
    padding: 2.5rem 3rem;
    border-radius: 16px;
    text-align: center;
}

.purchase-receipt[b-y8p256m87d]  .purchase-pay-button {
    width: 100%;
    max-width: 380px;
}

@media (max-width: 600px) {
    .purchase-receipt[b-y8p256m87d]  .fluent-card-minimal-style { padding: 1.5rem; }
}
/* /Components/Public/Pages/Purchase/TermsAcceptance.razor.rz.scp.css */
.terms-row[b-6dihdrv0wb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

.terms-links[b-6dihdrv0wb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--type-ramp-minus-1-font-size, 12px);
    color: var(--neutral-foreground-hint);
}

.terms-link[b-6dihdrv0wb] {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--accent-foreground-rest);
    text-decoration: underline;
    cursor: pointer;
}

.terms-link:hover[b-6dihdrv0wb] { color: var(--accent-foreground-hover); }
.terms-link:focus-visible[b-6dihdrv0wb] { outline: 2px solid var(--focus-stroke-outer); outline-offset: 2px; }

@media (max-width: 479px) {
    .terms-links[b-6dihdrv0wb] { padding-left: 28px; }
}
/* /Components/Public/Pages/Rechner/Shared/AffordabilityLadder.razor.rz.scp.css */
/* Price ladder (B1). Zone colours come from the semantic --w4l-ladder-* tokens in tokens.css
   (light + dark); no raw hex here, per Docs/Css.md. */

.lad[b-3mazl0t8e9] {
    display: flex;
    flex-direction: column;
    gap: var(--w4l-space-xs, 8px);
    font-variant-numeric: tabular-nums;
}

/* ── Axis: needle label, zone track, scale ─────────────────────────────────── */

.lad-axis[b-3mazl0t8e9] {
    position: relative;
    padding-top: 24px; /* room for the needle label above the track */
}

.lad-track[b-3mazl0t8e9] {
    display: flex;
    gap: 2px;
    height: 46px;
    border-radius: 4px;
    overflow: hidden;
}

.lad-zone[b-3mazl0t8e9] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 0 8px;
    overflow: hidden;
}

/* The out-of-reach zone soaks up whatever is left of the axis. */
.lad-zone--out[b-3mazl0t8e9] {
    flex: 1 1 auto;
}

.lad-zone--comfort[b-3mazl0t8e9] {
    background: var(--w4l-ladder-comfort-bg);
    color: var(--w4l-ladder-comfort-ink);
}

.lad-zone--stretch[b-3mazl0t8e9] {
    background: var(--w4l-ladder-stretch-bg);
    color: var(--w4l-ladder-stretch-ink);
}

.lad-zone--out[b-3mazl0t8e9] {
    background: var(--w4l-ladder-out-bg);
    color: var(--w4l-ladder-out-ink);
}

.lad-zone-label[b-3mazl0t8e9],
.lad-zone-sub[b-3mazl0t8e9] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lad-zone-label[b-3mazl0t8e9] {
    font-size: 0.8rem;
    font-weight: 600;
}

.lad-zone-sub[b-3mazl0t8e9] {
    font-size: 0.7rem;
    opacity: 0.85;
}

/* ── Needle ────────────────────────────────────────────────────────────────── */

.lad-needle[b-3mazl0t8e9] {
    position: absolute;
    top: 0;
    height: 70px; /* label row + full track height */
    border-left: 2px solid var(--neutral-foreground-rest);
    pointer-events: none;
}

.lad-needle-label[b-3mazl0t8e9] {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 0 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.lad-needle.is-start > .lad-needle-label[b-3mazl0t8e9] {
    transform: translateX(0);
}

.lad-needle.is-end > .lad-needle-label[b-3mazl0t8e9] {
    transform: translateX(-100%);
}

/* ── Scale row ─────────────────────────────────────────────────────────────── */

.lad-scale[b-3mazl0t8e9] {
    position: relative;
    height: 36px;
    margin-top: 4px;
}

.lad-tick[b-3mazl0t8e9] {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.72rem;
    color: var(--neutral-foreground-hint);
}

.lad-tick.is-start[b-3mazl0t8e9] {
    transform: translateX(0);
}

.lad-tick.is-end[b-3mazl0t8e9] {
    transform: translateX(-100%);
}

.lad-tick--max[b-3mazl0t8e9] {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.lad-bound[b-3mazl0t8e9] {
    display: block;
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
}

/* ── Needle detail ─────────────────────────────────────────────────────────── */

.lad-detail[b-3mazl0t8e9] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--neutral-foreground-rest);
}

/* ── Requirements table ────────────────────────────────────────────────────── */

.lad-req > summary[b-3mazl0t8e9] {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

.lad-req-scroll[b-3mazl0t8e9] {
    overflow-x: auto;
    margin-top: 8px;
}

.lad-req-table[b-3mazl0t8e9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.lad-req-table th[b-3mazl0t8e9],
.lad-req-table td[b-3mazl0t8e9] {
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    white-space: nowrap;
}

.lad-req-table thead th[b-3mazl0t8e9] {
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

.lad-req-table tbody th[b-3mazl0t8e9] {
    font-weight: 400;
    white-space: normal;
}

.lad-req-table .num[b-3mazl0t8e9] {
    text-align: right;
}

.lad-req-note[b-3mazl0t8e9] {
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--neutral-foreground-hint);
}

@media (max-width: 639px) {
    .lad-zone-sub[b-3mazl0t8e9] {
        display: none;
    }

    .lad-track[b-3mazl0t8e9] {
        height: 38px;
    }

    .lad-needle[b-3mazl0t8e9] {
        height: 62px;
    }
}
/* /Components/Public/Sections/IntroVideoSection.razor.rz.scp.css */
/* Poster tile — keeps the 16:9 box the placeholder used, so the two-column layout of
   WhatIsWealth4Life does not shift when the video becomes available. */
.w4l-intro-video[b-xneyr2g65p] {
    width: 100%;
}

.w4l-intro-video-tile[b-xneyr2g65p] {
    position: relative;
    display: block;
    width: 100%;
    padding: 0 0 56.25% 0;
    border: none;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--neutral-layer-1);
    background-size: cover;
    background-position: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.w4l-intro-video-tile-static[b-xneyr2g65p] {
    cursor: default;
}

.w4l-intro-video-play[b-xneyr2g65p] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.w4l-intro-video-tile:hover .w4l-intro-video-play[b-xneyr2g65p],
.w4l-intro-video-tile:focus-visible .w4l-intro-video-play[b-xneyr2g65p] {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.w4l-intro-video-tile:focus-visible[b-xneyr2g65p] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 3px;
}

/* Lightbox, built as a window: the dialog is the chrome, the video is its content area, and
   the close button lives in the header band like a window control. Exactly one edge differs:
   the header at the top is generous enough to carry the control, the other three are the same
   narrow bezel, so the picture keeps the space.

   Because this is a window and not a passepartout, the outer radius is uniform and does NOT
   follow the concentric rule (outer = inner + frame): with two different frame widths that
   rule would demand a different radius on the top corners than on the bottom ones, which is
   exactly what makes an asymmetric frame look accidental.

   A click on the chrome reports target === dialog exactly like a click on ::backdrop, so
   videoModal.js dismisses on it unchanged -- and the dismiss zone grows by the frame width on
   every side, which matters on a phone in landscape where the real backdrop is ~23px tall. */
.w4l-intro-video-modal[b-xneyr2g65p] {
    --w4l-chrome-top: 40px;
    --w4l-chrome-side: 14px;

    box-sizing: border-box;
    max-width: 92vw;
    max-height: 88vh;
    padding: var(--w4l-chrome-top) var(--w4l-chrome-side) var(--w4l-chrome-side);
    border: none;
    border-radius: 14px;
    /* Nothing overflows, but a clipped focus ring on the close button would. */
    overflow: visible;
    background: rgba(255, 255, 255, 0.1);
    /* Hairline plus drop shadow are what read as "window" rather than "padded box". */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
                0 30px 80px rgba(0, 0, 0, 0.5);
}

.w4l-intro-video-modal[b-xneyr2g65p]::backdrop {
    background: rgba(0, 0, 0, 0.78);
}

/* The sizing maths lives here, not on the dialog: with aspect-ratio on the outer box it is the
   OUTER contour that becomes 16:9, and the video inside would be off-ratio.

   All three budgets are expressed as a WIDTH so the height stays derived from the ratio. A
   max-height would clamp the height while leaving the width alone: the box then turns wider
   than 16:9 and the video letterboxes inside it -- invisible on a black dialog, but inside a
   frame it means the frame wraps black bars instead of the picture. Reproduce with a phone in
   landscape (844x390), where the height budget wins. */
.w4l-intro-video-frame[b-xneyr2g65p] {
    box-sizing: border-box;
    width: min(calc(92vw - 2 * var(--w4l-chrome-side)),
               calc(1400px - 2 * var(--w4l-chrome-side)),
               calc((88vh - var(--w4l-chrome-top) - var(--w4l-chrome-side)) * 16 / 9));
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
}

.w4l-intro-video-frame video[b-xneyr2g65p] {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
}

/* Vertically centred in the header band; horizontally the GLYPH right-aligns with the right
   edge of the picture, so the control sits on the same line as the content instead of drifting
   into the narrow side margin. Hence half a glyph width past the side chrome, minus half the
   hit box. The 44px box is hit area only; the visible mark is the glyph. */
.w4l-intro-video-close[b-xneyr2g65p] {
    position: absolute;
    top: calc(var(--w4l-chrome-top) / 2 - 22px);
    right: calc(var(--w4l-chrome-side) + 10px - 22px);
    z-index: 1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

/* ::deep because FluentIcon renders the svg, so it carries no scope attribute of ours. */
.w4l-intro-video-close[b-xneyr2g65p]  svg {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.w4l-intro-video-close:hover[b-xneyr2g65p]  svg,
.w4l-intro-video-close:focus-visible[b-xneyr2g65p]  svg {
    opacity: 1;
}

.w4l-intro-video-close:focus-visible[b-xneyr2g65p] {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 50%;
}

/* Chrome costs picture width, which is scarce on a phone. Keep the asymmetry, shrink it. */
@media (max-width: 640px) {
    .w4l-intro-video-modal[b-xneyr2g65p] {
        --w4l-chrome-top: 32px;
        --w4l-chrome-side: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .w4l-intro-video-play[b-xneyr2g65p],
    .w4l-intro-video-tile:hover .w4l-intro-video-play[b-xneyr2g65p],
    .w4l-intro-video-tile:focus-visible .w4l-intro-video-play[b-xneyr2g65p] {
        transition: none;
        transform: translate(-50%, -50%);
    }

    .w4l-intro-video-close[b-xneyr2g65p]  svg {
        transition: none;
    }
}
/* /Components/Public/Sections/PricingSection.razor.rz.scp.css */
/* Promotion display on a plan card. The rest of this component's CSS still lives in the inline
   <style> block above the markup; only the new promotion bits are scoped. */

/* The base price a running promotion replaces. Muted and struck through, on its own line so the
   promotional price keeps the card's usual price weight. */
.w4l-price-was[b-qtqeillw5i] {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: line-through;
    color: var(--neutral-foreground-hint);
    margin-bottom: 2px;
}

/* Campaign label next to the price, e.g. "Weihnachtsangebot". Operator-authored text of unknown
   length, so it wraps rather than stretching the card. */
.w4l-promo-badge[b-qtqeillw5i] {
    display: block;
    width: fit-content;
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--accent-fill-rest);
    color: var(--neutral-fill-rest);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.4;
    max-width: 100%;
    overflow-wrap: anywhere;
}
/* /Components/Public/Sections/ProductStorySections.razor.rz.scp.css */
/* Story strip on /Product. Mobile-first: every row stacks with the question/text FIRST and the
   media below it - a document-length screenshot before any context reads as a wall of pixels on
   a phone. From 900px a row becomes two columns; the zigzag side and the presentation variant
   (standard/wide/tall/portrait) are explicit classes set in the .razor, chosen per screenshot
   aspect ratio. Colours are FluentUI tokens only - no raw hex (theming lint). */

/* Badge, title and subtitle share one measure so they read as a single block. Without the cap the
   title runs nearly the full container width while the subtitle breaks at its own 70ch, which
   leaves the subtitle looking like a half-width column stranded on the left. */
.pss-header[b-mrt14ypdzn] {
    display: flex;
    flex-direction: column;
    padding: 0 clamp(6px, 2vw, 32px);
    max-width: 1180px;
}

.pss-badge[b-mrt14ypdzn] {
    display: inline-block;
    width: fit-content;
    background: var(--accent-fill-rest);
    color: var(--neutral-fill-rest) !important;
    padding: 12px 24px;
    border-radius: 100px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 24px;
}

.pss-title[b-mrt14ypdzn] {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 20px 0;
}

.pss-subtitle[b-mrt14ypdzn] {
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.7;
    color: var(--neutral-foreground-hint);
    margin: 0 0 32px 0;
    /* Wide enough to break at roughly the same point as the wrapped title above it - at 70ch it
       ended near half the title width and read as a stranded column. */
    max-width: min(100%, 1000px);
}

.pss-headline[b-mrt14ypdzn] {
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 14px 0;
}

.pss-body[b-mrt14ypdzn] {
    font-size: clamp(0.98rem, 1.6vw, 1.08rem);
    line-height: 1.75;
    color: var(--neutral-foreground-hint);
    margin: 0 0 18px 0;
    max-width: 65ch;
}

.pss-points[b-mrt14ypdzn] {
    list-style: none;
    margin: 0 0 18px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pss-points li[b-mrt14ypdzn] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.98rem;
    line-height: 1.5;
}

/* Intro block: the clip runs beside the copy. Mobile keeps the text first, same as every
   story row. */
.pss-intro[b-mrt14ypdzn] {
    padding: 0 clamp(6px, 2vw, 32px);
    margin-bottom: clamp(48px, 8vw, 96px);
}

.pss-intro-row[b-mrt14ypdzn] {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 40px);
}

/* The collaboration block closes the intro as its own beat - accent-tinted like the premium
   boxes, so it reads as a set-off endpoint rather than trailing body text. */
.pss-comm[b-mrt14ypdzn] {
    margin-top: 28px;
    padding: 20px clamp(16px, 3vw, 28px);
    border-radius: 16px;
    background: color-mix(in srgb, var(--accent-fill-rest) 7%, var(--neutral-layer-2));
    border: 1px solid color-mix(in srgb, var(--accent-fill-rest) 22%, transparent);
}

.pss-comm-body[b-mrt14ypdzn] {
    font-size: 0.98rem;
    line-height: 1.7;
    color: var(--neutral-foreground-hint);
    margin: 0 0 16px 0;
    max-width: 70ch;
}

.pss-comm-icons[b-mrt14ypdzn] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-bottom: 14px;
}

.pss-comm-icons span[b-mrt14ypdzn] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 600;
}

.pss-comm-link[b-mrt14ypdzn] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent-foreground-rest);
    text-decoration: none;
}

.pss-comm-link:hover[b-mrt14ypdzn] { text-decoration: underline; }

/* The box spans the row, but its text breaks at 70ch for readability - which left a wide empty
   band on the right. Rather than shrinking the box, the two halves are put side by side: the
   copy keeps its measure and the channels fill the space that was empty. */
@media (min-width: 900px) {
    .pss-comm[b-mrt14ypdzn] {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: clamp(32px, 4vw, 64px);
    }

    /* Explicit placement: the three children would otherwise flow in source order and scatter
       across the two columns. Copy and its call to action stay together on the left, the four
       channels fill the right column across both rows. */
    .pss-comm-body[b-mrt14ypdzn] {
        grid-column: 1;
        grid-row: 1;
    }

    .pss-comm-link[b-mrt14ypdzn] {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .pss-comm-icons[b-mrt14ypdzn] {
        grid-column: 2;
        grid-row: 1 / span 2;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 0;
    }
}

/* One question per row. Text before media on mobile (media order 2). */
.pss-story[b-mrt14ypdzn] {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 40px);
    padding: 0 clamp(6px, 2vw, 32px);
    margin-bottom: clamp(56px, 9vw, 110px);
}

.pss-media[b-mrt14ypdzn] {
    min-width: 0;
    order: 2;
}

/* Every story shot is an element crop at roughly 712 CSS px native width (1424 device px at
   DPR 2) - cap at that so the UI text never upscales soft, even on retina. */
.pss-story .pss-media[b-mrt14ypdzn] {
    width: 100%;
    max-width: 712px;
}

/* The intro clip is encoded at 1600x1000, so 800 CSS px is its native width at DPR 2. The cap
   is what makes the encode size decidable at all: the content container goes up to 2250px, and
   without it the required resolution would follow the visitor's monitor. */
.pss-intro .pss-media[b-mrt14ypdzn] {
    width: 100%;
    max-width: 800px;
    justify-self: center;
}

/* Captions sit under left-aligned screenshots - align them with the image edge, not centered. */
.pss-media[b-mrt14ypdzn]  .ts-caption,
.pss-intro[b-mrt14ypdzn]  .ts-caption {
    text-align: left;
}

/* Top-aligned, not centred: each row's copy starts at the image's top edge, so the question
   and the visual answer read as one unit regardless of how tall either side is. */
.pss-text[b-mrt14ypdzn] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.pss-step[b-mrt14ypdzn] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-foreground-rest);
    margin-bottom: 10px;
}

.pss-kicker[b-mrt14ypdzn] {
    font-size: clamp(1rem, 1.9vw, 1.15rem);
    font-style: italic;
    line-height: 1.5;
    color: var(--neutral-foreground-rest);
    margin-bottom: 12px;
}

.pss-premium[b-mrt14ypdzn] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 6px;
    padding: 14px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-fill-rest) 7%, var(--neutral-layer-2));
    border: 1px solid color-mix(in srgb, var(--accent-fill-rest) 22%, transparent);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--neutral-foreground-hint);
}

.pss-cta[b-mrt14ypdzn] {
    text-align: center;
    padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 48px);
    border-radius: 20px;
    background: var(--neutral-layer-2);
    margin: 0 clamp(6px, 2vw, 32px);
}

.pss-cta .pss-body[b-mrt14ypdzn] { margin: 0 auto 24px auto; }

.pss-cta-buttons[b-mrt14ypdzn] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

@media (min-width: 900px) {
    /* Intro: copy left, clip right. The clip column is given more room than the text - the
       totale has to stay readable as a whole application, and the copy is deliberately short.
       Top-aligned rather than centred: the copy is much shorter than the clip is tall, and
       centring it leaves a band of empty space above the headline that reads as a mistake. */
    .pss-intro-row[b-mrt14ypdzn] {
        display: grid;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
        align-items: start;
        gap: clamp(32px, 4vw, 64px);
    }

    /* Top-aligned like the intro row: text and image start on the same line. */
    .pss-story[b-mrt14ypdzn] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: clamp(32px, 4vw, 64px);
    }

    /* Zigzag: the side is an explicit per-row class assigned in the .razor loop. The media
       keeps order 2 (right column) unless the row pulls it left. */
    .pss-story--media-left .pss-media[b-mrt14ypdzn] { order: -1; }
}
/* /Components/Shared/CantonPicker.razor.rz.scp.css */
/* CantonPicker — input-styled trigger (reuses global .ym-field/.ym-label/.ym-row
   from app.css so label + focus underline match the other form fields) plus a
   popover of small Wappen chips. Native elements only (no <FluentCard>/FAST) →
   leak-free in the 26-item loop. Flag-chip styles duplicated here (scoped CSS does
   not cross components — kept in sync with the Tax-page picker). */

/* Anchor for the absolutely-positioned popover. */
.canton-anchor[b-kxhzybsvek] {
    position: relative;
    display: block;
}

/* ── Trigger: a <button> wearing the shared .ym-row input chrome ──── */
.canton-row[b-kxhzybsvek] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    cursor: pointer;
    gap: 8px;
    padding: 0 11px;
    font: inherit;
    color: inherit;
    text-align: left;
}

.canton-row-flag[b-kxhzybsvek] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}

.canton-row-text[b-kxhzybsvek] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--type-ramp-base-font-size, 14px);
    color: var(--neutral-foreground-rest);
}

/* Empty state (no canton selected yet): placeholder text in the muted hint colour. */
.canton-row-placeholder[b-kxhzybsvek] {
    color: var(--neutral-foreground-hint);
}

.canton-row-caret[b-kxhzybsvek] {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    color: var(--neutral-foreground-hint);
}

/* ── Popover (overlay — like a dropdown but not a native <select>) ──── */
.canton-backdrop[b-kxhzybsvek] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

.canton-popover[b-kxhzybsvek] {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    padding: 10px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Opt-in right-edge anchoring (AlignEnd) — for triggers in a narrow right-hand
   column, where the wider chip grid would otherwise overflow the container. */
.canton-popover-end[b-kxhzybsvek] {
    left: auto;
    right: 0;
}

/* Fixed x-y grid — all 26 cantons visible at once, no scrollbar (6 × 5). */
.flag-chip-wrap[b-kxhzybsvek] {
    display: grid;
    grid-template-columns: repeat(6, 56px);
    gap: 6px;
}

@media (max-width: 479px) {
    .flag-chip-wrap[b-kxhzybsvek] {
        grid-template-columns: repeat(4, 56px);
    }
}

/* ── Flag-chips (exact Tax-page dimensions: 56px chip, 24px Wappen) ─── */
.flag-chip[b-kxhzybsvek] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 56px;
    box-sizing: border-box;
    padding: 4px 2px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 5px;
    background: var(--neutral-fill-stealth-rest);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.flag-chip:hover[b-kxhzybsvek] {
    background: var(--neutral-fill-secondary-hover);
}

.flag-chip:focus-visible[b-kxhzybsvek] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

.flag-chip img[b-kxhzybsvek] {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}

.flag-chip span[b-kxhzybsvek] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.flag-chip-selected[b-kxhzybsvek] {
    border-color: var(--accent-fill-rest);
    background: color-mix(in srgb, var(--accent-fill-rest) 12%, transparent);
    box-shadow: 0 0 0 1px var(--accent-fill-rest);
}
/* /Components/Shared/CategorySection.razor.rz.scp.css */
.cat-section + .cat-section[b-ggbvbr5mzf] {
    margin-top: 18px;
}

.cat-section__title[b-ggbvbr5mzf] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--neutral-foreground-hint);
    margin: 0 0 8px 2px;
}

.cat-section__grid[b-ggbvbr5mzf] {
    display: grid;
    /* auto-fill + minmax keeps tiles squarish and bounded: more columns as the card widens,
       so a square never balloons on a wide screen. */
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

/* Wizard areas mask: pills + deutsche Labels brauchen breitere Kacheln (Docs/Wizard.md §4). */
.cat-section__grid--wide[b-ggbvbr5mzf] {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

/* Touch/coarse pointer: breitere Kacheln + mehr Gap gegen Fehl-Taps (Desktop-Dichte bleibt). */
@media (pointer: coarse) {
    .cat-section__grid[b-ggbvbr5mzf] {
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
        gap: 12px;
    }
}

/* Mobile: einspaltige Liste statt Grid (Touch-Targets, lange Labels). */
@media (max-width: 479px) {
    .cat-section__grid--wide[b-ggbvbr5mzf] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/CategoryTile.razor.rz.scp.css */
.cat-tile-wrap[b-1b00zgp39q] {
    position: relative;
    width: 100%;
}

.cat-tile[b-1b00zgp39q] {
    position: relative;
    --cat-color: var(--w4l-category-default);
    /* Icon colour, state-driven. Off = muted/disabled; overridden on hover + when selected. */
    --cat-icon: var(--neutral-foreground-hint);
    width: 100%;
    /* Square tiles: height follows the grid column width instead of a fixed min-height. */
    aspect-ratio: 1 / 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 5px;
    border-radius: 10px;
    border: 1.5px solid color-mix(in srgb, var(--neutral-stroke-rest) 60%, transparent);
    background: transparent;
    color: var(--neutral-foreground-rest);
    cursor: default;
    font: inherit;
    transition: background-color .15s ease, border-color .15s ease;
}

/* Hover (any state): icons + wash take the tile's own area hue (not accent), keeping the
   soft transparent look. */
.cat-tile:hover[b-1b00zgp39q] {
    --cat-icon: var(--cat-color);
    border-color: color-mix(in srgb, var(--cat-color) 55%, transparent);
    background: color-mix(in srgb, var(--cat-color) 8%, transparent);
}

.cat-tile--off[b-1b00zgp39q] {
    cursor: pointer;
}

/* Inactive (togglable, not gated): dashed border + muted label + a persistent "+" glyph so the
   "tap to add" affordance reads without hover — and stays visually distinct from a gated tile
   (which keeps a solid border + dim + PRO badge). */
.cat-tile--off:not(.cat-tile--gated)[b-1b00zgp39q] {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--neutral-stroke-rest) 45%, transparent);
}

.cat-tile--off:not(.cat-tile--gated) .cat-tile__label[b-1b00zgp39q] {
    color: var(--neutral-foreground-hint);
}

.cat-tile--off:not(.cat-tile--gated)[b-1b00zgp39q]::after {
    content: "+";
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    pointer-events: none;
}

/* Navigation-only tiles have a clickable body (base .cat-tile is cursor:default). */
.cat-tile--nav[b-1b00zgp39q] {
    cursor: pointer;
}

.cat-tile:focus-visible[b-1b00zgp39q] {
    outline: 2px solid var(--cat-color);
    outline-offset: 2px;
}

/* Selected: hover-style (not solid-filled) — area-coloured icon + soft transparent area wash.
   The :hover variant keeps the area colour so selected tiles don't flip to accent on hover. */
.cat-tile--on[b-1b00zgp39q],
.cat-tile--on:hover[b-1b00zgp39q] {
    --cat-icon: var(--cat-color);
    border-color: color-mix(in srgb, var(--cat-color) 55%, transparent);
    background: color-mix(in srgb, var(--cat-color) 12%, transparent);
    color: var(--neutral-foreground-rest);
}

.cat-tile--gated[b-1b00zgp39q] {
    opacity: .55;
    cursor: not-allowed;
}

.cat-tile__label[b-1b00zgp39q] {
    font-size: var(--type-ramp-base-font-size, 14px);
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    /* Square + narrow tiles can't fit long labels on one line — clamp to 2 lines. */
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Wizard mode (Docs/Wizard.md §4): pills below the body, hint line, ✨ badge ── */

.cat-tile--wizard[b-1b00zgp39q] {
    /* Pills sit below the button inside the wrap — no square constraint. */
    aspect-ratio: auto;
    min-height: 84px;
}

.cat-tile--interactive[b-1b00zgp39q] {
    cursor: pointer;
}

.cat-tile__hint[b-1b00zgp39q] {
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--neutral-foreground-hint);
    text-align: center;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cat-tile__suggest[b-1b00zgp39q] {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    font-size: 13px;
    line-height: 1;
    pointer-events: auto;
}


.cat-tile__feature[b-1b00zgp39q],
.cat-tile__close[b-1b00zgp39q],
.cat-tile__nav[b-1b00zgp39q] {
    position: absolute;
    right: 6px;
    z-index: 1;
}

.cat-tile__feature[b-1b00zgp39q],
.cat-tile__close[b-1b00zgp39q] {
    top: 6px;
}

.cat-tile__nav[b-1b00zgp39q] {
    bottom: 6px;
}
/* /Components/Shared/GanttTimeline.razor.rz.scp.css */
/* GanttTimeline — Scoped CSS */

/* Shared column layout for header + data rows */
.gantt-container[b-ptko59m834] {
    /* Gutter aus dem globalen Token (tokens.css) — Charts, die sich an den Lanes
       ausrichten (YAxisWidthPx), pinnen denselben Wert als int. */
    --gantt-label-width: var(--w4l-timeline-gutter, 220px);
    width: 100%;
    font-size: 0.8125rem;
}

/* ── Header: year axis ── */
.gantt-header[b-ptko59m834] {
    display: grid;
    grid-template-columns: var(--gantt-label-width) 1fr;
    /* Headroom so a raised marker label (e.g. the marriage marker) sits ABOVE the year numbers
       instead of overlapping them. Grows by 13px per extra stagger row when labels collide. */
    padding-top: calc(16px + var(--gantt-marker-rows, 0) * 13px);
}

.gantt-header-label[b-ptko59m834] {
    /* Empty spacer, same width as label column */
}

.gantt-header-axis[b-ptko59m834] {
    display: flex;
    position: relative;
    border-left: 1px solid var(--neutral-stroke-rest);
    border-right: 1px solid var(--neutral-stroke-divider-rest);
    /*height: 18px;*/
    align-items: flex-end;
    /* Same tick-line background as .gantt-timeline for pixel-perfect alignment */
    background-image: linear-gradient(
        to right,
        var(--neutral-stroke-divider-rest) 1px,
        transparent 1px
    );
    background-size: calc(100% / var(--gantt-total-years)) 100%;
    background-position: left bottom;
    background-repeat: repeat-x;
}

.gantt-axis-cell[b-ptko59m834] {
    flex: 1;
    min-width: 0;
    position: relative;
    height: 5px;
    align-self: flex-end;
}


.gantt-axis-label[b-ptko59m834] {
    position: absolute;
    bottom: 100%;
    left: 0;
    transform: translateX(-50%);
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    user-select: none;
    line-height: 1;
    padding-bottom: 2px;
}

/* ── Data rows: label + timeline ── */
.gantt-row[b-ptko59m834] {
    display: grid;
    grid-template-columns: var(--gantt-label-width) 1fr;
    align-items: center;
    min-height: 36px;
    cursor: pointer;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
    transition: background-color 0.15s ease;
}

.gantt-row:hover[b-ptko59m834] {
    background-color: var(--neutral-fill-secondary-hover);
}

/* Non-interactive row (CanSelectItem → false): no pointer, no hover highlight. */
.gantt-row-static[b-ptko59m834] {
    cursor: default;
}
.gantt-row-static:hover[b-ptko59m834] {
    background-color: transparent;
}

/* Empty-canvas placeholder lane (ShowEmptyScale, no items yet): keep the tick-grid timeline but
   drop the between-rows hairline — there's no peer below it to separate. Stretch the cells to the
   full lane height (the row default centers them, which would collapse the empty timeline cell to
   just its padding → stunted ticks); a touch of extra height so it reads as an intentional canvas. */
.gantt-row-empty[b-ptko59m834] {
    border-bottom: none;
    align-items: stretch;
    min-height: 48px;
}

/* Full-height tick grid + centered hint on the empty canvas. */
.gantt-row-empty .gantt-timeline[b-ptko59m834] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Muted, non-interactive empty-state hint sitting over the tick grid. */
.gantt-empty-hint[b-ptko59m834] {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--neutral-foreground-hint);
    text-align: center;
    padding: 0 16px;
    user-select: none;
    pointer-events: none;
}

.gantt-row-selected[b-ptko59m834] {
    background-color: var(--neutral-fill-secondary-active);
}

/* ── Label (left column) ── */
.gantt-label[b-ptko59m834] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 4px;
    font-size: 0.75rem;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Timeline area (right column) ── */
.gantt-timeline[b-ptko59m834] {
    position: relative;
    padding: 4px 0;
    border-left: 1px solid var(--neutral-stroke-rest);
    /* Vertical tick lines at year boundaries via repeating background */
    background-image: linear-gradient(
        to right,
        var(--neutral-stroke-divider-rest) 1px,
        transparent 1px
    );
    background-size: calc(100% / var(--gantt-total-years)) 100%;
    background-position: left;
    border-right: 1px solid var(--neutral-stroke-divider-rest);
}

/* ── Marker line (e.g. marriage snapshot) ── */
.gantt-marker[b-ptko59m834] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px dashed var(--accent-fill-rest);
    pointer-events: none;
    z-index: 1;
}

.gantt-marker-label[b-ptko59m834] {
    position: absolute;
    /* Raised one row above the year labels (which sit at bottom: 100% of the axis
       cells) so the marriage marker never overlaps the year numbers. */
    bottom: calc(100% + 13px);
    transform: translateX(-50%);
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--accent-fill-rest);
    white-space: nowrap;
    user-select: none;
    line-height: 1;
    padding-bottom: 2px;
}

/* ── Bar ── */
/* Slider-style phase (unselected): transparent inner fill + a neutral/grey frame that matches the
   multi-lane phase bands (.cdt-band / .ist-band use the same --neutral-stroke-strong-rest), so a
   standard single-item lane reads consistently with the segmented lanes. Selecting a phase both
   raises the inner fill AND restores the accent/custom-coloured border (see .gantt-bar-selected) so
   the active/being-edited phase reads as stronger/more prominent — but it stays a bit translucent. */
.gantt-bar[b-ptko59m834] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--accent-fill-rest) 20%, transparent);
    /* Neutral, theme-adaptive frame (same as the multi-lane bands). Custom-coloured bars that set
       their own inline `border-color` (e.g. SolidBar) still win; those that only set `color:` fall
       back to this grey frame when unselected and light up (currentColor) once selected. */
    border: 1.4px solid var(--neutral-stroke-strong-rest);
    color: var(--accent-fill-rest);
    font-size: 0.75rem;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-height: 24px;
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
    box-sizing: border-box;
}

/* Sehr kurze Segmente (echte Breite < 2% der Skala): der horizontale Padding-Sockel entfällt,
   sonst erzwingt box-sizing:border-box (padding 2×8px + border) ~19px Mindestbreite und ein
   1-Monats-Segment (z.B. abgeleitete ALV-Lücke) läse sich auf einer Jahrzehnte-Skala als ganzer
   Jahresblock. min-width hält ein kleines Klickziel. */
.gantt-bar-narrow[b-ptko59m834] {
    padding-left: 0;
    padding-right: 0;
    min-width: 6px;
}

/* Mit sichtbaren Grips (selektiert + draggable) braucht der schmale Balken wieder Griff-Fläche —
   beide 12px-Knöpfe auf 6px würden vollständig überlappen. */
.gantt-bar-narrow.gantt-bar-draggable[b-ptko59m834] {
    min-width: 18px;
}

.gantt-bar:hover[b-ptko59m834] {
    background-color: color-mix(in srgb, var(--accent-fill-rest) 32%, transparent);
}

.gantt-bar-selected[b-ptko59m834] {
    background-color: color-mix(in srgb, var(--accent-fill-rest) 60%, transparent);
    /* Selection lights the frame back up to the bar's accent/custom colour (currentColor), so the
       active phase stands out against the neutral unselected frames — unchanged from before. */
    border-color: currentColor;
}

.gantt-bar-selected:hover[b-ptko59m834] {
    background-color: color-mix(in srgb, var(--accent-fill-rest) 70%, transparent);
}

/* ── Drag/Resize (opt-in via Draggable) ── */
/* Only the selected, drag-enabled bar carries these. Grips sit inset at the bar edges;
   the bar body itself is the move target. Pure HTML/CSS — no FAST components. */
.gantt-bar-draggable[b-ptko59m834] {
    position: relative;
    /* Let the round knobs straddle the edges and the bubble sit above without being clipped
       by the bar's overflow:hidden. Draggable bars (opt-in) carry no inline text content. */
    overflow: visible;
}

/* Whole-bar move is only offered when both edges are inside the scale. */
.gantt-bar-movable[b-ptko59m834] {
    cursor: grab;
}

.gantt-bar-movable:active[b-ptko59m834] {
    cursor: grabbing;
}

.gantt-grip[b-ptko59m834] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
    z-index: 2;
    touch-action: none;
}

/* Small round knob, consistent with the Residence/Domicile boundary handles. */
.gantt-grip[b-ptko59m834]::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--neutral-layer-1);
    border: 1.5px solid var(--neutral-foreground-rest);
    box-sizing: border-box;
    transition: transform 0.1s ease;
}

.gantt-grip:hover[b-ptko59m834]::before,
.gantt-grip:focus-visible[b-ptko59m834]::before {
    transform: scale(1.18);
}

.gantt-grip:focus-visible[b-ptko59m834] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -1px;
    border-radius: 50%;
}

/* The knobs straddle the bar edges (half outside) like a typical handle. */
.gantt-grip-start[b-ptko59m834] {
    left: -8px;
}

.gantt-grip-end[b-ptko59m834] {
    right: -8px;
}

/* Live date readout during drag (toggled visible by ganttDrag.js). One bubble per handle,
   sitting ABOVE the corresponding round knob: resize shows the moving one, move shows both. */
.gantt-bubble[b-ptko59m834] {
    position: absolute;
    bottom: calc(100% + 7px);
    padding: 1px 6px;
    border-radius: 4px;
    /* Neutral readout (consistent with the Residence boundary bubble), not accent-coloured. */
    background-color: var(--neutral-foreground-rest);
    color: var(--neutral-layer-1);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}

.gantt-bubble-start[b-ptko59m834] {
    left: 0;
    transform: translateX(-50%);
}

.gantt-bubble-end[b-ptko59m834] {
    right: 0;
    transform: translateX(50%);
}

/* ── Diamond (event) mode: one lane, one point-marker per item ── */
.gantt-diamond-lane[b-ptko59m834] {
    min-height: 44px;
    cursor: default;
}

/* Give the lane's timeline a real height so the absolutely-positioned diamonds have a
   vertical reference (top:50%) — absolute children contribute no height themselves. */
.gantt-diamond-lane .gantt-timeline[b-ptko59m834] {
    min-height: 40px;
}

/* Each diamond is a .gantt-bar, but absolutely positioned on the shared lane (margin-left = its
   month position, kept in sync by ganttDrag.settleBar). The rotated square is a ::before so the
   bar's own drag-transform never fights the diamond's rotation. min-width gives a comfortable
   grab/click target even though the point event spans a single month. */
.gantt-diamond[b-ptko59m834] {
    position: absolute;
    top: 50%;
    /* Vertical centering via margin (NOT transform): ganttDrag sets the bar's inline
       transform:translateX during a move, which would otherwise clobber a translateY. */
    margin-top: -10px;
    min-width: 20px;
    height: 20px;
    padding: 0;
    background-color: transparent !important;
    border: none !important;
    overflow: visible;
}

.gantt-diamond[b-ptko59m834]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: color-mix(in srgb, var(--accent-fill-rest) 70%, transparent);
    border: 1.5px solid var(--accent-fill-rest);
    border-radius: 2px;
    pointer-events: none;
    transition: transform 0.1s ease;
}

.gantt-diamond:hover[b-ptko59m834]::before {
    background-color: var(--accent-fill-rest);
}

.gantt-diamond-selected[b-ptko59m834]::before {
    background-color: var(--accent-fill-rest);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-fill-rest) 30%, transparent);
}

/* Custom diamond content (DiamondTemplate): the rotated square gives way to the caller's
   glyph (emoji / count badge). Centered like the ::before; pointer-events stay on the bar. */
.gantt-diamond--custom[b-ptko59m834]::before {
    display: none;
}

.gantt-diamond[b-ptko59m834]  .gantt-diamond-content {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 1;
}

/* Touch: breitere Grips (16px-Hit ist für Finger zu klein) + grösserer Knob; Diamanten bekommen
   eine unsichtbare Hit-Erweiterung (::after, symmetrisch — min-width würde nur nach rechts wachsen). */
@media (pointer: coarse) {
    .gantt-grip[b-ptko59m834] { width: 32px; }
    .gantt-grip-start[b-ptko59m834] { left: -16px; }
    .gantt-grip-end[b-ptko59m834] { right: -16px; }

    .gantt-grip[b-ptko59m834]::before { width: 16px; height: 16px; }

    .gantt-diamond[b-ptko59m834]::after {
        content: "";
        position: absolute;
        inset: -8px;
    }
}

/* ── Utilities for LabelTemplate / BarTemplate content ── */
.gantt-label[b-ptko59m834]  .gantt-label-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.gantt-label[b-ptko59m834]  .gantt-label-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.gantt-label[b-ptko59m834]  .gantt-label-amount {
    flex-shrink: 0;
    opacity: 0.7;
    font-size: 0.6875rem;
}

/* Kompakte Lebensphasen-Tag-Icons (Eigenheim, Kinder, Auszeit, Rolle …) */
.gantt-label[b-ptko59m834]  .gantt-label-tags {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0.65;
}

.gantt-label[b-ptko59m834]  .gantt-label-tags svg {
    width: 14px;
    height: 14px;
}

.gantt-label[b-ptko59m834]  .gantt-tag {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 0.625rem;
    line-height: 1;
}

.gantt-bar[b-ptko59m834]  .gantt-bar-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.gantt-bar[b-ptko59m834]  .gantt-bar-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.gantt-bar[b-ptko59m834]  .gantt-bar-amount {
    flex-shrink: 0;
    opacity: 0.85;
    font-size: 0.6875rem;
}

/* Kantonswappen + Ort INNERHALB des Balkens (Housing-Lane). Eigenes overflow:hidden, damit der
   Inhalt auch dann sauber clippt, wenn der selektierte Balken für die Drag-Griffe overflow:visible
   trägt (der flex:1 / min-width:0 Wrapper wird trotzdem auf die Balkenbreite begrenzt). */
.gantt-bar[b-ptko59m834]  .gantt-bar-content {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.gantt-bar[b-ptko59m834]  .gantt-bar-flag {
    flex-shrink: 0;
    width: 15px;
    height: 11px;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}

.gantt-bar[b-ptko59m834]  .gantt-bar-place {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 0.6875rem;
}
/* /Components/Shared/NumberSpinner.razor.rz.scp.css */
/* ==========================================================================
   NumberSpinner — native numeric input + Fluent-style chevron buttons.
   Scoped styles. The surrounding chrome (border, focus underline) is owned
   by the composer (.ym-row in app.css). This file only styles the input
   and the spinner glyphs.
   ========================================================================== */

.ns-host[b-90hrdw5vag] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* native input — transparent; equivalent to FAST .control */
.ns-input[b-90hrdw5vag] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    box-sizing: border-box;
    margin: 0;
    padding: 0 2px;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* hide the browser's own spin buttons — replaced by .ns-controls */
.ns-input[b-90hrdw5vag]::-webkit-outer-spin-button,
.ns-input[b-90hrdw5vag]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ns-disabled .ns-input[b-90hrdw5vag] {
    cursor: not-allowed;
}

/* fill mode — the input flex-grows to fill the host (single-number fields).
   The chevron stack is pinned as an absolute overlay at the right (see below) so it
   can never be pushed outside the field in narrow layouts (e.g. dense budget grids). */
.ns-fill[b-90hrdw5vag] {
    flex: 1 1 auto;
    position: relative;
    /* Let the host shrink below the <input>'s intrinsic width in narrow columns. Without this the
       flex item's automatic minimum (min-width:auto = content min-content) keeps a "hard" size and
       the spinner/reset get pushed outside the field. The input's own min-width:0 is not enough — the
       WRAPPER flex item needs it too. */
    min-width: 0;
}

.ns-fill .ns-input[b-90hrdw5vag] {
    flex: 1 1 0;
    min-width: 0;
    /* reserve room so right-aligned digits never slide under the overlaid spinner */
    padding-inline-end: 22px;
}

/* fill mode: chevrons overlay the right inner edge instead of reserving an in-flow slot.
   Anchored to the host, so the spinner is always inside the field regardless of width. */
.ns-fill .ns-controls[b-90hrdw5vag] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 6px;
    height: auto;
    justify-content: center;
}

/* chevron stack — fixed-width slot, opacity-toggled so there is no layout
   shift when it reveals on hover (matches FAST .controls behaviour) */
.ns-controls[b-90hrdw5vag] {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: 16px;
    position: relative;
    top: -1px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s ease-in-out;
}

.ns-step[b-90hrdw5vag] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--neutral-foreground-rest);
    fill: currentcolor;
    cursor: pointer;
    line-height: 0;
}

.ns-step svg[b-90hrdw5vag] {
    display: block;
    width: 12px;
    height: 12px;
}

.ns-step:hover:not(:disabled)[b-90hrdw5vag] {
    color: var(--accent-fill-rest);
}

.ns-step:disabled[b-90hrdw5vag] {
    opacity: .35;
    cursor: default;
}
/* /Components/Shared/PersonChip.razor.rz.scp.css */
/* Schmaler vertikaler Personenfarb-Balken in der IconTitle-Titelzeile.
   order: -1 zieht den Balken im Flex-Container der Titelzeile VOR das
   Seiten-Icon, obwohl er im TitleBadge-Slot (nach dem Titel) deklariert ist.
   align-self: stretch lässt ihn auf die Höhe des Icons mitwachsen. */
.w4l-person-chip[b-7woyiren09] {
    order: -1;
    align-self: stretch;
    flex-shrink: 0;
    width: 5px;
    border-radius: 3px;
    margin: 2px 0;
}
/* /Components/Shared/ScreenSpotlight.razor.rz.scp.css */
.w4l-screenshot[b-rus55kw550] { margin: 0; }
.w4l-screenshot-frame[b-rus55kw550] { position: relative; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--neutral-stroke-divider-rest); }
.w4l-screenshot-frame img[b-rus55kw550] { display: block; width: 100%; max-width: 100%; }
.w4l-screenshot.zoomable .w4l-screenshot-frame[b-rus55kw550] { cursor: zoom-in; }
.w4l-shot-marker[b-rus55kw550] { position: absolute; border: 2px solid var(--accent-fill-rest);
    border-radius: 8px; box-shadow: 0 0 0 4000px color-mix(in srgb, var(--neutral-layer-1) 18%, transparent); }
.w4l-shot-marker + .w4l-shot-marker[b-rus55kw550] { box-shadow: none; }
.w4l-shot-badge[b-rus55kw550] { position: absolute; top: -12px; left: -12px; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
    background: var(--accent-fill-rest); color: var(--neutral-fill-rest);
    font-size: 0.8rem; font-weight: 700; }
.w4l-shot-legend[b-rus55kw550] { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px;
    font-size: 0.9rem; color: var(--neutral-foreground-hint); }
.w4l-screenshot-missing[b-rus55kw550] { display: flex; align-items: center; justify-content: center;
    min-height: 220px; border: 1px dashed var(--neutral-stroke-divider-rest); border-radius: 12px;
    color: var(--neutral-foreground-hint); }
.w4l-shot-lightbox[b-rus55kw550] { position: fixed; inset: 0; z-index: 1000; display: flex;
    align-items: center; justify-content: center; cursor: zoom-out;
    background: color-mix(in srgb, var(--neutral-layer-1) 65%, transparent); }
.w4l-shot-lightbox img[b-rus55kw550] { max-width: 92vw; max-height: 92vh; border-radius: 12px; }
.w4l-shot-seq[b-rus55kw550] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.w4l-shot-seq-label[b-rus55kw550] { font-size: 0.9rem; color: var(--neutral-foreground-rest); }
.w4l-shot-seq-btns[b-rus55kw550] { display: flex; gap: 8px; }
.w4l-shot-seq-btn[b-rus55kw550] { border: 1px solid var(--neutral-stroke-rest); background: var(--neutral-fill-stealth-rest);
    border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: 0.85rem; color: var(--neutral-foreground-rest); }
.w4l-shot-seq-btn:disabled[b-rus55kw550] { opacity: 0.5; cursor: default; }
/* /Components/Shared/ThemedClip.razor.rz.scp.css */
/* Mirrors ThemedShot's theme switch. Same caveat applies: the show/hide rules must out-specify
   `.tc-frame video` (class+type), so they repeat the element selector rather than using the
   class alone - otherwise both clips render stacked. Scoped CSS is fine even though :root sits
   outside the component, because Blazor appends the scope attribute to the LAST compound
   selector. */
.tc-clip[b-a321m70b55] { margin: 0; }

.tc-frame video[b-a321m70b55] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    background: var(--neutral-layer-2);
}

.tc-frame video.tc-dark[b-a321m70b55] { display: none; }
:root[data-w4l-dark] .tc-frame video.tc-light[b-a321m70b55] { display: none; }
:root[data-w4l-dark] .tc-frame video.tc-dark[b-a321m70b55] { display: block; }

.tc-caption[b-a321m70b55] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    padding-top: 8px;
    text-align: center;
}

/* Zoomable clip. The trigger is a button that must look like nothing: any border, background or
   glyph of its own would sit on top of the animation, which is exactly what it must not do.
   The zoom-in cursor is the only visible affordance; :focus-visible restores one for keyboards. */
.tc-clip.zoomable .tc-zoom-trigger[b-a321m70b55] {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: zoom-in;
}

.tc-clip.zoomable .tc-zoom-trigger:focus-visible[b-a321m70b55] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Overlay mirrors ThemedShot's ts-lightbox so a clip and a screenshot in the same story strip
   enlarge identically. */
.tc-lightbox[b-a321m70b55] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(0, 0, 0, 0.78);
    cursor: zoom-out;
}

.tc-lightbox video[b-a321m70b55] {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.tc-lightbox video.tc-dark[b-a321m70b55] { display: none; }
:root[data-w4l-dark] .tc-lightbox video.tc-light[b-a321m70b55] { display: none; }
:root[data-w4l-dark] .tc-lightbox video.tc-dark[b-a321m70b55] { display: block; }
/* /Components/Shared/ThemedShot.razor.rz.scp.css */
/* Both images sit in the DOM; only one is shown. The switch is pure CSS over the global
   :root[data-w4l-dark] scope that themeMode.js toggles - the same hook /api/branding/theme.css
   uses - so it follows the header switcher without a re-render. Scoped CSS is fine here even
   though :root is outside the component: Blazor appends the scope attribute to the LAST
   compound selector, and the imgs belong to this component. */
.ts-shot[b-qv9dzw7owy] { margin: 0; }
.ts-frame img[b-qv9dzw7owy] { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 8px; }

/* These must out-specify `.ts-frame img` above, which is class+type and would otherwise win and
   show BOTH images stacked. Hence the same img element selector rather than the class alone. */
.ts-frame img.ts-dark[b-qv9dzw7owy] { display: none; }
:root[data-w4l-dark] .ts-frame img.ts-light[b-qv9dzw7owy] { display: none; }
:root[data-w4l-dark] .ts-frame img.ts-dark[b-qv9dzw7owy] { display: block; }

.ts-lightbox img.ts-dark[b-qv9dzw7owy] { display: none; }
:root[data-w4l-dark] .ts-lightbox img.ts-light[b-qv9dzw7owy] { display: none; }
:root[data-w4l-dark] .ts-lightbox img.ts-dark[b-qv9dzw7owy] { display: block; }

/* Framed presentation: the card sits on a soft accent-tinted ground. The staging lives here in
   CSS, never in the captured pixels (Docs/Screens.md convention). */
.ts-shot.framed .ts-frame[b-qv9dzw7owy] {
    padding: clamp(12px, 3vw, 28px);
    border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-fill-rest) 8%, var(--neutral-layer-2)),
        var(--neutral-layer-2));
}

.ts-shot.framed .ts-frame img[b-qv9dzw7owy] {
    border: 1px solid var(--neutral-stroke-divider-rest);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--neutral-foreground-rest) 14%, transparent);
}

.ts-shot.zoomable .ts-frame[b-qv9dzw7owy] { cursor: zoom-in; }

.ts-zoom-hint[b-qv9dzw7owy] {
    display: inline-block;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-foreground-rest);
    cursor: pointer;
}

.ts-zoom-hint:hover[b-qv9dzw7owy] { text-decoration: underline; }

.ts-caption[b-qv9dzw7owy] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    padding-top: 8px;
    text-align: center;
}

.ts-missing[b-qv9dzw7owy] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 1px dashed var(--neutral-stroke-divider-rest);
    border-radius: 12px;
    color: var(--neutral-foreground-hint);
}

.ts-lightbox[b-qv9dzw7owy] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    background: color-mix(in srgb, var(--neutral-layer-1) 65%, transparent);
}

.ts-lightbox img[b-qv9dzw7owy] { max-width: 92vw; max-height: 92vh; border-radius: 12px; }