/* ============================================================
   Berenschot design-tokens v2 — coalitieakkoorden.berenschot.nl
   ============================================================
   Bronnen:
   - Stijlgids: data/huisstijl/Berenschot_5fstijlgids_5fnovember 2021.pdf
     (kleuren p17-19, typografie p13, merkelementen p26-27, logo p5-7)
   - Levende referentie: berenschot.nl CustomStyling.css, geraadpleegd
     2026-08-03. Bij verschil wint de site; afwijkingen staan bij het token.
   Toelichting op keuzes: docs/stijlfundament.md
   ============================================================ */

:root {
  /* ---------------------------------------------------------
     1. Merkkleuren (gids p18, site --brand-*)
     --------------------------------------------------------- */
  --bs-blauw: #1A3877;            /* Berenschotblauw, primair */
  --bs-lichtblauw: #41B6E6;       /* jong & spontaan, accenten en hovers */
  --bs-brons-diep: #BA6D06;       /* alleen voor tekst (WCAG), quotes en tags */
  --bs-brons: #D19544;            /* decoratief brons, nooit voor tekst */
  --bs-lichtcyaan: #ECF7FC;       /* achtergrondvlakken; site 2026.
                                     Gids p18 zegt #D9F0FA; site wint. */
  --bs-wit: #FFFFFF;
  --bs-zwart: #000000;

  /* Beoogde verhouding (gids p17): 30% blauw, 30% wit,
     15% lichtblauw, 15% brons, 10% lichtcyaan. */

  /* ---------------------------------------------------------
     2. Secundaire kleuren (gids p19)
     --------------------------------------------------------- */
  --bs-geel: #FAB90B;
  --bs-oranje: #DC5912;
  --bs-rood: #D80F25;             /* alleen als stoplicht-signaalkleur */
  --bs-bordeaux: #841439;
  --bs-teal: #4FABA6;

  /* ---------------------------------------------------------
     3. Grafiekkleuren, vaste volgorde 1 t/m 13 (gids p19)
     --------------------------------------------------------- */
  --grafiek-1: #21305B;           /* Bt-blauw (print-blauw) */
  --grafiek-2: #41B6E6;           /* lichtblauw */
  --grafiek-3: #BA6E15;           /* brons tekst (printvariant) */
  --grafiek-4: #C6E8F8;           /* lichtcyaan (printvariant) */
  --grafiek-5: #FAB90B;           /* geel */
  --grafiek-6: #DC5912;           /* oranje */
  --grafiek-7: #841439;           /* bordeaux */
  --grafiek-8: #4FABA6;           /* teal */
  --grafiek-9: #137998;           /* petrol */
  --grafiek-10: #0E4737;          /* donkergroen */
  --grafiek-11: #00843C;          /* groen */
  --grafiek-12: #B8C950;          /* limoen */
  --grafiek-13: #ABB2B8;          /* grijs */

  /* ---------------------------------------------------------
     4. Semantische kleuren
     Site zet broodtekst in merkblauw (--color-copy), niet in
     zwart of grijs. Wit is de standaardachtergrond.
     --------------------------------------------------------- */
  --kleur-tekst: var(--bs-blauw);
  --kleur-tekst-omgekeerd: var(--bs-wit);   /* op blauwe vlakken */
  --kleur-accent-tekst: var(--bs-brons-diep);
  --kleur-link: var(--bs-blauw);
  --kleur-link-hover: var(--bs-lichtblauw);
  --kleur-achtergrond: var(--bs-wit);
  --kleur-vlak: var(--bs-lichtcyaan);       /* zachte achtergrondblokken */
  --kleur-vlak-donker: var(--bs-blauw);     /* hero's, footers */
  --kleur-rand: #DEE2E6;

  /* Bestaande rapportsemantiek blijft geldig:
     blauw = akkoordtekst, brons = data/CBS. */
  --kleur-akkoord: var(--bs-blauw);
  --kleur-data: var(--bs-brons-diep);

  /* ---------------------------------------------------------
     5. Typografie (gids p10-13, site @font-face)
     Montserrat voor koppen, tags, knoppen en meta.
     ITC Mendoza Roman Std voor broodtekst; PT Serif is de vrije
     terugvaloptie zolang de Mendoza-webfontlicentie niet rond is
     (zie docs/stijlfundament.md).
     --------------------------------------------------------- */
  --font-kop: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Mendoza Roman Std", "PT Serif", Georgia, serif;

  --gewicht-regular: 400;
  --gewicht-medium: 500;
  --gewicht-semibold: 600;
  --gewicht-bold: 700;

  /* Online type-scale (gids p13), 16px basis.
     Koppen in blauw of wit; H1 onderstreept. */
  --tekst-h1: 2.5rem;             /* 40px, Montserrat Bold, lh 55px */
  --tekst-h1-lh: 1.375;
  --tekst-h2: 2.1875rem;          /* 35px, Montserrat Bold, lh 45px */
  --tekst-h2-lh: 1.29;
  --tekst-h3: 1.875rem;           /* 30px, Montserrat Medium, lh 40px */
  --tekst-h3-lh: 1.33;
  --tekst-h4: 1.5625rem;          /* 25px, Montserrat Medium, lh 35px */
  --tekst-h4-lh: 1.4;
  --tekst-h5: 1.25rem;            /* 20px, Montserrat Medium, lh 30px */
  --tekst-h5-lh: 1.5;
  --tekst-intro: 1.375rem;        /* 22px, Montserrat Medium, lh 32px */
  --tekst-intro-lh: 1.45;
  --tekst-body: 1.125rem;         /* 18px, Mendoza Book, lh 28px */
  --tekst-body-lh: 1.56;
  --tekst-body-klein: 1rem;       /* 16px, Mendoza Book, lh 26px */
  --tekst-body-klein-lh: 1.625;
  --tekst-meta: 1rem;             /* 16px, Montserrat Regular, lh 24px */
  --tekst-meta-lh: 1.5;
  --tekst-quote: 1.875rem;        /* 30px, Montserrat Bold, brons-diep */
  --tekst-quote-lh: 1.33;

  /* Tags en labels (gids p13): 16px, all caps, brons-diep of wit. */
  --tekst-tag: 1rem;              /* Montserrat SemiBold */
  --tekst-label: 1rem;            /* Montserrat Medium */

  /* ---------------------------------------------------------
     6. Ruimte (afgeleid; de gids geeft geen expliciete schaal)
     --------------------------------------------------------- */
  --ruimte-1: 0.25rem;
  --ruimte-2: 0.5rem;
  --ruimte-3: 1rem;
  --ruimte-4: 1.5rem;
  --ruimte-5: 2rem;
  --ruimte-6: 3rem;
  --ruimte-7: 4rem;
  --ruimte-8: 6rem;

  /* ---------------------------------------------------------
     7. Vormtaal en merkelementen (gids p26-27, site .btn-solid)
     --------------------------------------------------------- */
  --radius: 0;                    /* hoekig; de site rondt vrijwel niets af */
  --knop-padding: 1rem 3rem;
  --knop-letterspacing: 0.07em;   /* gids: tracking 1.07, all caps */
  --grid-lijn: rgba(218, 218, 218, 0.4);   /* subtiel paginagrid, 1px */
  --grid-lijndikte: 1px;
  --titel-onderstreping: underline;        /* titels en hovers onderstreept */
  --schaduw-blok: 1rem 1rem 0 var(--bs-lichtblauw);  /* speels blok achter foto's */

  /* ---------------------------------------------------------
     8. Logo (gids p5-7)
     Woordmerk wit op blauw kader (diapositief), 90 graden
     gekanteld, altijd gecentreerd, nooit vervormen.
     --------------------------------------------------------- */
  --logo-monogram-min: 50px;      /* monogram online nooit kleiner */

  /* ---------------------------------------------------------
     9. Focus en toegankelijkheid
     --------------------------------------------------------- */
  --focus-ring: 2px dashed var(--bs-lichtblauw);
  --focus-offset: 2px;
}


