/* Profinto, de onepager. Donker navy met chartreuse, het logo in een witte
   tegel, Plus Jakarta Sans. Een doek met deeltjes achter de hele pagina: het
   logo in de held, een sterrenveld daarna, en het logo in drie lagen bij Wie
   we zijn (bron/js/deeltjes.js).

   Beweging in twee snelheden: de deeltjes vloeiend, alles wat verschijnt in
   stappen van twaalf beelden per seconde, als stop-motion. Geen verlopen,
   glas, gloed, hoofdletterlabels of gekleurde randen. Haarlijnen in plaats
   van kaarten. Chartreuse alleen als vlak of op donker. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --basis: #03060f;
  --vlak: #0b1124;
  --chartreuse: #c8fc04;
  --navy: #050a20;
  --tekst: #f2f4fa;
  --zacht: rgba(242, 244, 250, 0.7);
  --stil: rgba(242, 244, 250, 0.54);
  --lijn: rgba(242, 244, 250, 0.12);
  --lijn-sterk: rgba(242, 244, 250, 0.28);
  --fout: #ff8a8a;

  --letter: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --curve: cubic-bezier(0.2, 0.7, 0.2, 1);
  --omslag: 74rem;
  --kop-hoogte: 4.5rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--basis); scroll-padding-top: var(--kop-hoogte); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--basis); color: var(--tekst); font: 500 1.0625rem/1.6 var(--letter); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
h1, h2, h3 { font-weight: 800; text-wrap: balance; letter-spacing: -0.03em; }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
mark { background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--chartreuse); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { flex: none; }
.omslag { width: 100%; max-width: var(--omslag); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.naar-inhoud { position: absolute; left: 1rem; top: -4rem; z-index: 60; padding: 0.75rem 1rem; background: var(--tekst); color: var(--basis); border-radius: 0.5rem; }
.naar-inhoud:focus { top: 1rem; }

/* Het doek met deeltjes ligt achter alles; de inhoud erboven. */
.doek { position: fixed; inset: 0; z-index: 0; display: none; width: 100%; height: 100%; pointer-events: none; }
.met-deeltjes .doek { display: block; }
main, .voet { position: relative; z-index: 1; }

/* Korrel: een vleugje filmkorrel dat in stappen verspringt. */
.korrel { position: fixed; inset: -50%; z-index: 50; pointer-events: none; opacity: 0.06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) { .korrel { animation: korrel 0.42s steps(5) infinite; } }
@keyframes korrel { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.1rem; padding: 0 1.4rem; border: 0; border-radius: 0.7rem; background: var(--chartreuse); color: var(--navy); font-weight: 700; font-size: 1rem; text-decoration: none; transition: filter 0.2s; }
.knop:hover { filter: brightness(1.08); }
.knop .ic { transition: transform 0.25s steps(3); }
.knop:hover .ic { transform: translateX(3px); }
.knop:disabled { cursor: progress; filter: saturate(0.4); }
.knop--klein { min-height: 2.75rem; padding: 0 1.1rem; font-size: 0.92rem; }
.knop--stil { background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
.knop--stil:hover { box-shadow: inset 0 0 0 1px var(--tekst); filter: none; }

/* Kop */
.kop { position: fixed; inset: 0 0 auto; z-index: 40; padding-top: env(safe-area-inset-top, 0px); background: var(--basis); box-shadow: 0 1px 0 var(--lijn); transition: transform 0.33s steps(4), opacity 0.33s steps(4); }
/* In de held is er geen kop: het orakel krijgt de ruimte. Hij komt pas als je de held uit scrolt (site.js), of als je er met de tab-toets in komt. */
.js .kop:not(.is-zichtbaar):not(:focus-within) { transform: translateY(-100%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .kop { transition: none; } }
.kop-rij { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem); height: var(--kop-hoogte); }
.kop-nav { display: flex; align-items: center; gap: 0.15rem; }
.kop-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem; border-radius: 0.5rem; font-size: 0.95rem; font-weight: 600; color: var(--zacht); text-decoration: none; white-space: nowrap; }
.kop-link:hover { color: var(--tekst); }
.kop-knop { margin-left: auto; white-space: nowrap; }
.kop-knop-kort { display: none; }
@media (max-width: 900px) { .kop-link { display: none; } }
@media (max-width: 420px) { .kop-knop-lang { display: none; } .kop-knop-kort { display: inline; } }

