/* ─────────────────────────────────────────────────────────────
   Woonstaete — nieuwe bouwstenen (voorstel, nog niet in main.css)
   Hoort bij demos/patronen.html en de pagina's die de blokken al gebruiken (organisatie.html).
   Alles hier gebruikt de tokens uit
   main.css. Na akkoord van Bodi verhuist een blok naar main.css, met
   een ophoging van ?v= op alle pagina's.
   ───────────────────────────────────────────────────────────── */

/* ─── Correctie op de plaat: stoppen bij de schermrand ───────────
   In main.css is de marge calc(50% - 50vw). Die 50% is de helft van
   de kolom, niet van de container, waardoor de plaat op 1440 px ruim
   300 px vóórbij de schermrand doorloopt en door overflow-x: clip
   wordt afgesneden. De foto wordt dan gecentreerd op een plaat die
   deels buiten beeld valt. Met deze marge eindigt de plaat precies op
   de schermrand en blijft het midden van de foto het midden van wat
   u ziet. Voorstel om zo over te nemen in main.css. */
@media (min-width: 881px) {
  .split { --bleed: max(var(--gutter), (100vw - var(--container)) / 2 + var(--gutter)); }
  .split__paneel--bleed-r { margin-right: calc(-1 * var(--bleed)); }
  .split__paneel--bleed-l { margin-left:  calc(-1 * var(--bleed)); }
  /* het vlak loopt door tot de rand, de inhoud blijft op het raster van de pagina */
  .split__paneel--donker.split__paneel--bleed-r { padding-right: var(--bleed); }
  .split__paneel--donker.split__paneel--bleed-l { padding-left: var(--bleed); }
  .split__paneel--bleed-r .split__paneel-in { padding-right: var(--bleed); }
  .split__paneel--bleed-l .split__paneel-in { padding-left: var(--bleed); }
  .split__paneel--bleed-r .split__kaart:not(.split__kaart--links) { right: var(--bleed); }
  .split__paneel--bleed-l .split__kaart--links { left: var(--bleed); }
  .split__paneel--beeld.split__paneel--bleed-r,
  .split__paneel--beeld.split__paneel--bleed-l { width: calc(100% + var(--bleed)); }
}

/* Feitenparen met uitleg: één vaste labelkolom, zodat de waarden onder
   elkaar beginnen (in main.css is de kolom per rij zo breed als het label) */
.split__kaart .ws-pair--uitleg,
.split__pairs .ws-pair--uitleg { grid-template-columns: 7.5em minmax(0, 1fr); }
.split__kaart .ws-pair--uitleg .k,
.split__pairs .ws-pair--uitleg .k { white-space: normal; }

