/* ============================================================
   INZICHTEN — stijl voor de artikelpagina's

   Deze pagina's staan LOS van index.html: ze hebben een eigen, echt
   adres (/inzichten/…) zodat Google ze als aparte pagina kan indexeren.
   Dat kan niet binnen de hash-router van de SPA.

   Maar ze moeten wél dezelfde site zijn. Daarom is de "chrome" hieronder
   — de announce-balk, de navigatiebalk en de footer — één-op-één
   overgenomen uit het style-blok van index.html, net als de behandeling
   van een lichte sectie (crème + rasterpatroon + limegloed, zoals
   section.tb-hero).

   >> WIJZIGT DE CHROME IN index.html, DAN MOET HIJ HIER MEE. <<
   Dat is de prijs van twee losse systemen; de reden dat het er twee zijn
   staat hierboven.
============================================================ */

:root {
  --black: #0A0A0A;
  --black-deep: #050505;
  --black-card: #111;
  --white: #FFFFFF;
  --off-white: #F5F5F3;
  --cream: #F1F0E9;
  --lime: #D4FF3A;
  --lime-soft: #E8FF7A;
  --lime-glow: rgba(212, 255, 58, 0.45);
  /* Lime als TEKST op licht haalt 1,16:1 (gemeten). Voor tekst op een
     lichte achtergrond daarom deze donkere variant, 5,89:1 op wit. */
  --lime-ink: #5C6B0F;

  --text-dim-dark: rgba(255,255,255,0.62);
  --text-dim-light: rgba(10,10,10,0.62);
  --line-dark: rgba(255,255,255,0.12);
  --line-light: rgba(10,10,10,0.1);

  --font-display: 'Archivo Black', 'Archivo', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --r-s: 4px;
}

/* Zachte overgang tussen pagina's. De Inzichten-pagina's zijn echte
   documenten met een eigen adres — dat moet, anders indexeert Google ze
   niet — maar zonder dit springt de browser er hard naartoe. Deze regel
   laat hem in- en uitvloeien, zoals een viewwissel binnen de SPA.
   Werkt alleen als béíde pagina's hem hebben; index.html heeft hem ook.
   Browsers die het niet kennen negeren het en navigeren gewoon. */
@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Exact de basis van index.html. De body is dáár zwart — en dat is niet
   cosmetisch: de navigatiebalk is doorschijnend wit met een blur, dus over
   een zwarte body wordt hij lichtgrijs. Stond de body op wit, dan werd
   diezelfde balk puur wit en week hij zichtbaar af van de rest van de site.
   Elke sectie zet daarom zijn eigen achtergrond. */
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-weight: 700; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Exact index.html r. 133. */
::selection { background: var(--lime); color: var(--black); }

/* ----- Paginatransitie en fades, exact overgenomen uit index.html -----

   viewIn (r. 314) is daar de overgang van een hele view: 10px omhoog,
   0,6s, dezelfde --ease. Hier zit hij op <main>, want dat is op deze
   pagina's het equivalent van één view: alles komt als één geheel binnen.

   fadeUp (r. 4396–4401) is de element-fade: 20px omhoog, 0,9s, 0,2s
   vertraging, fill-mode backwards. De vertragingsklassen d1–d4 staan er
   ongewijzigd bij, zodat een artikel later dezelfde gelaagdheid kan
   gebruiken als de rest van de site. */
main { animation: viewIn 0.6s var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.fade-in { animation: fadeUp 0.9s var(--ease) 0.2s backwards; }
.fade-in.d1 { animation-delay: 0.4s; }
.fade-in.d2 { animation-delay: 0.6s; }
.fade-in.d3 { animation-delay: 0.8s; }
.fade-in.d4 { animation-delay: 1s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Zelfde sectiebasis als index.html r. 324–325. */
section { position: relative; padding: 120px 40px; }
@media (max-width: 860px) { section { padding: 70px 20px; } }

/* Exact dezelfde focusring als index.html: 3px, offset 3px, afgeronde hoek.
   Kleur is zwart in plaats van lime omdat deze pagina's licht zijn — precies
   de uitzondering die de hoofdsite ook op haar lichte secties toepast.
   De announce-balk is donker, daar is de ring wél lime. */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 3px;
  border-radius: 4px;
}
.announce :focus-visible, footer :focus-visible { outline-color: var(--lime); }

.skip {
  position: absolute; left: -9999px;
  background: var(--lime); color: var(--black);
  padding: 12px 20px; border-radius: 4px; z-index: 200;
  font-weight: 700;
}
.skip:focus { left: 16px; top: 16px; }

/* ============================================================
   CHROME — overgenomen uit index.html
============================================================ */

/* ----- Announce-balk ----- */
.announce {
  background: var(--black);
  color: var(--white);
  font-size: 13px;
  padding: 11px 24px;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative; z-index: 50;
}
.announce .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime-glow);
  flex: 0 0 auto;
}
.announce strong { color: var(--lime); font-weight: 700; }

/* ----- Navigatie. Op deze pagina's altijd de lichte variant, want de
   pagina's zijn licht — de SPA wisselt hem op scrollpositie, dat is hier
   niet nodig. ----- */