.merk { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; text-decoration: none; }
.merk-tegel { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; background: #fff; }
.merk-tegel img { width: 1.35rem; }
.merk-woord { display: inline-grid; overflow: hidden; height: 1.5em; font-weight: 800; font-size: 1.22rem; letter-spacing: -0.03em; line-height: 1.5; }
.merk-laag { grid-area: 1 / 1; transition: transform 0.42s steps(5), opacity 0.42s steps(5); }
.merk-laag--om { transform: translateY(100%); opacity: 0; }
.merk-laag mark { padding: 0 0.12em; background: var(--chartreuse); color: var(--navy); border-radius: 0.2em; }
.merk:hover .merk-laag:first-child, .merk:focus-visible .merk-laag:first-child { transform: translateY(-100%); opacity: 0; }
.merk:hover .merk-laag--om, .merk:focus-visible .merk-laag--om { transform: none; opacity: 1; }

/* ------------------------------------------------------------ held */

.held { position: relative; display: grid; grid-template-rows: minmax(10rem, 1fr) auto; gap: clamp(0.75rem, 2.5vh, 2rem); min-height: 100vh; min-height: 100svh; padding: calc(var(--kop-hoogte) + env(safe-area-inset-top, 0px) + 0.5rem) 0 clamp(2rem, 6vh, 4rem); text-align: center; }
.js .held { padding-top: calc(env(safe-area-inset-top, 0px) + clamp(1rem, 4vh, 2.5rem)); }
.held-plek { position: relative; min-height: 0; }
.held-plek svg { position: absolute; inset: 0; width: auto; height: min(88%, 28rem); margin: auto; aspect-ratio: 192 / 223; }
.met-deeltjes .held-plek svg { visibility: hidden; }
.held-tekst { display: grid; justify-items: center; }
.held h1 { width: 100%; max-width: 62rem; font-size: clamp(2.15rem, 0.9rem + 3.9vw, 4.4rem); line-height: 1.04; letter-spacing: -0.04em; }
.held-regels { display: block; }
.regel { display: block; }
.held-wie { color: var(--k, var(--chartreuse)); }
.held-klein { max-width: 48rem; margin-top: 1.1rem; font-size: 0.86rem; line-height: 1.5; color: var(--stil); }
/* Geen knoppen in de held: een rustige link naar het verhaal. De actie staat in de menubalk, die na de held verschijnt. */
.held-verder { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; margin-top: clamp(1.25rem, 3vh, 2rem); font-weight: 700; color: var(--tekst); text-decoration: none; }
.held-verder .ic { color: var(--zacht); transition: transform 0.25s steps(3); }
.held-verder:hover .ic { transform: translateY(3px); }

/* ------------------------------------------------------------ blokken */

.blok { position: relative; padding-block: clamp(5rem, 13vh, 9rem); }
/* De kop mag de volle breedte gebruiken (een korte kop blijft zo op een regel), de tekst eronder niet. */
.blok-kop { margin-bottom: clamp(2rem, 5vh, 3.25rem); }
.blok-kop h2, .wie h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); line-height: 1.06; }
.blok-kop p { max-width: 54rem; margin-top: 0.9rem; font-size: 1.1rem; color: var(--zacht); }
.blok-kop .voetnoot { margin-top: 0.75rem; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); font-weight: 700; letter-spacing: -0.01em; color: var(--tekst); }
#bouwen .blok-kop { max-width: 52rem; }

/* Wat we bouwen */
.bouw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.bouw li { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 0.3rem 1rem; padding: 1.5rem 0 1.75rem; border-top: 1px solid var(--lijn); }
.bouw .ic { grid-row: span 2; width: 1.6rem; height: 1.6rem; margin-top: 0.12rem; color: var(--chartreuse); }
.bouw h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
.bouw p { font-size: 0.98rem; color: var(--zacht); }
/* De stapel (9 november 2026, naar de stapel op sellgrip.com): drie kaarten die op een breed scherm
   onder de kop blijven staan terwijl de volgende eroverheen schuift. De onderste wijkt iets terug en
   wordt donkerder (--p van 0 tot 1, gezet in site.js). Op een telefoon, op een laag scherm en zonder
   beweging staan ze gewoon onder elkaar. */
.stapel { position: relative; margin-top: clamp(2rem, 5vh, 3rem); }
.st-kaart { --st-top: calc(var(--kop-hoogte) + 1rem); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 2rem clamp(2rem, 4vw, 4.5rem); margin-bottom: 1rem; padding: clamp(1.5rem, 4vw, 3.5rem); border-radius: 1.5rem; background: var(--st-bg); box-shadow: 0 0 0 1px var(--lijn-sterk); }
.st-k1 { --st-bg: #0b1124; box-shadow: 0 0 0 1px var(--chartreuse); }
.st-k2 { --st-bg: #0d142b; --st-top: calc(var(--kop-hoogte) + 2rem); }
.st-k3 { --st-bg: #101833; --st-top: calc(var(--kop-hoogte) + 3rem); margin-bottom: 0; }
@media (min-width: 960px) and (min-height: 660px) and (prefers-reduced-motion: no-preference) {
  .st-kaart { position: sticky; top: var(--st-top); height: min(calc(100svh - var(--kop-hoogte) - 6rem), 42rem); min-height: 34rem; margin-bottom: 18svh; overflow: hidden; transform-origin: 50% 0; transform: scale(calc(1 - 0.05 * var(--p, 0))); will-change: transform; }
  .st-kaart.st-k3 { margin-bottom: 0; }
  .st-kaart::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--basis); opacity: calc(0.6 * var(--p, 0)); pointer-events: none; }
}
@media (max-width: 959px) { .st-kaart { grid-template-columns: minmax(0, 1fr); } }
.st-label { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1.1rem; font-size: 0.95rem; font-weight: 700; color: var(--stil); }
.st-num { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--lijn-sterk); font-size: 0.82rem; color: var(--tekst); font-variant-numeric: tabular-nums; }
.st-kaart h3 { font-size: clamp(1.9rem, 1.1rem + 1.9vw, 2.9rem); line-height: 1.05; letter-spacing: -0.04em; }
.st-tekst > p:not(.st-label):not(.st-sub) { max-width: 34rem; margin-top: 1rem; font-size: 1.06rem; color: var(--zacht); }
.st-sub { margin-top: 1.4rem; font-size: 0.92rem; font-weight: 700; color: var(--stil); }
.st-lijst { display: grid; gap: 0.55rem; margin-top: 1.4rem; }
.st-sub + .st-lijst { margin-top: 0.75rem; }
.st-lijst li { display: flex; align-items: center; gap: 0.65rem; font-weight: 700; transition: color 0.25s steps(3); }
.st-lijst .ic { width: 1.2rem; height: 1.2rem; color: var(--chartreuse); }
.st-lijst--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
/* De lijst bij elk toestel volgt het voorbeeld: het toestel dat je ziet licht op. */
.st-lijst.is-volgt li:not(.is-nu) { color: var(--stil); }
.st-lijst.is-volgt li:not(.is-nu) .ic { color: var(--stil); }
.st-media { min-width: 0; }

