/* SBTL componentstijlen uit het designsystem, afgebakend tot .sb-root (de site). Niet met de hand bewerken: aanpassingen horen in site.css. */
:root {
  --ease-standard: cubic-bezier(0.3, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --text-display: var(--fw-medium) var(--fs-display)/var(--lh-tight) var(--font-serif);
  --text-h1: var(--fw-medium) var(--fs-h1)/var(--lh-tight) var(--font-serif);
  --text-h2: var(--fw-medium) var(--fs-h2)/var(--lh-heading) var(--font-serif);
  --text-h3: var(--fw-medium) var(--fs-h3)/var(--lh-heading) var(--font-serif);
  --text-h4: var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-sans);
  --text-lead: var(--fw-regular) var(--fs-lead)/1.55 var(--font-sans);
  --text-body-font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  --text-small: var(--fw-regular) var(--fs-small)/1.55 var(--font-sans);
  --text-eyebrow: var(--fw-semibold) var(--fs-caption)/1.3 var(--font-sans);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); font: var(--text-body-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.sb-root h1, .sb-root h2, .sb-root h3, .sb-root h4 { margin: 0; color: var(--text-heading); text-wrap: balance; letter-spacing: var(--ls-heading); }
.sb-root h1 { font: var(--text-h1); }
.sb-root h2 { font: var(--text-h2); }
.sb-root h3 { font: var(--text-h3); }
.sb-root h4 { font: var(--text-h4); letter-spacing: 0; }
.sb-root p { margin: 0; text-wrap: pretty; }
.sb-root a { color: var(--text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur-fast) var(--ease-standard); }
.sb-root a:hover { color: var(--text-link-hover); text-decoration-thickness: 2px; }
.sb-root :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.sb-root img { max-width: 100%; display: block; }
.sb-root { container-type: inline-size; container-name: sb; }
.sb-root .sb-container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sb-root .sb-container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.sb-root .sb-section { padding: var(--section-y) 0; }
.sb-root .sb-section--raised { background: var(--surface-raised); }
.sb-root .sb-section--sunken { background: var(--surface-sunken); }
.sb-root .sb-section--inverse { background: var(--surface-inverse); color: var(--text-on-inverse); }
.sb-root .sb-section--inverse h1, .sb-root .sb-section--inverse h2, .sb-root .sb-section--inverse h3 { color: var(--text-on-inverse); }
.sb-root .sb-section--rule { border-top: var(--border-w) solid var(--border-subtle); }
.sb-root .sb-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); }
.sb-root .sb-eyebrow { font: var(--text-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent); }
.sb-root .sb-lead { font: var(--text-lead); color: var(--text-body); }
.sb-root .sb-prose > * + * { margin-top: 1em; }
.sb-root .sb-prose h2 { margin-top: 1.6em; font: var(--text-h2); font-size: 30px; }
.sb-root .sb-prose h3 { margin-top: 1.4em; }
.sb-root .sb-prose ul, .sb-root .sb-prose ol { padding-left: 1.2em; margin-bottom: 0; }
.sb-root .sb-prose li + li { margin-top: 0.35em; }
.sb-root .sb-prose li::marker { color: var(--mos-600); }
.sb-root .sb-coulissen { display: grid; gap: 5px; }
.sb-root .sb-coulissen span { display: block; height: 2px; }
.sb-root .sb-coulissen span:nth-child(1) { background: var(--bos-700); width: 100%; }
.sb-root .sb-coulissen span:nth-child(2) { background: var(--mos-500); width: 72%; }
.sb-root .sb-coulissen span:nth-child(3) { background: var(--klei-400); width: 44%; }
@container sb (max-width: 720px) {
.sb-root .sb-container { padding: 0 var(--gutter-mobile); }
.sb-root .sb-section { padding: var(--section-y-mobile) 0; }
.sb-root .sb-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.sb-root .sb-grid > * { grid-column: 1 / -1 !important; }
.sb-root h1 { font-size: 36px; }
.sb-root h2 { font-size: 29px; }
.sb-root h3 { font-size: 22px; }
.sb-root .sb-lead { font-size: 18px; }
}
.sb-root .sb-icon { flex-shrink: 0; display: inline-block; vertical-align: middle; }
.sb-root .sb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: var(--fw-semibold) 16px/1.2 var(--font-sans); padding: 14px 22px; border-radius: var(--radius-sm); border: 1.5px solid transparent; text-decoration: none; cursor: pointer; transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); white-space: nowrap; }
.sb-root .sb-btn:hover { text-decoration: none; }
.sb-root .sb-btn:active { transform: translateY(1px); }
.sb-root .sb-btn .sb-icon { transition: transform var(--dur-base) var(--ease-standard); }
.sb-root .sb-btn:hover .sb-btn__trail { transform: translateX(3px); }
.sb-root .sb-btn--primary { background: var(--action-primary); color: var(--action-on-primary); }
.sb-root .sb-btn--primary:hover { background: var(--action-primary-hover); color: var(--action-on-primary); }
.sb-root .sb-btn--secondary { background: transparent; color: var(--bos-700); border-color: var(--bos-700); }
.sb-root .sb-btn--secondary:hover { background: var(--bos-100); color: var(--bos-900); }
.sb-root .sb-btn--ghost { background: transparent; color: var(--bos-700); padding-left: 2px; padding-right: 2px; }
.sb-root .sb-btn--ghost:hover { color: var(--bos-900); text-decoration: underline; text-underline-offset: 0.25em; }
.sb-root .sb-btn--inverse { background: var(--zand-50); color: var(--bos-800); }
.sb-root .sb-btn--inverse:hover { background: var(--meidoorn-200); color: var(--bos-900); }
.sb-root .sb-btn--inverse-outline { background: transparent; color: var(--zand-50); border-color: rgba(251,248,242,0.6); }
.sb-root .sb-btn--inverse-outline:hover { border-color: var(--zand-50); background: rgba(251,248,242,0.08); color: var(--zand-50); }
.sb-root .sb-btn--sm { font-size: 14px; padding: 9px 14px; gap: 8px; }
.sb-root .sb-btn--lg { font-size: 17px; padding: 17px 26px; }
.sb-root .sb-btn--block { display: flex; width: 100%; }
.sb-root .sb-btn[disabled], .sb-root .sb-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.sb-root .sb-tag { display: inline-flex; align-items: center; gap: 6px; font: var(--fw-semibold) 12px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 9px; border-radius: var(--radius-xs); white-space: nowrap; }
.sb-root .sb-tag--neutral { background: var(--zand-200); color: var(--aarde-800); }
.sb-root .sb-tag--bos { background: var(--bos-100); color: var(--bos-800); }
.sb-root .sb-tag--mos { background: var(--mos-100); color: var(--mos-700); }
.sb-root .sb-tag--meidoorn { background: var(--meidoorn-200); color: var(--aarde-900); }
.sb-root .sb-tag--klaproos { background: var(--klaproos-100); color: var(--klaproos-600); }
.sb-root .sb-tag--outline { background: transparent; color: var(--aarde-700); box-shadow: inset 0 0 0 1px var(--border-default); }
.sb-root .sb-textlink { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-semibold); color: var(--text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; text-decoration-color: var(--mos-300); }
.sb-root .sb-textlink:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }
.sb-root .sb-textlink .sb-icon { transition: transform var(--dur-base) var(--ease-standard); }
.sb-root .sb-textlink:hover .sb-icon { transform: translateX(3px); }
.sb-root .sb-textlink--inverse { color: var(--zand-50); text-decoration-color: rgba(251,248,242,0.4); }
.sb-root .sb-textlink--inverse:hover { color: var(--meidoorn-200); }
.sb-root .sb-field { display: grid; gap: 7px; }
.sb-root .sb-field__label { font: var(--fw-semibold) 15px/1.3 var(--font-sans); color: var(--text-strong); }
.sb-root .sb-field__req { color: var(--text-muted); font-weight: var(--fw-regular); }
.sb-root .sb-field__hint { font: var(--text-small); font-size: 14px; color: var(--text-muted); }
.sb-root .sb-field__error { font: var(--fw-medium) 14px/1.4 var(--font-sans); color: var(--klaproos-600); }
.sb-root .sb-input { width: 100%; font: var(--fw-regular) 16px/1.4 var(--font-sans); color: var(--text-strong); background: var(--wit); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 12px 14px; transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); appearance: none; }
.sb-root .sb-input::placeholder { color: #8E8174; }
.sb-root .sb-input:hover { border-color: var(--aarde-600); }
.sb-root .sb-input:focus { outline: none; border-color: var(--bos-700); box-shadow: 0 0 0 3px var(--mos-100); }
.sb-root .sb-input[aria-invalid="true"] { border-color: var(--klaproos-600); }
.sb-root .sb-input:disabled { background: var(--zand-200); color: var(--text-muted); cursor: not-allowed; }
.sb-root textarea.sb-input { min-height: 120px; resize: vertical; line-height: 1.55; }
.sb-root .sb-select { position: relative; }
.sb-root .sb-select .sb-input { padding-right: 42px; cursor: pointer; }
.sb-root .sb-select .sb-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--aarde-700); }
.sb-root .sb-check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; cursor: pointer; }
.sb-root .sb-check input { position: absolute; opacity: 0; pointer-events: none; }
.sb-root .sb-check__box { width: 22px; height: 22px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-xs); background: var(--wit); display: grid; place-items: center; color: var(--zand-50); transition: background var(--dur-fast), border-color var(--dur-fast); margin-top: 1px; }
.sb-root .sb-check__box .sb-icon { opacity: 0; }
.sb-root .sb-check input:checked + .sb-check__box { background: var(--bos-700); border-color: var(--bos-700); }
.sb-root .sb-check input:checked + .sb-check__box .sb-icon { opacity: 1; }
.sb-root .sb-check input:focus-visible + .sb-check__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sb-root .sb-check--radio .sb-check__box { border-radius: 50%; }
.sb-root .sb-check--radio .sb-check__box::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--zand-50); opacity: 0; }
.sb-root .sb-check--radio input:checked + .sb-check__box::after { opacity: 1; }
.sb-root .sb-check__label { font: var(--fw-regular) 16px/1.45 var(--font-sans); color: var(--text-strong); }
.sb-root .sb-check__hint { display: block; font-size: 14px; color: var(--text-muted); margin-top: 2px; }
.sb-root .sb-check--disabled { opacity: 0.5; cursor: not-allowed; }
.sb-root .sb-photo { position: relative; width: 100%; background: var(--surface-placeholder); border-radius: var(--radius-md); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(36,28,21,0.05); }
.sb-root .sb-photo--flat { border-radius: 0; }
.sb-root .sb-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-root .sb-photo__label { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; gap: 8px; align-items: baseline; font: var(--fw-medium) 13px/1.4 var(--font-sans); color: var(--text-placeholder); }
.sb-root .sb-photo__label b { font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; flex-shrink: 0; }
.sb-root .sb-photo__corner { position: absolute; top: 14px; left: 16px; }
.sb-root .sb-figure { margin: 0; display: grid; gap: 10px; }
.sb-root .sb-figure figcaption { font: var(--text-small); font-size: 14px; color: var(--text-muted); }
.sb-root .sb-sechead { display: grid; gap: 14px; max-width: 720px; }
.sb-root .sb-sechead--center { margin: 0 auto; text-align: center; justify-items: center; }
.sb-root .sb-sechead--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; max-width: none; }
.sb-root .sb-sechead--split .sb-sechead__text { display: grid; gap: 14px; max-width: 680px; }
.sb-root .sb-sechead__intro { font: var(--text-lead); font-size: 19px; color: var(--text-body); }
.sb-root .sb-sechead--inverse h2, .sb-root .sb-sechead--inverse h1 { color: var(--text-on-inverse); }
.sb-root .sb-sechead--inverse .sb-sechead__intro { color: var(--text-on-inverse-muted); }
.sb-root .sb-sechead--inverse .sb-eyebrow { color: var(--mos-300); }
.sb-root .sb-stat { border-top: var(--rule-w) solid var(--bos-700); padding-top: 18px; display: grid; gap: 6px; align-content: start; }
.sb-root .sb-stat__value { font: var(--fw-medium) var(--fs-stat)/1 var(--font-serif); color: var(--bos-800); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.sb-root .sb-stat__unit { font-size: 0.42em; letter-spacing: 0; margin-left: 6px; color: var(--text-muted); font-family: var(--font-sans); font-weight: var(--fw-medium); }
.sb-root .sb-stat__label { font: var(--fw-semibold) 16px/1.4 var(--font-sans); color: var(--text-strong); margin-top: 6px; }
.sb-root .sb-stat__note { font: var(--text-small); font-size: 14px; color: var(--text-muted); }
.sb-root .sb-stat--inverse { border-top-color: var(--mos-300); }
.sb-root .sb-stat--inverse .sb-stat__value { color: var(--zand-50); }
.sb-root .sb-stat--inverse .sb-stat__label { color: var(--zand-50); }
.sb-root .sb-stat--inverse .sb-stat__note, .sb-root .sb-stat--inverse .sb-stat__unit { color: var(--text-on-inverse-muted); }
.sb-root .sb-goal { display: grid; gap: 12px; }
.sb-root .sb-goal__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.sb-root .sb-goal__label { font: var(--fw-semibold) 16px/1.4 var(--font-sans); color: var(--text-strong); }
.sb-root .sb-goal__pct { font: var(--fw-medium) 15px/1.4 var(--font-sans); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sb-root .sb-goal__track { position: relative; height: 12px; background: var(--zand-300); border-radius: var(--radius-xs); overflow: hidden; }
.sb-root .sb-goal__fill { position: absolute; inset: 0 auto 0 0; background: var(--mos-500); border-radius: var(--radius-xs); }
.sb-root .sb-goal__ticks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); pointer-events: none; }
.sb-root .sb-goal__ticks span + span { border-left: 1px solid rgba(251,248,242,0.7); }
.sb-root .sb-goal__scale { display: flex; justify-content: space-between; font: var(--fw-medium) 13px/1.3 var(--font-sans); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sb-root .sb-goal--inverse .sb-goal__label { color: var(--zand-50); }
.sb-root .sb-goal--inverse .sb-goal__pct, .sb-root .sb-goal--inverse .sb-goal__scale { color: var(--text-on-inverse-muted); }
.sb-root .sb-goal--inverse .sb-goal__track { background: rgba(251,248,242,0.16); }
.sb-root .sb-goal--inverse .sb-goal__fill { background: var(--mos-500); }
.sb-root .sb-goal--inverse .sb-goal__ticks span + span { border-left-color: var(--bos-800); }
.sb-root .sb-pcard { display: grid; grid-template-rows: auto 1fr; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; color: inherit; text-decoration: none; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.sb-root .sb-pcard:hover { border-color: var(--border-default); box-shadow: var(--shadow-2); color: inherit; text-decoration: none; }
.sb-root .sb-pcard .sb-photo { border-radius: 0; }
.sb-root .sb-pcard__body { padding: 28px 30px 30px; display: grid; gap: 14px; align-content: start; }
.sb-root .sb-pcard__title { font: var(--text-h3); color: var(--text-heading); }
.sb-root .sb-pcard__facts { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 14px 0 0; margin-top: 4px; border-top: 1px solid var(--border-subtle); }
.sb-root .sb-pcard__fact { display: grid; gap: 2px; }
.sb-root .sb-pcard__fact b { font: var(--fw-medium) 24px/1.1 var(--font-serif); color: var(--bos-800); font-variant-numeric: lining-nums; }
.sb-root .sb-pcard__fact span { font-size: 14px; color: var(--text-muted); }
.sb-root .sb-pcard__cta { margin-top: 6px; }
.sb-root .sb-pcard:hover .sb-textlink .sb-icon { transform: translateX(3px); }
.sb-root .sb-ncard { display: grid; gap: 16px; align-content: start; color: inherit; text-decoration: none; }
.sb-root .sb-ncard:hover { color: inherit; text-decoration: none; }
.sb-root .sb-ncard__meta { display: flex; gap: 12px; align-items: center; font: var(--fw-medium) 14px/1.3 var(--font-sans); color: var(--text-muted); }
.sb-root .sb-ncard__title { font: var(--fw-medium) 23px/1.25 var(--font-serif); color: var(--text-heading); text-wrap: balance; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-base); }
.sb-root .sb-ncard:hover .sb-ncard__title { text-decoration-color: var(--mos-500); }
.sb-root .sb-ncard__excerpt { font: var(--text-small); font-size: 16px; color: var(--text-body); }
.sb-root .sb-ncard--row { grid-template-columns: 240px 1fr; gap: 28px; align-items: start; padding: 24px 0; border-top: 1px solid var(--border-subtle); }
.sb-root .sb-ncard--row .sb-ncard__text { display: grid; gap: 10px; }
.sb-root .sb-partners { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.sb-root .sb-partner { background: var(--surface-raised); min-height: 112px; padding: 20px; display: grid; place-content: center; text-align: center; gap: 6px; }
.sb-root .sb-partner__name { font: var(--fw-semibold) 16px/1.35 var(--font-sans); color: var(--aarde-800); }
.sb-root .sb-partner__role { font-size: 13px; color: var(--text-muted); }
.sb-root .sb-partner__logo { width: 88px; height: 36px; margin: 0 auto 4px; border: 1px dashed var(--klei-400); border-radius: var(--radius-xs); display: grid; place-items: center; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.sb-root .sb-cta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; background: var(--surface-inverse); color: var(--text-on-inverse); border-radius: var(--radius-lg); padding: 56px; }
.sb-root .sb-cta--accent { background: var(--surface-accent); color: var(--text-body); }
.sb-root .sb-cta--accent .sb-cta__title { color: var(--text-heading); }
.sb-root .sb-cta--accent .sb-cta__text { color: var(--text-body); }
.sb-root .sb-cta__text-col { display: grid; gap: 16px; }
.sb-root .sb-cta__title { font: var(--text-h2); color: var(--zand-50); }
.sb-root .sb-cta__text { font: var(--text-lead); font-size: 18px; color: var(--text-on-inverse-muted); max-width: 56ch; }
.sb-root .sb-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.sb-root .sb-cta--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; overflow: hidden; }
.sb-root .sb-cta--split > .sb-cta__half { padding: 48px; display: grid; gap: 16px; align-content: start; }
.sb-root .sb-cta--split > .sb-cta__half + .sb-cta__half { border-left: 1px solid var(--border-inverse); }
.sb-root .sb-cta--split .sb-cta__actions { justify-content: flex-start; margin-top: 8px; }
@container sb (max-width: 1080px) {
.sb-root .sb-stat__value { font-size: 44px; }
}
@container sb (max-width: 720px) {
.sb-root .sb-sechead--split { display: grid; gap: 18px; }
.sb-root .sb-stat__value { font-size: 44px; }
.sb-root .sb-goal__top { flex-direction: column; gap: 4px; }
.sb-root .sb-pcard__body { padding: 22px 20px 24px; }
.sb-root .sb-ncard--row { grid-template-columns: 1fr; gap: 14px; }
.sb-root .sb-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb-root .sb-cta { grid-template-columns: 1fr; padding: 32px 22px; gap: 24px; border-radius: var(--radius-md); }
.sb-root .sb-cta__actions { justify-content: flex-start; }
.sb-root .sb-cta--split { padding: 0; gap: 0; }
.sb-root .sb-cta--split > .sb-cta__half { padding: 32px 22px; }
.sb-root .sb-cta--split > .sb-cta__half + .sb-cta__half { border-left: 0; border-top: 1px solid var(--border-inverse); }
}
.sb-root .sb-answer { background: var(--surface-accent); border: 1px solid var(--mos-300); border-radius: var(--radius-md); padding: 26px 30px 28px; display: grid; gap: 10px; }
.sb-root .sb-answer__label { font: var(--text-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--mos-700); }
.sb-root .sb-answer__body { font: var(--fw-regular) 19px/1.6 var(--font-sans); color: var(--text-strong); }
.sb-root .sb-answer__body > * + * { margin-top: 0.7em; }
.sb-root .sb-facts { display: grid; gap: 14px; }
.sb-root .sb-facts__title { font: var(--text-h4); color: var(--text-heading); }
.sb-root .sb-facts dl { margin: 0; display: grid; }
.sb-root .sb-facts { container-type: inline-size; min-width: 0; }
.sb-root .sb-facts__row { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.sb-root .sb-facts__row:last-child { border-bottom: 1px solid var(--border-subtle); }
.sb-root .sb-facts dt { font: var(--fw-semibold) 14px/1.5 var(--font-sans); color: var(--text-muted); }
.sb-root .sb-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font: var(--fw-regular) 16px/1.5 var(--font-sans); color: var(--text-strong); }
.sb-root .sb-facts--boxed { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 26px 28px; }
@container (max-width: 340px) {
.sb-root .sb-facts__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.sb-root .sb-facts--boxed .sb-facts__row:last-child { border-bottom: 0; padding-bottom: 0; }
.sb-root .sb-facts--inverse .sb-facts__title { color: var(--zand-50); }
.sb-root .sb-facts--inverse .sb-facts__row { border-color: var(--border-inverse); grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
.sb-root .sb-facts--inverse dt { color: var(--text-on-inverse-muted); font-size: 13px; }
.sb-root .sb-facts--inverse dd { color: var(--zand-50); font-size: 15px; }
.sb-root .sb-facts--inverse dd a { color: var(--zand-50); }
.sb-root .sb-acc { border-top: 1px solid var(--border-default); }
.sb-root .sb-acc__item { border-bottom: 1px solid var(--border-default); }
.sb-root .sb-acc__q { width: 100%; display: grid; grid-template-columns: 1fr 32px; gap: 20px; align-items: center; text-align: left; background: none; border: 0; padding: 22px 0; cursor: pointer; font: var(--fw-medium) 21px/1.35 var(--font-serif); color: var(--text-heading); }
.sb-root .sb-acc__q:hover { color: var(--bos-900); }
.sb-root .sb-acc__icon { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-default); display: grid; place-items: center; color: var(--bos-700); transition: background var(--dur-base), border-color var(--dur-base), transform var(--dur-slow) var(--ease-standard); }
.sb-root .sb-acc__q:hover .sb-acc__icon { border-color: var(--bos-700); }
.sb-root .sb-acc__item--open .sb-acc__icon { background: var(--bos-700); border-color: var(--bos-700); color: var(--zand-50); transform: rotate(45deg); }
.sb-root .sb-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-standard); }
.sb-root .sb-acc__item--open .sb-acc__panel { grid-template-rows: 1fr; }
.sb-root .sb-acc__panel > div { overflow: hidden; }
.sb-root .sb-acc__a { padding: 0 52px 24px 0; max-width: 72ch; color: var(--text-body); }
.sb-root .sb-acc__a > * + * { margin-top: 0.8em; }
.sb-root .sb-table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); }
.sb-root .sb-table { width: 100%; border-collapse: collapse; font: var(--fw-regular) 16px/1.45 var(--font-sans); color: var(--text-strong); }
.sb-root .sb-table caption { caption-side: top; text-align: left; padding: 18px 20px 4px; font: var(--text-h4); color: var(--text-heading); }
.sb-root .sb-table th { font: var(--fw-semibold) 13px/1.3 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); text-align: left; padding: 14px 20px; border-bottom: 1.5px solid var(--border-strong); white-space: nowrap; }
.sb-root .sb-table td { padding: 14px 20px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.sb-root .sb-table tbody tr:last-child td { border-bottom: 0; }
.sb-root .sb-table .num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.sb-root .sb-table tr.is-highlight td { background: var(--meidoorn-200); font-weight: var(--fw-semibold); }
.sb-root .sb-table__note { font-size: 14px; color: var(--text-muted); padding: 12px 20px 16px; border-top: 1px solid var(--border-subtle); }
.sb-root .sb-toc { display: grid; gap: 12px; }
.sb-root .sb-toc__title { font: var(--text-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.sb-root .sb-toc ol { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--border-subtle); }
.sb-root .sb-toc li { border-bottom: 1px solid var(--border-subtle); }
.sb-root .sb-toc a { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 11px 0; text-decoration: none; color: var(--text-body); font: var(--fw-medium) 15px/1.4 var(--font-sans); }
.sb-root .sb-toc a span:first-child { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 13px; padding-top: 1px; }
.sb-root .sb-toc a:hover { color: var(--bos-900); }
.sb-root .sb-toc a.is-active { color: var(--bos-800); font-weight: var(--fw-semibold); }
.sb-root .sb-toc a.is-active span:first-child { color: var(--mos-600); }
.sb-root .sb-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font: var(--fw-medium) 14px/1.4 var(--font-sans); color: var(--text-muted); }
.sb-root .sb-meta__item { display: inline-flex; align-items: center; gap: 7px; }
.sb-root .sb-meta__item .sb-icon { color: var(--mos-600); }
.sb-root .sb-thennow { display: grid; gap: 12px; margin: 0; }
.sb-root .sb-thennow__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sb-root .sb-thennow figcaption { font-size: 14px; color: var(--text-muted); }
.sb-root .sb-related { display: grid; gap: 16px; }
.sb-root .sb-related__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 24px; }
.sb-root .sb-related__item a { display: grid; gap: 10px; padding: 20px 0 0; border-top: var(--rule-w) solid var(--bos-700); text-decoration: none; color: inherit; }
.sb-root .sb-related__item h3 { font: var(--fw-medium) 21px/1.3 var(--font-serif); color: var(--text-heading); }
.sb-root .sb-related__item p { font-size: 15px; color: var(--text-muted); }
.sb-root .sb-related__item a:hover h3 { text-decoration: underline; text-decoration-color: var(--mos-500); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
@container sb (max-width: 720px) {
.sb-root .sb-answer { padding: 20px 20px 22px; }
.sb-root .sb-answer__body { font-size: 17px; }
.sb-root .sb-acc__q { font-size: 19px; padding: 18px 0; }
.sb-root .sb-acc__a { padding-right: 0; }
.sb-root .sb-facts__row { grid-template-columns: 1fr; gap: 2px; }
.sb-root .sb-related__list { grid-template-columns: 1fr; }
.sb-root .sb-table th, .sb-root .sb-table td { padding: 12px 14px; }
}
.sb-root .sb-wordmark { display: inline-flex; align-items: center; gap: 20px; text-decoration: none; color: var(--bos-800); }
.sb-root .sb-wordmark__logo { display: block; aspect-ratio: 2983 / 1367; background: url('../img/logo.png') left center / contain no-repeat; flex-shrink: 0; }
.sb-root .sb-wordmark--inverse .sb-wordmark__logo { filter: brightness(0) invert(1); }
.sb-root .sb-wordmark__sub { padding-left: 20px; border-left: 1px solid var(--border-subtle); font: italic var(--fw-regular) 16px/1.35 var(--font-serif); color: var(--text-muted); max-width: 17ch; }
.sb-root .sb-wordmark--inverse .sb-wordmark__sub { color: var(--text-on-inverse-muted); border-color: var(--border-inverse); }
.sb-root .sb-wordmark:hover { color: var(--bos-900); text-decoration: none; }
.sb-root .sb-wordmark__slot { width: 52px; height: 52px; flex-shrink: 0; border: 1.5px dashed var(--klei-400); border-radius: var(--radius-sm); display: grid; place-items: center; font: var(--fw-semibold) 9px/1.1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.sb-root .sb-wordmark__text { display: grid; gap: 1px; font: var(--fw-medium) 19px/1.1 var(--font-serif); letter-spacing: -0.005em; }
.sb-root .sb-wordmark__text small { font: var(--fw-regular) 13px/1.3 var(--font-sans); color: var(--text-muted); letter-spacing: 0; margin-top: 3px; }
.sb-root .sb-wordmark--inverse { color: var(--zand-50); }
.sb-root .sb-wordmark--inverse:hover { color: var(--zand-50); }
.sb-root .sb-wordmark--inverse .sb-wordmark__slot { border-color: rgba(251,248,242,0.35); color: var(--text-on-inverse-muted); }
.sb-root .sb-wordmark--inverse .sb-wordmark__text small { color: var(--text-on-inverse-muted); }
.sb-root .sb-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: var(--fw-medium) 14px/1.4 var(--font-sans); color: var(--text-muted); }
.sb-root .sb-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.sb-root .sb-crumbs a { color: var(--text-muted); text-decoration: none; }
.sb-root .sb-crumbs a:hover { color: var(--bos-800); text-decoration: underline; }
.sb-root .sb-crumbs .sb-icon { color: var(--klei-500); }
.sb-root .sb-crumbs [aria-current] { color: var(--text-strong); }
.sb-root .sb-header { background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle); position: relative; z-index: 10; }
.sb-root .sb-header__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; }
.sb-root .sb-header__actions { display: flex; align-items: center; gap: 12px; }
.sb-root .sb-header__nav { border-top: 1px solid var(--border-subtle); }
.sb-root .sb-header__nav ul { list-style: none; margin: 0 auto; padding-top: 0; padding-bottom: 0; display: flex; gap: 4px 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.sb-root .sb-header__nav a { position: relative; display: block; padding: 15px 12px 16px; font: var(--fw-medium) 15.5px/1.2 var(--font-sans); color: var(--aarde-800); text-decoration: none; }
.sb-root .sb-header__nav li:first-child a { padding-left: 0; }
.sb-root .sb-header__nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: transparent; transition: background var(--dur-base) var(--ease-standard); }
.sb-root .sb-header__nav li:first-child a::after { left: 0; }
.sb-root .sb-header__nav li:last-child a { padding-right: 0; }
.sb-root .sb-header__nav li:last-child a::after { right: 0; }
.sb-root .sb-header__nav a:hover { color: var(--bos-800); }
.sb-root .sb-header__nav a:hover::after { background: var(--mos-300); }
.sb-root .sb-header__nav a[aria-current="page"] { color: var(--bos-800); font-weight: var(--fw-semibold); }
.sb-root .sb-header__nav a[aria-current="page"]::after { background: var(--bos-700); }
.sb-root .sb-header__menubtn { display: none; align-items: center; gap: 8px; background: none; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 9px 12px; font: var(--fw-semibold) 14px/1 var(--font-sans); color: var(--bos-800); cursor: pointer; }
.sb-root .sb-header__mobile { display: none; }
.sb-root .sb-footer { background: var(--surface-inverse-deep); color: var(--text-on-inverse); }
.sb-root .sb-footer__main { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2fr); gap: 48px; padding-top: 80px; padding-bottom: 64px; }
.sb-root .sb-footer__intro { display: grid; gap: 18px; align-content: start; }
.sb-root .sb-footer__intro p { color: var(--text-on-inverse-muted); font-size: 15px; max-width: 34ch; }
.sb-root .sb-footer__tagline { font: italic var(--fw-regular) 20px/1.35 var(--font-serif); color: var(--zand-50) !important; }
.sb-root .sb-footer__col h2 { font: var(--text-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--mos-300); margin-bottom: 14px; }
.sb-root .sb-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sb-root .sb-footer a { color: var(--zand-50); text-decoration: none; }
.sb-root .sb-footer a:hover { color: var(--meidoorn-200); text-decoration: underline; text-underline-offset: 0.2em; }
.sb-root .sb-footer__col a { font-size: 15px; }
.sb-root .sb-footer__bottom { border-top: 1px solid var(--border-inverse); }
.sb-root .sb-footer__bottom .sb-container { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 26px; font-size: 14px; color: var(--text-on-inverse-muted); }
.sb-root .sb-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.sb-root .sb-footer__legal a { color: var(--text-on-inverse-muted); }
.sb-root .sb-footer__credit a { color: var(--zand-50); text-decoration: underline; text-decoration-color: rgba(251,248,242,0.35); text-underline-offset: 0.2em; }
@container sb (max-width: 1080px) {
.sb-root .sb-header__nav { display: none; }
.sb-root .sb-header__menubtn { display: inline-flex; }
.sb-root .sb-header__mobile--open { display: block; border-top: 1px solid var(--border-subtle); background: var(--surface-raised); }
.sb-root .sb-header__mobile ul { list-style: none; margin: 0; padding: 8px 0 20px; display: grid; }
.sb-root .sb-header__mobile a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); font: var(--fw-medium) 17px/1.2 var(--font-sans); color: var(--aarde-800); text-decoration: none; }
.sb-root .sb-header__mobile a[aria-current="page"] { color: var(--bos-800); font-weight: var(--fw-semibold); }
.sb-root .sb-footer__main { grid-template-columns: 1fr 1fr; }
}
@container sb (max-width: 720px) {
.sb-root .sb-wordmark__logo { height: 56px !important; }
.sb-root .sb-wordmark__sub { display: none; }
.sb-root .sb-header__top { padding-top: 12px; padding-bottom: 12px; }
.sb-root .sb-header__cta { display: none !important; }
.sb-root .sb-footer__main { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; padding-bottom: 40px; }
.sb-root .sb-footer__bottom .sb-container { flex-direction: column; align-items: flex-start; }
}
.sb-root .k-hero { padding: 72px 0 0; }
.sb-root .k-hero__h1 { font: var(--text-display); color: var(--text-heading); letter-spacing: var(--ls-heading); }
.sb-root .k-hero__top { align-items: end; }
.sb-root .k-hero__side { display: grid; gap: 28px; }
.sb-root .k-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.sb-root .k-hero__photo { margin-top: 56px; }
.sb-root .k-area { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 18px 0 0; font: var(--fw-medium) 14px/1.4 var(--font-sans); color: var(--text-muted); }
.sb-root .k-area b { color: var(--text-strong); font-weight: var(--fw-semibold); }
.sb-root .k-stack { display: grid; gap: var(--space-7); }
.sb-root .k-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.sb-root .k-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.sb-root .k-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.sb-root .k-elements { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--border-subtle); }
.sb-root .k-elements li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); font-weight: var(--fw-medium); color: var(--text-strong); }
.sb-root .k-elements li span { color: var(--text-muted); font-weight: var(--fw-regular); font-size: 15px; text-align: right; }
.sb-root .k-pagehead { padding-top: 36px; padding-bottom: 56px; display: grid; gap: 22px; }
.sb-root .k-pagehead__title { display: grid; gap: 16px; max-width: 820px; }
.sb-root .k-pagehead__answer { max-width: 820px; }
.sb-root .k-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; align-items: start; }
.sb-root .k-aside { min-width: 0; position: sticky; top: 24px; display: grid; gap: 20px; }
.sb-root .k-block { display: grid; gap: 18px; scroll-margin-top: 24px; }
.sb-root .k-block + .k-block { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--border-subtle); }
.sb-root .k-block h2 { font-size: 32px; }
.sb-root .k-species { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.sb-root .k-species-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sb-root .k-species-photos figure { margin: 0; display: grid; gap: 6px; font-size: 14px; color: var(--text-muted); }
.sb-root .k-species div { background: var(--surface-raised); padding: 16px 18px; display: grid; gap: 2px; }
.sb-root .k-species b { font: var(--fw-medium) 19px/1.3 var(--font-serif); color: var(--text-heading); }
.sb-root .k-species span { font-size: 14px; color: var(--text-muted); }
.sb-root .k-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.sb-root .k-steps li { counter-increment: s; display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border-subtle); }
.sb-root .k-steps li::before { content: counter(s); width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--bos-700); color: var(--bos-800); display: grid; place-items: center; font: var(--fw-medium) 17px/1 var(--font-serif); }
.sb-root .k-steps b { display: block; color: var(--text-strong); margin-bottom: 2px; }
.sb-root .k-form { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 32px; display: grid; gap: 20px; }
.sb-root .k-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sb-root .k-form__done { display: grid; gap: 10px; }
.sb-root .k-conditions { margin: 0; padding: 0; list-style: none; display: grid; }
.sb-root .k-conditions li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.sb-root .k-conditions li .sb-icon { color: var(--mos-600); margin-top: 3px; }
.sb-root .k-article { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); gap: 56px; align-items: start; }
.sb-root .k-article__body { display: grid; gap: 0; }
.sb-root .k-article__body .k-block + .k-block { margin-top: 48px; padding-top: 0; border-top: 0; }
.sb-root .k-article__body p + p { margin-top: 1em; }
.sb-root .k-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sb-root .k-compare div { border-top: 2px solid var(--bos-700); padding-top: 12px; display: grid; gap: 6px; }
.sb-root .k-compare b { font: var(--fw-medium) 20px/1.3 var(--font-serif); color: var(--text-heading); }
.sb-root .k-compare p { font-size: 15px; }
.sb-root .k-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sb-root .k-person { display: grid; gap: 14px; }
.sb-root .k-person__name { font: var(--fw-medium) 21px/1.3 var(--font-serif); color: var(--text-heading); display: block; }
.sb-root .k-person__role { font-size: 15px; color: var(--text-muted); }
.sb-root .k-docs { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--border-subtle); }
.sb-root .k-docs a { display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: var(--text-strong); font-weight: var(--fw-medium); }
.sb-root .k-docs a:hover { color: var(--bos-800); }
.sb-root .k-docs a .sb-icon { color: var(--bos-700); }
.sb-root .k-docs small { color: var(--text-muted); font-size: 14px; font-weight: var(--fw-regular); }
.sb-root .k-quiet { background: var(--surface-sunken); border-radius: var(--radius-md); padding: 36px 40px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; }
.sb-root .k-quiet__items { display: grid; gap: 22px; }
.sb-root .k-quiet__items h3 { font-size: 21px; margin-bottom: 6px; }
@container sb (max-width: 1080px) {
.sb-root .k-article { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.sb-root .k-article .k-aside { position: static; }
.sb-root .k-article__spacer { display: none; }
}
@container sb (max-width: 720px) {
.sb-root .k-hero { padding-top: 36px; }
.sb-root .k-hero__h1 { font-size: 40px; }
.sb-root .k-hero__photo { margin-top: 32px; margin-left: calc(-1 * var(--gutter-mobile)); margin-right: calc(-1 * var(--gutter-mobile)); }
.sb-root .k-hero__photo .sb-photo { border-radius: 0; aspect-ratio: 4/3 !important; }
.sb-root .k-hero__btns .sb-btn { width: 100%; }
.sb-root .k-area { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }
.sb-root .k-landscape-photo .sb-photo { aspect-ratio: 4/3 !important; }
.sb-root .k-stats { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
.sb-root .k-two, .sb-root .k-three { grid-template-columns: 1fr; gap: 36px; }
.sb-root .k-board { grid-template-columns: 1fr 1fr; gap: 20px; }
.sb-root .k-pagehead { padding-top: 20px; padding-bottom: 36px; }
.sb-root .k-layout { grid-template-columns: 1fr; gap: 40px; }
.sb-root .k-aside { position: static; }
.sb-root .k-block + .k-block { margin-top: 44px; padding-top: 40px; }
.sb-root .k-block h2 { font-size: 27px; }
.sb-root .k-species { grid-template-columns: 1fr 1fr; }
.sb-root .k-species-photos { grid-template-columns: 1fr 1fr; }
.sb-root .k-form { padding: 22px 18px; }
.sb-root .k-form__grid { grid-template-columns: 1fr; }
.sb-root .k-compare { grid-template-columns: 1fr; }
.sb-root .k-quiet { grid-template-columns: 1fr; padding: 26px 20px; gap: 20px; }
}