/* Peil — bouwtekening op wit. Eén inkt, één oranje accent (uitzetlijn), haarlijnen in plaats van kaders. */
@font-face { font-family: "Bricolage"; src: url("/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #13232e;
  --tekst: #31414b;
  --stil: #5a6871;
  --lijn: #dde2e5;
  --lijn-sterk: #b9c2c8;
  --vlak: #f3f5f6;
  --oranje: #c2410c;
  --oranje-fel: #e2642a;
  --oranje-zacht: #fbe7dd;
  --blauw-zacht: #e3ecf2;
  --blauw: #2f5d7c;
  --groen: #2f6b4a;
  --rand: clamp(16px, 4.5vw, 56px);
  --breed: 1240px;
  --kop: "Bricolage", "Geist", system-ui, sans-serif;
  --romp: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* transitions.dev motion tokens (subset die deze pagina gebruikt) */
  --duration-stagger: 40ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;

  /* 02 number pop-in */
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* 12 error state shake */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  /* 18 texts reveal */
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--tekst); font: 400 1.0625rem/1.6 var(--romp); font-feature-settings: "tnum" 0; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--ink); text-decoration-color: color-mix(in oklab, var(--oranje) 55%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--oranje); }
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; text-wrap: balance; font-family: var(--kop); color: var(--ink); font-weight: 700; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1; text-wrap: balance; letter-spacing: -0.035em; font-weight: 750; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.08; }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.2; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--oranje); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.overslaan { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 6px; z-index: 10; }
.overslaan:focus { left: 8px; }
.klein { font-size: 0.85rem; color: var(--stil); font-weight: 400; }

/* kop */
.kop { max-width: var(--breed); margin: 0 auto; padding: 22px var(--rand); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.merk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 700 1.45rem/1 var(--kop); letter-spacing: -0.02em; }
.kop nav { display: flex; gap: clamp(14px, 2.4vw, 32px); }
.kop nav a { text-decoration: none; color: var(--stil); font-size: 0.93rem; }
.kop nav a:hover { color: var(--ink); }

/* held */
.held { max-width: var(--breed); margin: 0 auto; padding: clamp(24px, 5vw, 64px) var(--rand) clamp(48px, 7vw, 96px); display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.bovenregel { font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--oranje); font-weight: 600; margin-bottom: 18px; }
.held h1 { margin-bottom: 26px; max-width: 14ch; }
.intro { font-size: clamp(1.08rem, 1.35vw, 1.22rem); line-height: 1.6; max-width: 56ch; color: var(--tekst); }
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.knop { display: inline-flex; align-items: center; gap: 8px; background: var(--oranje); color: #fff; text-decoration: none; font: 600 1rem/1 var(--romp); padding: 15px 22px; border-radius: 999px; border: 0; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out); }
.knop:hover { background: #a63709; }
.knop:active { transform: translateY(1px); }
.pijllink { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; text-decoration: none; }
.pijllink svg { transition: transform var(--duration-fast) var(--ease-smooth-out); }
.pijllink:hover svg { transform: translateX(3px); }
.held-beeld { margin: 0; }
.held-beeld img { border-radius: 14px; aspect-ratio: 5 / 4; object-fit: cover; width: 100%; }
.held-beeld figcaption { display: flex; gap: 12px; align-items: flex-start; font-size: 0.85rem; color: var(--stil); margin-top: 14px; line-height: 1.5; }
.maatlijn { flex: 0 0 40px; height: 12px; margin-top: 4px; border-left: 1.5px solid var(--ink); border-right: 1.5px solid var(--ink); background: linear-gradient(var(--ink), var(--ink)) center / 100% 1.5px no-repeat; }

/* tool */
.tool { border-top: 1px solid var(--lijn); }
.sectie-kop { max-width: var(--breed); margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--rand) 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
.sectie-kop p { margin: 0; color: var(--stil); max-width: 52ch; }
.tool-grid { max-width: var(--breed); margin: 0 auto; padding: 0 var(--rand); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 4.5vw, 64px); align-items: start; }

fieldset { border: 0; margin: 0; padding: 0 0 30px; }
fieldset + fieldset { border-top: 1px solid var(--lijn); padding-top: 28px; }
legend + * { clear: both; }
legend { float: left; width: 100%; font: 700 1.15rem/1.2 var(--kop); color: var(--ink); padding: 0; margin-bottom: 18px; display: flex; align-items: baseline; gap: 10px; }
legend .nr { font: 600 0.78rem/1 var(--romp); color: var(--oranje); letter-spacing: 0.04em; }
.velden { display: grid; gap: 18px 22px; }
.velden.twee { grid-template-columns: 1fr 1fr; }
.velden.drie { grid-template-columns: 1fr 1fr 1.3fr; align-items: end; margin-bottom: 18px; }
.veld label { display: block; font-weight: 600; color: var(--ink); font-size: 0.93rem; margin-bottom: 6px; }
.hint { font-size: 0.85rem; color: var(--stil); margin: 6px 0 0; line-height: 1.45; }
input[type="date"], input[inputmode], .termijnen input { font: 500 1rem/1.2 var(--romp); font-variant-numeric: tabular-nums; color: var(--ink); width: 100%; padding: 11px 12px; border: 1px solid var(--lijn-sterk); border-radius: 9px; background: #fff; min-height: 46px; }
input:hover { border-color: #93a0a8; }
input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--oranje) 22%, transparent); }
.invoer-eenheid { display: flex; align-items: center; border: 1px solid var(--lijn-sterk); border-radius: 9px; background: #fff; transition: border-color 150ms ease-out; }
.invoer-eenheid:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--oranje) 22%, transparent); }
.invoer-eenheid input { border: 0; box-shadow: none !important; min-width: 0; }
.invoer-eenheid > span { padding: 0 0 0 12px; color: var(--stil); font-size: 0.93rem; white-space: nowrap; }
.invoer-eenheid.na > span, .invoer-eenheid > span.achter { padding: 0 12px 0 0; }
.uitleg-klein { font-size: 0.85rem; color: var(--stil); line-height: 1.5; max-width: 62ch; }
.knopveld { display: flex; }
.knop-licht { font: 600 0.93rem/1.25 var(--romp); color: var(--ink); background: var(--vlak); border: 0; border-radius: 9px; padding: 12px 14px; min-height: 46px; cursor: pointer; text-align: left; width: 100%; transition: background-color var(--duration-fast) var(--ease-smooth-out); }
.knop-licht:hover { background: #e6eaec; }
.tekstknop { font: 600 0.93rem/1.3 var(--romp); color: var(--oranje); background: none; border: 0; padding: 6px 0; cursor: pointer; }
.tekstknop:hover { text-decoration: underline; text-underline-offset: 3px; }
details.extra { margin-top: 18px; }
details.extra summary { cursor: pointer; font-size: 0.93rem; color: var(--ink); font-weight: 500; padding: 4px 0; }
details.extra .veld { margin-top: 12px; max-width: 50%; }
.vinkje { display: flex; gap: 10px; align-items: flex-start; font-size: 0.93rem; margin-top: 18px; color: var(--tekst); cursor: pointer; }
.vinkje input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--oranje); }

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.termijnen th { text-align: left; font-size: 0.78rem; font-weight: 600; color: var(--stil); padding: 0 8px 8px 0; border-bottom: 1px solid var(--lijn); }
.termijnen td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--lijn); vertical-align: middle; }
.termijnen td:nth-child(1) { width: 52%; }
.termijnen td:nth-child(2) { width: 15%; }
.termijnen td:nth-child(3) { width: 29%; }
.termijnen input { min-height: 40px; padding: 8px 10px; font-size: 0.93rem; }
.termijnen tfoot td { border-bottom: 0; padding-top: 10px; }
.termijnen .som { text-align: right; color: var(--stil); font-size: 0.93rem; }
.termijnen .som strong { color: var(--ink); }
.termijnen .som.mis strong { color: var(--oranje); }
.weg { background: none; border: 0; color: var(--stil); cursor: pointer; width: 32px; height: 32px; border-radius: 6px; font-size: 1.15rem; line-height: 1; }
.weg:hover { color: var(--oranje); background: var(--vlak); }
.termijnen tr.voor-levering td:first-child input { border-left: 3px solid var(--oranje-fel); }

