/* ============================================================
   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:clamp(1.9rem, 3.6vw, 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); }
h4 { font-size:var(--tekst-h4); line-height:var(--tekst-h4-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; }
/* Smalle kolom begint op de eerste gridlijn in plaats van gecentreerd: tekst
   staat op het grid (huisstijlfeedback marketing 08-09-2026, issue 119). */
.smal { max-width:72ch; margin-inline:calc((100% - min(1200px, 94vw)) / 2) auto; }
.muted { color:#9aa3b5; }
.klein { font-family:var(--font-kop); font-size:.85rem; line-height:1.5;
  max-width:68ch; opacity:.88; }

/* Tags en eyebrows: Montserrat, all caps, brons-diep of licht op donker. */
.eyebrow { display:block; margin-bottom:var(--ruimte-3);
  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); }
.intro { font-family:var(--font-kop); font-size:var(--tekst-intro);
  line-height:var(--tekst-intro-lh); font-weight:var(--gewicht-medium); }

/* ------------------------------------------------------------
   Paginakop: witte bovenbalk + gekanteld woordmerk (gids p5-7).
   Na 150px scrollen (body.gescrold) wisselt het woordmerk naar
   het B-monogram in de balk, zoals op berenschot.nl.
   ------------------------------------------------------------ */
.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); }
.topbalk nav a.rechts { margin-left:auto; }

/* Kruimelpad (site-modus, issue 36) — zelfde patroon als mockup/stijl.css. */
.kruimelpad { font-family:var(--font-kop); font-size:var(--tekst-meta);
  padding:var(--ruimte-3) 0; }
.kruimelpad ol { list-style:none; display:flex; flex-wrap:wrap; gap:var(--ruimte-2);
  margin:0; padding:0; }
.kruimelpad li + li::before { content:"›"; margin-right:var(--ruimte-2);
  color:var(--kleur-accent-tekst); }
.kruimelpad [aria-current] { font-weight:var(--gewicht-semibold); }
.kruimelpad--omgekeerd { color:var(--kleur-tekst-omgekeerd); }
.kruimelpad--omgekeerd a { color:inherit; }
.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: fullscreen themafoto met blauwe wasem en cijfertegels
   ------------------------------------------------------------ */
.hero-verdieping { position:relative; min-height:92vh; display:flex;
  align-items:flex-end; color:var(--bs-wit); overflow:hidden;
  background:var(--kleur-vlak-donker); }
.hero-verdieping .achtergrond { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; }
.hero-verdieping::after { content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(26,56,119,.35) 0%, rgba(26,56,119,.78) 62%, rgba(26,56,119,.94) 100%); }
/* Top-padding houdt de tekst bij lange titels onder het hangende woordmerk. */
.hero-verdieping .kolom { position:relative; z-index:2; padding:16rem 0 var(--ruimte-6); }
.hero-verdieping .eyebrow { color:var(--bs-lichtblauw); }
.hero-verdieping h1 { color:var(--bs-wit); max-width:26ch;
  text-decoration-color:var(--bs-lichtblauw); }
.hero-verdieping .intro { max-width:62ch; color:var(--bs-lichtcyaan);
  font-weight:var(--gewicht-regular); }
.hero-verdieping .foto-credit { position:absolute; right:var(--ruimte-3);
  bottom:var(--ruimte-2); z-index:2; }
.foto-credit { font-family:var(--font-kop); font-size:0.75rem;
  color:var(--bs-lichtcyaan); text-decoration:none; display:inline-block; opacity:0.8; }
.scrollhint { position:absolute; left:50%; bottom:var(--ruimte-2); z-index:2;
  transform:translateX(-50%); font-family:var(--font-kop); font-size:0.75rem;
  letter-spacing:var(--knop-letterspacing); text-transform:uppercase;
  color:var(--bs-lichtcyaan); animation:wiebel 2.2s ease-in-out infinite; }
@keyframes wiebel { 0%,100% { transform:translate(-50%,0);} 50% { transform:translate(-50%,8px);} }

/* Grote cijfers: tellende tegels op de gridlijnen. */
.cijfers { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:var(--grid-lijndikte); margin-top:var(--ruimte-6); }
.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); }

/* ------------------------------------------------------------
   Secties en sectiekoppen op het paginagrid
   ------------------------------------------------------------ */
.sectie { padding:var(--ruimte-8) 0; }
.sectie--vlak { background:var(--kleur-vlak); }
/* Sectiekop eindigt op de middelste gridlijn (helft van de vier vakken). */
.sectiekop { max-width:50%; margin-bottom:var(--ruimte-6); }
.sectiekop p { font-size:var(--tekst-body-klein); line-height:var(--tekst-body-klein-lh); }
/* In de smalle kolom (72ch) is de halve breedte te krap voor een kop: volle breedte. */
.smal .sectiekop { max-width:none; }
.nowrap { white-space:nowrap; }