*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:4.5rem; }
body { margin:0; font-family:var(--font-body); font-size:var(--tekst-body);
  line-height:var(--tekst-body-lh); color:var(--kleur-tekst);
  background:var(--kleur-achtergrond); }

/* Subtiel paginagrid: vier kolommen van 1px-lijnen achter alles. */
.grid-lijnen { position:fixed; inset:0; z-index:0; pointer-events:none;
  width:min(1200px, 94vw); margin-inline:auto;
  background-image:repeating-linear-gradient(
    to right, var(--grid-lijn) 0 var(--grid-lijndikte), transparent var(--grid-lijndikte) calc(100% / 4));
  border-right:var(--grid-lijndikte) solid var(--grid-lijn); }
main, header, footer, .paginakop { position:relative; z-index:1; }

h1, h2, h3, h4, h5 { font-family:var(--font-kop); color:inherit; margin:0 0 var(--ruimte-3); }
h1 { font-size:var(--tekst-h1); line-height:var(--tekst-h1-lh);
  font-weight:var(--gewicht-bold); text-decoration:var(--titel-onderstreping);
  text-decoration-thickness:3px; text-underline-offset:8px; }
h2 { font-size:var(--tekst-h2); line-height:var(--tekst-h2-lh); font-weight:var(--gewicht-bold); }
h3 { font-size:var(--tekst-h3); line-height:var(--tekst-h3-lh); font-weight:var(--gewicht-medium); }
p { margin:0 0 var(--ruimte-3); }
a { color:var(--kleur-link); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--kleur-link-hover); }
:focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
img { max-width:100%; height:auto; display:block; }
.kolom { width:min(1200px, 94vw); margin-inline:auto; }
.klein { font-family:var(--font-kop); font-size:.85rem; line-height:1.5; opacity:.88; }

