@font-face{font-family:"Jakarta";src:url("/assets/fonts/plus-jakarta-sans.woff2") format("woff2");font-weight:400 800;font-display:swap;font-style:normal}
@font-face{font-family:"Bron";src:url("/assets/fonts/source-sans-3.woff2") format("woff2");font-weight:400 700;font-display:swap;font-style:normal}
@font-face{font-family:"Hand";src:url("/assets/fonts/caveat.woff2") format("woff2");font-weight:400 700;font-display:swap;font-style:normal}

:root{
  --diepblauw:#1a3a6b; --diepblauw-donker:#132c52; --diepblauw-licht:#2b5697;
  --rood:#c8102e; --rood-donker:#a60d26;
  --groen:#157347; --groen-donker:#0f5a37;
  --geel:#fcefa4; --geel-rand:#e9d982;
  --inkt:#17233a; --inkt-zacht:#4a5568;
  --wit:#ffffff; --mist:#f5f7fb; --rand:#e3e8f0;
  --schaduw:0 1px 2px rgba(23,35,58,.05), 0 6px 20px rgba(23,35,58,.07);
  --schaduw-op:0 2px 4px rgba(23,35,58,.07), 0 12px 32px rgba(23,35,58,.12);
  --rond:14px; --rond-groot:22px;
  --kop:"Jakarta",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --tekst:"Bron",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --hand:"Hand","Segoe Script","Bradley Hand","Brush Script MT",cursive;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wit);color:var(--inkt);font-family:var(--tekst);
  font-size:17px;line-height:1.65;overflow-wrap:break-word}