.nav {
  position: sticky; top: 0; z-index: 100;
  padding: 14px 40px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line-light);
  color: var(--black);
}
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img { width: 132px; height: auto; display: block; }

.nav-links {
  display: flex; gap: 34px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.nav-links a { position: relative; padding: 6px 0; opacity: 0.72; transition: opacity 0.2s; }
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--lime);
  transition: width 0.3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-actions { display: inline-flex; align-items: center; gap: 22px; }
.nav-login {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.72; white-space: nowrap; transition: opacity 0.2s;
}
.nav-login:hover { opacity: 1; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: var(--lime); color: var(--black);
  border-radius: 100px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: transform 0.25s, box-shadow 0.25s;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px var(--lime-glow); }

.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 42px; height: 42px; padding: 0; margin-left: 6px;
  background: none; border: none; cursor: pointer; color: inherit;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  flex-direction: column;
  padding: 8px 20px 22px;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line-light);
}
.mobile-menu a {
  padding: 15px 4px;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-light);
}
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu-actions { display: flex; align-items: center; gap: 18px; padding-top: 14px; }
.nav.menu-open .mobile-menu { display: flex; }

/* ----- Footer ----- */
footer {
  background: var(--black-deep);
  color: var(--white);
  padding: 72px 40px 36px;
  border-top: 1px solid var(--line-dark);
  margin-top: 96px;
}
.footer-grid {
  max-width: 1380px; margin: 0 auto;
  /* Vijf kolommen, exact als index.html r. 3816 — er ontbrak er één. */
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand img { width: 260px; height: auto; display: block; }
.footer-brand p { margin: 22px 0 0; color: var(--text-dim-dark); font-size: 14.5px; line-height: 1.6; max-width: 42ch; }
.footer-brand strong { color: var(--lime); font-weight: 700; }
.footer-brand .loc {
  margin-top: 20px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; color: var(--text-dim-dark);
}
/* De hoofdsite zette deze kolomlabels om van <h2> naar <p class="foot-kop">:
   vier koppen van niveau 2 per pagina die niets met de inhoud te maken hadden.
   Beide selectors blijven staan zolang niet alles opnieuw is gegenereerd. */
.footer-col h2,
.footer-col .foot-kop {
  font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--white); margin: 0 0 20px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { padding: 6px 0; font-size: 13.5px; }
.footer-col a { color: var(--text-dim-dark); transition: color 0.2s; }
.footer-col a:hover { color: var(--lime); }
.footer-bottom {
  max-width: 1380px; margin: 0 auto; padding-top: 28px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-dim-dark);
}
.footer-bottom a { color: var(--text-dim-dark); }
.footer-bottom a:hover { color: var(--lime); }
/* Sociale kanalen in de footer. Staan sinds 17-08 op de hoofdsite en zijn
   tegelijk de onderbouwing van sameAs in het Organization-schema. */
.footer-socials { display: flex; gap: 22px; }
.footer-socials a {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px;
  padding: 4px 0; border-bottom: 1px solid transparent;
  color: var(--text-dim-dark);
  transition: border-color 0.2s, color 0.2s;
}
.footer-socials a:hover { border-color: var(--lime); color: var(--lime); }

/* ============================================================
   ARTIKEL
============================================================ */

/* Exact .container uit index.html: zelfde maximumbreedte, en géén eigen
   zijpadding — die zit op de sectie. Met padding hier begon de tekst 40px
   verder naar rechts dan op de rest van de site. */
.wrap { max-width: 1380px; margin: 0 auto; }

/* Eén leesbreedte voor het hele artikel — kop, tekst en afsluitblok staan op
   dezelfde as. `.kolom` had wél een max-width maar geen `margin: 0 auto`, en
   stond dus links in een wrap van 1380px: op een breed scherm 270px links en
   890px rechts. De privacyverklaring op de site doet dit al goed (760px,
   gecentreerd); dit is dezelfde opzet.

   Alleen de artikelpagina. De indexpagina (.index-kop) houdt de volle breedte,
   want die is een overzicht, geen leestekst. */
.artikel-kop:not(.index-kop) .wrap,
.artikel .kolom,
.artikel .slot { max-width: 760px; margin-inline: auto; }

/* Op 760px is een kop van 82px een muur van zes regels. Deze bovengrens houdt
   hem op drie à vier, zonder aan de onderkant iets te veranderen. */
.artikel-kop:not(.index-kop) h1 { font-size: clamp(38px, 6.4vw, 58px); }

/* De kopband van een artikel krijgt dezelfde behandeling als een lichte
   sectie op de site: crème, een fijn rasterpatroon en een limegloed
   rechtsboven. Overgenomen uit section.tb-hero in index.html. */
.artikel-kop {
  position: relative;
  background: var(--cream); color: var(--black);
  /* Exact section.tb-hero uit index.html. */
  padding: 150px 40px 96px;
  border-bottom: 1px solid var(--line-light);
  overflow: hidden;
}
.artikel-kop::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(10,10,10,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.045) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 72% 32%, #000 8%, transparent 74%);
  mask-image: radial-gradient(ellipse 70% 75% at 72% 32%, #000 8%, transparent 74%);
}
.artikel-kop::after {
  content: ''; position: absolute; top: -12%; right: -6%;
  width: 52%; height: 90%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(212,255,58,0.42), transparent 60%);
}
.artikel-kop .wrap { position: relative; z-index: 2; }