/* Een voorbeeld: een donker venster met een kopregel. */
.vb { margin: 0; overflow: hidden; border-radius: 1rem; background: var(--basis); box-shadow: 0 0 0 1px var(--lijn-sterk); }
.vb-kop { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0.55rem 1rem; border-bottom: 1px solid var(--lijn); font-size: 0.86rem; font-weight: 700; color: var(--zacht); }
.vb-label { padding: 0.1rem 0.55rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--lijn-sterk); font-size: 0.74rem; color: var(--stil); }
.vb small { display: block; font-size: 0.78rem; font-weight: 500; color: var(--stil); }

/* 1. Je eigen beheer */
.bh { display: grid; grid-template-columns: 10rem minmax(0, 1fr); }
.bh-menu { display: grid; align-content: start; gap: 0.15rem; padding: 0.75rem 0.6rem; border-right: 1px solid var(--lijn); }
.bh-menu li { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 0.5rem; font-size: 0.86rem; font-weight: 600; color: var(--zacht); }
.bh-menu li.is-hier { background: var(--vlak); color: var(--tekst); }
.bh-menu .ic { width: 1.05rem; height: 1.05rem; color: var(--chartreuse); }
.bh-dag { padding: 1rem 1.15rem 0.6rem; }
.bh-titel { margin-bottom: 0.35rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; }
.bh-rij { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.7rem 0; border-top: 1px solid var(--lijn); }
.bh-rij .ic { width: 1.15rem; height: 1.15rem; color: var(--zacht); }
.bh-rij b { display: block; font-size: 0.9rem; line-height: 1.3; }
.bh-rij em { display: grid; justify-items: end; font-style: normal; }
.bh-rij em span { grid-area: 1 / 1; padding: 0.12rem 0.55rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--lijn-sterk); font-size: 0.76rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bh-rij .bh-na { background: var(--chartreuse); box-shadow: none; color: var(--navy); }
.bh-voor { opacity: 0; }
@media (max-width: 560px) {
  .bh { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .bh-menu li { justify-content: center; padding: 0.5rem 0; }
  .bh-menu li span { display: none; }
  .bh-dag { padding-inline: 0.9rem; }
}

/* 2. Elk toestel: het scherm wordt smaller, de site erin deelt zich anders in. */
.tt { display: grid; place-items: end center; height: 21rem; padding: 1.25rem 1.25rem 0; }
.tt-scherm { container-type: inline-size; width: 100%; height: 76%; overflow: hidden; border-radius: 0.6rem 0.6rem 0 0; background: var(--vlak); box-shadow: 0 0 0 1.5px var(--lijn-sterk); transition: width 0.5s steps(6), height 0.5s steps(6), border-radius 0.5s steps(6); }
[data-stand="tablet"] .tt-scherm { width: 50%; height: 92%; border-radius: 0.9rem 0.9rem 0 0; }
[data-stand="telefoon"] .tt-scherm { width: 28%; height: 100%; border-radius: 1.2rem 1.2rem 0 0; }
:where(.tt-site) i { display: block; }
.tt-balk { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--lijn); }
.tt-logo { width: 2.2rem; height: 0.5rem; margin-right: auto; border-radius: 2px; background: var(--tekst); }
.tt-menu { display: none; gap: 0.55rem; }
.tt-menu i { width: 1.5rem; height: 0.3rem; border-radius: 2px; background: var(--stil); }
.tt-knopje { display: none; width: 2.4rem; height: 0.75rem; border-radius: 3px; background: var(--chartreuse); }
.tt-burger { width: 0.95rem; height: 0.6rem; border-block: 2px solid var(--zacht); }
.tt-held { display: grid; gap: 0.75rem; padding: 0.9rem 0.75rem; }
.tt-tekst i { height: 0.55rem; margin-bottom: 0.35rem; border-radius: 2px; background: rgba(242, 244, 250, 0.82); }
.tt-r1 { width: 92%; }
.tt-r2 { width: 64%; }
.tt-tekst .tt-r3 { width: 86%; height: 0.3rem; margin-top: 0.5rem; background: var(--stil); }
.tt-tekst .tt-kort { width: 58%; margin-top: 0; }
.tt-tekst .tt-knop { width: 3.4rem; height: 0.85rem; margin-top: 0.6rem; border-radius: 3px; background: var(--chartreuse); }
.tt-foto { aspect-ratio: 16 / 10; border-radius: 0.35rem; background: rgba(242, 244, 250, 0.1); }
.tt-blokken { display: grid; gap: 0.5rem; padding: 0 0.75rem 0.9rem; }
.tt-blokken i { height: 2.6rem; border-radius: 0.35rem; box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
@container (min-width: 10rem) {
  .tt-blokken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tt-blokken i:nth-child(3) { display: none; }
}
@container (min-width: 16rem) {
  .tt-menu { display: flex; }
  .tt-knopje { display: block; }
  .tt-burger { display: none; }
  .tt-held { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 1.1rem; padding: 1.4rem 1.1rem; }
  .tt-tekst .tt-r1, .tt-tekst .tt-r2 { height: 0.75rem; }
  .tt-blokken { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 1.1rem; }
  .tt-blokken i:nth-child(3) { display: block; }
}

/* 3. De maanduitdraai */
.seo { display: grid; gap: 1rem; padding: 1rem 1.15rem 1.15rem; }
.seo-zoek { display: flex; align-items: center; gap: 0.6rem; height: 2.6rem; padding: 0 1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--lijn-sterk); font-size: 0.92rem; font-weight: 600; }
.seo-zoek .ic { width: 1.05rem; height: 1.05rem; color: var(--stil); }
.seo-hit b { display: block; margin-top: 0.1rem; font-size: 1rem; line-height: 1.3; color: #c9d2ff; }
.seo-hit > span { display: block; font-size: 0.84rem; color: var(--zacht); }
.seo-grafiek { padding-top: 0.9rem; border-top: 1px solid var(--lijn); }
.seo-kop { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; font-size: 0.86rem; white-space: nowrap; }
.seo-kop span { color: var(--stil); }
.seo-plot { position: relative; margin: 0.7rem 0.4rem 0 0; }
.seo-plot svg { display: block; width: 100%; height: 6rem; overflow: visible; }
.seo-raster { fill: none; stroke: var(--lijn); stroke-width: 1; vector-effect: non-scaling-stroke; }
.seo-lijn { fill: none; stroke: var(--chartreuse); stroke-width: 2.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.seo-punt { position: absolute; left: 100%; width: 0.7rem; height: 0.7rem; translate: -50% -50%; border-radius: 50%; background: var(--chartreuse); box-shadow: 0 0 0 4px var(--basis); }
.seo-maanden { display: flex; justify-content: space-between; margin: 0.4rem 0.4rem 0 0; font-size: 0.72rem; color: var(--stil); }
.seo-cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--lijn); }
.seo-cijfers dt { font-size: 0.76rem; color: var(--stil); }
.seo-cijfers dd { margin: 0.1rem 0 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* Beweging in de voorbeelden, in stappen van twaalf beelden per seconde. Alleen met script en
   beweging: dan wacht alles tot de kaart ligt (.is-aan), anders staat de eindstand er. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-vb]:not(.is-aan) :is(.bh-menu li, .bh-rij, .seo-zoek, .seo-hit, .seo-grafiek, .seo-cijfers > div) { opacity: 0; }
  .js .is-aan .bh-menu li { animation: vb-in 0.33s steps(4) both; animation-delay: calc(var(--n) * 125ms); }
  .js .is-aan .bh-rij { animation: vb-in 0.42s steps(5) both; animation-delay: calc(0.9s + var(--n) * 0.5s); }
  .js .is-aan .bh-voor { animation: vb-weg 0.25s steps(3) 3.3s both; }
  .js .is-aan .bh-na { animation: vb-pop 0.42s steps(5) 3.3s both; }
  .js .is-aan .seo-zoek { animation: vb-in 0.33s steps(4) both; }
  .js .is-aan .seo-vraag { animation: vb-typ 1s steps(15) 0.3s both; }
  .js .is-aan .seo-hit { animation: vb-in 0.42s steps(5) 1.5s both; }
  .js .is-aan .seo-grafiek { animation: vb-in 0.33s steps(4) 2s both; }
  .js .is-aan .seo-lijn { animation: vb-teken 1.25s steps(15) 2.3s both; }
  .js .is-aan .seo-punt { animation: vb-pop 0.42s steps(5) 3.5s both; }
  .js .is-aan .seo-cijfers > div { animation: vb-in 0.42s steps(5) both; animation-delay: calc(3.7s + var(--n) * 166ms); }
}
@keyframes vb-in { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes vb-weg { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vb-pop { 0% { opacity: 0; scale: 0.6; } 60% { opacity: 1; scale: 1.12; } 100% { opacity: 1; scale: 1; } }
@keyframes vb-typ { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes vb-teken { 0% { clip-path: inset(-10% 100% -10% 0); } 100% { clip-path: inset(-10% 0 -10% 0); } }

.bouw-verder { margin-top: 1.25rem; color: var(--stil); }
@media (max-width: 900px) { .bouw { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .bouw { grid-template-columns: 1fr; } }

/* Voor elk type bedrijf: links een scherm waarop de deeltjes de gekozen site
   natekenen (het scherm zelf is doorzichtig, de deeltjes liggen eronder),
   rechts alles wat we maakten. Zonder deeltjes staat de miniatuur er, grijs. */
.index { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.index-scherm-kolom { position: sticky; top: calc(var(--kop-hoogte) + 1.5rem); }
.index-scherm { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 0.9rem; box-shadow: 0 0 0 1px var(--lijn-sterk); }
.index-mini { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(1) contrast(1.05) brightness(0.8); }
.met-deeltjes .index-mini { visibility: hidden; }
.index-bijschrift { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem; min-height: 3.4em; margin-top: 1rem; }
.index-bijschrift b { font-size: 1.15rem; letter-spacing: -0.02em; }
.index-bijschrift span { color: var(--zacht); }
.index-bijschrift .index-label { color: var(--stil); font-size: 0.88rem; }
.index-bijschrift a { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; font-weight: 700; color: var(--chartreuse); text-decoration: none; }
.index-bijschrift a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.index-lijsten { display: grid; gap: clamp(1.75rem, 4vh, 2.5rem); }
.index-groep h3 { padding-bottom: 0.55rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--lijn); font-size: 1.05rem; letter-spacing: -0.01em; }
.index-meer { font-size: 0.92rem; color: var(--stil); text-wrap: balance; }
.index-meer a { color: var(--zacht); font-weight: 700; text-underline-offset: 0.2em; }
.index-meer a:hover { color: var(--tekst); }
.index-rij { display: block; padding: 0.22rem 0; font-size: 0.97rem; font-weight: 600; line-height: 1.35; color: var(--zacht); text-decoration: none; transition: color 0.17s steps(2); }
.index-rij:hover { color: var(--tekst); }
.index-rij.is-actief { color: var(--chartreuse); }
@media (max-width: 860px) {
  .index { grid-template-columns: 1fr; }
  .index-scherm-kolom { position: relative; top: 0; }
}

/* Prijzen: een trap; elke trede staat hoger, met het verschil erboven. */
.trap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 0.6rem; border-bottom: 1px solid var(--lijn-sterk); }
.trede { display: grid; gap: 0.45rem; }
.trede-erbij { font-size: 0.92rem; font-weight: 800; color: var(--stil); }
.trede-vlak { display: grid; align-content: start; gap: 0.35rem; min-height: calc(15.5rem + var(--i) * 2.4rem); padding: 1.1rem 1.2rem 1.3rem; border-radius: 0.8rem 0.8rem 0 0; background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn); }
.trede h3 { font-size: 1rem; letter-spacing: -0.01em; }
.trede-prijs { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.trede-wat { font-size: 0.9rem; line-height: 1.45; color: var(--zacht); }
.trede-lijst { display: grid; gap: 0.4rem; margin-top: 0.15rem; }
.trede-lijst li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; line-height: 1.4; color: var(--zacht); }
.trede-lijst .trede-plus { display: block; font-weight: 700; color: var(--tekst); }
.trede.is-aanrader .trede-lijst .trede-plus { color: var(--navy); }
.trede-lijst .ic { width: 1rem; height: 1rem; margin-top: 0.12rem; color: var(--chartreuse); }
.trede.is-aanrader .trede-vlak { background: var(--chartreuse); color: var(--navy); box-shadow: none; }
.trede.is-aanrader .trede-wat { color: rgba(5, 10, 32, 0.78); }
.trede.is-aanrader .trede-lijst li { color: rgba(5, 10, 32, 0.82); }
.trede.is-aanrader .trede-lijst .ic { color: var(--navy); }
.trede.is-aanrader .trede-erbij { color: var(--chartreuse); }
.trede-label { justify-self: start; margin-bottom: 0.15rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--navy); color: var(--chartreuse); font-size: 0.76rem; font-weight: 800; }
.missie { margin-top: clamp(3rem, 7vh, 4.5rem); }
.missie figcaption { font-size: 0.95rem; font-weight: 700; color: var(--stil); }
.missie blockquote { margin: 0.6rem 0 0; }
.missie p { max-width: 64rem; font-size: clamp(1.6rem, 1rem + 1.9vw, 2.75rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.035em; text-wrap: pretty; }
.zeker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); margin-top: clamp(2rem, 5vh, 3rem); }
.zeker li { display: grid; align-content: start; gap: 0.25rem; padding-top: 1rem; border-top: 1px solid var(--lijn); }
.zeker b { font-size: 1.05rem; }
.zeker span { font-size: 0.95rem; color: var(--zacht); }
.prijs-noot { max-width: 52rem; margin-top: 2rem; font-size: 0.92rem; color: var(--stil); }
@media (max-width: 1000px) { .zeker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .trap { grid-template-columns: 1fr; gap: 1rem; border-bottom: 0; }
  .trede { grid-template-columns: 1fr; }
  .trede-vlak { min-height: 0; border-radius: 0.8rem; }
  .zeker { grid-template-columns: 1fr; }
}