/* 12 error state shake — verbatim uit transitions.dev */
.t-input {
  transition: border-color 150ms ease-out;
  will-change: transform;
}
.t-input.is-error {
  transition: border-color var(--revert-dur, 280ms) ease-out;
}
.t-error-msg {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--revert-dur, 280ms) ease-out,
    visibility 0s linear var(--revert-dur, 280ms);
}
.t-input-wrap.is-error .t-error-msg {
  opacity: 1;
  visibility: visible;
  transition:
    opacity    var(--revert-dur, 280ms) ease-out,
    visibility 0s linear 0s;
}
.t-input.is-shaking {
  animation: t-input-shake calc(
      var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2
    ) linear;
}
@keyframes t-input-shake {
  0%      { transform: translateX(0);                                 animation-timing-function: var(--shake-ease); }
  28.57%  { transform: translateX(var(--shake-distance));             animation-timing-function: var(--shake-ease); }
  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57%  { transform: translateX(var(--shake-overshoot));            animation-timing-function: var(--shake-ease); }
  100%    { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .t-input { animation: none !important; transform: none !important; }
}
.t-error-msg { font-size: 0.85rem; color: #b42318; margin: 6px 0 0; min-height: 0; }
.t-error-msg:empty { display: none; }
.veld.t-input-wrap.is-error input.t-input, .veld.t-input-wrap.is-error .invoer-eenheid, .termijnen input.is-error { border-color: #b42318; }

/* uitkomst */
.uitkomst { position: sticky; top: 20px; border-left: 1px solid var(--lijn); padding-left: clamp(20px, 3vw, 40px); }
.blok + .blok { border-top: 1px solid var(--lijn); margin-top: 26px; padding-top: 24px; }
.label { font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--stil); font-weight: 600; margin-bottom: 6px; }
.label span { color: var(--ink); }
.groot { font: 750 clamp(2.6rem, 5vw, 3.9rem)/1 var(--kop); color: var(--ink); letter-spacing: -0.03em; margin: 4px 0 18px; font-variant-numeric: tabular-nums; }
.middel { font: 700 clamp(1.9rem, 3.4vw, 2.6rem)/1 var(--kop); color: var(--ink); letter-spacing: -0.025em; margin: 4px 0 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.middel .per { font: 400 0.93rem/1.3 var(--romp); color: var(--stil); letter-spacing: 0; }
.rijen { margin: 0 0 14px; }
.rijen > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--lijn); font-size: 0.93rem; }
.rijen > div:last-child { border-bottom: 0; }
.rijen dt { color: var(--tekst); }
.rijen dd { margin: 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.noot, .schuif { font-size: 0.93rem; line-height: 1.5; color: var(--tekst); margin: 0 0 10px; }
.schuif { color: var(--ink); padding-left: 14px; border-left: 3px solid var(--oranje-fel); }
.let-op { font-size: 0.93rem; line-height: 1.5; color: #7a2e0e; background: var(--oranje-zacht); padding: 12px 14px; border-radius: 9px; margin: 6px 0 0; }
.fouten { color: var(--ink); }
.fouten ul { margin: 6px 0 0; padding-left: 18px; font-size: 0.93rem; }
.fouten li { margin-bottom: 6px; }
#resultaat { transition: opacity var(--duration-fast) var(--ease-smooth-out); }
#resultaat.mat { opacity: 0.32; }

/* 02 number pop-in — verbatim uit transitions.dev */
@keyframes t-digit-pop-in {
  0%   {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}
.t-digit-group {
  display: inline-flex;
  align-items: baseline;
}
.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}
@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit { animation: none !important; }
}
.t-digit.spatie { width: 0.28em; }

/* bouwtijdlijn */
.bouw { max-width: var(--breed); margin: clamp(48px, 6vw, 80px) auto 0; padding: clamp(36px, 5vw, 56px) var(--rand); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.bouw-kop { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 32px; align-items: end; margin-bottom: 18px; }
.bouw-kop p { margin: 0; color: var(--stil); font-size: 0.93rem; max-width: 60ch; }
.bouw-scene { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.huis { width: 100%; height: auto; overflow: visible; }
.huis text { font-family: var(--romp); }
.laag .lijn { stroke-dasharray: 1; stroke-dashoffset: 1; }
.laag .vul, .laag .peil { opacity: 0; transition: opacity var(--duration-slow) var(--ease-in-out) var(--duration-fast); }
.laag.is-getekend .lijn { stroke-dashoffset: 0; }
.laag.is-getekend .vul, .laag.is-getekend .peil { opacity: 1; }
.laag.is-nieuw .lijn { stroke: var(--oranje); }
.uitzet { transition: opacity var(--duration-slow) var(--ease-in-out); }
.huis.heeft-fundering .uitzet { opacity: 0.25; }
@media (prefers-reduced-motion: reduce) {
  .laag .lijn, .laag .vul, .laag .peil, .uitzet { transition: none !important; animation: none !important; }
}
.meters .datum { font: 700 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--kop); color: var(--ink); margin-bottom: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.meters .fase { font-size: 0.93rem; color: var(--stil); margin-bottom: 14px; min-height: 2.9em; }
.meters .fase strong { color: var(--ink); font-weight: 600; }
.meters dl { margin: 0 0 14px; }
.meters dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--lijn); font-size: 0.93rem; }
.meters dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.meters dd .klein { display: block; }
.depotbalk { height: 8px; background: var(--vlak); border-radius: 99px; overflow: hidden; }
.depotbalk span { display: block; height: 100%; width: 100%; background: var(--blauw); border-radius: 99px; transform-origin: left center; transition: transform var(--duration-fast) var(--ease-smooth-out); }
@media (prefers-reduced-motion: reduce) { .depotbalk span { transition: none; } }

.spoor-wrap { margin-top: 28px; }
.spoor { position: relative; height: 74px; }
.spoor .baan { position: absolute; top: 34px; height: 10px; border-radius: 2px; }
.spoor .baan.aannemer { background: var(--oranje-zacht); }
.spoor .baan.depot { background: var(--blauw-zacht); }
.spoor .tik { position: absolute; top: 30px; width: 1.5px; height: 18px; background: var(--ink); opacity: 0.55; transform: translateX(-0.75px); }
.spoor .tik span { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); font-size: 0.78rem; color: var(--stil); white-space: nowrap; }
.spoor .mijl { position: absolute; top: 0; transform: translateX(-50%); font-size: 0.78rem; font-weight: 600; color: var(--ink); white-space: nowrap; text-align: center; }
.spoor .mijl::after { content: ""; display: block; width: 1.5px; height: 18px; background: currentColor; margin: 3px auto 0; }
.spoor .mijl.notaris { color: var(--oranje); }
.spoor .mijl.twee { color: var(--stil); font-weight: 500; }
.spoor .mijl.twee::after { background: repeating-linear-gradient(currentColor 0 3px, transparent 3px 6px); }
.spoor .mijl.rechts { transform: translateX(-100%); text-align: right; }
.spoor .mijl.rechts::after { margin-right: 0; }
.spoor .mijl.links { transform: none; text-align: left; }
.spoor .mijl.links::after { margin-left: 0; }
#schuif { width: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; height: 32px; cursor: pointer; }
#schuif::-webkit-slider-runnable-track { height: 2px; background: var(--ink); }
#schuif::-moz-range-track { height: 2px; background: var(--ink); }
#schuif::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); margin-top: -10px; box-shadow: 0 0 0 4px #fff; }
#schuif::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
#schuif:focus-visible::-webkit-slider-thumb { border-color: var(--oranje); }
.spoor-knoppen { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 16px; }
#speel[aria-pressed="true"] { background: var(--ink); }

/* maandtabel */
.maanden { max-width: var(--breed); margin: 0 auto; padding: clamp(36px, 5vw, 56px) var(--rand) clamp(56px, 7vw, 96px); }
.maanden-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#maandtabel { min-width: 680px; font-size: 0.93rem; }
#maandtabel th { text-align: right; font-size: 0.78rem; font-weight: 600; color: var(--stil); padding: 0 0 10px 12px; border-bottom: 1px solid var(--lijn-sterk); }
#maandtabel th:first-child, #maandtabel td:first-child { text-align: left; padding-left: 0; white-space: nowrap; }
#maandtabel td { text-align: right; padding: 9px 0 9px 12px; border-bottom: 1px solid var(--lijn); color: var(--tekst); }
#maandtabel td.sterk { color: var(--ink); font-weight: 600; }
#maandtabel tfoot td { border-bottom: 0; font-weight: 700; color: var(--ink); border-top: 1px solid var(--lijn-sterk); }
#maandtabel .leeg { text-align: left; color: var(--stil); }

/* tekstsecties */
.tekst-sectie { max-width: var(--breed); margin: 0 auto; padding: clamp(48px, 6vw, 84px) var(--rand) 0; }
.tekst-sectie > h2 { max-width: 22ch; margin-bottom: 20px; }
.tekst-sectie > p, .tekst-sectie > ul { max-width: 68ch; }
.vergelijk { margin: 12px 0 28px; min-width: 720px; font-size: 0.93rem; }
.vergelijk th, .vergelijk td { text-align: left; vertical-align: top; padding: 12px 18px 12px 0; border-bottom: 1px solid var(--lijn); line-height: 1.45; }
.vergelijk thead th { font: 700 1rem/1.25 var(--kop); color: var(--ink); border-bottom: 1.5px solid var(--ink); }
.vergelijk thead th:nth-child(3) { color: var(--oranje); }
.vergelijk tbody th { font-weight: 600; color: var(--stil); font-size: 0.85rem; width: 15%; }
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.split h2 { margin-bottom: 18px; }
.split p { color: var(--tekst); }
.stappen { margin: 0; padding: 0; list-style: none; counter-reset: stap; }
.stappen li { counter-increment: stap; position: relative; padding: 14px 0 14px 52px; border-bottom: 1px solid var(--lijn); }
.stappen li:first-child { padding-top: 0; }
.stappen li:first-child::before { top: 0; }
.stappen li::before { content: counter(stap, decimal-leading-zero); position: absolute; left: 0; top: 14px; font: 700 0.93rem/1.6 var(--kop); color: var(--oranje); }
.stappen strong { color: var(--ink); }
.markering > h2 { color: var(--ink); }
.markering blockquote { margin: 8px 0 24px; padding: 4px 0 4px 22px; border-left: 3px solid var(--oranje-fel); font: 500 clamp(1.15rem, 1.6vw, 1.3rem)/1.45 var(--kop); color: var(--ink); max-width: 60ch; letter-spacing: -0.01em; }
.markering cite { display: block; font: 400 0.85rem/1.4 var(--romp); color: var(--stil); margin-top: 10px; font-style: normal; }
.punten { padding-left: 20px; }
.punten li { margin-bottom: 10px; }
.punten li::marker { color: var(--oranje); }
.bronnen ol { padding-left: 22px; max-width: 74ch; }
.bronnen li { margin-bottom: 10px; font-size: 0.93rem; }

.voet { max-width: var(--breed); margin: clamp(56px, 7vw, 96px) auto 0; padding: 32px var(--rand) 40px; border-top: 1px solid var(--lijn); display: flex; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; font-size: 0.93rem; color: var(--stil); }
.voet p { margin: 0 0 6px; max-width: 56ch; }
.merk-klein { display: flex; align-items: center; gap: 8px; font: 700 1.15rem/1 var(--kop); color: var(--ink); margin-bottom: 10px !important; }

/* 18 texts reveal — verbatim uit transitions.dev (klassen worden door app.js gezet) */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; }
}
.knoppen.t-stagger-line { display: flex; }
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* smal */
@media (max-width: 960px) {
  .held { grid-template-columns: 1fr; align-items: start; }
  .held h1 { max-width: 14ch; }
  .sectie-kop, .bouw-kop, .split { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tool-grid { grid-template-columns: 1fr; }
  .uitkomst { position: static; border-left: 0; padding-left: 0; border-top: 1.5px solid var(--ink); padding-top: 24px; }
  .bouw-scene { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kop nav { display: none; }
  .velden.twee, .velden.drie { grid-template-columns: 1fr; }
  details.extra .veld { max-width: none; }
  .termijnen thead { display: none; }
  .termijnen, .termijnen tbody, .termijnen tfoot { display: block; }
  .termijnen tbody tr { display: grid; grid-template-columns: 76px minmax(0, 1fr) 36px; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--lijn); }
  .termijnen tbody td { display: block; width: auto !important; padding: 0; border: 0; }
  .termijnen tbody td:first-child { grid-column: 1 / -1; }
  .termijnen tfoot tr { display: flex; justify-content: space-between; align-items: center; }
  .termijnen tfoot td { display: block; padding: 10px 0 0; }
  .spoor .tik span { display: none; }
  .spoor .mijl { font-size: 0.78rem; }
}

/* ---------- secties met wisselende opbouw (v9) ---------- */
.sectie { max-width: var(--breed); margin: 0 auto; padding: clamp(64px, 8vw, 112px) var(--rand) 0; }
.sectie h2 { margin-bottom: 20px; }
.lead { font-size: clamp(1.08rem, 1.35vw, 1.2rem); line-height: 1.6; color: var(--tekst); }
.midden { text-align: center; }
.midden > h2, .midden > .lead, .midden > .smal, .midden > .bovenregel { margin-left: auto; margin-right: auto; }
.midden > h2 { max-width: 20ch; }
.midden > .lead { max-width: 62ch; }
.smal { max-width: 64ch; margin-left: auto; margin-right: auto; color: var(--tekst); }
.midden .smal { text-align: left; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.split.omgekeerd > :first-child { order: 2; }
.split-tekst > p, .split-tekst > ul { max-width: 58ch; }

/* rentestrook: vergelijking als tijdlijn */
.rentestrook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 44px 0 36px; text-align: left; }
.strook-deel { padding: 0 clamp(14px, 2vw, 28px) 0 0; position: relative; }
.strook-deel + .strook-deel { padding-left: clamp(14px, 2vw, 28px); border-left: 1px solid var(--lijn); }
.strook-deel::before { content: ""; display: block; height: 10px; border-radius: 2px; margin: 0 0 18px; }
.strook-deel + .strook-deel::before { margin-left: calc(clamp(14px, 2vw, 28px) * -1 - 1px); }
.strook-deel.grijs::before { background: #d9dee2; }
.strook-deel.oranje::before { background: var(--oranje-fel); }
.strook-deel.blauw::before { background: var(--blauw); }
.strook-tijd { font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--stil); font-weight: 600; margin-bottom: 6px; }
.strook-deel h3 { margin-bottom: 14px; }
.strook-deel.oranje h3 { color: var(--oranje); }
.strook-deel dl { margin: 0; }
.strook-deel dl > div { padding: 9px 0; border-top: 1px solid var(--lijn); font-size: 0.93rem; line-height: 1.45; }
.strook-deel dt { font-size: 0.78rem; color: var(--stil); font-weight: 600; margin-bottom: 2px; }
.strook-deel dd { margin: 0; color: var(--ink); }

/* uitstelgrafiek */
.uitstel-grafiek { margin: 0; }
.grafiek-kop { font: 700 1.15rem/1.25 var(--kop); color: var(--ink); margin-bottom: 18px; }
.balken { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 14px; }
.balken li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 14px; align-items: center; font-variant-numeric: tabular-nums; }
.balken .wanneer { font-size: 0.93rem; color: var(--stil); }
.balken .baan2 { height: 26px; background: var(--vlak); border-radius: 4px; overflow: hidden; }
.balken .vulling { display: block; height: 100%; background: var(--oranje-fel); border-radius: 4px; transform-origin: left center; transition: transform var(--duration-slow) var(--ease-smooth-out); }
.balken .bedrag { font: 700 1.05rem/1 var(--kop); color: var(--ink); min-width: 78px; text-align: right; }
.uitstel-grafiek figcaption { font-size: 0.85rem; color: var(--stil); }