/* De pil boven de kop — exact .eyebrow uit index.html, dezelfde vorm die
   daar nu op elke sectie staat. Het ster-icoon zit als masker in ::before,
   dus zonder SVG in de markup. De rand leidt zich af van de tekstkleur, met
   een vaste terugval voor browsers zonder color-mix. */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(10,10,10,0.28);
  border-color: color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 100px;
  padding: 9px 16px 9px 14px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 30px;
}
.badge::before {
  content: ''; width: 13px; height: 13px; flex: 0 0 auto;
  background: var(--lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.5 4.5 2 6 8 6.5-6 .5-7.5 2-8 8-.5-6-2-7.5-8-8 6-.5 7.5-2 8-6.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.5 4.5 2 6 8 6.5-6 .5-7.5 2-8 8-.5-6-2-7.5-8-8 6-.5 7.5-2 8-6.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.artikel-kop h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 6.4vw, 82px);
  line-height: 0.94; letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 26px; max-width: 17ch; text-wrap: balance;
}
.artikel-kop h1 .i {
  font-family: var(--font-serif); font-style: italic;
  font-weight: 400; text-transform: none; letter-spacing: -0.01em;
}

/* ============================================================
   DE HERO-ENTREE — dezelfde als op index.html
   ============================================================
   Op index.html animeert elke hero op één gedeelde GSAP-tijdlijn
   (`runHeroIntro()`): pil → kop → onderstreep → tekst. Hier stond in plaats
   daarvan één `.fade-in` om de hele `.wrap`, waardoor het blok als geheel
   invloog. Dat is wat je zag als "deze pagina animeert anders".

   Waarom dit in CSS staat en niet in GSAP: deze pagina's laden GSAP niet, en
   dat moet zo blijven. Bij de SEO-ronde van 09-08-2026 is GSAP juist uit de
   `<head>` van index.html gehaald omdat 41 KB van een externe CDN de eerste
   paint ophield. Die last alsnog op de artikelpagina's zetten — de pagina's
   die het meest kans maken om koud vanuit Google binnen te komen — zou dat
   ongedaan maken voor een animatie die puur decoratief is.

   De timing is één op één overgenomen uit `runHeroIntro()`. Daar wordt hij
   opgebouwd met negatieve offsets; uitgerekend naar absolute starttijden:

     pil        0,15s   0,7s    back.out(2)
     kop        0,45s   1,1s    back.out(1.5)
     streep     0,95s   0,9s    back.out(1.4)   scaleX vanaf links
     lead       1,30s   0,85s   back.out(1.4)

   De easings zijn benaderingen: `back.out(s)` bestaat niet in CSS. Een
   cubic-bezier met doorschot komt er dicht genoeg bij dat het verschil niet
   te zien is — het ritme en de volgorde zijn wat het herkenbaar maakt, niet
   de exacte doorschotwaarde. Wijzigt de tijdlijn in index.html, dan moet dit
   blok mee; dat staat vastgelegd in het kader.
============================================================ */
.hero-entree .badge,
.hero-entree h1,
.hero-entree .hero-lead {
  animation-duration: 0.7s;
  animation-fill-mode: backwards;
}
.hero-entree .badge {
  animation-name: heroPil;
  animation-delay: 0.15s;
  animation-timing-function: cubic-bezier(0.34, 1.65, 0.64, 1);
}
.hero-entree h1 {
  animation-name: heroKop;
  animation-duration: 1.1s;
  animation-delay: 0.45s;
  animation-timing-function: cubic-bezier(0.34, 1.50, 0.64, 1);
}
.hero-entree .hero-underbar {
  animation: heroStreep 0.9s cubic-bezier(0.34, 1.47, 0.64, 1) 0.95s backwards;
  transform-origin: left center;
}
.hero-entree .hero-lead {
  animation-name: heroLead;
  animation-duration: 0.85s;
  animation-delay: 1.3s;
  animation-timing-function: cubic-bezier(0.34, 1.47, 0.64, 1);
}

@keyframes heroPil    { from { opacity: 0; transform: translateY(20px) scale(0.9); } }
@keyframes heroKop    { from { opacity: 0; transform: translateY(50px); } }
@keyframes heroStreep { from { transform: scaleX(0); } }
@keyframes heroLead   { from { opacity: 0; transform: translateY(30px); } }

/* De streep onder de kop. Overgenomen uit index.html; de crème hero hier is
   licht, en per kader §5c is lime dan geen streepkleur — op licht is de
   streep zwart. Dezelfde regel als voor .tb-hero, .about-hero en .privacy-page
   daar. */
.hero-underbar {
  width: clamp(200px, 28vw, 380px);
  height: 10px;
  background: linear-gradient(90deg, var(--black) 0%, rgba(10,10,10,0) 100%);
  opacity: 0.22;
  border-radius: var(--r-s);
  margin: 0 0 clamp(34px, 4vw, 50px);
}
/* De kop staat dichter op zijn streep dan op losse tekst. Letterlijk dezelfde
   selector als in index.html, en niet zomaar `.hero-entree h1`: die is even
   specifiek als `.artikel-kop h1` (26px) en `.index-kop h1` (20px), waardoor
   de volgorde in het bestand zou bepalen wie wint. Gemeten gevolg daarvan:
   16px op het artikel en 20px op het overzicht — twee pagina's die hetzelfde
   horen te zijn. `:has()` tilt de specificiteit erboven, zodat beide 16px
   krijgen. */