/* Wie we zijn: het logo in drie lagen, met een naam bij elke laag. */
.wie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.wie-figuur { position: relative; width: 100%; max-width: 30rem; aspect-ratio: 1; justify-self: center; }
.wie-figuur svg { position: absolute; inset: 14%; width: 72%; height: 72%; }
.met-deeltjes .wie-figuur svg { visibility: hidden; }
.laag-naam { position: absolute; font-size: clamp(1rem, 0.85rem + 0.5vw, 1.3rem); font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.laag-naam--0 { left: 0; top: 14%; color: var(--chartreuse); }
.laag-naam--1 { right: 4%; top: 4%; color: #c9d2ff; }
.laag-naam--2 { right: 0; bottom: 16%; color: #8f9bff; }
.met-deeltjes .laag-naam { left: 0; top: 0; right: auto; bottom: auto; opacity: 0; transition: opacity 0.25s steps(3); will-change: transform; }
.met-deeltjes .laag-naam:not(.is-te-zien) { pointer-events: none; }
.met-deeltjes .laag-naam.is-te-zien { opacity: 1; }
/* De namen zijn links naar LinkedIn: een lijn in de kleur van de laag tekent zich onder de naam. */
.laag-naam { text-decoration: none; }
.laag-naam::after { content: ''; position: absolute; left: 0; right: 0; bottom: -0.2em; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.25s steps(3); }
.laag-naam:hover::after, .laag-naam:focus-visible::after { transform: scaleX(1); }
@media (hover: none) { .laag-naam::after { transform: scaleX(1); opacity: 0.5; } }
.wie-tekst p { margin-top: 1rem; font-size: 1.1rem; color: var(--zacht); }
.wie-tekst a { color: var(--tekst); text-underline-offset: 0.2em; text-decoration-color: var(--lijn-sterk); }
.wie-tekst a:hover { text-decoration-color: var(--chartreuse); }
.wie-naam-zin b { font-weight: 800; font-style: italic; color: var(--tekst); }
@media (max-width: 860px) { .wie { grid-template-columns: 1fr; } .wie-figuur { max-width: 22rem; } }

/* Contact: de slogan, drie stappen en het formulier. */
.contact { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.stappen { display: grid; gap: 0.9rem; counter-reset: stap; }
.stappen li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.1rem 1rem; padding-top: 0.9rem; border-top: 1px solid var(--lijn); }
.stappen li::before { counter-increment: stap; content: counter(stap); grid-row: span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; background: var(--vlak); box-shadow: inset 0 0 0 1px var(--lijn-sterk); font-weight: 800; }
.stappen span { color: var(--zacht); }
.contact-mail { margin-top: 1.75rem; color: var(--zacht); }
.contact-mail a { color: var(--tekst); }
.formulier { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: 1.1rem; background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn); }
.veld { display: grid; align-content: start; gap: 0.4rem; }
.veld--breed, .formulier .knop, .formulier-melding, .formulier-privacy { grid-column: 1 / -1; }
.veld label { font-size: 0.95rem; font-weight: 700; }
.veld small { font-weight: 500; color: var(--stil); }
.veld input { width: 100%; height: 3.1rem; padding: 0 0.95rem; border: 0; border-radius: 0.65rem; background: var(--basis); box-shadow: inset 0 0 0 1px var(--lijn-sterk); color: var(--tekst); }
.veld input::placeholder { color: var(--stil); }
.veld input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--chartreuse); }
.veld input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--fout); }
.formulier .knop { margin-top: 0.25rem; }
.formulier-melding { font-weight: 600; }
.formulier-privacy { font-size: 0.85rem; color: var(--stil); }
.lokvogel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .formulier { grid-template-columns: 1fr; } }