/* contractvel */
.contract-vel { background: #fff; border: 1px solid var(--lijn-sterk); border-radius: 6px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 18px 40px -28px rgba(19, 35, 46, 0.35); transform: rotate(-1.2deg); font-size: 0.85rem; color: var(--tekst); }
.vel-kop { font: 700 1.15rem/1.2 var(--kop); color: var(--ink); margin-bottom: 2px; }
.vel-sub { font-size: 0.78rem; color: var(--stil); margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.05em; }
.vel-regel { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 10px 8px; border-radius: 6px; line-height: 1.45; transition: background-color var(--duration-fast) var(--ease-smooth-out); }
.vel-regel .nr { font: 700 0.78rem/1.6 var(--kop); color: var(--oranje); }
.vel-regel b { color: var(--ink); font-weight: 600; }
.vel-regel.is-aan { background: var(--oranje-zacht); }
.vel-lijnen { margin-top: 14px; display: grid; gap: 8px; }
.vel-lijnen span { height: 6px; border-radius: 3px; background: var(--vlak); }
.vel-lijnen span:nth-child(2) { width: 82%; }
.vel-lijnen span:nth-child(3) { width: 64%; }
.stappen li { cursor: default; transition: color var(--duration-fast) var(--ease-smooth-out); }
.stappen li.is-aan strong { color: var(--oranje); }

/* betaal-band */
.band-midden { text-align: center; background: var(--vlak); max-width: none; margin-top: clamp(64px, 8vw, 112px); padding: clamp(56px, 7vw, 96px) var(--rand); }
.band-midden > * { margin-left: auto; margin-right: auto; }
.band-midden h2 { max-width: 18ch; }
.band-midden .lead { max-width: 62ch; }
.band-midden blockquote { max-width: 46ch; margin: 28px auto 28px; padding: 0; border: 0; font: 600 clamp(1.25rem, 2.2vw, 1.7rem)/1.35 var(--kop); color: var(--ink); letter-spacing: -0.015em; }
.band-midden cite { display: block; font: 400 0.85rem/1.4 var(--romp); color: var(--stil); margin-top: 14px; font-style: normal; }
.betaal-schema { width: min(360px, 100%); height: auto; display: block; margin-bottom: 18px; }
.betaal-schema text { font-family: var(--romp); }

/* tweejaarsschema */
.tweejaar-schema { margin: 0; }
.tj-as { display: grid; gap: 10px; }
.tj-blok { display: grid; gap: 2px; padding: 14px 16px; border-left: 4px solid; font-size: 0.93rem; color: var(--tekst); background: #fff; }
.tj-blok b { font: 700 1rem/1.3 var(--kop); color: var(--ink); }
.tj-blok.voor { border-color: #d9dee2; }
.tj-blok.bouwrente { border-color: var(--oranje-fel); margin-left: 8%; }
.tj-blok.depot { border-color: var(--blauw); margin-left: 16%; background: var(--blauw-zacht); }
.tj-blok.na { border-color: var(--lijn-sterk); margin-left: 24%; color: var(--stil); }
.tweejaar-schema figcaption { font-size: 0.85rem; color: var(--stil); margin-top: 14px; }

/* formule */
.formule { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 10px 16px; margin: 36px auto 12px; }
.formule .term { display: grid; gap: 6px; justify-items: center; }
.formule .term b { font: 750 clamp(1.6rem, 3.4vw, 2.6rem)/1 var(--kop); color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.formule .term small { font-size: 0.78rem; color: var(--stil); max-width: 12ch; line-height: 1.3; }
.formule .term.uitkomst b { color: var(--oranje); }
.formule .op { font: 400 clamp(1.4rem, 3vw, 2.2rem)/1 var(--kop); color: var(--stil); padding-top: 2px; }
.formule-noot { font-size: 0.85rem; color: var(--stil); margin-bottom: 36px; }
.twee-kolom { columns: 2; column-gap: clamp(28px, 4vw, 56px); text-align: left; max-width: 980px; margin: 0 auto; padding-left: 20px; }
.twee-kolom li { break-inside: avoid; }

.bronnen { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 16px clamp(28px, 5vw, 72px); align-items: start; }
.bronnen > h2 { grid-column: 1; }
.bronnen > ol, .bronnen > p { grid-column: 2; }
.bronnen > ol { margin: 0; }

@media (max-width: 960px) {
  .split, .bronnen { grid-template-columns: minmax(0, 1fr); }
  .split.omgekeerd > :first-child { order: 0; }
  .bronnen > ol, .bronnen > p { grid-column: 1; }
  .rentestrook { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .strook-deel + .strook-deel { padding-left: 0; border-left: 0; }
  .strook-deel + .strook-deel::before { margin-left: 0; }
  .contract-vel { transform: none; }
  .twee-kolom { columns: 1; }
  .tj-blok.bouwrente, .tj-blok.depot, .tj-blok.na { margin-left: 0; }
}
@media (max-width: 640px) {
  .balken li { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; }
  .formule { gap: 8px 10px; }
  .formule .op { display: none; }
  .formule .term { flex: 0 0 42%; }
}
#contract { align-items: start; }
#contract .contract-vel { position: sticky; top: 28px; margin-top: 8px; }
@media (max-width: 960px) { #contract .contract-vel { position: static; } }

/* ---------- kavel kopen ---------- */
.held-omgekeerd { grid-template-columns: 0.92fr 1.08fr; }
.held-omgekeerd .held-beeld { order: 0; }
select.t-input { font: 500 1rem/1.2 var(--romp); color: var(--ink); width: 100%; padding: 11px 12px; border: 1px solid var(--lijn-sterk); border-radius: 9px; background: #fff; min-height: 46px; }
.label-los { display: block; font-weight: 600; color: var(--ink); font-size: 0.93rem; margin-bottom: 6px; }
.keuze { display: grid; gap: 8px; }
.keuze label { display: flex; gap: 10px; align-items: center; font-size: 0.93rem; cursor: pointer; }
.keuze input { width: 18px; height: 18px; accent-color: var(--oranje); }
.kavel-kolommen { display: grid; gap: 22px; margin-bottom: 18px; }
.kavel-kolommen.twee { grid-template-columns: 1fr 1fr; }
.kavel-kolom { display: grid; gap: 16px; align-content: start; }
.kavel-kolommen.twee .kavel-kolom + .kavel-kolom { border-left: 1px solid var(--lijn); padding-left: 22px; }
.kolom-naam { font: 700 1rem/1.2 var(--kop); color: var(--oranje); margin: 0; display: flex; justify-content: space-between; align-items: baseline; }
.kavel-uitkomsten .blok { padding-left: 14px; border-left: 3px solid transparent; }
.kavel-uitkomsten .blok.winnaar { border-left-color: var(--oranje-fel); }
.kavel-uitkomsten.twee .groot { font-size: clamp(2rem, 3.6vw, 2.8rem); }
.klein-rij dt, .klein-rij dd { color: var(--stil); font-weight: 400; font-size: 0.85rem; }
.vergelijk-zin { font: 600 1rem/1.45 var(--kop); color: var(--ink); padding: 12px 14px; background: var(--oranje-zacht); border-radius: 9px; margin: 18px 0 0; }
.let-op.goed { background: #e6f1ea; color: #1f4d33; }

.kavelkaart { max-width: var(--breed); margin: clamp(48px, 6vw, 80px) auto 0; padding: clamp(36px, 5vw, 56px) var(--rand); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.kaart-vlakken { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 72px); align-items: flex-end; justify-content: center; margin-top: 18px; }
.vlak { flex: 1 1 280px; max-width: 460px; display: grid; justify-items: center; }
.vlak svg { max-width: 100%; height: auto; }
.vlak svg text { font-family: var(--romp); }
.vlak-naam { font: 700 1.1rem/1.2 var(--kop); color: var(--ink); margin: 10px 0 12px; }
.vlak.winnaar .vlak-naam { color: var(--oranje); }
.stapel { display: flex; height: 18px; border-radius: 4px; overflow: hidden; justify-self: start; min-width: 40%; transition: width var(--duration-slow) var(--ease-smooth-out); }
.stapel .seg { height: 100%; flex-basis: 0; }
.seg.grond, .stapel-legenda i.grond { background: var(--ink); }
.seg.belasting, .stapel-legenda i.belasting { background: var(--oranje-fel); }
.seg.kosten, .stapel-legenda i.kosten { background: #9aa6ae; }
.seg.rente, .stapel-legenda i.rente { background: var(--blauw); }
.stapel-legenda { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.85rem; color: var(--tekst); justify-self: start; }
.stapel-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.tijdbalk { position: relative; margin: 40px 0 0; padding: 30px 0 64px; }
.tb-baan { position: relative; height: 4px; background: var(--lijn); border-radius: 2px; }
.tb-wacht { position: absolute; top: -3px; height: 10px; border-radius: 3px; background: var(--blauw); }
.tb-wacht.te-laat { background: #b42318; }
.tb-mijl { position: absolute; top: 0; transform: translateX(-50%); font-size: 0.78rem; color: var(--stil); text-align: center; white-space: nowrap; }
.tb-mijl b { display: block; color: var(--ink); font-size: 0.85rem; }
.tb-mijl.onder { top: 44px; }
.tb-mijl.plicht b { color: var(--oranje); }
.tb-mijl.te-laat b { color: #b42318; }
.tb-zin { position: absolute; left: 0; bottom: 0; margin: 0; font-size: 0.93rem; color: var(--ink); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 44px auto 36px; max-width: 1000px; }
.duo-deel { padding: 8px clamp(18px, 3vw, 44px); }
.duo-deel + .duo-deel { border-left: 1px solid var(--lijn); }
.duo-wie { font-size: 0.85rem; color: var(--stil); max-width: 30ch; margin: 0 auto 10px; }
.duo-getal { font: 750 clamp(3.6rem, 8vw, 6rem)/1 var(--kop); color: var(--ink); letter-spacing: -0.04em; margin: 0 0 4px; }
.duo-getal.oranje { color: var(--oranje); }
.duo-wat { font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.duo-voorbeeld { font-size: 0.93rem; color: var(--tekst); padding: 10px 0; border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); margin-bottom: 14px; }
.duo-voorbeeld b { color: var(--ink); }
.duo-noot { font-size: 0.85rem; color: var(--stil); max-width: 40ch; margin: 0 auto; }

.tarieven { margin: 0; display: grid; gap: 12px; }
.tarief { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--lijn); position: relative; }
.tarief-pct { font: 750 2rem/1 var(--kop); color: #b9c2c8; letter-spacing: -0.02em; }
.tarief-wat { font-size: 0.93rem; color: var(--stil); }
.tarief.is-kavel .tarief-pct { color: var(--oranje); font-size: 2.6rem; }
.tarief.is-kavel .tarief-wat { color: var(--ink); font-weight: 600; }
.tarief-pijl { position: absolute; right: 0; top: -10px; font: 600 0.78rem/1 var(--romp); color: #fff; background: var(--oranje); padding: 5px 9px; border-radius: 99px; }
.tarieven figcaption { font-size: 0.85rem; color: var(--stil); }

.bon { background: #fff; border: 1px solid var(--lijn-sterk); border-radius: 6px; padding: clamp(22px, 3vw, 32px); max-width: 420px; justify-self: center; width: 100%; box-shadow: 0 18px 40px -28px rgba(19, 35, 46, 0.35); transform: rotate(1deg); font-size: 0.93rem; }
.bon-kop { font: 700 1.15rem/1.2 var(--kop); color: var(--ink); margin-bottom: 14px; }
.bon-regel { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 0; border-bottom: 1px dashed var(--lijn); color: var(--ink); }
.bon-regel .vink { color: #2f6b4a; font-weight: 600; }
.bon-regel.zelf { color: var(--stil); }
.bon-regel.zelf span:last-child { color: var(--oranje); font-weight: 600; }
.bon-streep { height: 0; border-top: 2px solid var(--ink); margin: 10px 0 4px; }

.plicht-as { position: relative; height: 54px; max-width: 640px; margin: 0 auto 28px; border-top: 2px solid var(--ink); }
.plicht-stip { position: absolute; top: -7px; transform: translateX(-50%); font-size: 0.78rem; color: var(--stil); white-space: nowrap; text-align: center; }
.plicht-stip::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); margin: 0 auto 6px; }
.plicht-stip.oranje::before { background: var(--oranje-fel); }
.plicht-stip b { display: block; color: var(--ink); font-size: 0.85rem; }
.plicht-stip:first-child { transform: none; text-align: left; }
.plicht-stip:first-child::before { margin-left: 0; }
.plicht-stip:last-child { transform: translateX(-100%); text-align: right; }
.plicht-stip:last-child::before { margin-right: 0; }
.klein-formule { justify-content: flex-start; margin: 0; }
.klein-formule .term b { font-size: clamp(1.3rem, 2.4vw, 1.9rem); }

@media (max-width: 960px) {
  .held-omgekeerd { grid-template-columns: 1fr; }
  .held-omgekeerd .held-beeld { order: 2; }
  .duo { grid-template-columns: 1fr; gap: 28px; }
  .duo-deel + .duo-deel { border-left: 0; border-top: 1px solid var(--lijn); padding-top: 28px; }
  .bon { transform: none; }
}
@media (max-width: 640px) {
  .kavel-kolommen.twee { grid-template-columns: 1fr; }
  .kavel-kolommen.twee .kavel-kolom + .kavel-kolom { border-left: 0; padding-left: 0; border-top: 1px solid var(--lijn); padding-top: 18px; }
  .tarief { grid-template-columns: 76px minmax(0, 1fr); }
  .plicht-stip { font-size: 0.7rem; }
  .tb-mijl { font-size: 0.7rem; }
}
.tijdbalk { padding: 48px 0 76px; }
.tb-baan { margin-top: 0; }
.tb-mijl { top: 0; }
.tb-mijl.onder { top: 62px; }
.tb-zin { bottom: 0; }

/* ---------- bouwdepot ---------- */
.held-midden { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: clamp(28px, 4vw, 48px); }
.held-midden .held-tekst { max-width: 860px; }
.held-midden h1 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.held-midden .intro { margin-left: auto; margin-right: auto; }
.held-midden .knoppen { justify-content: center; }
.held-beeld.breed { width: 100%; }
.held-beeld.breed img { aspect-ratio: 21 / 9; }
.held-beeld.breed figcaption { text-align: left; max-width: 760px; }
.soort-keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.soort-keuze label { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--lijn-sterk); border-radius: 9px; cursor: pointer; font-size: 0.93rem; transition: border-color var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-fast) var(--ease-smooth-out); }
.soort-keuze label span { display: grid; color: var(--stil); }
.soort-keuze label b { color: var(--ink); }
.soort-keuze input { accent-color: var(--oranje); margin-top: 3px; }
.soort-keuze label:has(input:checked) { border-color: var(--oranje); background: var(--oranje-zacht); }
.sub-groot { font-size: 0.85rem; color: var(--stil); margin: -10px 0 14px; }
.live-zin { font: 600 1.05rem/1.45 var(--kop); color: var(--oranje); }
.live-zin:empty { display: none; }
.depotvat { max-width: var(--breed); margin: clamp(48px, 6vw, 80px) auto 0; padding: clamp(36px, 5vw, 56px) var(--rand); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.vat-scene { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; max-width: 820px; margin: 0 auto; }
.vat { width: 100%; height: auto; }
.vat text { font-family: var(--kop); }
#vat-vulling { transition: y var(--duration-fast) var(--ease-smooth-out), height var(--duration-fast) var(--ease-smooth-out), fill var(--duration-slow) var(--ease-in-out); }
@media (prefers-reduced-motion: reduce) { #vat-vulling { transition: none; } }
.spoor.fasen .baan.zes { background: #d6eadc; }
.spoor.fasen .baan.depot { background: var(--blauw-zacht); }
.spoor.fasen .baan.na { background: #e6e9eb; }
.spoor .mijl.zes { color: var(--groen); }
.dubbel-tijd { margin: 0; display: grid; gap: 22px; }
.dt-naam { font: 700 1rem/1.2 var(--kop); color: var(--ink); margin-bottom: 8px; }
.dt-balk { display: flex; height: 64px; border-radius: 6px; overflow: hidden; }
.dt-balk span { display: grid; align-content: center; padding: 0 14px; font: 700 1.05rem/1.2 var(--kop); color: var(--ink); }
.dt-balk small { font: 400 0.78rem/1.3 var(--romp); color: var(--tekst); }
.dt-zes { flex: 6; background: #d6eadc; }
.dt-verrekend { flex: 18; background: var(--blauw-zacht); }
.dt-verrekend.vol { flex: 24; }
.dubbel-tijd figcaption { font-size: 0.85rem; color: var(--stil); }
.groot-getal { font: 750 clamp(5rem, 14vw, 9rem)/0.9 var(--kop); color: var(--oranje); letter-spacing: -0.05em; margin: 0 auto 10px; }
.offerte-vel { background: #fff; border: 1px solid var(--lijn-sterk); border-radius: 6px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 18px 40px -28px rgba(19, 35, 46, 0.35); transform: rotate(1.2deg); font-size: 0.85rem; max-width: 440px; justify-self: center; width: 100%; }
#maandtabel tr.fase-zes td:first-child { box-shadow: inset 3px 0 0 #2f6b4a; padding-left: 10px; }
#maandtabel tr.fase-na td:first-child { box-shadow: inset 3px 0 0 #9aa6ae; padding-left: 10px; }
@media (max-width: 960px) { .offerte-vel { transform: none; } }
@media (max-width: 640px) {
  .soort-keuze { grid-template-columns: 1fr; }
  .vat-scene { grid-template-columns: 1fr; justify-items: center; }
  .vat { max-width: 160px; }
  .held-beeld.breed img { aspect-ratio: 4 / 3; }
}
.kavel-kolommen { grid-template-columns: minmax(0, 1fr); }
.kavel-kolommen.twee { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kavel-kolom, .kavel-kolom .veld { min-width: 0; }
select.t-input { max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 640px) { .kavel-kolommen.twee { grid-template-columns: minmax(0, 1fr); } }
fieldset > :not(legend) { clear: both; }

/* ---------- invoerrijen strak op iOS (Sam 14-10) ---------- */
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; text-align: left; line-height: 1.2; min-width: 0; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type="date"]::-webkit-datetime-edit { padding: 0; }
.termijnen input, .termijnen .rij-eenheid { height: 44px; min-height: 44px; box-sizing: border-box; }
.termijnen .rij-eenheid input { height: 42px; min-height: 42px; border: 0; padding-left: 6px; padding-right: 6px; }
.termijnen .rij-eenheid > span { font-size: 0.93rem; padding-left: 10px; }
.termijnen .rij-eenheid.na > span { padding: 0 10px 0 0; }
.termijnen .rij-eenheid:has(input.is-error) { border-color: #b42318; }
.weg { width: 44px; height: 44px; display: inline-grid; place-items: center; font-size: 1.35rem; border-radius: 9px; }
.termijnen td:last-child { text-align: center; }
@media (max-width: 640px) {
  .termijnen tbody tr { grid-template-columns: 92px minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
  .termijnen tbody td:last-child { display: grid; place-items: center; }
}
.termijnen .rij-eenheid input { padding-top: 0; padding-bottom: 0; line-height: 42px; }
@media (max-width: 640px) {
  .termijnen tfoot tr { flex-wrap: wrap; gap: 6px 16px; }
  .termijnen tfoot td.som { flex: 1 1 auto; min-width: 0; text-align: right; white-space: normal; }
}

/* ---------- huis bouwen kosten ---------- */
.klein-knop { font-size: 0.85rem; padding: 0; }
.knopveld-onder { display: flex; align-items: flex-end; padding-bottom: 6px; }
.knopveld-onder .vinkje { margin: 0; }
.regiokaart { max-width: var(--breed); margin: clamp(48px, 6vw, 80px) auto 0; padding: clamp(36px, 5vw, 56px) var(--rand); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.regio-balken { display: grid; gap: 12px; max-width: 860px; margin: 18px auto 0; }
.rb-rij { display: grid; grid-template-columns: 110px minmax(0, 1fr) 84px; gap: 14px; align-items: center; font-variant-numeric: tabular-nums; }
.rb-naam { font-size: 0.93rem; color: var(--tekst); }
.rb-rij.is-gekozen .rb-naam { color: var(--ink); font-weight: 700; }
.rb-baan { position: relative; height: 26px; background: var(--vlak); border-radius: 4px; }
.rb-vul { display: block; height: 100%; background: #b9c2c8; border-radius: 4px; transform-origin: left center; transition: transform var(--duration-slow) var(--ease-smooth-out); }
.rb-rij.is-gekozen .rb-vul { background: var(--ink); }
.rb-jij { position: absolute; top: -6px; bottom: -6px; width: 3px; margin-left: -1.5px; background: var(--oranje-fel); border-radius: 2px; transition: left var(--duration-slow) var(--ease-smooth-out); }
.rb-jij::after { content: "jij"; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font: 700 0.78rem/1 var(--romp); color: var(--oranje); }
.rb-getal { font: 700 1rem/1 var(--kop); color: var(--ink); text-align: right; }
.stapel-huis { max-width: 860px; margin: 40px auto 0; }
.stapel-kop { font: 700 1.05rem/1.3 var(--kop); color: var(--ink); margin-bottom: 10px; }
.stapel.breed { width: 100%; height: 22px; }
.seg.s-bouw, i.s-bouw { background: var(--ink); }
.seg.s-btw, i.s-btw { background: var(--oranje-fel); }
.seg.s-afw, i.s-afw { background: #6b8796; }
.seg.s-adv, i.s-adv { background: var(--blauw); }
.seg.s-gem, i.s-gem { background: #9aa6ae; }
.seg.s-onv, i.s-onv { background: #d0d6da; }
.seg.s-kav, i.s-kav { background: #2f6b4a; }
.vijf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 40px auto 32px; max-width: 1080px; }
.vijf-deel { padding: 6px clamp(8px, 1.6vw, 22px); }
.vijf-deel + .vijf-deel { border-left: 1px solid var(--lijn); }
.vijf-naam { font-size: 0.85rem; color: var(--stil); margin-bottom: 6px; }
.vijf-getal { font: 750 clamp(1.6rem, 3vw, 2.4rem)/1 var(--kop); color: var(--ink); letter-spacing: -0.025em; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.vijf-getal.oranje { color: var(--oranje); }
.vijf-sub { font-size: 0.78rem; color: var(--stil); margin: 0; }
.index-grafiek { margin: 0; }
.index-grafiek svg { width: 100%; height: auto; }
.index-grafiek svg text { font-family: var(--romp); }
.index-grafiek figcaption { font-size: 0.85rem; color: var(--stil); margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .rb-vul, .rb-jij { transition: none; } }
@media (max-width: 960px) { .vijf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; } .vijf-deel:nth-child(odd) { border-left: 0; } .vijf-deel:first-child { grid-column: 1 / -1; border-left: 0; } }
@media (max-width: 640px) { .rb-rij { grid-template-columns: 70px minmax(0, 1fr) 70px; gap: 10px; } }

/* ---------- overbruggingshypotheek ---------- */
.drie-keuze { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.overwaarde-kaart, .rooster-blok { max-width: var(--breed); margin: clamp(48px, 6vw, 80px) auto 0; padding: clamp(36px, 5vw, 56px) var(--rand) 0; border-top: 1px solid var(--lijn); }
.rooster-blok { padding-bottom: clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--lijn); margin-top: 0; }
.ow-balk { display: flex; height: 48px; border-radius: 6px; overflow: hidden; max-width: 1000px; margin: 22px auto 0; background: var(--vlak); }
.ow-seg { height: 100%; transition: width var(--duration-slow) var(--ease-smooth-out); }
.ow-seg.hyp, .stapel-legenda i.ow-hyp { background: var(--ink); }
.ow-seg.vk, .stapel-legenda i.ow-vk { background: #9aa6ae; }
.ow-seg.marge, .stapel-legenda i.ow-marge { background: repeating-linear-gradient(45deg, #d0d6da 0 6px, #eef1f3 6px 12px); }
.ow-seg.brug, .stapel-legenda i.ow-brug { background: var(--oranje-fel); }
.ow-seg.rest, .stapel-legenda i.ow-rest { background: #e3ecf2; }
#ow-legenda { max-width: 1000px; margin: 12px auto 0; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .ow-seg { transition: none; } }
.rooster { min-width: 640px; max-width: 1000px; margin: 18px auto 0; border-collapse: separate; border-spacing: 6px; font-variant-numeric: tabular-nums; }
.rooster th { text-align: left; font-size: 0.85rem; color: var(--stil); font-weight: 600; padding: 4px 8px; }
.rooster th .klein { display: block; font-weight: 400; }
.rooster tbody th { color: var(--ink); white-space: nowrap; }
.rooster td { padding: 12px 14px; border-radius: 6px; vertical-align: top; }
.rooster td b { display: block; font: 700 1.05rem/1.2 var(--kop); color: var(--ink); }
.rooster td span { display: block; font-size: 0.78rem; color: var(--tekst); margin-top: 4px; }
.rooster td.ruim { background: #e6f1ea; }
.rooster td.krap { background: #fbf1d9; }
.rooster td.tekort { background: #fbe1dc; }
.rooster td.tekort b { color: #9b1c1c; }
.rooster td.na-looptijd { outline: 2px dashed #b9c2c8; outline-offset: -2px; }
.drie-lasten { margin: 0; display: grid; gap: 12px; }
.dl-rij { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 14px; }
.dl-naam { font-size: 0.93rem; color: var(--tekst); }
.dl-balk { height: 26px; border-radius: 4px; }
.dl-balk.oud { background: var(--ink); width: 55%; }
.dl-balk.nieuw { background: var(--blauw); width: 100%; }
.dl-balk.brug { background: var(--oranje-fel); width: 45%; }
.drie-lasten figcaption { font-size: 0.85rem; color: var(--stil); }
.nieuwbouw-as { display: grid; gap: 10px; }
@media (max-width: 640px) { .drie-keuze { grid-template-columns: 1fr; } .dl-rij { grid-template-columns: 110px minmax(0, 1fr); } }
.held > *, .split > *, .tool-grid > * { min-width: 0; }
@media (max-width: 640px) { h1, h2 { overflow-wrap: anywhere; } }

/* ===== dakkapel kosten ===== */
.breedte-rij { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem; gap: 14px; align-items: center; }
.breedte-rij input[type="range"] { width: 100%; accent-color: var(--oranje); min-height: 32px; }
.opties { display: grid; gap: 8px; }
.optie { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border: 1px solid var(--lijn-sterk); border-radius: 9px; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-fast) var(--ease-smooth-out); }
.optie input { accent-color: var(--oranje); margin-top: 4px; flex: none; }
.optie span { display: grid; gap: 2px; min-width: 0; }
.optie b { color: var(--ink); font-size: 0.95rem; }
.optie small { color: var(--stil); font-size: 0.82rem; line-height: 1.4; }
.optie:has(input:checked) { border-color: var(--oranje); background: var(--oranje-zacht); }
.totaal { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; border-top: 2px solid var(--ink); padding-top: 10px; margin: 12px 0 0; }
.totaal span { color: var(--tekst); font-size: 0.95rem; }
.totaal b { font: 700 1.2rem/1.2 var(--kop); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.banden { list-style: none; margin: 0 0 10px; padding: 0; }
.banden li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--lijn); font-size: 0.93rem; }
.banden li:last-child { border-bottom: 1px solid var(--lijn); }
.banden .b-naam { color: var(--ink); }
.banden small { display: block; color: var(--stil); font-size: 0.8rem; }
.banden b { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.prijswolk { max-width: var(--breed); margin: clamp(48px, 6vw, 80px) auto 0; padding: clamp(36px, 5vw, 56px) var(--rand) clamp(36px, 5vw, 56px); border-top: 1px solid var(--lijn); }
.wolk-figuur { position: relative; margin-top: 18px; }
#wolk { display: block; width: 100%; max-width: 1000px; height: auto; overflow: visible; font: 500 12px/1 var(--romp); }
#wolk .w-as text { fill: var(--stil); font-variant-numeric: tabular-nums; }
#wolk .w-as .w-as-titel { fill: var(--tekst); }
#wolk .w-raster { stroke: var(--lijn); stroke-width: 1; }
#wolk .w-band line { stroke: var(--blauw); stroke-width: 2; opacity: .55; }
#wolk .w-band .w-pijl { fill: none; stroke: var(--blauw); stroke-width: 2; opacity: .55; }
#wolk .w-band:hover line, #wolk .w-band:focus line { opacity: 1; }
#wolk .w-cat line { stroke: var(--groen); stroke-width: 3; stroke-linecap: round; opacity: .6; }
#wolk .w-cat:hover line, #wolk .w-cat:focus line { opacity: 1; }
#wolk .w-lijn { stroke: var(--oranje); stroke-width: 2.5; stroke-dasharray: 7 5; opacity: .9; }
#wolk .w-stip circle { transition: r var(--duration-fast) var(--ease-smooth-out), opacity var(--duration-fast) var(--ease-smooth-out); }
#wolk .w-stip.kern circle { fill: var(--oranje); stroke: #fff; stroke-width: 1.5; }
#wolk .w-stip.context circle { fill: #fff; stroke: var(--stil); stroke-width: 1.6; }
#wolk .w-stip:not(.dicht) circle { opacity: .45; }
#wolk .w-stip:hover circle, #wolk .w-stip:focus circle { opacity: 1; r: 8px; }
#wolk a:focus { outline: none; }
#wolk a:focus-visible circle, #wolk a:focus-visible line { stroke: var(--ink); stroke-width: 3; }
#wolk .w-marker { transition: transform var(--duration-slow) var(--ease-smooth-out); }
#wolk .w-marker line { stroke: var(--ink); stroke-width: 1.5; }
#wolk .w-marker .w-zone { fill: var(--oranje-zacht); opacity: .55; }
.wolk-figuur svg .w-marker { pointer-events: none; }
.wolk-info { min-height: 1.5em; margin: 8px 0 0; font-size: 0.9rem; color: var(--tekst); }
.wolk-legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 12px 0 0; font-size: 0.86rem; color: var(--tekst); }
.wolk-legenda i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.lg-kern { width: 11px; height: 11px; border-radius: 50%; background: var(--oranje); }
.lg-context { width: 9px; height: 9px; border-radius: 50%; border: 1.6px solid var(--stil); background: #fff; }
.lg-band { width: 3px; height: 14px; background: var(--blauw); opacity: .7; }
.lg-cat { width: 18px; border-top: 3px solid var(--groen); opacity: .7; }
.lg-lijn { width: 20px; border-top: 2.5px dashed var(--oranje); }
.alle-prijzen { margin-top: 18px; }
.alle-prijzen summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 8px 0; }
.prijstabel, .mat-tabel { border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.prijstabel { width: 100%; min-width: 560px; }
.prijstabel th, .prijstabel td, .mat-tabel th, .mat-tabel td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--lijn); }
.prijstabel th, .mat-tabel th { color: var(--stil); font-weight: 600; font-size: 0.82rem; }
.prijstabel td.num, .mat-tabel td.num { white-space: nowrap; }
.mat-tabel { width: 100%; }
.mat-tabellen { display: grid; gap: 28px; min-width: 0; }
.mat-tabel caption { text-align: left; font-size: 0.85rem; color: var(--stil); padding-bottom: 8px; caption-side: top; }
.mat-tabel small { color: var(--oranje); font-weight: 600; }
.checklist { list-style: none; padding: 0; margin: 22px auto 0; text-align: left; }
.checklist li { padding: 12px 0; border-top: 1px solid var(--lijn); line-height: 1.55; color: var(--tekst); }
.checklist li:last-child { border-bottom: 1px solid var(--lijn); }
.checklist b { color: var(--ink); }
.breed-vergelijk { margin: 0; display: grid; gap: 14px; align-content: center; }
.bv-rij { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 5.5rem; gap: 12px; align-items: center; }
.bv-naam { font-weight: 600; color: var(--ink); font-size: 0.93rem; }
.bv-bedrag { font: 700 1.05rem/1 var(--kop); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.bv-balk { display: flex; height: 26px; }
.bv-vast { flex: 0 0 calc(4944 / 9144 * 100%); background: var(--ink); border-radius: 5px 0 0 5px; }
.bv-meter { flex: 0 0 calc(var(--m) * 700 / 9144 * 100%); background: var(--oranje-fel); border-radius: 0 5px 5px 0; }
.breed-vergelijk figcaption { font-size: 0.85rem; color: var(--stil); }
@media (max-width: 640px) {
  .breedte-rij { grid-template-columns: minmax(0, 1fr) 7.5rem; }
  #wolk { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  #wolk .w-marker, #wolk .w-stip circle { transition: none !important; }
}
.soort-keuze.drie-keuze { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .soort-keuze.drie-keuze { grid-template-columns: 1fr; } }

/* ===== uitbouw kosten ===== */
.maat-knoppen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.maat-knop { font: 600 0.9rem/1 var(--romp); color: var(--ink); background: #fff; border: 1px solid var(--lijn-sterk); border-radius: 999px; padding: 10px 14px; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-fast) var(--ease-smooth-out), transform var(--duration-quick) var(--ease-smooth-out); }
.maat-knop:hover { border-color: var(--oranje); }
.maat-knop:active { transform: scale(.97); }
.groot.van-tot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: clamp(2rem, 3.6vw, 2.8rem); }
.groot.van-tot .streep { font: 500 1rem/1 var(--romp); color: var(--stil); }
.blok.leeg .groot { color: var(--stil); }
.aanbieders { list-style: none; margin: 0; padding: 0; }
.aanbieders li { padding: 12px 0; border-top: 1px solid var(--lijn); }
.aanbieders li:last-child { border-bottom: 1px solid var(--lijn); }
.aanbieders li.geen .a-kop b { color: var(--stil); font-weight: 500; font-size: 0.9rem; }
.a-kop { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.a-kop a { color: var(--ink); font-weight: 600; }
.a-kop b { font: 700 1.02rem/1.2 var(--kop); color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.a-sub { margin: 3px 0 0; font-size: 0.82rem; color: var(--stil); line-height: 1.4; }
.a-inc { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 0; }
.inc { font-size: 0.76rem; line-height: 1; padding: 5px 8px; border-radius: 999px; background: var(--vlak); color: var(--tekst); }
.inc.ja { background: #e6f1ea; color: #1f4d33; }
.inc.nee { background: #fbe1dc; color: #7a2e0e; }
.inc-tabel { width: 100%; min-width: 820px; border-collapse: collapse; margin: 24px auto 0; font-size: 0.85rem; text-align: left; }
.inc-tabel th, .inc-tabel td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.inc-tabel thead th { color: var(--stil); font-weight: 600; font-size: 0.8rem; }
.inc-tabel tbody th a { color: var(--ink); font-weight: 600; }
.inc-tabel td { font-weight: 600; }
.inc-tabel td small { display: block; font-weight: 400; color: var(--stil); font-size: 0.74rem; line-height: 1.35; margin-top: 3px; max-width: 18ch; }
.inc-tabel td.ja { color: #1f4d33; }
.inc-tabel td.nee { color: #9a3412; }
.inc-tabel td.onb { color: var(--stil); font-weight: 400; }
.bv-perm2 { flex: 0 0 calc(var(--p) / 3751 * 100%); background: var(--oranje-fel); border-radius: 5px; }
#m2wolk { display: block; width: 100%; max-width: 1000px; height: auto; overflow: visible; font: 500 12px/1 var(--romp); }
#m2wolk .w-as text { fill: var(--stil); font-variant-numeric: tabular-nums; }
#m2wolk .w-as .w-as-titel { fill: var(--tekst); }
#m2wolk .w-raster { stroke: var(--lijn); }
#m2wolk .w-marker { transition: transform var(--duration-slow) var(--ease-smooth-out); pointer-events: none; }
#m2wolk .w-marker line { stroke: var(--ink); stroke-width: 1.5; }
#m2wolk .reeks { opacity: .35; transition: opacity var(--duration-fast) var(--ease-smooth-out); }
#m2wolk .reeks.actief { opacity: 1; }
#m2wolk .r-lijn { fill: none; stroke: var(--k); stroke-width: 2; stroke-dasharray: 5 4; }
#m2wolk .r-band { stroke: var(--k); stroke-width: 3; stroke-linecap: round; opacity: .55; }
#m2wolk .r-stip { fill: var(--k); stroke: #fff; stroke-width: 1.5; }
#m2wolk .r-stip.open { fill: #fff; stroke: var(--k); stroke-width: 2; }
#m2wolk .r-vlak { fill: var(--k); opacity: .16; stroke: var(--k); stroke-opacity: .5; }
#m2wolk .p-stip { fill: #fff; stroke: var(--stil); stroke-width: 1.6; }
#m2wolk a:focus { outline: none; }
#m2wolk a:focus-visible .r-stip, #m2wolk a:focus-visible .r-vlak, #m2wolk a:focus-visible .p-stip { stroke: var(--ink); stroke-width: 3; }
.wolk-legenda li i { width: 11px; height: 11px; border-radius: 50%; }
.wolk-legenda .lg-proj { width: 8px; height: 8px; border-radius: 1px; transform: rotate(45deg); border: 1.6px solid var(--stil); background: #fff; }
.onderdelen li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; }
.onderdelen li small { grid-column: 1 / -1; color: var(--stil); font-size: 0.8rem; }
.onderdelen .o-naam { color: var(--ink); }
@media (max-width: 640px) { #m2wolk { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { #m2wolk .w-marker, #m2wolk .reeks { transition: none !important; } }

/* ===== mantelzorgwoning ===== */
.omslag-blok { max-width: var(--breed); margin: clamp(48px, 6vw, 80px) auto 0; padding: clamp(36px, 5vw, 56px) var(--rand); border-top: 1px solid var(--lijn); }
.omslag-lijst { list-style: none; margin: 18px 0 0; padding: 0; position: relative; }
.omslag-lijst li { padding: 12px 0; border-top: 1px solid var(--lijn); }
.omslag-lijst li:last-child { border-bottom: 1px solid var(--lijn); }
.om-kop { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.om-kop a { color: var(--ink); font-weight: 600; }
.om-kop b { font: 700 1rem/1.2 var(--kop); font-variant-numeric: tabular-nums; }
.omslag-lijst li.huren .om-kop b { color: var(--groen); }
.omslag-lijst li.kopen .om-kop b { color: var(--oranje); }
.om-balk { position: relative; height: 12px; margin: 8px 0 6px; background: var(--vlak); border-radius: 6px; }
.om-balk i { display: block; height: 100%; background: var(--groen); opacity: .75; border-radius: 6px; transition: width var(--duration-slow) var(--ease-smooth-out); }
.om-balk::after { content: ""; position: absolute; top: -5px; bottom: -5px; left: var(--jij, 0); width: 2px; background: var(--ink); transition: left var(--duration-slow) var(--ease-smooth-out); }
.omslag-lijst { --jij: 0%; }
.om-balk { --jij: inherit; }
.om-sub { margin: 0; font-size: 0.82rem; color: var(--stil); line-height: 1.45; }
.prijswolk.binnen { margin: 0; border-top: 0; padding: 0; max-width: none; }
.huur-tabel td small { display: block; color: var(--stil); font-size: 0.76rem; }
.wolk-legenda .lg-uitleg { flex-basis: 100%; color: var(--stil); font-size: 0.8rem; }
#koopwolk { display: block; width: 100%; max-width: 1000px; height: auto; overflow: visible; font: 500 12px/1 var(--romp); }
#koopwolk .w-as text { fill: var(--stil); font-variant-numeric: tabular-nums; }
#koopwolk .w-as .w-as-titel { fill: var(--tekst); }
#koopwolk .w-raster { stroke: var(--lijn); }
#koopwolk a:focus { outline: none; }
#koopwolk a:focus-visible .k-stip, #koopwolk a:focus-visible .k-cat { stroke: var(--ink); stroke-width: 3; }
@media (max-width: 640px) { #koopwolk { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .om-balk i, .om-balk::after { transition: none !important; } }
.groot .per { display: inline-block; margin-left: 12px; font: 500 1.05rem/1.3 var(--romp); color: var(--stil); letter-spacing: 0; vertical-align: baseline; }
.om-niet { margin: 4px 0 0; font-size: 0.8rem; color: #7a2e0e; line-height: 1.4; }
/* methode + bronnen: kop links, alle tekst als één kolom rechts (Sam 14-10: losse grid-cellen gaven gaten) */
.bronnen > .bronnen-tekst { grid-column: 2; max-width: 74ch; }
.bronnen-tekst > p:first-child { margin-top: 0; }
.bronnen-tekst ul { padding-left: 20px; margin: 16px 0 0; }
.bronnen-tekst ul li { margin-bottom: 12px; font-size: 0.95rem; line-height: 1.6; color: var(--tekst); }
.bronnen-tekst h3 { margin: 32px 0 12px; font-size: 1.15rem; }
.bronnen-tekst ol { padding-left: 22px; margin: 0; }
.bronnen-tekst .uitleg-klein { margin-top: 18px; }
@media (max-width: 960px) { .bronnen > .bronnen-tekst { grid-column: 1; } }

/* ===== artikelen (backlinkswinkel-catalogus) ===== */
.artikel { max-width: 46rem; margin: 0 auto; padding: clamp(36px, 6vw, 72px) var(--rand); }
.artikel-kop h1 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.08; margin: 6px 0 10px; }
.artikel-kop .bovenregel a { color: inherit; }
.artikel-datum { color: var(--stil); font-size: 0.9rem; margin: 0 0 14px; }
.artikel-beeld { margin: 22px 0 8px; }
.artikel-beeld img { width: 100%; height: auto; border-radius: 10px; display: block; }
.artikel-tekst { font-size: 1.06rem; line-height: 1.7; color: var(--tekst); }
.artikel-tekst h2 { font-size: 1.5rem; margin: 2rem 0 .6rem; color: var(--ink); }
.artikel-tekst h3 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; color: var(--ink); }
.artikel-tekst img { max-width: 100%; height: auto; }
.artikel-tekst a { color: var(--ink); text-decoration-color: var(--oranje); }
.artikel-tekst table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.artikel-tekst th, .artikel-tekst td { border-bottom: 1px solid var(--lijn); padding: 8px 10px 8px 0; text-align: left; }
.artikelen { max-width: 46rem; margin: 0 auto; }
.artikel-lijst { list-style: none; padding: 0; margin: 24px 0 0; }
.artikel-lijst li { padding: 18px 0; border-top: 1px solid var(--lijn); }
.artikel-lijst li a { font: 700 1.25rem/1.25 var(--kop); color: var(--ink); text-decoration: none; }
.artikel-lijst li span { display: block; color: var(--stil); font-size: .85rem; margin-top: 4px; }
.artikel-lijst li p { margin: 6px 0 0; color: var(--tekst); }