.hero-entree h1:has(+ .hero-underbar) { margin-bottom: 16px; }
@media (max-width: 700px) {
  .hero-underbar { width: 60%; height: 6px; margin-bottom: 28px; }
}
/* Lime als achtergrondvlak onder een woord in de kop — hetzelfde patroon als
   .hero h1 .hl, .about-hero h1 .hl, .beloften-head h2 .hl e.a. in index.html.
   Zwart op lime is hier het enige geldige gebruik van lime als tekstblok op
   licht (zie kader §5); dat blijft zo, ook al staat deze pagina los van
   index.html. Geldt voor .artikel-kop h1 zelf én voor .index-kop (die de
   class combineert), dus zowel artikel- als overzichtstitel. */
.artikel-kop h1 .hl {
  display: inline-block;
  background: var(--lime); color: var(--black);
  padding: 0 14px;
}

.meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim-light);
  margin: 0;
}
.meta .sep { color: var(--text-dim-light); }
/* De site kleurt nadruk op licht nooit met lime-ink als los accent — zie
   .privacy-page strong (index.html r. 255): nadruk is zwart, niet gekleurd.
   Zelfde hier: de auteursnaam onderscheidt zich door gewicht, niet door kleur. */
.meta .auteur { color: var(--black); font-weight: 600; }

/* Het leesgedeelte is een lichte sectie, zoals .section-light op de site.
   Sinds de body zwart is (net als op de hoofdsite) moet die zijn eigen
   achtergrond zetten.

   Stond op zuiver wit, terwijl de kop erboven (.artikel-kop) al crème mét raster
   was. Je zag dus een naad midden op de pagina. Elk licht vlak op de site staat
   nu op crème met hetzelfde raster; deze twee volgen dat. Zelfde waarden als
   .artikel-kop hierboven, alleen het masker is gecentreerd in plaats van naar de
   rechterbovenhoek gericht — dit is een lopende tekstkolom, geen hero. */
.artikel,
.lijst-sectie {
  position: relative;
  overflow: hidden;
  background: var(--cream); color: var(--black);
  padding: 96px 40px 120px;
}
/* De overzichtspagina zette twee paddings van 96px op elkaar: de hero sloot
   met 96 en de lijst opende met 96. Samen met de marge van de introalinea gaf
   dat 227px leegte voordat de eerste artikelkaart begon, en stond die kaart op
   810px vanaf de paginatop — op de meeste laptops net onder de vouw.
   Hier krapper, maar niet dichtgetrokken: het raster en de rust blijven.
   Alleen de indexpagina; de artikelpagina deelt de selector en houdt 96/120. */
.artikel-kop.index-kop { padding-bottom: 60px; }
.lijst-sectie { padding-top: 56px; }
.artikel::before,
.lijst-sectie::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(10,10,10,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.045) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 78% 88% at 62% 46%, #000 6%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 88% at 62% 46%, #000 6%, transparent 78%);
}
.artikel > .wrap,
.lijst-sectie > .wrap { position: relative; z-index: 2; }

/* Artikelbeeld: staand poster-formaat, dus naast de tekst in plaats van
   erboven. De <figure> staat vóór de lead; door hem te laten drijven
   vloeien lead en eerste alinea's eromheen. clear op de eerste tussenkop
   zodat die nooit half naast het beeld begint. */
.hero-beeld { float: right; width: 34%; max-width: 300px; margin: 4px 0 30px 44px; }
.hero-beeld img {
  display: block; width: 100%; height: auto;
  border-radius: 6px; border: 1px solid var(--line-light);
}
.artikel-body h2:first-of-type { clear: both; }

.lead {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(21px, 2.5vw, 28px); line-height: 1.4;
  color: var(--black); margin: 0 0 40px;
}

.artikel-body > * { max-width: 68ch; }
.artikel-body p { margin: 0 0 24px; color: var(--text-dim-light); }
.artikel-body h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.1vw, 33px); line-height: 1.14;
  letter-spacing: -0.015em; text-transform: uppercase;
  margin: 56px 0 18px; color: var(--black);
}
.artikel-body h3 { font-size: 19px; line-height: 1.3; margin: 36px 0 12px; }
.artikel-body ul, .artikel-body ol { margin: 0 0 24px; padding-left: 22px; color: var(--text-dim-light); }
.artikel-body li { margin-bottom: 10px; }
.artikel-body ul { list-style: none; padding-left: 0; }
.artikel-body ul li { position: relative; padding-left: 24px; }
/* Decoratief bolletje, geen tekst — zelfde terughoudende toon als het
   standaard opsommingsteken op .privacy-page (index.html r. 253): geen kleur
   accent, dimt mee met de tekst eromheen. */