/* Voet: merk, vier kolommen met interne links (goed voor vindbaarheid) en een onderbalk. */
.voet { padding: clamp(3.5rem, 9vh, 5.5rem) 0 2rem; border-top: 1px solid var(--lijn); background: var(--basis); }
.voet-boven { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 3vw, 2.5rem); }
.voet-merk { display: grid; align-content: start; justify-items: start; gap: 1.1rem; }
.voet-merk p { max-width: 22rem; font-size: 0.95rem; color: var(--zacht); }
.voet-kolom { display: grid; align-content: start; gap: 0.15rem; }
.voet-kolom h2 { margin-bottom: 0.6rem; font-size: 0.95rem; letter-spacing: -0.01em; }
.voet-kolom a, .voet-kolom span { display: block; padding: 0.3rem 0; font-size: 0.93rem; line-height: 1.4; color: var(--zacht); text-decoration: none; }
.voet-kolom a:hover { color: var(--tekst); }
.voet-kolom address { display: grid; font-style: normal; }
.voet-onder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; margin-top: clamp(2.5rem, 6vh, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--lijn); font-size: 0.85rem; color: var(--stil); }
.voet-juridisch { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.voet-juridisch a { display: inline-flex; align-items: center; min-height: 44px; color: var(--stil); text-decoration: none; }
.voet-juridisch a:hover { color: var(--tekst); }
@media (max-width: 1080px) { .voet-boven { grid-template-columns: repeat(2, minmax(0, 1fr)); } .voet-merk { grid-column: 1 / -1; } }
@media (max-width: 520px) { .voet-boven { grid-template-columns: 1fr; } }

/* Cookiemelding (alleen op profinto.com): klein, onderaan, in stop-motion erin. */
.koekje { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 45; display: grid; gap: 0.75rem; width: min(26rem, calc(100% - 32px)); padding: 1rem 1.1rem; border-radius: 0.9rem; background: var(--vlak); box-shadow: 0 0 0 1px var(--lijn-sterk), 0 24px 60px -24px rgba(0, 0, 0, 0.9); font-size: 0.92rem; color: var(--zacht); }
.koekje a { color: var(--tekst); }
.koekje-knoppen { display: flex; justify-content: flex-end; gap: 0.5rem; }
@media (prefers-reduced-motion: no-preference) { .koekje:not([hidden]) { animation: koekje 0.42s steps(5) both; animation-delay: 1.2s; } }
@keyframes koekje { 0% { opacity: 0; transform: translateY(14px); } 60% { opacity: 1; transform: translateY(-2px); } 100% { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ verschijnen */

/* In stappen van twaalf beelden per seconde, met --d als vertraging per beeld. */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(14px); }
  .js .rv.is-in { opacity: 1; transform: none; transition: opacity 0.42s steps(5), transform 0.42s steps(5); transition-delay: calc(var(--d, 0) * 83ms); }
  .js .trap .trede { opacity: 0; transform: translateY(28px); }
  .js .trap.is-in .trede { animation: stijg 0.42s steps(5) both; animation-delay: calc(var(--i) * 166ms); }
}
@keyframes stijg { 0% { opacity: 0; transform: translateY(28px); } 60% { opacity: 1; transform: translateY(-4px); } 100% { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ leespagina's */

/* De juridische pagina's, de werkplaats en de artikelen daarin. WordPress zet ze in
   onepager/schil.html (bouw.mjs): dezelfde kop en voet als de onepager, zonder deeltjes.
   Rustig om te lezen: tekst op hooguit 46rem, haarlijnen, rechts de verwante pagina's. */
.lees { padding: calc(var(--kop-hoogte) + clamp(3rem, 9vh, 5.5rem)) 0 clamp(4rem, 10vh, 6.5rem); }
.lees-kop { max-width: 54rem; margin-bottom: clamp(2.5rem, 6vh, 3.5rem); }
.lees-pad { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; margin-bottom: 1.1rem; font-size: 0.9rem; color: var(--stil); }
.lees-pad a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.75rem; color: var(--zacht); text-decoration: none; }
.lees-pad a:hover { color: var(--tekst); }
.lees-kop h1 { font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.75rem); line-height: 1.05; letter-spacing: -0.04em; }
.lees-kop p { max-width: 46rem; margin-top: 1rem; font-size: 1.1rem; color: var(--zacht); }
.lees-raster { display: grid; grid-template-columns: minmax(0, 46rem) minmax(0, 15rem); justify-content: space-between; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; padding-top: clamp(2rem, 5vh, 3rem); border-top: 1px solid var(--lijn); }
.lees-raster--breed { grid-template-columns: minmax(0, 1fr); }

.lees-tekst { min-width: 0; color: var(--zacht); }
.lees-tekst > * + * { margin-top: 1.1rem; }
.lees-tekst > h2 { margin-top: 2.75rem; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.2; color: var(--tekst); }
.lees-tekst > h3 { margin-top: 2rem; font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.02em; color: var(--tekst); }
.lees-tekst > h2 + *, .lees-tekst > h3 + * { margin-top: 0.7rem; }
.lees-tekst > :first-child { margin-top: 0; }
.lees-tekst strong, .lees-tekst b { font-weight: 700; color: var(--tekst); }
.lees-tekst a { color: var(--tekst); text-decoration-color: var(--lijn-sterk); text-underline-offset: 0.2em; }
.lees-tekst a:hover { text-decoration-color: var(--tekst); }
.lees-tekst ul, .lees-tekst ol { display: grid; gap: 0.5rem; padding-left: 1.25rem; }
.lees-tekst ul { list-style: disc; }
.lees-tekst ol { list-style: decimal; }
.lees-tekst li::marker { color: var(--stil); }
.lees-tekst img { border-radius: 0.9rem; box-shadow: 0 0 0 1px var(--lijn-sterk); }
.lees-tekst figure figcaption { margin-top: 0.6rem; font-size: 0.88rem; color: var(--stil); }
.lees-tekst .jr-intro { font-size: 1.2rem; line-height: 1.55; color: var(--tekst); }
.lees-tekst blockquote { margin: 2rem 0 0; padding: 1.5rem 0; border-block: 1px solid var(--lijn); }
.lees-tekst blockquote p { font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem); font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; color: var(--tekst); }
.lees-tekst blockquote cite { display: block; margin-top: 0.75rem; font-size: 0.92rem; font-style: normal; color: var(--stil); }