.tag, .eyebrow { font-family:var(--font-kop); font-size:var(--tekst-tag);
  font-weight:var(--gewicht-semibold); letter-spacing:var(--knop-letterspacing);
  text-transform:uppercase; color:var(--kleur-accent-tekst); }
.eyebrow { display:block; margin-bottom:var(--ruimte-3); }
.intro { font-family:var(--font-kop); font-size:var(--tekst-intro);
  line-height:var(--tekst-intro-lh); font-weight:var(--gewicht-medium); }

.knop { display:inline-block; border:0; cursor:pointer;
  font-family:var(--font-kop); font-size:var(--tekst-meta);
  font-weight:var(--gewicht-semibold); letter-spacing:var(--knop-letterspacing);
  text-transform:uppercase; text-decoration:none;
  padding:var(--knop-padding); border-radius:var(--radius);
  background:var(--bs-blauw); color:var(--bs-wit); }
.knop:hover { background:var(--bs-lichtblauw); color:var(--bs-blauw); text-decoration:underline; }
.knop--omgekeerd { background:var(--bs-wit); color:var(--bs-blauw); }
.knop--omgekeerd:hover { background:var(--bs-lichtblauw); color:var(--bs-blauw); }
.knop--klein { padding:0.5rem 1.25rem; }

/* Paginakop: witte bovenbalk + gekanteld woordmerk, wissel na 150px (mockup). */
.paginakop { position:sticky; top:0; z-index:1000; }
.topbalk { background:var(--bs-wit); color:var(--kleur-tekst);
  border-bottom:var(--grid-lijndikte) solid var(--kleur-rand); }
.topbalk .kolom { position:relative; display:flex; align-items:center;
  gap:var(--ruimte-4); padding:0; min-height:3.5rem; }
.topbalk a { color:inherit; text-decoration:none; }
.topbalk a:hover { color:var(--kleur-link-hover); text-decoration:underline; }
.monogram { width:3.5rem; height:3.5rem; min-width:var(--logo-monogram-min);
  display:block; object-fit:cover; }
.monogram-tekst { font-family:var(--font-kop); font-weight:var(--gewicht-bold);
  font-size:1.6rem; width:3.5rem; height:3.5rem; display:inline-grid; place-items:center;
  background:var(--bs-blauw); color:var(--bs-wit); }
.topbalk nav { flex:1; display:flex; flex-wrap:wrap; gap:var(--ruimte-4);
  font-family:var(--font-kop); font-size:var(--tekst-meta);
  font-weight:var(--gewicht-semibold); }
.woordmerk-banner { position:absolute; top:0; left:0; z-index:1001;
  width:3.5rem; height:auto; display:block; transition:transform .4s ease; }
body.gescrold .woordmerk-banner { transform:translateY(-105%); }

/* Hero met foto en kerncijfers. */
.hero-landing { background:var(--kleur-vlak-donker); color:var(--kleur-tekst-omgekeerd);
  overflow:hidden; }
.hero-landing .kolom--split { display:grid; grid-template-columns:1fr 1fr;
  gap:var(--ruimte-7); align-items:center; padding:15rem 0 var(--ruimte-8); }