/* ─── Pad — een lijn met knopen, voor een structuur of een route ─── */
.pad {
  --pad-lijn: rgba(255, 255, 255, 0.3);
  --pad-x: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pad__stap {
  position: relative;
  padding: 0 0 var(--s-5) 40px;
  background: linear-gradient(var(--pad-lijn), var(--pad-lijn)) var(--pad-x) 0 / 1px 100% no-repeat;
}
.pad__stap:first-child { background-position: var(--pad-x) 12px; }
.pad__stap:last-child { padding-bottom: 0; background-size: 1px 12px; }
.pad__stap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--blue-dark);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.pad__stap strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}
.pad__stap span {
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
/* de knoop waar het voor de lezer om gaat: oranje, en de tekst springt in */
.pad__stap--u { padding-left: 72px; }
.pad__stap--u::before { background: var(--orange); border-color: var(--orange); }
.pad__stap--u::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 12px;
  width: 43px;
  height: 1px;
  background: var(--orange);
}
.pad__stap em {
  display: inline-block;
  margin-top: 6px;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
/* genummerd: de route van uw inleg */
.pad--nr { --pad-x: 13px; counter-reset: pad; }
.pad--nr .pad__stap {
  counter-increment: pad;
  padding-left: 52px;
  padding-bottom: var(--s-6);
}
.pad--nr .pad__stap:last-child { padding-bottom: 0; }
.pad--nr .pad__stap::before {
  content: counter(pad);
  top: -2px;
  width: 27px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
}
.pad--nr .pad__stap--u { padding-left: 52px; }
.pad--nr .pad__stap--u::after { display: none; }
/* op een lichte ondergrond */
.pad--licht { --pad-lijn: var(--rule); }
.pad--licht .pad__stap::before { background: var(--paper); border-color: var(--blue); color: var(--blue-dark); }
.pad--licht .pad__stap--u::before { background: var(--orange); border-color: var(--orange); color: #fff; }
.pad--licht .pad__stap strong { color: var(--blue-dark); }
.pad--licht .pad__stap span { color: var(--ink-soft); }

/* ─── Groot cijfer — één getal dat de plaat draagt ─────────────── */
.split__cijfer {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(96px, 10vw, 148px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
  margin-top: var(--s-4);
}
.split__cijfer small { font-size: 0.42em; letter-spacing: -0.01em; }
.split__cijfer-bij {
  font-size: 18px;
  color: #fff;
  margin: var(--s-2) 0 var(--s-6);
}
.ws-pair--bedrag { align-items: baseline; padding: 15px 0; }
.ws-pair--bedrag .v {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.ws-pair--bedrag .v small {
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 0;
  margin-left: 6px;
  color: rgba(255, 255, 255, 0.62);
}
.split__noot {
  margin-top: var(--s-5);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

/* ─── Feitenrijen — label links, een lopende zin rechts ────────── */
.ws-pair--tekst {
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
  padding: 16px 0;
  font-size: 16px;
  line-height: 1.6;
}
.ws-pair--tekst .k { color: var(--blue-dark); font-weight: 600; }
.ws-pair--tekst .v {
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
}
@media (max-width: 560px) {
  .ws-pair--tekst { grid-template-columns: 1fr; gap: 2px; }
}

/* ─── Genummerde stappen — serifcijfer in oranje ───────────────── */
.stappen { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.stappen__stap {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
}
.stappen__stap:last-child { border-bottom: 1px solid var(--rule); }
.stappen__nr {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 30px;
  line-height: 1;
  color: var(--orange);
  font-variant-numeric: lining-nums;
}
.stappen__stap strong { display: block; font-size: 17px; font-weight: 600; color: var(--blue-dark); }
.stappen__stap p { margin: 2px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; }

/* ─── Beeldblok — lagere, bredere plaat zonder sluier of kaart ─── */
.split--beeld { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.split--beeld.split--om { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.split__paneel--beeld {
  min-height: 0;
  aspect-ratio: 5 / 4;
  max-height: 660px;
  width: 100%; /* expliciet, anders draagt max-height via de aspect-ratio over op de breedte en blijft het paneel op brede schermen smal en links */
  align-self: center;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: var(--r-lg);
  background: var(--blue-soft);
}
.split__paneel--beeld.split__paneel--bleed-r { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.split__paneel--beeld.split__paneel--bleed-l { border-radius: 0 var(--r-lg) var(--r-lg) 0; }
.split__paneel--beeld img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 880px) {
  .split--beeld, .split--beeld.split--om { grid-template-columns: 1fr; }
  .split__paneel--beeld,
  .split__paneel--beeld.split__paneel--bleed-r,
  .split__paneel--beeld.split__paneel--bleed-l { aspect-ratio: 3 / 2; border-radius: var(--r-md); order: 2; }
}

/* ─── Contactblok gestapeld: portret boven de kaart, voor een smalle zijkolom ─ */
.contact-person--stapel { grid-template-columns: 1fr; gap: var(--s-5); }
.contact-person--stapel .contact-person__portrait { max-width: 200px; }

/* ─── Route met drie stappen, en een link onder de stap ────────── */
.route--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.route__stap .ws-btn--link { margin-top: var(--s-3); }
@media (max-width: 980px) {
  .route--drie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .route--drie { grid-template-columns: 1fr; }
}

/* ─── Drieluik — mensen in kleur, tot aan de rand van de plaat ─── */
.split__paneel--mensen {
  background: linear-gradient(160deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
}
.drieluik {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
}
.drieluik figure { margin: 0; }
.drieluik img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 20%;
}
.drieluik figcaption {
  padding: var(--s-3) var(--s-3) 0 var(--s-4);
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.65);
}
.drieluik figcaption strong { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.split__paneel-in { padding: clamp(28px, 3.4vw, 48px) clamp(24px, 4vw, 56px) clamp(32px, 4vw, 56px); }
.split__paneel-in .section-eyebrow { color: var(--orange); }
@media (max-width: 880px) {
  .split__paneel--mensen { order: 2; }
  .drieluik figcaption { padding-left: var(--s-3); font-size: 12.5px; }
  .drieluik figcaption strong { font-size: 13.5px; }
}

/* ─── Track record — kop met tellers, daaronder tegels in 3:2 ──── */
.ankerkop {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
.ankerkop .section-title { margin-bottom: var(--s-4); }
.ankerkop .section-lede { margin-bottom: 0; max-width: 44ch; }
.counters--compact .counter { padding: 20px 22px; }
.counters--compact .counter__num { font-size: clamp(30px, 2.8vw, 40px); }
.counters--compact .counter__k { margin-top: 10px; }
.counters--compact .counter__v { font-size: 13px; }
.projecttegels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-6) var(--s-5);
  margin-top: var(--s-8);
}
.projecttegel { margin: 0; }
.projecttegel__beeld {
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.projecttegel__beeld img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
a.projecttegel__beeld:hover img { transform: translateY(-2px); }
.projecttegel--nu .projecttegel__beeld { outline: 2px solid var(--orange); outline-offset: -2px; }
.projecttegel--leeg .projecttegel__beeld {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.projecttegel figcaption {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: var(--s-3);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
.projecttegel figcaption i {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: 19px;
  color: var(--orange);
  font-variant-numeric: tabular-nums lining-nums;
}
.projecttegel small {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}
@media (max-width: 980px) {
  .ankerkop { grid-template-columns: 1fr; align-items: start; }
  .projecttegels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
}
@media (max-width: 560px) {
  .counters--compact.counters--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projecttegel figcaption { font-size: 14.5px; gap: 8px; }
  .projecttegel figcaption i { font-size: 16px; }
  .projecttegel small { font-size: 13px; }
}

/* ─── Databand — lichte kop, daaronder een donkere band met grote
       serifcijfers en de grafieken ──────────────────────────────── */
.databand-host { padding-bottom: 0; }
.databand__boven {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  padding-bottom: var(--s-8);
}
.databand__boven .section-title { margin-bottom: 0; }
.databand__boven .prose p:last-child { margin-bottom: 0; }
.databand {
  background: linear-gradient(160deg, var(--blue-dark) 0%, var(--blue-dark) 45%, color-mix(in srgb, var(--blue-dark) 60%, var(--blue)) 100%);
  color: #fff;
  padding: var(--s-8) 0 var(--s-8);
}
.databand__cijfers {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: clamp(32px, 6vw, 96px);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.databand__cijfer b {
  display: block;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.databand__cijfer span {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--s-3);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
}
.databand__cijfer i { display: block; width: 22px; height: 3px; border-radius: 2px; flex: none; }
.databand__cijfer--rechts { text-align: right; }
.databand__cijfer--rechts span { justify-content: flex-end; }
.databand__grafieken {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  margin-top: var(--s-6);
  align-items: end;
}
.databand__grafieken figure { margin: 0; }
.databand__grafieken h3 {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.25;
  color: #fff;
  margin-bottom: var(--s-3);
}
.databand__grafieken svg { display: block; width: 100%; height: auto; overflow: visible; }
.databand__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-bottom: var(--s-2);
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
}
.databand__legenda span { display: inline-flex; align-items: center; gap: 8px; }
.databand__legenda i { display: block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
.databand__legenda i.lijn { height: 3px; width: 18px; border-radius: 2px; }
.databand__legenda--mobiel { display: none; }
.databand__noot {
  margin-top: var(--s-6);
  max-width: 110ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
}
/* tekst in de grafieken: maten in eenheden van de viewBox */
.g-as    { font-size: 2.8px; fill: #A9BBD2; }
.g-jaar  { font-size: 3px;   fill: #A9BBD2; }
.g-noot  { font-size: 2.7px; fill: #A9BBD2; }
.g-label { font-size: 2.9px; fill: #A9BBD2; }
.g-label--kop { font-size: 3.1px; fill: #fff; }
.g-label tspan.g-waarde { font-weight: 600; fill: #fff; }
.g-balk      { font-size: 2.7px; fill: #A9BBD2; }
.g-balk--kop { font-size: 3.9px; font-weight: 600; fill: #fff; }
.databand svg circle, .databand svg .g-staaf { cursor: default; }
@media (max-width: 880px) {
  .databand__boven { grid-template-columns: 1fr; gap: var(--s-5); padding-bottom: var(--s-7); }
  .databand__grafieken { grid-template-columns: 1fr; gap: var(--s-7); align-items: start; }
}
@media (max-width: 720px) {
  .databand { padding: var(--s-7) 0; }
  .databand__cijfers { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-5); }
  .databand__cijfer--rechts { grid-column: 1 / -1; text-align: left; }
  .databand__cijfer--rechts span { justify-content: flex-start; }
  .databand__cijfer span { font-size: 13.5px; }
  .databand__legenda--mobiel { display: flex; }
  /* op de telefoon is de viewBox 2,4 px per eenheid: tekst groter, namen naar de legenda */
  .g-as { font-size: 4px; transform: translate(1.2px, 0); }
  .g-jaar { font-size: 4.4px; }
  .g-label, .g-label--kop { font-size: 4.8px; }
  .g-naam, .g-noot { display: none; }
  .g-balk { font-size: 3px; }
  /* zonder de namen is de rechterstrook van de lijngrafiek leeg: iets inzoomen */
  .databand__grafieken figure:first-child { overflow: hidden; }
  .databand__grafieken figure:first-child svg { width: 114%; max-width: none; overflow: hidden; }
}

/* ─── Alleen voor deze demopagina: het etiket boven elk blok ───── */
.patroon-label {
  background: var(--blue-soft);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-4) 0;
}
.patroon-label .container { display: flex; flex-wrap: wrap; gap: 6px var(--s-4); align-items: baseline; }
.patroon-label__nr { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--orange); font-variant-numeric: tabular-nums lining-nums; }
.patroon-label__naam { font-size: 16px; font-weight: 600; color: var(--blue-dark); }
.patroon-label__code { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.patroon-label p { flex-basis: 100%; max-width: 96ch; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.patroon-label .ws-tag { margin-left: auto; }
.patroon-groep { padding: var(--s-8) 0 var(--s-6); }
.patroon-groep .section-title { margin-bottom: var(--s-3); }
.patroon-groep .section-lede { margin-bottom: 0; }
.patroon-regels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); }
.patroon-regels div { border-top: 2px solid var(--orange); padding-top: var(--s-4); }
.patroon-regels strong { display: block; color: var(--blue-dark); font-weight: 600; margin-bottom: 4px; }
.patroon-regels p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 880px) {
  .patroon-regels { grid-template-columns: 1fr; }
  .patroon-label .ws-tag { margin-left: 0; }
}

/* ─── Pad op licht: de kop erboven, in serif zoals het statement op donker ─ */
.pad-kop {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--blue-dark);
  max-width: 24ch;
  text-wrap: balance;
  margin: var(--s-3) 0 var(--s-6);
}
/* korte toelichting onder het pad, voor één entiteit die buiten de route valt */
.pad-noot {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
  margin-top: var(--s-5);
}
/* knoppen onder een tekstkolom in een split */
.split__acties { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
/* onder 880 px: eerst de tekst, dan de plaat (main.css doet dit al voor de donkere plaat) */
@media (max-width: 880px) {
  .split__paneel--foto { order: 2; }
}

/* ─── De reis — tijdlijn met een vast paneel: kaart, jaartal en teller ─
   Alleen op de familiepagina. Links blijft het paneel staan terwijl de
   projecten rechts voorbijscrollen; de lijn loopt oranje vol (rail-fill
   uit main.js) en het project dat de helft van het scherm passeert, zet
   het jaartal, de plaats, de teller en de stip op de kaart. */
.reis {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  margin-top: var(--s-8);
  align-items: start;
}
.reis__paneel {
  position: sticky;
  top: calc(var(--header-h, 84px) + var(--s-6));
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
.reis__kaart { display: block; width: min(100%, 360px); height: auto; overflow: visible; }
.reis__land {
  fill: var(--blue-soft);
  stroke: var(--paper);
  stroke-width: 0.8;
  stroke-linejoin: round;
}
/* de vier provincies waar de familie heeft gerealiseerd */
.reis__land--actief { fill: color-mix(in srgb, var(--blue-soft) 55%, var(--blue) 45%); }
.reis__stip {
  fill: var(--paper);
  stroke: var(--blue);
  stroke-width: 1.5;
  transition: fill var(--t-slow) var(--ease), r var(--t-slow) var(--ease), stroke var(--t-slow) var(--ease);
}
.reis__stip.is-gedaan { fill: var(--blue); }
.reis__stip.is-actief { fill: var(--orange); stroke: var(--orange); r: 6; }
@keyframes reis-puls { 0% { r: 6; opacity: .6; } 100% { r: 16; opacity: 0; } }
.reis__stand { border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.reis__jaar {
  display: block;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(64px, 7vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--blue-dark);
  font-variant-numeric: tabular-nums lining-nums;
}
.reis__plaats { display: block; margin-top: var(--s-3); font-size: 20px; font-weight: 600; color: var(--blue-dark); }
.reis__teller { display: block; margin-top: 4px; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.reis__teller em {
  font-style: normal;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 22px;
  color: var(--orange);
}
/* de lijst met de lijn ervoor */
.reis__lijst { position: relative; padding-left: 44px; }
.reis__rail {
  position: absolute;
  left: 8px; top: 12px; bottom: 12px;
  width: 1px;
  background: var(--rule);
}
.reis__rail span { display: block; width: 100%; height: 0; background: var(--orange); transition: height 120ms linear; }
.reis__stap { position: relative; padding-bottom: var(--s-8); }
.reis__stap:last-child { padding-bottom: 0; }
.reis__stap::before {
  content: '';
  position: absolute;
  left: -44px; top: 6px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--blue);
  transition: background var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.reis__stap.is-actief::before { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 5px rgba(243, 112, 33, 0.18); }
.reis__beeld {
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--blue-soft);
  border: 1px solid var(--rule);
}
.reis__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
/* schuin lint in de hoek: het project is gerealiseerd en de lening is volledig terugbetaald */
.reis__beeld { position: relative; }
.reis__lint {
  position: absolute;
  top: 92px; left: 92px;
  width: 260px;
  transform: translate(-50%, -50%) rotate(-45deg);
  padding: 7px 0;
  text-align: center;
  background: var(--blue-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(20, 40, 64, 0.28);
  pointer-events: none;
}
@media (max-width: 880px) {
  .reis__lint { top: 64px; left: 64px; width: 190px; padding: 5px 0; font-size: 9px; letter-spacing: 0.12em; }
}
.reis__beeld--leeg {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--rule);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange);
}
.reis__stap--nu .reis__beeld { outline: 2px solid var(--orange); outline-offset: -2px; }
.reis__tekst { margin-top: var(--s-4); max-width: 52ch; }
.reis__meta { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.reis__meta i {
  font-style: normal;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400; font-size: 17px; letter-spacing: 0; text-transform: none;
  color: var(--orange);
  font-variant-numeric: tabular-nums lining-nums;
}
.reis__titel { margin: 6px 0 0; font-size: 22px; font-weight: 600; color: var(--blue-dark); }
.reis__titel small { display: block; font-size: 14.5px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.reis__tekst p { margin: var(--s-3) 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.reis__stap { opacity: .55; transition: opacity var(--t-slow) var(--ease); }
.reis__stap.is-actief { opacity: 1; }
/* de tellers blijven donkere tegels, ook op een lichte ondergrond: de witte scheidingslijnen vallen daar weg */
.counters--licht { background: var(--rule); }
@media (max-width: 880px) {
  .reis { grid-template-columns: 1fr; gap: var(--s-6); }
  .reis__paneel {
    top: calc(var(--header-h, 72px) + 8px);
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: var(--s-4);
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: var(--s-3) 0;
    z-index: 5;
  }
  .reis__kaart { width: 96px; }
  .reis__stand { border-top: 0; padding-top: 0; }
  .reis__jaar { font-size: 44px; }
  .reis__plaats { font-size: 17px; margin-top: 4px; }
  .reis__teller { font-size: 14px; }
  .reis__teller em { font-size: 18px; }
  .reis__lijst { padding-left: 32px; }
  .reis__stap::before { left: -32px; }
  .reis__stap { padding-bottom: var(--s-7); }
}
@media (prefers-reduced-motion: reduce) {
  .reis__stap { opacity: 1; }
}

/* ─── De doorsnede — het gebouw, met eronder de lagen waar de lening op rust ─
   Alleen op zekerheden.html. De foto staat op het maaiveld; de lagen eronder
   worden naar beneden toe donkerder, zoals grond in een doorsnede. */
.doorsnede__kop {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: end;
}
.doorsnede__kop .section-title { margin-bottom: 0; }
.doorsnede__kop .section-lede { margin: 0; }
.doorsnede {
  margin: clamp(32px, 4vw, 56px) 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--blue-dark);
  box-shadow: 0 24px 60px rgba(20, 40, 64, 0.16);
}
.doorsnede__beeld { position: relative; aspect-ratio: 2 / 1; max-height: 600px; width: 100%; }
.doorsnede__beeld img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  display: block;
}
/* het gras loopt over in de eerste laag */
.doorsnede__beeld::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(42, 74, 115, 0) 0%, rgba(42, 74, 115, 0.78) 72%, #2A4A73 100%);
}
.doorsnede__bij {
  position: absolute;
  left: clamp(20px, 3vw, 40px);
  bottom: clamp(14px, 1.6vw, 22px);
  z-index: 1;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
  font-variant-numeric: tabular-nums lining-nums;
}
.doorsnede__bij span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 2px;
}
.doorsnede__lagen { list-style: none; margin: 0; padding: 0; }
.doorsnede__laag {
  display: grid;
  grid-template-columns: 56px minmax(0, 0.8fr) minmax(0, 1.35fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
  padding: clamp(22px, 2.4vw, 34px) clamp(20px, 3vw, 40px);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.doorsnede__laag:nth-child(1) { background: #2A4A73; border-top: 0; }
.doorsnede__laag:nth-child(2) { background: #223F66; }
.doorsnede__laag:nth-child(3) { background: #1A3150; }
.doorsnede__laag:nth-child(4) { background: var(--blue-dark); }
.doorsnede__nr {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 44px;
  line-height: 0.9;
  color: var(--orange);
  font-variant-numeric: lining-nums;
}
.doorsnede__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 6px;
}
.doorsnede__wat h3 {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.doorsnede__laag p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 62ch;
}
.doorsnede__laag p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 880px) {
  .doorsnede__kop { grid-template-columns: 1fr; gap: var(--s-4); }
  .doorsnede { border-radius: var(--r-md); }
  .doorsnede__beeld { aspect-ratio: 3 / 2; }
  .doorsnede__beeld img { object-position: 50% 50%; }
  .doorsnede__beeld::after { height: 28%; }
  .doorsnede__laag { grid-template-columns: 40px minmax(0, 1fr); row-gap: var(--s-3); }
  .doorsnede__laag p { grid-column: 2; }
  .doorsnede__nr { font-size: 34px; }
}

/* rangorde: één laag over de volle hoogte van de twee lagen ernaast */
.rang__laag--u { min-height: 118px; align-items: center; }

/* de doorsnede: keuze tussen Rust en Opbouw */
.doorsnede__keuze { display: none; gap: var(--s-3); margin-top: clamp(28px, 3.4vw, 48px); flex-wrap: wrap; }
.heeft-doorsnede-keuze .doorsnede__keuze { display: flex; }
.heeft-doorsnede-keuze .doorsnede { margin-top: var(--s-5); }
.doorsnede[hidden] { display: none; }
.doorsnede__tab {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 12px 22px;
  min-width: 220px;
  font: inherit;
  color: var(--blue-dark);
  background: transparent;
  border: 1px solid var(--blue);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1);
}
.doorsnede__tab strong { font-size: 16px; font-weight: 600; }
.doorsnede__tab span { font-size: 13.5px; color: var(--muted); }
.doorsnede__tab:hover { background: var(--blue-soft); }
.doorsnede__tab.is-actief { background: var(--blue); color: #fff; }
.doorsnede__tab.is-actief span { color: rgba(255, 255, 255, 0.72); }
.doorsnede__tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.doorsnede--opbouw .doorsnede__beeld img { object-position: 50% 78%; }
@media (max-width: 560px) {
  .doorsnede__tab { flex: 1 1 0; min-width: 0; padding: 10px 14px; }
}

/* Stabiel: de bovenste laag is van de bank, en dus niet van de lezer */
.doorsnede--stabiel .doorsnede__beeld img { object-position: 50% 38%; }
.doorsnede__laag--bank:nth-child(1) { background: #4A5568; }
.doorsnede__laag--bank .doorsnede__nr { color: rgba(255, 255, 255, 0.55); }
.doorsnede--stabiel .doorsnede__beeld::after { background: linear-gradient(180deg, rgba(74, 85, 104, 0) 0%, rgba(74, 85, 104, 0.78) 72%, #4A5568 100%); }
@media (max-width: 720px) { .doorsnede__tab { min-width: 0; flex: 1 1 100%; } }

/* ─── Partijen — vier partijen op een rij, elk met één taak (stichting.html) ─ */
.partijen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(32px, 4vw, 56px);
}
.partij {
  padding: clamp(20px, 2vw, 28px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: 0 10px 28px rgba(20, 40, 64, 0.06);
}
.partij__taak {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.partij__naam {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(21px, 1.8vw, 25px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--blue-dark);
  margin: 0 0 var(--s-3);
  min-height: 2.4em;
}
.partij p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
/* de stichting is de partij waar deze pagina over gaat */
.partij--kern { background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%); border-color: var(--blue-dark); }
.partij--kern .partij__taak { color: var(--orange); border-bottom-color: rgba(255, 255, 255, 0.2); }
.partij--kern .partij__naam { color: #fff; }
.partij--kern p { color: rgba(255, 255, 255, 0.82); }
.partij--wij { background: transparent; box-shadow: none; border-style: dashed; }
@media (max-width: 1080px) { .partijen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .partijen { grid-template-columns: 1fr; } .partij__naam { min-height: 0; } }

/* ─── Bestuur — een kop links, daarnaast twee portretten met een korte loopbaan ─ */
.bestuur {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.bestuur__kop p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 var(--s-4); }
.bestuur__kop .section-title { font-size: clamp(28px, 2.6vw, 38px); }
.bestuurder__foto {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--blue-soft);
  margin-bottom: var(--s-4);
}
.bestuurder__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bestuurder__rol {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 4px;
}
.bestuurder__naam {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(21px, 1.9vw, 25px);
  line-height: 1.2;
  color: var(--blue-dark);
  margin: 0 0 var(--s-3);
}
.bestuurder p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
@media (max-width: 980px) {
  .bestuur { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bestuur__kop { grid-column: 1 / -1; max-width: 62ch; }
}
@media (max-width: 520px) { .bestuur { grid-template-columns: 1fr; } .bestuurder__foto { max-width: 300px; } }

/* ─── Kernstrook — vier kernfeiten direct onder de fotohero (projectpagina) ─ */
.kernstrook {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: calc(-1 * clamp(28px, 4vw, 56px)) 0 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(20, 40, 64, 0.12);
  overflow: hidden;
}
.kernstrook > div { padding: clamp(18px, 2vw, 28px); border-left: 1px solid var(--rule); }
.kernstrook > div:first-child { border-left: 0; }
.kernstrook dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--s-2);
}
.kernstrook dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
.kernstrook dd b {
  display: block;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--blue-dark);
  margin-bottom: 4px;
}
/* op een brede rij breekt een waarde niet af ("1e hypotheekrecht" bleef anders in twee regels staan) */
@media (min-width: 881px) { .kernstrook dd b { white-space: nowrap; } }
@media (max-width: 880px) {
  .kernstrook { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r-md); }
  .kernstrook > div:nth-child(3) { border-left: 0; }
  .kernstrook > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* ─── Rekenhulp — op de donkere plaat: één groot bedrag, keuze en een schuif ─ */
.rekenhulp__uit {
  margin: var(--s-4) 0 0;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(56px, 6.4vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
}
.rekenhulp__uit small { font-family: var(--font); font-size: 17px; letter-spacing: 0; margin-left: 12px; color: rgba(255, 255, 255, 0.72); }
.rekenhulp__bij { margin: var(--s-2) 0 var(--s-5); font-size: 17px; color: rgba(255, 255, 255, 0.82); font-variant-numeric: tabular-nums lining-nums; }
.rekenhulp__bij strong { color: #fff; font-weight: 600; }
.rekenhulp__keuze { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rekenhulp__keuze button {
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  padding: 9px 16px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1);
}
.rekenhulp__keuze button:hover { background: rgba(255, 255, 255, 0.1); }
.rekenhulp__keuze button.is-actief { background: #fff; color: var(--blue-dark); border-color: #fff; }
.rekenhulp__keuze button:focus-visible, .rekenhulp__schuif input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* dezelfde knoppen in de kalender op Aanbod, iets kleiner */
.kalender__keuze { margin: calc(-1 * var(--s-1)) 0 var(--s-4); }
.kalender__keuze button { font-size: 13px; padding: 6px 12px; }
.rekenhulp__schuif { display: block; margin: var(--s-5) 0 var(--s-5); }
.rekenhulp__schuif span { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.62); margin-bottom: var(--s-2); }
.rekenhulp__schuif input { width: 100%; accent-color: var(--orange); }

/* ─── Team — één persoon per band, iedereen gelijk; de foto wisselt van kant (team.html) ─ */
.team-row { padding: clamp(48px, 6vw, 88px) 0; scroll-margin-top: 80px; }
.team-row--paper { background: var(--paper); }
.team-row--wit   { background: var(--offwhite); border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.team-row__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.team-row--flip .team-row__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.team-row--flip .team-portret { order: 2; margin-left: auto; }
.team-row__tekst { min-width: 0; }

.team-portret {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--blue-soft);
  box-shadow: 0 18px 44px -26px rgba(31, 58, 95, 0.55);
}
.team-portret img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-portret__initialen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(56px, 7vw, 84px);
  letter-spacing: -0.02em;
  color: var(--blue);
  pointer-events: none;
}
.team-portret img + .team-portret__initialen { display: none; }

.team-rol {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--s-2);
}
.team-naam {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
  margin: 0 0 var(--s-5);
}
.team-bio {
  margin: 0 0 var(--s-5);
  max-width: min(62ch, 100%);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.team-row .plaatshouder { margin-bottom: var(--s-5); max-width: min(62ch, 100%); }

/* De gegevens: label links, waarde rechts, met een haarlijn ertussen */
.team-gegevens { margin: 0; max-width: min(62ch, 100%); }
.team-gegevens > div {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--rule);
}
.team-gegevens > div:last-child { border-bottom: 1px solid var(--rule); }
.team-gegevens dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.team-gegevens dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums lining-nums;
}
.team-gegevens dd.voor { color: var(--blue-dark); font-weight: 500; }
.team-gegevens a { color: inherit; text-decoration: none; transition: color 200ms cubic-bezier(0.2, 0, 0, 1); }
.team-gegevens a:hover { color: var(--blue); text-decoration: underline; }

@media (max-width: 880px) {
  .team-row__inner,
  .team-row--flip .team-row__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .team-row--flip .team-portret { order: 0; margin-left: 0; }
  .team-portret { max-width: 320px; }
}
@media (max-width: 420px) {
  .team-gegevens > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ─── Netto-som — de vergelijker: de invoer op een lichte kaart met de inleg
       als groot cijfer, de uitkomst op de donkere band met twee serifcijfers,
       gelabelde staven en het verschil als eigen blok (lp/renteszoeker-vergelijker.html) ─ */
.nettosom-host { padding-bottom: 0; }
.nettosom-host .nettosom__kop { padding-bottom: var(--s-7); }
.nettosom-host .nettosom__kop .section-lede { margin-bottom: 0; max-width: 66ch; }
.nettosom {
  background: linear-gradient(160deg, var(--blue-dark) 0%, var(--blue-dark) 45%, color-mix(in srgb, var(--blue-dark) 60%, var(--blue)) 100%);
  color: #fff;
  padding: var(--s-8) 0;
}
.nettosom__raster {
  display: grid;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

/* de invoer */
.nettosom__invoer {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: 0 18px 44px rgba(20, 40, 64, 0.28);
  position: sticky;
  top: calc(var(--header-h, 72px) + 24px);
}
.nettosom__veld { padding: var(--s-4) 0; border-top: 1px solid var(--rule-soft); }
.nettosom__veld:first-child { padding-top: 0; border-top: 0; }
.nettosom__veld:last-child { padding-bottom: 0; }
.nettosom__veld--paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.nettosom__veld .ws-label { display: block; }
.nettosom__veld .ws-label + .ws-input,
.nettosom__veld .ws-label + .nettosom__keuze { margin-top: 8px; }
.nettosom__veld .ws-input { width: 100%; font-variant-numeric: tabular-nums lining-nums; }
.nettosom__hint { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 8px; }

/* de inleg als groot cijfer, wél te typen */
.nettosom__bedrag {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  border-bottom: 1px solid var(--rule);
  transition: border-color 200ms cubic-bezier(0.2, 0, 0, 1);
}
.nettosom__bedrag:focus-within { border-bottom-color: var(--blue); }
.nettosom__bedrag span,
.nettosom__bedrag input {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
  font-variant-numeric: tabular-nums lining-nums;
}
.nettosom__bedrag span { color: var(--muted); }
.nettosom__bedrag input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0 0 6px;
  background: transparent;
  border: 0;
  outline: none;
}
.nettosom__snel { display: flex; gap: 6px; margin-top: 12px; }
.nettosom__snel button {
  flex: 1;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  padding: 7px 6px;
  color: var(--blue-dark);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1);
}
.nettosom__snel button:hover { border-color: var(--blue); background: var(--offwhite); }
.nettosom__snel button.is-actief { background: var(--blue); border-color: var(--blue); color: #fff; }
.nettosom__schuif { display: block; width: 100%; margin-top: 14px; accent-color: var(--blue); }
.nettosom__keuze { display: flex; gap: 6px; }
.nettosom__keuze label { flex: 1; position: relative; }
.nettosom__keuze input { position: absolute; opacity: 0; pointer-events: none; }
.nettosom__keuze span {
  display: block;
  text-align: center;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 10px 10px;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--blue-dark);
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1);
}
.nettosom__keuze span:hover { border-color: var(--blue); background: var(--offwhite); }
.nettosom__keuze input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.nettosom__keuze input:focus-visible + span,
.nettosom__snel button:focus-visible { box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.18); outline: none; }
.nettosom__vink { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--ink-soft); cursor: pointer; }
.nettosom__vink input { margin-top: 3px; accent-color: var(--blue); flex: none; }
.nettosom__let {
  display: block;
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--orange-soft);
  border-left: 2px solid var(--orange);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}
.nettosom__let strong { color: var(--ink); font-weight: 600; }
.nettosom__let[hidden] { display: none; }

/* de uitkomst */
.nettosom__uit > .section-eyebrow { color: var(--orange); }
.nettosom__paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 56px);
  margin-top: var(--s-3);
}
.nettosom__kolom { border-top: 1px solid rgba(255, 255, 255, 0.22); padding-top: var(--s-4); min-width: 0; }
.nettosom__kolom--wij { border-top: 2px solid var(--orange); }
.nettosom__wie {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.nettosom__kolom--wij .nettosom__wie { color: var(--orange); }
.nettosom__naam { font-size: 18px; font-weight: 600; color: #fff; margin: 6px 0 var(--s-5); letter-spacing: -0.01em; }
.nettosom__getal {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.nettosom__kolom--spaar .nettosom__getal { color: rgba(255, 255, 255, 0.78); }
.nettosom__per { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.62); }
.nettosom__per b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums lining-nums; }

/* de staaf: de lengte is de bruto rente, het lichte deel houdt u over,
   het gearceerde deel gaat naar de Belastingdienst */
.nettosom__staaf {
  display: flex;
  height: 22px;
  margin-top: var(--s-5);
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  transition: width 500ms cubic-bezier(0.2, 0, 0, 1);
}
.nettosom__staaf i { display: block; height: 100%; min-width: 0; transition: width 500ms cubic-bezier(0.2, 0, 0, 1); }
.nettosom__staaf .netto { background: #8FA5C2; }
.nettosom__kolom--wij .nettosom__staaf .netto { background: #fff; }
.nettosom__staaf .belasting { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.34) 0 3px, rgba(255, 255, 255, 0.07) 3px 7px); }
.nettosom__staaf-labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums lining-nums;
}
.nettosom__staaf-labels b { font-weight: 600; color: #fff; }
.nettosom__staaf-labels span:last-child { text-align: right; }
.nettosom__rijen { margin-top: var(--s-5); }
.nettosom__rijen .ws-pair { border-color: rgba(255, 255, 255, 0.16); padding: 11px 0; font-size: 14.5px; }
.nettosom__rijen .ws-pair:last-of-type { border-bottom-color: rgba(255, 255, 255, 0.16); }
.nettosom__rijen .ws-pair .k { color: rgba(255, 255, 255, 0.62); }
.nettosom__rijen .ws-pair .v { color: #fff; font-weight: 500; }

/* het verschil: één blok met de oranje lijn, zoals de stap die van u is op het pad */
.nettosom__verschil {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3) var(--s-6);
  align-items: center;
  margin-top: var(--s-6);
  padding: var(--s-5) clamp(20px, 2.4vw, 32px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.nettosom__verschil-kop { grid-column: 1 / -1; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.nettosom__verschil b {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.nettosom__verschil b.is-min { color: rgba(255, 255, 255, 0.72); }
.nettosom__verschil p { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); max-width: 54ch; }
.nettosom__verschil p strong { color: #fff; font-weight: 600; }
.nettosom__noot { margin: var(--s-5) 0 0; max-width: 96ch; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.5); }

/* de grondslag: parameters in een kaart naast de uitleg */
.grondslag__kaart .ws-pair { padding: 12px 0; font-size: 14.5px; }
.grondslag__kaart .ws-pair .v { white-space: nowrap; }

@media (max-width: 960px) {
  .nettosom__raster { grid-template-columns: 1fr; }
  .nettosom__invoer { position: static; }
}
@media (max-width: 620px) {
  .nettosom { padding: var(--s-7) 0; }
  .nettosom__paar { grid-template-columns: 1fr; gap: var(--s-6); }
  .nettosom__verschil { grid-template-columns: 1fr; }
  .nettosom__snel { flex-wrap: wrap; }
  .nettosom__snel button { flex-basis: calc(50% - 3px); }
}
@media (max-width: 420px) {
  .nettosom__veld--paar { grid-template-columns: 1fr; }
}
/* een beeldplaat die naast een lange tekst de hele hoogte vult */
@media (min-width: 881px) {
  .split__paneel--beeld.split__paneel--hoog { align-self: stretch; aspect-ratio: auto; max-height: none; }
}
/* de grondslag: parameters in een kaart naast de uitleg */
.grondslag__kaart .ws-pair { padding: 12px 0; font-size: 14.5px; }
.grondslag__kaart .ws-pair .v { white-space: nowrap; }

@media (max-width: 960px) {
  .nettosom__raster { grid-template-columns: 1fr; }
  .nettosom__invoer { position: static; }
}
@media (max-width: 620px) {
  .nettosom { padding: var(--s-7) 0; }
  .nettosom__paar { grid-template-columns: 1fr; gap: var(--s-6); }
  .nettosom__verschil { grid-template-columns: 1fr; }
  .nettosom__snel { flex-wrap: wrap; }
  .nettosom__snel button { flex-basis: calc(50% - 3px); }
}

/* ─── Brochure-aanvraag — e-mailadres achterlaten, daarna de downloadlink (lp/renteszoeker-vergelijker.html) ─ */
.brochure {
  margin-top: var(--s-6);
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--blue-soft);
  border: 1px solid var(--blue-soft);
  border-radius: var(--r-md);
}
.brochure__kop { display: flex; gap: 18px; align-items: center; margin-bottom: var(--s-5); }
/* de voorpagina van de brochure, als liggend boekje met een tweede blad eronder */
.brochure__cover { flex: none; position: relative; width: 148px; aspect-ratio: 297 / 210; }
.brochure__cover::before {
  content: ''; position: absolute; inset: 0; transform: translate(6px, 6px) rotate(1.5deg);
  background: var(--blue); border-radius: 3px; opacity: 0.35;
}
.brochure__cover img {
  position: relative; display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: 3px; border: 1px solid rgba(20, 40, 64, 0.18);
  box-shadow: 0 10px 24px rgba(20, 40, 64, 0.22);
}
.brochure__kop strong { display: block; font-size: 16px; font-weight: 600; color: var(--blue-dark); letter-spacing: -0.01em; }
.brochure__kop span { display: block; font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin-top: 3px; }
.brochure__velden { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-3); }
.brochure__veld { display: grid; gap: 6px; min-width: 0; }
.brochure__veld--breed { grid-column: 1 / -1; }
.brochure__keuze { display: flex; gap: 6px; border-radius: var(--r-sm); }
.brochure__keuze label { flex: 1; position: relative; }
.brochure__keuze input { position: absolute; opacity: 0; pointer-events: none; }
.brochure__keuze span {
  display: block; text-align: center; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 11px 10px; font-size: 14px; font-weight: 500; color: var(--blue-dark); cursor: pointer;
  transition: background 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1);
}
.brochure__keuze span:hover { border-color: var(--blue); background: var(--offwhite); }
.brochure__keuze input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.brochure__keuze input:focus-visible + span { box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.18); }
.brochure__keuze.is-fout span { border-color: var(--orange); }
.brochure__vink { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); cursor: pointer; }
.brochure__vink input { margin-top: 3px; accent-color: var(--blue); flex: none; }
.brochure__vink a { color: var(--blue); }
.brochure__vink.is-fout { color: var(--ink); }
.brochure__vink.is-fout input { outline: 2px solid var(--orange); outline-offset: 1px; border-radius: 2px; }
.brochure .ws-input.is-fout { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.14); }
.brochure__verplicht { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.brochure__acties { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.brochure .ws-form__status { margin: 0; font-size: 14px; line-height: 1.5; }
.brochure .ws-form__status--err { color: var(--orange); font-weight: 500; }
.brochure .brochure__noot { margin: var(--s-3) 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.brochure__noot a { color: var(--blue); }
.brochure .brochure__klaar p { margin: 0 0 var(--s-3); font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.brochure .brochure__klaar p:last-child { margin: var(--s-3) 0 0; font-size: 13.5px; color: var(--muted); }
@media (max-width: 520px) {
  .brochure__kop { align-items: flex-start; gap: 14px; }
  .brochure__cover { width: 104px; }
  .brochure__velden { grid-template-columns: 1fr; }
  .brochure__acties .ws-btn { width: 100%; justify-content: center; }
}

/* ═════════════════════════════════════════════════════════════════
   Beleggingen — de propositie (beleggingen-concept.html, 28 sep 2026)
   Eigen elementen: de ruil (wat bij u ligt en wat bij ons), wat u
   ontvangt (per lening het uitkeringsschema met de bedragen erin), de som
   (van overmaken tot aflossing, bij € 100.000 in Rust) en de
   investeerderscheck naast de brochure-aanvraag.
   ═════════════════════════════════════════════════════════════════ */

/* ─── De ruil — twee kolommen op de donkere plaat ──────────────── */
.ruil {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.ruil__kant { padding: var(--s-4) var(--s-5) 0 0; }
.ruil__kant + .ruil__kant { padding: var(--s-4) 0 0 var(--s-5); border-left: 1px solid rgba(255, 255, 255, 0.22); }
.ruil__kop {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: var(--s-2);
}
.ruil__kant:first-child .ruil__kop { color: var(--orange); }
.ruil ul { list-style: none; margin: 0; padding: 0; }
.ruil li {
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}
.ruil li:last-child { border-bottom: 0; }
@media (max-width: 560px) {
  .ruil { grid-template-columns: 1fr; }
  .ruil__kant, .ruil__kant + .ruil__kant { padding: var(--s-4) 0 0; border-left: 0; }
  .ruil__kant + .ruil__kant { margin-top: var(--s-4); border-top: 1px solid rgba(255, 255, 255, 0.22); }
}

/* ─── Wat u ontvangt — per lening een kop, de feiten en het uitkeringsschema ─
   Het schema is een balk van vakken: één vak per kwartaal (Opbouw) of per
   jaar (Rust), met het bedrag erin, en aan het eind de aflossing. Opbouw
   staat bij de minimale inleg van € 200.000, Rust bij € 100.000. De
   gestreepte vakken tellen mee als de looptijd van de ronde langer is. */
.uitkering {
  margin: var(--s-7) 0 0;
  padding: clamp(24px, 3.6vw, 52px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(20, 40, 64, 0.04), 0 16px 40px rgba(20, 40, 64, 0.06);
}
.uitkering__titel {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--blue-dark);
  margin: 0 0 var(--s-2);
  text-wrap: balance;
}
.uitkering__sub { margin: 0; font-size: 15px; color: var(--muted); max-width: 70ch; }
.uitkering__lening { margin-top: var(--s-7); }
.uitkering__lening + .uitkering__lening { padding-top: var(--s-7); border-top: 1px solid var(--rule-soft); }
.uitkering__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-4);
}
.uitkering__fase {
  flex: 0 0 100%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums lining-nums;
}
.uitkering__naam { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; color: var(--blue-dark); margin: 0; }
.uitkering__rente {
  margin: 0;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blue-dark);
  font-variant-numeric: tabular-nums lining-nums;
}
.uitkering__rente small { font-family: var(--font); font-size: 15px; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.uitkering__kop .ws-btn--link { margin-left: auto; }
.uitkering__feiten {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
  margin: var(--s-4) 0 var(--s-6);
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--rule-soft);
}
.uitkering__feiten dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 4px;
}
.uitkering__feiten dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
.uitkering__bij {
  margin: 0 0 var(--s-3);
  font-size: 15px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums lining-nums;
}
.uitkering__bij strong { color: var(--blue-dark); font-weight: 600; }
.uitkering__totaal { margin: var(--s-3) 0 0; font-size: 15px; color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
.uitkering__totaal strong { color: var(--blue-dark); font-weight: 600; }
.uitkering__noot { margin: var(--s-6) 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 90ch; }

/* Het schema: n vakken en de aflossing, met daaronder de rentestart en
   een label onder de gestreepte vakken */
.schema {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr)) minmax(150px, 1.5fr);
  column-gap: 3px;
  font-variant-numeric: tabular-nums lining-nums;
}
.schema__vak {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 84px;
  padding: 12px 12px 14px;
  background: var(--blue);
  color: #fff;
}
.schema--opbouw .schema__vak { background: var(--blue-dark); }
.schema__label--start + .schema__vak { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.schema__periode {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.schema__vak b {
  margin-top: auto;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.schema__vak small { font-size: 12px; color: rgba(255, 255, 255, 0.72); }
.schema__vak.is-mogelijk,
.schema--opbouw .schema__vak.is-mogelijk {
  background: repeating-linear-gradient(135deg, var(--blue-soft) 0 6px, var(--paper) 6px 12px);
  color: var(--blue-dark);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.schema__vak.is-mogelijk .schema__periode,
.schema__vak.is-mogelijk small { color: var(--muted); }
.schema__eind {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 10px;
  padding: 12px 14px 14px;
  background: var(--blue-soft);
  border-left: 3px solid var(--blue-dark);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--blue-dark);
}
.schema__eind .schema__periode { color: var(--blue-dark); }
.schema__eind b {
  margin-top: auto;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.schema__eind small { font-size: 12px; color: var(--ink-soft); }
.schema__label {
  grid-row: 2;
  padding-top: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}
.schema__label--start { grid-column: 1 / span 2; }
.schema__label--rek {
  grid-column: var(--rek);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--blue);
  text-align: center;
}

@media (max-width: 880px) {
  .uitkering__feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schema { grid-template-columns: repeat(var(--n), minmax(0, 1fr)) minmax(118px, 1.4fr); }
  .schema__vak { padding: 10px 8px 12px; }
  .schema__periode { font-size: 10px; letter-spacing: 0.04em; }
  .schema__vak small { display: none; }
}
/* Op de telefoon wordt het schema een lijst: periode links, bedrag rechts */
@media (max-width: 560px) {
  .uitkering { padding: 20px 16px 24px; border-radius: var(--r-md); }
  .uitkering__kop .ws-btn--link { margin-left: 0; flex: 0 0 100%; }
  .uitkering__feiten { grid-template-columns: 1fr; gap: var(--s-3); }
  .schema { grid-template-columns: 1fr; row-gap: 3px; }
  .schema__vak, .schema__eind, .schema__label { grid-row: auto; grid-column: 1; }
  .schema__vak {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    min-height: 0;
    padding: 10px 14px;
  }
  .schema__label--start + .schema__vak { border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .schema__vak b { margin-top: 0; font-size: 19px; }
  .schema__vak small { display: none; }
  .schema__periode { font-size: 11px; letter-spacing: 0.08em; }
  .schema__eind { margin: 8px 0 0; border-radius: var(--r-sm); border-left-width: 3px; }
  .schema__label--start { padding: 0 0 4px; }
  .schema__label--rek { margin-top: 6px; padding: 6px 0 0; text-align: left; border-top: 0; }
}

/* Stabiel: één regel onder de figuur, met een statustag */
.lening-regel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-6);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.lening-regel p { margin: 0; flex: 1 1 420px; font-size: 15px; color: var(--ink-soft); }
.lening-regel p strong { color: var(--blue-dark); font-weight: 600; }

/* ─── De som — van overmaken tot aflossing, in vier grote bedragen ─ */
.som {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: var(--s-6) 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.som__stap { position: relative; padding: var(--s-6) var(--s-5) var(--s-6) 0; }
.som__stap + .som__stap { padding-left: var(--s-6); border-left: 1px solid var(--rule); }
.som__stap + .som__stap::before {
  content: '→';
  position: absolute;
  left: -14px;
  top: calc(var(--s-6) + 34px);
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  font-size: 13px;
  line-height: 1;
  color: var(--blue);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 50%;
}
.som__k {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.som__v {
  display: block;
  margin: var(--s-3) 0 var(--s-2);
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--blue-dark);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.som__stap:last-child .som__v { color: var(--blue); }
.som__uitleg { display: block; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); max-width: 26ch; }
.som-voor {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin: var(--s-7) 0 0;
}
@media (max-width: 980px) {
  .som { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .som__stap:nth-child(3) { padding-left: 0; border-left: 0; }
  .som__stap:nth-child(3)::before { display: none; }
  .som__stap:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 560px) {
  .som { grid-template-columns: 1fr; }
  .som__stap, .som__stap + .som__stap { padding: var(--s-5) 0 var(--s-5) 0; border-left: 0; }
  .som__stap + .som__stap { border-top: 1px solid var(--rule); }
  .som__stap + .som__stap::before { display: grid; left: auto; right: 0; top: -14px; transform: rotate(90deg); }
  .som__stap:nth-child(3)::before { display: grid; }
}

/* ─── Investeerderscheck — vijf vragen, een uitkomst, en de brochure ernaast ─
   De check vraagt geen persoonsgegevens. De antwoorden gaan pas mee als
   iemand de brochure aanvraagt (verborgen veld "bericht" in het formulier). */
.check-host {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-top: var(--s-7);
}
.check { margin: 0; }
.check__vraag { margin: 0; padding: var(--s-5) 0; border: 0; border-top: 1px solid var(--rule); min-width: 0; }
.check__vraag:last-of-type { border-bottom: 1px solid var(--rule); }
/* de legend zweeft, zodat hij niet op de bovenrand van het kader komt te staan */
.check__vraag legend {
  float: left;
  width: 100%;
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 0;
  margin-bottom: var(--s-3);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--blue-dark);
}
.check__nr {
  flex: none;
  width: 22px;
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--orange);
  font-variant-numeric: lining-nums;
}
.check__keuze { clear: both; display: flex; flex-wrap: wrap; gap: 6px; padding-left: 36px; }
.check__keuze label { position: relative; flex: 0 1 auto; }
.check__keuze input { position: absolute; opacity: 0; pointer-events: none; }
.check__keuze span {
  display: block;
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--blue-dark);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-variant-numeric: tabular-nums lining-nums;
  transition: background 200ms cubic-bezier(0.2, 0, 0, 1), border-color 200ms cubic-bezier(0.2, 0, 0, 1), color 200ms cubic-bezier(0.2, 0, 0, 1);
}
.check__keuze span:hover { border-color: var(--blue); }
.check__keuze input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.check__keuze input:focus-visible + span { box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.18); }

.check__uitkomst {
  margin-top: var(--s-6);
  padding: clamp(20px, 2.6vw, 32px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blue-dark);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.check__uitkomst-k {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--s-2);
}
.check__uitkomst h3 {
  margin: 0 0 var(--s-3);
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--blue-dark);
  text-wrap: balance;
}
.check__uitkomst p { margin: 0 0 var(--s-3); font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.check__uitkomst.is-leeg h3 { color: var(--muted); }
.check__feiten { display: grid; gap: 0; margin: var(--s-4) 0 0; }
.check__feiten .ws-pair { font-size: 14px; }
.check__uitkomst .check__noot { margin: var(--s-4) 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.check__feiten .ws-pair--uitleg { grid-template-columns: 6.5em minmax(0, 1fr); }
.check__feiten .ws-pair--uitleg .k { white-space: normal; }
.check__uitkomst .check__voortgang { margin: 0; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }

/* de brochure naast de check: blijft in beeld tijdens het invullen */
.check-host .brochure { margin-top: 0; position: sticky; top: calc(var(--header-h) + 24px); }
.brochure__check { margin: 0 0 var(--s-4); padding: 10px 12px; font-size: 13.5px; line-height: 1.5; color: var(--blue-dark); background: #fff; border-radius: var(--r-sm); }
.brochure__check strong { font-weight: 600; }

@media (max-width: 980px) {
  .check-host { grid-template-columns: 1fr; }
  .check-host .brochure { position: static; }
}
@media (max-width: 560px) {
  .check__keuze { padding-left: 0; }
  .check__keuze label { flex: 1 1 100%; }
  .check__vraag legend { font-size: 16px; }
}

/* ─── De stroom — Beleggingen tussen de andere bedrijven (beleggingen-concept.html, 29 sep) ─
   Bovenste rij: Ontwikkeling, Beleggingen (donker), Asset Management, met
   pijlen ertussen. Onder Beleggingen de leninggevers, ernaast de stichting.
   Blauw is werk en bezit (opleveren, opdracht, lening), oranje is geld dat
   terugkomt (huur, rente en aflossing). Op de telefoon onder elkaar, met een
   pijlteken voor elk label. */
.stroom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 164px minmax(0, 1.12fr) 164px minmax(0, 1fr);
  grid-template-rows: auto 56px auto 104px auto;
  margin-top: var(--s-7);
}
.stroom__blok {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(20, 40, 64, 0.04), 0 8px 24px rgba(20, 40, 64, 0.05);
}
.stroom__blok--o  { grid-row: 3; grid-column: 1; }
.stroom__blok--b  { grid-row: 3; grid-column: 3; color: #fff; border-color: transparent; background: linear-gradient(160deg, var(--blue-dark) 0%, var(--blue) 100%); box-shadow: 0 16px 40px rgba(20, 40, 64, 0.22); }
.stroom__blok--am { grid-row: 3; grid-column: 5; }
.stroom__blok--lg { grid-row: 5; grid-column: 3; background: var(--blue-soft); border-color: var(--blue-soft); box-shadow: none; }
.stroom__blok--st { grid-row: 5; grid-column: 5; background: #fff; }
.stroom__rol { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.stroom__blok--o .stroom__rol, .stroom__blok--am .stroom__rol, .stroom__blok--lg .stroom__rol, .stroom__blok--st .stroom__rol { color: var(--muted); }
.stroom__naam { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--blue-dark); }
.stroom__blok--b .stroom__naam { color: #fff; font-size: 20px; }
.stroom__blok p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.stroom__blok--b p { color: rgba(255, 255, 255, 0.82); }
.stroom__blok .ws-btn--link { margin-top: auto; padding-top: 6px; align-self: flex-start; font-size: 14px; }

/* Woonstaete Groep bovenaan: de lockup uit de header (merkteken, haarlijn, slogan) en de naam,
   met een lijn naar de drie bedrijven. De kolommen zijn 1fr 164px 1.12fr 164px 1fr, dus het midden van
   de buitenste kolom ligt op (100% - 328px) × 0,5 / 3,12 van de rand. */
.stroom__groep {
  grid-row: 1; grid-column: 1 / -1; justify-self: center;
  display: flex; align-items: center; gap: 22px;
  padding: 16px 26px;
  color: #fff;
  background: var(--blue-dark);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(20, 40, 64, 0.18);
}
.stroom__lockup { display: flex; align-items: center; gap: 12px; }
.stroom__lockup img { width: 46px; height: 46px; display: block; }
.stroom__lockup-lijn { width: 1px; height: 38px; background: rgba(255, 255, 255, 0.4); }
.stroom__lockup-slogan { font-size: 12.5px; line-height: 1.3; font-weight: 500; letter-spacing: 0.005em; color: #fff; }
.stroom__groep-tekst { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.stroom__groep-tekst strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.stroom__groep-tekst span { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-top: 1px; }
.stroom__tak { grid-row: 2; grid-column: 1 / -1; position: relative; }
.stroom__tak::before {
  content: ''; position: absolute; top: 50%; height: 1.5px; background: var(--blue);
  left: calc((100% - 328px) * 0.1603); right: calc((100% - 328px) * 0.1603);
}
.stroom__tak::after { content: ''; position: absolute; top: 0; left: calc(50% - 0.75px); width: 1.5px; height: 50%; background: var(--blue); }
.stroom__blok--o, .stroom__blok--b, .stroom__blok--am { position: relative; }
.stroom__blok--o::before, .stroom__blok--b::before, .stroom__blok--am::before {
  content: ''; position: absolute; top: -29px; left: calc(50% - 0.75px); width: 1.5px; height: 29px; background: var(--blue);
}

/* een foto boven in het blok, tot aan de rand: wat het bedrijf doet, in beeld */
.stroom__beeld {
  margin: -20px -22px 10px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background: var(--blue-soft);
}
.stroom__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.2, 0, 0, 1); }
.stroom__blok:hover .stroom__beeld img { transform: scale(1.03); }
.stroom__blok--b .stroom__beeld { position: relative; }
.stroom__blok--b .stroom__beeld::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 40, 64, 0) 55%, rgba(20, 40, 64, 0.55) 100%); }
/* het logo van de stichting in kleur, gecentreerd in een eigen vlak bovenin, zoals de foto's bij de bedrijven (net als het logovak op stichting.html) */
.stroom__logovak {
  margin: -20px -22px 12px;
  height: 116px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.stroom__logovak img { max-height: 50px; max-width: 150px; width: auto; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .stroom__beeld img { transition: none; } .stroom__blok:hover .stroom__beeld img { transform: none; } }

/* onderregel in een blok: een voorbeeld of een aanspreekpunt, onderaan uitgelijnd */
.stroom__onder { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.78); }
.stroom__onder strong { color: #fff; font-weight: 600; }
.stroom__persoon { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(31, 58, 95, 0.14); }
.stroom__persoon img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 22%; flex: none; }
.stroom__persoon span { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.stroom__persoon strong { display: block; color: var(--blue-dark); font-weight: 600; }

/* horizontale pijlen tussen de bedrijven */
.stroom__pijlen { grid-row: 3; align-self: center; display: flex; flex-direction: column; gap: 22px; padding: 0 12px; }
.stroom__pijlen--1 { grid-column: 2; }
.stroom__pijlen--2 { grid-column: 4; }
.stroom__pijl {
  position: relative;
  padding-bottom: 7px;
  font-size: 12.5px;
  line-height: 1.3;
  text-align: center;
  color: var(--ink-soft);
  border-bottom: 1.5px solid var(--blue);
}
.stroom__pijl::after {
  content: ''; position: absolute; right: -2px; bottom: -5.5px;
  border-left: 8px solid var(--blue); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
.stroom__pijl--geld { border-bottom-color: var(--orange); color: #B2521A; }
.stroom__pijl--terug::after { right: auto; left: -2px; border-left: 0; border-right: 8px solid var(--blue); }
.stroom__pijl--geld.stroom__pijl--terug::after { border-right-color: var(--orange); }

/* verticale pijlen tussen Beleggingen en de leninggevers */
.stroom__v { grid-row: 4; grid-column: 3; display: flex; justify-content: center; gap: 64px; padding: 10px 0; }
.stroom__vpijl { position: relative; width: 1.5px; background: var(--blue); }
.stroom__vpijl span {
  position: absolute; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-size: 12.5px; color: var(--ink-soft);
}
.stroom__vpijl--op span { right: 12px; }
.stroom__vpijl--op::after {
  content: ''; position: absolute; top: -2px; left: -3.75px;
  border-bottom: 8px solid var(--blue); border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
}
.stroom__vpijl--neer { background: var(--orange); }
.stroom__vpijl--neer span { left: 12px; color: #B2521A; }
.stroom__vpijl--neer::after {
  content: ''; position: absolute; bottom: -2px; left: -3.75px;
  border-top: 8px solid var(--orange); border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
}
.stroom__v-kop { display: none; }
/* de stippellijn van de leninggevers naar de stichting */
.stroom__stip { grid-row: 5; grid-column: 4; align-self: center; margin: 0 12px; padding-bottom: 7px; text-align: center; font-size: 12.5px; line-height: 1.3; color: var(--ink-soft); border-bottom: 1.5px dashed var(--blue); }

/* de legenda linksonder, op de lege plek naast de leninggevers */
.stroom__legenda { grid-row: 5; grid-column: 1; align-self: end; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.stroom__legenda span { display: flex; align-items: center; gap: 10px; }
.stroom__legenda i { width: 26px; height: 0; border-top: 1.5px solid var(--blue); }
.stroom__legenda i.geld { border-top-color: var(--orange); }
.stroom__legenda i.stip { border-top-style: dashed; }

/* de drie verhoudingen onder het schema */
.verhouding { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) clamp(28px, 4vw, 56px); margin-top: var(--s-8); }
.verhouding h3 { margin: 0 0 var(--s-2); font-size: 18px; font-weight: 600; color: var(--blue-dark); }
.verhouding p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }

/* compacte leningregels met een link, zonder de productdetails */
.leningen-kort { margin-top: var(--s-6); border-top: 1px solid var(--rule); }
.leningen-kort__rij { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: var(--s-2) var(--s-5); align-items: baseline; padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.leningen-kort__naam { font-size: 18px; font-weight: 600; color: var(--blue-dark); }
.leningen-kort__naam b { font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 400; font-size: 24px; margin-left: 8px; font-variant-numeric: tabular-nums lining-nums; }
.leningen-kort__rij p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }

@media (max-width: 980px) {
  .stroom { grid-template-columns: 1fr; grid-template-rows: none; gap: 0; }
  .stroom > * { grid-row: auto !important; grid-column: 1 !important; }
  .stroom__blok--o { order: 1; } .stroom__pijlen--1 { order: 2; } .stroom__blok--b { order: 3; }
  .stroom__pijlen--2 { order: 4; } .stroom__blok--am { order: 5; }
  .stroom__v { order: 6; } .stroom__blok--lg { order: 7; } .stroom__stip { order: 8; } .stroom__blok--st { order: 9; }
  .stroom__legenda { order: 10; margin-top: var(--s-5); }
  .stroom__tak { display: none; }
  .stroom__blok--o::before, .stroom__blok--b::before, .stroom__blok--am::before { display: none; }
  .stroom__groep { justify-self: stretch; flex-wrap: wrap; gap: 14px 18px; margin-bottom: var(--s-5); }
  .stroom__groep-tekst { padding-left: 0; border-left: 0; flex: 1 1 100%; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
  .stroom__beeld { aspect-ratio: 16 / 9; }
  .stroom__v-kop { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .stroom__pijlen, .stroom__v { flex-direction: column; gap: 4px; padding: 12px 0 12px 22px; margin-left: 20px; border-left: 1.5px solid var(--rule); align-items: flex-start; }
  .stroom__v { margin-top: var(--s-5); }
  .stroom__pijl, .stroom__stip { border: 0; padding: 0; text-align: left; margin: 0; }
  .stroom__pijl::after, .stroom__vpijl::after { display: none; }
  .stroom__pijl::before { content: '↓ '; color: var(--blue); }
  .stroom__pijl--terug::before { content: '↑ '; }
  .stroom__pijl--geld::before { color: var(--orange); }
  .stroom__vpijl { width: auto; background: none; }
  .stroom__vpijl span { position: static; transform: none; }
  .stroom__vpijl--op span::before { content: '↑ '; color: var(--blue); }
  .stroom__vpijl--neer span::before { content: '↓ '; color: var(--orange); }
  .stroom__stip { padding: 12px 0 12px 22px; margin-left: 20px; border-left: 1.5px dashed var(--blue); }
  .verhouding { grid-template-columns: 1fr; }
  .leningen-kort__rij { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════════════════════════
   Aanbod (aanbod.html, 30 sep 2026)
   De open ronde bovenaan in het bestaande filmblok met het schuine
   gegevensvlak, de volgende rondes in de bestaande blauwe kaarten, en de
   leningen in de bestaande rijen (tekst links, blauw vlak rechts) met als
   eigen element de rentekalender: één stip per uitbetaling.
   ═════════════════════════════════════════════════════════════════ */

/* de kop gaat zonder lijn over in het filmblok */
.page-head--aanbod { border-bottom: 0; padding-bottom: var(--s-6); }
.page-head--aanbod .crumbs__kop { color: var(--muted); }
.aanbod-open { padding-top: 0; }

/* het gegevensvlak: iets breder, zodat de twee knoppen naast elkaar passen */
@media (min-width: 1100px) {
  .lead-project--aanbod .lead-project__panel { width: min(470px, 44%); }
}
.lead-project--aanbod .lead-project__rate .num {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(38px, 3.4vw, 48px);
  letter-spacing: -0.02em;
}
.lead-project--aanbod .lead-project__acties .ws-btn { padding-left: 18px; padding-right: 18px; white-space: nowrap; }

/* ─── De volgende rondes: twee kaarten in plaats van drie ─────────── */
.komende--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.komende--twee .komende__beeld { aspect-ratio: 16 / 10; }
.komende--twee .komende__titel { font-size: clamp(24px, 2.2vw, 30px); }
.komende--twee .komende__spec { font-size: 14px; padding: 8px 0; }
.komende__impressie {
  position: absolute;
  left: 14px;
  bottom: 22px;
  z-index: 2;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 40, 64, 0.62);
  border-radius: var(--r-xs);
}
@media (max-width: 620px) { .komende--twee { grid-template-columns: 1fr; } }

/* ─── De leningen: de rijen uit main.css, met de feiten links en de kalender rechts ─ */
.lening-rij__feiten { margin: 0 0 var(--s-5); max-width: 46ch; }
.lening-rij__feiten div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--s-4);
  padding: 8px 0;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.5;
}
.lening-rij__feiten div:last-child { border-bottom: 1px solid var(--rule); }
.lening-rij__feiten dt { color: var(--muted); }
.lening-rij__feiten dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.lening-rij__vlak .lening-rij__rente .num {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 3.8vw, 52px);
  letter-spacing: -0.02em;
}
.lening-rij__vlak { border-radius: var(--r-md); }

/* De rentekalender: per jaar één regel, met een stip voor iedere uitbetaling
   en rechts het bedrag dat dat jaar oplevert. Gestreepte stippen zijn de
   jaren die er alleen zijn als de looptijd van de ronde langer is. Onderaan
   de aflossing, in één keer. */
.kalender { margin-top: var(--s-4); font-variant-numeric: tabular-nums lining-nums; }
.kalender__bij { margin: 0 0 var(--s-3); font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.kalender__bij strong { color: #fff; font-weight: 600; }
.kalender__rij {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 13.5px;
}
.kalender__rij:first-of-type { border-top: 0; }
.kalender__jaar { color: rgba(255, 255, 255, 0.62); }
.kalender__stippen { display: flex; gap: 6px; }
.kalender__stippen i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
}
.kalender__rij--mogelijk .kalender__stippen i { background: none; border: 1.5px solid rgba(255, 255, 255, 0.55); }
.kalender__rij--mogelijk .kalender__jaar, .kalender__rij--mogelijk .kalender__som { color: rgba(255, 255, 255, 0.55); }
.kalender__som { color: #fff; font-weight: 500; text-align: right; white-space: nowrap; }
.kalender__noot { grid-column: 1 / -1; margin: 0; padding: 4px 0 2px; font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }
.kalender__eind {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-4);
  margin-top: var(--s-3);
  padding: var(--s-4) 0 0;
  border-top: 2px solid var(--orange);
}
.kalender__eind span { font-size: 13.5px; color: rgba(255, 255, 255, 0.72); }
.kalender__eind span strong { display: block; font-size: 14.5px; color: #fff; font-weight: 600; }
.kalender__eind b {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}
.kalender__legenda { margin: var(--s-4) 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
.kalender__legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #fff; vertical-align: -1px; margin-right: 6px; }
.kalender__legenda i.open { background: none; border: 1.5px solid rgba(255, 255, 255, 0.55); }
@media (max-width: 480px) {
  .kalender__rij { grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--s-3); font-size: 12.5px; }
  .kalender__stippen { gap: 4px; }
  .kalender__stippen i { width: 7px; height: 7px; }
}

/* kosten en voorwaarden: de feitenrijen onder de kop, op leesbreedte */
.voorwaarden { max-width: 880px; margin-top: var(--s-7); border-top: 1px solid var(--rule); }
.voorwaarden .ws-pair--tekst:last-of-type { border-bottom: 1px solid var(--rule); }

/* ─── Aanbod, drie richtingen ter keuze (aanbod-a/b/c.html, 30 sep 2026) ─
   A het loket: één rij per ronde en de cijfers uit het eigen boek.
   B één ronde, één verhaal: de open ronde als dossier, de rest als strook.
   C de ladder: de leningen als kolommen en de benchmark. */

/* A · het loket */
.loket { margin-top: var(--s-7); border-top: 1px solid var(--rule); }
.loket__kop, .loket__rij {
  display: grid;
  grid-template-columns: 26px minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .7fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, .9fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.loket__kop { padding: 10px 0; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.loket__rij { font-size: 15px; color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
.loket__rij--open { background: linear-gradient(90deg, var(--orange-soft), transparent 60%); margin: 0 calc(-1 * var(--s-4)); padding-left: var(--s-4); padding-right: var(--s-4); }
.loket__stip { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); justify-self: center; }
.loket__rij--open .loket__stip { background: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
.loket__project strong { display: block; font-size: 17px; font-weight: 600; color: var(--blue-dark); }
.loket__project span { font-size: 13.5px; color: var(--muted); }
.loket__rente { font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-size: 28px; line-height: 1; color: var(--blue-dark); }
.loket__rente small { font-family: var(--font); font-size: 12px; color: var(--muted); margin-left: 4px; }
.loket__groep { padding: 24px 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.loket__leeg { padding: 16px 0; font-size: 15px; color: var(--muted); border-bottom: 1px solid var(--rule); }
@media (max-width: 980px) {
  .loket__kop { display: none; }
  .loket__rij { grid-template-columns: 26px minmax(0, 1fr) auto; row-gap: 6px; }
  .loket__rij > :nth-child(n+4):not(.loket__knop) { grid-column: 2; font-size: 14px; }
  .loket__rij > :nth-child(n+4):not(.loket__knop)::before { content: attr(data-k) ': '; color: var(--muted); }
  .loket__knop { grid-column: 2; justify-self: start; margin-top: 6px; }
  .loket__rente { grid-column: 3 !important; grid-row: 1; }
  .loket__rente::before { content: none !important; }
}

/* het eigen boek: cijfers met datum */
.boek { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: var(--s-7); background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; }
.boek > div { background: var(--paper); padding: var(--s-5); }
.boek b { display: block; font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 400; font-size: clamp(30px, 3vw, 44px); line-height: 1; color: var(--blue-dark); margin-bottom: 8px; font-variant-numeric: tabular-nums lining-nums; }
.boek span { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.boek__noot { margin: var(--s-3) 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 720px) { .boek { grid-template-columns: 1fr 1fr; } }

/* B · de volgende rondes als strook */
.strook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.strook__item { padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--paper); display: flex; flex-direction: column; gap: 8px; }
.strook__item--stil { border-style: dashed; background: transparent; }
.strook__item h3 { margin: 0; font-size: 20px; font-weight: 600; color: var(--blue-dark); }
.strook__item p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.strook__item .ws-btn { margin-top: auto; align-self: flex-start; }
.strook__rente { font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-size: 30px; line-height: 1; color: var(--blue-dark); }
.strook__rente small { font-family: var(--font); font-size: 13px; color: var(--muted); margin-left: 6px; }
@media (max-width: 880px) { .strook { grid-template-columns: 1fr; } }
.zekerheid-kort { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6) clamp(32px, 4vw, 72px); align-items: start; }
@media (max-width: 880px) { .zekerheid-kort { grid-template-columns: 1fr; } }

/* C · de ladder */
.ladder { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, .8fr); gap: var(--s-5); margin-top: var(--s-7); align-items: start; }
.ladder__kolom { padding: clamp(22px, 2.4vw, 34px); border-radius: var(--r-md); color: #fff; background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%); box-shadow: 0 18px 42px rgba(10, 22, 38, 0.22); }
.ladder__kolom--stil { color: var(--ink-soft); background: var(--paper); border: 1px solid var(--rule); box-shadow: none; }
.ladder__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: var(--s-4); }
.ladder__naam { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.ladder__rente { display: flex; align-items: baseline; gap: 10px; padding-bottom: var(--s-3); border-bottom: 2px solid var(--orange); }
.ladder__rente b { font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 400; font-size: clamp(44px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.ladder__rente span { font-size: 13.5px; opacity: .75; }
.ladder__kolom--stil .ladder__rente { border-bottom-color: var(--rule); }
.ladder__kolom--stil .ladder__naam, .ladder__kolom--stil .ladder__rente b { color: var(--blue-dark); }
.ladder__feiten { margin: var(--s-4) 0 0; }
.ladder__feiten div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--s-3); padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.13); font-size: 14px; line-height: 1.5; }
.ladder__kolom--stil .ladder__feiten div { border-top-color: var(--rule); }
.ladder__feiten dt { opacity: .65; }
.ladder__feiten dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.ladder__kolom .kalender { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid rgba(255, 255, 255, 0.13); }
.ladder__kolom .kalender__rij { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 5px 0; font-size: 12.5px; }
.ladder__kolom .kalender__stippen { gap: 4px; } .ladder__kolom .kalender__stippen i { width: 7px; height: 7px; }
.ladder__kolom .kalender__eind b { font-size: clamp(24px, 2.2vw, 30px); }
.ladder__acties { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.ladder__kolom--stil p { margin: var(--s-4) 0 0; font-size: 14.5px; line-height: 1.55; }
@media (max-width: 980px) { .ladder { grid-template-columns: 1fr; } }

/* de benchmark: vier staven, twee grijs, twee van ons */
.bench { margin-top: var(--s-7); padding: clamp(24px, 3vw, 40px); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.bench__titel { margin: 0 0 var(--s-5); font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 400; font-size: clamp(20px, 2vw, 26px); color: var(--blue-dark); }
.bench__grafiek { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 48px); align-items: end; height: 260px; padding: 0 var(--s-4); border-bottom: 1px solid var(--rule); }
.bench__staaf { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.bench__staaf b { font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 400; font-size: clamp(20px, 2vw, 28px); line-height: 1; color: var(--blue-dark); margin-bottom: 8px; font-variant-numeric: tabular-nums lining-nums; }
.bench__staaf i { display: block; width: 100%; max-width: 140px; height: var(--h); background: var(--rule); border-radius: var(--r-xs) var(--r-xs) 0 0; }
.bench__staaf--rust i { background: var(--blue); } .bench__staaf--opbouw i { background: var(--orange); }
.bench__staaf--rust b { color: var(--blue); } .bench__staaf--opbouw b { color: var(--orange); }
.bench__labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 3vw, 48px); padding: var(--s-3) var(--s-4) 0; text-align: center; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.bench__labels strong { display: block; color: var(--blue-dark); font-weight: 600; }
.bench__noot { margin: var(--s-5) 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); max-width: 90ch; }
.bench__noot mark { background: var(--orange-soft); color: var(--orange); padding: 0 4px; border-radius: 3px; }
@media (max-width: 560px) { .bench__grafiek { height: 200px; gap: 12px; } .bench__labels { gap: 12px; font-size: 12px; } }

/* ─── Aanbod, tweede serie richtingen (aanbod-d/e/f.html, 1 okt 2026) ─
   Na "te leeg en saai": meer beeld en per pagina een eigen element.
   D de kaart (alle projecten op de kaart, klikbaar), E het magazine
   (fotomozaïek, rekenhulp, statementband), F het verhaal in stappen
   (vastgepind beeld dat meewisselt met de tekst). */

/* D · de kaart op de donkere plaat */
.kaart-host { background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%); color: #fff; padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 5vw, 80px); }
.kaart-host .section-eyebrow { color: var(--orange); }
.kaart-host .section-title, .kaart-host .section-lede { color: #fff; }
.kaart-host .section-lede { color: rgba(255, 255, 255, 0.78); }
.kaart { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: var(--s-6); }
.kaart__svg { display: block; width: min(100%, 440px); height: auto; margin: 0 auto; overflow: visible; }
.kaart__svg .reis__land { fill: rgba(255, 255, 255, 0.08); stroke: rgba(255, 255, 255, 0.35); stroke-width: .6; }
.kaart__svg .reis__provincie { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.28); stroke-width: .5; }
.kaart__svg .reis__provincie.is-actief { fill: rgba(255, 255, 255, 0.14); }
.kaart__stip { fill: rgba(255, 255, 255, 0.55); stroke: var(--blue-dark); stroke-width: 1.5; cursor: pointer; transition: r var(--t-base) var(--ease), fill var(--t-base) var(--ease); }
.kaart__stip--volgt { fill: #fff; }
.kaart__stip--open { fill: var(--orange); stroke: var(--orange); }
.kaart__stip.is-actief { r: 7; stroke: #fff; stroke-width: 2; }
.kaart__puls { fill: none; stroke: var(--orange); stroke-width: 1.2; opacity: .8; transform-origin: center; transform-box: fill-box; animation: kaart-puls 2.6s var(--ease) infinite; pointer-events: none; }
@keyframes kaart-puls { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kaart__puls { animation: none; opacity: .4; } }
.kaart__label { font-family: var(--font); font-size: 7px; font-weight: 600; letter-spacing: .04em; fill: #fff; pointer-events: none; }
.kaart__label--stil { fill: rgba(255, 255, 255, 0.6); font-weight: 500; }
.kaart__legenda { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; margin-top: var(--s-4); font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.kaart__legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; background: rgba(255, 255, 255, 0.55); }
.kaart__legenda i.open { background: var(--orange); } .kaart__legenda i.volgt { background: #fff; }

/* het paneel: één project tegelijk */
.kaart__paneel { background: var(--paper); color: var(--ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(10, 22, 38, 0.35); }
.kaart__project { display: none; }
.kaart__project.is-actief { display: block; }
.kaart__beeld { aspect-ratio: 16 / 9; background: var(--blue-soft); overflow: hidden; }
.kaart__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kaart__beeld--leeg { display: grid; place-items: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kaart__body { padding: clamp(20px, 2.4vw, 32px); }
.kaart__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: var(--s-3); }
.kaart__kop h3 { margin: 0; font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.015em; color: var(--blue-dark); }
.kaart__kop .ws-tag { margin-left: auto; }
.kaart__body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.kaart__feiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-4) 0; padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.kaart__feiten div { font-size: 13px; color: var(--muted); line-height: 1.4; }
.kaart__feiten b { display: block; font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 400; font-size: clamp(20px, 2vw, 26px); color: var(--blue-dark); margin-bottom: 2px; font-variant-numeric: tabular-nums lining-nums; }
.kaart__acties { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
/* de lijst onder de kaart: alle projecten als knoppen */
.kaart__lijst { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-6); }
.kaart__lijst button { font: inherit; font-size: 13.5px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.kaart__lijst button:hover, .kaart__lijst button.is-actief { background: #fff; color: var(--blue-dark); border-color: #fff; }
.kaart__lijst button.is-open { border-color: var(--orange); }
.kaart__lijst button.is-open.is-actief { background: var(--orange); border-color: var(--orange); color: #fff; }
@media (max-width: 880px) { .kaart { grid-template-columns: 1fr; } .kaart__feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* gerealiseerd: een rij kleine tegels, 3:2 */
.gerealiseerd { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-6); }
.gerealiseerd figure { margin: 0; }
.gerealiseerd img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); filter: saturate(.85); transition: filter var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.gerealiseerd figure:hover img { filter: none; transform: translateY(-2px); }
.gerealiseerd figcaption { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.gerealiseerd figcaption b { display: block; color: var(--blue-dark); font-weight: 600; }
@media (max-width: 980px) { .gerealiseerd { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gerealiseerd { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* E · het magazine */
.mozaiek { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 14vw, 220px); gap: var(--s-3); margin-top: var(--s-6); }
.mozaiek figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--blue-soft); }
.mozaiek img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow) var(--ease); }
.mozaiek figure:hover img { transform: scale(1.03); }
.mozaiek figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px; font-size: 13px; color: #fff; background: linear-gradient(180deg, transparent, rgba(20, 40, 64, 0.72)); }
.mozaiek .m-groot { grid-column: span 2; grid-row: span 2; }
.mozaiek .m-breed { grid-column: span 2; }
@media (max-width: 720px) { .mozaiek { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 140px; } .mozaiek .m-groot { grid-column: span 2; } }

/* de donkere band met rekenhulp en kalender naast elkaar */
.band { background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%); color: #fff; padding: clamp(48px, 6vw, 96px) 0; }
.band .section-eyebrow { color: var(--orange); } .band .section-title { color: #fff; } .band .section-lede { color: rgba(255, 255, 255, 0.78); }
.band__twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); margin-top: var(--s-6); align-items: start; }
.band .rekenhulp { padding: 0; }
.band .kalender { margin-top: 0; }
@media (max-width: 880px) { .band__twee { grid-template-columns: 1fr; } }

/* de statementband: luchtfoto met blauwe sluier, serif-statement en drie cijfers */
.statement { position: relative; min-height: clamp(420px, 56vw, 640px); display: grid; align-items: end; color: #fff; overflow: hidden; }
.statement img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.statement::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 40, 64, 0.25) 0%, rgba(20, 40, 64, 0.82) 100%); }
.statement .container { position: relative; z-index: 1; padding-top: clamp(80px, 12vw, 160px); padding-bottom: clamp(40px, 5vw, 72px); }
.statement__tekst { font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 400; font-size: clamp(30px, 4.2vw, 56px); line-height: 1.1; letter-spacing: -.015em; max-width: 22ch; margin: 0; text-wrap: balance; }
.statement__cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, 0.3); max-width: 760px; }
.statement__cijfers b { display: block; font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums lining-nums; }
.statement__cijfers span { font-size: 14px; color: rgba(255, 255, 255, 0.8); line-height: 1.45; }
@media (max-width: 560px) { .statement__cijfers { grid-template-columns: 1fr; gap: var(--s-4); } }

/* fototegels voor wat volgt: beeld met tekstvlak onderin */
.tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.tegel { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden; color: #fff; text-decoration: none; background: var(--blue-dark); }
.tegel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.tegel:hover img { transform: scale(1.03); }
.tegel__vlak { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2.4vw, 32px); background: linear-gradient(180deg, transparent, rgba(20, 40, 64, 0.88) 55%); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: end; }
.tegel__vlak h3 { margin: 6px 0 4px; font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); color: #fff; }
.tegel__vlak p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); max-width: 40ch; }
.tegel__rente { text-align: right; font-size: 13px; color: rgba(255, 255, 255, 0.8); }
.tegel__rente b { display: block; font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 400; font-size: clamp(34px, 3.4vw, 48px); line-height: 1; color: #fff; }
@media (max-width: 720px) { .tegels { grid-template-columns: 1fr; } .tegel { aspect-ratio: 4 / 3; } .tegel__vlak { grid-template-columns: 1fr; } .tegel__rente { text-align: left; } }

/* F · het verhaal in stappen: vastgepind beeld links, stappen rechts */
.verhaal { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: var(--s-6); }
.verhaal__pin { position: sticky; top: calc(var(--header-h, 84px) + 24px); }
.verhaal__beeld { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--blue-soft); box-shadow: 0 24px 60px rgba(20, 40, 64, 0.18); }
.verhaal__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 600ms var(--ease); }
.verhaal__beeld img.is-actief { opacity: 1; }
.verhaal__teller { display: flex; align-items: center; gap: 14px; margin-top: var(--s-4); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.verhaal__teller i { flex: 1; height: 2px; background: var(--rule); position: relative; }
.verhaal__teller i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 20%); background: var(--orange); transition: width 400ms var(--ease); }
.verhaal__stap { padding: clamp(40px, 8vw, 120px) 0; border-top: 1px solid var(--rule); }
.verhaal__stap:first-child { border-top: 0; padding-top: 0; }
.verhaal__stap .section-eyebrow { margin-bottom: var(--s-3); }
.verhaal__stap h3 { margin: 0 0 var(--s-4); font-size: clamp(26px, 3vw, 40px); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; color: var(--blue-dark); max-width: 22ch; text-wrap: balance; }
.verhaal__stap p { margin: 0 0 var(--s-3); font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 52ch; }
.verhaal__stap .kalender { color: #fff; background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue) 100%); border-radius: var(--r-md); padding: clamp(20px, 2.4vw, 30px); }
.verhaal__getal { display: flex; align-items: baseline; gap: 12px; margin: var(--s-3) 0 var(--s-4); }
.verhaal__getal b { font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 400; font-size: clamp(54px, 6vw, 84px); line-height: 1; letter-spacing: -.02em; color: var(--blue-dark); font-variant-numeric: tabular-nums lining-nums; }
.verhaal__getal span { font-size: 15px; color: var(--muted); max-width: 22ch; line-height: 1.4; }
@media (max-width: 880px) {
  .verhaal { grid-template-columns: 1fr; }
  .verhaal__pin { position: sticky; top: calc(var(--header-h, 64px) + 8px); z-index: 2; background: var(--offwhite); padding-bottom: 8px; }
  .verhaal__beeld { aspect-ratio: 16 / 9; }
  .verhaal__stap { padding: var(--s-7) 0; }
}
/* F: de kalender in een stap houdt zijn eigen tekst, niet die van de stap */
.verhaal__stap .kalender p { max-width: none; margin: 0; }
.verhaal__stap .kalender__bij { margin: 0 0 var(--s-3); font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.verhaal__stap .kalender__noot { padding: 4px 0 2px; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.55); }
.verhaal__stap .kalender__legenda { margin-top: var(--s-4); font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
/* E: de cijfers op de statementband blijven op één regel */
.statement__cijfers { max-width: 880px; }
.statement__cijfers b { font-size: clamp(26px, 3vw, 40px); white-space: nowrap; }

/* ─── Aanbod G: algemeen én actueel (aanbod-g.html, 1 okt 2026) ─
   Eerst wat wij aanbieden (vier stappen en de twee leningen), dan een
   duidelijk gemarkeerd blok met het actuele aanbod. */
.status-regel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: var(--s-5); padding: 10px 18px 10px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); font-size: 15px; color: var(--ink-soft); text-decoration: none; transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.status-regel:hover { border-color: var(--orange); transform: translateY(-2px); }
.status-regel i { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
.status-regel b { color: var(--blue-dark); font-weight: 600; }
.status-regel span.pijl { color: var(--blue); }
.aanbieden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; margin-top: var(--s-6); }
.aanbieden .pad { margin-top: var(--s-4); }
.twee-leningen { display: grid; gap: var(--s-4); }
.twee-leningen .ladder__kolom--stil { padding: clamp(20px, 2.2vw, 28px); }
.twee-leningen .ladder__rente b { font-size: clamp(36px, 3.4vw, 48px); }
.twee-leningen .ladder__kolom--stil.is-open { border-color: var(--orange); box-shadow: 0 1px 2px rgba(20, 40, 64, 0.04), 0 14px 36px rgba(20, 40, 64, 0.08); }
.twee-leningen .ladder__feiten div { grid-template-columns: 84px minmax(0, 1fr); padding: 6px 0; font-size: 14px; }
.actueel-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: var(--s-3); }
.actueel-kop .ws-tag--lg { font-size: 14px; padding: 8px 14px; }
.actueel-kop time { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 880px) { .aanbieden { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .status-regel { display: flex; align-items: flex-start; border-radius: var(--r-md); } .status-regel i { flex: 0 0 auto; margin-top: 7px; } .status-regel .pijl { display: none; } }

/* ─── Projectpagina met filmhero die doorloopt in de rekenhulp (aanbod/zutphen.html, 1 okt 2026) ─
   Dezelfde hero als de homepage (video, sluier die onderaan in blue-dark eindigt); de donkere
   band eronder begint in dezelfde kleur, zodat film en rekenhulp één vlak lijken. */
.hero--project { min-height: 82vh; padding-top: 140px; }
.hero--project .crumbs, .hero--project .crumbs a { color: rgba(255, 255, 255, 0.7); }
.hero--project .crumbs a:hover { color: #fff; }
.hero--project .crumbs span { color: rgba(255, 255, 255, 0.35); }
.hero--project .hero__title { max-width: 20ch; }
.hero--project .hero__lede { max-width: 60ch; }
.band--na-hero { padding-top: var(--s-5); background: linear-gradient(180deg, var(--blue-dark) 0%, var(--blue-dark) 28%, var(--blue) 100%); }
.band--na-hero .kernstrook { margin: 0 0 var(--s-8); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
.band--na-hero .kernstrook > div { border-left-color: rgba(255, 255, 255, 0.16); }
.band--na-hero .kernstrook dd { color: rgba(255, 255, 255, 0.78); }
.band--na-hero .kernstrook dd b { color: #fff; }
@media (max-width: 880px) { .band--na-hero .kernstrook > div:nth-child(n+3) { border-top-color: rgba(255, 255, 255, 0.16); } .hero--project { min-height: 70vh; padding-top: 120px; } }

/* Zutphen, band na de hero: kalender verder naar rechts en rustiger.
   De twaalf stippen per jaar worden een dunne strook van twaalf vakjes;
   de open jaren zijn omlijnd. De kalender staat tegen de rechterrand. */
.band--na-hero .band__twee { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); justify-content: space-between; gap: clamp(40px, 8vw, 140px); }
.band--na-hero .kalender { justify-self: end; width: 100%; }
.band--na-hero .kalender__rij { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 9px 0; }
.band--na-hero .kalender__stippen { gap: 3px; }
.band--na-hero .kalender__stippen i { width: auto; flex: 1 1 0; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.55); }
.band--na-hero .kalender__rij--mogelijk .kalender__stippen i { background: none; border: 1px solid rgba(255, 255, 255, 0.28); }
.band--na-hero .kalender__legenda i { width: 14px; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.55); vertical-align: 0; }
.band--na-hero .kalender__legenda i.open { background: none; border: 1px solid rgba(255, 255, 255, 0.4); }
@media (max-width: 880px) { .band--na-hero .band__twee { grid-template-columns: 1fr; } .band--na-hero .kalender { justify-self: stretch; } }

/* Kalender, overal: vakjes in plaats van stippen (zelfde beeld als op Zutphen).
   Vaste breedte, zodat Rust (12 per jaar) en Opbouw (4 per jaar) dezelfde maat houden. */
.kalender__stippen { gap: 3px; }
.kalender__stippen i,
.band--na-hero .kalender__stippen i { width: 18px; height: 6px; flex: 0 0 auto; border-radius: 2px; background: rgba(255, 255, 255, 0.55); }
.kalender__rij--mogelijk .kalender__stippen i,
.band--na-hero .kalender__rij--mogelijk .kalender__stippen i { background: none; border: 1px solid rgba(255, 255, 255, 0.28); }
.kalender__legenda i { width: 14px; height: 6px; border-radius: 2px; background: rgba(255, 255, 255, 0.55); vertical-align: 0; }
.kalender__legenda i.open { background: none; border: 1px solid rgba(255, 255, 255, 0.4); }
@media (max-width: 480px) { .kalender__stippen i, .band--na-hero .kalender__stippen i { width: 12px; height: 5px; } }

/* Beleggingen: hero met de mensen achter het bedrijf (concept, 1 okt).
   Lichte page-head; links de tekst met kleine koppen van de mede-eigenaren,
   rechts het gebouw met daaroverheen het portret van het aanspreekpunt. */
.mensenhero { padding-bottom: 0; border-bottom: 0; overflow: hidden; }
.mensenhero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.mensenhero__tekst { padding-bottom: clamp(40px, 5vw, 72px); }
.mensenhero__tekst .page-head__title { max-width: 20ch; }
.mensenhero__tekst .page-head__lede { max-width: 56ch; }
.mensenhero__wie { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.mensenhero__koppen { display: flex; flex: none; }
.mensenhero__koppen img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 2px solid var(--paper); box-shadow: 0 1px 0 var(--rule); margin-left: -10px; }
.mensenhero__koppen img:first-child { margin-left: 0; }
.mensenhero__wie p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.mensenhero__wie a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.mensenhero__wie a:hover { border-bottom-color: var(--orange); }
.mensenhero__beeld { position: relative; align-self: end; min-height: 520px; }
.mensenhero__gebouw { position: absolute; right: 0; top: 0; width: 78%; aspect-ratio: 4 / 3; margin: 0; border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; }
.mensenhero__gebouw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mensenhero__gebouw figcaption { position: absolute; right: 0; bottom: 0; padding: 10px 14px; background: rgba(20, 40, 64, 0.72); color: #fff; font-size: 13px; backdrop-filter: blur(6px); border-radius: var(--r-xs) 0 0 0; text-align: right; }
.mensenhero__gebouw figcaption span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 2px; }
.mensenhero__persoon { position: absolute; left: 0; bottom: 0; width: 46%; margin: 0; border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; box-shadow: 0 24px 60px rgba(20, 40, 64, 0.22); background: var(--blue-dark); }
.mensenhero__persoon img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; display: block; }
.mensenhero__persoon figcaption { padding: 14px 16px 16px; color: rgba(255, 255, 255, 0.78); font-size: 13px; line-height: 1.4; }
.mensenhero__persoon figcaption span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 4px; }
.mensenhero__persoon figcaption strong { display: block; color: #fff; font-size: 15px; font-weight: 600; }
@media (max-width: 880px) {
  .mensenhero__grid { grid-template-columns: 1fr; }
  .mensenhero__tekst { padding-bottom: var(--s-6); }
  .mensenhero__beeld { min-height: 0; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-3); align-items: end; }
  .mensenhero__gebouw, .mensenhero__persoon { position: relative; width: auto; }
  .mensenhero__gebouw { aspect-ratio: 3 / 4; border-radius: var(--r-md) var(--r-md) 0 0; }
  .mensenhero__persoon { box-shadow: none; }
}

/* ─── Zekerheden: lichte kop met het blauwe filmvlak ernaast ─────────────
   De tekst staat op het papier, rechts een blauw vlak van ruim een derde dat
   tot de schermrand loopt. De film ligt als kaart óver de linkerrand van dat
   vlak, de lichte zijde in — verwant aan .split, geen kopie van de filmhero. */
.zekerhero {
  position: relative;
  background: linear-gradient(180deg, var(--paper) 0%, var(--offwhite) 100%);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-7) 0 0;
}
.zekerhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 128px);
  align-items: stretch;
}
.zekerhero__tekst { padding: var(--s-8) 0 var(--s-9); align-self: center; }
.zekerhero__tekst .crumbs { margin-bottom: var(--s-6); }
.zekerhero__tekst .page-head__title { max-width: 16ch; }
.zekerhero__tekst .page-head__lede { max-width: 58ch; }
.zekerhero__vlak {
  position: relative;
  margin-right: calc(50% - 50vw);
  min-height: 600px;
  background: linear-gradient(160deg, var(--blue-dark) 0%, var(--blue) 100%);
  border-radius: var(--r-md) 0 0 0;
  color: #fff;
}
.zekerhero__film {
  position: absolute;
  top: 50%;
  left: calc(-1 * clamp(48px, 7vw, 128px));
  width: calc(100% + clamp(48px, 7vw, 128px) - clamp(24px, 4vw, 64px));
  max-width: 760px;
  margin: 0;
  transform: translateY(-58%);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--blue-dark);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 28px 64px rgba(20, 40, 64, 0.34), 0 4px 14px rgba(20, 40, 64, 0.18);
}
.zekerhero__film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.zekerhero__onderschrift {
  position: absolute;
  left: clamp(24px, 3vw, 48px);
  right: clamp(24px, 4vw, 64px);
  bottom: clamp(24px, 3vw, 40px);
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
}
.zekerhero__onderschrift::before { content: ''; flex: 0 0 28px; height: 1px; background: var(--orange); align-self: center; }
.zekerhero__onderschrift b { color: #fff; font-weight: 600; }
@media (max-width: 880px) {
  .zekerhero { padding-top: var(--s-6); }
  .zekerhero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .zekerhero__tekst { padding: var(--s-5) 0 var(--s-7); }
  .zekerhero__vlak {
    margin-left: calc(50% - 50vw);
    min-height: 0;
    border-radius: 0;
    padding: clamp(20px, 5vw, 32px) clamp(20px, 4vw, 48px) clamp(20px, 5vw, 32px);
  }
  .zekerhero__film { position: static; transform: none; width: auto; max-width: none; left: auto; }
  .zekerhero__onderschrift { position: static; margin-top: var(--s-4); }
}

/* ─── Aanbod in drie tegels (homepage) — open ronde, volgende ronde, in
   voorbereiding. Dezelfde logica als de aanbodpagina, zonder carrousel. */
.aanbod-tegels__kop { max-width: 760px; margin-bottom: var(--s-7); }
.aanbod-tegels__kop .section-lede { margin-bottom: 0; }
.aanbod-tegels .ws-card__cover { position: relative; }
.ws-card__cover-label {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 40, 64, 0.72);
  padding: 5px 9px;
  border-radius: var(--r-xs);
}
.aanbod-tegels__voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.aanbod-tegels__voet p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); max-width: 60ch; }
.aanbod-tegels__voet p a { color: var(--blue); }
@media (max-width: 980px) { .aanbod-tegels .cards-grid--3 { grid-template-columns: minmax(0, 1fr); } }

/* ─── Pijplijn op Ontwikkeling — negen projecten als tegels met ontwikkelstatus.
   Dit is de andere kant van de splitsing: Aanbod toont leningen, Ontwikkeling
   toont wat wij realiseren. Pas als een project een lening krijgt, verhuist het
   naar het aanbod; de tegel verwijst daar dan naar. */
.pijplijn__kop { max-width: 760px; margin-bottom: var(--s-6); }
.pijplijn__kop .section-lede { margin-bottom: 0; }
/* De fasen als genummerde lijn, in de maat van .route op dezelfde pagina: haarlijn, stip, nummer. */
.pijplijn__fasen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); margin: var(--s-7) 0 var(--s-7); padding: 0; list-style: none; }
.pijplijn__fase { position: relative; padding-top: var(--s-5); }
.pijplijn__fase::before { content: ''; position: absolute; top: 5px; left: 0; right: calc(-1 * clamp(16px, 2vw, 32px)); height: 1px; background: var(--rule); }
.pijplijn__fase:last-child::before { right: 0; }
.pijplijn__fase::after { content: ''; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--offwhite); border: 1px solid var(--rule); box-sizing: border-box; }
.pijplijn__fase--nu::after { background: var(--blue-dark); border-color: var(--blue-dark); }
.pijplijn__fase--klaar::after { background: var(--success); border-color: var(--success); }
.pijplijn__fase b { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--orange); margin-bottom: 6px; }
.pijplijn__fase span { display: block; font-size: 15px; font-weight: 500; color: var(--blue-dark); line-height: 1.35; }
.pijplijn__fase small { display: block; font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
/* Op de tegel: vijf smalle segmenten en de fasenaam als spec-label. Geen gekleurde pil. */
.fasebalk { display: block; margin: 0 0 var(--s-3); }
.fasebalk__seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.fasebalk__seg i { display: block; height: 3px; border-radius: 2px; background: var(--rule); }
.fasebalk[data-fase="1"] .fasebalk__seg i:nth-child(-n+1),
.fasebalk[data-fase="2"] .fasebalk__seg i:nth-child(-n+2),
.fasebalk[data-fase="3"] .fasebalk__seg i:nth-child(-n+3),
.fasebalk[data-fase="4"] .fasebalk__seg i:nth-child(-n+4),
.fasebalk[data-fase="5"] .fasebalk__seg i:nth-child(-n+5) { background: var(--blue-dark); }
.fasebalk[data-fase="5"] .fasebalk__seg i { background: var(--success); }
.fasebalk__label { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.fasebalk__label small { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; color: var(--muted); }
@media (max-width: 980px) { .pijplijn__fasen { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-5); } .pijplijn__fase:nth-child(3)::before { right: 0; } }
@media (max-width: 600px) { .pijplijn__fasen { grid-template-columns: minmax(0, 1fr); } .pijplijn__fase::before { display: none; } }
.pijplijn__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.pijplijn .ws-card__cover { position: relative; }
.pijplijn .ws-card__cover--leeg { display: grid; place-items: center; background: linear-gradient(160deg, var(--blue-dark), var(--blue)); color: rgba(255,255,255,.6); font-size: 13px; text-align: center; padding: 0 var(--s-5); }
.pijplijn .ws-card__cover-label { position: absolute; right: 12px; bottom: 12px; z-index: 1; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(20,40,64,.72); padding: 5px 9px; border-radius: var(--r-xs); }
.pijplijn .ws-card-title { margin: var(--s-3) 0 2px; }
.pijplijn__plaats { display: block; font-size: 13.5px; color: var(--muted); }
.pijplijn__horizon { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-3); font-size: 13.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
.pijplijn__horizon::before { content: ''; width: 20px; height: 1px; background: var(--orange); }
.pijplijn__cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-4) 0; padding: var(--s-4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pijplijn__cijfers dt { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 4px; }
.pijplijn__cijfers dd { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.pijplijn__cijfers dd b { display: block; font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--blue-dark); margin-bottom: 2px; }
.pijplijn .ws-card-cta { margin-top: auto; }   /* "Bekijk het project": alleen op een kaart met eigen pagina (9 nov 2026), onderaan */
.pijplijn__lening { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0; }
.pijplijn__lening a { color: var(--blue); font-weight: 500; }
.pijplijn__brug { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: center; margin-top: var(--s-7); padding: var(--s-5) var(--s-6); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); }
.pijplijn__brug p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); max-width: 70ch; }
.pijplijn__brug p b { color: var(--ink); font-weight: 600; }
.pijplijn__noot { margin: var(--s-5) 0 0; font-size: 13px; color: var(--muted); max-width: 74ch; }
@media (max-width: 980px) { .pijplijn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pijplijn__brug { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .pijplijn__grid { grid-template-columns: minmax(0, 1fr); } }

/* ─── Bouwvoortgang (projectpagina) — de bouw in stappen, chronologisch, eigen
   foto's van de bouwplaats. Genummerd en gedateerd; klik opent het beeld groot. */
.bouwvoortgang { margin-top: var(--s-7); border-top: 1px solid var(--rule); }
.bouwvoortgang__stap { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: var(--s-6) clamp(28px, 5vw, 72px); padding: var(--s-6) 0; border-bottom: 1px solid var(--rule); margin: 0; }
.bouwvoortgang__kop { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.bouwvoortgang__nr { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--orange); }
.bouwvoortgang__nr::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--blue-dark); }
.bouwvoortgang__stap--nu .bouwvoortgang__nr::before { background: var(--orange); box-shadow: 0 0 0 4px rgba(243, 112, 33, 0.18); }
.bouwvoortgang__datum { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.bouwvoortgang__nu { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); background: rgba(243, 112, 33, 0.10); border-radius: 999px; padding: 3px 9px; }
.bouwvoortgang__tekst h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 6px; }
.bouwvoortgang__tekst p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 34ch; }
.bouwvoortgang__fotos { display: grid; gap: var(--s-3); grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
.bouwvoortgang__fotos--1 { grid-template-columns: minmax(0, 1fr); }
.bouwvoortgang__fotos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bouwvoortgang__fotos a { display: block; aspect-ratio: 3 / 2; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--rule); background: var(--blue-soft); }
.bouwvoortgang__fotos--1 a { aspect-ratio: 16 / 9; }
.bouwvoortgang__fotos img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(0.2, 0, 0, 1); }
.bouwvoortgang__fotos a:hover img { transform: scale(1.03); }
.bouwvoortgang__volgt { display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 14px; padding: var(--s-5); border-style: dashed; }
/* Standaard projectpagina (Bodi, 9 nov 2026): een stap zonder foto's krijgt rechts een melding (bijvoorbeeld de
   vergunningen met datum); de laatste stap "Volgt" is de geplande volgende stap, met een open stip en zonder beeld. */