.artikel-body ul li::before {
  content: ''; position: absolute; left: 2px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim-light);
}
.artikel-body strong { color: var(--black); font-weight: 700; }
/* Zelfde lime-blok-op-licht-patroon als .artikel-kop h1 .hl hierboven, nu
   beschikbaar in lopende tekst via ==tekst== (bouw-inzichten.js). Bewust een
   kleinere padding dan in de kop — dit moet meelopen in een zin, niet als
   kop-element ogen. */
.lead .hl, .artikel-body .hl {
  display: inline-block;
  background: var(--lime); color: var(--black);
  padding: 0 8px;
}
/* .privacy-page a (index.html r. 256): a { color: var(--black); text-decoration:
   underline; } — dat is het patroon voor lopende tekst op licht, niet lime-ink. */
.artikel-body a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
/* Een blockquote is hier een echt rustmoment, niet een ingesprongen alinea:
   ruim boven en onder, geen kolombreedte-beperking (breekt bewust uit de
   68ch van de lopende tekst), en groot genoeg om even te laten stilstaan
   zonder de leestekst te overschreeuwen. N1 — Editorial Reading System. */
.artikel-body blockquote {
  margin: 64px 0; padding: 0;
  max-width: 54ch;
  border: none;
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(26px, 3.6vw, 40px); line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--black);
}
.artikel-body blockquote::before {
  content: '';
  display: block;
  width: 34px; height: 3px;
  background: var(--lime);
  margin-bottom: 22px;
}
.artikel-body img { max-width: 100%; height: auto; border-radius: 6px; }

/* Slotblok: donker, zoals de CTA-secties op de site. */
.slot {
  margin: 72px 0 0;
  background: var(--black); color: var(--white);
  padding: 48px; border-radius: 8px;
}
.slot h2 {
  font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px);
  text-transform: uppercase; letter-spacing: -0.015em; margin: 0 0 14px;
}
.slot p { color: var(--text-dim-dark); margin: 0 0 26px; max-width: 52ch; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--lime); color: var(--black);
  padding: 15px 26px; border-radius: 100px;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px var(--lime-glow); }

/* ============================================================
   OVERZICHT
============================================================ */
/* Het overzicht gebruikt dezelfde kopband als een artikel (.artikel-kop),
   alleen mag de kop daar groter — er staat geen lange titel onder. */
.index-kop h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 7.6vw, 104px); line-height: 0.92;
  letter-spacing: -0.03em; text-transform: uppercase; margin: 0 0 20px;
}
.index-kop h1 .i {
  font-family: var(--font-serif); font-style: italic;
  font-weight: 400; text-transform: none;
}
/* Zelfde afsluitende punt als op de hoofdsite (.tb-sq in index.html). */
.index-kop h1 .tb-sq {
  display: inline-block; width: 0.17em; height: 0.17em;
  background: var(--lime); margin-left: 0.1em; vertical-align: baseline;
}
.index-kop p:not(.badge) { color: var(--text-dim-light); max-width: 52ch; margin: 0; font-size: 17px; }

.lijst { list-style: none; margin: 64px 0 0; padding: 0; }
.lijst li { border-top: 1px solid var(--line-light); }
.lijst li:last-child { border-bottom: 1px solid var(--line-light); }
.lijst a {
  display: block;
  padding: 36px 0; transition: padding-left 0.35s var(--ease);
}
/* Twee kolommen alleen als er een beeld is; zonder beeld leest een enkele
   kolom beter dan een lege cel. */
.lijst a.met-beeld {
  display: grid; grid-template-columns: 150px 1fr; gap: 40px; align-items: start;
}
.lijst a:hover { padding-left: 12px; }
.lijst img.mini {
  width: 150px; height: auto; display: block;
  border-radius: 4px; border: 1px solid var(--line-light);
}
.lijst .k {
  /* De titel is sinds fase K een <h2> — een artikeltitel in een overzicht is
     een kop, geen alinea. font-weight expliciet, want een <h2> is standaard
     bold en Archivo Black kent maar één gewicht; zonder deze regel zou de
     browser er een kunstmatig vette variant van maken. */
  font-weight: 400;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 31px); line-height: 1.14;
  letter-spacing: -0.015em; text-transform: uppercase; margin: 0 0 12px;
}
/* Geen kleurwissel op hover: nergens in index.html krijgt tekst op een lichte
   achtergrond bij hover een lime(-ink) kleur — dat patroon bestaat alleen op
   donker (.role:hover .role-title, .footer-col a:hover, .job:hover, etc, r.
   1677/3852/3287 e.a.). Op licht regelt de site hover met beweging, niet met
   kleur — vandaar hier alleen de bestaande padding-left-verschuiving. */
.lijst .s { color: var(--text-dim-light); font-size: 15.5px; margin: 0 0 14px; max-width: 62ch; }
.lijst .m {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim-light);
}
.leeg { color: var(--text-dim-light); padding: 48px 0; }

