/* Van der Pol Financieel Advies, Heerde. Stijl van de site.

   Ontwerp in één zin: een heldere, warme persoonlijke site voor starters, doorstromers
   en 55-plussers die hun hypotheek willen snappen, met Joep zelf als gezicht en zijn
   heldere uitleg als kern; rustig en trust-first, in het rood en de grijzen
   van zijn logo.

   Kleuren: gemeten op de pixels van logo-v3-3.png en favicon-300x300.png.
     rood        #D11D1E  de naam "Van der Pol"
     dak         #4E4E50 #6F6F71 #919294 #A7A8AA  de vier vlakken van het dak
     rood-donker #921C0D  de schaduwkant van het rode driehoekje in het favicon
   Eén grijsfamilie (neutraal, de grijzen van het dak), één accent (het rood).

   Contrast (WCAG 2.1, berekend):
     wit op rood #D11D1E ............ 5,38:1  (knoppen, AA)
     rood #D11D1E op wit ............ 5,38:1  op papier #F5F4F1 4,89:1 (AA)
     rood-diep #B3171A op papier .... 6,25:1  (links in lopende tekst)
     inkt #2A2A2C op papier ......... 13,02:1 op wit 14,32:1
     grijs #58595B op papier ........ 6,38:1  (bijschriften)
     wit op inkt #2A2A2C ............ 14,32:1
     zacht #B9B9BB op inkt .......... 7,31:1
     rood-licht #FF6B5E op inkt ..... 5,13:1  (links op het donkere vlak)

   Letter: Lexend (koppen en tekst; het dichtst bij het woordmerk, en gemaakt om
   tekst makkelijker leesbaar te maken). Zie bron/haal-fonts.py.
   Koppen bewust bescheiden (opmerking Mischa 2026-10-09: "title font kleiner"). */

:root {
  --rood: #D11D1E;
  --rood-diep: #B3171A;
  --rood-donker: #921C0D;
  --rood-licht: #FF6B5E;
  --inkt: #2A2A2C;
  --grijs: #58595B;
  --zacht: #B9B9BB;
  --dak-1: #4E4E50;
  --dak-2: #6F6F71;
  --dak-3: #919294;
  --dak-4: #A7A8AA;
  --papier: #F5F4F1;
  --papier-2: #ECEBE7;
  --wit: #FFFFFF;
  --lijn: #DEDDD9;

  --letter: "Lexend", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --omslag: 78rem;
  --maat: 44rem;
  --rand: clamp(1.25rem, 4vw, 3rem);
  --sectie: clamp(4rem, 9vw, 7.5rem);
  --rond: 6px;
  --schaduw: 0 1px 2px rgba(42, 42, 44, .06), 0 12px 32px -12px rgba(42, 42, 44, .22);
  --papierschaduw: 0 1px 1px rgba(42, 42, 44, .08), 0 18px 40px -18px rgba(42, 42, 44, .35);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--letter);
  font-weight: 320;
  font-size: 1.0625rem;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--rood-diep); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--rood-donker); text-decoration-thickness: 2px; }
p { margin: 0 0 1em; }
strong { font-weight: 500; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h3 { font-size: 1.15rem; letter-spacing: -.01em; line-height: 1.3; }
ul, ol { padding-left: 1.2em; }
:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.overslaan {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--inkt); color: var(--wit); padding: .7rem 1rem; border-radius: var(--rond);
}
.overslaan:focus { top: 1rem; color: var(--wit); }

.omslag { width: min(100% - 2 * var(--rand), var(--omslag)); margin-inline: auto; }
.omslag--smal { width: min(100% - 2 * var(--rand), var(--maat)); }

.sectie { padding-block: var(--sectie); }
.sectie--wit { background: var(--wit); }
.sectie--zand { background: var(--papier-2); }
.sectie--krap { padding-block: calc(var(--sectie) * .6); }
.sectiekop { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); max-width: 46rem; }
.sectiekop--rij { max-width: none; grid-template-columns: 1fr auto; align-items: end; }
@media (max-width: 40rem) { .sectiekop--rij { grid-template-columns: 1fr; justify-items: start; } }
.sectie__intro { font-size: 1.125rem; color: var(--grijs); margin: 0; max-width: 40rem; }

.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 1.1rem; font-size: .8125rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--grijs);
}
.kicker::before {
  /* Het rode gevel-driehoekje uit het favicon. */
  content: ""; width: .8rem; height: .55rem; background: var(--rood);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* ---------------------------------------------------------------- knoppen */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3.1rem; padding: .7rem 1.35rem; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .1s;
}
.knop:active { transform: translateY(1px); }
.knop .icoon { width: 1.2rem; height: 1.2rem; flex: none; }
.knop--rood { background: var(--rood); color: var(--wit); }
.knop--rood:hover { background: var(--rood-diep); color: var(--wit); }
.knop--lijn { border-color: var(--inkt); color: var(--inkt); background: transparent; }
.knop--lijn:hover { background: var(--inkt); color: var(--wit); }
.knop--licht { border-color: rgba(255, 255, 255, .7); color: var(--wit); }
.knop--licht:hover { background: var(--wit); color: var(--inkt); }
.knop--vol { width: 100%; }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }

.tekstlink {
  display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; color: var(--inkt);
  text-decoration: none; border-bottom: 2px solid var(--rood); padding-bottom: .1rem;
}
.tekstlink:hover { color: var(--rood-diep); }
.pijl { width: 1.1em; height: 1.1em; flex: none; transition: transform .15s; }
a:hover > .pijl, .tegel:hover .pijl { transform: translateX(3px); }
.icoon { width: 1.25rem; height: 1.25rem; flex: none; }

/* ---------------------------------------------------------------- kop */

.kop {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--lijn);
}
@supports (backdrop-filter: blur(8px)) { .kop { background: rgba(255, 255, 255, .9); backdrop-filter: blur(10px); } }
.kop__binnen { display: flex; align-items: center; gap: 2rem; min-height: 5.25rem; }
.logo { flex: none; display: block; }
.logo img { height: 3.9rem; width: auto; }
@media (max-width: 62rem) { .logo img { height: 3.25rem; } }
.hoofdnav { margin-left: auto; }
.hoofdnav__lijst { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.hoofdnav__item { position: relative; display: flex; align-items: center; }
.hoofdnav__link {
  display: block; padding: .55rem .7rem; color: var(--inkt); text-decoration: none; font-weight: 400; font-size: .98rem;
  border-radius: var(--rond);
}
.hoofdnav__link:hover { color: var(--rood-diep); }
.hoofdnav__item[data-actief] > .hoofdnav__link { color: var(--inkt); font-weight: 500; box-shadow: inset 0 -2px 0 var(--rood); border-radius: 0; }
.hoofdnav__link--knop {
  margin-left: .6rem; background: var(--rood); color: var(--wit); border-radius: 999px; padding: .6rem 1.15rem; font-weight: 500;
}
.hoofdnav__link--knop:hover { background: var(--rood-diep); color: var(--wit); }
.hoofdnav__item[data-actief] > .hoofdnav__link--knop { box-shadow: none; border-radius: 999px; color: var(--wit); }
.hoofdnav__pijl {
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-left: -.45rem; padding: 0;
  border: 0; background: none; color: var(--grijs); cursor: pointer; border-radius: 4px;
}
.hoofdnav__pijl svg { width: .75rem; height: .75rem; transition: transform .15s; }
.hoofdnav__pijl[aria-expanded="true"] svg { transform: rotate(180deg); }
.hoofdnav__tel { display: none; }
.taal {
  display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.1rem; padding: 0 .55rem; border: 1px solid var(--lijn); border-radius: 999px;
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; color: var(--inkt); text-decoration: none; flex: none;
}
.taal:hover { border-color: var(--inkt); color: var(--inkt); }
.kop__tel { display: inline-flex; align-items: center; gap: .45rem; color: var(--inkt); text-decoration: none; font-weight: 500; white-space: nowrap; }
.kop__tel .icoon { color: var(--rood); }
.kop__tel:hover { color: var(--rood-diep); }

.uitklap {
  position: absolute; top: calc(100% + .9rem); left: -1.2rem; width: 34rem; display: none;
  background: var(--wit); border-radius: 10px; box-shadow: var(--schaduw); border: 1px solid var(--lijn);
}
.uitklap[data-open] { display: block; }
.uitklap::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }  /* brug: muis verliest het menu niet */
@media (hover: hover) and (min-width: 62.01rem) {
  .heeft-uitklap:hover > .uitklap { display: block; }  /* toetsenbord: via het pijltje */
  .heeft-uitklap:hover > .hoofdnav__pijl svg { transform: rotate(180deg); }
}
.uitklap__binnen { padding: 1.4rem 1.5rem 1.2rem; }
.uitklap__groep { margin: 0 0 .4rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grijs); font-weight: 500; }
.uitklap__lijst { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem 1.2rem; }
.uitklap__lijst a { display: block; padding: .38rem 0; color: var(--inkt); text-decoration: none; font-size: .96rem; }
.uitklap__lijst a:hover { color: var(--rood-diep); }
.uitklap__lijst--top a { font-weight: 500; }
.uitklap__alles { display: inline-flex; gap: .4rem; align-items: center; font-weight: 500; color: var(--rood-diep); text-decoration: none; border-top: 1px solid var(--lijn); padding-top: .9rem; width: 100%; }