.bouwvoortgang__melding { align-self: start; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-5) var(--s-6); }
.bouwvoortgang__melding .ws-card-eyebrow { margin-bottom: var(--s-3); }
.bouwvoortgang__melding .ws-pair--uitleg { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.bouwvoortgang__melding .ws-pair--uitleg .k { white-space: normal; }
.bouwvoortgang__melding .ws-pair .v { font-variant-numeric: tabular-nums lining-nums; }
.bouwvoortgang__stap--volgt .bouwvoortgang__nr { text-transform: uppercase; }
.bouwvoortgang__stap--volgt .bouwvoortgang__nr::before { background: transparent; box-shadow: inset 0 0 0 2px var(--blue-dark); }
.bouwvoortgang__stap--volgt .bouwvoortgang__tekst p { max-width: 62ch; }
.bouwvoortgang__stap--volgt .bouwvoortgang__tekst { grid-column: 1 / -1; }
.bouwvoortgang__noot { margin: var(--s-5) 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 880px) { .bouwvoortgang__stap { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } .bouwvoortgang__fotos, .bouwvoortgang__fotos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bouwvoortgang__fotos--1 { grid-template-columns: minmax(0, 1fr); } .bouwvoortgang__tekst p { max-width: none; } }

/* ─── Impressies met één groot beeld voorop (standaard projectpagina, 9 nov 2026): het eerste beeld beslaat twee
   kolommen en twee rijen, de rest vult het raster eromheen. */
.project-gallery--uitgelicht .project-gallery__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.project-gallery--uitgelicht .project-gallery__item:first-child img { position: absolute; inset: 0; }
@media (max-width: 880px) { .project-gallery--uitgelicht .project-gallery__item:first-child { grid-row: auto; aspect-ratio: 16 / 10; } }

/* ─── Het gebouw — één project als uitleg: foto met spelden, ernaast wie wat doet (beleggingen.html) ─
   Desktop: foto links, vier rijen rechts. Rij en speld horen bij elkaar: wie over een rij gaat,
   ziet de speld op de foto oplichten en andersom (CSS :has, geen script). Onder de foto in één
   regel waar het geld loopt. Onder 880 px: foto boven, rijen eronder. */
.gebouw {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: var(--s-7);
}
.gebouw__foto { margin: 0; min-width: 0; position: sticky; top: 96px; }
.gebouw__kader {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--blue-soft);
  box-shadow: 0 24px 48px -28px rgba(31, 58, 95, 0.45);
}
.gebouw__kader img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gebouw__project {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  padding: 6px 12px;
  border-radius: var(--r-pil);
  background: rgba(20, 40, 64, 0.72);
  color: #fff;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  backdrop-filter: blur(6px);
}
.gebouw__speld {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue-dark);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 6px 16px rgba(20, 40, 64, 0.4);
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  transition: box-shadow 220ms var(--ease);
}
.gebouw__speld--u { background: var(--orange); }
.gebouw__lijst { list-style: none; margin: 0; padding: 0; }
.gebouw__rij {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule-soft);
}
.gebouw__rij:last-child { border-bottom: 1px solid var(--rule-soft); }
.gebouw__nr {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--blue);
  color: var(--blue-dark);
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  transition: background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}
.gebouw__rij--u .gebouw__nr { background: var(--orange); border-color: var(--orange); color: #fff; }
.gebouw__rij strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--blue-dark); text-wrap: balance; }
.gebouw__rij p { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.gebouw__rij p strong { display: inline; font-size: inherit; color: var(--ink); }
.gebouw__rij .ws-btn--link { margin-top: var(--s-2); }
/* rij en speld lichten samen op */
.gebouw__rij:hover .gebouw__nr { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.gebouw__rij--u:hover .gebouw__nr { background: var(--orange); border-color: var(--orange); }
.gebouw:has(.gebouw__rij[data-speld="1"]:hover) .gebouw__speld[data-speld="1"],
.gebouw:has(.gebouw__rij[data-speld="2"]:hover) .gebouw__speld[data-speld="2"],
.gebouw:has(.gebouw__rij[data-speld="3"]:hover) .gebouw__speld[data-speld="3"],
.gebouw:has(.gebouw__rij[data-speld="4"]:hover) .gebouw__speld[data-speld="4"],
.gebouw__speld:hover { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.38), 0 6px 16px rgba(20, 40, 64, 0.4); }
.gebouw:has(.gebouw__speld[data-speld="1"]:hover) .gebouw__rij[data-speld="1"] .gebouw__nr,
.gebouw:has(.gebouw__speld[data-speld="2"]:hover) .gebouw__rij[data-speld="2"] .gebouw__nr,
.gebouw:has(.gebouw__speld[data-speld="3"]:hover) .gebouw__rij[data-speld="3"] .gebouw__nr,
.gebouw:has(.gebouw__speld[data-speld="4"]:hover) .gebouw__rij[data-speld="4"] .gebouw__nr { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.gebouw:has(.gebouw__speld[data-speld="2"]:hover) .gebouw__rij--u .gebouw__nr { background: var(--orange); border-color: var(--orange); }
/* waar het geld loopt: drie stappen op één regel onder de foto */
.gebouw__geld {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-4) 0 0;
  font-size: 14px; line-height: 1.45; color: var(--ink-soft);
}
.gebouw__geld span { display: inline-flex; align-items: center; white-space: nowrap; }
.gebouw__geld span + span::before {
  content: '';
  width: 8px; height: 8px;
  margin-right: var(--s-3);
  border-top: 1px solid var(--muted);
  border-right: 1px solid var(--muted);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.gebouw__geld b { font-weight: 600; color: var(--blue-dark); margin-right: 0.3em; }
.gebouw__slot { margin: var(--s-7) 0 0; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.gebouw__slot a { color: var(--blue-dark); }
@media (max-width: 880px) {
  .gebouw { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); margin-top: var(--s-6); }
  .gebouw__speld { width: 30px; height: 30px; font-size: 12px; }
  .gebouw__geld { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .gebouw__foto { position: static; }
  .gebouw__geld span + span::before { transform: rotate(135deg); margin-top: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .gebouw__speld, .gebouw__nr { transition: none; }
}

/* ─── Productpagina's Rust, Stabiel en Opbouw (12 okt 2026) ─────────────────
   Drie zusterpagina's met dezelfde opbouw: fotohero met de kernstrook eroverheen,
   daarna per lening een eigen element: bij Rust de maand (huur in, rente uit),
   bij Opbouw de bouwstrook (het onderpand groeit mee) met de kwartalen eronder,
   bij Stabiel de rij (het pad met de bank vooraan). Onderaan de drie leningen naast elkaar. */
.prod-kern { position: relative; z-index: 2; }
.prod-kern .kernstrook { margin-top: calc(-1 * clamp(36px, 4.5vw, 64px)); }
.prod-aside { position: sticky; top: 96px; }
@media (max-width: 880px) { .prod-aside { position: static; } }

/* de maand: dertig vakjes voor de dagen, drie open vakjes voor de betaaltermijn */
.maand { margin-top: var(--s-7); }
.maand__strook { display: flex; align-items: center; gap: 3px; }
.maand__dagen { display: flex; flex: 1 1 auto; gap: 3px; }
.maand__dagen i { flex: 1 1 0; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.55); }
.maand__dagen i:first-child { background: var(--orange); }
.maand__na { display: flex; flex: 0 0 auto; gap: 3px; margin-left: var(--s-3); }
.maand__na i { width: 16px; height: 10px; border-radius: 2px; background: none; border: 1px solid rgba(255, 255, 255, 0.5); }
.maand__na i:last-child { background: var(--orange); border-color: var(--orange); }
.maand__labels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-4); }
.maand__label { position: relative; padding-top: var(--s-3); border-top: 1px solid rgba(255, 255, 255, 0.22); }
.maand__label::before { content: ''; position: absolute; left: 0; top: -1px; width: 28px; height: 2px; background: var(--orange); }
.maand__label--midden::before { background: rgba(255, 255, 255, 0.55); }
.maand__label--eind { text-align: right; }
.maand__label--eind::before { left: auto; right: 0; }
.maand__label b { display: block; font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 4px; font-variant-numeric: tabular-nums lining-nums; }
.maand__label span { display: block; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.74); font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 720px) {
  .maand__dagen i { height: 8px; }
  .maand__labels { grid-template-columns: 1fr; gap: var(--s-3); }
  .maand__label--eind { text-align: left; }
  .maand__label--eind::before { left: 0; right: auto; }
}

