.skip-link {
position: fixed;
top: 10px;
left: 10px;
z-index: 300;
padding: var(--space-md) var(--space-lg);
border-radius: var(--radius-sm);
color: #fff;
background: var(--accent);
font-size: var(--font-size-sm);
font-weight: 750;
text-decoration: none;
transform: translateY(-150%);
transition: transform var(--motion-fast) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }
#resultsTitle:focus {
outline: none;
}
.legal-page {
min-height: 100vh;
padding: 0 0 var(--space-xl);
}
.legal-shell {
position: relative;
z-index: 1;
width: min(calc(100% - 2 * var(--page-gutter)), 920px);
margin-inline: auto;
}
.legal-card {
padding: var(--space-fluid-lg);
border: 1px solid var(--border-strong);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--elevation-raised);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.legal-hero {
padding-bottom: var(--space-2xl);
border-bottom: 1px solid var(--border);
}
.legal-kicker {
color: var(--accent-2-text);
font-size: var(--font-size-2xs);
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.legal-hero h1 {
margin-top: var(--space-xs);
font-size: var(--display-lg);
line-height: 1.08;
letter-spacing: -0.035em;
}
.legal-hero > p:last-child {
max-width: var(--measure);
margin-top: var(--space-lg);
color: var(--text-dim);
font-size: var(--font-size-md);
line-height: 1.65;
}
.legal-warning {
margin-top: var(--space-2xl);
padding: var(--space-xl) var(--space-xl);
border: 1px solid rgba(251, 191, 36, 0.42);
border-radius: var(--radius-md);
color: var(--amber);
background: var(--amber-soft);
font-size: var(--font-size-xs);
line-height: 1.55;
}
.legal-warning strong { display: block; margin-bottom: var(--space-2xs); }
.legal-warning p + p { margin-top: var(--space-xs); }
.legal-section p,
.legal-section li,
.legal-address,
.legal-hero > p,
.legal-warning p,
.legal-list > li,
.legal-steps > li,
.knowledge-sections p,
.knowledge-comparison-note,
.trust-panel-details p,
.footer-checks-body p {
max-width: var(--measure);
}
.legal-section {
padding-top: var(--space-2xl);
scroll-margin-top: var(--space-xl);
}
.legal-section + .legal-section {
margin-top: var(--space-2xl);
border-top: 1px solid var(--border);
}
.legal-section h2 {
margin-bottom: var(--space-lg);
color: var(--text);
font-size: var(--font-size-lg);
line-height: 1.3;
letter-spacing: -0.01em;
}
.legal-section h3 {
margin: var(--space-xl) 0 var(--space-md);
color: var(--text);
font-size: var(--font-size-sm);
font-weight: 650;
letter-spacing: -0.005em;
}
.legal-section h3:first-of-type { margin-top: var(--space-lg); }
.legal-section p,
.legal-section li,
.legal-address {
color: var(--text-dim);
font-size: var(--font-size-sm);
line-height: 1.72;
}
.legal-section p + p { margin-top: var(--space-lg); }
.legal-section-intro { margin: -4px 0 var(--space-lg); }
.legal-list,
.legal-steps {
margin: var(--space-lg) 0 0;
padding-inline-start: var(--space-xl);
}
.legal-list { list-style: disc; }
.legal-steps { list-style: decimal; }
.legal-list li::marker,
.legal-steps li::marker { color: var(--text-faint); }
.legal-list li + li,
.legal-steps li + li { margin-top: var(--space-md); }
.legal-list strong { color: var(--text); }
.legal-formula {
margin: var(--space-lg) 0;
padding: var(--space-lg) var(--space-xl);
border: 1px solid var(--border);
border-left: 2px solid var(--accent-2);
border-radius: var(--radius-sm);
background: var(--surface-alt);
color: var(--text);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--font-size-xs);
line-height: 2;
overflow-x: auto;
}
.legal-formula strong { font-weight: 700; }
.legal-box {
max-width: var(--measure);
margin: var(--space-2xl) 0 0;
padding: var(--space-lg) var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-alt);
}
.legal-box h2,
.legal-box h3,
.legal-box h4 {
margin: 0 0 var(--space-md);
color: var(--text);
font-size: var(--font-size-md);
font-weight: 650;
line-height: 1.3;
}
.legal-box p,
.legal-box li {
color: var(--text-dim);
font-size: var(--font-size-sm);
line-height: 1.65;
}
.legal-box p + p { margin-top: var(--space-md); }
.legal-box .legal-list { margin-top: 0; }
.legal-box .legal-list li + li { margin-top: var(--space-xs); }
.legal-objection { border-left: 3px solid var(--accent-2); }
.legal-section .mode-scope {
max-width: var(--measure);
margin-top: var(--space-lg);
padding: var(--space-lg) var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-alt);
}
.legal-section .mode-scope h4 {
color: var(--text);
font-size: var(--font-size-sm);
font-weight: 650;
}
.legal-section .mode-scope-list { margin-top: var(--space-md); }
.legal-section .mode-scope-list dt {
margin-top: var(--space-md);
color: var(--text);
font-size: var(--font-size-xs);
font-weight: 650;
}
.legal-section .mode-scope-list dt:first-child { margin-top: 0; }
.legal-section .mode-scope-list dd {
max-width: var(--measure);
margin: var(--space-2xs) 0 0;
color: var(--text-dim);
font-size: var(--font-size-sm);
line-height: 1.65;
}
.legal-table-wrap {
margin: var(--space-lg) 0;
overflow-x: auto;
}
.legal-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
}
.legal-table th,
.legal-table td {
padding: var(--space-md) var(--space-lg) var(--space-md) 0;
border-bottom: 1px solid var(--border);
color: var(--text-dim);
text-align: right;
white-space: nowrap;
}
.legal-table thead th {
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.legal-table tbody th[scope="row"] {
color: var(--text);
font-weight: 600;
text-align: left;
white-space: normal;
}
.legal-table th:first-child,
.legal-table td:first-child { text-align: left; }
.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table-prose th,
.legal-table-prose td {
text-align: left;
white-space: normal;
}
.legal-table-prose th:first-child,
.legal-table-prose td:first-child { white-space: nowrap; }
.legal-table-prose td:nth-child(3) { min-width: 24ch; }
@media (max-width: 560px) {
.legal-table-prose td:nth-child(3) { min-width: 0; }
.legal-table-prose th:first-child,
.legal-table-prose td:first-child { white-space: normal; }
}
.legal-table-register {
min-width: 46rem;
font-size: var(--font-size-xs);
line-height: 1.55;
}
.legal-table-register caption {
padding-bottom: var(--space-sm);
color: var(--text-faint);
font-size: var(--font-size-2xs);
text-align: left;
}
.legal-table-register th,
.legal-table-register td {
vertical-align: top;
overflow-wrap: normal;
}
.legal-table-register :is(th, td):lang(de) { hyphens: auto; }
.legal-table-register code { white-space: nowrap; }
.legal-table-register-narrow { min-width: 34rem; }
.legal-section sup {
font-size: 0.75em;
line-height: 0;
}
.legal-section a,
.legal-footer a {
color: var(--accent-2-text);
text-underline-offset: 3px;
overflow-wrap: anywhere;
}
.legal-section a:hover,
.legal-section a:focus-visible,
.legal-footer a:hover,
.legal-footer a:focus-visible { color: var(--text); }
.legal-section code {
padding: var(--space-2xs) var(--space-xs);
border: 1px solid var(--border);
border-radius: var(--radius-xs);
color: var(--text);
background: var(--surface-alt);
font-size: 0.9em;
}
.legal-address {
display: grid;
justify-items: start;
font-style: normal;
}
.legal-address strong { color: var(--text); }
.legal-placeholder { color: var(--amber); }
.legal-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xl);
padding: var(--space-xl) var(--space-xs) var(--space-sm);
color: var(--text-faint);
font-size: var(--font-size-2xs);
}
.legal-footer nav {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-md) var(--space-xl);
}
.legal-footer,
.landing-footer { flex-wrap: wrap; }
.footer-checks {
flex: 0 0 100%;
width: 100%;
margin-top: var(--space-lg);
color: var(--text-dim);
font-size: var(--font-size-2xs);
line-height: 1.55;
text-align: left;
}
.footer-checks > summary,
.source-register > summary { cursor: pointer; }
.footer-checks-body {
display: grid;
gap: var(--space-md);
max-width: 760px;
padding-top: var(--space-md);
}
.footer-checks-body a { color: var(--accent-2-text); }
.trust-overdue {
color: var(--amber);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.source-record { margin-top: var(--space-xl); }
.source-record > .trust-panel { width: 100%; margin-top: var(--space-md); }
.lang-switch {
display: flex;
align-items: center;
gap: var(--space-2xs);
flex: none;
height: var(--control-h-compact);
padding: var(--space-2xs);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
}
.lang-switch a {
align-self: stretch;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 var(--space-md);
border-radius: var(--radius-pill);
font-size: var(--font-size-xs);
font-weight: 600;
line-height: 1.4;
color: var(--text-faint);
text-decoration: none;
white-space: nowrap;
opacity: 0.55;
transition: opacity var(--motion-base), background var(--motion-base), color var(--motion-base);
}
.lang-switch a:hover { color: var(--text); opacity: 0.85; }
.lang-switch a.active {
color: var(--text);
background: var(--surface-2, rgba(255, 255, 255, 0.08));
opacity: 1;
}
.lang-flag {
display: block;
width: 20px;
height: 14px;
box-shadow: inset 0 0 0 1px var(--border);
}
.error-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-lg);
margin-top: var(--space-2xl);
}
.error-actions > a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-md);
min-height: var(--control-h);
padding: var(--space-lg) var(--space-xl);
border-radius: var(--radius-md);
box-sizing: border-box;
font-size: var(--font-size-sm);
font-weight: 750;
text-decoration: none;
}
.error-actions > a > span {
position: relative;
z-index: 1;
}
.error-action-symbol {
font-size: var(--font-size-lg);
line-height: 1;
transition: transform var(--motion-base) var(--ease-out);
}
.error-actions > [data-error-action="forward"]:hover .error-action-symbol,
.error-actions > [data-error-action="forward"]:focus-visible .error-action-symbol {
transform: translateX(2px);
}
.error-actions > [data-error-action="retry"]:hover .error-action-symbol,
.error-actions > [data-error-action="retry"]:focus-visible .error-action-symbol {
transform: rotate(-28deg);
}
.error-actions > .error-secondary {
border: 1px solid var(--border-strong);
color: var(--text-dim);
background: var(--surface-solid);
transition: color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
.error-actions > .error-secondary:hover,
.error-actions > .error-secondary:focus-visible {
border-color: var(--accent-2);
color: var(--text);
}
.error-actions > .error-secondary:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 3px;
}
.content-page {
min-height: 100vh;
padding-bottom: var(--space-xl);
}
.hub-shell {
position: relative;
z-index: 1;
width: min(calc(100% - 2 * var(--page-gutter)), 1180px);
margin-inline: auto;
}
.hub-hero { padding-block: var(--space-fluid-lg); }
.hub-kicker,
.hub-group-heading > p {
color: var(--accent-2-text);
font-size: var(--font-size-2xs);
font-weight: 650;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.knowledge-comparison { margin: var(--space-2xl) 0 var(--space-sm); }
.knowledge-comparison-note {
margin: 0 0 var(--space-md);
color: var(--text-faint);
font-size: var(--font-size-2xs);
line-height: 1.55;
}
.trust-panel {
position: relative;
z-index: 2;
width: min(calc(100% - 2 * var(--page-gutter)), 1180px);
margin: var(--space-xl) auto 0;
border: 1px solid var(--border-strong);
border-left: 4px solid var(--accent-2-text);
border-radius: var(--radius-lg);
background: var(--surface-solid);
box-shadow: var(--elevation-raised);
}
.trust-panel-verified { border-left-color: var(--green); }
.trust-panel-verified-limited,
.trust-panel-under-review { border-left-color: var(--amber); }
.trust-panel-unavailable { border-left-color: var(--red); }
.trust-panel-summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-lg) var(--space-xl);
padding: var(--space-lg) var(--space-xl);
}
.trust-status,
.hub-card-status {
display: inline-flex;
width: fit-content;
align-items: center;
min-height: 24px;
padding: var(--space-2xs) var(--space-md);
border: 1px solid color-mix(in srgb, var(--accent-2-text) 42%, transparent);
border-radius: var(--radius-pill);
color: var(--accent-2-text);
background: color-mix(in srgb, var(--accent-2-text) 9%, transparent);
font-size: var(--font-size-2xs);
font-weight: 750;
line-height: 1.25;
}
.trust-panel-verified .trust-status {
border-color: color-mix(in srgb, var(--green) 48%, transparent);
color: var(--green);
background: var(--green-soft);
}
.trust-panel-verified-limited .trust-status,
.trust-panel-under-review .trust-status,
.hub-card-status-under-review {
border-color: color-mix(in srgb, var(--amber) 48%, transparent);
color: var(--amber);
background: var(--amber-soft);
}
.trust-panel-unavailable .trust-status,
.hub-card-status-unavailable {
border-color: color-mix(in srgb, var(--red) 48%, transparent);
color: var(--red);
background: var(--red-soft);
}
.trust-panel-summary p {
min-width: 0;
color: var(--text);
font-size: var(--font-size-xs);
}
.trust-panel-summary p span {
margin-left: var(--space-md);
color: var(--text-faint);
font-weight: 500;
}
.trust-panel-summary time {
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-variant-numeric: tabular-nums;
}
.trust-panel > details { border-top: 0; }
.trust-panel > details > summary {
min-height: var(--control-h);
padding: var(--space-lg) var(--space-xl);
color: var(--text-dim);
font-size: var(--font-size-xs);
font-weight: 650;
cursor: pointer;
}
.trust-panel-details {
display: grid;
gap: var(--space-xl);
padding: var(--space-xs) var(--space-xl) var(--space-xl);
color: var(--text-dim);
font-size: var(--font-size-xs);
line-height: 1.55;
}
.trust-panel-details dl {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md);
}
.trust-panel-details dl > div {
padding: var(--space-lg) var(--space-lg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-alt);
}
.trust-panel-details dt {
color: var(--text-faint);
font-size: var(--font-size-2xs);
}
.trust-panel-details dd { margin-top: var(--space-2xs); color: var(--text); }
.trust-panel-details nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-md) var(--space-xl);
}
.trust-panel-details a { color: var(--accent-2-text); }
.trust-method-link { width: fit-content; font-weight: 700; }
.trust-panel-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-md) var(--space-xl);
}
.hub-card-status { margin-top: var(--space-xs); }
@media (max-width: 640px) {
.trust-panel-summary { grid-template-columns: 1fr; gap: var(--space-sm); }
.trust-panel-summary p span { display: block; margin: var(--space-2xs) 0 0; }
.trust-panel-details dl { grid-template-columns: 1fr; }
}
.focused-hero > p .page-region {
margin-left: var(--space-md);
padding: var(--space-2xs) var(--space-sm);
border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
border-radius: var(--radius-xs);
color: var(--text-dim);
font-weight: 700;
letter-spacing: 0.06em;
}
.hub-hero h1 {
max-width: 780px;
margin-top: var(--space-md);
font-size: var(--display-lg);
line-height: 1.02;
letter-spacing: -0.045em;
}
.hub-intro {
max-width: 690px;
margin-top: var(--space-xl);
color: var(--text-dim);
font-size: var(--font-size-md);
line-height: 1.7;
}
.hub-groups { margin-top: var(--space-lg); }
.hub-group {
display: grid;
grid-template-columns: minmax(150px, 0.5fr) minmax(0, 2fr);
gap: var(--space-fluid-lg);
padding-block: var(--space-2xl);
border-top: 1px solid var(--border);
scroll-margin-top: var(--space-xl);
}
.hub-group-heading h2 {
margin-top: var(--space-sm);
font-size: var(--font-size-xl);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.025em;
}
.hub-directory { min-width: 0; }
.hub-columns,
.hub-entry {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) var(--control-icon);
align-items: center;
gap: var(--space-lg);
padding: var(--space-xl) var(--space-md);
}
.hub-columns {
padding-block: var(--space-sm) var(--space-md);
color: var(--text-faint);
font-size: var(--font-size-2xs);
}
.hub-entries { margin: 0; padding: 0; list-style: none; }
.hub-entries li { border-top: 1px solid var(--border); }
.hub-entry {
min-height: var(--control-h);
border-radius: var(--radius-sm);
color: var(--text);
text-decoration: none;
overflow-wrap: anywhere;
transition: background var(--motion-base) var(--ease-out);
}
.hub-entry:hover,
.hub-entry:focus-visible { background: var(--surface-hover); }
.hub-entry:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
}
.hub-entry-name {
color: var(--text-dim);
font-size: var(--font-size-xs);
line-height: 1.5;
}
.hub-entry-question {
font-size: var(--font-size-md);
font-weight: 600;
line-height: 1.45;
}
.hub-entry-info {
display: flex;
flex-direction: column;
align-items: flex-start;
color: var(--text-faint);
font-size: var(--font-size-2xs);
line-height: 1.5;
}
.hub-entry-arrow { color: var(--accent-2-text); }
@media (max-width: 600px) {
.hub-columns { display: none; }
.hub-entry { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-md); }
.hub-entry-name { grid-column: 1; grid-row: 1; }
.hub-entry-question { grid-column: 1; grid-row: 2; }
.hub-entry-info { grid-column: 1; grid-row: 3; }
.hub-entry-arrow { grid-column: 2; grid-row: 2; }
}
.hub-next-step {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2xl);
margin-top: var(--space-3xl);
padding: var(--space-fluid-md);
border: 1px solid var(--border-strong);
border-radius: var(--radius-xl);
background: var(--surface-alt);
}
.hub-next-step p {
color: var(--accent-2-text);
font-size: var(--font-size-xs);
font-weight: 750;
}
.hub-next-step h2 {
max-width: 600px;
margin-top: var(--space-xs);
font-size: var(--font-size-xl);
line-height: 1.25;
}
.hub-primary-link {
display: inline-flex;
min-height: var(--control-h);
flex: none;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-xl);
font-size: var(--font-size-sm);
font-weight: 750;
text-decoration: none;
}
.hub-footer { padding-inline: var(--space-xs); }
.focused-shell {
position: relative;
z-index: 1;
width: min(calc(100% - 2 * var(--page-gutter)), 1180px);
margin-inline: auto;
}
.content-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm);
margin: var(--space-2xl) var(--space-xs) var(--space-xl);
color: var(--text-faint);
font-size: var(--font-size-xs);
}
.content-breadcrumb a {
color: var(--accent-2-text);
text-decoration: none;
}
.content-breadcrumb a:hover,
.content-breadcrumb a:focus-visible { color: var(--text); }
.focused-hero {
max-width: 900px;
padding-block: var(--space-fluid-lg);
}
.focused-hero > p,
.focused-form-head > p,
.focused-answer > p,
.focused-reading article > p,
.knowledge-answer > p {
color: var(--accent-2-text);
font-size: var(--font-size-2xs);
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.focused-hero h1 {
margin-top: var(--space-md);
font-size: var(--display-lg);
line-height: 1.04;
letter-spacing: -0.045em;
}
.focused-hero > span {
display: block;
max-width: 760px;
margin-top: var(--space-xl);
color: var(--text-dim);
font-size: var(--font-size-md);
line-height: 1.7;
}
.focused-workbench {
display: grid;
grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
overflow: hidden;
border: 1px solid var(--border-strong);
border-radius: var(--radius-xl);
background: var(--surface-solid);
box-shadow: var(--elevation-raised);
}
.focused-form,
.focused-results { padding: var(--space-fluid-md); }
.focused-form {
border-right: 1px solid var(--border);
background: var(--surface-alt);
}
.focused-form-head > span {
display: block;
margin-top: var(--space-sm);
color: var(--text-faint);
font-size: var(--font-size-xs);
line-height: 1.5;
}
.focused-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-lg);
row-gap: var(--space-sm);
margin-top: var(--space-2xl);
}
.focused-fields label > :last-child { margin-bottom: var(--space-md); }
.focused-fields .focused-input { align-self: start; }
.focused-fields label {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
row-gap: 0;
min-width: 0;
color: var(--text-dim);
font-size: var(--font-size-xs);
font-weight: 650;
}
.focused-fields label > .focused-input { margin-top: var(--space-sm); }
.focused-fields label > .number-note { grid-row: 3; }
.focused-fields label > small:not(.number-note) {
grid-row: 4;
margin-top: var(--space-sm);
}
.focused-fields label small:not(.number-note) {
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-weight: 450;
line-height: 1.45;
}
.focused-input {
display: flex;
min-width: 0;
min-height: var(--control-h);
align-items: center;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-solid);
}
.focused-input:focus-within {
border-color: var(--accent-2);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.focused-input input {
width: 100%;
min-width: 0;
align-self: stretch;
padding: var(--space-md) var(--space-2xs) var(--space-md) var(--space-lg);
border: 0;
outline: 0;
color: var(--text);
background: transparent;
font: inherit;
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
}
.focused-adjusted {
margin: var(--space-lg) 0 0;
padding: var(--space-md) var(--space-lg);
border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--amber) 10%, transparent);
color: var(--text-dim);
font-size: var(--font-size-2xs);
line-height: 1.5;
}
.focused-adjusted b { color: var(--text); font-weight: 650; }
.focused-select {
width: 100%;
min-width: 0;
align-self: stretch;
padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-lg);
border: 0;
outline: 0;
color: var(--text);
background: transparent;
font: inherit;
font-size: var(--font-size-sm);
cursor: pointer;
}
.focused-input i {
flex: none;
padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-xs);
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-style: normal;
font-weight: 650;
}
.focused-submit {
width: 100%;
margin-top: var(--space-2xl);
}
.focused-results {
display: flex;
min-width: 0;
flex-direction: column;
}
.focused-answer strong {
display: block;
margin-top: var(--space-sm);
font-size: var(--display-lg);
line-height: 1;
letter-spacing: -0.045em;
font-variant-numeric: tabular-nums;
}
.focused-answer > span,
.focused-answer > small {
display: block;
margin-top: var(--space-md);
color: var(--text-faint);
font-size: var(--font-size-xs);
}
.focused-answer b { color: var(--text-dim); }
.focused-progress {
display: block;
width: 100%;
height: 6px;
appearance: none;
overflow: hidden;
margin-top: var(--space-xl);
border: 0;
border-radius: var(--radius-pill);
background: var(--surface-alt);
}
.focused-progress::-webkit-progress-bar {
border-radius: var(--radius-pill);
background: var(--surface-alt);
}
.focused-progress::-webkit-progress-value {
border-radius: var(--radius-pill);
background: var(--gradient);
transition: inline-size var(--motion-base) var(--ease-out);
}
.focused-progress::-moz-progress-bar {
border-radius: var(--radius-pill);
background: var(--gradient);
}
.focused-result-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md);
margin-top: var(--space-2xl);
}
.focused-result-grid article {
min-width: 0;
padding: var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-alt);
}
.focused-result-grid span,
.focused-result-grid small {
display: block;
color: var(--text-faint);
font-size: var(--font-size-2xs);
line-height: 1.45;
}
.focused-result-grid strong {
display: block;
overflow-wrap: anywhere;
margin-block: var(--space-sm) var(--space-2xs);
color: var(--text);
font-size: var(--font-size-lg);
font-variant-numeric: tabular-nums;
}
.focused-formula {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm);
margin-top: var(--space-xl);
padding: var(--space-lg) var(--space-xl);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-md);
color: var(--text-faint);
font-size: var(--font-size-2xs);
}
.focused-formula i { color: var(--accent-2-text); font-style: normal; }
.focused-formula b { color: var(--text); }
.focused-primary-link {
margin-top: var(--space-2xl);
text-align: center;
text-decoration: none;
}
.focused-table-wrap {
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-color: var(--accent-2-text) var(--surface-alt);
scrollbar-width: thin;
margin-top: var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
[data-scrollable-table][data-at-end="false"] {
border-right-color: color-mix(in srgb, var(--accent-2-text) 58%, var(--border));
box-shadow: inset -22px 0 18px -22px var(--accent-2-text);
}
[data-scrollable-table][data-at-start="false"] {
border-left-color: color-mix(in srgb, var(--accent-2-text) 58%, var(--border));
box-shadow: inset 22px 0 18px -22px var(--accent-2-text);
}
[data-scrollable-table][data-at-start="false"][data-at-end="false"] {
box-shadow: inset 22px 0 18px -22px var(--accent-2-text),
inset -22px 0 18px -22px var(--accent-2-text);
}
[data-scrollable-table]:focus-visible {
outline: 2px solid var(--accent-2-text);
outline-offset: 2px;
}
.focused-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-2xs);
font-variant-numeric: tabular-nums;
}
.focused-table th,
.focused-table td {
padding: var(--space-lg) var(--space-lg);
border-bottom: 1px solid var(--border);
text-align: right;
white-space: nowrap;
}
.focused-table th:first-child { text-align: left; }
.focused-table thead { color: var(--text-faint); background: var(--surface-alt); }
.focused-table tbody tr:last-child > * { border-bottom: 0; }
.focused-note {
max-width: var(--measure);
margin-top: var(--space-lg);
color: var(--text-dim);
font-size: var(--font-size-xs);
line-height: 1.6;
}
.focused-note + .focused-note { margin-top: var(--space-md); }
.focused-note.mortgage-verdict,
.focused-note.elterngeld-warning,
.focused-note.focused-scope-note { max-width: none; }
.focused-note a {
color: var(--accent-2-text);
text-underline-offset: 3px;
}
.focused-note a:hover,
.focused-note a:focus-visible { color: var(--text); }
.focused-reading {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-lg);
margin-top: var(--space-2xl);
}
.focused-reading article {
padding: var(--space-2xl);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface-solid);
}
.focused-reading h2 {
margin-top: var(--space-md);
font-size: var(--font-size-md);
line-height: 1.35;
}
.focused-reading article > span {
display: block;
margin-top: var(--space-md);
color: var(--text-faint);
font-size: var(--font-size-xs);
line-height: 1.65;
}
.focused-related {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-xl);
margin-top: var(--space-2xl);
padding: var(--space-fluid-md);
border: 1px solid var(--border-strong);
border-radius: var(--radius-xl);
background: var(--surface-alt);
}
.focused-related > span { color: var(--text-faint); font-size: var(--font-size-xs); }
.focused-related a:not(.action-primary) {
color: var(--accent-2-text);
font-size: var(--font-size-md);
font-weight: 750;
text-decoration: none;
}
.focused-related a:not(.action-primary):hover,
.focused-related a:not(.action-primary):focus-visible { color: var(--text); }
.knowledge-answer {
max-width: 920px;
padding: var(--space-fluid-md);
border: 1px solid var(--border-strong);
border-radius: var(--radius-xl);
background: var(--surface-solid);
box-shadow: var(--elevation-raised);
}
.knowledge-answer strong {
display: block;
margin-top: var(--space-md);
font-size: var(--display-sm);
line-height: 1.5;
}
.knowledge-sections {
display: grid;
grid-template-columns: minmax(0, 760px);
gap: 0;
margin: var(--space-3xl) auto 0;
}
.knowledge-sections section { padding-block: var(--space-2xl); }
.knowledge-sections section + section { border-top: 1px solid var(--border); }
.knowledge-sections h2 {
overflow-wrap: anywhere;
font-size: var(--font-size-xl);
line-height: 1.25;
letter-spacing: -0.025em;
}
.knowledge-sections p {
margin-top: var(--space-lg);
color: var(--text-dim);
font-size: var(--font-size-sm);
line-height: 1.8;
}
.risk-workbench { grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr); }
.focused-assumptions {
margin-top: var(--space-xl);
border-top: 1px solid var(--border);
}
.focused-assumptions summary,
.risk-data summary {
padding-block: var(--space-xl);
color: var(--accent-2-text);
font-size: var(--font-size-xs);
font-weight: 700;
cursor: pointer;
}
.focused-assumptions[open] summary { padding-bottom: 0; }
.risk-case-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-md);
margin-top: var(--space-2xl);
}
.risk-case {
min-width: 0;
padding: var(--space-xl);
border: 1px solid var(--border);
border-top: 3px solid var(--text-faint);
border-radius: var(--radius-md);
background: var(--surface-alt);
}
.risk-case[data-risk-case="early"] { border-top-color: var(--red); }
.risk-case[data-risk-case="late"] { border-top-color: var(--amber); }
.risk-case[data-risk-case="baseline"] { border-top-color: var(--accent-2-text); }
.risk-case > span,
.risk-case > small,
.risk-case dt {
display: block;
color: var(--text-faint);
font-size: var(--font-size-2xs);
line-height: 1.4;
}
.risk-case > strong {
display: block;
overflow-wrap: anywhere;
margin-block: var(--space-sm) var(--space-2xs);
font-size: var(--font-size-md);
font-variant-numeric: tabular-nums;
}
.risk-case dl {
display: grid;
gap: var(--space-md);
margin-top: var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid var(--border);
}
.risk-case dd {
margin-top: var(--space-2xs);
color: var(--text-dim);
font-size: var(--font-size-xs);
font-variant-numeric: tabular-nums;
}
.risk-chart {
margin-top: var(--space-2xl);
padding: var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-alt);
}
.risk-chart figcaption {
color: var(--text-dim);
font-size: var(--font-size-xs);
font-weight: 650;
}
.risk-plot-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-md);
margin-top: var(--space-lg);
}
.risk-y-axis {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 220px;
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-variant-numeric: tabular-nums;
text-align: right;
}
.risk-y-axis span { transform: translateY(-50%); }
.risk-y-axis span:first-child { transform: none; }
.risk-y-axis span:last-child { transform: translateY(-100%); }
.risk-plot { position: relative; padding-bottom: var(--space-xl); }
.risk-x-axis {
position: absolute;
inset: auto 0 0;
display: flex;
justify-content: space-between;
height: 16px;
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-variant-numeric: tabular-nums;
}
.risk-x-axis span { white-space: nowrap; }
.risk-chart svg {
display: block;
width: 100%;
height: 220px;
overflow: visible;
}
.risk-chart line {
stroke: var(--border-strong);
stroke-width: 0.5;
vector-effect: non-scaling-stroke;
}
.risk-chart .risk-grid { stroke: var(--border); stroke-width: 1; }
.risk-chart .risk-late-marker {
stroke: var(--text-faint);
stroke-width: 1;
stroke-dasharray: 3 3;
}
.risk-axis-title {
margin-top: var(--space-sm);
color: var(--text-faint);
font-size: var(--font-size-2xs);
text-align: center;
}
.risk-chart polyline {
fill: none;
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.risk-line-baseline { stroke: var(--accent-2-text); }
.risk-line-early { stroke: var(--red); }
.risk-line-late { stroke: var(--amber); }
.risk-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-xl);
margin-top: var(--space-md);
color: var(--text-faint);
font-size: var(--font-size-2xs);
}
.risk-legend span::before {
content: "";
display: inline-block;
width: 9px;
height: 9px;
margin-right: var(--space-sm);
border-radius: 50%;
background: var(--accent-2-text);
}
.risk-legend .early::before { background: var(--red); }
.risk-legend .late::before { background: var(--amber); }
.pay-chart {
margin-top: var(--space-2xl);
padding: var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-alt);
}
.pay-chart figcaption {
margin-bottom: var(--space-md);
color: var(--text-dim);
font-size: var(--font-size-xs);
font-weight: 650;
}
.pay-bar {
display: block;
overflow: hidden;
width: 100%;
height: 46px;
border-radius: var(--radius-sm);
}
.pay-chart-cost { margin-top: var(--space-lg); }
.pay-chart-cost .pay-bar { height: 26px; }
.pay-seg-net, .pay-key-net::before { fill: var(--green); background: var(--green); }
.pay-seg-wage-tax, .pay-key-wage-tax::before { fill: var(--amber); background: var(--amber); }
.pay-seg-pension, .pay-key-pension::before { fill: var(--cyan); background: var(--cyan); }
.pay-seg-health, .pay-key-health::before { fill: var(--violet); background: var(--violet); }
.pay-seg-employer, .pay-key-employer::before { fill: var(--red); background: var(--red); }
.pay-seg-solidarity, .pay-key-solidarity::before {
fill: color-mix(in srgb, var(--amber) 62%, var(--text));
background: color-mix(in srgb, var(--amber) 62%, var(--text));
}
.pay-seg-church-tax, .pay-key-church-tax::before {
fill: color-mix(in srgb, var(--amber) 36%, var(--text));
background: color-mix(in srgb, var(--amber) 36%, var(--text));
}
.pay-seg-unemployment, .pay-key-unemployment::before {
fill: color-mix(in srgb, var(--cyan) 55%, var(--text));
background: color-mix(in srgb, var(--cyan) 55%, var(--text));
}
.pay-seg-care, .pay-key-care::before {
fill: color-mix(in srgb, var(--violet) 52%, var(--text));
background: color-mix(in srgb, var(--violet) 52%, var(--text));
}
.pay-seg-gross, .pay-key-gross::before {
fill: color-mix(in srgb, var(--accent) 72%, var(--text));
background: color-mix(in srgb, var(--accent) 72%, var(--text));
}
.pay-bar rect {
stroke: var(--surface-solid);
stroke-width: 2px;
vector-effect: non-scaling-stroke;
}
.pay-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-xl);
margin-top: var(--space-lg);
color: var(--text-dim);
font-size: var(--font-size-2xs);
}
.pay-legend span { display: inline-flex; align-items: center; }
.pay-legend b { margin-left: var(--space-xs); color: var(--text); font-variant-numeric: tabular-nums; }
.pay-legend span::before {
content: "";
display: inline-block;
width: 9px;
height: 9px;
margin-right: var(--space-sm);
border-radius: var(--radius-xs);
}
.pay-swatch {
display: inline-block;
width: 9px;
height: 9px;
margin-right: var(--space-md);
border-radius: var(--radius-xs);
vertical-align: baseline;
}
.pay-swatch::before {
content: "";
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
}
.pay-table th { vertical-align: top; }
.pay-table tbody th small {
display: block;
max-width: 34ch;
margin-top: var(--space-2xs);
margin-left: var(--space-xl);
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-weight: 500;
line-height: 1.5;
white-space: normal;
}
.pay-table tfoot th,
.pay-table tfoot td {
padding-top: var(--space-md);
border-top: 1px solid var(--border-strong);
font-weight: 750;
}
.pay-insights { margin-top: var(--space-xl); }
.focused-fields .pay-switch { align-self: start; }
.mortgage-chart {
margin-top: var(--space-2xl);
padding: var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-alt);
}
.mortgage-chart figcaption {
color: var(--text-dim);
font-size: var(--font-size-xs);
font-weight: 650;
}
[data-chart-readout="on"] { cursor: crosshair; }
[data-chart-readout="on"]:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 3px;
}
.chart-readout-cursor line {
stroke: var(--text-faint);
stroke-width: 1;
stroke-dasharray: 3 3;
vector-effect: non-scaling-stroke;
}
.chart-readout-cursor ellipse {
stroke: var(--surface-solid);
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
}
.chart-readout {
position: absolute;
z-index: 3;
top: 6px;
right: 6px;
left: 6px;
display: grid;
gap: var(--space-sm);
width: fit-content;
max-width: min(280px, calc(100% - 12px));
padding: var(--space-md) var(--space-md);
border: 1px solid color-mix(in srgb, var(--accent-2) 34%, var(--border));
border-radius: var(--radius-sm);
color: var(--text);
background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
box-shadow: var(--elevation-floating);
backdrop-filter: blur(16px);
pointer-events: none;
}
.chart-readout.dock-right { margin-inline-start: auto; }
.chart-readout strong {
order: 2;
display: flex;
gap: var(--space-sm);
align-items: baseline;
padding-top: var(--space-sm);
border-top: 1px solid var(--border);
color: var(--text-dim);
font-size: var(--font-size-2xs);
font-weight: 500;
}
.chart-readout strong b {
color: var(--text);
font-weight: 650;
font-variant-numeric: tabular-nums;
}
.chart-readout dl {
display: grid;
gap: var(--space-xs);
margin: 0;
}
.chart-readout dl > div {
display: flex;
gap: var(--space-md);
align-items: baseline;
}
.chart-readout dl > div::before {
content: "";
order: -2;
flex: none;
align-self: center;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--chart-readout-tone, currentcolor);
}
.chart-readout dt {
color: var(--text-dim);
font-size: var(--font-size-2xs);
hyphens: auto;
overflow-wrap: anywhere;
}
.chart-readout dd {
order: -1;
margin: 0;
font-size: var(--font-size-sm);
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.mortgage-plot-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-md);
margin-top: var(--space-lg);
}
.mortgage-y-axis {
position: relative;
--axis-height: 210px;
display: grid;
height: var(--axis-height);
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-variant-numeric: tabular-nums;
text-align: right;
}
.mortgage-y-axis span {
grid-area: 1 / 1;
visibility: hidden;
}
.mortgage-y-axis svg {
position: absolute;
inset: 0;
}
.mortgage-y-axis text {
fill: currentcolor;
text-anchor: end;
dominant-baseline: central;
}
.mortgage-plot { position: relative; padding-bottom: var(--space-xl); }
.mortgage-chart-split .mortgage-plot { margin-top: var(--space-lg); }
.mortgage-x-axis {
position: absolute;
inset: auto 0 0;
display: flex;
justify-content: space-between;
height: 16px;
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-variant-numeric: tabular-nums;
}
.mortgage-chart svg {
display: block;
width: 100%;
height: 210px;
overflow: visible;
}
.mortgage-chart .mortgage-split { height: 150px; }
.mortgage-chart line {
stroke: var(--border);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.mortgage-chart .mortgage-fixed-marker {
stroke: var(--amber);
stroke-width: 1.5;
stroke-dasharray: 4 3;
}
.mortgage-line {
fill: none;
stroke: var(--accent-2-text);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.mortgage-area {
fill: color-mix(in srgb, var(--accent-2-text) 16%, transparent);
stroke: none;
}
.mortgage-bar-interest { fill: var(--amber); }
.mortgage-bar-principal { fill: var(--green); }
.mortgage-axis-title {
margin-top: var(--space-sm);
color: var(--text-faint);
font-size: var(--font-size-2xs);
text-align: center;
}
.mortgage-legend {
display: flex;
gap: var(--space-sm) var(--space-xl);
margin-top: var(--space-md);
color: var(--text-faint);
font-size: var(--font-size-2xs);
}
.mortgage-legend span::before {
content: "";
display: inline-block;
width: 9px;
height: 9px;
margin-right: var(--space-sm);
border-radius: var(--radius-xs);
background: var(--amber);
}
.mortgage-legend .principal::before { background: var(--green); }
.mortgage-verdict {
margin-top: var(--space-xl);
padding: var(--space-fluid-sm);
border: 1px solid var(--border-strong);
border-left: 3px solid var(--text-faint);
border-radius: var(--radius-md);
background: var(--surface-alt);
}
.mortgage-verdict > p {
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.mortgage-verdict > strong {
display: block;
margin: var(--space-sm) 0 var(--space-md);
font-size: var(--font-size-2xl);
font-variant-numeric: tabular-nums;
}
.mortgage-verdict > span {
display: block;
max-width: 62ch;
color: var(--text-dim);
font-size: var(--font-size-sm);
line-height: 1.65;
}
.mortgage-verdict-comfortable { border-left-color: var(--green); }
.mortgage-verdict-usual { border-left-color: var(--accent-2-text); }
.mortgage-verdict-stretched { border-left-color: var(--amber); }
.mortgage-verdict-beyond { border-left-color: var(--red); }
.mortgage-costs caption {
margin-bottom: var(--space-md);
color: var(--text-faint);
font-size: var(--font-size-xs);
text-align: left;
}
.mortgage-costs tfoot th,
.mortgage-costs tfoot td {
border-top: 1px solid var(--border-strong);
font-weight: 750;
}
.mortgage-schedule { margin-top: var(--space-xl); }
.mortgage-schedule summary {
color: var(--accent-2-text);
font-size: var(--font-size-sm);
font-weight: 700;
cursor: pointer;
}
.payslip-working {
max-width: 860px;
padding-bottom: var(--space-lg);
}
.payslip-lede {
margin: 0 0 var(--space-2xl);
color: var(--text-dim);
font-size: var(--font-size-md);
line-height: 1.7;
}
.payslip-steps {
display: flex;
flex-direction: column;
gap: var(--space-xl);
margin: 0;
padding: 0;
list-style: none;
}
.payslip-step {
position: relative;
padding: var(--space-fluid-sm);
padding-left: var(--space-fluid-md);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface-alt);
}
.payslip-step::before {
content: "";
position: absolute;
inset: clamp(18px, 3vw, 26px) auto clamp(18px, 3vw, 26px) 0;
width: 2px;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--accent-2-text) 45%, transparent);
}
.payslip-number {
margin: 0;
color: var(--accent-2-text);
font-size: var(--font-size-2xs);
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.payslip-step h2 {
margin: var(--space-sm) 0 0;
font-size: var(--font-size-xl);
letter-spacing: -0.02em;
hyphens: auto;
overflow-wrap: anywhere;
}
.payslip-body {
max-width: 66ch;
margin: var(--space-md) 0 0;
color: var(--text-dim);
font-size: var(--font-size-sm);
line-height: 1.7;
}
.payslip-lines {
margin: var(--space-xl) 0 0;
border-top: 1px solid var(--border);
}
.payslip-lines > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-xs) var(--space-xl);
padding: var(--space-md) 0;
border-bottom: 1px solid var(--border);
}
.payslip-lines dt {
color: var(--text-dim);
font-size: var(--font-size-sm);
hyphens: auto;
overflow-wrap: anywhere;
}
.payslip-lines dd {
margin: 0;
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
font-weight: 700;
text-align: right;
}
.payslip-lines .payslip-note {
grid-column: 1 / -1;
max-width: 62ch;
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-weight: 400;
line-height: 1.6;
text-align: left;
}
.payslip-result {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-xs) var(--space-lg);
margin: var(--space-xl) 0 0;
}
.payslip-result > span {
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.payslip-result > strong {
font-size: var(--font-size-lg);
font-variant-numeric: tabular-nums;
}
.payslip-result > small {
flex-basis: 100%;
color: var(--text-faint);
font-size: var(--font-size-2xs);
}
.payslip-source { margin: var(--space-lg) 0 0; }
.payslip-source a {
color: var(--text-faint);
font-size: var(--font-size-2xs);
text-decoration: none;
}
.payslip-source a:hover,
.payslip-source a:focus-visible {
color: var(--accent-2-text);
text-decoration: underline;
}
.payslip-sources { margin-top: var(--space-2xl); }
.payslip-working > .focused-primary-link { margin-top: var(--space-2xl); }
.pay-explain {
color: inherit;
text-decoration-color: color-mix(in srgb, var(--accent-2-text) 55%, transparent);
text-decoration-line: underline;
text-underline-offset: 3px;
}
.pay-explain:hover,
.pay-explain:focus-visible { color: var(--accent-2-text); }
.pay-onward {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-lg) var(--space-2xl);
margin-top: var(--space-xl);
}
.pay-onward .focused-primary-link { margin-top: 0; }
.pay-secondary-link {
color: var(--accent-2-text);
font-size: var(--font-size-sm);
font-weight: 650;
text-decoration: none;
}
.pay-secondary-link:hover,
.pay-secondary-link:focus-visible { text-decoration: underline; }
.vorab-bar { fill: var(--accent-2-text); }
.elterngeld-line-current,
.rentbuy-line-renter {
fill: none;
stroke: var(--accent-2-text);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.rentbuy-line-buyer {
fill: none;
stroke: var(--green);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.mortgage-legend .current::before,
.mortgage-legend .renter::before { background: var(--accent-2-text); }
.mortgage-legend .bound::before { background: var(--text-faint); }
.mortgage-legend .buyer::before { background: var(--green); }
.estate-line-tax {
fill: none;
stroke: var(--accent-2-text);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.estate-line-plain {
fill: none;
stroke: var(--text-faint);
stroke-width: 1.5;
stroke-dasharray: 5 4;
vector-effect: non-scaling-stroke;
}
.mortgage-legend .charged::before { background: var(--accent-2-text); }
.mortgage-legend .plain::before { background: var(--text-faint); }
.band-here { background: var(--surface-alt); }
.band-here th,
.band-here td { color: var(--text); font-weight: 600; }
.rental-bar { fill: var(--amber); }
.rental-bar-positive { fill: var(--green); }
.mortgage-chart .rental-zero {
stroke: var(--text-faint);
stroke-width: 1.5;
}
.focused-table th small {
display: block;
margin-top: var(--space-2xs);
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-weight: 400;
}
.eg-heading {
margin-top: var(--space-fluid-lg);
font-size: var(--font-size-xl);
line-height: 1.18;
letter-spacing: -0.025em;
}
.eg-lede {
max-width: 62ch;
margin-top: var(--space-sm);
color: var(--text-dim);
font-size: var(--font-size-sm);
}
.eg-scenarios {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-lg);
margin-top: var(--space-xl);
}
.eg-scenario {
display: flex;
flex-direction: column;
padding: var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
}
.eg-scenario-best { border-color: var(--accent-2-text); }
.eg-scenario header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-md);
}
.eg-scenario h3 {
font-size: var(--font-size-md);
line-height: 1.25;
letter-spacing: -0.015em;
}
.eg-tag {
padding: var(--space-2xs) var(--space-md);
border-radius: var(--radius-pill);
color: var(--surface);
background: var(--accent-2-text);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.eg-tag-long { color: var(--amber); background: var(--amber-soft); }
.eg-summary {
margin-top: var(--space-md);
color: var(--text-dim);
font-size: var(--font-size-xs);
}
.eg-bar {
display: block;
width: 100%;
height: 6px;
margin-top: var(--space-lg);
}
.eg-bar-track { fill: var(--surface-alt); }
.eg-bar-fill { fill: var(--accent-2-text); }
.eg-figures {
margin-top: var(--space-lg);
font-size: var(--font-size-xs);
font-variant-numeric: tabular-nums;
}
.eg-figures > div {
display: flex;
justify-content: space-between;
gap: var(--space-lg);
padding: var(--space-xs) 0;
}
.eg-figures dt { color: var(--text-faint); }
.eg-figures dd { color: var(--text-dim); font-weight: 600; }
.eg-figures .eg-total {
margin-top: var(--space-xs);
padding-top: var(--space-md);
border-top: 1px solid var(--border);
}
.eg-figures .eg-total dt { color: var(--text-dim); }
.eg-figures .eg-total dd {
color: var(--text);
font-size: var(--font-size-md);
font-weight: 700;
}
.eg-timeline-wrap { margin-top: var(--space-lg); }
.eg-timeline-wrap summary {
color: var(--accent-2-text);
font-size: var(--font-size-xs);
font-weight: 650;
cursor: pointer;
}
.eg-timeline {
margin-top: var(--space-md);
padding: 0;
list-style: none;
}
.eg-month {
display: grid;
grid-template-columns: 2.2em 1fr 1fr;
gap: var(--space-xs);
align-items: center;
padding: var(--space-2xs) 0;
}
.eg-month-number {
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-variant-numeric: tabular-nums;
text-align: right;
}
.eg-band {
display: block;
min-height: 15px;
padding: var(--space-2xs) var(--space-sm);
border-radius: var(--radius-xs);
color: var(--surface);
font-size: var(--font-size-2xs);
font-variant-numeric: tabular-nums;
text-align: right;
}
.eg-month-empty { padding: 0; }
.eg-month-empty .eg-band { min-height: 4px; }
.eg-month-empty .eg-month-number { opacity: 0.45; }
.eg-band-none { background: transparent; }
.eg-band-maternity {
color: var(--text);
background: color-mix(in srgb, var(--text-faint) 32%, transparent);
}
.eg-band-basis { background: var(--accent-2-text); }
.eg-band-plus {
color: var(--text);
background: color-mix(in srgb, var(--accent-2-text) 42%, transparent);
}
.eg-band-bonus { color: var(--text); background: var(--amber); }
.eg-key {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs) var(--space-md);
margin-top: var(--space-md);
color: var(--text-faint);
font-size: var(--font-size-2xs);
}
.eg-key .eg-band {
width: 14px;
min-height: 10px;
padding: 0;
}
.eg-key span { flex-basis: 100%; }
.eg-elternzeit,
.eg-steps {
margin-top: var(--space-fluid-md);
padding: var(--space-fluid-sm);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface-alt);
}
.eg-elternzeit h2,
.eg-steps h2 {
font-size: var(--font-size-lg);
line-height: 1.2;
letter-spacing: -0.02em;
}
.eg-elternzeit p {
max-width: 68ch;
margin-top: var(--space-md);
color: var(--text-dim);
font-size: var(--font-size-sm);
}
.eg-steps ol {
margin-top: var(--space-lg);
padding-left: 1.2em;
color: var(--text-dim);
font-size: var(--font-size-sm);
}
.eg-steps li { margin-top: var(--space-md); }
.eg-steps li b { color: var(--text); }
.elterngeld-grid { margin-top: var(--space-xl); }
.elterngeld-plus { border-left: 3px solid var(--green); }
.elterngeld-bounds {
border-left: 3px solid var(--text-faint);
background: var(--surface-alt);
}
.elterngeld-bound {
stroke: var(--text-faint);
stroke-width: 1;
stroke-dasharray: 3 3;
vector-effect: non-scaling-stroke;
}
.elterngeld-warning {
padding: var(--space-lg) var(--space-xl);
border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--amber) 8%, transparent);
}
.neighbour-questions {
margin-top: var(--space-2xl);
padding: var(--space-fluid-sm);
border: 1px dashed var(--border-strong);
border-radius: var(--radius-lg);
}
.neighbour-questions > p {
margin: 0 0 var(--space-lg);
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.neighbour-questions ul {
display: flex;
flex-direction: column;
gap: var(--space-lg);
margin: 0;
padding: 0;
list-style: none;
}
.neighbour-questions a {
color: var(--accent-2-text);
font-size: var(--font-size-sm);
text-decoration: none;
}
.neighbour-questions a:hover,
.neighbour-questions a:focus-visible { text-decoration: underline; }
.neighbour-questions li > span {
display: block;
max-width: 68ch;
margin-top: var(--space-2xs);
color: var(--text-dim);
font-size: var(--font-size-xs);
line-height: 1.6;
}
.risk-data { margin-bottom: var(--space-xl); }
.tariff-chart {
margin-top: var(--space-2xl);
padding: var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-alt);
}
.tariff-chart figcaption {
color: var(--text-dim);
font-size: var(--font-size-xs);
font-weight: 650;
}
.tariff-plot-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-md);
margin-top: var(--space-lg);
}
.tariff-y-axis {
position: relative;
--axis-height: 220px;
display: grid;
height: var(--axis-height);
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-variant-numeric: tabular-nums;
text-align: right;
}
.tariff-y-axis span {
grid-area: 1 / 1;
visibility: hidden;
}
.tariff-y-axis svg {
position: absolute;
inset: 0;
}
.tariff-y-axis text {
fill: currentcolor;
text-anchor: end;
dominant-baseline: central;
}
.tariff-plot { position: relative; padding-bottom: var(--space-xl); }
.tariff-x-axis {
position: absolute;
inset: auto 0 0;
display: flex;
justify-content: space-between;
height: 16px;
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-variant-numeric: tabular-nums;
}
.tariff-x-axis span { white-space: nowrap; }
.tariff-chart svg {
display: block;
width: 100%;
height: 220px;
overflow: visible;
}
.tariff-chart line {
stroke: var(--border-strong);
stroke-width: 0.5;
vector-effect: non-scaling-stroke;
}
.tariff-chart .tariff-grid { stroke: var(--border); stroke-width: 1; }
.tariff-chart .tariff-allowance-marker {
stroke: var(--accent-2-text);
stroke-width: 1;
}
.tariff-chart .tariff-income-marker {
stroke: var(--text-faint);
stroke-width: 1;
stroke-dasharray: 3 3;
}
.tariff-axis-title {
margin-top: var(--space-sm);
color: var(--text-faint);
font-size: var(--font-size-2xs);
text-align: center;
}
.tariff-chart polyline {
fill: none;
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.tariff-line-marginal { stroke: var(--amber); }
.tariff-line-average { stroke: var(--green); }
.tariff-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-xl);
margin-top: var(--space-md);
color: var(--text-faint);
font-size: var(--font-size-2xs);
}
.tariff-legend span::before {
content: "";
display: inline-block;
width: 9px;
height: 9px;
margin-right: var(--space-sm);
border-radius: 50%;
background: var(--amber);
}
.tariff-legend .average::before { background: var(--green); }
.tariff-legend .allowance::before { background: var(--accent-2-text); }
.tariff-legend .yours::before { background: var(--text-faint); }
.tariff-table thead th { white-space: normal; }
.historical-risk-page .focused-shell {
width: min(calc(100% - 2 * var(--page-gutter)), 1400px);
}
.historical-risk-panel {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
overflow: hidden;
border: 1px solid var(--border-strong);
border-radius: var(--radius-xl);
background: var(--surface-solid);
box-shadow: var(--elevation-raised);
}
.index-scope-note {
margin: var(--space-lg) 0 0;
color: var(--text-dim);
font-size: var(--font-size-xs);
line-height: 1.55;
}
.historical-risk-picker {
padding: var(--space-fluid-md);
border-right: 1px solid var(--border);
background: var(--surface-alt);
}
.historical-risk-show {
margin-top: var(--space-lg);
width: fit-content;
}
.historical-risk-picker label {
display: grid;
gap: var(--space-md);
color: var(--text-dim);
font-size: var(--font-size-xs);
font-weight: 650;
}
.historical-risk-picker select {
min-width: 0;
min-height: var(--control-h);
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text);
background: var(--surface-solid);
font: inherit;
}
.historical-risk-results {
min-width: 0;
padding: var(--space-fluid-md);
}
.history-disclosure {
display: grid;
justify-items: start;
gap: var(--space-xs);
color: var(--text-faint);
font-size: var(--font-size-xs);
}
.history-disclosure > span { color: var(--accent-2-text); font-weight: 750; }
.history-disclosure strong { color: var(--text); font-size: var(--font-size-md); }
.history-headline-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md);
margin-top: var(--space-2xl);
}
.history-headline-grid article {
min-width: 0;
padding: var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface-alt);
}
.history-headline-grid p,
.history-headline-grid span,
.history-headline-grid small {
display: block;
color: var(--text-faint);
font-size: var(--font-size-2xs);
line-height: 1.5;
}
.history-headline-grid strong {
display: block;
margin-block: var(--space-md) var(--space-xs);
font-size: var(--display-md);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.history-headline-grid small { margin-top: var(--space-xs); color: var(--text-dim); }
.history-horizon-section { margin-top: var(--space-2xl); }
.history-horizon-chart {
--history-horizon-edge: 5px;
padding: var(--space-fluid-sm);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface-alt);
}
.history-horizon-chart figcaption {
display: grid;
gap: var(--space-xs);
}
.history-horizon-chart figcaption strong {
font-size: var(--font-size-md);
line-height: 1.35;
}
.history-horizon-chart figcaption span,
.history-horizon-y-title,
.history-horizon-axis-title,
.history-horizon-legend {
color: var(--text-faint);
font-size: var(--font-size-2xs);
line-height: 1.55;
}
.history-horizon-y-title {
margin: var(--space-xl) 0 var(--space-sm) var(--space-5xl);
font-weight: 700;
}
.history-horizon-plot-row {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: var(--space-md);
}
.history-horizon-y-axis {
display: flex;
height: clamp(240px, 31vw, 340px);
flex-direction: column-reverse;
justify-content: space-between;
align-items: flex-end;
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-variant-numeric: tabular-nums;
}
.history-horizon-y-axis span {
white-space: nowrap;
}
.history-horizon-stage {
position: relative;
min-width: 0;
margin-inline: var(--history-horizon-edge);
border-radius: var(--radius-sm);
cursor: crosshair;
touch-action: pan-y;
}
.history-horizon-stage:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 4px;
}
.history-horizon-stage svg {
display: block;
width: 100%;
height: clamp(240px, 31vw, 340px);
overflow: visible;
}
.history-horizon-stage line {
stroke: var(--border);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.history-horizon-stage line.zero {
stroke: var(--border-strong);
stroke-dasharray: 4 4;
}
.history-horizon-band { fill: var(--accent-soft); }
.history-horizon-stage polyline {
fill: none;
stroke-width: 2.25;
vector-effect: non-scaling-stroke;
}
.history-horizon-best { stroke: var(--green); fill: var(--green); }
.history-horizon-average { stroke: var(--accent); fill: var(--accent); }
.history-horizon-worst { stroke: var(--red); fill: var(--red); }
.history-horizon-cursor[hidden],
.history-horizon-tooltip[hidden] { display: none; }
.history-horizon-cursor line {
stroke: var(--text-dim);
stroke-width: 1;
stroke-dasharray: 3 3;
}
.history-horizon-cursor circle {
stroke: var(--surface-solid);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.history-horizon-cursor circle.best { fill: var(--green); }
.history-horizon-cursor circle.average { fill: var(--accent); }
.history-horizon-cursor circle.worst { fill: var(--red); }
.history-horizon-tooltip {
display: grid;
position: absolute;
z-index: 2;
top: 12px;
right: 12px;
width: min(290px, calc(100% - 24px));
padding: var(--space-lg) var(--space-lg);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
color: var(--text);
background: var(--surface-solid);
box-shadow: var(--elevation-raised);
pointer-events: none;
}
.history-horizon-tooltip.dock-left {
right: auto;
left: 12px;
}
.history-horizon-tooltip > strong {
order: 2;
display: flex;
align-items: baseline;
gap: var(--space-sm);
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--border);
font-size: var(--font-size-2xs);
}
.history-horizon-tooltip > strong > span {
color: var(--text-faint);
font-weight: 650;
}
.history-horizon-tooltip > strong > b { font-variant-numeric: tabular-nums; }
.history-horizon-tooltip dl {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-md);
margin: 0;
}
.history-horizon-tooltip dl > div {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: baseline;
}
.history-horizon-tooltip dl > div > dd { order: -1; }
.history-horizon-tooltip dt {
color: var(--text-dim);
font-size: var(--font-size-2xs);
line-height: 1.4;
}
.history-horizon-tooltip dd {
display: grid;
justify-items: start;
margin: 0;
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
}
.history-horizon-tooltip dd b { color: var(--green); }
.history-horizon-tooltip .average dd b { color: var(--accent); }
.history-horizon-tooltip .worst dd b { color: var(--red); }
.history-horizon-tooltip small {
margin-top: var(--space-2xs);
color: var(--text-faint);
font-size: var(--font-size-2xs);
white-space: nowrap;
}
@media (max-width: 480px) {
.history-horizon-tooltip { padding: var(--space-md); }
.history-horizon-tooltip dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
.history-horizon-tooltip > strong { flex-wrap: wrap; column-gap: var(--space-sm); }
.history-horizon-tooltip > strong > b { white-space: nowrap; }
}
.history-horizon-x-axis {
display: flex;
height: 27px;
justify-content: space-between;
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-variant-numeric: tabular-nums;
}
.history-horizon-x-axis span {
padding-top: var(--space-sm);
white-space: nowrap;
}
.history-horizon-axis-title {
margin-left: var(--space-5xl);
text-align: center;
font-weight: 700;
}
.history-horizon-legend {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-xl);
margin: var(--space-lg) 0 0 var(--space-5xl);
}
.history-horizon-legend span::before {
content: "";
display: inline-block;
width: 16px;
height: 3px;
margin: 0 var(--space-sm) var(--space-2xs) 0;
border-radius: var(--radius-pill);
}
.history-horizon-legend .best::before { background: var(--green); }
.history-horizon-legend .average::before { background: var(--accent); }
.history-horizon-legend .worst::before { background: var(--red); }
.history-horizon-range {
display: grid;
gap: var(--space-md);
margin: var(--space-xl) 0 0 var(--space-5xl);
padding-top: var(--space-lg);
border: 0;
border-top: 1px solid var(--border);
}
.history-horizon-range legend {
padding-right: var(--space-md);
color: var(--text);
font-size: var(--font-size-xs);
font-weight: 750;
}
.history-horizon-range-summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-lg);
color: var(--text-faint);
font-size: var(--font-size-2xs);
}
.history-horizon-range-summary output {
color: var(--text);
font-weight: 750;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.history-horizon-range-controls {
display: grid;
gap: var(--space-sm);
}
.history-horizon-range-values {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-xl);
}
.history-horizon-range-values label {
display: flex;
gap: var(--space-sm);
color: var(--text-faint);
font-size: var(--font-size-2xs);
cursor: pointer;
}
.history-horizon-range-values b {
color: var(--text);
font-variant-numeric: tabular-nums;
}
.history-horizon-trimmer {
--range-start: 0%;
--range-end: 100%;
position: relative;
height: var(--control-h);
isolation: isolate;
}
.history-horizon-trimmer-track {
position: absolute;
z-index: 0;
top: 50%;
right: var(--history-horizon-edge);
left: var(--history-horizon-edge);
height: calc(var(--control-h) - 10px);
overflow: hidden;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--surface-solid);
transform: translateY(-50%);
}
.history-horizon-trimmer-track > span {
position: absolute;
top: 0;
right: calc(100% - var(--range-end));
bottom: 0;
left: var(--range-start);
border-block: 2px solid var(--accent-2);
background: var(--accent-soft);
}
.history-horizon-trimmer input[type="range"] {
position: absolute;
z-index: 2;
inset: 0;
width: 100%;
height: var(--control-h);
margin: 0;
padding: 0;
border: 0;
outline: none;
background: transparent;
cursor: pointer;
pointer-events: none;
appearance: none;
-webkit-appearance: none;
}
.history-horizon-trimmer input.end { z-index: 3; }
.history-horizon-trimmer:focus-within {
outline: 2px solid var(--accent-2);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
.history-horizon-trimmer input[type="range"]::-webkit-slider-runnable-track {
height: 4px;
background: transparent;
}
.history-horizon-trimmer input[type="range"]::-webkit-slider-thumb {
width: 10px;
height: calc(var(--control-h) - 8px);
margin-top: calc((12px - var(--control-h)) / 2);
border: 2px solid var(--surface-solid);
border-radius: var(--radius-xs);
background: var(--accent-2);
box-shadow: var(--elevation-control);
pointer-events: auto;
appearance: none;
-webkit-appearance: none;
}
.history-horizon-trimmer input[type="range"]::-moz-range-track {
height: 4px;
border: 0;
background: transparent;
}
.history-horizon-trimmer input[type="range"]::-moz-range-thumb {
width: 10px;
height: calc(var(--control-h) - 8px);
border: 2px solid var(--surface-solid);
border-radius: var(--radius-xs);
background: var(--accent-2);
box-shadow: var(--elevation-control);
pointer-events: auto;
}
.history-window-section { margin-top: var(--space-2xl); }
.history-window-section h2 {
font-size: var(--font-size-xl);
line-height: 1.25;
}
.history-window-section > p {
margin-top: var(--space-lg);
color: var(--text-faint);
font-size: var(--font-size-xs);
line-height: 1.65;
}
.history-window-table { min-width: 820px; }
.calendar-range {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md);
margin-block: var(--space-xl);
}
.calendar-range > div {
display: grid;
gap: var(--space-xs);
padding: var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-alt);
}
.calendar-range span,
.calendar-range small { color: var(--text-faint); font-size: var(--font-size-2xs); }
.calendar-range strong { font-size: var(--font-size-xl); font-variant-numeric: tabular-nums; }
.comparison-workbench { grid-template-columns: minmax(310px, 0.76fr) minmax(0, 1.24fr); }
.comparison-outcomes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-md);
margin-top: var(--space-2xl);
}
.comparison-outcome {
min-width: 0;
padding: var(--space-xl);
border: 1px solid var(--border);
border-top: 3px solid var(--accent-2);
border-radius: var(--radius-lg);
background: var(--surface-alt);
}
.property-outcome { border-top-color: var(--amber); }
.comparison-outcome > p {
color: var(--accent-2-text);
font-size: var(--font-size-xs);
font-weight: 750;
}
.comparison-outcome > strong {
display: block;
overflow-wrap: anywhere;
margin-block: var(--space-sm) var(--space-2xs);
font-size: var(--display-md);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.comparison-outcome > span,
.comparison-outcome dt {
color: var(--text-faint);
font-size: var(--font-size-2xs);
line-height: 1.5;
}
.comparison-outcome dl {
display: grid;
gap: var(--space-md);
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--border);
}
.comparison-outcome dl > div {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-lg);
}
.comparison-outcome dd {
flex: none;
color: var(--text-dim);
font-size: var(--font-size-xs);
font-variant-numeric: tabular-nums;
}
.comparison-warning,
.comparison-budget-ok {
display: grid;
gap: var(--space-xs);
margin-top: var(--space-lg);
padding: var(--space-lg) var(--space-xl);
border: 1px solid var(--red);
border-radius: var(--radius-md);
color: var(--text-dim);
background: var(--red-soft);
font-size: var(--font-size-xs);
line-height: 1.55;
}
.comparison-budget-ok {
border-color: var(--green);
background: var(--green-soft);
}
.comparison-warning strong,
.comparison-budget-ok strong { color: var(--text); }
.property-assumption {
display: grid;
gap: var(--space-xs);
margin-top: var(--space-lg);
padding: var(--space-lg) var(--space-xl);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
color: var(--text-dim);
background: var(--surface-alt);
font-size: var(--font-size-xs);
line-height: 1.55;
}
.property-assumption strong { color: var(--text); }
.property-cost-strip {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-md);
margin-top: var(--space-lg);
}
.property-cost-strip > div {
min-width: 0;
padding: var(--space-lg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-alt);
}
.property-cost-strip span {
display: block;
color: var(--text-faint);
font-size: var(--font-size-2xs);
line-height: 1.35;
}
.property-cost-strip strong {
display: block;
overflow-wrap: anywhere;
margin-top: var(--space-sm);
font-size: var(--font-size-sm);
font-variant-numeric: tabular-nums;
}
.comparison-sensitivity { margin-block: var(--space-2xl) var(--space-xl); }
.comparison-sensitivity h2 {
font-size: var(--font-size-lg);
line-height: 1.3;
}
.comparison-sensitivity .focused-table { min-width: 600px; }
.index-scope-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-lg);
}
.index-scope-grid article {
min-width: 0;
padding: var(--space-fluid-sm);
border: 1px solid var(--border);
border-top: 3px solid var(--accent-2);
border-radius: var(--radius-lg);
background: var(--surface-solid);
}
.index-scope-grid article:nth-child(2) { border-top-color: var(--violet); }
.index-scope-grid article:nth-child(3) { border-top-color: var(--green); }
.index-scope-grid article > p {
color: var(--accent-2-text);
font-size: var(--font-size-sm);
font-weight: 800;
}
.index-scope-grid article > strong {
display: block;
margin-top: var(--space-sm);
font-size: var(--font-size-xl);
line-height: 1.25;
}
.index-scope-grid dl {
display: grid;
gap: var(--space-md);
margin-top: var(--space-xl);
padding-block: var(--space-lg);
border-block: 1px solid var(--border);
}
.index-scope-grid dl > div {
display: flex;
justify-content: space-between;
gap: var(--space-lg);
}
.index-scope-grid dt,
.index-scope-grid dd,
.index-scope-grid article > span {
color: var(--text-faint);
font-size: var(--font-size-xs);
line-height: 1.6;
}
.index-scope-grid dd { color: var(--text-dim); text-align: right; }
.index-scope-grid article > span { display: block; margin-top: var(--space-lg); }
.etf-sections { margin-top: var(--space-3xl); }
.allocation-hero {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
align-items: center;
gap: var(--space-fluid-lg);
padding: var(--space-fluid-lg);
border: 1px solid var(--border-strong);
border-radius: var(--radius-xl);
background: var(--surface-solid);
box-shadow: var(--elevation-raised);
}
.allocation-bar {
display: flex;
min-height: 170px;
overflow: hidden;
border-radius: var(--radius-lg);
}
.allocation-bar > span {
display: flex;
min-width: 0;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-fluid-sm);
color: var(--on-glass);
background: color-mix(in srgb, var(--accent) 70%, var(--surface-solid));
}
.allocation-bar .world { flex: 7; }
.allocation-bar .em {
flex: 3;
background: color-mix(in srgb, var(--accent-2) 45%, var(--surface-solid));
}
.allocation-bar b { font-size: var(--display-md); }
.allocation-bar small { margin-top: var(--space-2xs); font-size: var(--font-size-xs); }
.allocation-hero > div:last-child > p {
color: var(--accent-2-text);
font-size: var(--font-size-xs);
font-weight: 750;
}
.allocation-hero > div:last-child > strong {
display: block;
margin-top: var(--space-sm);
font-size: var(--font-size-xl);
}
.allocation-hero > div:last-child > span {
display: block;
margin-top: var(--space-md);
color: var(--text-faint);
font-size: var(--font-size-xs);
line-height: 1.65;
}
.source-card {
display: grid;
gap: var(--space-lg);
max-width: 920px;
margin: var(--space-2xl) auto 0;
padding: var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface-alt);
}
.source-card > p {
color: var(--text);
font-size: var(--font-size-sm);
font-weight: 750;
}
.source-card nav { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); }
.source-card a {
color: var(--accent-2-text);
font-size: var(--font-size-xs);
text-underline-offset: 3px;
}
.source-card > span {
color: var(--text-faint);
font-size: var(--font-size-2xs);
line-height: 1.55;
}
.legal-section .preset-answer-label {
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-weight: 680;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.legal-section .preset-answer-value {
margin-top: var(--space-sm);
color: var(--green);
font-size: var(--display-lg);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.04em;
overflow-wrap: anywhere;
}
.legal-section .preset-answer-unit {
color: var(--text-dim);
font-size: 0.34em;
font-weight: 600;
letter-spacing: 0;
}
.legal-section .preset-answer-note {
margin-top: var(--space-md);
color: var(--text-faint);
font-size: var(--font-size-xs);
}
.legal-section .preset-facts {
margin-top: var(--space-xl);
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: var(--space-2xs);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--border);
overflow: hidden;
}
.legal-section .preset-facts > div {
grid-column: span 3;
padding: var(--space-lg) var(--space-lg);
background: var(--surface-solid);
}
.legal-section .preset-facts-3 > .preset-result-fact {
grid-column: span 2;
}
.legal-section .preset-facts-1 > .preset-result-fact {
grid-column: span 6;
}
.legal-section .preset-assumptions-3 > .preset-assumption-fact {
grid-column: span 2;
}
.legal-section .preset-facts dt {
color: var(--text-faint);
font-size: var(--font-size-2xs);
line-height: 1.4;
}
.legal-section .preset-facts dd {
margin-top: var(--space-xs);
color: var(--text);
font-size: var(--font-size-lg);
font-weight: 650;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.legal-section .preset-fact-unit {
color: var(--text-dim);
font-size: var(--font-size-xs);
font-weight: 600;
}
@media (max-width: 820px) {
.legal-section .preset-facts-3 > .preset-result-fact {
grid-column: span 3;
}
.legal-section .preset-facts-3 > .preset-result-fact:nth-child(3) {
grid-column: span 6;
}
.legal-section .preset-assumptions-3 > .preset-assumption-fact {
grid-column: span 3;
}
.legal-section .preset-assumptions-3 > .preset-assumption-fact:last-child {
grid-column: span 6;
}
}
@media (max-width: 560px) {
.legal-section .preset-facts > div,
.legal-section .preset-facts-3 > .preset-result-fact,
.legal-section .preset-assumptions-3 > .preset-assumption-fact {
grid-column: span 6;
}
}
.legal-section .preset-sensitivity { margin-top: var(--space-xl); }
.legal-section .preset-sensitivity > p {
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-weight: 680;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.legal-section .preset-sensitivity dl {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
gap: var(--space-2xs);
margin-top: var(--space-md);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--border);
overflow: hidden;
}
.legal-section .preset-sensitivity dl > div {
padding: var(--space-lg);
background: var(--surface-solid);
}
.legal-section .preset-sensitivity dt {
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-variant-numeric: tabular-nums;
}
.legal-section .preset-sensitivity dd {
margin-top: var(--space-xs);
color: var(--text);
font-size: var(--font-size-lg);
font-weight: 650;
font-variant-numeric: tabular-nums;
}
.legal-section .preset-sensitivity > span {
display: block;
max-width: var(--measure);
margin-top: var(--space-md);
color: var(--text-faint);
font-size: var(--font-size-xs);
line-height: 1.55;
}
.legal-section .preset-cta { margin-top: var(--space-xl); }
.legal-section .preset-cta-link {
display: inline-flex;
min-height: var(--control-h);
align-items: center;
padding: var(--space-lg) var(--space-xl);
font-size: var(--font-size-sm);
font-weight: 650;
text-decoration: none;
}
.legal-section .preset-links { margin-top: var(--space-lg); }
.legal-section .preset-others { margin-top: var(--space-xs); }
.section-index {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs) var(--space-xl);
margin: 0 0 var(--space-xl);
}
.section-index a {
display: inline-block;
padding: var(--space-2xs) 0;
color: var(--accent-2-text);
font-size: var(--font-size-xs);
font-weight: 600;
line-height: 1.5;
text-decoration: none;
}
.section-index a:hover,
.section-index a:focus-visible { text-decoration: underline; }
.section-index a:focus-visible {
outline: 2px solid var(--accent-2);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
.methodology-index {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
margin: 0 0 var(--space-2xl);
padding: var(--space-lg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface-alt);
}
.methodology-index a {
display: inline-flex;
min-height: var(--control-h-compact);
align-items: center;
padding: var(--space-sm) var(--space-lg);
border: 1px solid var(--border-strong);
border-radius: var(--radius-pill);
color: var(--accent-2-text);
background: var(--surface-solid);
font-size: var(--font-size-xs);
font-weight: 650;
text-decoration: none;
}
.methodology-index a:hover,
.methodology-index a:focus-visible { border-color: var(--accent-2-text); }
.legal-section[id],
.methodology-index[id] { scroll-margin-top: 92px; }
.scope-gate { display: grid; gap: var(--space-lg); }
.focused-scope-note,
.scope-gate-reason {
padding: var(--space-lg) var(--space-lg);
border-left: 3px solid var(--amber);
background: var(--surface-alt);
border-radius: var(--radius-sm);
color: var(--text);
}
.scope-gate .focused-secondary-link { justify-self: start; }
.calculator-busy { display: grid; gap: var(--space-lg); }
.calculator-busy > p {
padding: var(--space-lg) var(--space-lg);
border-left: 3px solid var(--border-strong, var(--border));
border-radius: var(--radius-sm);
background: var(--surface-alt);
color: var(--text);
}
.calculator-busy-retry { justify-self: start; }
.calculator-busy-retry button[disabled] {
opacity: 0.6;
cursor: wait;
}
.focused-cases {
display: grid;
gap: var(--space-md);
margin-top: var(--space-xl);
}
.focused-cases > p {
margin: 0;
color: var(--text-dim);
font-size: var(--font-size-2xs);
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.focused-cases a {
display: grid;
gap: var(--space-2xs);
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface-alt);
color: inherit;
text-decoration: none;
}
.focused-cases a:hover,
.focused-cases a:focus-visible { border-color: var(--accent-2-text); }
.focused-cases strong {
color: var(--text);
font-size: var(--font-size-xs);
}
.focused-cases span {
color: var(--text-dim);
font-size: var(--font-size-2xs);
line-height: 1.45;
}
.focused-cases-download {
padding: var(--space-sm) 0 0;
border: 0;
background: none;
color: var(--text-dim);
font-size: var(--font-size-2xs);
text-decoration: underline;
}
.focused-cases-download:hover,
.focused-cases-download:focus-visible { color: var(--accent-2-text); }
.trust-panel nav small {
font-size: var(--font-size-2xs);
font-weight: 400;
color: var(--text-faint);
white-space: nowrap;
}
.calculator-handoff .pay-explain {
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: start;
cursor: pointer;
}
.legal-card, .legal-section, .focused-shell, .focused-workbench,
.focused-form, .focused-results, .focused-panel, .focused-fields > label {
min-width: 0;
}
.legal-section, .legal-hero, .focused-hero, .trust-panel {
overflow-wrap: anywhere;
}
.focused-input, .focused-input input, .focused-input select {
min-width: 0;
max-width: 100%;
}
.calculator-handoff { display: inline; margin: 0; }
.calculator-handoff button { font: inherit; }
button.pay-explain { padding: 0; border: 0; background: none; text-align: inherit; cursor: pointer; }
.author-card {
display: grid;
grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
gap: var(--space-lg) var(--space-xl);
align-items: start;
margin: var(--space-lg) 0;
}
.author-identity p {
margin: 0 0 var(--space-2xs);
color: var(--text-dim);
font-size: var(--font-size-sm);
}
.author-name {
color: var(--text);
font-size: var(--font-size-lg);
font-weight: 700;
overflow-wrap: anywhere;
}
.author-project h3 {
margin: 0 0 var(--space-sm);
font-size: var(--font-size-md);
}
.author-more {
margin-top: var(--space-md);
}
.author-more > summary {
cursor: pointer;
color: var(--accent-2-text);
font-size: var(--font-size-sm);
font-weight: 600;
}
.author-more > summary:focus-visible {
outline: 2px solid var(--accent-2-text);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
.author-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
font-size: var(--font-size-sm);
}
@media (max-width: 640px) {
.author-card {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-md);
}
}
.evidence-box {
max-width: 920px;
margin-top: var(--space-2xl);
padding: var(--space-fluid-md);
border: 1px solid var(--border-strong);
border-radius: var(--radius-xl);
background: var(--surface-alt);
font-size: var(--font-size-sm);
}
.evidence-box h2 {
margin: 0 0 var(--space-md);
font-size: var(--font-size-md);
}
.evidence-box dl {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: var(--space-md);
margin: 0;
}
.evidence-box dt { color: var(--text-faint); font-size: var(--font-size-xs); }
.evidence-box dd { margin: 0; }
.evidence-box > p {
margin: var(--space-lg) 0 var(--space-xs);
color: var(--text-faint);
font-size: var(--font-size-xs);
}
.evidence-sources {
margin: 0;
padding-left: 1.4em;
}
.evidence-box a { color: var(--accent-2-text); overflow-wrap: anywhere; }
.evidence-more {
display: inline-block;
margin-top: var(--space-md);
font-weight: 700;
text-decoration: none;
}
.hub-filter {
display: grid;
gap: var(--space-sm);
max-width: 720px;
margin-bottom: var(--space-xl);
}
.hub-filter label {
color: var(--text-dim);
font-size: var(--font-size-xs);
font-weight: 650;
}
.hub-filter-row {
display: flex;
min-height: var(--control-h);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
background: var(--surface-solid);
}
.hub-filter-row:focus-within {
border-color: var(--accent-2);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.hub-filter-row input {
flex: 1;
min-width: 0;
padding: var(--space-md) var(--space-lg);
border: 0;
outline: 0;
color: var(--text);
background: transparent;
font: inherit;
font-size: var(--font-size-sm);
}
.hub-filter-submit {
min-width: var(--control-h);
padding: 0 var(--space-lg);
border: 0;
border-left: 1px solid var(--border);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
color: var(--accent-2-text);
background: transparent;
font: inherit;
font-size: var(--font-size-sm);
font-weight: 700;
cursor: pointer;
}
.hub-filter-status:empty { display: none; }
.hub-filter-status,
.hub-filter-links {
color: var(--text-dim);
font-size: var(--font-size-xs);
}
.hub-filter-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-lg);
}
.hub-filter-links a,
.hub-chips a { color: var(--accent-2-text); }
.hub-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.hub-chips a {
display: inline-flex;
min-height: var(--control-h-compact);
align-items: center;
padding: var(--space-2xs) var(--space-md);
border: 1px solid var(--border-strong);
border-radius: var(--radius-pill);
font-size: var(--font-size-xs);
font-weight: 650;
text-decoration: none;
}
.hub-chips a:hover,
.hub-chips a:focus-visible { background: var(--surface-hover); }
.hub-cluster {
margin: var(--space-xl) 0 var(--space-xs);
padding-inline: var(--space-md);
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.next-step {
margin: var(--space-2xl) 0 0;
padding: var(--space-fluid-md);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
background: var(--surface-alt);
}
.next-step h2 {
font-size: var(--font-size-lg);
line-height: 1.3;
}
.next-step-bridge {
display: grid;
justify-items: start;
gap: var(--space-md);
margin-top: var(--space-md);
}
.next-step-bridge p,
.next-step-why {
max-width: 720px;
color: var(--text-dim);
font-size: var(--font-size-sm);
line-height: 1.6;
}
.next-step-why { margin-top: var(--space-md); }
.next-step-label {
margin-top: var(--space-xl);
color: var(--text-faint);
font-size: var(--font-size-2xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.next-step-related {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-sm);
margin: var(--space-sm) 0 0;
padding: 0;
list-style: none;
}
.next-step-related a {
display: grid;
gap: var(--space-2xs);
height: 100%;
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text);
text-decoration: none;
}
.next-step-related a:hover,
.next-step-related a:focus-visible { background: var(--surface-hover); }
.next-step-related b {
color: var(--accent-2-text);
font-size: var(--font-size-xs);
}
.next-step-related span {
font-size: var(--font-size-sm);
line-height: 1.45;
}
.next-step-official {
margin-top: var(--space-lg);
font-size: var(--font-size-sm);
}
.next-step-official > span { color: var(--text-faint); }
.next-step-why a,
.next-step-official a { color: var(--accent-2-text); }
.legal-shell > .content-breadcrumb { margin-bottom: var(--space-md); }
.simulator-intro {
margin: var(--space-2xl) 0 var(--space-lg);
padding: var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
color: var(--text-dim);
font-size: var(--font-size-sm);
line-height: 1.65;
}
.simulator-intro h2 { color: var(--text); font-size: var(--font-size-lg); }
.simulator-intro h3 { margin-top: var(--space-lg); color: var(--text); font-size: var(--font-size-sm); }
.simulator-intro p { margin-top: var(--space-sm); max-width: 760px; }
.source-banner {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-sm);
margin-bottom: var(--space-md);
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text-dim);
font-size: var(--font-size-xs);
}
.source-banner a,
.value-source { color: var(--accent-2-text); }
.value-source {
display: inline-block;
margin-top: var(--space-xs);
font-size: var(--font-size-2xs);
text-decoration: none;
}
.value-source:hover,
.value-source:focus-visible { text-decoration: underline; }
.page-stand {
display: block;
margin-top: var(--space-md);
color: var(--text-faint);
font-size: var(--font-size-2xs);
}
.focused-fields label small a,
.focused-reading a { color: var(--accent-2-text); }
.knowledge-official ul { margin: 0; padding-left: 1.2em; }
.knowledge-official li + li { margin-top: 0.4em; }
.knowledge-official a { color: var(--accent-2-text); }
.focused-table .is-best {
color: var(--accent-2-text);
background: var(--surface-alt);
}