.menuknop {
  display: none; margin-left: auto; align-items: center; gap: .6rem; padding: .55rem .9rem; border-radius: 999px;
  border: 1px solid var(--lijn); background: var(--wit); font: inherit; font-weight: 500; color: var(--inkt); cursor: pointer;
}
.menuknop__streep, .menuknop__streep::before, .menuknop__streep::after {
  display: block; width: 1.1rem; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s, background-color .2s;
}
.menuknop__streep::before, .menuknop__streep::after { content: ""; position: absolute; left: 0; }
.menuknop__streep::before { top: -6px; }
.menuknop__streep::after { top: 6px; }
.menuknop[aria-expanded="true"] .menuknop__streep { background: transparent; }
.menuknop[aria-expanded="true"] .menuknop__streep::before { transform: translateY(6px) rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__streep::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 70rem) {
  .kop__tel span { display: none; }
}
@media (max-width: 62rem) {
  .kop__binnen { min-height: 4.5rem; gap: 1rem; }
  .taal { margin-left: auto; }
  .kop__tel { padding: .5rem; }
  .menuknop { display: inline-flex; margin-left: 0; }
  .hoofdnav {
    position: fixed; inset: 4.5rem 0 0; background: var(--wit); overflow-y: auto; display: none;
    padding: 1rem var(--rand) 2rem; border-top: 1px solid var(--lijn);
  }
  .hoofdnav[data-open] { display: block; }
  .hoofdnav__lijst { flex-direction: column; align-items: stretch; gap: 0; }
  .hoofdnav__item { flex-wrap: wrap; border-bottom: 1px solid var(--lijn); }
  .hoofdnav__link { flex: 1; padding: 1rem 0; font-size: 1.15rem; }
  .hoofdnav__item[data-actief] > .hoofdnav__link { box-shadow: none; color: var(--rood-diep); }
  .hoofdnav__pijl { width: 3rem; height: 3rem; margin: 0; }
  .hoofdnav__pijl svg { width: 1rem; height: 1rem; }
  .uitklap { position: static; width: 100%; box-shadow: none; border: 0; border-radius: 0; flex-basis: 100%; }
  .uitklap__binnen { padding: 0 0 1rem; }
  .uitklap__lijst { grid-template-columns: 1fr; }
  .hoofdnav__item:has(.hoofdnav__link--knop) { border-bottom: 0; padding-top: 1.25rem; }
  .hoofdnav__link--knop { margin: 0; text-align: center; padding: 1rem; }
  .hoofdnav__tel { display: block; margin: 1rem 0 0; }
  body.menu-open { overflow: hidden; }
}

/* ---------------------------------------------------------------- kruimels */

.kruimels ol { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0 0 1.4rem; padding: 0; font-size: .875rem; color: var(--grijs); }
.kruimels li + li::before { content: "/"; margin-right: .3rem; color: var(--zacht); }
.kruimels a { color: var(--grijs); text-decoration: none; }
.kruimels a:hover { color: var(--rood-diep); text-decoration: underline; }

/* ---------------------------------------------------------------- opening (home) */

.opening { position: relative; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.opening__binnen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.opening__kop { font-size: clamp(2.05rem, 3.6vw, 3rem); font-weight: 500; line-height: 1.1; letter-spacing: -.025em; margin-bottom: 1.3rem; }
.opening__sub { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; max-width: 31rem; margin-bottom: 2rem; color: var(--inkt); }
.opening__beeld { position: relative; justify-self: center; width: min(100%, 26rem); }
.opening__foto { aspect-ratio: 4 / 4.6; overflow: hidden; border-radius: 12px; background: var(--papier-2); box-shadow: var(--schaduw); }
.opening__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 20%; }

