/* ==========================================================================
   Gewestplankaart.be
   Eigen huisstijl. Er is precies EEN :root-blok; een tweede palet halverwege
   de stylesheet is de klassieke fork-val en hoort hier niet te verschijnen.
   ========================================================================== */

:root {
  --ink:          #10303a;
  --ink-zacht:    #4a5f68;
  --ink-licht:    #54646d;

  --merk:         #0f4c5c;
  --merk-donker:  #0a3642;
  --merk-licht:   #e3eef1;

  --accent:       #9a4f10;
  --accent-donker:#7d3f0c;
  --accent-licht: #fbf0e4;

  --papier:       #faf8f4;
  --vlak:         #ffffff;
  --vlak-zacht:   #f2efe8;
  --lijn:         #ddd6ca;
  --lijn-zacht:   #ebe6dc;

  --ok:           #1d6b3f;
  --ok-vlak:      #e6f3ea;
  --let-op:       #8a5a00;
  --let-op-vlak:  #fdf3dd;
  --fout:         #9c2320;
  --fout-vlak:    #fbeceb;

  --radius:       10px;
  --radius-klein: 6px;
  --schaduw:      0 1px 2px rgba(16,48,58,.06), 0 4px 16px rgba(16,48,58,.06);
  --schaduw-diep: 0 2px 6px rgba(16,48,58,.08), 0 12px 32px rgba(16,48,58,.10);

  --breed:        1220px;
  --smal:         74ch;
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--ink);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "kern" 1;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--merk); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--merk-donker); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--merk);
  outline-offset: 2px;
  border-radius: 3px;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; color: var(--ink); font-weight: 700; }
h1 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.3rem, 1.05rem + .95vw, 1.7rem); letter-spacing: -.01em; }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li + li { margin-top: .3em; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--merk); color: #fff; padding: .7rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- structuur ---------- */

.wrap { width: min(100% - 2rem, var(--breed)); margin-inline: auto; }
.prose { max-width: var(--smal); }

.band { padding: 2.75rem 0; }
.band--zacht { background: var(--vlak-zacht); }
.band--merk  { background: var(--merk); color: #fff; }
.band--merk h1, .band--merk h2, .band--merk h3 { color: #fff; }
.band--merk a { color: #fff; }
.band--strak { padding: 1.75rem 0; }

.raster { display: grid; gap: 1.25rem; }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.split {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .split--gelijk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- kop ---------- */

.kop {
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn);
  position: sticky; top: 0; z-index: 40;
}
.kop__inner { display: flex; align-items: center; gap: 1rem; min-height: 62px; }
.merk { display: flex; align-items: center; gap: .55rem; min-height: 44px; font-weight: 700;
        font-size: 1.05rem; color: var(--merk); text-decoration: none; letter-spacing: -.01em; }
.merk__vlag { width: 26px; height: 26px; flex: none; border-radius: 5px; background: var(--merk); }

.nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.nav a {
  display: inline-block; padding: .5rem .7rem; border-radius: var(--radius-klein);
  color: var(--ink-zacht); text-decoration: none; font-size: .94rem; font-weight: 500;
}
.nav a:hover { background: var(--vlak-zacht); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--merk); background: var(--merk-licht); font-weight: 600; }

.nav__knop {
  display: none; width: 44px; height: 44px; margin-left: auto;
  background: none; border: 1px solid var(--lijn); border-radius: var(--radius-klein);
  color: var(--ink); cursor: pointer; align-items: center; justify-content: center;
}
@media (max-width: 900px) {
  .nav__knop { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--vlak); border-bottom: 1px solid var(--lijn);
    padding: .5rem 1rem 1rem; box-shadow: var(--schaduw);
  }
  .kop__inner { position: relative; }
  .nav.is-open { display: flex; }
  .nav a { padding: .75rem .5rem; min-height: 44px; display: flex; align-items: center; }
}

/* ---------- hero ---------- */

.hero {
  background:
    radial-gradient(1100px 380px at 12% -10%, rgba(255,255,255,.14), transparent 62%),
    linear-gradient(158deg, var(--merk) 0%, var(--merk-donker) 100%);
  color: #fff;
  padding: 3rem 0 3.25rem;
}
.hero h1 { color: #fff; margin-bottom: .6rem; }
.hero__lead { font-size: 1.08rem; max-width: 62ch; color: #e2eef1; margin-bottom: 1.5rem; }
.hero__cijfers { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.pil {
  display: inline-flex; align-items: baseline; gap: .4rem;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.24);
  padding: .38rem .75rem; border-radius: 999px; font-size: .88rem; color: #fff;
}
.pil b { font-weight: 700; }

/* ---------- adreszoeker ---------- */

.zoeker { background: var(--vlak); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--schaduw-diep); }
.zoeker--in-hero { color: var(--ink); }
.zoeker__label { display: block; font-weight: 600; margin-bottom: .45rem; font-size: .95rem; color: var(--ink); }
.zoeker__rij { display: flex; gap: .5rem; flex-wrap: wrap; }
.zoeker__veld { position: relative; flex: 1 1 260px; }
.zoeker input[type="text"], .zoeker input[type="search"] { width: 100%; }
.zoeker__hint { font-size: .85rem; color: var(--ink-licht); margin: .55rem 0 0; }

input[type="text"], input[type="search"], input[type="email"], textarea, select {
  width: 100%; padding: .68rem .8rem; font: inherit; color: var(--ink);
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius-klein);
}
input::placeholder { color: #667077; }
textarea { min-height: 140px; resize: vertical; }
label { font-weight: 600; font-size: .95rem; }

.suggesties {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius-klein);
  box-shadow: var(--schaduw-diep); list-style: none; margin: 0; padding: .25rem; max-height: 280px; overflow: auto;
}
.suggesties li { margin: 0; }
.suggesties button {
  display: block; width: 100%; text-align: left; padding: .55rem .6rem; min-height: 40px;
  background: none; border: 0; border-radius: 4px; font: inherit; color: var(--ink); cursor: pointer;
}
.suggesties button:hover, .suggesties button:focus { background: var(--merk-licht); }

/* ---------- knoppen ---------- */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .6rem 1.15rem; border-radius: var(--radius-klein);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; background: var(--merk); color: #fff;
}
.knop:hover { background: var(--merk-donker); color: #fff; }
.knop--accent { background: var(--accent); }
.knop--accent:hover { background: var(--accent-donker); color: #fff; }
.knop--rand { background: var(--vlak); color: var(--merk); border-color: var(--lijn); }
.knop--rand:hover { background: var(--vlak-zacht); color: var(--merk-donker); }
.knop--licht { background: #fff; color: var(--merk); }
.knop--licht:hover { background: #eef5f7; color: var(--merk-donker); }
.knop--breed { width: 100%; }
.knop[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- kaarten ---------- */

.kaart {
  background: var(--vlak); border: 1px solid var(--lijn-zacht);
  border-radius: var(--radius); padding: 1.15rem; box-shadow: var(--schaduw);
}
.kaart--vlak { box-shadow: none; }
.kaart h3 { margin-bottom: .35rem; }
.kaart p:last-child { margin-bottom: 0; }

.tegel {
  display: block; background: var(--vlak); border: 1px solid var(--lijn-zacht);
  border-radius: var(--radius); padding: .9rem 1rem; text-decoration: none; color: var(--ink);
  box-shadow: var(--schaduw);
}
.tegel:hover { border-color: var(--merk); color: var(--ink); }
.tegel__naam { font-weight: 650; color: var(--merk); }
.tegel__meta { font-size: .85rem; color: var(--ink-licht); margin-top: .15rem; }

.cijfer { background: var(--vlak); border: 1px solid var(--lijn-zacht); border-radius: var(--radius); padding: 1rem 1.1rem; }
.cijfer__waarde { font-size: 1.65rem; font-weight: 700; color: var(--merk); line-height: 1.1; }
.cijfer__label { font-size: .88rem; color: var(--ink-zacht); margin-top: .2rem; }

/* ---------- plannenstapel ---------- */

.stapel { list-style: none; margin: 0; padding: 0; }
.stapel > li { margin: 0 0 .75rem; }

.plan {
  position: relative; background: var(--vlak); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 1rem 1.1rem 1rem 1.35rem; overflow: hidden;
}
.plan::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--kleur, var(--merk));
}
.plan--geldend { border-color: var(--merk); box-shadow: var(--schaduw); }
.plan--vervallen { background: var(--vlak-zacht); }
.plan--vervallen .plan__bestemming { text-decoration: line-through; text-decoration-thickness: 1px; }

.plan__kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .3rem; }
.plan__niveau { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-licht); }
.plan__bestemming { font-size: 1.05rem; font-weight: 650; }
.plan__naam { color: var(--ink-zacht); font-size: .95rem; }
.plan__meta { font-size: .88rem; color: var(--ink-licht); margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.plan__uitleg { font-size: .92rem; color: var(--ink-zacht); margin: .6rem 0 0; }
.plan__links { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .9rem; }

.merkje {
  display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem;
  border-radius: 999px; font-size: .76rem; font-weight: 650; letter-spacing: .01em;
  border: 1px solid transparent; white-space: nowrap;
}
.merkje--geldig    { background: var(--ok-vlak);     color: var(--ok);     border-color: #bfdcc8; }
.merkje--procedure { background: var(--let-op-vlak); color: var(--let-op); border-color: #e8d49a; }
.merkje--vervallen { background: var(--fout-vlak);   color: var(--fout);   border-color: #eec4c2; }
.merkje--neutraal  { background: var(--vlak-zacht);  color: var(--ink-zacht); border-color: var(--lijn); }

/* ---------- meldingen ---------- */

.melding { border-radius: var(--radius); padding: .9rem 1.1rem; margin: 0 0 1.25rem; border: 1px solid; }
.melding--info    { background: var(--merk-licht);   border-color: #bcd6dd; color: #0c3b48; }
.melding--ok      { background: var(--ok-vlak);      border-color: #bfdcc8; color: #14512f; }
.melding--let-op  { background: var(--let-op-vlak);  border-color: #e8d49a; color: #6b4600; }
.melding--fout    { background: var(--fout-vlak);    border-color: #eec4c2; color: #7d1c1a; }
.melding p:last-child { margin-bottom: 0; }
.melding strong { font-weight: 700; }

/* ---------- tabel ---------- */

.tabel-omhulsel { overflow-x: auto; border: 1px solid var(--lijn-zacht); border-radius: var(--radius); background: var(--vlak); }
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--lijn-zacht); }
th { background: var(--vlak-zacht); font-weight: 650; color: var(--ink); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfaf7; }

/* ---------- FAQ ---------- */

.faq { border: 1px solid var(--lijn-zacht); border-radius: var(--radius); background: var(--vlak); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--lijn-zacht); }
.faq summary {
  cursor: pointer; padding: .95rem 1.1rem; font-weight: 650; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--merk); line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 1.1rem 1.05rem; color: var(--ink-zacht); max-width: var(--smal); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- kaart (Leaflet) ---------- */

.kaartvlak { height: 520px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--lijn); background: var(--vlak-zacht); }
@media (max-width: 700px) { .kaartvlak { height: 380px; } }
.leaflet-container { font: inherit; }
.leaflet-popup-content { margin: .7rem .9rem; font-size: .92rem; }
.legenda { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .8rem; font-size: .87rem; color: var(--ink-zacht); }
.legenda span { display: inline-flex; align-items: center; gap: .35rem; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---------- CTA ---------- */

.cta {
  background: linear-gradient(158deg, #14424e 0%, #0a3642 100%);
  color: #fff; border-radius: var(--radius); padding: 1.5rem;
}
.cta h2, .cta h3 { color: #fff; }
.cta p { color: #dfeaee; }
.cta__prijs { font-size: 1.35rem; font-weight: 700; }
.cta__lijst { list-style: none; padding: 0; margin: 1rem 0; }
.cta__lijst li { padding-left: 1.45rem; position: relative; color: #eaf2f4; margin-bottom: .35rem; }
.cta__lijst li::before { content: "\2713"; position: absolute; left: 0; color: #9fd3b4; font-weight: 700; }
.cta__klein { font-size: .84rem; color: #bcd3d9; }

.veld-rij { margin-bottom: .9rem; }
.akkoord { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .92rem; }
.akkoord input { margin-top: .25rem; flex: none; width: 18px; height: 18px; }
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- artikel ---------- */

.artikel { max-width: var(--smal); }
.artikel h2 { margin-top: 1.9rem; }
.artikel h3 { margin-top: 1.3rem; }
.artikel img { border-radius: var(--radius); }
.artikel blockquote {
  margin: 1.4rem 0; padding: .8rem 1.1rem; border-left: 4px solid var(--merk-licht);
  background: var(--vlak); color: var(--ink-zacht);
}
.kruimels { font-size: .87rem; color: var(--ink-licht); margin-bottom: 1rem; }
.kruimels a { color: var(--ink-zacht); }
.kruimels span { margin: 0 .35rem; }

.meta-rij { font-size: .88rem; color: var(--ink-licht); margin-bottom: 1.2rem; display: flex; gap: .3rem 1rem; flex-wrap: wrap; }

.letterindex { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1.5rem; }
.letterindex a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 .5rem;
  background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--radius-klein);
  text-decoration: none; font-weight: 650; color: var(--merk);
}
.letterindex a:hover { background: var(--merk-licht); }

.kolommen { columns: 3 210px; column-gap: 1.75rem; }
.kolommen ul { list-style: none; padding: 0; margin: 0; }
.kolommen li { break-inside: avoid; margin-bottom: .3rem; }

/* ---------- voet ---------- */

.voet { background: var(--merk-donker); color: #cfe0e5; margin-top: 3rem; padding: 2.5rem 0 1.5rem; }
.voet h2 { font-size: .95rem; color: #fff; margin-bottom: .6rem; letter-spacing: .01em; }
.voet a { color: #cfe0e5; text-decoration: none; }
.voet a:hover { color: #fff; text-decoration: underline; }
.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li { margin-bottom: .3rem; font-size: .93rem; }
.voet__raster { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.voet__onder {
  border-top: 1px solid rgba(255,255,255,.16); margin-top: 1.8rem; padding-top: 1.1rem;
  font-size: .86rem; color: #b3c8ce; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
}

/* ---------- diversen ---------- */

.klein { font-size: .87rem; color: var(--ink-licht); }
.gedempt { color: var(--ink-zacht); }
.midden { text-align: center; }
.verborgen { display: none !important; }
.alleen-lezers {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ruimte-boven { margin-top: 1.5rem; }
.ruimte-onder { margin-bottom: 1.5rem; }

.bron-noot {
  font-size: .85rem; color: var(--ink-licht); border-top: 1px solid var(--lijn-zacht);
  padding-top: .9rem; margin-top: 1.8rem;
}

.ad-vak { margin: 2rem 0; min-height: 90px; }

/* AdSense mag de kaart nooit uit elkaar duwen. */
.kaart-flex { google-auto-ads: ignore; }
.kaart-flex .google-auto-placed,
.kaart-flex ins[id^="aswift"],
.kaart-flex ins.adsbygoogle { display: none !important; }

@media print {
  .kop, .voet, .cta, .ad-vak, .nav__knop { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   Laag 2: verdieping van de vormgeving (audit 31-08-2026)
   Alles hieronder bouwt voort op het palet bovenaan; er komt hier bewust
   GEEN tweede :root-blok bij.
   ========================================================================== */

/* ---------- hero, wat rustiger en met meer richting ---------- */

.hero { position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; right: -120px; top: -80px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.07), transparent 62%);
  pointer-events: none;
}
.hero__kop { display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem; }
.hero__kop span {
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #a8d0da;
}
.hero__kop i { display: block; width: 26px; height: 2px; background: #a8d0da; }

/* ---------- cijferband die over de hero heen steekt ---------- */

.cijferband { margin-top: -1.9rem; position: relative; z-index: 5; }
.cijferband__raster {
  display: grid; gap: 1px; background: var(--lijn-zacht);
  border: 1px solid var(--lijn-zacht); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  box-shadow: var(--schaduw-diep);
}
.cijferband__vak { background: var(--vlak); padding: 1.05rem 1.15rem; }
.cijferband__waarde {
  font-size: 1.55rem; font-weight: 700; color: var(--merk); line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.cijferband__label { font-size: .85rem; color: var(--ink-zacht); margin-top: .2rem; }

/* ---------- de plannenstapel als diagram ---------- */

.stapeldiagram { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 900px) { .stapeldiagram { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); } }
.stapeldiagram svg { width: 100%; height: auto; display: block; }

.niveaus { list-style: none; margin: 0; padding: 0; counter-reset: niveau; }
.niveaus li {
  position: relative; padding: .75rem 0 .75rem 3.1rem; margin: 0;
  border-bottom: 1px solid var(--lijn-zacht);
}
.niveaus li:last-child { border-bottom: 0; }
.niveaus li::before {
  counter-increment: niveau; content: counter(niveau);
  position: absolute; left: 0; top: .7rem;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--merk-licht); color: var(--merk);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem;
}
.niveaus b { display: block; font-size: 1rem; }
.niveaus span { display: block; font-size: .9rem; color: var(--ink-zacht); margin-top: .1rem; }
.niveaus em {
  font-style: normal; font-size: .82rem; color: var(--ink-licht);
  font-variant-numeric: tabular-nums;
}

/* ---------- stappen ---------- */

.stappen { counter-reset: stap; list-style: none; padding: 0; margin: 0; }
.stappen li { position: relative; padding-left: 3rem; margin-bottom: 1.15rem; }
.stappen li::before {
  counter-increment: stap; content: counter(stap);
  position: absolute; left: 0; top: -.1rem;
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  background: var(--merk); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.stappen b { display: block; margin-bottom: .15rem; }
.stappen p { margin: 0; color: var(--ink-zacht); font-size: .95rem; }

/* ---------- tegels met kleurmarkering ---------- */

.tegel { transition: border-color .12s ease, transform .12s ease; }
.tegel:hover { transform: translateY(-1px); }
.tegel--kleur { border-left-width: 4px; border-left-style: solid; }

.tegel__cijfer {
  float: right; font-size: .8rem; color: var(--ink-licht);
  font-variant-numeric: tabular-nums;
}

/* ---------- sectiekop met bijschrift ---------- */

.sectiekop { margin-bottom: 1.25rem; max-width: var(--smal); }
.sectiekop h2 { margin-bottom: .35rem; }
.sectiekop p { margin: 0; color: var(--ink-zacht); }

/* ---------- inhoudsopgave op lange uitlegpagina's ---------- */

.inhoud {
  background: var(--vlak); border: 1px solid var(--lijn-zacht);
  border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0 0 1.75rem;
}
.inhoud h2 { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em;
             color: var(--ink-licht); margin: 0 0 .5rem; }
.inhoud ol { margin: 0; padding-left: 1.15rem; }
.inhoud li { margin-bottom: .2rem; }
.inhoud a { color: var(--merk); }

/* ---------- accentband voor de kernboodschap ---------- */

.kernpunt {
  border-left: 4px solid var(--accent); background: var(--accent-licht);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1.1rem 1.25rem;
}
.kernpunt h2, .kernpunt h3 { margin-top: 0; }
.kernpunt p:last-child { margin-bottom: 0; }
.kernpunt strong { color: var(--accent-donker); }

/* ---------- definitielijst ---------- */

.kenmerken { margin: 0; }
.kenmerken div {
  display: grid; gap: .1rem 1rem; padding: .55rem 0;
  border-bottom: 1px solid var(--lijn-zacht);
}
@media (min-width: 640px) { .kenmerken div { grid-template-columns: 12rem 1fr; } }
.kenmerken div:last-child { border-bottom: 0; }
.kenmerken dt { font-weight: 600; color: var(--ink-zacht); font-size: .93rem; }
.kenmerken dd { margin: 0; }

/* ---------- tabel: leesbaarder op smalle schermen ---------- */

.tabel-omhulsel { position: relative; }
.tabel-omhulsel::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.9));
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
@media (max-width: 720px) { .tabel-omhulsel::after { opacity: 1; } }

/* ---------- voet: iets meer lucht ---------- */

.voet__raster { gap: 1.75rem 2.5rem; }
.voet h2 { text-transform: uppercase; letter-spacing: .07em; font-size: .78rem; color: #9fbcc4; }

/* ==========================================================================
   Laag 3: reparaties uit de QA-audit van 01-09-2026
   ========================================================================== */

/* ---------- lange woorden mogen de pagina niet opzij duwen ----------
   "Gebieden voor gemeenschapsvoorzieningen en openbaar nut" past als woord
   niet in 320 px. Zonder deze regel groeit de H1 door tot 376 px en scrollt
   de HELE pagina horizontaal mee. Geldt ook voor plannamen als
   "Zonevreemde bedrijven - herziening" en voor lange URL's in de brontekst. */

h1, h2, h3, h4, .kruimels, .prose p, .prose li, td, th {
  overflow-wrap: break-word;
  word-break: break-word;
}
h1, h2, h3 { hyphens: auto; }

/* ---------- tikdoelen: WCAG 2.2 SC 2.5.8 vraagt 24 x 24 px ----------
   Tekstlinks in tabellen, kruimelpaden, feitenlijsten en de voet waren
   18 tot 21 px hoog. De AAA-eis van 44 px halen we bewust niet; 24 px is
   de norm op AA-niveau. */

.kruimels a,
.voet a,
td a, th a,
.tabel a,
.feiten a,
.chips a,
.lijst a { display: inline-block; min-height: 24px; line-height: 24px; }

/* ---------- kaartattributie haalde 3,64:1 ----------
   Leaflet zet lichtblauwe links op #ddd. Met een dekkende witte ondergrond
   en een donkerder blauw komt dat op 6,4:1. */

.leaflet-control-attribution {
  background: #fff !important;
  color: #384349 !important;
  font-size: 11px;
  padding: 2px 6px;
}
.leaflet-control-attribution a { color: #005c82 !important; text-decoration: underline; }

/* Ook lijst- en definitielinks tellen als tikdoel. Losse links MIDDEN in een
   lopende zin blijven ongemoeid: SC 2.5.8 zondert die uitdrukkelijk uit, en
   24 px regelhoogte forceren in een alinea maakt de tekst juist onrustig. */
.kaart li a,
.kaart ul a,
dd a,
.kenmerken a,
.raster li a { display: inline-block; min-height: 24px; line-height: 24px; }

/* F-18 tabellen in artikelen en gidsen (11-09-2026): de content komt uit de databank zonder opmaak */
.artikel table, .prose table { width: 100%; border-collapse: collapse; margin: 22px 0; background: #fff; border: 1px solid var(--border-light, var(--border, #e3e3e3)); border-radius: 8px; box-shadow: var(--shadow, 0 2px 8px rgba(0,0,0,0.06)); font-size: 0.95rem; line-height: 1.45; }
.artikel th,  .artikel td, .prose th,  .prose td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-light, var(--border, #e3e3e3)); }
.artikel th, .prose th { background: var(--bg-soft, var(--bg-light, #f4f4f4)); color: var(--primary-dark, inherit); font-weight: 700; }
.artikel tbody tr:nth-child(even) td, .prose tbody tr:nth-child(even) td { background: rgba(0,0,0,0.02); }
.artikel tbody tr:last-child td, .prose tbody tr:last-child td { border-bottom: 0; }
.artikel td:first-child, .prose td:first-child { font-weight: 600; }
@media (max-width: 640px) {
    .artikel table, .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.9rem; }
    .artikel th,  .artikel td, .prose th,  .prose td { padding: 8px 10px; }
}

/* V-23 (19-09-2026) */
.cta .cta__anker { margin: 0 0 1rem; padding: .6rem .85rem; background: rgba(255,255,255,.12); border-left: 3px solid #F9A825; border-radius: 6px; font-size: .92rem; line-height: 1.5; color: #fff; }