.hero-landing h1 { color:var(--bs-wit); text-decoration-color:var(--bs-lichtblauw); }
.hero-landing .eyebrow { color:var(--bs-lichtblauw); }
.hero-landing .intro { color:var(--bs-lichtcyaan); font-weight:var(--gewicht-regular); }
.hero-landing .klein a { color:var(--bs-lichtcyaan); }
.hero-foto { position:relative; margin-right:var(--ruimte-4); }
/* Eigen beeldverhouding: geen 4:5-uitsnede meer, de foto blijft heel (issue 119). */
.hero-foto img { box-shadow:var(--schaduw-blok); width:100%; height:auto; }
.foto-credit { font-family:var(--font-kop); font-size:0.75rem;
  color:var(--bs-lichtcyaan); text-decoration:none; display:inline-block;
  margin-top:var(--ruimte-4); opacity:0.8; }

.cijfers { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:var(--grid-lijndikte); }
/* Peildatum en dekking onder de kerncijfers (issue 105); wit op het donkere
   vlak, lichtgrijs was slecht leesbaar (feedback collega 07-09-2026). */
.peildatum-regel { font-family:var(--font-kop); font-size:.8rem;
  color:var(--bs-wit); opacity:.92; margin:8px 2px 0; }
.cijfers .tegel { outline:var(--grid-lijndikte) solid var(--grid-lijn);
  background:var(--kleur-vlak-donker); padding:var(--ruimte-4); }
.cijfers .waarde { font-family:var(--font-kop); font-size:clamp(2rem, 4vw, 3rem);
  font-weight:var(--gewicht-bold); color:var(--bs-lichtblauw); line-height:1.1; }
.cijfers .label { font-family:var(--font-kop); font-size:var(--tekst-meta);
  line-height:var(--tekst-meta-lh); color:var(--bs-lichtcyaan); margin-top:var(--ruimte-1); }
/* Vierde tegel: de knop naar de methodologiepagina. */
.cijfers .tegel--cta { display:flex; flex-direction:column; justify-content:center;
  text-decoration:none; }
.cijfers .tegel--cta .waarde--woord { font-size:clamp(1.5rem, 2.4vw, 2rem); }
.cijfers .tegel--cta:hover { outline-color:var(--bs-lichtblauw); }
.cijfers .tegel--cta:hover .waarde--woord { text-decoration:underline;
  text-underline-offset:4px; }

/* Themakaarten: vier per rij, naden op de gridlijnen. */
.sectie { padding:var(--ruimte-8) 0; }
.sectie--vlak { background:var(--kleur-vlak); }
.sectiekop { max-width:50%; margin-bottom:var(--ruimte-6); }
.themagrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--ruimte-4); }
.themakaart { position:relative; display:flex; flex-direction:column;
  gap:var(--ruimte-2); background:var(--bs-wit);
  border:var(--grid-lijndikte) solid var(--kleur-rand);
  padding:var(--ruimte-4); color:var(--kleur-tekst);
  transition:transform .15s ease, box-shadow .15s ease; }
.themakaart:hover { transform:translate(-4px, -4px);
  box-shadow:0.5rem 0.5rem 0 var(--bs-lichtblauw); }
/* De Algemeen-kaart: lichtblauw vlak en lichtblauwe rand, zodat het
   overkoepelende beeld zich onderscheidt van de losse thema's. */
.themakaart--algemeen { background:var(--bs-lichtcyaan);
  border-color:var(--bs-lichtblauw); }
.themakaart--algemeen:hover { box-shadow:0.5rem 0.5rem 0 var(--bs-lichtblauw); }
.themakaart--algemeen .sublinks a + a { border-top-color:var(--bs-lichtblauw); }
.themakaart h3 { font-size:var(--tekst-h5); line-height:var(--tekst-h5-lh);
  font-weight:var(--gewicht-semibold); margin:0; }
.themakaart .opgave { font-size:var(--tekst-body-klein);
  line-height:var(--tekst-body-klein-lh); margin:0; flex:1; }
.verdiepingen { display:flex; flex-direction:column; gap:var(--ruimte-1); }
.verdieping-link { font-family:var(--font-kop); font-size:var(--tekst-meta);
  line-height:var(--tekst-meta-lh); font-weight:var(--gewicht-semibold);
  color:var(--bs-blauw); text-decoration:none; }
.verdieping-link::after { content:" →"; }
.verdieping-link:hover { text-decoration:underline; text-underline-offset:4px; }
.themakaart .leeg { font-family:var(--font-kop); font-size:var(--tekst-meta);
  color:var(--kleur-accent-tekst); }
.themakaart:hover h3 { text-decoration:underline; text-underline-offset:4px; }
.themakaart .actie { font-family:var(--font-kop); font-size:var(--tekst-meta);
  font-weight:var(--gewicht-semibold); color:var(--bs-blauw); }