.lees-tekst .jr-tabel { overflow-x: auto; }
.lees-tekst table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.lees-tekst th { padding: 0 1rem 0.6rem 0; font-size: 0.85rem; font-weight: 600; text-align: left; color: var(--stil); }
.lees-tekst td { padding: 0.75rem 1rem 0.75rem 0; border-top: 1px solid var(--lijn); vertical-align: top; }
.lees-tekst td:first-child { color: var(--tekst); }
.lees-tekst .jr-gegevens { margin-bottom: 0; }
.lees-tekst .jr-gegevens div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--lijn); }
.lees-tekst .jr-gegevens dt { color: var(--stil); }
.lees-tekst .jr-gegevens dd { margin: 0; color: var(--tekst); }

.lees-tekst .br-meter { display: grid; gap: 0.4rem; margin-top: 1.75rem; padding: 1.5rem 0; border-block: 1px solid var(--lijn); }
.lees-tekst .br-meter-kop { font-size: 0.9rem; color: var(--stil); }
.lees-tekst .br-meter-getal { font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; color: var(--tekst); }
.lees-tekst .br-meter-van { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--zacht); }
.lees-tekst .br-meter-spoor { height: 0.5rem; margin-top: 0.4rem; border-radius: 1rem; background: var(--lijn); overflow: hidden; }
.lees-tekst .br-meter-vulling { display: block; width: calc(var(--deel, 0) * 100%); height: 100%; border-radius: inherit; background: var(--zacht); }