.googlekaart {
  position: absolute; z-index: 3; right: -1.5rem; bottom: 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: .2rem .9rem; align-items: center;
  padding: .95rem 1.2rem; background: var(--wit); border-radius: 10px; box-shadow: var(--schaduw); color: var(--inkt); text-decoration: none;
}
.googlekaart:hover { color: var(--inkt); box-shadow: 0 0 0 2px var(--rood), var(--schaduw); }
.googlekaart__cijfer { grid-row: span 2; font-size: 2.2rem; font-weight: 500; line-height: 1; letter-spacing: -.03em; }
.googlekaart__tekst { font-size: .86rem; line-height: 1.35; color: var(--grijs); }
.googlekaart__g { width: 1rem; height: 1rem; display: inline-block; vertical-align: -.15rem; margin-right: .3rem; }
.sterren { display: inline-flex; gap: .1rem; color: #E8A317; }
.ster { width: 1.05rem; height: 1.05rem; }
.ster--leeg { color: var(--lijn); }

@media (max-width: 56rem) {
  .opening__binnen { grid-template-columns: 1fr; }
  .opening__beeld { width: min(100%, 26rem); margin-top: 1rem; }
  .googlekaart { right: -.5rem; }
}

/* ---------------------------------------------------------------- diensten */

.diensten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.dienst { display: flex; flex-direction: column; height: 100%; background: var(--wit); border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--inkt); box-shadow: 0 1px 2px rgba(42, 42, 44, .06); transition: box-shadow .2s, transform .2s; }
.dienst:hover { color: var(--inkt); box-shadow: var(--schaduw); transform: translateY(-2px); }
.dienst__beeld { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--papier-2); }
.dienst__beeld img { width: 100%; height: 100%; object-fit: cover; }
.dienst__dak { position: absolute; left: 1.2rem; bottom: -1px; width: 4.2rem; height: auto; }
.dienst__tekst { display: grid; gap: .45rem; padding: 1.5rem 1.5rem 1.6rem; }
.dienst__naam { font-size: 1.3rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.dienst__zin { color: var(--grijs); }
.dienst__verder { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; color: var(--rood-diep); margin-top: .4rem; }
.meer { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 14rem 1fr; gap: 1.5rem; border-top: 1px solid var(--lijn); padding-top: 1.8rem; }
.meer__kop { font-size: 1.05rem; font-weight: 500; margin: 0; }
.meer__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .1rem 2rem; }
.meer__lijst a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--lijn); color: var(--inkt); text-decoration: none; }
.meer__lijst a:hover { color: var(--rood-diep); }
@media (max-width: 62rem) {
  .diensten { grid-template-columns: 1fr; }
  .dienst { display: grid; grid-template-columns: 40% 1fr; }
  .dienst__beeld { aspect-ratio: auto; height: 100%; }
  .meer { grid-template-columns: 1fr; }
  .meer__lijst { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 36rem) {
  .dienst { grid-template-columns: 1fr; }
  .dienst__beeld { aspect-ratio: 16 / 10; }
  .meer__lijst { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- reviews */

.score { background: var(--inkt); color: var(--wit); position: relative; overflow: hidden; }
.score__boven { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.score__cijfer { display: grid; gap: .6rem; color: var(--wit); text-decoration: none; }
.score__cijfer:hover { color: var(--wit); }
.score__groot { font-size: clamp(4.25rem, 8vw, 6rem); font-weight: 500; line-height: .85; letter-spacing: -.05em; }
.score__onder { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .95rem; color: var(--zacht); }
.score__onder .sterren .ster { width: 1.35rem; height: 1.35rem; }
.score__tekst h2 { margin-bottom: 1rem; }
.score__tekst p { color: var(--zacht); max-width: 38rem; margin: 0; }
.score .tekstlink { color: var(--wit); border-color: var(--rood-licht); }
.score .tekstlink:hover { color: var(--rood-licht); }
.reviews { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.review { margin: 0; height: 100%; display: flex; flex-direction: column; gap: 1rem; padding: 1.7rem 1.6rem 1.5rem; background: var(--wit); color: var(--inkt); border-radius: 10px; }
.review blockquote { margin: 0; flex: 1; }
.review blockquote p { margin: 0; font-size: 1.04rem; line-height: 1.65; }
.review figcaption { display: flex; align-items: center; gap: .75rem; font-size: .9rem; border-top: 1px solid var(--lijn); padding-top: .9rem; }
.review__naam { font-weight: 500; }
.review__meta { color: var(--grijs); margin-left: auto; font-size: .82rem; text-align: right; }
.review__g { width: 1.15rem; height: 1.15rem; flex: none; }
/* De kern van een review: een lichte markeerstift (rood op 14%), geen dikke streep. */
.markeer {
  background-color: transparent; color: inherit;
  background-image: linear-gradient(transparent 38%, rgba(209, 29, 30, .14) 38%, rgba(209, 29, 30, .14) 92%, transparent 92%);
  padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.score__alle { margin: clamp(2rem, 4vw, 3rem) 0 0; display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.herkomst { font-size: .85rem; color: var(--zacht); margin: 0; max-width: 40rem; }
.sectie .herkomst, .reviewmuur + .herkomst { color: var(--grijs); }
.score .herkomst { color: var(--zacht); }
@media (max-width: 62rem) {
  .reviews { grid-template-columns: 1fr; }
  .score__boven { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Lichte reviewband op subpagina's */
.reviewband .review { background: var(--wit); box-shadow: 0 1px 2px rgba(42, 42, 44, .06); }
.scorechip { display: inline-flex; align-items: center; gap: .55rem; color: var(--inkt); text-decoration: none; font-size: .95rem; background: var(--wit); padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--lijn); }
.scorechip strong { font-size: 1.1rem; }
.scorechip:hover { color: var(--inkt); border-color: var(--inkt); }

/* /reviews: alle reviews */
.reviewmuur { columns: 3 20rem; column-gap: 1.4rem; }
.reviewmuur .review { break-inside: avoid; margin-bottom: 1.4rem; height: auto; box-shadow: 0 1px 2px rgba(42, 42, 44, .06); }
.reviewmuur .review--kort blockquote p { font-size: 1.2rem; }
.review__alleen-sterren { color: var(--grijs); font-style: normal; }
.reviewfilter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.reviewfilter button {
  font: inherit; font-size: .95rem; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--lijn); background: var(--wit); color: var(--inkt); cursor: pointer;
}
.reviewfilter button:hover { border-color: var(--inkt); }
.reviewfilter button[aria-pressed="true"] { background: var(--inkt); color: var(--wit); border-color: var(--inkt); }
.reviewteller { color: var(--grijs); margin: 0 0 1.5rem; }

/* ---------------------------------------------------------------- online, kaart */

.online__binnen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.online__tekst h2 { margin-bottom: 1.3rem; }
.kaart { position: relative; max-width: 30rem; justify-self: center; width: 100%; }
.kaart svg { width: 100%; height: auto; overflow: visible; }
.kaart .kaart__land { fill: var(--papier); stroke: var(--dak-3); stroke-width: 1.6; stroke-linejoin: round; }
.kaart .kaart__lijn { fill: none; stroke: var(--rood); stroke-width: 1.6; stroke-dasharray: 4 5; opacity: .7; }
.kaart .kaart__plek circle { fill: var(--wit); stroke: var(--rood); stroke-width: 2.5; }
.kaart .kaart__plek--thuis circle { fill: var(--rood); }
.kaart .kaart__naam { font-family: var(--letter); font-size: 17px; font-weight: 400; fill: var(--inkt); }
.kaart .kaart__plek--thuis .kaart__naam { font-weight: 600; }
.kaart figcaption { text-align: center; font-size: .85rem; color: var(--grijs); margin-top: .4rem; }
.citaat { margin: 2rem 0 0; padding: 1.4rem 1.5rem; background: var(--wit); border-radius: 10px; border-left: 4px solid var(--rood); }
.citaat p { margin: 0 0 .6rem; font-size: 1.05rem; }
.citaat footer { font-size: .9rem; color: var(--grijs); }
.vinklijst { list-style: none; padding: 0; margin: 1.2rem 0 1.8rem; display: grid; gap: .6rem; }
.vinklijst li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; align-items: start; }
.vinklijst .icoon { color: var(--rood); width: 1.35rem; height: 1.35rem; margin-top: .2rem; }
@media (max-width: 56rem) { .online__binnen { grid-template-columns: 1fr; } .kaart { max-width: 22rem; } }

/* ---------------------------------------------------------------- stappen (werkwijze) */

.stappen { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2.2rem); counter-reset: stap; }
.stap { position: relative; z-index: 1; counter-increment: stap; }
.stap__nr {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: 1.2rem; border-radius: 50%;
  background: var(--papier); border: 2px solid var(--rood); color: var(--rood); font-size: 1.2rem; font-weight: 600; line-height: 1;
}
.sectie--wit .stap__nr { background: var(--wit); }
.stappen__noot { margin: 2.5rem 0 0; max-width: 46rem; color: var(--grijs); }
.eerste { font-size: 1.12rem; margin: 0; }
.split > .review { box-shadow: var(--schaduw); height: auto; }
.stap h3 { margin-bottom: .55rem; }
.stap p { color: var(--grijs); margin: 0; font-size: 1rem; }
@media (max-width: 62rem) {
  .stappen { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
}
@media (max-width: 36rem) { .stappen { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- over Joep */

.joep__binnen { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.joep__beeld { position: relative; }
.joep__beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rond); }
.joep__tekst h2 { margin-bottom: 1.3rem; }
.feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin: 2rem 0; padding: 1.6rem 0; border-block: 1px solid var(--lijn); }
.feiten div { display: grid; gap: .25rem; }
.feiten dt { font-size: 1.7rem; font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--rood); }
.feiten dd { margin: 0; font-size: .92rem; color: var(--grijs); line-height: 1.45; }
@media (max-width: 56rem) { .joep__binnen { grid-template-columns: 1fr; } .joep__beeld { max-width: 24rem; } }

/* ---------------------------------------------------------------- nieuws */

.nieuwskaarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.nieuwskaart { display: flex; flex-direction: column; height: 100%; background: var(--wit); border-radius: 10px; overflow: hidden; color: var(--inkt); text-decoration: none; box-shadow: 0 1px 2px rgba(42, 42, 44, .06); transition: box-shadow .2s, transform .2s; }
.nieuwskaart:hover { color: var(--inkt); box-shadow: var(--schaduw); transform: translateY(-2px); }
.nieuwskaart__beeld { aspect-ratio: 16 / 9; overflow: hidden; background: var(--papier-2); }
.nieuwskaart__beeld img { width: 100%; height: 100%; object-fit: cover; }
.nieuwskaart__tekst { display: grid; gap: .5rem; padding: 1.3rem 1.4rem 1.5rem; }
.nieuwskaart__datum { font-size: .85rem; color: var(--grijs); }
.nieuwskaart__titel { font-size: 1.18rem; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; }
.nieuwskaart__intro { font-size: .96rem; color: var(--grijs); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nieuwsraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nieuwsraster li:first-child { grid-column: span 2; }
.nieuwsraster li:first-child .nieuwskaart { display: grid; grid-template-columns: 1.15fr 1fr; }
.nieuwsraster li:first-child .nieuwskaart__beeld { aspect-ratio: auto; height: 100%; min-height: 18rem; }
.nieuwsraster li:first-child .nieuwskaart__titel { font-size: 1.4rem; }
.nieuwsraster li:first-child .nieuwskaart__tekst { padding: 2rem; align-content: center; }
@media (max-width: 62rem) {
  .nieuwskaarten, .nieuwsraster { grid-template-columns: 1fr 1fr; }
  .nieuwsraster li:first-child .nieuwskaart { grid-template-columns: 1fr; }
  .nieuwsraster li:first-child .nieuwskaart__beeld { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 36rem) { .nieuwskaarten, .nieuwsraster { grid-template-columns: 1fr; } .nieuwsraster li:first-child { grid-column: auto; } }

/* Artikelpagina (nieuws) */
.bericht { padding-block: clamp(2.5rem, 5vw, 4rem) var(--sectie); }
.bericht__kop { max-width: 50rem; margin-bottom: 2rem; }
.bericht__kop h1 { font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; margin-bottom: 1.2rem; }
.bericht__meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; color: var(--grijs); font-size: .95rem; }
.bericht__auteur { display: inline-flex; align-items: center; gap: .6rem; }
.bericht__auteur img { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; object-position: 30% 25%; }
.bericht__beeld { margin: 0 0 clamp(2rem, 4vw, 3rem); border-radius: 10px; overflow: hidden; aspect-ratio: 21 / 8; max-height: 26rem; background: var(--papier-2); }
.bericht__beeld img { width: 100%; height: 100%; object-fit: cover; }
.bericht__rij { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.bericht__intro { font-size: 1.25rem; line-height: 1.6; margin-bottom: 1.8rem; font-weight: 400; }
@media (max-width: 62rem) { .bericht__rij { grid-template-columns: 1fr; } .bericht__beeld { aspect-ratio: 16 / 9; } }

/* ---------------------------------------------------------------- paginakop (subpagina's) */

.paginakop { padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem); background: var(--papier); }
.paginakop__binnen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.paginakop__kop { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -.025em; margin-bottom: 1.3rem; }
.paginakop__intro { font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.6; max-width: 34rem; margin-bottom: 1.6rem; }
.paginakop__beeld { position: relative; }
.paginakop__lijst { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--papier-2); box-shadow: var(--schaduw); }
.paginakop__lijst img { width: 100%; height: 100%; object-fit: cover; }
.paginakop__lijst--staand { aspect-ratio: 4 / 4.4; }
.paginakop__lijst--grafiek { background: var(--wit); display: grid; place-items: center; padding: 1rem; }
.paginakop__lijst--grafiek svg { width: 100%; height: auto; }
.paginakop--compact { padding-bottom: 1rem; }
.paginakop--compact .paginakop__binnen { grid-template-columns: minmax(0, 1fr) auto; }
.paginakop--compact + .sectie { padding-top: 2rem; }
.paginakop__portret img { width: 12rem; height: 12rem; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: var(--schaduw); }
@media (max-width: 56rem) {
  .paginakop__binnen { grid-template-columns: 1fr; }
  .paginakop__beeld { order: -1; }
  .paginakop--compact .paginakop__binnen { grid-template-columns: 1fr; }
  .paginakop--compact .paginakop__beeld { display: none; }
}

/* Uitleggrafiek (annuïtair en lineair) */
.grafiek .rente { fill: var(--rood); }
.grafiek .aflossing { fill: var(--dak-2); }
.grafiek .as { stroke: var(--dak-3); stroke-width: 1.5; }
.grafiek text { font-family: var(--letter); fill: var(--inkt); }
.grafiek .kop { font-size: 22px; font-weight: 600; }
.grafiek .label { font-size: 16px; fill: var(--grijs); }

/* Nieuwsoverzicht: geen kopblok, meteen de artikelen */
.nieuwsoverzicht { padding: clamp(1.5rem, 3vw, 2.5rem) 0 var(--sectie); }
.nieuwsoverzicht__kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.5rem; margin-bottom: 1.8rem; }
.nieuwsoverzicht__kop h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.nieuwsoverzicht__kop p { margin: 0; color: var(--grijs); }

/* Wie je spreekt */
.wie { display: inline-flex; align-items: center; gap: .8rem; padding: .45rem 1rem .45rem .45rem; border-radius: 999px; background: var(--wit); border: 1px solid var(--lijn); color: var(--inkt); text-decoration: none; font-size: .95rem; }
.wie img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; object-position: 30% 22%; }
.wie:hover { color: var(--inkt); border-color: var(--inkt); }

/* ---------------------------------------------------------------- artikel (verdieping) */

.artikelrij { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.artikel { max-width: var(--maat); }
.artikel h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 2.6rem 0 1rem; }
.artikel h3 { margin: 2rem 0 .7rem; }
.artikel > :first-child, .artikel__sectie:first-child h2 { margin-top: 0; }
.artikel p, .artikel li { font-size: 1.075rem; }
.artikel ul { margin: 0 0 1.4rem; }
.artikel li { margin-bottom: .45rem; }
.artikel img { border-radius: 10px; margin: 1.5rem 0; }
.artikel hr { border: 0; border-top: 1px solid var(--lijn); margin: 2rem 0; }
.artikel .review { margin: 2.5rem 0; background: var(--wit); box-shadow: 0 1px 2px rgba(42, 42, 44, .06); }
.streeplijst { list-style: none; padding: 0; }
.streeplijst li { position: relative; padding-left: 1.5rem; }
.streeplijst li::before { content: ""; position: absolute; left: 0; top: .78em; width: .75rem; height: 2px; background: var(--rood); }
.chip { display: inline-block; margin-bottom: .6rem; padding: .2rem .7rem; border-radius: 999px; background: var(--papier-2); color: var(--grijs); font-size: .8rem; text-decoration: none; font-weight: 500; }
.eigenwoorden { position: relative; margin: 0 0 2.5rem; padding: 1.8rem 1.8rem 1.6rem; background: var(--wit); border-radius: 10px; }
.eigenwoorden__wie { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; font-size: .85rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--grijs); }
.eigenwoorden__wie img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; object-position: 30% 22%; }
.eigenwoorden p { font-size: 1.1rem; }
.eigenwoorden p:last-child { margin: 0; }

.zijkolom { position: sticky; top: 7rem; display: grid; gap: 1.2rem; }
.zijblok { padding: 1.5rem; background: var(--wit); border-radius: 10px; }
.zijblok__kop { margin: 0 0 .8rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grijs); font-weight: 500; }
.zijblok__kop a { color: inherit; text-decoration: none; }
.zijlijst { list-style: none; margin: 0; padding: 0; }
.zijlijst a { display: block; padding: .45rem 0; color: var(--inkt); text-decoration: none; font-size: .96rem; border-bottom: 1px solid var(--lijn); }
.zijlijst li:last-child a { border-bottom: 0; }
.zijlijst a:hover { color: var(--rood-diep); }
.zijlijst a[aria-current="page"] { color: var(--rood-diep); font-weight: 500; }
.adviseur { text-align: left; }
.adviseur__kop { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.adviseur__kop img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; object-position: 30% 22%; }
.adviseur__naam { font-weight: 500; line-height: 1.3; }
.adviseur__rol { font-size: .88rem; color: var(--grijs); }
.adviseur p { font-size: .96rem; }
.adviseur .knop { margin-bottom: .6rem; }
.documentlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.documentlijst a { display: flex; gap: .55rem; align-items: flex-start; color: var(--inkt); text-decoration: none; font-size: .95rem; line-height: 1.4; }
.documentlijst a:hover { color: var(--rood-diep); }
.documentlijst .icoon { color: var(--rood); margin-top: .1rem; }
@media (max-width: 62rem) { .artikelrij { grid-template-columns: 1fr; } .zijkolom { position: static; } }