/* ------------------------------------------------------------
   AI-analyse: leesstuk in twee tekstkolommen met pull-quotes
   ------------------------------------------------------------ */
/* Twee tekstkolommen op het vierkoloms paginagrid: elke kolom beslaat
   twee gridvakken, de middelste gridlijn valt precies in de goot. */
.leesstuk { column-count: 2; column-gap:var(--ruimte-7);
  /* de goot ligt links van de middellijn: kolom 2 begint precies op de gridlijn */
  width:calc(100% - var(--ruimte-7)); }
.leesstuk p, .leesstuk li { break-inside:avoid-column; }
.leesstuk h2 { column-span:all; font-size:var(--tekst-h4); line-height:var(--tekst-h4-lh);
  font-weight:var(--gewicht-semibold); margin:var(--ruimte-5) 0 var(--ruimte-3); }
.leesstuk h2:first-child { margin-top:0; }
.leesstuk h3 { font-size:var(--tekst-h5); line-height:var(--tekst-h5-lh);
  font-weight:var(--gewicht-semibold); margin:var(--ruimte-4) 0 var(--ruimte-2); }
.md :first-child { margin-top:0; }

/* Pull-quote variant C (design-review issue 34): los bronzen aanhalingsteken
   boven schreef cursief, bronregel in Montserrat caps. */
.pull-quote { break-inside:avoid; margin:var(--ruimte-5) 0; padding:0; border:0; }
.pull-quote::before { content:"\201C"; display:block; font-family:var(--font-body);
  font-size:3rem; line-height:0.6; color:var(--bs-brons); margin-bottom:var(--ruimte-2); }
.pull-quote p { margin:0 0 var(--ruimte-2); font-style:italic; font-size:1.25rem;
  line-height:1.5; color:var(--kleur-tekst); }
.pull-quote footer { font-family:var(--font-kop); font-size:0.8rem;
  color:var(--kleur-accent-tekst); }

/* Betekenislaag uit de rapportstijl: blauw = akkoord, brons = data. */
.citaat-akkoord { color:var(--kleur-akkoord); font-style:italic; }
.cijfer-data { color:var(--kleur-data); font-weight:var(--gewicht-bold);
  font-family:var(--font-kop); font-size:0.95em; }

/* Inline bronvermelding: hoekige pill met favicon en 'bron: <domein>'; hover of
   klik opent een kaartje met titel, fragment en een knop naar de bron zelf. */
a.bronpil { display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-kop); font-size:.75rem; line-height:1;
  background:var(--bs-wit); border:var(--grid-lijndikte) solid var(--kleur-rand);
  padding:3px 8px; margin:0 3px; vertical-align:middle; white-space:nowrap;
  text-decoration:none; color:var(--kleur-link); cursor:pointer; }
a.bronpil img { width:14px; height:14px; }
a.bronpil:hover { background:var(--bs-lichtcyaan); }
.bronpop { position:fixed; z-index:1500; width:400px; max-width:92vw;
  max-height:min(70vh, 460px); overflow:auto;
  background:var(--bs-wit); border-top:4px solid var(--bs-blauw);
  box-shadow:0 2px 24px rgba(26,56,119,.18); padding:var(--ruimte-3);
  font-family:var(--font-kop); font-size:.85rem; line-height:1.5; }
.bronpop strong { display:block; margin-bottom:var(--ruimte-2);
  overflow-wrap:anywhere; }
.bronpop .fragment { font-family:var(--font-body);
  font-size:.9rem; margin:0 0 var(--ruimte-2); }
.bronpop .fragment p { margin:0 0 var(--ruimte-1); }
.bronpop .fragment > :last-child { margin-bottom:0; }
/* koppen uit het bronfragment blijven bescheiden labels, geen paginakoppen */
.bronpop .fragment h1, .bronpop .fragment h2, .bronpop .fragment h3,
.bronpop .fragment h4, .bronpop .fragment h5, .bronpop .fragment h6 {
  font-family:var(--font-kop); font-size:.72rem; line-height:1.35;
  font-weight:var(--gewicht-semibold); text-transform:uppercase;
  letter-spacing:.05em; color:var(--bs-blauw);
  margin:var(--ruimte-2) 0 4px; }
.bronpop .fragment > :first-child { margin-top:0; }
.bronpop .fragment ul, .bronpop .fragment ol {
  margin:0 0 var(--ruimte-1); padding-left:1.2em; }
.bronpop .knop { display:inline-block; font-family:var(--font-kop);
  font-size:.75rem; font-weight:var(--gewicht-semibold);
  letter-spacing:var(--knop-letterspacing); text-transform:uppercase;
  text-decoration:none; padding:0.5rem 1.25rem; border-radius:var(--radius);
  background:var(--bs-blauw); color:var(--bs-wit); }
.bronpop .knop:hover { background:var(--bs-lichtblauw); color:var(--bs-blauw); }

/* ------------------------------------------------------------
   Zo helpt Berenschot / expertise, met contactblok (issue 49)
   ------------------------------------------------------------ */
.bs-blok { background:var(--bs-wit); padding:var(--ruimte-6);
  display:grid; grid-template-columns:1.2fr 0.8fr; gap:var(--ruimte-6); }
.sectie--vlak .bs-blok { background:var(--bs-wit); }
.bs-blok h2 { font-size:var(--tekst-h3); line-height:var(--tekst-h3-lh); }
.bs-blok .contact { background:var(--kleur-vlak); 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);
  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); }
.bs-blok .contact .knop { margin-top:var(--ruimte-2); }
/* ------------------------------------------------------------
   Landsbeeld: sticky kaart met scrollpanelen
   ------------------------------------------------------------ */
.landsbeeld { position:relative; background:var(--bs-wit); }
.kaartvenster { position:sticky; top:0; height:100vh; z-index:0; }
#kaart { position:absolute; inset:0; background:var(--bs-wit); }
/* Vloeiende kleurwissel akkoord ⇄ data op de choropleth (geen modus-tab). */
#kaart path.leaflet-interactive { transition:fill .8s ease, stroke .8s ease; }
/* De legenda staat rechts van het tekstpaneel en links van het silhouet, niet
   onder het paneel (feedback collega 07-09-2026): dezelfde linkermarge als het
   paneel plus zijn breedte. Op smalle schermen is daar geen ruimte; dan linksboven,
   waar de Noordzee is (zie de media query). */
.legenda { position:absolute;
  left:calc(max(3vw, (100vw - 1200px) / 2) + min(460px, 92vw) + var(--ruimte-4));
  bottom:var(--ruimte-3); z-index:500;
  background:rgba(255,255,255,.94); padding:var(--ruimte-3);
  font-family:var(--font-kop); font-size:0.8rem; max-width:280px;
  transition:opacity .35s ease; }
.legenda .rij { display:flex; align-items:center; gap:var(--ruimte-2); margin-top:4px; }
.legenda .vlakje { width:18px; height:12px; flex:none; border:1px solid rgba(0,0,0,.1); }
.legenda .vlakje-grad { width:74px; }
.legenda [hidden], .legenda div[hidden] { display:none !important; }
.vlakje { display:inline-block; width:12px; height:12px; flex:none;
  border:1px solid rgba(0,0,0,.12); vertical-align:middle; }

.panelen { position:relative; z-index:2; margin-top:-100vh; pointer-events:none; }
.paneel { min-height:100vh; display:flex; align-items:center; padding:var(--ruimte-5) 0; }
.paneel-kaartje { pointer-events:auto; width:min(460px, 92vw);
  margin-left:max(3vw, calc((100vw - 1200px) / 2)); background:rgba(255,255,255,.96);
  border-top:4px solid var(--bs-blauw); box-shadow:0 2px 24px rgba(26,56,119,.14);
  padding:var(--ruimte-5); }
.paneel-kaartje--data { border-top-color:var(--bs-brons-diep); }
.paneel-kaartje .eyebrow { margin-bottom:var(--ruimte-2); }
.paneel-kaartje h3 { font-size:var(--tekst-h4); }
.paneel-kaartje p { font-size:var(--tekst-body-klein); line-height:var(--tekst-body-klein-lh); }
/* De kaartanalyse in het kaartpaneel leest op volle tekstgrootte (feedback 2026-08-05). */
.paneel-kaartje p.observatie { font-size:var(--tekst-body); line-height:var(--tekst-body-lh); }
.paneel-citaat em { color:var(--kleur-akkoord); }
.kaarthint { font-family:var(--font-kop); font-size:.8rem; background:var(--kleur-vlak);
  padding:var(--ruimte-2) var(--ruimte-3); margin:var(--ruimte-3) 0 0; }
.datanotitie-kop { font-size:var(--tekst-h5); margin:var(--ruimte-4) 0 var(--ruimte-2);
  color:var(--kleur-accent-tekst); }
.datanotitie { font-size:var(--tekst-body-klein); background:var(--kleur-vlak);
  border-left:3px solid var(--bs-brons); padding:var(--ruimte-2) var(--ruimte-3); }
.datanotitie p { margin:0 0 .6em; } .datanotitie p:last-child { margin-bottom:0; }