/* de bouwstrook: vier fasen in 3:2, de nummers in serif oranje */
.bouwstrook { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); margin-top: var(--s-7); }
.bouwstrook__fase { margin: 0; min-width: 0; }
.bouwstrook__fase img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); background: var(--blue-soft); }
.bouwstrook__fase figcaption { padding: var(--s-3) 2px 0; }
.bouwstrook__nr { display: block; font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-size: 28px; line-height: 1; color: var(--orange); margin-bottom: 6px; font-variant-numeric: lining-nums; }
.bouwstrook__fase strong { display: block; font-size: 16px; font-weight: 600; color: var(--blue-dark); line-height: 1.35; }
.bouwstrook__fase figcaption span:last-child { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.bouwstrook__impressie { position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 1; padding: 5px 10px; border-radius: var(--r-pil); background: rgba(20, 40, 64, 0.72); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; backdrop-filter: blur(6px); }
@media (max-width: 880px) { .bouwstrook { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .bouwstrook { grid-template-columns: 1fr; } }

/* de kwartalen: zes vakken op een lijn, de laatste twee open, met de aflossing als eindpunt */
.kwartalen { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--rule); }
.kwartalen__lijn { display: flex; align-items: center; gap: 6px; }
.kwartalen__vak { flex: 1 1 0; height: 44px; display: grid; place-items: center; border-radius: var(--r-xs); background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.kwartalen__vak--open { background: none; border: 1px solid var(--blue); color: var(--blue-dark); }
.kwartalen__eind { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); margin-left: var(--s-2); display: grid; place-items: center; }
.kwartalen__eind::before { content: '€'; color: #fff; font-weight: 600; font-size: 16px; }
.kwartalen__labels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-4); }
.kwartalen__labels b { display: block; font-size: 15px; font-weight: 600; color: var(--blue-dark); margin-bottom: 4px; }
.kwartalen__labels span { display: block; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); font-variant-numeric: tabular-nums lining-nums; }
.kwartalen__labels > div:last-child { text-align: right; }
@media (max-width: 720px) {
  .kwartalen__vak { height: 36px; font-size: 12px; }
  .kwartalen__eind { width: 36px; height: 36px; }
  .kwartalen__labels { grid-template-columns: 1fr; gap: var(--s-3); }
  .kwartalen__labels > div:last-child { text-align: left; }
}