/* ---------------------------------------------------------------- tegels */

.tegels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); }
.tegels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tegels--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tegel { display: flex; flex-direction: column; height: 100%; background: var(--wit); border-radius: 10px; overflow: hidden; color: var(--inkt); text-decoration: none; box-shadow: 0 1px 2px rgba(42, 42, 44, .06); transition: box-shadow .2s, transform .2s; }
.tegel:hover { color: var(--inkt); box-shadow: var(--schaduw); transform: translateY(-2px); }
.tegel__beeld { aspect-ratio: 16 / 10; overflow: hidden; background: var(--papier-2); }
.tegel__beeld img, .tegel__beeld svg { width: 100%; height: 100%; object-fit: cover; }
.tegel__tekst { display: grid; gap: .45rem; padding: 1.3rem 1.4rem 1.5rem; }
.tegel__naam { font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; }
.tegel__zin { color: var(--grijs); font-size: .97rem; }
.tegel__verder { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; color: var(--rood-diep); font-size: .95rem; }
@media (max-width: 62rem) { .tegels, .tegels--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 36rem) { .tegels, .tegels--2, .tegels--4 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- vragen */

.vragen { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.vragen__lijst { border-top: 1px solid var(--lijn); }
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.2rem 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 1.08rem; }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover { color: var(--rood-diep); }
.vraag__teken { position: relative; width: 1.1rem; height: 1.1rem; flex: none; }
.vraag__teken::before, .vraag__teken::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: var(--rood); transition: transform .2s; }
.vraag__teken::after { transform: rotate(90deg); }
.vraag[open] .vraag__teken::after { transform: rotate(0); }
.vraag__antwoord { padding: 0 0 1.3rem; max-width: 42rem; }
.vraag__antwoord p:last-child { margin: 0; }
@media (max-width: 56rem) { .vragen { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- kosten */

.kosten { margin: 0 0 1.6rem; }
.kosten__kop { margin-bottom: .8rem; }
.kosten table { width: 100%; border-collapse: collapse; background: var(--wit); border-radius: 10px; overflow: hidden; font-size: .98rem; }
.kosten th, .kosten td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.kosten thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grijs); font-weight: 500; background: var(--papier); }
.kosten tbody th { font-weight: 400; min-width: 11rem; }
.kosten td { white-space: nowrap; font-weight: 500; }
.kosten tr:last-child th, .kosten tr:last-child td { border-bottom: 0; }
.kosten__noot { font-size: .92rem; color: var(--grijs); margin-top: .8rem; }
@media (max-width: 36rem) {
  .kosten table, .kosten tbody, .kosten tr, .kosten th, .kosten td { display: block; }
  .kosten thead { display: none; }
  .kosten tr { border-bottom: 1px solid var(--lijn); padding: .6rem 0; }
  .kosten td { border: 0; padding: .15rem 1.1rem; white-space: normal; }
  .kosten td::before { content: attr(data-kolom) ": "; font-weight: 300; color: var(--grijs); }
  .kosten tbody th { border: 0; padding-bottom: .2rem; font-weight: 500; }
}