.themakaart .actie::after { content:" →"; }
/* De kaart is geen <a>: de titel-link bedekt via ::after de hele kaart,
   de sublinks (rechtstreeks naar analyses) liggen erboven. */
.themakaart .hoofd { color:inherit; text-decoration:none; }
.themakaart .hoofd::after { content:""; position:absolute; inset:0; }
/* Elk item een eigen regel met een scheidingslijn ertussen (niet erboven of
   eronder) en de pijl rechtsonder: zo is in een oogopslag te zien hoeveel
   verdiepingen er onder het thema hangen. */
.themakaart .sublinks { position:relative; z-index:1; display:flex; flex:1;
  flex-direction:column; gap:0; margin-top:var(--ruimte-1);
  font-family:var(--font-kop); font-size:0.9rem; }
.themakaart .sublinks a { display:flex; align-items:flex-end;
  justify-content:space-between; gap:var(--ruimte-3); padding:var(--ruimte-2) 0;
  text-decoration:none; color:var(--kleur-tekst); }
.themakaart .sublinks a:first-child { padding-top:0; }
.themakaart .sublinks a:last-child { padding-bottom:0; }
.themakaart .sublinks a + a { border-top:var(--grid-lijndikte) solid var(--kleur-rand); }
.themakaart .sublinks a::after { content:"→"; flex:none; font-size:1.25rem;
  line-height:1; color:var(--kleur-accent-tekst); }
.themakaart .sublinks a:hover { color:var(--bs-blauw); }
.themakaart .sublinks a:hover::after { color:var(--bs-blauw); }
/* Hover op een losse vraag: alleen onderstreping, en de titel-onderstreping valt
   weg, zodat te zien is wat er wordt aangeklikt (feedback collega 07-09-2026; het
   oplichtende vlak eromheen is er op 08-09 weer uit gehaald, verzoek Daan). */
.themakaart .sublinks a:hover { text-decoration:underline; text-underline-offset:4px; }
.themakaart:has(.sublinks a:hover) h3 { text-decoration:none; }
.overig { margin-top:var(--ruimte-6); border-top:var(--grid-lijndikte) solid var(--kleur-rand);
  padding-top:var(--ruimte-5); }
.overig > h3, .overig > .opgave { max-width:50%; }
.overig-groepen { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--ruimte-4); margin-top:var(--ruimte-4); }
.overig-groep h4 { font-family:var(--font-kop); font-size:var(--tekst-meta);
  font-weight:var(--gewicht-semibold); letter-spacing:var(--knop-letterspacing);
  text-transform:uppercase; color:var(--kleur-accent-tekst);
  margin:0 0 var(--ruimte-2); }

/* Zo helpt Berenschot. */
.bs-blok { background:var(--kleur-vlak); padding:var(--ruimte-6);
  display:grid; grid-template-columns:1.2fr 0.8fr; gap:var(--ruimte-6); }
.bs-blok .contact { background:var(--bs-wit); padding:var(--ruimte-4);
  border-top:4px solid var(--bs-brons); align-self:start; }
.bs-blok .contact .tag { display:block; margin-bottom:var(--ruimte-2); }
.bs-blok .contact .knop { margin-top:var(--ruimte-2); }

/* Inleiding op de landing: rustige leeskolom tussen hero en themakaarten. */
.inleiding { max-width:70ch; }

/* Hoe is dit gemaakt (standaardtekst uit data/hoe-gemaakt.md). */
.hoe-gemaakt { max-width:70ch; }
.hoe-gemaakt p { margin:0 0 var(--ruimte-3); }
.hoe-gemaakt .hoe-link { font-family:var(--font-kop); font-weight:var(--gewicht-semibold); }

footer.voet { background:var(--kleur-vlak-donker); color:var(--bs-lichtcyaan);
  margin-top:var(--ruimte-8); }
footer.voet .kolom { padding:var(--ruimte-6) 0; display:grid;
  grid-template-columns:auto 1fr auto; gap:var(--ruimte-6); align-items:start; }
footer.voet a:not(.knop) { color:inherit; }
footer.voet .klein { font-family:var(--font-kop); font-size:0.8rem; opacity:0.75; }