/* de som bij Opbouw: één groot bedrag op de donkere plaat, de rest als paren */
.som-opbouw { padding: clamp(24px, 3vw, 40px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.05); }
.som-opbouw__groot { margin: var(--s-3) 0 var(--s-5); font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 400; font-size: clamp(48px, 5.4vw, 80px); line-height: 1; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums lining-nums; }
.som-opbouw__groot small { font-family: var(--font); font-size: 17px; letter-spacing: 0; margin-left: 12px; color: rgba(255, 255, 255, 0.72); }
.som-opbouw .split__noot { margin-top: var(--s-4); font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.62); }

/* de drie leningen naast elkaar; de huidige pagina staat er zonder link tussen */
.naast { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: var(--s-7); }
.naast__kaart { display: flex; flex-direction: column; gap: var(--s-2); padding: clamp(20px, 2.4vw, 32px); border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--offwhite); color: inherit; text-decoration: none; transition: transform 240ms cubic-bezier(0.2, 0, 0, 1), box-shadow 240ms cubic-bezier(0.2, 0, 0, 1); }
a.naast__kaart:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -20px rgba(31, 58, 95, 0.45); }
.naast__kaart.is-hier { background: var(--blue-soft); border-color: var(--blue-soft); }
.naast__kaart .ws-tag { align-self: flex-start; }
.naast__naam { margin: var(--s-2) 0 0; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; color: var(--blue-dark); }
.naast__rente { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.naast__rente b { font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-weight: 400; font-size: 34px; line-height: 1; color: var(--blue-dark); margin-right: 6px; }
.naast__kaart p { margin: var(--s-2) 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); flex: 1 1 auto; }
.naast__link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-3); font-size: 14.5px; font-weight: 600; color: var(--blue); }
.naast__kaart.is-hier .naast__link { color: var(--muted); font-weight: 500; }
@media (max-width: 880px) { .naast { grid-template-columns: 1fr; } }
/* de hero op de productpagina's houdt onderin ruimte vrij voor de kernstrook */
.project-hero--prod { padding-bottom: clamp(96px, 11vw, 150px); }
.project-hero--prod .project-hero__title { max-width: 18ch; }
@media (max-width: 880px) { .project-hero--prod { padding-bottom: 88px; } }
/* donker projectblok op de productpagina's: onder 600 px label boven de waarde, anders botsen ze */
@media (max-width: 600px) {
  .prod-donker .split__pairs .ws-pair { grid-template-columns: 1fr; gap: 2px; }
  .prod-donker .split__pairs .ws-pair .v { text-align: left; }
}
/* kernstrook: lucht onder de strook, ook als er een donker vlak op volgt (Stabiel) */
.prod-kern { padding-bottom: clamp(48px, 6vw, 88px); }
.prod-kern + .section:not(.section--blue) { padding-top: var(--s-8); }
/* kennismaken: één kaart met portret, naam, contact en de knop over de volle breedte */
.prod-contact {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--s-4) var(--s-5);
  align-items: start;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--blue-soft);
  border-radius: var(--r-md);
}
.prod-contact__portret { width: 132px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border-radius: var(--r-sm); display: block; }
.prod-contact__tekst { min-width: 0; }
.prod-contact__tekst strong { display: block; font-size: 18px; font-weight: 600; color: var(--blue-dark); line-height: 1.3; }
.prod-contact__tekst > span { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.prod-contact__tekst p { margin: var(--s-3) 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.prod-contact__tekst a { color: var(--blue-dark); font-variant-numeric: tabular-nums lining-nums; }
.prod-contact__knop { grid-column: 1 / -1; justify-content: center; }
@media (max-width: 480px) {
  .prod-contact { grid-template-columns: 1fr; }
  .prod-contact__portret { width: 120px; }
}
/* het aanbod: één strook met de tekst links en de knop rechts, zonder projectnaam */
.prod-aanbod { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6) clamp(32px, 5vw, 80px); align-items: center; }
.prod-aanbod > div { max-width: 62ch; }
.prod-aanbod .section-title { margin-bottom: var(--s-3); }
@media (max-width: 720px) { .prod-aanbod { grid-template-columns: 1fr; } }
/* de algemene brochure is een staand A4-boekje */
.brochure__cover--staand { width: 104px; aspect-ratio: 210 / 297; }

/* ─── Aanbod op de homepage (14 okt 2026): alleen het open project, als brede
   kaart met de foto links en een licht paneel rechts. Gerealiseerde projecten
   staan hier niet (worden niet aangeboden); wat eraan komt, zit in de
   nieuwsbriefband eronder. ── */
.aanbod-lead {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden;
  color: var(--ink); text-decoration: none;
  box-shadow: 0 2px 4px rgba(20, 40, 64, 0.06), 0 12px 28px rgba(20, 40, 64, 0.08);
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1);
}
.aanbod-lead:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(20, 40, 64, 0.08), 0 20px 40px rgba(20, 40, 64, 0.14); }
.aanbod-lead__beeld { display: block; min-height: 420px; background: var(--blue-soft); }
.aanbod-lead__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aanbod-lead__paneel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: clamp(28px, 3.2vw, 48px); }
.aanbod-lead__titel {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: clamp(30px, 3vw, 42px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; color: var(--blue-dark);
  margin-top: var(--s-2);
}
.aanbod-lead__lede { font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-width: 40ch; }
.aanbod-lead__rente { display: flex; align-items: baseline; gap: 12px; margin-top: var(--s-2); padding-top: var(--s-3); border-top: 2px solid var(--orange); }
.aanbod-lead__num { font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-size: clamp(36px, 3.4vw, 48px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: var(--blue-dark); font-variant-numeric: tabular-nums lining-nums; }
.aanbod-lead__unit { font-size: 13px; color: var(--muted); }
.aanbod-lead__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); width: 100%; margin-top: var(--s-2); }
.aanbod-lead__specs > span { display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 500; color: var(--ink); padding-top: 8px; border-top: 1px solid var(--rule-soft); }
.aanbod-lead__specs b { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.aanbod-lead__knop { margin-top: var(--s-4); }
.aanbod-lead:hover .aanbod-lead__knop { background: var(--blue-dark); border-color: var(--blue-dark); }
@media (max-width: 860px) {
  .aanbod-lead { grid-template-columns: minmax(0, 1fr); }
  .aanbod-lead__beeld { min-height: 0; aspect-ratio: 4 / 3; }
}

/* Nieuwsbriefband: licht vlak over de volle breedte, tekst links, veld rechts. */
.nieuwsbrief {
  margin-top: var(--s-7);
  padding: clamp(28px, 4vw, 52px);
  background: var(--blue-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.nieuwsbrief__inner[hidden] { display: none; }
.nieuwsbrief__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.nieuwsbrief__tekst .section-eyebrow { margin-bottom: var(--s-3); }
.nieuwsbrief__kop { font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 var(--s-3); text-wrap: balance; max-width: 22ch; }
.nieuwsbrief__tekst p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-width: 44ch; }
.nieuwsbrief__form { display: flex; flex-direction: column; gap: var(--s-3); }
.nieuwsbrief__rij { display: flex; gap: 6px; padding: 6px; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-sm); box-shadow: 0 1px 2px rgba(20, 40, 64, 0.05); }
.nieuwsbrief__rij .ws-input { flex: 1 1 180px; min-width: 0; border: 0; background: transparent; box-shadow: none; }
.nieuwsbrief__rij .ws-input:focus-visible { box-shadow: none; }
.nieuwsbrief__rij .ws-btn { white-space: nowrap; }
.nieuwsbrief .brochure__vink { font-size: 13px; }
@media (max-width: 860px) {
  .nieuwsbrief__inner { grid-template-columns: minmax(0, 1fr); }
  .nieuwsbrief__rij { flex-wrap: wrap; }
  .nieuwsbrief__rij .ws-btn { flex: 1 1 100%; }
}

/* ─── Rust, "Waar uw rente vandaan komt" (14 okt 2026): de stroom van huur naar
   rente in drie stappen op één lijn, daaronder een foto naast vier punten die
   zeggen waarom die huur betrouwbaar is. Op het donkere vlak. ── */
.huurstroom { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); list-style: none; margin: var(--s-8) 0 0; padding: 0; }
.huurstroom::before { content: ''; position: absolute; left: 28px; right: 28px; top: 28px; height: 1px; background: rgba(255, 255, 255, 0.22); }
.huurstroom__stap { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-right: var(--s-5); }
.huurstroom__nr {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--blue-dark); border: 1px solid rgba(255, 255, 255, 0.32); color: #fff;
  font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums;
}
.huurstroom__stap--u .huurstroom__nr { background: var(--orange); border-color: var(--orange); }
.huurstroom__kop { display: block; margin-top: var(--s-4); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: #fff; text-wrap: balance; }
.huurstroom__tekst { display: block; margin-top: var(--s-2); font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); max-width: 36ch; }
.huurstroom__cijfer {
  display: flex; align-items: baseline; gap: 10px; margin-top: var(--s-4);
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-size: clamp(40px, 4vw, 56px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'lnum' on, 'tnum' on;
}
.huurstroom__cijfer small { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.rente-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: var(--s-8); }
.rente-split__foto { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--blue-dark); box-shadow: 0 24px 54px rgba(10, 22, 38, 0.38); }
.rente-split__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.punten__kop { font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; color: #fff; margin: 0 0 var(--s-4); text-wrap: balance; }
.punten__rij { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--s-4); padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.punten__rij:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.punten__rij b { font-size: 15px; font-weight: 600; color: #fff; }
.punten__rij span { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.78); }
@media (max-width: 900px) {
  .huurstroom { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .huurstroom::before { display: none; }
  .huurstroom__stap { padding-right: 0; }
  .rente-split { grid-template-columns: minmax(0, 1fr); }
  .punten__rij { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ─── Productpagina's, "Verder met …" (14 okt 2026): drie routes naast elkaar
   (portaal, gesprek, brochure) in plaats van losse secties voor kennismaken en
   de brochure. Het brochureformulier klapt eronder uit. ── */
.naast__voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.naast__voet p { margin: 0; font-size: 15.5px; color: var(--muted); max-width: 60ch; }
.routes { margin-top: var(--s-6); align-items: stretch; }
/* alleen de kaart: de kale .route is de vierstapsroute in main.css (zekerheden.html, ontwikkeling.html) */
.ws-card.route { display: flex; flex-direction: column; gap: 0; }
.ws-card.route > * { flex: 0 0 auto; }
.ws-card.route .ws-card-eyebrow { margin-bottom: var(--s-4); }
.ws-card.route .ws-card-title { margin: 0 0 var(--s-3); font-size: 22px; }
.ws-card.route .ws-card-body { margin: 0 0 var(--s-3); }
.route__media { display: flex; align-items: center; min-height: 80px; margin-bottom: var(--s-4); }
.route__knop { margin-top: auto; align-self: flex-start; }
.ws-card.route .ws-card-body:last-of-type { margin-bottom: var(--s-5); }
.route__cijfer { display: inline-flex; align-items: baseline; gap: 10px; font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif; font-size: 56px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums lining-nums; }
.route__cijfer small { font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
.route__portret { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
.route__cover { display: block; width: 112px; border-radius: var(--r-xs); overflow: hidden; box-shadow: 0 6px 16px rgba(20, 40, 64, 0.16); }
.route__cover img { display: block; width: 100%; height: auto; }
.route__contact a { color: var(--blue); }
.brochure-uitklap { margin-top: var(--s-5); }
.brochure-uitklap > summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--blue); list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.brochure-uitklap > summary::-webkit-details-marker { display: none; }
.brochure-uitklap > summary::after { content: '+'; font-weight: 500; }
.brochure-uitklap[open] > summary::after { content: '–'; }
.brochure-uitklap .brochure { margin-top: var(--s-5); max-width: 720px; }

/* Knoppenrij in de hero van de productpagina's (14 okt 2026): wie al overtuigd is, hoeft niet tot onderaan te scrollen. */
.project-hero__acties { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }