/* ==========================================================================
   olafgeysendorpher.nl — basisstijl

   Typografische schaal: de ontwerpspecificatie ging uit van 14px lopende
   tekst. Op 8 september 2026 is dat 16px geworden; alle andere maten zijn
   met dezelfde factor meegeschaald. Het menu is iets ruimer dan die factor,
   omdat het anders te klein oogt naast het logo.

   Volgorde: lettertype, variabelen, basis, typografie, links en knoppen,
   secties en bogen, topbalk, hoofdmenu, formuliervelden, nieuwsbriefrij,
   footer, toegankelijkheid.
   ========================================================================== */

/* 1. Lettertype ----------------------------------------------------------- */
/* Montserrat staat in het project zelf, niet bij Google. Zo gaat er geen
   bezoekersgegeven naar een derde partij voordat er toestemming is. */

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* 2. Variabelen ----------------------------------------------------------- */

:root {
  --navy:      #0d224c;
  --navy-10:   #e7e9ed;   /* kaders en kaartranden */
  --navy-5:    #f3f4f6;   /* rustige sectie-achtergrond */
  --geel:      #e6af2e;
  --groen:     #17795c;   /* alleen links en knoppen */
  --wit:       #ffffff;
  --grijs:     #5b6478;   /* bijschriften en kleine hulptekst */

  --breed: 1100px;        /* buitenmaat van de pagina */
  --smal:   880px;        /* maximale regelbreedte voor lopende tekst */
  --zij:     28px;        /* zijmarge */

  --radius: 3px;
}

/* 3. Basis ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Klik je in de inhoudsopgave, dan rolt de pagina naar de kop toe in plaats
   van er meteen heen te springen. Wie in zijn systeem heeft ingesteld dat hij
   minder beweging wil zien, krijgt de gewone sprong. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* De kop komt niet tegen de bovenrand te plakken */
:target, .artikelbody h2 { scroll-margin-top: 28px; }

body {
  margin: 0;
  background: var(--wit);
  color: var(--navy);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;         /* 16px */
  line-height: 1.65;
  overflow-wrap: break-word;
  hyphens: none;
}

img { max-width: 100%; height: auto; display: block; }

/* 4. Typografie ----------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0 0 .875rem;
  color: inherit;
  text-wrap: balance;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 5.5vw, 2.75rem);      line-height: 1.14; font-weight: 700; }  /* 44px */
h2 { font-size: clamp(1.5rem, 4vw, 1.9375rem);    line-height: 1.25; font-weight: 700; }  /* 31px */
h3 { font-size: 1.5rem;    line-height: 1.30; font-weight: 600; }                         /* 24px */
h4 { font-size: 1.125rem;  line-height: 1.35; font-weight: 600; }                         /* 18px */

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.1875rem; line-height: 1.55; }   /* 19px */

.bovenlabel {
  display: block;
  font-size: .75rem;       /* 12px */
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--groen);
  margin-bottom: .625rem;
}

.bijschrift { font-size: .84375rem; color: var(--grijs); }   /* 13.5px */

/* Koppen in smalle kaders mogen wel afbreken, daar loopt een lang woord
   anders uit het kader. Zie sectie 2 van de ontwerpspecificatie. */
.kaart h2, .kaart h3, .kaart h4, .keuze h3, .stap h4, .icoonkaart h4 {
  hyphens: auto;
  /* Pas afbreken vanaf veertien letters, zodat 'belangrijkste' heel blijft
     en 'marketingcommunicatiestrategie' netjes met een streepje breekt. */
  hyphenate-limit-chars: 14 7 5;
}

/* 5. Links en knoppen ----------------------------------------------------- */

a { color: var(--groen); }

/* Een link in de lopende tekst is groen en onderstreept. Deze regel is
   met opzet licht opgeschreven, zodat een enkele klasse hem kan overrulen. */
main a {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
main h1 a, main h2 a, main h3 a, main h4 a { text-decoration: none; font-weight: inherit; }

/* Links die geen leeslink zijn, blijven zonder streep */
.knop, .toc a, .kaart__beeld, .bovenlabel { text-decoration: none; }
.leesook a { text-decoration: underline; }

.knop {
  display: inline-block;
  background: var(--groen);
  border: 1.5px solid var(--groen);
  color: var(--wit);
  font: inherit;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 14px 26px;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.knop:hover { background: #12634b; border-color: #12634b; }

.knop--navy  { background: var(--navy); border-color: var(--navy); color: var(--wit); }
.knop--navy:hover { background: #071837; border-color: #071837; }

.knop--wit   { background: var(--wit); border-color: var(--wit); color: var(--navy); font-weight: 700; }
.knop--wit:hover { background: var(--navy-10); border-color: var(--navy-10); }

.knop--lijn  { background: transparent; color: var(--groen); }
.sectie--navy .knop--lijn,
.kopband--navy .knop--lijn { color: var(--wit); border-color: rgba(255,255,255,.55); }
.sectie--navy .knop--lijn:hover,
.kopband--navy .knop--lijn:hover { background: rgba(255,255,255,.1); }

/* 6. Secties en bogen ----------------------------------------------------- */

.wrap { max-width: var(--breed); margin: 0 auto; padding: 0 var(--zij); }
.smal { max-width: var(--smal); }

.sectie { padding: 64px 0; }
.sectie--wit   { background: var(--wit); }
.sectie--licht { background: var(--navy-5); }
.sectie--geel  { background: var(--geel); color: var(--navy); }
.sectie--navy  { background: var(--navy); color: var(--wit); }
.sectie--navy a:not(.knop) { color: var(--wit); }

/* De boog maakt zelf al ruimte, dus de sectie erna mag minder padding hebben */
.boog + .sectie { padding-top: 34px; }

.boog { display: block; width: 100%; height: 56px; }

/* 7. Topbalk -------------------------------------------------------------- */

.topbalk {
  background: var(--navy-5);
  border-bottom: 1px solid var(--navy-10);
  font-size: .9375rem;    /* 15px */
}
.topbalk__bar {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.topbalk a { color: #4a5468; text-decoration: none; }
.topbalk a:hover { color: var(--navy); }
.topbalk a[aria-current="page"] { color: var(--navy); font-weight: 600; }

/* 8. Hoofdmenu ------------------------------------------------------------ */

.hoofdmenu { background: var(--wit); border-bottom: 1px solid var(--navy-10); }
.hoofdmenu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.hoofdmenu__logo img { height: 48px; width: auto; }
.hoofdmenu__items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-size: .9375rem;    /* 15px */
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.hoofdmenu__items a { color: var(--navy); text-decoration: none; }
.hoofdmenu__items a:hover { color: var(--groen); }
.hoofdmenu__items a.aan { color: var(--groen); }
.hoofdmenu__items .knop { color: var(--wit); padding: 12px 22px; font-size: .875rem; }

/* Op een smal scherm mag het menu kleiner, anders kost het drie regels */
@media (max-width: 560px) {
  .hoofdmenu__logo img { height: 40px; }
  .hoofdmenu__items { font-size: .8125rem; gap: 10px 18px; }
  .hoofdmenu__items .knop { font-size: .8125rem; padding: 11px 18px; }
}

/* 9. Formuliervelden ------------------------------------------------------ */

input[type="text"], input[type="email"], input[type="tel"], textarea {
  font: inherit;
  color: var(--navy);
  background: var(--wit);
  border: 1px solid #c3c9d4;
  border-radius: var(--radius);
  padding: 0 14px;
  height: 52px;
  width: 100%;
}
textarea { height: auto; min-height: 120px; padding: 14px; line-height: 1.5; }
::placeholder { color: #7d869a; opacity: 1; }

/* 10. Nieuwsbriefrij ------------------------------------------------------ */

.nieuwsbriefrij { background: var(--geel); color: var(--navy); padding: 48px 0; }
.nieuwsbriefrij__grid {
  display: grid;
  grid-template-columns: 104px 1fr 340px;
  gap: 32px;
  align-items: center;
}
.nieuwsbriefrij__merk { width: 104px; height: auto; }
.nieuwsbriefrij h2 { margin-bottom: .5rem; }
.nieuwsbriefrij p { margin: 0; }
.nieuwsbriefrij__form { display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 900px) {
  .nieuwsbriefrij__grid { grid-template-columns: 1fr; }
}

/* 11. Footer -------------------------------------------------------------- */

.footer { background: var(--navy); color: var(--wit); padding: 48px 0 0; }
.footer__kolommen {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer a { color: rgba(255,255,255,.9); text-decoration: none; }
.footer a:hover { color: var(--wit); text-decoration: underline; }
.footer a.onderstreept { text-decoration: underline; text-underline-offset: 2px; }
.footer p { font-size: .9375rem; color: rgba(255,255,255,.8); }
.footer__merk img { width: 220px; margin-bottom: 20px; }
.footer__pay { font-size: 1.0625rem; color: var(--wit) !important; margin-top: 0; }
.footer__kop {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 14px;
}
.footer ul { list-style: none; margin: 0; padding: 0; font-size: .9375rem; }
.footer li { margin-bottom: 8px; }
.footer__cover img { width: 120px; margin-bottom: 12px; }
.footer__voet {
  border-top: 1px solid rgba(255,255,255,.15);
  margin-top: 40px;
  padding: 18px 0;
  font-size: .84375rem;
  color: rgba(255,255,255,.6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.footer__voetlinks { display: flex; gap: 20px; flex-wrap: wrap; }

@media (max-width: 780px) {
  .footer__kolommen { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .footer__kolommen { grid-template-columns: 1fr; }
}

/* 12. Toegankelijkheid ---------------------------------------------------- */

:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }
.sectie--navy :focus-visible, .footer :focus-visible { outline-color: var(--geel); }

.verborgen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.naar-inhoud {
  position: absolute; left: -9999px;
  background: var(--navy); color: var(--wit);
  padding: 12px 18px; z-index: 10; text-decoration: none;
}
.naar-inhoud:focus { left: 8px; top: 8px; }

/* 13. Rasters en centrering ----------------------------------------------- */

.g2 { display: grid; grid-template-columns: 1fr 1fr;      gap: 32px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px 24px; }
@media (max-width: 860px) { .g4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 760px) { .g3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.midden { text-align: center; }
.introblok { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.introblok p:last-child { margin-bottom: 0; }

/* 14. Bouwsteen: quote ---------------------------------------------------- */

.quote {
  position: relative;
  margin: 28px 0;
  padding: 30px 0 4px 64px;
  font-size: 1.375rem;     /* 22px */
  line-height: 1.5;
  font-weight: 500;
}
.quote::before {
  content: '\201D';
  position: absolute; left: 0; top: -18px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 110px; line-height: 1;
  color: var(--geel);
}
.quote p { margin: 0; }
.quote p + p { font-size: 1rem; font-weight: 400; margin-top: 14px; color: var(--grijs); }

/* 15. Bouwsteen: lees ook ------------------------------------------------- */

.leesook {
  display: flex; gap: 18px; align-items: center;
  background: var(--wit);
  border: 1px solid var(--navy-10);
  border-radius: 4px;
  padding: 14px 18px;
  margin: 28px 0;
}
.leesook img { width: 104px; height: 78px; object-fit: contain; flex: none; }
.leesook__label {
  display: block;
  font-size: .75rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--grijs); margin-bottom: 4px;
}
.leesook a { font-weight: 600; }

/* 16. Bouwsteen: stappenrij ----------------------------------------------- */

.stappen {
  --stappen: 3;
  display: grid; grid-template-columns: repeat(var(--stappen), 1fr); gap: 36px;
  position: relative;
  --stapbg: var(--wit);
}
/* De lijn loopt van het midden van de eerste cirkel tot het midden van de
   laatste, ongeacht hoeveel stappen er zijn. */
.stappen::before {
  content: ''; position: absolute;
  left: calc(50% / var(--stappen)); right: calc(50% / var(--stappen));
  top: 32px; height: 1px;
  background: rgba(13,34,76,.2);
}
.stap { position: relative; text-align: center; display: flex; flex-direction: column; }
.stap p { margin: 0; }
.stap .voet { margin-top: auto; padding-top: 16px; }
.nummer {
  position: relative; z-index: 1;
  width: 64px; height: 64px; margin: 0 auto 18px;
  border: 3px solid var(--navy); border-radius: 50%;
  background: var(--stapbg); color: var(--navy);
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.5rem;
}
.sectie--licht .stappen { --stapbg: var(--navy-5); }
@media (max-width: 760px) {
  .stappen { grid-template-columns: 1fr; }
  .stappen::before { display: none; }
}

/* 17. Bouwsteen: icoongrid ------------------------------------------------ */

.icoonkaart {
  display: flex; flex-direction: column; text-align: center;
  padding: 28px 20px;
  background: var(--navy-5);
  border-radius: 4px;
}
.sectie--licht .icoonkaart { background: var(--wit); border: 1px solid var(--navy-10); }
.icoonkaart .icoon { width: 60px; height: 60px; margin: 0 auto 18px; color: var(--navy); }
.icoonkaart .icoon svg { width: 60px; height: 60px; display: block; }
.icoonkaart p, .icoonkaart h4 { margin: 0; }
.icoonkaart .voet { margin-top: auto; padding-top: 16px; }

/* 18. Bouwsteen: reviewblok ----------------------------------------------- */

.reviews {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 28px;
  grid-template-rows: auto 1fr auto;
}
.review {
  grid-row: span 3;
  display: grid; grid-template-rows: subgrid; gap: 18px;
  background: var(--wit); border: 1px solid var(--navy-10);
  border-radius: 4px; padding: 26px;
}
.review img {
  width: 88px; height: 88px;
  border-radius: 50%; border: 3px solid var(--navy);
  object-fit: cover;
}
.review q { display: block; font-style: italic; quotes: none; }
.review .wie { font-size: .9375rem; font-weight: 600; line-height: 1.4; align-self: start; }
.review .wie span { display: block; font-weight: 400; color: var(--grijs); }

@supports not (grid-template-rows: subgrid) {
  .reviews { grid-template-rows: none; }
  .review { grid-row: auto; display: flex; flex-direction: column; gap: 18px; }
  .review .wie { margin-top: auto; }
}
@media (max-width: 860px) {
  .reviews { grid-template-columns: 1fr; grid-template-rows: none; }
  .review { grid-row: auto; display: flex; flex-direction: column; gap: 18px; }
  .review .wie { margin-top: auto; }
}

/* 19. Bouwsteen: boekblok ------------------------------------------------- */

.boekblok {
  background: var(--navy); color: var(--wit);
  border-radius: 4px; padding: 36px;
  display: grid; grid-template-columns: 240px 1fr; gap: 40px;
  align-items: center;
}
.boekblok h2, .boekblok h3 { color: var(--wit); }
.boekblok p { color: rgba(255,255,255,.88); }
.boekblok .bovenlabel { color: var(--geel); }
.boekblok img { width: 100%; }
.boekblok__form { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.boekblok__form input { flex: 1; min-width: 220px; }

/* In een formulierrij is de knop even hoog als het invulveld */
.boekblok__form .knop, .nieuwsbriefrij__form .knop {
  height: 52px; padding: 0 26px;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 760px) { .boekblok { grid-template-columns: 1fr; } }

/* 20. Bouwsteen: beeld met bijschrift ------------------------------------- */

figure.beeld { margin: 48px auto; max-width: 640px; }
figure.beeld img { margin-inline: auto; }

/* Op pagina's met veel schermafdrukken krijgt het beeld een dun kader,
   anders loopt een witte schermafdruk over in de witte pagina. */
.beeldkader figure.beeld img { border: 1px solid rgba(13, 34, 76, .22); }

/* 21. Bouwsteen: FAQ ------------------------------------------------------ */

.faq { border-top: 1px solid var(--navy-10); }
.faq details { border-bottom: 1px solid var(--navy-10); padding: 16px 0; }
.faq summary {
  font-weight: 600; font-size: 1.0625rem; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--groen); font-weight: 400; font-size: 24px; line-height: 1.2; }
.faq details[open] summary::after { content: '\2013'; }
.faq p { margin: 12px 0 0; max-width: 62ch; }

/* 22. Bouwsteen: inhoudsopgave -------------------------------------------- */

.metinhoud { display: grid; grid-template-columns: 1fr 260px; gap: 40px; align-items: start; }
.toc { border: 1px solid var(--navy-10); border-radius: 4px; padding: 20px; font-size: .9375rem; }
.toc__kop { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; }
/* De lijst nummert niet zelf. Sommige koppen hebben al een nummer
   ("3. Doe normaal") en dan zou het dubbel staan, of erger: niet kloppen. */
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li { margin-bottom: 8px; }
.toc a { text-decoration: none; }
@media (max-width: 860px) { .metinhoud { grid-template-columns: 1fr; } }

/* 23. Bouwsteen: keuzeblok ------------------------------------------------ */

.keuze {
  background: var(--wit); border: 1px solid var(--navy-10);
  border-radius: 4px; padding: 28px;
  display: flex; flex-direction: column;
}
.keuze--aan { border-color: var(--navy); border-width: 2px; }
.keuze__icoon { width: 52px; height: 52px; color: var(--navy); margin-bottom: 16px; }
.keuze__icoon svg { width: 52px; height: 52px; display: block; }
.keuze__kop { font-size: 1.375rem; font-weight: 700; margin-bottom: 12px; }
.keuze .voet { margin-top: auto; padding-top: 18px; }

/* De knop en de vinkregel krijgen dezelfde hoogte, zodat de twee kaarten
   onderin op één lijn staan. */
.keuze .voet .knop {
  height: 56px; padding: 0 26px;
  display: inline-flex; align-items: center; justify-content: center;
}
.keuze__hier {
  min-height: 56px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--navy); margin: 0;
}
.keuze__hier svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* 24. Bouwsteen: klantlogorij --------------------------------------------- */

.logorij {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 34px 28px; align-items: center; justify-items: center;
}
.logorij img { max-height: 60px; max-width: min(200px, 100%); width: auto; }
@media (max-width: 860px) { .logorij { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px) { .logorij { grid-template-columns: repeat(2,1fr); } }

/* 25. Artikelheader ------------------------------------------------------- */

.kopband { background: var(--navy-5); padding-bottom: 34px; }
.kopband--wit { background: var(--wit); }
.kopband--licht { background: var(--navy-5); }
.kruimel { font-size: .875rem; color: var(--grijs); padding-top: 20px; }
.kruimel a { color: var(--grijs); text-decoration: none; }
.kruimel a:hover { color: var(--navy); }

.artikelkop {
  display: grid; grid-template-columns: 1fr 340px; gap: 48px;
  align-items: center; padding-top: 12px;
}
.artikelkop .ondertitel {
  font-size: 1.5rem; line-height: 1.3; font-weight: 600;
  color: #3d517a; margin: 0 0 16px;
}
/* Het headerbeeld vult niet meer de hele kolom, dat werd te groot. */
.artikelkop img { width: auto; max-width: 100%; max-height: 320px; justify-self: start; }
@media (max-width: 760px) { .artikelkop { grid-template-columns: 1fr; gap: 24px; } }

/* 26. Artikelpagina ------------------------------------------------------- */

.artikelbody {
  display: flex; gap: 56px; align-items: flex-start;
  padding-top: 34px; padding-bottom: 72px;
}
.artikelbody > article { flex: 1; min-width: 0; max-width: 880px; }
.artikelbody > article > :first-child { margin-top: 0; }
.artikelbody h2 { margin-top: 40px; }
.artikelbody h3 { margin-top: 30px; }
.artikelbody ul, .artikelbody ol { margin: 0 0 1rem; padding-left: 22px; }
.artikelbody li { margin-bottom: 6px; }

.toc {
  flex: 0 0 300px; position: sticky; top: 24px;
  border: 1px solid var(--navy-10); border-radius: 4px;
  padding: 22px; font-size: .9375rem;
}
.toc__kop { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; }
/* De lijst nummert niet zelf. Sommige koppen hebben al een nummer
   ("3. Doe normaal") en dan zou het dubbel staan, of erger: niet kloppen. */
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li { margin-bottom: 8px; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .artikelbody { flex-direction: column; gap: 32px; }
  .toc { position: static; flex: none; width: 100%; order: -1; }
}

.verder a { font-weight: 600; }
.verder a::after { content: " \2192"; }

/* 27. Downloadblok in een artikel ----------------------------------------- */

.download {
  background: var(--navy-5); border-radius: 4px;
  padding: 28px; margin: 32px 0;
}
.download--metbeeld {
  display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: center;
}

/* De voorkant krijgt een rug en een schaduw, zodat het een brochure wordt
   en geen platte rechthoek. */
.download__voorkant { position: relative; }
.download__voorkant img {
  display: block; width: 100%;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 12px 26px rgba(13, 34, 76, .26), 0 2px 5px rgba(13, 34, 76, .16);
}
.download__voorkant::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 9px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(to right,
    rgba(255,255,255,.30) 0,
    rgba(0,0,0,.30) 22%,
    rgba(0,0,0,.06) 55%,
    rgba(255,255,255,.16) 100%);
  z-index: 1; pointer-events: none;
}

/* Een poster is geen boek: geen rug, wel een lichte schaduw en een randje. */
.download__voorkant--vel::before { display: none; }
.download__voorkant--vel img {
  border: 1px solid var(--navy-10); border-radius: 2px;
  box-shadow: 0 6px 16px rgba(13, 34, 76, .16);
}
.download h3 { margin: 0 0 8px; }
.download p { margin: 0 0 16px; }
.download__form { display: flex; gap: 12px; flex-wrap: wrap; }
.download__form input { flex: 1; min-width: 220px; }
.download__form .knop {
  height: 52px; padding: 0 26px;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 620px) {
  .download--metbeeld { grid-template-columns: 1fr; gap: 22px; }
  .download__voorkant { max-width: 160px; }
}

/* 28. Kennisoverzicht ----------------------------------------------------- */

.filter__uitleg { max-width: 52ch; margin: 0 0 22px; }
.filter { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.filter label {
  cursor: pointer; user-select: none;
  border: 1px solid var(--navy-10); border-radius: 3px;
  background: var(--wit); color: var(--navy);
  padding: 10px 18px; font-weight: 600; font-size: .9375rem;
}
.filter label span { color: var(--grijs); font-weight: 400; }
.filter label:hover { border-color: var(--navy); }
#laag-alles:checked        ~ .filter label[for="laag-alles"],
#laag-voorwaarden:checked  ~ .filter label[for="laag-voorwaarden"],
#laag-strategie:checked    ~ .filter label[for="laag-strategie"],
#laag-communicatie:checked ~ .filter label[for="laag-communicatie"],
#laag-omgeving:checked     ~ .filter label[for="laag-omgeving"] {
  background: var(--navy); border-color: var(--navy); color: var(--wit);
}
#laag-alles:checked        ~ .filter label[for="laag-alles"] span,
#laag-voorwaarden:checked  ~ .filter label[for="laag-voorwaarden"] span,
#laag-strategie:checked    ~ .filter label[for="laag-strategie"] span,
#laag-communicatie:checked ~ .filter label[for="laag-communicatie"] span,
#laag-omgeving:checked     ~ .filter label[for="laag-omgeving"] span {
  color: rgba(255,255,255,.7);
}
.filter input:focus-visible + label { outline: 2px solid var(--groen); outline-offset: 2px; }

.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 900px) { .kaarten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .kaarten { grid-template-columns: 1fr; } }

.kaart {
  background: var(--wit); border: 1px solid var(--navy-10);
  border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column;
}
.kaart__beeld { display: block; background: var(--navy-5); }
.kaart__beeld img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; padding: 14px; }
.kaart__tekst { padding: 20px 22px 24px; }
.kaart h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; margin: 0 0 8px; }
.kaart h2 a { color: var(--navy); text-decoration: none; }
.kaart h2 a:hover { color: var(--groen); }
.kaart p { font-size: .9375rem; margin: 0; }

/* Filter zonder javascript: de aangevinkte knop verbergt de rest */
#laag-voorwaarden:checked  ~ .kaarten .kaart:not(.laag-voorwaarden),
#laag-strategie:checked    ~ .kaarten .kaart:not(.laag-strategie),
#laag-communicatie:checked ~ .kaarten .kaart:not(.laag-communicatie),
#laag-omgeving:checked     ~ .kaarten .kaart:not(.laag-omgeving) { display: none; }

/* 29. Pagina's ------------------------------------------------------------ */

.kopband--navy { background: var(--navy); color: var(--wit); }
.kopband--navy .lead { color: rgba(255,255,255,.88); }
/* De foto is nog niet uitgesneden en heeft een witte achtergrond. Een ronding
   maakt er een portretkaart van in plaats van een wit blok. */
.kopband--navy .artikelkop img { border-radius: 6px; }
.artikelkop--alleen-tekst { grid-template-columns: 1fr; }
.sectie--naboog { padding-top: 34px; }

.knoprij { display: flex; gap: 12px; flex-wrap: wrap; margin: 22px 0 0; }
.knoprij.midden { justify-content: center; }
.verder.midden { text-align: center; margin-top: 34px; }
.narij { margin: 34px auto 0; }

/* Kaart zonder beeld, voor de 404 en soortgelijke rijen */
.blokkaart {
  background: var(--wit); border: 1px solid var(--navy-10);
  border-radius: 4px; padding: 26px;
}
.blokkaart h3 { font-size: 1.25rem; margin-bottom: 8px; }
.blokkaart h3 a { color: var(--navy); text-decoration: none; }
.blokkaart h3 a:hover { color: var(--groen); }
.blokkaart p { margin: 0; }
.sectie--licht .blokkaart { border-color: transparent; }

/* Tekst met beeld ernaast */
.tekstmedia {
  display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: center;
}
.tekstmedia--links { grid-template-columns: 340px 1fr; }
/* Staande foto's mogen de rij niet uit hun voegen trekken */
.tekstmedia img { max-height: 380px; max-width: 100%; width: auto; height: auto; }
/* Het beeld staat aan de kant van de tekst, niet tegen de buitenrand */
.tekstmedia:not(.tekstmedia--links) img { justify-self: start; }
.tekstmedia--links img { justify-self: end; }
@media (max-width: 760px) {
  .tekstmedia { grid-template-columns: 1fr; gap: 28px; }
  .tekstmedia img { justify-self: start; }
}

/* Feitenlijst */
.feiten .feit .icoon { width: 60px; height: 60px; color: var(--navy); margin-bottom: 14px; }
.feiten .feit .icoon svg { width: 60px; height: 60px; display: block; }
.feiten .feit h4 { margin-bottom: 4px; }
.feiten .feit p { margin: 0; }

/* Contactgegevens naast het formulier */
.contactrij {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start;
}
@media (max-width: 760px) { .contactrij { grid-template-columns: 1fr; gap: 32px; } }
.rondportret {
  width: 140px; height: 140px; border-radius: 50%; object-fit: cover; object-position: 50% 12%;
  border: 3px solid var(--navy); margin-bottom: 22px;
}
.gegevens h3 { font-size: 1.25rem; }
.contactblok { max-width: 720px; margin: 0 auto; }

/* Formulier */
.formulier { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.formulier .veld { margin: 0; }
.formulier .veld--breed { grid-column: 1 / -1; }
.formulier label {
  display: block; font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px;
}
@media (max-width: 560px) { .formulier { grid-template-columns: 1fr; } }

/* Versieregel onderaan de voorwaarden */
.tekstpagina { padding-bottom: 72px; }
.tekstpagina h2 { margin-top: 40px; }
.tekstpagina h3 { margin-top: 28px; }
.versieregel {
  color: var(--grijs); font-size: .875rem;
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--navy-10);
}

/* Vijf stappen naast elkaar */
@media (max-width: 1000px) {
  .stappen { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .stappen::before { display: none; }
}
@media (max-width: 620px) { .stappen { grid-template-columns: 1fr; } }

/* Logo's in grijs, in kleur bij de muisaanwijzer */
.logorij--grijs img {
  filter: grayscale(1); opacity: .7;
  transition: filter .2s ease, opacity .2s ease;
}
.logorij--grijs img:hover { filter: none; opacity: 1; }

/* 30. Bouwsteen: beeld over de breedte ------------------------------------ */

figure.beeldbreed { margin: 0; }
figure.beeldbreed img { width: 100%; height: auto; display: block; border-radius: 4px; }

/* 31. Kop van de homepage, groter beeld dichter bij de tekst --------------- */

.artikelkop--home { grid-template-columns: 1fr 340px; gap: 40px; }
.artikelkop--home img { max-height: 430px; justify-self: start; }
@media (max-width: 900px) { .artikelkop--home { grid-template-columns: 1fr; } }

/* 32. Genummerde keuzekaarten en uitgeschakelde knop ----------------------- */

.keuze--midden { text-align: center; }
.keuze--midden .voet { justify-content: center; display: flex; }
.keuze__nummer {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--navy); color: var(--navy);
  font-weight: 700; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.knop--uit {
  background: var(--navy-5); color: #7b8296; border: 1px solid var(--navy-10);
  cursor: default; pointer-events: none;
}

/* 33. Vergelijkingstabel --------------------------------------------------- */

.vergelijk { overflow-x: auto; margin-top: 40px; }
.vergelijk table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vergelijk th, .vergelijk td { padding: 13px 14px; border-bottom: 1px solid var(--navy-10); }
.vergelijk thead th {
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: #5b6580; font-weight: 600; border-bottom: 2px solid var(--navy);
}
.vergelijk th:first-child, .vergelijk td:first-child { text-align: left; }
.vergelijk th + th, .vergelijk td + td { text-align: center; width: 17%; }
.vergelijk td.n { color: #9aa1b1; }
.vergelijk .vink { width: 20px; height: 20px; display: inline-block; vertical-align: middle;
  fill: none; stroke: var(--groen); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* 34. Contactblok met foto ernaast ----------------------------------------- */

.contactblok--foto {
  display: grid; grid-template-columns: minmax(0, 250px) 1fr; gap: 48px; align-items: center;
  text-align: left; max-width: none;
}
.contactblok--foto img { width: 100%; height: auto; }
.contactblok--foto .knoprij { justify-content: flex-start; }
@media (max-width: 760px) { .contactblok--foto { grid-template-columns: 1fr; gap: 24px; } }

/* 35. Blok Aan de slag op navy ---------------------------------------------- */

/* De tabel sluit direct aan op de drie kaarten erboven */
.sectie--keuzeblok + .sectie--vergelijking,
.sectie--vergelijking { padding-top: 0; }
.sectie--vergelijking .vergelijk { margin-top: 0; }

.sectie--navy .vergelijk table { color: rgba(255,255,255,.92); }
.sectie--navy .vergelijk th, .sectie--navy .vergelijk td { border-bottom-color: rgba(255,255,255,.18); }
.sectie--navy .vergelijk thead th { color: rgba(255,255,255,.7); border-bottom-color: rgba(255,255,255,.5); }
.sectie--navy .vergelijk .vink { stroke: var(--wit); }
.sectie--navy .vergelijk td.n { color: rgba(255,255,255,.45); }

/* Witte kaarten op een navyvlak houden donkere tekst */
.sectie--navy .keuze { color: var(--navy); }
.sectie--navy .keuze h3, .sectie--navy .keuze h4, .sectie--navy .keuze p { color: var(--navy); }
.sectie--navy .keuze .knop--uit { color: #7b8296; }

/* 36. Menuknop voor smalle schermen ---------------------------------------- */

.hamburger {
  display: none;
  background: none; border: 0; padding: 10px; margin: -10px -10px -10px 0;
  cursor: pointer; color: var(--navy);
}
.hamburger__streepjes { display: block; width: 26px; }
.hamburger__streepjes span {
  display: block; height: 2.5px; background: currentColor; border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.hamburger__streepjes span + span { margin-top: 6px; }
.hamburger[aria-expanded="true"] .hamburger__streepjes span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__streepjes span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger__streepjes span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .hamburger__streepjes span { transition: none; } }

/* Boven 860 pixels staan de extra links in de topbalk, niet in het hoofdmenu */
.hoofdmenu__extra, .hoofdmenu__scheiding { display: none; }

@media (max-width: 860px) {
  /* De topbalk verdwijnt, zijn links verhuizen naar het uitklapmenu */
  .topbalk { display: none; }
  .hoofdmenu__bar { position: relative; }
  html.met-menuknop .hoofdmenu__extra { display: block; }
  html.met-menuknop .hoofdmenu__scheiding {
    display: block; height: 1px; background: var(--navy-10); margin: 16px var(--zij) 4px;
  }
  html.met-menuknop .hoofdmenu__extra { font-weight: 500; color: #4a5468; }
  html.met-menuknop .hoofdmenu__extra[aria-current="page"] { color: var(--navy); font-weight: 600; }
  .hamburger { display: block; }
  html.met-menuknop .hoofdmenu__items {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--wit);
    border-top: 1px solid var(--navy-10);
    box-shadow: 0 14px 28px rgba(13, 34, 76, .12);
    padding: 8px 0 16px;
    font-size: 1rem;
  }
  html.met-menuknop .hoofdmenu__items--open { display: flex; }
  html.met-menuknop .hoofdmenu__items a { padding: 14px var(--zij); }
  html.met-menuknop .hoofdmenu__items a + a { border-top: 1px solid var(--navy-10); }
  html.met-menuknop .hoofdmenu__extra + .hoofdmenu__extra { border-top: 1px solid var(--navy-10); }
  html.met-menuknop .hoofdmenu__scheiding + .hoofdmenu__extra { border-top: 0; }
  html.met-menuknop .hoofdmenu__items .knop {
    margin: 14px var(--zij) 0; border-radius: 4px;
    justify-content: center; text-align: center; border-top: 0;
  }
}

/* 37. Smalle schermen: laatste puntjes ------------------------------------- */

@media (max-width: 600px) {
  /* De vergelijkingstabel past nu binnen het scherm en hoeft niet te schuiven */
  .vergelijk table { font-size: .8125rem; }
  .vergelijk th, .vergelijk td { padding: 11px 4px; }
  .vergelijk th + th, .vergelijk td + td { width: 58px; }
  .vergelijk thead th { font-size: .625rem; letter-spacing: .04em; }
  .vergelijk .vink { width: 17px; height: 17px; }

  /* Knoppen naast elkaar worden knoppen onder elkaar, over de volle breedte */
  .knoprij { flex-direction: column; align-items: stretch; }
  .knoprij .knop { justify-content: center; text-align: center; }
}

/* 38. Meldingen onder een formulier ---------------------------------------- */

.formuliermelding {
  margin: 12px 0 0; font-weight: 600; color: var(--groen);
  grid-column: 1 / -1; width: 100%;
}
.formuliermelding--fout { color: #b3261e; }

/* Op donkerblauw wit, op geel donkerblauw. Wit op geel leest slecht. */
.sectie--navy .formuliermelding { color: var(--wit); }
.sectie--navy .formuliermelding--fout { color: #ffd7d3; }
.nieuwsbriefrij .formuliermelding { color: var(--navy); }
.nieuwsbriefrij .formuliermelding--fout { color: #7a1c15; }

/* 39. Bedanktpagina -------------------------------------------------------- */

.downloadkaart { display: flex; flex-direction: column; text-align: center; }
.downloadkaart img {
  width: 100%; max-width: 150px; height: auto; margin: 0 auto 18px;
  filter: drop-shadow(0 8px 18px rgba(13, 34, 76, .16));
}
.downloadkaart h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.downloadkaart p { font-size: .9375rem; }
.downloadkaart .verder { margin-top: auto; padding-top: 12px; }
@media (max-width: 900px) { .downloadrij { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .downloadrij { grid-template-columns: 1fr; } }

/* 40. Cookiebalk ----------------------------------------------------------- */

.cookiebalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--navy); color: var(--wit);
  box-shadow: 0 -8px 24px rgba(13, 34, 76, .22);
}
.cookiebalk__binnen {
  display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  padding-top: 20px; padding-bottom: 20px;
}
.cookiebalk__kop { font-weight: 700; margin: 0 0 4px; }
.cookiebalk p { margin: 0; font-size: .9375rem; line-height: 1.55; color: rgba(255,255,255,.9); }
.cookiebalk a { color: var(--wit); }
.cookiebalk__knoppen { display: flex; gap: 12px; flex-wrap: wrap; }
.cookiebalk .knop--lijn { border-color: rgba(255,255,255,.55); color: var(--wit); }
.cookiebalk .knop--lijn:hover { border-color: var(--wit); background: rgba(255,255,255,.1); }
@media (max-width: 760px) {
  .cookiebalk__binnen { grid-template-columns: 1fr; gap: 16px; }
  .cookiebalk__knoppen .knop { flex: 1; justify-content: center; text-align: center; }
}