/* ============================================================
   UITGELICHT — de editorial opening van het overzicht
   N1 — Visual Foundation + Inzichten (28-08-2026)

   Vervangt "de eerste kaart is iets groter" door een echte asymmetrische
   compositie: een groot, gekaderd beeld naast een eigen kop/lead/meta-blok,
   met de bestaande hero-entree-reveal (geen nieuwe animatietechniek). Bij
   ontbrekend beeld valt het blok terug op een brede tekstkolom — geen lege
   beeldcel.
============================================================ */
.uitgelicht { margin: 0 0 96px; }
.uitgelicht-label {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim-light);
  margin: 0 0 28px;
}
.uitgelicht-label .lijn { flex: 1 1 auto; height: 1px; background: var(--line-light); }
.uitgelicht-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
/* Zonder beeld: geen lege rastercel, één brede kolom. */
.uitgelicht-grid.geen-beeld { grid-template-columns: 1fr; max-width: 62ch; }
.uitgelicht-beeld {
  position: relative;
  aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 6px; border: 1px solid var(--line-light);
}
.uitgelicht-beeld img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.uitgelicht-kop {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.06;
  letter-spacing: -0.02em; text-transform: uppercase;
  margin: 0 0 22px; text-wrap: balance;
}
.uitgelicht-intro {
  color: var(--text-dim-light); font-size: 16.5px; line-height: 1.6;
  max-width: 56ch; margin: 0 0 26px;
}
.uitgelicht-meta {
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim-light);
  margin: 0 0 30px;
}
.uitgelicht-meta .auteur { color: var(--black); font-weight: 600; }
.uitgelicht-lees {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--black);
  padding-bottom: 3px; border-bottom: 1px solid var(--black);
  transition: gap 0.3s var(--ease), border-color 0.3s var(--ease);
}
.uitgelicht-lees::after { content: '→'; transition: transform 0.3s var(--ease); }
.uitgelicht a:hover .uitgelicht-lees { gap: 16px; }
.uitgelicht a:hover .uitgelicht-lees::after { transform: translateX(2px); }

/* Kop boven de resterende artikelen. Alleen aanwezig als er meer dan één
   artikel is — zie tools/bouw-inzichten.js. */
.meer-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim-light);
  margin: 0 0 8px;
}

/* ============================================================
   REVEAL — scroll-gebonden onthulling voor editorial lagen
   N1 — Visual Foundation + Inzichten (28-08-2026)

   Deze pagina's laden geen GSAP/ScrollTrigger (bewuste keuze, zie hierboven
   bij DE HERO-ENTREE). Voor content die pas verderop in het artikel komt
   — tussenkoppen, quotes, de resterende-artikelenlijst — is de bestaande
   .fade-in-keyframe hergebruikt, nu getriggerd door een kleine
   IntersectionObserver in plaats van bij het laden van de pagina. Zelfde
   patroon dat al 3x elders op de site draait (M1 §21).

   Bewust NIET op elke alinea: dat is precies de "effect per sectie"-val die
   N0 uitsluit. Alleen tussenkoppen, quotes en losse lijstitems krijgen dit. */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-zichtbaar { opacity: 1; transform: translateY(0); }
/* Zonder JavaScript wordt .is-zichtbaar nooit gezet — dan moet de content
   gewoon leesbaar zijn. Zelfde vangnetprincipe als de rest van de site
   (M1 §3/§22): de eindtoestand is altijd bereikbaar, met of zonder script.
   De <noscript>-regel die dit afdwingt staat in de <head> (zie head() in
   tools/bouw-inzichten.js) — hier alleen de animatiestijl zelf. */

/* ============================================================
   LEESVOORTGANG — dun, functioneel, nooit dominant
   N1 — Visual Foundation + Inzichten (28-08-2026)

   Alleen op de artikelpagina (bouwArtikel voegt de track/vulling toe).
   Vast aan de top van de viewport, boven de nav — geen aparte hoogte om mee
   te rekenen, geen invloed op de sticky-positie van de nav zelf. */
.leesvoortgang {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.leesvoortgang-vulling {
  height: 100%; width: 0%;
  background: var(--lime);
  transform-origin: left;
}

/* ============================================================
   RESPONSIVE
============================================================ */
/* Footer-breekpunten exact als index.html r. 3881–3889 en r. 4750–4752. */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
/* Exact index.html r. 481–484: alleen de links en acties verdwijnen, de
   padding van de balk blijft 14px/40px — die veranderde de site niet. */
@media (max-width: 960px) {
  .nav-links, .nav-actions { display: none; }
  .nav-toggle { display: flex; }
}
/* Logobreedtes exact als index.html r. 153, 162 en 167. */
@media (max-width: 768px) { .nav-logo img { width: 104px; } }
@media (max-width: 380px) { .nav-logo img { width: 92px; } }
@media (max-width: 780px) {
  .hero-beeld { float: none; width: 100%; max-width: 320px; margin: 0 auto 32px; }
  .lijst a.met-beeld { grid-template-columns: 1fr; gap: 18px; }
  .lijst img.mini { width: 120px; }
  /* Niet simpelweg verkleind: het beeld wordt op mobiel een bredere, kortere
     kop-strook (16:10) in plaats van de staande 3:4-verhouding van desktop —
     die zou op smal scherm te veel hoogte opeisen vóór de kop in beeld komt. */
  .uitgelicht-grid { grid-template-columns: 1fr; gap: 28px; }
  .uitgelicht-beeld { aspect-ratio: 16 / 10; }
}
/* Mobiel exact als index.html: de sectiepadding valt op 860px terug naar
   70px/20px (r. 325), de footer schakelt op 600px (r. 3885 en 4750). */
@media (max-width: 860px) {
  .artikel-kop { padding: 118px 20px 68px; }
  .artikel, .lijst-sectie { padding: 66px 20px; }
  /* Zelfde compactie als op desktop, in mobiele verhouding. */
  .artikel-kop.index-kop { padding-bottom: 44px; }
  .lijst-sectie { padding-top: 40px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 36px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; text-align: center; }
  footer { padding: 50px 22px 24px; }
  .footer-brand img { width: 200px; }
  .footer-brand p { font-size: 13.5px; }
  .slot { padding: 30px 24px; }
}

/* Exact index.html r. 301–311. Belangrijk: de fades worden hier niet alleen
   versneld maar uitgezet én op hun eindstand gezet — anders blijft een
   element met fill-mode backwards onzichtbaar hangen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in, main { animation: none !important; }
  .fade-in { opacity: 1 !important; transform: none !important; }
  /* De hero-entree gebruikt ook fill-mode backwards en zou anders op zijn
     beginstand blijven staan: pil en kop onzichtbaar, streep op scaleX(0). */
  .hero-entree .badge,
  .hero-entree h1,
  .hero-entree .hero-underbar,
  .hero-entree .hero-lead { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* N1 — dezelfde garantie voor de nieuwe editorial reveals: geen
     doorlopende observer-animatie, meteen de eindtoestand. De leesvoortgang
     blijft (het is geen animatie maar een directe weergave van scrollpositie,
     zonder eigen transition — niets om hier uit te zetten). */
  .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
}


/* --- componenten uit de portal ------------------------------------ */

/* --- citaat met meer dan één alinea ---------------------------------
   De blokrenderer zet <p> in een blockquote, zodat een citaat uit twee
   alinea's kan bestaan. Maar de regel voor .artikel-body p zet daar de kleur en de
   ondermarge van een gewone alinea op, en dan wordt het citaat lichter
   en hoger dan op de bestaande artikelpagina — gemeten: kleur van
   volledig zwart naar 62% en 45 px hoog naar 69 px.

   De blockquote zelf houdt de opmaak; de alinea's erbinnen erven hem. */
.artikel-body blockquote p {
  margin: 0;
  color: inherit;
  font: inherit;
  max-width: none;
}
.artikel-body blockquote p + p { margin-top: 0.55em; }

/* --- vrijmaken van de hero-float --------------------------------------
   De hero zweeft rechts naast de eerste alinea's. Dat is precies goed
   voor lopende tekst, maar een statement, een beeld of een cijferblok
   hoort de volle kolom te krijgen en niet in de resterende strook te
   worden geperst. inzichten.css doet dit al voor de eerste <h2>; hier
   voor de blokken die daar in fase D bij komen. */
.artikel-body .statement,
.artikel-body .pull-quote,
.artikel-body .beeld,
.artikel-body .beeld-tekst,
.artikel-body ol.stappen,
.artikel-body dl.cijfers,
.artikel-body .callout,
.artikel-body .slot-blok { clear: both; }

/* --- statement -----------------------------------------------------
   Het zwaarste typografische middel van het artikel. Bewust geen kop:
   het staat buiten de koppenstructuur en is nadrukkelijk proza. */
.artikel-body .statement {
  max-width: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--black);
  margin: 64px 0 56px;
}
.artikel-body .statement-donker {
  background: var(--black);
  color: var(--white);
  padding: clamp(28px, 4vw, 44px);
  border-radius: 8px;
}
/* Binnen een statement is .hl een gewone inline in plaats van een
   inline-block. Daarmee verdwijnt het afbreekpunt erachter, zodat een
   punt of komma niet alleen op de volgende regel belandt.
   box-decoration-break zorgt dat de achtergrond en de padding netjes
   meelopen als de markering zelf over twee regels valt.
   Bewust alleen hier: .artikel-body .hl in gewone tekst blijft precies
   zoals hij nu op de site staat. */
.artikel-body .statement .hl {
  display: inline;
  padding: 0 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- pull quote ----------------------------------------------------
   Zwaarder dan een gewoon citaat en zonder de streep ervoor, zodat de
   twee niet op elkaar gaan lijken. Het lime-streepje erboven is het
   enige accent; de tekst zelf blijft zwart. */
.artikel-body .pull-quote {
  max-width: none;
  margin: 64px 0;
  padding: 0;
}
.artikel-body .pull-quote::before {
  content: '';
  display: block;
  width: 52px;
  height: 3px;
  background: var(--lime);
  margin-bottom: 22px;
}
/* N1 voegde in de basisstylesheet (inzichten.css) een eigen lime-streepje
   toe aan élke .artikel-body blockquote, als rustmoment voor een citaat
   zonder eigen bloktype. Binnen een pull-quote zou dat een tweede streepje
   geven, want de blockquote hierboven staat er al één op de figure. Deze
   regel wint door de laadvolgorde (bouwArtikelCss(): basis eerst, dit blok
   erna) en houdt het bij precies één streepje per pull-quote. */
.artikel-body .pull-quote blockquote::before,
.artikel-body .pull-quote blockquote.reveal::before {
  content: none;
}
.artikel-body .pull-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(23px, 3vw, 33px);
  line-height: 1.24;
  color: var(--black);
}
.artikel-body .pull-quote blockquote p { margin: 0 0 12px; color: inherit; }
.artikel-body .pull-quote blockquote p:last-child { margin-bottom: 0; }
.artikel-body .pull-quote figcaption {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim-light);
}

/* --- citaat met bron ----------------------------------------------
   De blockquote zelf houdt de bestaande vormgeving; alleen de
   bronvermelding komt erbij. */
.artikel-body .citaat-met-bron { margin: 40px 0; }
.artikel-body .citaat-met-bron blockquote { margin: 0; }
.artikel-body .citaat-met-bron figcaption {
  margin: 12px 0 0 28px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim-light);
}

/* --- beeld ---------------------------------------------------------
   Drie breedtes. 'vol' breekt uit de tekstkolom zonder de pagina te
   laten schuiven: de figure wordt gecentreerd op de kolom en begrensd
   door de viewport. */
.artikel-body .beeld { margin: 56px 0; }
.artikel-body .beeld img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--line-light);
}
.artikel-body .beeld figcaption {
  margin-top: 14px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--text-dim-light);
}
.artikel-body .beeld-breed { max-width: none; }
/* Een staand beeld op volle kolombreedte wordt hoger dan het scherm en
   duwt de rest van het artikel weg. Boven tekstbreedte daarom een
   hoogtegrens: liggende beelden vullen de breedte, staande schalen mee
   en blijven gecentreerd. Niets wordt bijgesneden. */
.artikel-body .beeld-breed img,
.artikel-body .beeld-vol img {
  max-height: 78vh;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
.artikel-body .beeld-vol {
  max-width: none;
  width: min(1080px, calc(100vw - 80px));
  margin-left: 50%;
  transform: translateX(-50%);
}

/* --- beeld met tekst ----------------------------------------------- */
.artikel-body .beeld-tekst {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 38px);
  align-items: start;
  margin: 56px 0;
}
.artikel-body .beeld-tekst figure { margin: 0; }
.artikel-body .beeld-tekst img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--line-light);
}
.artikel-body .beeld-tekst .bt-tekst > p:last-child { margin-bottom: 0; }
.artikel-body .beeld-rechts figure { order: 2; }

/* --- stappen -------------------------------------------------------
   De volgorde heeft betekenis, dus een <ol>. Het nummer komt uit een
   teller en staat in --lime-ink: lime dat op licht wél leesbaar is. */
.artikel-body ol.stappen {
  max-width: none;
  list-style: none;
  counter-reset: stap;
  padding: 0;
  margin: 48px 0;
}
.artikel-body ol.stappen > li {
  counter-increment: stap;
  position: relative;
  padding: 22px 0 22px 62px;
  border-top: 1px solid var(--line-light);
  margin: 0;
}
.artikel-body ol.stappen > li:last-child { border-bottom: 1px solid var(--line-light); }
.artikel-body ol.stappen > li::before {
  content: counter(stap, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--lime-ink);
}
.artikel-body ol.stappen .stap-kop {
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--black);
  font-size: 16.5px;
  line-height: 1.35;
}
.artikel-body ol.stappen p { margin: 0; }

/* --- cijfers ------------------------------------------------------- */
.artikel-body dl.cijfers {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(18px, 2.6vw, 30px);
  margin: 52px 0;
}
.artikel-body dl.cijfers > div {
  border-top: 2px solid var(--black);
  padding-top: 16px;
}
.artikel-body dl.cijfers dt {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--black);
}
.artikel-body dl.cijfers dd {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim-light);
}

/* --- callout -------------------------------------------------------
   Wit op het crème van de pagina: rustig, en het valt op zonder een
   extra kleur nodig te hebben. */
.artikel-body .callout {
  max-width: none;
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 8px;
  padding: clamp(22px, 3vw, 32px);
  margin: 48px 0;
}
.artikel-body .callout .callout-kop {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime-ink);
}
.artikel-body .callout p:last-child { margin-bottom: 0; }

/* --- CTA middenin de tekst -----------------------------------------
   Dezelfde zwarte kaart als de vaste CTA onderaan, maar met een <p> in
   plaats van een <h2>, zodat de koppenstructuur klopt. */
.artikel-body .slot-blok { max-width: none; margin: 56px 0; }
.artikel-body .slot .slot-kop {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.7vw, 30px);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--white);
}

/* --- mobiel --------------------------------------------------------
   Alles wat op desktop naast elkaar staat, stapelt. Het volle beeld
   krijgt de schermbreedte minus de paginamarge. */
@media (max-width: 720px) {
  .artikel-body .beeld-tekst { grid-template-columns: 1fr; gap: 20px; }
  .artikel-body .beeld-rechts figure { order: 0; }
  .artikel-body .beeld-vol { width: calc(100vw - 40px); }
  .artikel-body .statement { margin: 48px 0 40px; }
  .artikel-body .pull-quote { margin: 48px 0; }
  .artikel-body ol.stappen > li { padding-left: 44px; }
  .artikel-body dl.cijfers { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .artikel-body dl.cijfers { grid-template-columns: 1fr; }
}

/* --- bewegingsvoorkeur --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .artikel-body .beeld img { transition: none; }
}