.lees-naast { position: sticky; top: calc(var(--kop-hoogte) + 2rem); display: grid; }
.lees-naast p { margin-bottom: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--stil); }
.lees-naast a { display: flex; align-items: center; min-height: 44px; padding: 0.3rem 0; font-size: 0.95rem; line-height: 1.35; color: var(--zacht); text-decoration: none; }
.lees-naast a:hover { color: var(--tekst); }
.lees-naast a[aria-current] { font-weight: 700; color: var(--tekst); }

/* De werkplaats: artikelen onder elkaar in haarlijnen, met een filter als er genoeg onderwerpen zijn. */
.lees-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.lees-filter button { min-height: 44px; padding: 0 1rem; border: 0; border-radius: 2rem; background: transparent; box-shadow: inset 0 0 0 1px var(--lijn-sterk); font-size: 0.92rem; font-weight: 600; color: var(--zacht); }
.lees-filter button:hover { color: var(--tekst); box-shadow: inset 0 0 0 1px var(--tekst); }
.lees-filter button[aria-pressed="true"] { background: var(--tekst); color: var(--basis); box-shadow: none; }
.lees-artikelen { border-bottom: 1px solid var(--lijn); }
.lees-artikel { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 0.5rem clamp(1.5rem, 4vw, 3rem); padding: clamp(1.5rem, 3.5vh, 2rem) 0; border-top: 1px solid var(--lijn); color: inherit; text-decoration: none; }
.lees-artikelen > .lees-artikel:first-child { border-top: 0; }
.lees-artikel-meta { padding-top: 0.35rem; font-size: 0.88rem; color: var(--stil); }
.lees-artikel-meta > span { display: block; }
.lees-artikel h2 { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); line-height: 1.2; text-decoration-color: var(--lijn-sterk); text-underline-offset: 0.18em; }
.lees-artikel:hover h2 { text-decoration-line: underline; }
.lees-artikel p { max-width: 46rem; margin-top: 0.5rem; color: var(--zacht); }
.lees-artikel-over { display: block; margin-top: 0.6rem; font-size: 0.88rem; color: var(--stil); }
.lees-leeg { padding: 2rem 0; color: var(--zacht); }

.lees-verder { padding-block: clamp(4rem, 10vh, 6rem); border-top: 1px solid var(--lijn); }
.lees-verder h2 { max-width: 40rem; font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.08; }
.lees-verder p { max-width: 40rem; margin-top: 0.9rem; font-size: 1.1rem; color: var(--zacht); }
.lees-verder .knop { margin-top: 1.75rem; }

@media (max-width: 900px) {
  .lees-raster { grid-template-columns: minmax(0, 1fr); }
  .lees-naast { position: static; padding-top: 2rem; border-top: 1px solid var(--lijn); }
  .lees-artikel { grid-template-columns: minmax(0, 1fr); }
  .lees-artikel-meta { padding-top: 0; }
  .lees-artikel-meta > span { display: inline; }
}