.reveal { opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease; }
.reveal.zichtbaar { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

@media (max-width: 1100px) { .themagrid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 860px) {
  .woordmerk-banner { display:none; }
  .hero-landing .kolom--split { grid-template-columns:1fr; gap:var(--ruimte-5);
    padding-top:var(--ruimte-7); }
  .bs-blok { grid-template-columns:1fr; padding:var(--ruimte-5); }
  /* Een grid-kolom is standaard minstens zo breed als het langste woord. Een kop als
     'Woningbouw' duwde het expertiseblok daardoor 2 px buiten het scherm, waardoor de
     hele pagina horizontaal ging schuiven (telefooncontrole 08-09-2026). */
  .bs-blok > * { min-width:0; }
  h1, h2, h3 { overflow-wrap:break-word; hyphens:auto; }
  .sectiekop, .overig { max-width:none; }
  footer.voet .kolom { grid-template-columns:1fr; gap:var(--ruimte-3); }
}
@media (max-width: 640px) { .themagrid { grid-template-columns:1fr; } }
@media print {
  .grid-lijnen, .woordmerk-banner { display:none; }
  .paginakop { position:static; }
  body { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}


.contact.adviseurs .knop { display:inline-block; border:0; cursor:pointer;
  font-family:var(--font-kop); font-size:var(--tekst-meta);
  font-weight:var(--gewicht-semibold); letter-spacing:var(--knop-letterspacing);
  text-transform:uppercase; text-decoration:none; border-radius:var(--radius);
  background:var(--bs-blauw); color:var(--bs-wit); padding:0.5rem 1.25rem; }
.contact.adviseurs .knop:hover { background:var(--bs-lichtblauw);
  color:var(--bs-blauw); }
.contact.adviseurs .adviseur { display:flex; gap:var(--ruimte-3);
  align-items:flex-start; margin-top:var(--ruimte-4); }
.contact.adviseurs .pasfoto { width:72px; height:72px; object-fit:cover;
  flex:none; }
.contact.adviseurs .gegevens { display:flex; flex-direction:column;
  gap:2px; font-size:var(--tekst-body-klein); line-height:var(--tekst-body-klein-lh); }
.contact.adviseurs .gegevens strong { font-family:var(--font-kop); }
.contact.adviseurs .functie { color:var(--kleur-tekst-zacht, inherit);
  opacity:0.85; }
.contact.adviseurs .gegevens a { color:inherit; text-decoration:none; }
.contact.adviseurs .gegevens a:hover { text-decoration:underline; }
.contact.adviseurs .gegevens a.profiel { font-family:var(--font-kop);
  font-size:var(--tekst-meta); font-weight:var(--gewicht-semibold);
  color:var(--bs-blauw); margin-top:2px; }
.contact.adviseurs .gegevens a.profiel::after { content:" →"; }


.methodologie-kop { background:var(--kleur-vlak-donker); color:var(--kleur-tekst-omgekeerd);
  padding:9rem 0 var(--ruimte-7); }
.methodologie-kop h1 { color:var(--bs-wit); text-decoration-color:var(--bs-lichtblauw); }
.methodologie-kop .eyebrow { color:var(--bs-lichtblauw); }
.methodologie-kop .intro { color:var(--bs-lichtcyaan); max-width:60ch;
  font-weight:var(--gewicht-regular); margin:0; }
.leestekst { max-width:72ch; }
.leestekst h2 { margin-top:var(--ruimte-6); }
.leestekst h3 { margin-top:var(--ruimte-5); font-weight:var(--gewicht-semibold); }
.leestekst ul, .leestekst ol { padding-left:1.4rem; margin:0 0 var(--ruimte-3); }
.leestekst li { margin-bottom:var(--ruimte-2); }
.leestekst code { font-size:.9em; background:var(--kleur-vlak); padding:.1em .35em; }
.leestekst .tabel-scroll { overflow-x:auto; margin:0 0 var(--ruimte-4); }
.leestekst table { border-collapse:collapse; width:100%;
  font-family:var(--font-kop); font-size:.95rem; }
.leestekst th, .leestekst td { border:var(--grid-lijndikte) solid var(--kleur-rand);
  padding:var(--ruimte-2) var(--ruimte-3); text-align:left; vertical-align:top; }
.leestekst th { background:var(--kleur-vlak); }

/* Het expertiseblok breekt uit de leeskolom; de band zelf komt uit .bs-blok. */
.bs-blok h2 { margin-top:0; }
.bs-blok p:last-child { margin-bottom:0; }

@media (max-width: 860px) {
  /* Een URL in <code> heeft geen spaties en rekte de pagina tot 512 px op een telefoon
     van 390 px. Breken mag hier overal (telefooncontrole 08-09-2026). */
  .leestekst code { overflow-wrap:anywhere; }
  .methodologie-kop { padding-top:var(--ruimte-7); }
}