h1,h2,h3,h4{font-family:var(--kop);line-height:1.18;letter-spacing:-.015em;color:var(--diepblauw);margin:0 0 .5em}
h1{font-size:clamp(2rem,1.35rem + 2.6vw,3.15rem);font-weight:800}
h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.15rem);font-weight:800}
h3{font-size:clamp(1.15rem,1.05rem + .4vw,1.38rem);font-weight:700}
h4{font-size:1.02rem;font-weight:700}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
a{color:var(--diepblauw-licht)}
a:hover{color:var(--diepblauw)}
img,svg{max-width:100%}
img{height:auto;display:block}
:focus-visible{outline:3px solid var(--diepblauw);outline-offset:3px;border-radius:4px}
.voet :focus-visible,.hero :focus-visible,.balk :focus-visible{outline-color:#fff}
.verborgen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.overslaan{position:absolute;left:-9999px;top:0;z-index:20;background:var(--diepblauw);
  color:#fff;padding:.7rem 1.1rem;border-radius:0 0 var(--rond) 0;font-weight:700}
.overslaan:focus{left:0}
.omhulsel{width:100%;max-width:1140px;margin:0 auto;padding:0 20px}
.icoon{width:1.35em;height:1.35em;flex:none}

/* ---- knoppen ---- */
.knop{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--kop);font-weight:700;
  font-size:1rem;line-height:1.2;padding:.78rem 1.35rem;border-radius:999px;text-decoration:none;
  border:2px solid transparent;transition:background-color .15s,border-color .15s,color .15s}
.knop .icoon{width:1.1em;height:1.1em}
.knop--rood{background:var(--rood);color:#fff}
.knop--rood:hover{background:var(--rood-donker);color:#fff}
.knop--groen{background:var(--groen);color:#fff}
.knop--groen:hover{background:var(--groen-donker);color:#fff}
.knop--lijn{background:transparent;color:var(--diepblauw);border-color:var(--rand)}
.knop--lijn:hover{border-color:var(--diepblauw);color:var(--diepblauw);background:var(--mist)}
.knop--licht{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55)}
.knop--licht:hover{background:#fff;color:var(--diepblauw);border-color:#fff}

/* ---- kop ---- */
.kop{background:#fff;border-bottom:1px solid var(--rand);position:relative;z-index:5}
.kop__binnen{display:flex;align-items:center;gap:1rem 1.5rem;flex-wrap:wrap;padding-top:.9rem;padding-bottom:.9rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--diepblauw);flex:none}
.logo__merk{width:40px;height:40px;flex:none}
.logo__tekst{display:flex;flex-direction:column;line-height:1.1}
.logo__naam{font-family:var(--kop);font-weight:800;font-size:1.22rem;letter-spacing:-.02em}
.logo__onder{font-size:.76rem;color:var(--inkt-zacht);font-weight:600}
.hoofdmenu{flex:1 1 320px;min-width:0}
.hoofdmenu ul{display:flex;flex-wrap:wrap;gap:.2rem 1.35rem;list-style:none;margin:0;padding:0}
.hoofdmenu a{font-family:var(--kop);font-weight:600;font-size:.97rem;color:var(--inkt);
  text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent;display:inline-block}
.hoofdmenu a:hover{color:var(--diepblauw);border-bottom-color:var(--rood)}
.hoofdmenu a[aria-current="page"]{color:var(--diepblauw);border-bottom-color:var(--diepblauw)}
.kop__acties{display:flex;align-items:center;gap:.6rem;margin-left:auto;flex-wrap:wrap}
.zoekknop{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--rand);color:var(--diepblauw);text-decoration:none;flex:none}
.zoekknop:hover{background:var(--mist);border-color:var(--diepblauw)}
.zoekknop .icoon{width:20px;height:20px}

/* ---- kruimelpad ---- */
.kruimels{background:var(--mist);border-bottom:1px solid var(--rand);font-size:.88rem}
.kruimels ol{display:flex;flex-wrap:wrap;gap:.1rem .5rem;list-style:none;margin:0;padding:.75rem 0}
.kruimels li{display:flex;align-items:center;gap:.5rem;color:var(--inkt-zacht)}
.kruimels li+li::before{content:"›";color:var(--rand);font-size:1.1em}
.kruimels a{color:var(--inkt-zacht);text-decoration:none}
.kruimels a:hover{color:var(--diepblauw);text-decoration:underline}
.kruimels [aria-current="page"]{color:var(--diepblauw);font-weight:600}

/* ---- hero ---- */
.hero{background:var(--diepblauw);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.075) 1.5px,transparent 1.6px);
  background-size:26px 26px}
.hero__binnen{position:relative;z-index:1;display:grid;gap:2.5rem;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;
  padding-top:clamp(2.5rem,1.5rem + 4vw,4.5rem);padding-bottom:clamp(2.5rem,1.5rem + 4vw,4.5rem)}
.hero h1{color:#fff;margin-bottom:.45em}
.hero__regels{font-family:var(--kop);font-weight:600;font-size:clamp(1.05rem,1rem + .45vw,1.28rem);
  color:#dbe5f4;margin:0 0 1.9rem}
.hero__regels span{display:block}
.hero__knoppen{display:flex;flex-wrap:wrap;gap:.75rem}
.hero__beeld{margin:0}
.label{display:inline-block;font-family:var(--kop);font-weight:700;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px;
  background:rgba(255,255,255,.16);color:#fff;margin-bottom:1.1rem}
.label--blauw{background:#e7edf7;color:var(--diepblauw)}
.label--rood{background:#fae7ea;color:var(--rood-donker)}

/* ---- secties ---- */
.vak{padding:clamp(2.6rem,1.8rem + 3vw,4.2rem) 0}
.vak--mist{background:var(--mist)}
.vak__kop{max-width:44rem;margin:0 auto clamp(1.8rem,1.2rem + 2vw,2.6rem);text-align:center}
.vak__kop p{color:var(--inkt-zacht);font-size:1.06rem;margin-bottom:0}
.vak__kop--links{margin-left:0;text-align:left}

/* ---- kaarten ---- */
.kaart{background:#fff;border:1px solid var(--rand);border-radius:var(--rond-groot);
  padding:1.6rem;box-shadow:var(--schaduw);display:flex;flex-direction:column;gap:.35rem}
a.kaart{text-decoration:none;color:inherit;transition:box-shadow .18s,transform .18s,border-color .18s}
a.kaart:hover{box-shadow:var(--schaduw-op);transform:translateY(-3px);border-color:#cfd9e8}
.kaart h2,.kaart h3{margin-bottom:.25rem}
.kaart h2{font-size:clamp(1.15rem,1.05rem + .4vw,1.38rem);font-weight:700}
.kaart h2,.kaart h3{hyphens:manual}
.kaart p{color:var(--inkt-zacht);margin-bottom:0}
.kaart__nr{font-family:var(--kop);font-weight:800;font-size:.86rem;letter-spacing:.06em;
  color:var(--rood)}
.kaart__icoon{width:52px;height:52px;border-radius:14px;background:#e7edf7;color:var(--diepblauw);
  display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;flex:none}
.kaart__icoon .icoon{width:26px;height:26px}
.kaart__meer{margin-top:auto;padding-top:1rem;font-family:var(--kop);font-weight:700;
  color:var(--diepblauw-licht);display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem}
.kaart__meer .icoon{width:18px;height:18px}
a.kaart:hover .kaart__meer{color:var(--rood)}

.raster{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.raster--vijf{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.raster--twee{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.raster--drie{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
/* Vier kaarten in `raster--twee` gaven 3 + 1; met een smallere ondergrens staan
   ze op een brede monitor netjes naast elkaar en vouwen ze daaronder om. */
.raster--vier{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}

/* ---- balk met kenmerken ---- */
.balk{background:var(--diepblauw-donker);color:#fff}
.balk__binnen{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  padding-top:2.4rem;padding-bottom:2.4rem}
.balk h3{color:#fff;margin-bottom:.3rem;display:flex;align-items:center;gap:.6rem}
.balk p{color:#c9d6ea;margin-bottom:0;font-size:.97rem}
.balk .icoon{width:22px;height:22px;color:#8fb4e8}

/* ---- post-it citaat ---- */
.postit{margin:2rem 0;background:var(--geel);border:1px solid var(--geel-rand);
  border-radius:4px 22px 6px 20px;padding:1.6rem 1.7rem;box-shadow:var(--schaduw);
  transform:rotate(-.9deg);max-width:38rem}
.postit blockquote{margin:0}
.postit p{font-family:var(--hand);font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem);line-height:1.35;
  color:#3d3413;margin:0}
.postit figcaption{margin-top:.9rem;font-size:.82rem;font-weight:600;color:#6b5d20;
  font-family:var(--kop);letter-spacing:.02em}
.postit--midden{margin-left:auto;margin-right:auto}

/* ---- tekstblokken ---- */
.tekst{max-width:44rem}
.tekst ul,.tekst ol{padding-left:1.25rem;margin:0 0 1.1em}
.tekst li{margin-bottom:.45em}
.blok{background:#fff;border:1px solid var(--rand);border-radius:var(--rond-groot);
  padding:clamp(1.4rem,1rem + 1.4vw,2.2rem);box-shadow:var(--schaduw)}
.blok--mist{background:var(--mist);box-shadow:none}
.blok+.blok{margin-top:1.25rem}
.blok h2{font-size:clamp(1.28rem,1.12rem + .7vw,1.6rem)}
.blok__merk{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.9rem}
.blok__merk .icoon{width:24px;height:24px;color:var(--rood);margin-top:.15em}
.blok__merk h2{margin:0}
.duo{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));align-items:start}
.duo--zijbalk{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}

/* ---- genummerde stappen ---- */
.stappen{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));counter-reset:stap}
.stappen li{background:#fff;border:1px solid var(--rand);border-radius:var(--rond);
  padding:1.3rem;box-shadow:var(--schaduw);position:relative;counter-increment:stap}
.stappen li::before{content:counter(stap);display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--diepblauw);color:#fff;
  font-family:var(--kop);font-weight:800;font-size:.95rem;margin-bottom:.75rem}
.stappen h3{font-size:1.06rem;margin-bottom:.15rem}
.stappen .wanneer{display:block;font-size:.8rem;font-weight:700;color:var(--rood);
  font-family:var(--kop);letter-spacing:.03em;text-transform:uppercase;margin-bottom:.5rem}
.stappen p{color:var(--inkt-zacht);font-size:.97rem;margin-bottom:0}

.vragenlijst{list-style:none;margin:0;padding:0;counter-reset:vraag;display:grid;gap:.9rem}
.vragenlijst li{counter-increment:vraag;display:grid;grid-template-columns:2.1rem 1fr;gap:.9rem;
  align-items:start}
.vragenlijst li::before{content:counter(vraag,decimal-leading-zero);font-family:var(--kop);
  font-weight:800;color:var(--rood);font-size:.95rem;padding-top:.15rem}
.vragenlijst h3{font-size:1.02rem;margin-bottom:.1rem}
.vragenlijst p{color:var(--inkt-zacht);font-size:.97rem;margin-bottom:0}

/* ---- tabellen ---- */
.tabelvak{overflow-x:auto;border:1px solid var(--rand);border-radius:var(--rond);background:#fff;
  box-shadow:var(--schaduw)}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:.97rem}
caption{text-align:left;padding:1rem 1.1rem .2rem;font-size:.87rem;color:var(--inkt-zacht)}
th,td{padding:.72rem 1.1rem;text-align:left;border-bottom:1px solid var(--rand);vertical-align:top}
thead th{background:var(--diepblauw);color:#fff;font-family:var(--kop);font-weight:700;
  font-size:.86rem;letter-spacing:.03em;border-bottom:none;position:sticky;top:0}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:none}
tbody tr:nth-child(even){background:#fafbfe}
td.getal,th.getal{text-align:right;font-variant-numeric:tabular-nums}
tbody th{font-weight:600;color:var(--inkt)}
tfoot td,tfoot th{background:var(--mist);font-weight:700;border-top:2px solid var(--rand)}
.pijl{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;white-space:nowrap}
/* RICHTING, GEEN OORDEEL. Groen betekent op deze site precies een ding: "Steun het
   initiatief". Een groen pijltje bij "meer geld naar defensie" zou dat signaal lenen voor een
   standpunt -- en die richtingen zijn hier een voorbeeldweergave, geen standpunt. Daarom de
   huisstijlkleuren: blauw omhoog, rood omlaag, grijs gelijk. De vorm van het pijltje en het
   woord ernaast dragen de betekenis, dus de kolom is ook zonder kleur te lezen. */
.pijl--omhoog{color:var(--diepblauw)}
.pijl--omlaag{color:var(--rood-donker)}
.pijl--gelijk{color:var(--inkt-zacht)}
.pijl span[aria-hidden]{font-size:1.05em;line-height:1}
.begrippen th{width:14rem}

/* ---- staafdiagram ---- */
.staafdiagram{margin:0}
.staafdiagram figcaption{font-family:var(--kop);font-weight:700;color:var(--diepblauw);
  margin-bottom:1rem;font-size:1.02rem}
.staven{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.staaf{display:grid;grid-template-columns:5.6rem minmax(0,1fr) 2.4rem;align-items:center;
  gap:.7rem;padding:2px 0}
.staaf__naam{font-family:var(--kop);font-weight:700;font-size:.9rem;color:var(--inkt)}
.staaf__spoor{background:var(--mist);border-radius:0 5px 5px 0;height:22px;display:block}
.staaf__vulling{display:block;height:100%;background:var(--diepblauw);border-radius:0 4px 4px 0}
.staaf__waarde{font-family:var(--kop);font-weight:700;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--diepblauw)}
.bron{font-size:.84rem;color:var(--inkt-zacht);margin-top:1rem}
.illustratie{margin:2rem auto 0;max-width:620px;text-align:center}
.illustratie img{max-width:100%;height:auto;border-radius:12px}
/* Het beeld boven het citaatbriefje op de voorpagina; schaalt mee en houdt zijn verhouding, zodat het op een telefoon niet uitrekt. */
.blokbeeld{margin:0 0 1.25rem}
.blokbeeld img{width:100%;height:auto;display:block;border-radius:12px}
.hero__beeld img{max-width:100%;height:auto;border-radius:12px}
.illustratie img{margin:0 auto}

/* ---- accordeon ---- */
.accordeon{border:1px solid var(--rand);border-radius:var(--rond);background:#fff;
  box-shadow:var(--schaduw);overflow:hidden}
.accordeon+.accordeon{margin-top:.75rem}
.accordeon>summary{cursor:pointer;padding:1.05rem 1.3rem;font-family:var(--kop);font-weight:700;
  color:var(--diepblauw);display:flex;align-items:center;justify-content:space-between;gap:1rem;
  list-style:none;font-size:1.04rem}
.accordeon>summary::-webkit-details-marker{display:none}
.accordeon>summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--rood);flex:none}
.accordeon[open]>summary::after{content:"–"}
.accordeon>summary:hover{background:var(--mist)}
.accordeon__inhoud{padding:0 1.3rem 1.3rem;border-top:1px solid var(--rand);padding-top:1.1rem}
.accordeon__inhoud>*:last-child{margin-bottom:0}

/* ---- waarschuwingsblok ---- */
.let-op{border-left:4px solid var(--rood);background:#fdf3f5;border-radius:0 var(--rond) var(--rond) 0;
  padding:1.1rem 1.3rem;margin:0 0 1.5rem;font-size:.97rem}
.let-op strong{color:var(--rood-donker)}
.let-op p:last-child{margin-bottom:0}

/* ---- kengetallen: LEEG, zie inhoud/teksten.py. De opmaak staat klaar. ---- */
.kengetallen{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.kengetal{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--rond);padding:1.1rem 1.2rem}
.kengetal b{display:block;font-family:var(--kop);font-weight:800;font-size:1.9rem;color:#fff;
  line-height:1.1}
.kengetal span{display:block;font-size:.9rem;color:#c9d6ea}

/* ---- lijst met berichten ---- */
.berichten{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.datum{font-size:.82rem;font-weight:700;color:var(--rood);font-family:var(--kop);
  letter-spacing:.03em;text-transform:uppercase}
.index{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.45rem}
.index a{font-family:var(--kop);font-weight:600;text-decoration:none;color:var(--inkt)}
.index a:hover{color:var(--rood);text-decoration:underline}
.index .pad{color:var(--inkt-zacht);font-weight:400;font-size:.86rem;font-family:var(--tekst)}

/* ---- voettekst ---- */
.voet{background:var(--diepblauw-donker);color:#c9d6ea;margin-top:0}
.voet__binnen{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  padding-top:3rem;padding-bottom:2.2rem}
.voet h2{color:#fff;font-size:1rem;margin-bottom:.8rem;letter-spacing:.04em;text-transform:uppercase}
.voet ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.voet a{color:#c9d6ea;text-decoration:none}
.voet a:hover{color:#fff;text-decoration:underline}
.voet .logo{color:#fff}
/* Het merkvlak gebruikt currentColor; in de voettekst is dat wit en verdween de witte M.
   Daar keert het om: wit vlak, donkerblauwe letter. */
.voet .logo__merk rect:first-of-type{fill:#ffffff}
.voet .logo__merk path{fill:#132c52}
.voet .logo__onder{color:#8fa6c6}
.voet__slogan{font-family:var(--hand);font-size:1.5rem;color:#fff;margin:1rem 0 0;line-height:1.3}
.voet__onder{border-top:1px solid rgba(255,255,255,.16);padding-top:1.3rem;padding-bottom:1.8rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.88rem}
.voet__onder p{margin:0}

@media (max-width:860px){
  .hero__binnen{grid-template-columns:minmax(0,1fr);gap:2rem}
  .hero__beeld{order:-1;max-width:360px}
  .duo--zijbalk{grid-template-columns:minmax(0,1fr)}
  thead th{position:static}
}
@media (max-width:560px){
  body{font-size:16px}
  .omhulsel{padding:0 16px}
  .kop__binnen{gap:.75rem 1rem}
  .kop__acties{margin-left:0;width:100%}
  .kop__acties .knop{flex:1 1 auto;justify-content:center}
  .hoofdmenu{flex-basis:100%}
  .hoofdmenu ul{gap:.15rem 1rem}
  .kaart{padding:1.3rem}
  .postit{transform:none;padding:1.3rem}
  .staaf{grid-template-columns:4.6rem minmax(0,1fr) 2.1rem;gap:.5rem}
  /* De tabel paste net niet en schoof horizontaal; smaller mag hier. */
  table{min-width:0;font-size:.9rem}
  th,td{padding:.6rem .65rem}
  caption{padding:.8rem .65rem .2rem}
  .begrippen th{width:auto}
  .vak__kop{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  a.kaart:hover{transform:none}
}
@media print{
  .kop__acties,.overslaan,.kruimels{display:none}
  body{font-size:12pt}
}

/* Visueel contract op basis van de tien door de eigenaar aangeleverde referentiebeelden.
   Deze laag staat bewust na de historische basis-CSS. */
:root{
  --diepblauw:#062568;--diepblauw-donker:#073263;--diepblauw-licht:#0b4fa3;
  --rood:#ed0029;--rood-donker:#c90024;--groen:#009b50;--groen-donker:#007b3f;
  --oranje:#ff6900;--paars:#8b3dcc;--lichtblauw:#edf7ff;--mist:#f7fbff;
  --inkt:#082866;--inkt-zacht:#234880;--rand:#dfeaf4;--rond:8px;--rond-groot:10px;
  --schaduw:0 2px 12px rgba(7,50,99,.07);--schaduw-op:0 8px 22px rgba(7,50,99,.12)
}
html{background:#fff;scroll-behavior:smooth}
body{background:linear-gradient(90deg,#fbfdff 0,#fff 16%,#fff 84%,#fbfdff 100%);color:var(--inkt);
  font-family:var(--tekst);font-size:17px;line-height:1.42;overflow-x:hidden}
h1,h2,h3,h4{color:var(--diepblauw);font-family:var(--kop);font-weight:800;letter-spacing:-.035em}
h1{font-size:clamp(2.2rem,4.7vw,4rem);line-height:1.04}
h2{font-size:clamp(1.45rem,2.4vw,2rem)}
p{margin-bottom:1em}
.omhulsel{max-width:1080px;padding-inline:24px}
.knop{min-height:48px;border-radius:7px;padding:.78rem 1.5rem;font-size:1rem;justify-content:center}
.knop--rood{background:linear-gradient(180deg,#f20b36,#df0029)}
.knop--groen{background:linear-gradient(180deg,#0ba75d,#008d49);box-shadow:0 4px 12px rgba(0,155,80,.2)}
.knop--lijn{background:#fff;border:1.5px solid #0b3982;color:var(--diepblauw)}
.knop--blauw{background:#0756ae;color:#fff}.knop--blauw:hover{background:#06478f;color:#fff}

/* header */
.kop{height:86px;border:0;border-bottom:1px solid #e7edf3;background:rgba(255,255,255,.98)}
.kop__binnen{height:86px;max-width:1080px;display:flex;flex-wrap:nowrap;padding-block:0;gap:1rem}
.logo{gap:.7rem}.logo__merk{width:58px;height:58px}.logo__naam{font-size:1.55rem;line-height:1}
.logo__onder{font-size:.98rem;color:var(--diepblauw);font-weight:500;margin-top:.2rem}
.hoofdmenu{display:flex;justify-content:flex-end;flex:1 1 auto}
.hoofdmenu ul{align-items:center;gap:0 1.75rem;flex-wrap:nowrap}
.hoofdmenu a{font-family:var(--tekst);font-size:.9rem;font-weight:500;color:var(--diepblauw);padding:.9rem 0 .65rem}
.hoofdmenu a[aria-current=page]{font-weight:700;border-bottom-color:var(--diepblauw)}
.kop__acties{margin:0;flex-wrap:nowrap}.zoekknop{border:0;width:40px;height:40px}.zoekknop .icoon{width:24px;height:24px;stroke-width:2.5}
.kop__acties .knop{min-height:47px;padding-inline:1.25rem;white-space:nowrap}
.mobielmenu{display:none}
.kruimels{background:#fff;border:0}.kruimels ol{padding:1rem 0 .55rem;gap:.2rem .7rem}
.kruimels li{color:var(--diepblauw);gap:.7rem}.kruimels li+li::before{content:"›";color:var(--diepblauw);font-size:1.3em}
.kruimels a{color:var(--diepblauw)}
.route-pilaren-regering-na-de-verkiezingen .kruimels,
.route-pilaren-begroting-op-basis-van-de-stemmen .kruimels,
.route-voorbeelden-cbs-jaaroverzicht .kruimels{position:relative;z-index:3;background:transparent}

/* compacte footer uit de referenties */
.voet{height:94px;background:linear-gradient(110deg,#063260,#0a477e);color:#fff}
.voet__binnen{height:94px;max-width:1080px;display:grid;grid-template-columns:1fr 1.25fr 1.25fr;align-items:center;
  gap:2rem;padding-block:0}
.voet .logo__merk{width:50px;height:50px}.voet .logo__naam{font-size:1.08rem}.voet .logo__onder{font-size:.72rem;color:#fff}
.voet .logo__merk circle,.voet .logo__merk path{fill:#fff!important}.voet .logo__merk path{stroke:#fff}
.voet__slogan{margin:0;text-align:center;font-size:1.42rem}.voet nav ul{display:flex;justify-content:flex-end;gap:1.2rem}
.voet nav a{font-size:.78rem;color:#fff;white-space:nowrap}.voet nav a:hover{color:#fff}

/* thuis */
.concept-homehero{position:relative;width:100%;max-width:1122px;margin:0 auto;line-height:0;background:#eef5fb}
.concept-homehero>img{display:block;width:100%;height:auto;border-radius:0}
.concept-hotspot{position:absolute;top:66%;height:14%;overflow:hidden;text-indent:-9999px;border-radius:7px}
.concept-hotspot:focus-visible{outline:4px solid #fff;outline-offset:2px}
.concept-hotspot--pilaren{left:13.7%;width:20%}.concept-hotspot--uitleg{left:35%;width:16%}
.concept-homepilaren{padding:18px 0 22px}.concept-homepilaren>.omhulsel{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.concept-pilaarkaart{min-height:216px;border:1px solid var(--rand);border-radius:9px;background:#fff;padding:20px 13px 16px;
  text-align:center;text-decoration:none;box-shadow:var(--schaduw);display:flex;flex-direction:column;align-items:center;color:var(--diepblauw)}
.concept-pilaarkaart:hover{transform:translateY(-2px);box-shadow:var(--schaduw-op);color:var(--diepblauw)}
.concept-pilaarkaart__icoon{width:48px;height:48px;display:grid;place-items:center;margin-bottom:11px;color:#1667b4}
.concept-pilaarkaart__icoon .icoon{width:44px;height:44px;stroke-width:2.5}.concept-pilaarkaart__icoon.groen{color:var(--groen)}
.concept-pilaarkaart__icoon.rood{color:var(--rood)}
.concept-pilaarkaart h2{font-size:1.04rem;line-height:1.08;margin:0 0 10px;hyphens:auto}
.concept-pilaarkaart p{font-size:.83rem;line-height:1.38;margin:0;color:var(--inkt-zacht)}
.concept-kenmerken{padding:0 0 18px}.concept-kenmerken>.omhulsel{border-top:1px solid var(--rand);display:grid;grid-template-columns:repeat(3,1fr)}
.concept-kenmerk{display:grid;grid-template-columns:50px 1fr;align-items:center;gap:12px;padding:16px 24px;border-right:1px solid var(--rand)}
.concept-kenmerk:last-child{border-right:0}.concept-kenmerk>.icoon{width:42px;height:42px;stroke-width:2;color:#0d478d}
.concept-kenmerk p{margin:0}.concept-kenmerk strong,.concept-kenmerk span{display:block}.concept-kenmerk strong{font-family:var(--kop);font-size:.95rem}
.concept-kenmerk span{font-size:.76rem;color:var(--inkt-zacht)}
.concept-missie{padding:0 0 16px}.concept-missie>.omhulsel{display:grid;grid-template-columns:1fr 1.05fr;gap:30px;align-items:center;
  border:1px solid var(--rand);border-radius:10px;padding:30px;box-shadow:var(--schaduw)}
.concept-missie__tekst h2{font-size:2rem;margin:.15rem 0 .7rem}.concept-missie__tekst p{font-size:.94rem;line-height:1.48}
.concept-eyebrow{text-transform:uppercase;color:var(--rood);font-family:var(--kop);font-weight:700;font-size:.72rem;letter-spacing:.14em}
.concept-missie img{width:100%;border-radius:9px}.concept-missie .knop{margin-top:.25rem}
.concept-waarden{padding-bottom:26px}.concept-waarden>.omhulsel{border:1px solid var(--rand);border-radius:9px;display:grid;grid-template-columns:repeat(3,1fr)}
.concept-waarden .omhulsel>div{display:grid;grid-template-columns:58px 1fr;gap:14px;align-items:center;padding:18px 25px;border-right:1px solid var(--rand)}
.concept-waarden .omhulsel>div:last-child{border:0}.concept-waarden .icoon{width:48px;height:48px;color:#14518f;stroke-width:2}
.concept-waarden .omhulsel>div:last-child .icoon{color:var(--groen)}.concept-waarden p{margin:0}
.concept-waarden small,.concept-waarden strong{display:block}.concept-waarden small{font-size:.76rem}.concept-waarden strong{font-size:1rem}

/* gemeenschappelijke conceptblokken */
.concept-titelrij{display:flex;align-items:flex-start;gap:22px}.concept-titelrij>div{min-width:0}.concept-titelrij h1{overflow-wrap:anywhere}.concept-nummer{width:72px;height:72px;border-radius:8px;display:grid;place-items:center;
  flex:none;color:#fff;font-family:var(--kop);font-weight:800;font-size:2.7rem;line-height:1}
.concept-nummer.blauw{background:linear-gradient(135deg,#1585dc,#0862b8)}.concept-nummer.groen{background:linear-gradient(135deg,#00b4a4,#00956e)}
.concept-nummer.rood{background:linear-gradient(135deg,#f20a36,#cf0025)}.concept-nummer.oranje{background:linear-gradient(135deg,#ff8d00,#f05d00)}
.concept-nummer.paars{background:linear-gradient(135deg,#a14bd1,#7434bd)}
.concept-subtitel{font-family:var(--kop);font-size:clamp(1.25rem,2.5vw,1.8rem);line-height:1.2;color:var(--diepblauw);margin:-.15rem 0 1.2rem}
.concept-breedbeeld{width:100%;border-radius:8px;object-fit:cover}
.concept-quote{max-width:1034px;margin:16px auto;padding:18px 24px;background:linear-gradient(100deg,#edf8ff,#e8f5ff);border-radius:8px;text-align:center}
.concept-quote>p{font-family:var(--hand);font-size:clamp(1.7rem,3vw,2.45rem);line-height:1.08;margin:0;color:var(--diepblauw)}
.concept-quote>span{display:block;width:62px;height:3px;background:var(--diepblauw);margin:8px auto 13px;transform:rotate(-4deg)}
.concept-quote>div{display:flex;justify-content:center;gap:16px}.concept-quote .knop{min-width:310px}
.concept-checks{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}.concept-checks li{display:flex;align-items:flex-start;gap:.65rem}
.concept-checks .icoon{width:22px;height:22px;flex:none;color:var(--groen);fill:var(--groen);stroke:#fff;margin-top:.05rem}
.concept-tweepanelen{padding:0 0 2px}.concept-tweepanelen>.omhulsel{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.concept-tweepanelen article{padding:20px 26px;border:1px solid var(--rand);border-radius:8px;background:#fff;box-shadow:var(--schaduw)}
.concept-tweepanelen article.groen{background:linear-gradient(135deg,#fff,#f5fff9)}
.concept-tweepanelen article h2{display:flex;align-items:center;gap:16px;font-size:1.65rem}.concept-tweepanelen article h2 .icoon{width:42px;height:42px;color:var(--rood)}
.concept-tweepanelen article.groen h2 .icoon{color:var(--groen);fill:var(--groen);stroke:#fff}.concept-tweepanelen article p{font-size:.92rem}

/* pilaar 1 */
.concept-pilaarhero{min-height:420px;margin-top:-46px;background:#fff;position:relative;overflow:hidden}
.concept-pilaarhero::after{content:"";position:absolute;inset:0;background:url('/assets/foto/stembiljet-potlood.jpg') right top/58% 100% no-repeat;z-index:0}
.concept-pilaarhero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#fff 0,#fff 40%,rgba(255,255,255,.96) 47%,rgba(255,255,255,.55) 57%,rgba(255,255,255,.08) 68%,transparent 78%)}
.concept-pilaarhero>.omhulsel{position:relative;z-index:2;padding-top:62px}.concept-pilaarhero__tekst{max-width:520px}
.concept-pilaarhero h1{font-size:3rem}.concept-pilaarhero h2{font-size:1.25rem;margin:24px 0 12px}.concept-pilaarhero p{font-size:1rem;line-height:1.42}
.concept-pilaarhero+.concept-tweepanelen{margin-top:-3px}

/* pilaar 2 */
.concept-pilaar2{padding:22px 0 20px}.concept-pilaar2 .concept-titelrij{margin-bottom:20px}.concept-pilaar2 h1{font-size:3rem;margin-bottom:.4rem}
.concept-situatievoorstel{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.concept-situatievoorstel article{padding:28px 34px;border-radius:8px;display:grid;grid-template-columns:70px 1fr;align-items:start;column-gap:20px}
.concept-situatievoorstel article.rood{background:#fff2f4}.concept-situatievoorstel article.groen{background:#effbf4}
.concept-situatievoorstel h2{grid-column:2;font-size:1.55rem;margin:0}.concept-situatievoorstel p{grid-column:2;margin:4px 0 0;font-size:1rem}
.concept-situatievoorstel>.rood>.icoon{grid-row:1/span 2;color:var(--rood);width:52px;height:52px;stroke-width:2}
.concept-situatievoorstel>.groen>.icoon{grid-row:1/span 2;color:var(--groen);width:62px;height:62px;stroke-width:2.3}
.concept-voordelen{margin-top:14px;border:1px solid var(--rand);border-radius:8px;padding:22px 28px;box-shadow:var(--schaduw)}
.concept-voordelen>h2{font-size:1.3rem}.concept-voordelen>div{display:grid;grid-template-columns:repeat(3,1fr)}
.concept-voordelen article{display:grid;grid-template-columns:70px 1fr;column-gap:14px;padding:12px 20px;border-right:1px solid var(--rand)}
.concept-voordelen article:last-child{border:0}.concept-voordelen article>.icoon{grid-row:1/span 2;width:55px;height:55px;color:#0a4f9b;stroke-width:2}
.concept-voordelen article h3{font-size:.98rem;margin:2px 0}.concept-voordelen article p{font-size:.83rem;margin:0}.concept-voordelen>.knop{display:flex;max-width:325px;margin:16px auto 0}

/* pilaar 3 */
.concept-programma{padding:28px 0 20px}.concept-programmahero{display:grid;grid-template-columns:1.35fr .65fr;align-items:center;gap:38px;min-height:410px;
  background:linear-gradient(90deg,#fff 45%,rgba(255,255,255,.75)),url('/assets/foto/binnenhof.jpg') right/55% 100% no-repeat}
.concept-programmahero h1{font-size:3rem}.concept-programmahero>div>p{max-width:560px;font-size:1.08rem}.concept-programmahero>img{width:100%;transform:rotate(-4deg);box-shadow:0 12px 24px rgba(7,50,99,.16)}
.concept-groenblok{position:relative;background:linear-gradient(100deg,#ecfff4,#f8fff8);border-radius:8px;padding:22px 30px;margin-bottom:14px;min-height:210px}
.concept-groenblok h2{display:flex;gap:18px;color:#087b41}.concept-groenblok h2 .icoon{width:54px;height:54px}.concept-groenblok .concept-checks{max-width:660px}
.concept-handschrift{position:absolute;right:70px;top:35px;font-family:var(--hand);font-size:2rem;line-height:1.05;transform:rotate(-5deg);text-align:center}
.concept-driestappen>h2{font-size:1.65rem}.concept-driestappen>div{display:grid;grid-template-columns:repeat(3,1fr);gap:52px}
.concept-driestappen article{position:relative;min-height:190px;background:linear-gradient(135deg,#fff,#f2f8ff);border:1px solid var(--rand);border-radius:8px;padding:24px 20px 18px 94px}
.concept-driestappen article>span{position:absolute;left:16px;top:18px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#3979c5;color:#fff;font:800 1.5rem var(--kop)}
.concept-driestappen article:nth-child(2)>span{background:var(--paars)}.concept-driestappen article:nth-child(3)>span{background:var(--groen)}
.concept-driestappen article>.icoon{width:48px;height:48px;color:#0b57aa}.concept-driestappen article h3{font-size:1.05rem;margin:.5rem 0}.concept-driestappen article p{font-size:.86rem}
.concept-knoppen{display:flex;gap:20px;margin:24px 0 0}.concept-knoppen .knop{min-width:320px}

/* pilaar 4 */
.concept-begroting{padding:0 0 20px}.concept-begrotinghero{min-height:338px;position:relative;overflow:hidden;background:linear-gradient(90deg,#fff 0,#fff 46%,rgba(255,255,255,.97) 53%,rgba(255,255,255,.55) 63%,rgba(255,255,255,.07) 73%,transparent 83%),url('/assets/foto/ref-begroting-hero.png') right top/58% 100% no-repeat}
.concept-begrotinghero>.omhulsel{min-height:338px;display:flex;align-items:center}.concept-begrotinghero__tekst{position:relative;z-index:1;max-width:620px}.concept-begrotinghero h1{font-size:2.45rem}.concept-begrotinghero__tekst>p{font-size:1.06rem;max-width:600px}
.concept-proces{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;margin:10px 0 22px}
.concept-proces article{min-height:260px;border:1px solid var(--rand);border-radius:8px;padding:20px;text-align:center;box-shadow:var(--schaduw)}
.concept-proces article>span{display:grid;place-items:center;width:58px;height:58px;margin:0 0 -55px;border-radius:50%;background:var(--paars);color:#fff;font:800 2rem var(--kop)}
.concept-proces article:nth-of-type(2)>span{background:var(--groen)}.concept-proces article:nth-of-type(3)>span{background:#68a5c9}
.concept-proces h2{font-size:1.05rem;text-align:left;margin-left:72px;min-height:50px}.concept-proces .icoon{width:48px;height:48px;color:#1e72bd;margin:18px auto}
.concept-proces p{font-size:.9rem}.concept-proces>b{font-size:2.5rem;color:#4d82b5;font-weight:400;padding:0 8px}
.concept-rekensom{display:grid;grid-template-columns:1.5fr .9fr .75fr;gap:18px;border:1px solid var(--rand);border-radius:8px;padding:20px;margin-bottom:16px}
.concept-rekensom>*{min-width:0}
.concept-rekensom h2{font-size:1.2rem}.concept-partijen{display:flex;gap:10px;align-items:end}.concept-partijen>span{display:grid;text-align:center;min-width:58px}
.concept-partijen strong{padding:10px 6px;background:#0aa154;color:#fff;border-radius:5px}.concept-partijen>span:nth-child(2) strong{background:#4a7fb5}.concept-partijen>span:nth-child(3) strong{background:#f7872b}.concept-partijen>span:nth-child(4) strong{background:#e8506b}.concept-partijen>span:nth-child(5) strong{background:#5ebf8a}.concept-partijen>span:nth-child(6) strong{background:#dbe7f2;color:#164175}
.concept-partijen small,.concept-partijen b{font-size:.68rem}.concept-uitkomst{background:#083c72;color:#fff;border-radius:8px;display:grid;place-items:center;text-align:center;padding:20px}
.concept-uitkomst .icoon{width:58px;height:58px}.concept-rekensom aside{background:#eaf5ff;padding:18px;border-radius:7px}.concept-rekensom aside>.icoon{width:42px;height:42px;color:#1c75bd}
.concept-rekensom aside p{font-size:.82rem;margin-top:12px}

/* verkiezingen */
.concept-verkiezingen{padding:20px 0}.concept-verkiezingen>div>h1{font-size:3.55rem;margin-bottom:.3rem}.concept-verkiezinggrid{display:grid;grid-template-columns:.68fr 1fr;gap:20px;margin-top:20px}
.concept-tabel{border:1px solid var(--rand);border-radius:7px;overflow:hidden}.concept-tabel table{min-width:0;font-size:.88rem}.concept-tabel th,.concept-tabel td{padding:.42rem 1.25rem;border-right:1px solid var(--rand)}
.concept-tabel thead th{position:static;background:#eef7ff;color:var(--diepblauw);font-size:.95rem}.concept-tabel tbody th{font-weight:600;color:var(--diepblauw)}
.concept-112{display:grid;grid-template-columns:92px 1fr;background:#eef8ff;border-radius:8px;padding:22px 28px}.concept-112>.icoon{width:78px;height:78px;color:#0a4fa4;fill:#0a4fa4}
.concept-112 h2{font-size:2.05rem}.concept-112 h2 small{display:block;font-size:1.35rem}.concept-112 .concept-checks{grid-column:1/-1;margin-top:8px}
.concept-bars{border:1px solid var(--rand);border-radius:8px;padding:16px 28px 10px;margin:14px 0}.concept-bars figcaption{font:700 1rem var(--kop);color:var(--diepblauw)}
.concept-bars ol{list-style:none;margin:12px 0 0;padding:0;height:130px;border-left:1px solid #9bb5cf;border-bottom:1px solid #9bb5cf;display:flex;align-items:end;gap:22px}
.concept-bars li{height:100%;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}.concept-bars li>b{font-size:.75rem}.concept-bars li>span{width:100%;max-width:48px;border-radius:3px 3px 0 0}.concept-bars li>small{position:absolute;top:100%;font-size:.68rem}
.concept-rechts{text-align:right;margin-top:28px}

/* CBS */
.concept-cbshero{min-height:376px;margin-top:-44px;background:linear-gradient(90deg,#fff 0,#fff 44%,rgba(255,255,255,.97) 51%,rgba(255,255,255,.5) 61%,rgba(255,255,255,.06) 72%,transparent 82%),url('/assets/foto/ref-cbs-hero.png') right top/58% 100% no-repeat}
.concept-cbshero>.omhulsel{padding-top:70px}.concept-cbshero h1{font-size:3rem}.concept-cbshero>.omhulsel>p{max-width:590px;font-size:1.03rem;line-height:1.5;margin-top:28px}
.concept-cbsgrid{display:grid;grid-template-columns:1.7fr .78fr;gap:24px;padding-bottom:22px}.concept-cbsgrid>*{min-width:0}.concept-cbsgrid h2{font-size:1.3rem}.concept-cbsgrid .concept-tabel th,.concept-cbsgrid .concept-tabel td{padding:.48rem 1rem}
.concept-cbsgrid td.omhoog{color:var(--groen);font-weight:800}.concept-cbsgrid td.omlaag{color:var(--rood);font-weight:800}.concept-cbsgrid td.gelijk{color:var(--inkt-zacht)}
.concept-cbsgrid aside{padding-top:0}.concept-notitie{min-height:290px;background:#eaf6ff;padding:28px;border-radius:8px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.concept-notitie .icoon{width:58px;height:58px;color:#1c6ab0}.concept-notitie p{font:700 1.55rem/1.35 var(--hand);background:#fff;padding:24px;transform:rotate(-6deg);box-shadow:var(--schaduw)}
.concept-cbsgrid aside h2{margin-top:22px}.concept-cbsgrid aside p{font-size:.91rem}.concept-cbsgrid aside .knop{width:100%}

/* steun */
.concept-steun{padding:24px 0}.concept-steungrid{display:grid;grid-template-columns:2.15fr .95fr;gap:16px}.concept-steun h1{font-size:3.25rem;margin-bottom:.2rem}
.concept-steungrid>div>p{max-width:710px}.concept-steunlijst{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.concept-steunkaart{display:grid;grid-template-columns:80px 1fr 245px;align-items:start;gap:18px;border:1px solid var(--rand);border-radius:9px;padding:14px;box-shadow:var(--schaduw);min-height:275px}
.concept-steunkaart .concept-nummer{width:70px;height:70px}.concept-steunkaart h2{font-size:1.5rem;margin:4px 0 10px}.concept-steunkaart p{font-size:1rem}
.concept-steunkaart .knop{margin-top:40px}.concept-steunkaart>img{width:100%;height:245px;object-fit:cover;border-radius:8px}
.concept-hoe{background:linear-gradient(135deg,#eef8ff,#f9fcff);border-radius:8px;padding:48px 16px 18px}.concept-hoe>h2,.concept-hoe>p{padding-inline:16px}
.concept-hoe>ol{list-style:none;margin:24px 0;padding:0;display:grid;gap:14px}.concept-hoe>ol>li{display:grid;grid-template-columns:50px 1fr 40px;gap:12px;background:#fff;border-radius:9px;padding:18px;min-height:140px}
.concept-hoe>ol>li>span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#1671c5;color:#fff;font:800 1.5rem var(--kop)}
.concept-hoe>ol>li:nth-child(2)>span{background:var(--groen)}.concept-hoe>ol>li:nth-child(3)>span{background:var(--oranje)}
.concept-hoe>ol h3{font-size:1rem;margin:.3rem 0}.concept-hoe>ol p{font-size:.82rem}.concept-hoe>ol .icoon{width:38px;height:38px;color:#0b4a98}
.concept-hoe>img{width:100%;height:390px;object-fit:cover;object-position:right;border-radius:8px;margin-top:40px}

/* over ons */
.concept-overhero{min-height:450px;margin-top:-43px;background:linear-gradient(90deg,#fff 0,#fff 42%,rgba(255,255,255,.25) 66%,transparent),url('/assets/foto/binnenhof.jpg') right/62% 100% no-repeat}
.concept-overhero>.omhulsel{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;min-height:450px}.concept-overhero>.omhulsel>div{max-width:520px}.concept-overhero h1{font-size:3rem}
.concept-overhero p:not(.concept-subtitel){font-size:1rem}.concept-overinhoud{padding:14px 0 18px}.concept-overinhoud>.omhulsel{display:grid;grid-template-columns:1fr 1.25fr;gap:16px}.concept-overinhoud>.omhulsel>*{min-width:0}
.concept-overinhoud article{border:1px solid var(--rand);border-radius:8px;padding:22px;box-shadow:var(--schaduw)}.concept-contact{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.concept-contact li{display:flex;align-items:center;gap:15px}.concept-contact .icoon{width:34px;height:34px;background:var(--diepblauw);color:#fff;border-radius:50%;padding:7px}
.concept-contact a{overflow-wrap:anywhere}
.concept-begrippen{background:#f2f8ff}.concept-begrippen table{min-width:0;font-size:.9rem;background:#fff;border-radius:8px;overflow:hidden}.concept-begrippen th{width:44%;color:var(--diepblauw);font-weight:800}
.concept-meer{grid-column:1/-1}.concept-meer details{background:#f0f6fc;border-radius:7px;margin:5px 0;padding:0 14px}.concept-meer summary{display:flex;align-items:center;gap:18px;cursor:pointer;padding:10px;font-weight:800}.concept-meer summary .icoon{width:28px;height:28px}

/* waarom */
.concept-waaromhero{min-height:470px;margin-top:-43px;background:linear-gradient(90deg,#fff 0,#fff 36%,rgba(255,255,255,.32) 62%,transparent),url('/assets/foto/binnenhof.jpg') right/68% 100% no-repeat}
.concept-waaromhero>.omhulsel{padding-top:72px}.concept-waaromhero h1{font-family:var(--hand);font-size:4.2rem;line-height:.92}.concept-waaromhero p{max-width:460px;font-size:1.15rem;line-height:1.48}
.concept-waarom{padding:0 0 20px}.concept-vierkaarten{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:-22px;position:relative}
.concept-vierkaarten article{background:#fff;border:1px solid var(--rand);border-radius:9px;padding:22px;text-align:center;box-shadow:var(--schaduw)}.concept-vierkaarten article>.icoon{width:58px;height:58px;color:#0a55aa}
.concept-vierkaarten article:nth-child(2)>.icoon{color:var(--rood)}.concept-vierkaarten article:nth-child(4)>.icoon{color:var(--groen)}.concept-vierkaarten h2{font-size:1.05rem}.concept-vierkaarten p{font-size:.86rem}
.concept-doel{display:grid;grid-template-columns:1.25fr .85fr;gap:42px;align-items:center;margin-top:20px}.concept-doel img{width:100%;height:240px;object-fit:cover;border-radius:8px}.concept-doel h2{font-size:2.2rem}

/* historische overige pagina's passend in dezelfde shell */
.route-pilaren main>.vak,.route-voorbeelden main>.vak,.route-nieuws main>.vak,.route-contact main>.vak,
.route-veelgestelde-vragen main>.vak,.route-privacy main>.vak,.route-disclaimer main>.vak,.route-zoeken main>.vak,
.route-pilaren-burgerinitiatief main>.vak{padding:32px 0}
.route-pilaren .raster--vijf,.route-voorbeelden .raster--twee{gap:14px}.route-pilaren .kaart,.route-voorbeelden .kaart{border-radius:8px}

@media(max-width:920px){
  .kop{height:auto}.kop__binnen{height:auto;min-height:76px}.logo__merk{width:48px;height:48px}.logo__naam{font-size:1.2rem}.logo__onder{font-size:.78rem}
  .hoofdmenu,.kop__acties .zoekknop{display:none}.kop__acties{margin-left:auto}.mobielmenu{display:block;position:relative}
  .mobielmenu summary{cursor:pointer;font-weight:800;color:var(--diepblauw);list-style:none}.mobielmenu summary::-webkit-details-marker{display:none}
  .mobielmenu nav{position:absolute;right:0;top:40px;background:#fff;box-shadow:var(--schaduw-op);border:1px solid var(--rand);border-radius:8px;padding:12px;width:260px;z-index:20}
  .mobielmenu ul{list-style:none;margin:0;padding:0}.mobielmenu a{display:block;padding:10px;text-decoration:none}
  .concept-homepilaren>.omhulsel{grid-template-columns:repeat(2,1fr)}.concept-homepilaren .concept-pilaarkaart:last-child{grid-column:1/-1}
  .concept-missie>.omhulsel,.concept-programmahero,.concept-verkiezinggrid,.concept-cbsgrid,.concept-steungrid,.concept-overhero>.omhulsel,.concept-doel{grid-template-columns:1fr}
  .concept-kenmerken>.omhulsel,.concept-waarden>.omhulsel,.concept-voordelen>div{grid-template-columns:1fr}.concept-kenmerk,.concept-waarden .omhulsel>div,.concept-voordelen article{border-right:0;border-bottom:1px solid var(--rand)}
  .concept-tweepanelen>.omhulsel,.concept-situatievoorstel{grid-template-columns:1fr}.concept-driestappen>div{grid-template-columns:1fr;gap:14px}
  .concept-proces{grid-template-columns:1fr}.concept-proces>b{transform:rotate(90deg);text-align:center}.concept-rekensom{grid-template-columns:1fr}
  .concept-vierkaarten{grid-template-columns:repeat(2,1fr)}.concept-overinhoud>.omhulsel{grid-template-columns:1fr}.concept-meer{grid-column:auto}
  .concept-handschrift{position:static;margin:20px 0 0}.concept-steunkaart{grid-template-columns:70px 1fr}.concept-steunkaart>img{grid-column:1/-1;height:220px}
  .concept-pilaarhero{margin-top:0}.concept-cbshero,.concept-overhero,.concept-waaromhero{margin-top:0}
  .concept-pilaarhero{min-height:690px}.concept-pilaarhero::after{background-size:auto 52%;background-position:right top}.concept-pilaarhero::before{background:linear-gradient(180deg,rgba(255,255,255,.06),#fff 50%)}.concept-pilaarhero>.omhulsel{padding-top:330px}.concept-pilaarhero__tekst{max-width:none}
  .concept-begrotinghero{min-height:650px;background:linear-gradient(180deg,rgba(255,255,255,.03),#fff 49%),url('/assets/foto/ref-begroting-hero.png') top right/auto 55% no-repeat}.concept-begrotinghero>.omhulsel{min-height:650px;padding-top:350px;align-items:flex-start}.concept-begrotinghero__tekst{max-width:none}
  .concept-cbshero{min-height:650px;background:linear-gradient(180deg,rgba(255,255,255,.03),#fff 49%),url('/assets/foto/ref-cbs-hero.png') top right/auto 55% no-repeat}.concept-cbshero>.omhulsel{padding-top:350px}
  .voet{height:auto}.voet__binnen{height:auto;min-height:120px;grid-template-columns:1fr 1fr}.voet__slogan{display:none}.voet nav ul{flex-wrap:wrap;gap:.5rem 1rem}
}

@media(max-width:600px){
  body{font-size:16px}.omhulsel{padding-inline:16px}.kop__acties .knop{display:none}.kop__binnen{min-height:70px}.logo__naam{font-size:1.05rem}.logo__onder{font-size:.7rem}
  h1{font-size:2.1rem}.kruimels ol{padding-top:.65rem}.concept-homehero{min-height:0;overflow:hidden;background:#eef5fb}
  .concept-homehero>img{display:block;width:100%;height:auto}.concept-homehero::after,.concept-homehero .verborgen{display:none}
  .concept-hotspot{display:none}.concept-homepilaren>.omhulsel{grid-template-columns:1fr}.concept-homepilaren .concept-pilaarkaart:last-child{grid-column:auto}
  .concept-pilaarkaart{min-height:0;display:grid;grid-template-columns:55px 1fr;text-align:left;align-items:center}.concept-pilaarkaart__icoon{grid-row:1/span 2;margin:0}.concept-pilaarkaart p{grid-column:2}
  .concept-missie>.omhulsel{padding:22px}.concept-missie img{order:-1}.concept-titelrij{gap:12px}.concept-nummer{width:52px;height:52px;font-size:2rem}
  .concept-pilaarhero{min-height:520px}.concept-pilaarhero::after{inset:0;background-size:auto 52%;background-position:right top}.concept-pilaarhero::before{background:linear-gradient(180deg,rgba(255,255,255,.15),#fff 49%)}.concept-pilaarhero>.omhulsel{padding-top:240px}.concept-pilaarhero h1{font-size:2.25rem}
  .concept-tweepanelen article{padding:20px}.concept-quote{margin-inline:16px}.concept-quote>div,.concept-knoppen{flex-direction:column}.concept-quote .knop,.concept-knoppen .knop{min-width:0;width:100%}
  .concept-pilaar2 h1,.concept-programmahero h1,.concept-begrotinghero h1,.concept-verkiezingen>div>h1,.concept-cbshero h1,.concept-steun h1,.concept-overhero h1{font-size:2.15rem}
  .concept-situatievoorstel article{grid-template-columns:48px 1fr;padding:20px 16px}.concept-situatievoorstel>.rood>.icoon,.concept-situatievoorstel>.groen>.icoon{width:42px;height:42px}
  .concept-programmahero{background:#fff;min-height:0}.concept-programmahero>img{max-width:240px;margin:auto}.concept-groenblok{padding:20px}.concept-driestappen article{padding-left:82px}
  .concept-begrotinghero{min-height:540px;background:linear-gradient(180deg,rgba(255,255,255,.02),#fff 48%),url('/assets/foto/ref-begroting-hero.png') top right/auto 52% no-repeat}.concept-begrotinghero>.omhulsel{min-height:540px;padding-top:260px;align-items:flex-start}.concept-proces article{min-height:0}.concept-rekensom{padding:14px}.concept-partijen{overflow-x:auto}.concept-partijen>span{min-width:60px}
  .concept-bars ol{gap:6px}.concept-112{grid-template-columns:64px 1fr;padding:18px}.concept-112>.icoon{width:56px;height:56px}.concept-112 h2{font-size:1.45rem}
  .concept-cbshero{min-height:500px;background:linear-gradient(180deg,rgba(255,255,255,.05),#fff 48%),url('/assets/foto/binnenhof.jpg') top right/auto 52% no-repeat}.concept-cbshero>.omhulsel{padding-top:230px}
  .concept-cbsgrid .concept-tabel{overflow:auto}.concept-cbsgrid .concept-tabel table{min-width:620px}.concept-notitie{min-height:0}
  .concept-steunkaart{grid-template-columns:55px 1fr;min-height:0}.concept-steunkaart .concept-nummer{width:52px;height:52px}.concept-steunkaart .knop{margin-top:12px;width:100%}.concept-hoe{padding-top:24px}.concept-hoe>img{height:250px}
  .concept-overhero{min-height:570px;background:linear-gradient(180deg,rgba(255,255,255,.05),#fff 46%),url('/assets/foto/binnenhof.jpg') top right/auto 52% no-repeat}.concept-overhero>.omhulsel{padding-top:250px;min-height:570px}
  .concept-waaromhero{min-height:620px;background:linear-gradient(180deg,rgba(255,255,255,.1),#fff 48%),url('/assets/foto/binnenhof.jpg') top right/auto 54% no-repeat}.concept-waaromhero>.omhulsel{padding-top:260px}.concept-waaromhero h1{font-size:3.2rem}.concept-vierkaarten{grid-template-columns:1fr;margin-top:0}.concept-doel img{order:-1}
  .voet__binnen{grid-template-columns:1fr;justify-items:center;text-align:center;padding:20px}.voet nav ul{justify-content:center}.concept-kenmerken{padding-inline:0}
}

/* Desktopcontract: maatvoering en fotografische composities uit de 1122px-referenties. */
@media(min-width:921px){
  .omhulsel{max-width:1122px;padding-inline:32px}
  .kop__binnen,.voet__binnen{max-width:1122px;padding-inline:36px}
  .logo__merk{width:56px;height:56px}.logo__naam{font-size:1.35rem}.logo__onder{font-size:.84rem}
  .hoofdmenu ul{gap:0 1.4rem}.hoofdmenu a{font-size:.86rem;white-space:nowrap}
  .kop__acties .knop{min-width:160px;padding-inline:1rem;font-size:.95rem}

  .concept-pilaarhero{min-height:420px;margin-top:-51px}
  .concept-pilaarhero::after{inset:0;background-image:url('/assets/foto/ref-pilaar1-hero.png');background-size:58% 100%;background-position:right top}
  .concept-pilaarhero::before{background:linear-gradient(90deg,#fff 0,#fff 40%,rgba(255,255,255,.96) 47%,rgba(255,255,255,.55) 57%,rgba(255,255,255,.08) 68%,transparent 78%)}
  .concept-pilaarhero>.omhulsel{padding-top:71px}.concept-pilaarhero__tekst{max-width:520px}
  .concept-pilaarhero h1{font-size:3rem}.concept-pilaarhero h2{margin-top:22px}
  .concept-tweepanelen article{min-height:360px;padding:24px 26px}
  .concept-quote{padding-block:22px}.concept-kenmerk{min-height:92px}

  .concept-pilaar2{padding-top:20px}.concept-pilaar2 .concept-breedbeeld{height:305px}
  .concept-situatievoorstel article{min-height:200px}.concept-pilaar2 .concept-quote{margin-top:18px}
  .concept-pilaar2 .concept-voordelen{min-height:275px}

  .concept-programma{padding-top:28px}.concept-programmahero{position:relative;grid-template-columns:1fr 1fr;gap:14px;min-height:480px;background:linear-gradient(90deg,#fff 0,#fff 48%,rgba(255,255,255,.08) 61%,transparent),url('/assets/foto/ref-waarom-hero.png') right/51% 100% no-repeat}
  .concept-programmahero>img{position:relative;align-self:center;justify-self:center;width:350px;height:auto;object-fit:contain;transform:rotate(-2deg);box-shadow:0 8px 24px rgba(0,34,92,.12)}
  .concept-programmahero>div{position:relative;z-index:2}.concept-groenblok{min-height:255px}
  .concept-programma .concept-quote{display:none}.concept-driestappen article{min-height:195px}

  .concept-begrotinghero{min-height:338px;margin-top:-51px}.concept-begrotinghero>.omhulsel{min-height:338px;padding-top:51px}.concept-begrotinghero__tekst{width:760px;max-width:100%}.concept-begrotinghero h1{font-size:2rem;white-space:nowrap}.concept-begrotinghero .concept-subtitel{font-size:1.45rem;white-space:nowrap}.concept-proces article{min-height:267px}
  .concept-rekensom{min-height:290px}.concept-begroting .concept-voordelen{min-height:215px}

  .concept-cbshero{min-height:376px;margin-top:-51px;background:linear-gradient(90deg,#fff 0,#fff 44%,rgba(255,255,255,.97) 51%,rgba(255,255,255,.5) 61%,rgba(255,255,255,.06) 72%,transparent 82%),url('/assets/foto/ref-cbs-hero.png') right top/58% 100% no-repeat}
  .concept-cbshero>.omhulsel{padding-top:71px}.concept-cbshero>.omhulsel>p{margin-top:24px}
  .concept-cbsgrid{min-height:650px}.concept-notitie{min-height:300px}

  .concept-steun{padding-top:20px}.concept-steunkaart{min-height:280px}.concept-hoe>img{height:429px;object-fit:cover;margin-top:38px}

  .concept-overhero{min-height:402px;margin-top:0;background:linear-gradient(90deg,#fff 0,#fff 38%,rgba(255,255,255,.35) 58%,transparent),url('/assets/foto/binnenhof.jpg') right/58% 100% no-repeat}
  .concept-overhero>.omhulsel{display:block;min-height:402px;padding-top:52px}.concept-overhero>.omhulsel>div{max-width:500px}
  .concept-overhero h1{width:650px;max-width:none;white-space:nowrap;font-size:3rem}
  .concept-overinhoud{padding-top:14px}.concept-overinhoud article{padding:18px 22px}.concept-overinhoud>.omhulsel{grid-template-columns:1fr 1.35fr}
  .concept-meer details{margin:4px 0}.concept-meer summary{padding:8px 10px}

  .concept-waaromhero{min-height:422px;margin-top:0;background:linear-gradient(90deg,#fff 0,#fff 32%,rgba(255,255,255,.25) 56%,transparent),url('/assets/foto/ref-waarom-hero.png') right/auto 100% no-repeat}
  .concept-waaromhero>.omhulsel{padding-top:55px}.concept-vierkaarten{margin-top:0}.concept-vierkaarten article{min-height:260px}
  .concept-waarom .concept-quote{margin-top:20px}.concept-doel img{height:242px}
}