/* Staafverdeling in het cijfers-paneel. */
.verdeling { margin-top:var(--ruimte-3); font-family:var(--font-kop); font-size:0.85rem; }
.verdeling .rij { display:grid; grid-template-columns:minmax(8.5rem, auto) 1fr 2.5rem;
  gap:var(--ruimte-2); align-items:center; margin-top:6px; }
.verdeling .vlab { display:flex; align-items:center; gap:6px; }
.vbar { height:14px; background:var(--kleur-vlak); position:relative; }
.vbar span { position:absolute; inset:0 auto 0 0; background:var(--bs-blauw);
  width:0; transition:width 1s ease .2s; }
.verdeling.zichtbaar .vbar span { width:var(--w); }
.vnum { text-align:right; font-weight:var(--gewicht-semibold); }

/* CBS-metric legenda in het datapaneel. */
.metric { margin-top:var(--ruimte-3); font-family:var(--font-kop); font-size:0.85rem; }
.metric .balk { height:14px; background:linear-gradient(to right,#F3E2C8,#E3B87E,#C98B33,#9C6410,#6B4409); }
.metric .uitersten { display:flex; justify-content:space-between; margin-top:4px; }

/* ------------------------------------------------------------
   Verdieping per gemeente
   ------------------------------------------------------------ */
/* Gelijke helften: de naad valt op de middelste gridlijn. */
.dd { display:grid; grid-template-columns:1fr 1fr; gap:var(--ruimte-7);
  padding:var(--ruimte-6) 0; border-top:var(--grid-lijndikte) solid var(--kleur-rand); }
.dd .bol { font-family:var(--font-kop); font-weight:var(--gewicht-bold);
  width:2.6rem; height:2.6rem; background:var(--bs-blauw); color:var(--bs-wit);
  display:inline-grid; place-items:center; font-size:1.15rem; margin-bottom:var(--ruimte-2); }
.dd h3 { margin-bottom:var(--ruimte-1); }
.dd .meta { font-family:var(--font-kop); font-size:var(--tekst-meta);
  color:var(--kleur-accent-tekst); margin-bottom:var(--ruimte-3); }
.dd h4 { font-size:var(--tekst-h5); line-height:var(--tekst-h5-lh);
  font-weight:var(--gewicht-semibold); margin:var(--ruimte-4) 0 var(--ruimte-2); }
.dd .md p { font-size:var(--tekst-body-klein); line-height:var(--tekst-body-klein-lh); }
.wijkkaart { height:300px; background:var(--kleur-vlak); box-shadow:var(--schaduw-blok);
  margin-bottom:var(--ruimte-4); margin-right:var(--ruimte-4); }
.fig-cap { font-family:var(--font-kop); font-size:.75rem; opacity:.75;
  margin-bottom:var(--ruimte-3); }
.blokquote { background:var(--kleur-vlak); border-left:4px solid var(--bs-blauw);
  padding:var(--ruimte-3) var(--ruimte-4); margin:0 0 var(--ruimte-3);
  font-style:italic; color:var(--kleur-akkoord); }
.blokquote p { margin:0; }
.blokquote footer { font-style:normal; font-family:var(--font-kop);
  font-size:var(--tekst-meta); margin-top:var(--ruimte-1); }
.opvallend { background:var(--kleur-vlak); border-left:3px solid var(--bs-brons-diep);
  padding:var(--ruimte-2) var(--ruimte-3); margin:var(--ruimte-3) 0;
  font-size:var(--tekst-body-klein); }
a.src { font-family:var(--font-kop); font-size:.85rem;
  font-weight:var(--gewicht-semibold); text-decoration:none; display:inline-block;
  margin-top:var(--ruimte-2); }
a.src:hover { text-decoration:underline; }
.kc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:0 var(--ruimte-5); margin:var(--ruimte-3) 0 0; }
.kc { border-bottom:var(--grid-lijndikte) solid var(--kleur-rand); padding:7px 0;
  display:flex; flex-direction:column; }
.kc-l { font-family:var(--font-kop); font-size:.7rem; opacity:.75; }
.kc-v { font-size:1.05rem; font-weight:var(--gewicht-bold); color:var(--bs-blauw);
  font-family:var(--font-kop); }
.dd-meer { margin-top:var(--ruimte-4); font-size:var(--tekst-body-klein); }
.dd-meer summary { cursor:pointer; color:var(--kleur-link);
  font-family:var(--font-kop); font-weight:var(--gewicht-semibold); }
.seatbar { display:flex; width:100%; max-width:520px; height:18px;
  overflow:hidden; background:#EDEFF3; margin:4px 0 8px; }
.seatbar .seg { height:100%; border-right:1px solid var(--bs-wit); }
.seatbar .seg.coal { background:var(--bs-blauw); }
.seatbar .seg.opp { background:#C7CCD9; }

/* ------------------------------------------------------------
   Tabellen
   ------------------------------------------------------------ */
table { width:100%; border-collapse:collapse; font-family:var(--font-kop);
  font-size:var(--tekst-meta); }
th { text-align:left; font-weight:var(--gewicht-semibold);
  border-bottom:2px solid var(--bs-blauw); padding:var(--ruimte-2); }
td { border-bottom:var(--grid-lijndikte) solid var(--kleur-rand); padding:var(--ruimte-2);
  vertical-align:top; }
td.cijfer, th.cijfer { text-align:right; font-variant-numeric:tabular-nums; }
table.mini { font-size:.85rem; }
.tabel-scroll { overflow-x:auto; }
.tabel-scroll--vast { max-height:72vh; overflow:auto; background:var(--bs-wit); }
.mtx thead th { position:sticky; top:0; z-index:2; background:var(--bs-wit);
  white-space:nowrap; }
.mtx tbody tr:hover { background:var(--bs-lichtcyaan); }
th.sorteerbaar { cursor:pointer; user-select:none; }
th.sorteerbaar::after { content:" ↕"; color:var(--bs-lichtblauw); }
th.sorteerbaar[aria-sort="ascending"]::after { content:" ↑"; color:var(--bs-blauw); }
th.sorteerbaar[aria-sort="descending"]::after { content:" ↓"; color:var(--bs-blauw); }

details.bijlage > summary { cursor:pointer; font-family:var(--font-kop);
  font-size:var(--tekst-h5); font-weight:var(--gewicht-semibold);
  padding:var(--ruimte-3) 0; list-style:none; }
details.bijlage > summary::-webkit-details-marker { display:none; }
details.bijlage > summary::before { content:"+"; display:inline-grid; place-items:center;
  width:1.6rem; height:1.6rem; background:var(--bs-blauw); color:var(--bs-wit);
  margin-right:var(--ruimte-2); }
details.bijlage[open] > summary::before { content:"–"; }

.filter-bar { display:flex; align-items:center; gap:var(--ruimte-4); flex-wrap:wrap;
  padding:var(--ruimte-3); background:var(--bs-wit);
  border:var(--grid-lijndikte) solid var(--kleur-rand); margin-bottom:var(--ruimte-3);
  font-family:var(--font-kop); font-size:.85rem; }
.filter-bar label { font-weight:var(--gewicht-semibold); }
.filter-bar input, .filter-bar select { font-family:var(--font-kop); font-size:.85rem;
  padding:5px 10px; border:var(--grid-lijndikte) solid var(--kleur-rand);
  background:var(--bs-wit); color:var(--kleur-tekst); outline:none; border-radius:0; }
.filter-count { margin-left:auto; opacity:.75; }

details.cite { font-size:.85rem; }
details.cite > summary { list-style:none; cursor:pointer; font-style:italic;
  display:flex; gap:8px; align-items:baseline; }
details.cite > summary::-webkit-details-marker { display:none; }
details.cite > summary::before { content:'▸'; font-style:normal; color:var(--kleur-link); }
details.cite[open] > summary::before { content:'▾'; }
.cite-prev { flex:1; }
.cite-more { font-style:normal; font-size:.72rem; color:var(--kleur-link);
  font-weight:var(--gewicht-semibold); }
details.cite[open] .cite-more { display:none; }
.cite-list { margin:8px 0 6px 18px; padding:0; }
.cite-list li { margin:4px 0; font-style:normal; }
.pg { font-style:normal; opacity:.7; font-size:.78rem; white-space:nowrap; }

/* ------------------------------------------------------------
   Voet
   ------------------------------------------------------------ */
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; gap:var(--ruimte-6); align-items:start; }
footer.voet a { color:inherit; }
footer.voet .klein { opacity:0.75; }
footer.voet p { font-family:var(--font-kop); font-size:var(--tekst-meta); }

/* Leaflet-popup in huisstijl: hetzelfde kaartje als de tekstpanelen —
   hoekig, blauwe kaprand, brons voor CBS-data, citaat in serif. */
.leaflet-popup-content { font-family:var(--font-kop); font-size:.82rem; line-height:1.55; }
.leaflet-popup-content strong { color:var(--bs-blauw); }
.leaflet-container { font:inherit; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { border-radius:0; }
.gm-popup .leaflet-popup-content-wrapper { padding:0; background:var(--bs-wit);
  border-top:4px solid var(--bs-blauw); box-shadow:0 2px 24px rgba(26,56,119,.18); }
/* In de CBS-modus krijgt de kaprand de datakleur, net als het datapaneel. */
#kaart.modus-data .gm-popup .leaflet-popup-content-wrapper { border-top-color:var(--bs-brons-diep); }
.gm-popup .leaflet-popup-content { margin:0; color:var(--kleur-tekst); }
.gm-popup .leaflet-popup-close-button { padding:8px 10px 0 0 !important;
  color:#8d97ab !important; font-size:18px !important; }
.gm-popup .leaflet-popup-close-button:hover { color:var(--bs-blauw) !important; }

.gm-pop { padding:var(--ruimte-3) var(--ruimte-3) var(--ruimte-4); }
.gm-pop .naam { display:block; font-size:1rem; line-height:1.3;
  font-weight:var(--gewicht-semibold); color:var(--bs-blauw); padding-right:var(--ruimte-4); }
.gm-pop .meta { display:block; margin-top:2px; font-size:.72rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--kleur-accent-tekst); }
.gm-pop .score { display:flex; gap:var(--ruimte-2); align-items:flex-start;
  margin:var(--ruimte-3) 0 0; padding-top:var(--ruimte-3);
  border-top:var(--grid-lijndikte) solid var(--kleur-rand); }
.gm-pop .score .vlakje { margin-top:3px; }
.gm-pop .cbs { margin-top:var(--ruimte-3); background:var(--kleur-vlak);
  padding:var(--ruimte-2) var(--ruimte-3); }
.gm-pop .cbs .label { display:block; font-size:.72rem; line-height:1.4;
  color:var(--kleur-accent-tekst); }
.gm-pop .cbs .waarde { font-size:1.05rem; font-weight:var(--gewicht-semibold);
  color:var(--bs-blauw); }
.gm-pop .citaat { margin:var(--ruimte-3) 0 0; padding-left:var(--ruimte-3);
  border-left:3px solid var(--bs-brons); font-family:var(--font-body);
  font-size:.92rem; line-height:1.5; font-style:italic; color:var(--kleur-akkoord); }
.gm-pop .bron { display:inline-block; margin-top:var(--ruimte-3);
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  font-weight:var(--gewicht-semibold); text-decoration:none; color:var(--bs-blauw);
  border-bottom:2px solid var(--bs-lichtblauw); padding-bottom:2px; }
.gm-pop .bron:hover { color:var(--bs-lichtblauw); }

/* Reveal-animatie bij scrollen. */
.reveal { opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease; }
.reveal.zichtbaar { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .scrollhint { animation:none; }
  .vbar span { transition:none; }
  .verdeling .vbar span { width:var(--w); }
  #kaart path.leaflet-interactive { transition:none; }
  .woordmerk-banner { transition:none; }
}

/* Responsief. */
@media (max-width:860px) {
  .woordmerk-banner { display:none; }
  .sectiekop { max-width:none; }
  /* Lange samenstellingen mogen breken in plaats van buiten beeld te lopen. */
  h1, h2, h3 { overflow-wrap:break-word; hyphens:auto; }
  .leesstuk { column-count:1; width:auto; }
  .bs-blok { grid-template-columns:1fr; }
  .dd { grid-template-columns:1fr; gap:var(--ruimte-4); }
  .wijkkaart { margin-right:0; }
  .paneel-kaartje { margin-inline:3vw; }
  .legenda { left:var(--ruimte-3); bottom:auto; top:var(--ruimte-3); }
  footer.voet .kolom { grid-template-columns:1fr; gap:var(--ruimte-3); }
}

/* ---------- print / PDF-export (issue 22; scripts/rapport_pdf.py) ---------- */
@page { size:A4; margin:16mm 14mm; }
@media print {
  .paginakop, .grid-lijnen, .scrollhint, .kaartvenster, .filter-bar,
  .bronpop { display:none; }
  body { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  /* hero = voorblad: één pagina, daarna de inhoud */
  .hero-verdieping { min-height:auto; page-break-after:always; }
  .hero-verdieping .kolom { padding:60px 0; }
  .sectie { padding:24px 0; }
  .kolom { width:100%; }
  .smal { margin-inline:0; }
  .reveal { opacity:1; transform:none; }
  .panelen { margin-top:0; }
  .paneel { min-height:auto; padding:0 0 18px; display:block; }
  .paneel-kaartje { width:100%; margin-left:0; box-shadow:none;
    border:1px solid var(--kleur-rand); border-top-width:4px; }
  /* tellers zijn scroll-geanimeerd; in print de eindstand tonen */
  .cijfers .waarde { font-size:0; }
  .cijfers .waarde::after { content:attr(data-v) attr(data-suffix); font-size:2.2rem; }
  .vbar span { width:var(--w); transition:none; }
  /* leeskolommen: per pagina vullen i.p.v. over de hele sectie balanceren */
  .leesstuk { column-fill:auto; }
  /* verdieping gestapeld; de interactieve wijkkaart vervalt, tenzij de PDF-export
     (scripts/rapport_pdf.py) er een statisch kaartbeeld in heeft gehangen */
  .dd { display:block; }
  .wijkkaart { display:none; }
  .verdeling .rij, .blokquote, .pull-quote, .opvallend, .kc, .tegel { break-inside:avoid; }
  .tabel-scroll, .tabel-scroll--vast { max-height:none; overflow:visible; }
}

/* ------------------------------------------------------------
   Grafiekfiguren in de leeskolom (issue 98)
   Vormen uit de html-report-skill; zie report/grafieken.py.
   ------------------------------------------------------------ */
figure.grafiek { break-inside:avoid; margin:var(--ruimte-5) 0; }
figure.grafiek .datanotitie-kop { margin-top:0; }
figure.grafiek .verdeling { margin-top:var(--ruimte-2); }

/* Legenda bij twee of meer reeksen; kleur is nooit de enige drager. */
.legenda-rij { display:flex; flex-wrap:wrap; gap:.4rem 1.2rem;
  font-family:var(--font-kop); font-size:.78rem; margin-top:var(--ruimte-2); }
.legenda-rij span { display:inline-flex; align-items:center; gap:6px; }
.legenda-rij i { width:12px; height:12px; flex:0 0 auto; }

/* Dumbbell: twee metingen als vierkante markers op één spoor. De labelkolom
   is smaller dan in de skill, want hier staat het figuur in een leeskolom. */
.verdeling--dumbbell .rij {
  grid-template-columns:var(--vlab-w, 10rem) minmax(0, 1fr) 7.4rem; }
.dtrack { position:relative; height:16px; background:var(--kleur-vlak); }
.dtrack .dlijn { position:absolute; top:50%; height:3px;
  transform:translateY(-50%); background:#8FA6D4; }
.dtrack i { position:absolute; top:50%; width:11px; height:11px;
  transform:translate(-50%, -50%); }
.dtrack i.d-oud { background:var(--bs-lichtblauw); }
.dtrack i.d-nieuw { background:var(--grafiek-1); z-index:1; }
.verdeling--dumbbell .vnum { white-space:nowrap; }

/* Het tabel-alternatief onder elke grafiek. */
figure.grafiek details.waarden { margin-top:var(--ruimte-2); }
figure.grafiek details.waarden summary { font-family:var(--font-kop);
  font-size:.78rem; cursor:pointer; color:var(--bs-brons-diep); }
figure.grafiek details.waarden table { width:100%; border-collapse:collapse;
  font-family:var(--font-kop); font-size:.74rem; margin-top:6px; }
figure.grafiek details.waarden th, figure.grafiek details.waarden td {
  border-bottom:1px solid var(--kleur-rand); padding:3px 6px; text-align:right; }
figure.grafiek details.waarden th:first-child,
figure.grafiek details.waarden td:first-child { text-align:left; }
figure.grafiek details.waarden tr.sub td { color:var(--kleur-accent-tekst); }
figure.grafiek details.waarden tr.sub td:first-child { padding-left:1.4em; }

/* Staafverdeling als figuur (issue 101/102): zelfde raster als de dumbbell,
   met optionele groepstussenkoppen (twee sporen op dezelfde schaal). */
.verdeling--figuur .rij {
  grid-template-columns:var(--vlab-w, 10rem) minmax(0, 1fr) 3.4rem; }
.verdeling--figuur .vgroep { font-family:var(--font-kop); font-size:.8rem;
  margin:var(--ruimte-3) 0 2px; color:var(--bs-blauw); }
.verdeling--figuur .vgroep:first-child { margin-top:var(--ruimte-2); }

/* Smal scherm: het label krijgt een eigen regel, zodat het spoor breed genoeg
   blijft om het verschil te zien. */
@media (max-width:860px) {
  .verdeling--dumbbell .rij { grid-template-columns:minmax(0, 1fr) 6.8rem; }
  .verdeling--dumbbell .vlab { grid-column:1 / -1; }
  .verdeling--figuur .rij { grid-template-columns:minmax(0, 1fr) 3.4rem; }
  .verdeling--figuur .vlab { grid-column:1 / -1; }
}

/* 100%-gestapelde staaf (stijlgids §8): witte naden via border, waarden >= 7%
   ín het segment; wit op donker, blauw op licht. */
.stapelset { margin-top:var(--ruimte-2); }
.srow { margin-top:12px; break-inside:avoid; }
.slab { display:block; font-family:var(--font-kop); font-size:.82rem;
  font-weight:var(--gewicht-semibold); margin-bottom:3px; }
.slab-n { font-weight:var(--gewicht-regular); opacity:.7; }
.stapel { display:flex; height:17px; }
.stapel i { position:relative; display:block; height:100%;
  border-right:2px solid var(--bs-wit); }
.stapel i:last-child { border-right:0; }
.stapel i b { position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-family:var(--font-kop);
  font-weight:var(--gewicht-semibold); font-size:.64rem; font-style:normal; }
.stapel i b.op-donker { color:var(--bs-wit); }
.stapel i b.op-licht { color:var(--bs-blauw); }

/* Donut (stijlgids §8): SVG links, legenda met exacte waarden rechts. */
.fig-duo { display:grid; grid-template-columns:auto 1fr; gap:var(--ruimte-4);
  align-items:center; margin-top:var(--ruimte-3); }
.donut-wrap { width:min(220px, 58vw); }
.donut-wrap svg { display:block; width:100%; height:auto; }
.donut-getal { font-family:var(--font-kop); font-weight:var(--gewicht-bold);
  font-size:34px; fill:var(--bs-blauw); }
.donut-label { font-family:var(--font-kop); font-size:11px;
  fill:var(--kleur-accent-tekst); }
.donut-legenda { font-family:var(--font-kop); font-size:.82rem; }
.donut-legenda .rij { display:flex; align-items:baseline; gap:8px;
  padding:5px 0; border-bottom:var(--grid-lijndikte, 1px) solid var(--kleur-rand); }
.donut-legenda .rij:last-child { border-bottom:0; }
.donut-legenda .vlakje { align-self:center; }
.donut-legenda .dl-lab { flex:1; }
.donut-legenda .dl-num { white-space:nowrap;
  font-weight:var(--gewicht-semibold); font-variant-numeric:tabular-nums; }
@media (max-width:700px) { .fig-duo { grid-template-columns:1fr; } }

@media print {
  figure.grafiek, .verdeling--dumbbell .rij { break-inside:avoid; }
  /* Op papier kan de lezer niets uitklappen, en de exacte waarden zijn geen
     extraatje maar het tabel-alternatief dat de stijlgids eist. Een dichte
     <details> verbergt zijn inhoud met content-visibility; alleen `display`
     omzetten is dus niet genoeg (getest in Chromium 149, de motor achter de
     PDF-export). Beide regels staan er: de pseudo-elementvariant voor moderne
     browsers, de andere als terugval. */
  figure.grafiek details.waarden::details-content { content-visibility:visible; }
  figure.grafiek details.waarden { content-visibility:visible; }
  figure.grafiek details.waarden > *:not(summary) { display:block; }
  figure.grafiek details.waarden summary { list-style:none; }
}

.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:" →"; }

.proposities { margin-top:var(--ruimte-4, 1.25rem); }
.proposities .propositie { display:flex; flex-direction:column; gap:2px;
  text-decoration:none; color:inherit; padding:var(--ruimte-3, .75rem) 0;
  border-top:1px solid rgba(0,0,0,.15); }
.proposities .propositie strong {
  font-family:var(--font-kop, var(--font-heading, inherit));
  font-size:var(--tekst-body, .95rem); }
.proposities .propositie strong::after { content:" →";
  color:var(--bs-blauw, currentColor); }
.proposities .propositie:hover strong { text-decoration:underline; }
.proposities .propositie .meta {
  font-family:var(--font-kop, var(--font-heading, inherit));
  font-size:var(--tekst-meta, .68rem);
  font-weight:var(--gewicht-semibold, 600);
  letter-spacing:var(--knop-letterspacing, .06em); text-transform:uppercase;
  opacity:0.7; }
.proposities .propositie .omschrijving {
  font-size:var(--tekst-body-klein, .85rem);
  line-height:var(--tekst-body-klein-lh, 1.5); opacity:0.9; }

.expertise-blokken { display:flex; flex-direction:column;
  gap:var(--ruimte-4, 1.25rem); margin-top:var(--ruimte-3, .75rem); }
.expertise-blok { border-top:1px solid rgba(0,0,0,.15);
  padding-top:var(--ruimte-3, .75rem); }
.expertise-blok p { margin:0 0 var(--ruimte-2, .5rem); }
.expertise-knoppen { display:flex; flex-wrap:wrap; gap:var(--ruimte-2, .5rem); }
.expertise-blok .knop-lees, a.knop-lees { display:inline-flex; align-items:center;
  gap:6px; text-decoration:none; color:var(--bs-blauw, currentColor);
  font-family:var(--font-kop, var(--font-heading, inherit));
  font-size:var(--tekst-meta, .68rem);
  font-weight:var(--gewicht-semibold, 600);
  letter-spacing:var(--knop-letterspacing, .06em); text-transform:uppercase;
  border:1px solid currentColor; padding:.5rem .9rem; }
a.knop-lees::after { content:"→"; }
a.knop-lees:hover { background:var(--bs-lichtcyaan, rgba(0,0,0,.05)); }
@media print { a.knop-lees { border:0; padding:0; } }