/* ---------------------------------------------------------------- beeld en tekst (algemeen) */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split--om > :first-child { order: 2; }
.split__beeld img { width: 100%; border-radius: 10px; aspect-ratio: 4 / 3; object-fit: cover; }
.split__tekst h2 { margin-bottom: 1.2rem; }
@media (max-width: 56rem) { .split { grid-template-columns: 1fr; } .split--om > :first-child { order: 0; } }

.lopend { max-width: var(--maat); }
.lopend h2 { margin: 2.5rem 0 1rem; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.lopend h2:first-child { margin-top: 0; }
.lopend h3 { margin: 1.8rem 0 .6rem; }

/* ---------------------------------------------------------------- contactband */

.contactband { background: var(--inkt); color: var(--wit); position: relative; overflow: hidden; }
.contactband__binnen { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(3rem, 6vw, 4.5rem); }
.contactband__foto { width: 7.5rem; height: 7.5rem; border-radius: 50%; object-fit: cover; object-position: 30% 22%; border: 3px solid var(--wit); }
.contactband h2 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); margin-bottom: .6rem; }
.contactband p { color: var(--zacht); margin: 0; max-width: 36rem; }
.contactband__knoppen { display: grid; gap: .7rem; }
@media (max-width: 62rem) {
  .contactband__binnen { grid-template-columns: auto 1fr; }
  .contactband__knoppen { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 36rem) {
  .contactband__binnen { grid-template-columns: 1fr; }
  .contactband__knoppen { grid-template-columns: 1fr; }
}

/* Contactpagina */
.contactkaarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.contactkaart { height: 100%; display: grid; gap: .5rem; align-content: start; padding: 1.6rem; background: var(--wit); border-radius: 10px; }
.contactkaart .icoon { width: 1.7rem; height: 1.7rem; color: var(--rood); margin-bottom: .4rem; }
.contactkaart h2 { font-size: 1.2rem; letter-spacing: -.01em; }
.contactkaart p { margin: 0; color: var(--grijs); }
.contactkaart a.groot { font-size: 1.3rem; font-weight: 500; color: var(--inkt); text-decoration: none; }
.contactkaart a.groot:hover { color: var(--rood-diep); }
@media (max-width: 56rem) { .contactkaarten { grid-template-columns: 1fr; } }
.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 0; }
.gegevens dt { color: var(--grijs); }
.gegevens dd { margin: 0; }

/* ---------------------------------------------------------------- voet */

.voet { background: #1F1F21; color: var(--zacht); padding: clamp(3.5rem, 7vw, 5rem) 0 2rem; font-size: .95rem; }
.voet a { color: var(--wit); text-decoration: none; }
.voet a:hover { color: var(--rood-licht); text-decoration: underline; }
.voet__raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; }
.voet__logo { width: 11rem; margin-bottom: 1.4rem; }
.voet__kop { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--zacht); font-weight: 500; margin-bottom: 1rem; }
.voet__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.voet__adres { margin-bottom: 1rem; color: var(--wit); }
.voet__score { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.voet__score a { display: inline-flex; gap: .6rem; align-items: center; }
.voet__wet { margin-top: 1.4rem; font-size: .84rem; line-height: 1.6; }
.voet__wet p { margin: 0 0 .4rem; }
@media (max-width: 62rem) { .voet__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 36rem) { .voet__raster { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 404 */

.nietgevonden { padding-block: clamp(4rem, 10vw, 8rem); }
.nietgevonden__binnen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
@media (max-width: 56rem) { .nietgevonden__binnen { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .kop, .voet, .contactband, .zijkolom { display: none; }
  body { background: #fff; }
}

/* Foto bij de kosten op een dienstpagina */
.echt--foto { margin: 1.5rem 0; }
.echt--foto img { width: 100%; margin: 0; border-radius: 10px; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 32%; }

/* Engelse pagina: wat je moet weten als expat (rijen met een lijn erboven, geen kaartjes) */
.weetjes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); }
.weetje { border-top: 2px solid var(--rood); padding-top: 1.1rem; }
.weetje h3 { margin-bottom: .5rem; }
.weetje p { margin: 0; color: var(--grijs); font-size: 1rem; }
.voet__raster--en { grid-template-columns: 1.3fr 1fr; }
@media (max-width: 62rem) { .weetjes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .weetjes, .voet__raster--en { grid-template-columns: 1fr; } }