@font-face { font-family: 'Plus Jakarta Sans'; src: url('/assets/fonts/plusjakartasans-latin.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --zee: #0e4a5a;
  --zee-donker: #08313c;
  --zee-licht: #e3eff1;
  --dijk: #3a7435;    
  --dijk-licht: #e6f1e3;
  --zon: #f2b33d;
  --zon-donker: #8a5b00;    
  --zand: #f7f4ee;
  --wit: #ffffff;
  --tekst: #1d2a2e;
  --tekst-zacht: #55666b;
  --rand: #dcd6ca;
  --rand-veld: #857f73;
  --rood: #b3261e;
  --rood-licht: #fbe9e7;
  --paars: #5b4b8a;
  --radius: 14px;
  --radius-s: 8px;
  --schaduw: 0 1px 2px rgba(8, 49, 60, .06), 0 4px 16px rgba(8, 49, 60, .06);
  --wrap: 1180px;
  --onderbalk: 64px;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-kop: 'Fraunces', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--zand); color: var(--tekst); font: 400 17px/1.6 var(--font);
  padding-bottom: calc(var(--onderbalk) + env(safe-area-inset-bottom, 0px)); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--zee); text-underline-offset: 2px; }
a:hover { color: var(--zee-donker); }
h1, h2, h3 { font-family: var(--font-kop); font-weight: 650; line-height: 1.2; color: var(--zee-donker); overflow-wrap: break-word; hyphens: auto; margin: 0 0 .5em; }
h1 { font-size: clamp(1.75rem, 5vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 3.4vw, 1.75rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--zee-donker); outline-offset: 2px; box-shadow: 0 0 0 5px var(--zon); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.smal { max-width: 820px; }
.klein { font-size: .88rem; color: var(--tekst-zacht); }
.groot { font-size: 1.12rem; }
.midden { text-align: center; }
.ic { width: 22px; height: 22px; flex: none; }
.ic-s { width: 15px; height: 15px; }
.skiplink { position: absolute; left: 8px; top: 8px; z-index: 100; background: var(--wit); padding: 8px 14px; border-radius: var(--radius-s);
  width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skiplink:focus { width: auto; height: auto; clip-path: none; }

.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px;
  border: 2px solid var(--zee); background: var(--zee); color: var(--wit); font: 600 1rem/1.2 var(--font); text-decoration: none; cursor: pointer; }
.knop:hover { background: var(--zee-donker); border-color: var(--zee-donker); color: var(--wit); }
.knop:disabled { opacity: .6; cursor: wait; }
.knop-geel { background: var(--zon); border-color: var(--zon); color: var(--zee-donker); }
.knop-geel:hover { background: #e3a223; border-color: #e3a223; color: var(--zee-donker); }
.knop-licht { background: var(--wit); color: var(--zee); border-color: var(--rand); }
.knop-licht:hover { background: var(--zee-licht); color: var(--zee-donker); border-color: var(--zee); }
.knop-licht[aria-pressed="true"] { background: var(--zee-licht); border-color: var(--zee); }
.knop-tekst { background: none; border: 0; color: var(--tekst-zacht); font: 600 .9rem var(--font); cursor: pointer; padding: 10px 6px; min-height: 44px; text-decoration: underline; }
.knop-tekst:hover { color: var(--zee); }
.knop-gevaar { color: var(--rood); }
.knop.knop-gevaar { background: var(--rood); border-color: var(--rood); color: var(--wit); }
.knop-klein { min-height: 44px; padding: 7px 14px; font-size: .92rem; }
.knop-groot { font-size: 1.15rem; padding: 14px 32px; }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.kop { background: var(--wit); border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 40; }
.kop-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.merk { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--zee-donker); min-width: 0; }
.merk img { width: 40px; height: 40px; border-radius: 10px; }
.merk-tekst { display: flex; flex-direction: column; min-width: 0; }
.merk-naam { font: 700 1.15rem/1.1 var(--font-kop); }
.merk-onder { font-size: .78rem; color: var(--tekst-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none; }
.kop-acties { display: flex; align-items: center; gap: 6px; flex: none; }
.kop-plaatsen, .kop-ik-naam, .kop-login span { display: none; }
.kop-bel, .kop-ik, .kop-login, .menuknop { position: relative; display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; justify-content: center;
  border-radius: 999px; color: var(--zee-donker); text-decoration: none; background: none; border: 0; cursor: pointer; font: 600 .95rem var(--font); }
.kop-bel:hover, .kop-ik:hover, .kop-login:hover, .menuknop:hover { background: var(--zee-licht); }
.menuknop .ic-dicht, .menuknop[aria-expanded="true"] .ic-open { display: none; }
.menuknop[aria-expanded="true"] .ic-dicht { display: block; }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--dijk); color: var(--wit); font-weight: 700; flex: none; }
.avatar-s { width: 26px; height: 26px; font-size: .8rem; }
.avatar-l { width: 60px; height: 60px; font-size: 1.5rem; }
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--rood); color: var(--wit); font-size: .72rem; font-weight: 700; line-height: 1; }
.kop-bel .badge { position: absolute; top: 2px; right: 0; }
.badge[hidden] { display: none; }
.hoofdmenu { display: none; border-top: 1px solid var(--rand); }
.hoofdmenu.is-open { display: block; }
.hoofdmenu ul { list-style: none; margin: 0 auto; padding: 8px 16px 14px; }
.hoofdmenu a { display: flex; align-items: center; min-height: 46px; padding: 0 12px; border-radius: var(--radius-s); text-decoration: none; font-weight: 600; color: var(--tekst); }
.hoofdmenu a:hover { background: var(--zee-licht); }
.hoofdmenu a[aria-current="page"] { color: var(--zee); background: var(--zee-licht); }
.menu-meer { display: none; }

.onderbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--wit); border-top: 1px solid var(--rand);
  padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 12px rgba(8, 49, 60, .06); }
.onderbalk ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: var(--onderbalk); }
.onderbalk a { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: .72rem; font-weight: 600; color: var(--tekst-zacht); text-decoration: none; white-space: nowrap; }
.onderbalk a[aria-current="page"] { color: var(--zee); }
.onderbalk .badge { position: absolute; top: 6px; left: calc(50% + 6px); }
.onder-plaatsen a { color: var(--zee-donker); }
.onder-plaatsen .ic { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: var(--zon); margin-top: -14px; box-shadow: var(--schaduw); }

main { display: block; }
.blok { padding: 28px 0; }
.blok-zacht { background: var(--wit); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.paginakop { padding: 28px 0 8px; }
.paginakop-tekst { max-width: 70ch; color: var(--tekst-zacht); font-size: 1.05rem; }
.paginakop-knoppen { margin-top: 12px; }
.bovenkop { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: var(--dijk); margin-bottom: .4em; }
.blokkop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: clamp(1.25rem, 3vw, 1.6rem); }
.blokkop-klein { font-size: 1.1rem; }
.blokkop .nr { font: 700 .8rem var(--font); color: var(--zee); background: var(--zee-licht); border-radius: 999px; padding: 3px 9px; }
.blokkop-extra { font: 600 .85rem var(--font); color: var(--dijk); background: var(--dijk-licht); border-radius: 999px; padding: 3px 10px; }
.blokkop-rij { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; }
.blokkop-rij .blokkop { margin: 0; }
.meer { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; min-height: 44px; }
.meer .ic { width: 18px; height: 18px; }
.meer-rij { display: flex; gap: 16px; flex-wrap: wrap; }
.kaart { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); padding: 20px; box-shadow: var(--schaduw); margin-bottom: 20px; }
.kaart-zacht { background: var(--zee-licht); border-color: transparent; box-shadow: none; }
.leeg { background: var(--wit); border: 2px dashed var(--rand); border-radius: var(--radius); padding: 24px; text-align: center; color: var(--tekst-zacht); }
.leeg p { max-width: 50ch; margin: 0 auto 12px; }
.melding { border-radius: var(--radius-s); padding: 12px 16px; margin-bottom: 16px; }
.melding-info { background: var(--zee-licht); }
.melding-fout { background: var(--rood-licht); color: var(--rood); }
.terug { margin-bottom: 14px; }
.terug a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; min-height: 44px; }
.twee, .twee-smal { display: grid; gap: 24px; align-items: start; }

.bk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .82rem; color: var(--tekst-zacht); margin-bottom: 6px; }
.soort { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--zee); }
.soort .ic { width: 16px; height: 16px; }
.soort-hulp { color: var(--dijk); }
.soort-markt { color: var(--zon-donker); }
.soort-gevonden { color: #a3401f; }
.soort-ideeen { color: var(--paars); }
.soort-agenda { color: var(--zee); }
.bk-waar::before { content: '·'; margin-right: 10px; color: var(--rand); }
.bk-meta > .bk-waar:first-child::before { content: none; }
.label { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.label-redactie { background: var(--zee); color: var(--wit); }
.label-officieel { background: var(--dijk); color: var(--wit); }
.label-bewoner { background: #f4ecd9; color: #6b5313; white-space: normal; }
.label-org { background: var(--zee-licht); color: var(--zee-donker); }
.label-sponsor { background: #fdf0d3; color: #7a5200; border: 1px solid #f1cf86; }
.label-ok { background: var(--dijk-licht); color: var(--dijk); }
.label-bekend { background: var(--dijk-licht); color: var(--dijk); border: 1px solid #b9d4b3; }
.label-wacht { background: #eee; color: #555; }

.kaarten { display: grid; gap: 14px; align-items: start; }
.bk { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.blok-zacht .bk { background: var(--zand); }
.bk.is-opgelost { opacity: .75; }
.bk.is-wacht { border-style: dashed; }
.bk-foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.bk-in { padding: 14px 16px 6px; display: flex; flex-direction: column; flex: 1; }
.bk-titel { font-family: var(--font); font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; }
.bk-titel a { color: var(--tekst); text-decoration: none; }
.bk-titel a:hover { color: var(--zee); text-decoration: underline; }
.bk-tekst { color: var(--tekst-zacht); font-size: .95rem; margin-bottom: 8px; overflow-wrap: anywhere; }
.bk-wanneer { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--zee); margin-bottom: 6px; }
.bk-prijs { font-weight: 800; color: var(--zon-donker); margin-bottom: 6px; }
.bk-prijs.groot { font-size: 1.4rem; }
.bk-voortgang { display: inline-block; font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; background: #ece8f6; color: var(--paars); margin-bottom: 6px; }
.voortgang-uitgevoerd { background: var(--dijk-licht); color: var(--dijk); }
.voortgang-niet_haalbaar { background: #eee; color: #555; }
.voortgang-gemeente, .voortgang-dorpsraad { background: var(--zee-licht); color: var(--zee); }
.bk-voet { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; border-top: 1px solid var(--rand); padding-top: 4px; }
.bk-wie { font-size: .82rem; color: var(--tekst-zacht); }
.bk-acties { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.ikoon-knop { display: inline-flex; align-items: center; gap: 4px; min-width: 44px; min-height: 44px; justify-content: center; padding: 0 6px;
  background: none; border: 0; border-radius: 999px; color: var(--tekst-zacht); font: 600 .85rem var(--font); cursor: pointer; text-decoration: none; }
.ikoon-knop:hover { background: var(--zee-licht); color: var(--zee); }
.ikoon-knop[aria-pressed="true"] { color: var(--zee); }
.ikoon-knop[aria-pressed="true"] svg { fill: var(--zee-licht); }
.ikoon-knop .ic { width: 20px; height: 20px; }

.nieuws-raster { display: grid; gap: 16px; align-items: start; }
.nk { background: var(--wit); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rand); }
.nk-foto img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.nk-in { padding: 14px 16px 16px; }
.nk-titel { font-size: 1.12rem; margin: 0 0 6px; }
.nk-groot .nk-titel { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.nk-titel a { color: var(--zee-donker); text-decoration: none; }
.nk-titel a:hover { text-decoration: underline; }
.nk-tekst { color: var(--tekst-zacht); font-size: .95rem; margin: 0; }
.nk-reacties { display: flex; align-items: center; gap: 5px; font-size: .85rem; color: var(--tekst-zacht); margin: 8px 0 0; }
.nk-reacties > span { display: inline-flex; align-items: center; gap: 5px; }
.nk-reacties > span + span { margin-left: 9px; }

.held { background: linear-gradient(160deg, var(--zee) 0%, var(--zee-donker) 100%); color: var(--wit); padding: 32px 0 36px; }
.held-in { display: grid; gap: 22px; align-items: start; }
.held h1 { color: var(--wit); font-size: clamp(2rem, 6vw, 3.1rem); }
.held-intro { color: #d4e6ea; font-size: 1.08rem; max-width: 56ch; }
.snel { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.snel a { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 14px; border-radius: var(--radius-s); background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22); color: var(--wit); text-decoration: none; font-weight: 600; }
.snel a:hover { background: rgba(255, 255, 255, .2); color: var(--wit); }
.held-kaart { background: var(--wit); color: var(--tekst); border-radius: var(--radius); padding: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.held-groet { font: 700 1.4rem var(--font-kop); color: var(--zee-donker); margin-bottom: 4px; }
.dorpkeuze fieldset { border: 0; padding: 0; margin: 0 0 12px; }
.dorpkeuze legend, fieldset legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.dorp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-radio span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--rand); cursor: pointer; font-weight: 600; font-size: .92rem; }
.chip-radio input:checked + span { background: var(--zee); border-color: var(--zee); color: var(--wit); }
.chip-radio input:focus-visible + span { outline: 3px solid var(--zon); outline-offset: 2px; }
.held-stat { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rand); display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; color: var(--tekst-zacht); }
.held-stat strong { color: var(--zee-donker); font-size: 1.05rem; }
.blok-belangrijk { background: #fff7e6; border-bottom: 1px solid #f1d9a6; padding: 18px 0; }
.blok-belangrijk .blokkop .ic { color: var(--zon-donker); }
.belangrijk-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.belangrijk-lijst a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 14px; background: var(--wit); border-radius: var(--radius-s);
  border-left: 4px solid var(--zon); text-decoration: none; color: var(--tekst); }
.bel-titel { font-weight: 700; flex: 1 1 220px; }
.bel-meta { font-size: .82rem; color: var(--tekst-zacht); }
.praat-mee { background: var(--wit); border-radius: var(--radius); border: 1px solid var(--rand); padding: 18px; }
.org-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.org-kaart { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; height: 100%; padding: 14px; background: var(--wit); border: 1px solid var(--rand);
  border-radius: var(--radius); text-decoration: none; color: var(--tekst); }
.org-kaart:hover { border-color: var(--zee); }
.org-kaart img { width: 56px; height: 56px; object-fit: contain; border-radius: var(--radius-s); }
.org-letter { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-s); background: var(--zee-licht); color: var(--zee); font: 700 1.5rem var(--font-kop); }
.org-letter-l { width: 96px; height: 96px; font-size: 2.4rem; }
.org-naam { font-weight: 700; overflow-wrap: anywhere; }
.org-soort { font-size: .85rem; color: var(--tekst-zacht); }

.nk-advertentie { background: #fffaf0; border-color: #f1cf86; }
.nk-bekend .nk-titel { font-size: 1.02rem; overflow-wrap: anywhere; }
.nk-bekend .nk-tekst { overflow-wrap: anywhere; }
.nk-bezwaar { font-weight: 600; color: var(--dijk); margin-top: 4px; }
.nk-meer { margin: 8px 0 0; font-size: .9rem; }
.nk-meer a { display: inline-block; padding: 6px 0; }
.nk-bezwaar a { font-weight: 400; white-space: nowrap; }
.nk-verloop { font-size: .88rem; margin-top: 4px; }
.nk-bk-lijst { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.nk-bk-lijst li { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 8px; border-top: 1px solid var(--rand); }
.nk-bk-lijst li:first-child { border-top: 0; padding-top: 0; }
.nk-bk-lijst a { font-weight: 700; overflow-wrap: anywhere; }
.nk-bk-lijst .hint { font-size: .85rem; overflow-wrap: anywhere; }
.bk-termijn { font-weight: 600; color: var(--dijk); }
.krant-gemeente { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 14px; padding: 10px 14px; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius-s); }
.krant-gemeente > a { font-weight: 700; overflow-wrap: anywhere; min-width: 0; padding: 4px 0; }
.krant-gemeente > .krant-gemeente-meer { font-size: .9rem; font-weight: 400; }
.nk-org { display: inline-block; padding: 6px 0; color: var(--tekst-zacht); overflow-wrap: anywhere; }
.claim-blok { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rand); }
.claim-kop { margin: 0 0 4px; }
.claim-formulier { margin-top: 10px; }
.claim-uitleg { margin-top: 24px; padding: 16px 18px; }
.claim-uitleg-kop { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin: 0 0 6px; }
.claim-uitleg p { margin: 0 0 6px; }
.adv-cijfers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 6px; }
.adv-cijfers div { background: var(--zee-licht); border-radius: var(--radius-s); padding: 10px 12px; }
.adv-cijfers dt { font-size: .85rem; color: var(--tekst-zacht); }
.adv-cijfers dd { margin: 2px 0 0; font: 700 1.4rem var(--font-kop); }
.adv-cijfers dd .klein { font: 400 .8rem var(--font, inherit); color: var(--tekst-zacht); }
.chip-n { font-size: .8em; opacity: .7; }
.org-kaart { min-width: 0; }
.org-soort, .org-naam, .org-kaart .label { overflow-wrap: anywhere; white-space: normal; }
.org-kop > div { min-width: 0; }
.org-kop h1 { overflow-wrap: anywhere; hyphens: auto; }
.org-kop .bk-meta { flex-wrap: wrap; }
.formulier, .velden-rij { grid-template-columns: minmax(0, 1fr); }
.velden-rij input, .velden-rij select { max-width: 100%; }
.claim-blok [hidden] { display: none; }
.claim-code { margin-top: 10px; }
.claim-code-formulier { margin-top: 8px; }
.claim-code-formulier input[name="code"] { max-width: 10em; font-size: 1.2rem; letter-spacing: .2em; }
.open-nu { margin: 0 0 6px; }
.tijden-tabel { border-collapse: collapse; margin: 4px 0 6px; font-size: .92rem; }
.tijden-tabel th, .tijden-tabel td { padding: 2px 12px 2px 0; text-align: left; font-weight: 400; white-space: nowrap; }
.tijden-tabel .is-vandaag th, .tijden-tabel .is-vandaag td { font-weight: 700; }
.tijden-veld .tijden-rij { display: grid; grid-template-columns: minmax(5.5em, auto) minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px 8px; align-items: center; margin-bottom: 6px; }
.tijden-veld .tijden-rij input { width: 100%; min-width: 0; }
.correctie { margin-top: 24px; border: 1px solid var(--rand); border-radius: var(--radius-s); padding: 0 14px; }
.correctie > summary { cursor: pointer; padding: 12px 0; font-weight: 600; min-height: 44px; box-sizing: border-box; }
.correctie[open] > summary { border-bottom: 1px solid var(--rand); margin-bottom: 12px; }
.correctie .formulier { padding-bottom: 14px; }
.correctie .keuzes { border: 0; padding: 0; margin: 0 0 10px; display: grid; gap: 4px; }
.correctie .keuze { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; }
.gids-kaartlink { margin: 14px 0 0; }
.kaart-groep { margin: 0 0 12px; }
.chip-n { margin-left: 5px; }
.adv-cijfers dd .klein { display: block; }

.agenda-lijst { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.ar a { display: flex; gap: 14px; align-items: center; padding: 10px 12px; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius-s); text-decoration: none; color: var(--tekst); }
.ar a:hover { border-color: var(--zee); }
.ar-datum { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 58px; flex: none; border-radius: var(--radius-s); background: var(--zee); color: var(--wit); line-height: 1; }
.ar-dag { font: 700 1.4rem var(--font-kop); }
.ar-maand { font-size: .75rem; text-transform: uppercase; font-weight: 700; margin-top: 3px; }
.ar-in { display: flex; flex-direction: column; min-width: 0; }
.ar-titel { font-weight: 700; overflow-wrap: anywhere; }
.ar-meta, .ar-bron { font-size: .85rem; color: var(--tekst-zacht); }
.maandkop { font-size: 1.15rem; margin-top: 20px; text-transform: capitalize; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px; background: var(--wit); border: 1.5px solid var(--rand);
  text-decoration: none; color: var(--tekst); font-weight: 600; font-size: .92rem; }
.chip:hover { border-color: var(--zee); color: var(--zee); }
.chip[aria-current] { background: var(--zee); border-color: var(--zee); color: var(--wit); }
.feed-wrap { display: grid; gap: 20px; align-items: start; }
.filters { min-width: 0; }
.filter-rij { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.veld { position: relative; display: inline-flex; align-items: center; flex: 1 1 160px; min-width: 0; }
.veld select, .veld input { width: 100%; }
.veld-zoek { flex: 2 1 220px; }
.veld-zoek .ic { position: absolute; left: 12px; color: var(--tekst-zacht); pointer-events: none; }
.veld-zoek input { padding-left: 40px; }
.vinkveld { display: inline-flex; align-items: flex-start; gap: 8px; min-height: 44px; padding: 10px 0; font-size: .95rem; cursor: pointer; }
.vinkveld input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--zee); }
.bladeren { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.zij { display: grid; gap: 16px; }
.zij-blok { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px; }
.voortgang-uitleg { margin: 0 0 10px; padding-left: 20px; }
.vinklijst { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.vinklijst li { position: relative; padding-left: 26px; }
.vinklijst li::before { content: ''; position: absolute; left: 4px; top: .45em; width: 12px; height: 7px; border-left: 2.5px solid var(--dijk); border-bottom: 2.5px solid var(--dijk); transform: rotate(-45deg); }

input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"], select, textarea {
  font: 400 16px/1.4 var(--font); color: var(--tekst); background: var(--wit); border: 1.5px solid var(--rand-veld); border-radius: var(--radius-s);
  padding: 10px 12px; min-height: 46px; width: 100%; max-width: 100%; }
textarea { resize: vertical; min-height: 96px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, select:focus, textarea:focus { border-color: var(--zee); outline: 2px solid var(--zee-licht); outline-offset: 0; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--zee-donker); outline-offset: 0; box-shadow: none; }
[aria-invalid="true"] { border-color: var(--rood) !important; }
input[type="file"] { font: 400 .95rem var(--font); max-width: 100%; min-height: 44px; padding: 8px 0; }
.formulier { display: grid; gap: 14px; }
.formulier fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.veld-blok, .velden-rij label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .95rem; min-width: 0; }
.velden-rij { display: grid; gap: 12px; }
.hint { font-size: .85rem; color: var(--tekst-zacht); font-weight: 400; margin: 0; }
.keuze { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.keuze input { width: 20px; height: 20px; accent-color: var(--zee); flex: none; }
.vinkraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 16px; }
.formulier-melding { background: var(--rood-licht); color: var(--rood); border-radius: var(--radius-s); padding: 10px 14px; margin: 0; }
.formulier-melding.is-goed { background: var(--dijk-licht); color: #2f6a2b; }
.formulier-melding[hidden] { display: none; }
.foto-voorbeeld { max-width: 240px; border-radius: var(--radius-s); margin-top: 8px; }
.foto-voorbeeld[hidden] { display: none; }
.veld-inline { display: inline-flex; align-items: center; gap: 10px; margin-right: 12px; }
.veld-inline select { width: auto; }
.keuze-kop { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin-top: 22px; }
.keuzes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.keuze-kaart { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 12px 16px; background: var(--wit);
  border: 1px solid var(--rand); border-radius: var(--radius-s); text-decoration: none; color: var(--tekst); font-weight: 600; }
.keuze-kaart:hover { border-color: var(--zee); color: var(--zee); }
.bedankt[hidden] { display: none; }

.bericht-detail h1, .artikel h1 { margin-bottom: 10px; }
.wie { display: flex; align-items: center; gap: 10px; color: var(--tekst-zacht); font-size: .95rem; margin-bottom: 18px; }
.feiten { display: grid; gap: 8px; margin: 0 0 18px; padding: 14px 16px; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius-s); }
.feiten div { display: flex; gap: 10px; align-items: flex-start; }
.feiten dt { color: var(--zee); }
.feiten dd { margin: 0; font-weight: 600; }
.bericht-foto { margin: 0 0 18px; }
.bericht-foto img { width: 100%; height: auto; border-radius: var(--radius); }
.lees { font-size: 1.06rem; overflow-wrap: break-word; }
.lees img { border-radius: var(--radius-s); }
.inleiding { font-size: 1.15rem; font-weight: 500; }
.actiebalk { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; padding: 14px 0; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.actiebalk .tel { font-weight: 700; }
.deel[open] { flex-basis: 100%; }
.deel > summary { list-style: none; cursor: pointer; }
.deel > summary::-webkit-details-marker { display: none; }
.deel[open] > summary { background: var(--zee-licht); border-color: var(--zee); }
.deel-menu { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; background: var(--wit);
  border: 1px solid var(--rand); border-radius: var(--radius-s); }
.deel-menu a, .deel-menu button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--rand); border-radius: 999px; background: var(--wit); color: var(--zee); font: 600 .92rem var(--font);
  text-decoration: none; cursor: pointer; }
.deel-menu a:hover, .deel-menu button:hover { background: var(--zee-licht); border-color: var(--zee); }
.deel-menu svg { width: 18px; height: 18px; flex: none; }
.reactie-wacht { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #fff3d6; color: #6b4b00;
  font-size: .78rem; font-weight: 700; white-space: nowrap; }
.aanmelden, .eigen, .moderatie { margin-top: 10px; }
.aanmelden h2, .eigen h2 { font-size: 1.15rem; }
.namen { margin: 0; padding-left: 20px; columns: 2 160px; }
.voortgang-blok { background: #f3f0fa; border-radius: var(--radius-s); padding: 12px 14px; margin-bottom: 16px; }
.voortgang-blok p { margin: 6px 0 0; }
.reacties { margin-top: 28px; }
.reactielijst { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.reactie { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius-s); padding: 12px 14px 4px; }
.reactie.is-verborgen { opacity: .55; border-style: dashed; }
.reactie-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.reactie-tekst p { margin-bottom: .5em; overflow-wrap: anywhere; }
.reactie-acties { display: flex; gap: 6px; margin: 0; }
.reactie-acties .knop-tekst { font-size: .82rem; }
.reageer { display: grid; gap: 8px; }
.reageer label { font-weight: 700; }
.reageer .knop { justify-self: start; }
.inlog-oproep { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.reactie-bevestig { background: var(--zee-licht); border: 1px solid var(--zee); border-radius: var(--radius-s); padding: 14px 16px; margin-bottom: 16px; }
.reactie-bevestig p { margin: 0 0 10px; }
.reacties-dicht { display: flex; align-items: center; gap: 8px; color: var(--tekst-zacht); background: var(--zand); border-radius: var(--radius-s); padding: 12px 14px; }
.reacties-dicht svg { flex: none; }
.reacties-mod { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; }
.reactie-antwoord { margin-left: 12px; border-left: 3px solid var(--zee-licht); }
.reactie-aan { margin: -2px 0 4px; color: var(--tekst-zacht); }
.reactie-acties { flex-wrap: wrap; }
.reactie-acties[hidden] { display: none; }
.reactie-duim { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.reactie-duim[aria-pressed="true"] { color: var(--zee); }
.reactie-duim[aria-pressed="true"] svg { fill: var(--zee-licht); }
.reactie-bewerk { margin: 4px 0 10px; }
.reactie-bewerk-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.antwoord-op { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; background: var(--zee-licht); border-radius: var(--radius-s); padding: 2px 4px 2px 12px; }
.antwoord-op[hidden] { display: none; }
.reacties-eerder { margin-bottom: 12px; }
.reacties-eerder > summary { list-style: none; cursor: pointer; margin-bottom: 12px; }
.reacties-eerder > summary::-webkit-details-marker { display: none; }
.reacties-eerder[open] > summary { display: none; }
@media (min-width: 600px) { .reactie-antwoord { margin-left: 24px; } }
.besproken { margin-top: 22px; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px 18px 8px; }
.besproken-kop { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 6px; }
.besproken-lijst { list-style: none; counter-reset: besproken; margin: 0; padding: 0; }
.besproken-lijst li { counter-increment: besproken; border-top: 1px solid var(--rand); }
.besproken-lijst li:first-child { border-top: 0; }
.besproken-lijst a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; min-height: 44px; padding: 10px 0; text-decoration: none; color: var(--tekst); }
.besproken-lijst a::before { content: counter(besproken); font: 700 1.1rem var(--font-kop); color: var(--zee); min-width: 1.2em; }
.besproken-titel { font-weight: 600; overflow-wrap: anywhere; }
.besproken-lijst .klein { grid-column: 2; white-space: nowrap; color: var(--tekst-zacht); }
@media (min-width: 600px) {
  .besproken-lijst a { grid-template-columns: auto minmax(0, 1fr) auto; }
  .besproken-lijst .klein { grid-column: auto; }
}
.buren { display: grid; gap: 10px; margin: 18px 0; }
.buren a { display: flex; flex-direction: column; padding: 12px 14px; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius-s); text-decoration: none; font-weight: 600; }
.uitleg-bron { margin-top: 24px; font-size: .9rem; color: var(--tekst-zacht); }
.org-kop { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.org-kop img { width: 96px; height: 96px; object-fit: contain; border-radius: var(--radius-s); background: var(--wit); }
.contact { margin: 0 0 12px; display: grid; gap: 10px; }
.contact div { display: flex; gap: 10px; align-items: flex-start; }
.contact dt { color: var(--zee); }
.contact dd { margin: 0; overflow-wrap: anywhere; }

.profiel-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; }
.profiel-kop h1 { margin: 0; }
.profiel-kop > a { margin-left: auto; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; margin-bottom: 10px; border-bottom: 1px solid var(--rand); scrollbar-width: thin; }
.tabs a { white-space: nowrap; padding: 8px 14px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 999px; text-decoration: none; font-weight: 600; background: var(--wit); border: 1px solid var(--rand); }
.profiel-deel { padding: 18px 0; border-bottom: 1px solid var(--rand); scroll-margin-top: 80px; }
.meldingen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.meldingen a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--wit); border-radius: var(--radius-s); text-decoration: none; color: var(--tekst); border: 1px solid var(--rand); }
.meldingen a span:nth-child(2) { flex: 1; min-width: 0; }
.meldingen .is-nieuw a { border-left: 4px solid var(--zon); font-weight: 600; }
.lijst-simpel { padding-left: 20px; }
.lijst-simpel li { margin-bottom: 8px; }

.gesprekken { display: grid; gap: 20px; align-items: start; }
.gesprek-lijst ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gesprek-lijst a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius-s); text-decoration: none; color: var(--tekst); }
.gesprek-lijst a[aria-current] { border-color: var(--zee); background: var(--zee-licht); }
.gesprek-lijst a.is-nieuw .gl-naam { font-weight: 800; }
.gl-in { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gl-naam { font-weight: 600; }
.gl-over, .gl-laatste { font-size: .85rem; color: var(--tekst-zacht); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gesprekken.is-open .gesprek-lijst { display: none; }
.bubbels { list-style: none; margin: 0 0 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); max-height: 60vh; overflow-y: auto; }
.bubbel { max-width: 85%; align-self: flex-start; }
.bubbel > div { background: var(--zee-licht); border-radius: 14px 14px 14px 4px; padding: 8px 12px; }
.bubbel > div p { margin: 0; overflow-wrap: anywhere; }
.bubbel-mijn { align-self: flex-end; text-align: right; }
.bubbel-mijn > div { background: var(--zee); color: var(--wit); border-radius: 14px 14px 4px 14px; text-align: left; }
.gesprek-form { display: flex; gap: 8px; align-items: flex-end; }
.gesprek-form textarea { min-height: 50px; }

.pijlers { list-style: none; margin: 24px 0; padding: 0; display: grid; gap: 12px; }
.pijlers li { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); padding: 16px; }
.pijlers .ic { color: var(--zee); width: 28px; height: 28px; margin-bottom: 6px; }
.pijlers h2 { font-size: 1.1rem; margin-bottom: 4px; }
.pijlers p { margin: 0; color: var(--tekst-zacht); }
.regels li { margin-bottom: 10px; }
.tabel { width: 100%; border-collapse: collapse; font-size: .92rem; display: block; overflow-x: auto; }
.tabel th, .tabel td { text-align: left; vertical-align: top; padding: 10px; border-bottom: 1px solid var(--rand); min-width: 140px; }
.tabel th { background: var(--zee-licht); }

.dialoog { border: 0; border-radius: var(--radius); padding: 20px; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.dialoog::backdrop { background: rgba(8, 49, 60, .5); }
.dialoog form { display: grid; gap: 10px; }
.dialoog fieldset { border: 0; padding: 0; margin: 0; }
.dialoog h2 { font-size: 1.3rem; }
.dialoog-vraag { font-weight: 600; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--onderbalk) + 16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  background: var(--zee-donker); color: var(--wit); padding: 12px 18px; border-radius: var(--radius-s); max-width: calc(100vw - 32px); box-shadow: var(--schaduw); }
.toast[hidden] { display: none; }

.handig { padding: 14px 0 4px; }
.handig-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.handig-lijst a { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; background: var(--wit); border: 1px solid var(--rand);
  border-radius: var(--radius-s); color: var(--zee-donker); font-weight: 700; text-decoration: none; }
.handig-lijst a:hover { border-color: var(--zee); }
.handig-lijst .ic { flex: none; width: 24px; height: 24px; color: var(--zee); }
.handig-lijst span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.handig-lijst small { font-weight: 400; font-size: .82rem; color: var(--tekst-zacht); }
@media (min-width: 760px) { .handig-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .handig-lijst { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.voet { background: var(--zee-donker); color: #c7dbe0; padding: 32px 0 20px; margin-top: 24px; }
.voet a { color: var(--wit); }
.voet-in { display: grid; gap: 24px; }
.voet-naam { font: 700 1.3rem var(--font-kop); color: var(--wit); margin-bottom: 6px; }
.voet-kop { font-weight: 700; color: var(--wit); margin-bottom: 6px; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li a { display: inline-flex; min-height: 40px; align-items: center; text-decoration: none; }
.voet li a:hover { text-decoration: underline; }
.voet-sociaal { display: flex; gap: 8px; }
.voet-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.voet-merk { grid-column: 1 / -1; }
.voet-kolom { min-width: 0; }
.voet-kolom li a { overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 760px) { .voet-in { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .voet-in { grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr)); } .voet-merk { grid-column: auto; } }
.voet-sociaal a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.voet-klein { font-size: .82rem; margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .15); }

.peiling { --peiling-accent: var(--zee); --peiling-accent-tekst: var(--wit); --peiling-rand: var(--rand); --peiling-vlak: var(--zand); --peiling-balk: var(--zon); --peiling-radius: var(--radius-s); }

@media (min-width: 600px) {
  .wrap { padding: 0 24px; }
  .merk-onder { display: block; max-width: 34ch; }
  .kaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kaarten-lijst { grid-template-columns: 1fr; }
  .nieuws-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nk-groot { grid-column: 1 / -1; }
  .org-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .snel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .velden-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pijlers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .buren { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabel { display: table; }
  .kop-plaatsen { display: inline-flex; }
  .kop-login span { display: inline; }
  .kop-login { padding: 0 12px; }
  .blok { padding: 36px 0; }
}

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .onderbalk { display: none; }
  .toast { bottom: 24px; }
  .menuknop { display: none; }
  .hoofdmenu { display: block; border-top: 1px solid var(--rand); }
  .hoofdmenu ul { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 24px; }
  .hoofdmenu a { min-height: 42px; }
  .hoofdmenu .menu-rest { display: none; }
  .menu-meer { display: block; position: relative; }
  .menu-meer summary { display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 12px; border-radius: var(--radius-s); font-weight: 600; color: var(--tekst); cursor: pointer; list-style: none; }
  .menu-meer summary::-webkit-details-marker { display: none; }
  .menu-meer summary:hover, .menu-meer details[open] summary { background: var(--zee-licht); }
  .menu-meer summary.is-actief { color: var(--zee); background: var(--zee-licht); }
  .menu-meer-pijl { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .menu-meer details[open] .menu-meer-pijl { transform: translateY(2px) rotate(-135deg); }
  .hoofdmenu .menu-meer-lijst { position: absolute; right: 0; top: calc(100% + 4px); z-index: 60; display: grid; gap: 2px; min-width: 15rem; max-height: min(70vh, 32rem); overflow-y: auto; padding: 8px;
    background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(0, 0, 0, .12); }
  .menu-meer-kop { margin: 8px 4px 0; padding: 4px 8px 0; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-zacht); }
  .menu-meer-lijst > .menu-meer-kop:first-child { margin-top: 0; }
  .kop-ik-naam { display: inline; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kop-ik { padding: 0 10px 0 4px; }
  .held { padding: 48px 0 52px; }
  .held-in { grid-template-columns: 1.4fr 1fr; gap: 40px; }
  .twee { grid-template-columns: 1.6fr 1fr; gap: 32px; }
  .twee-smal { grid-template-columns: 1.5fr 1fr; gap: 28px; }
  .wrap.smal.twee-smal { max-width: 1040px; }
  .kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kaarten-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nieuws-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nieuws-raster .nk-groot { grid-column: span 2; grid-row: span 2; }
  .nieuws-raster-3 .nk-groot { grid-column: span 2; grid-row: auto; }
  .org-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .org-raster-groot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feed-wrap { grid-template-columns: minmax(0, 1fr) 300px; }
  .feed-wrap .filters { grid-column: 1 / -1; }
  .feed-wrap > .feed:only-of-type { grid-column: 1 / -1; }
  .feed-wrap:not(:has(.zij)) .feed { grid-column: 1 / -1; }
  .feed-wrap:not(:has(.zij)) .kaarten-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zij { position: sticky; top: 130px; }
  .belangrijk-lijst { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .gesprekken { grid-template-columns: 340px minmax(0, 1fr); }
  .gesprekken.is-open .gesprek-lijst { display: block; }
  .terug-mobiel { display: none; }
  .pijlers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.rk-kaart .kaart-venster { height: clamp(20rem, 60vw, 32rem); }
.rk-kaart-teken .kaart-venster { height: clamp(22rem, 70vh, 36rem); cursor: crosshair; }
@media (max-width: 640px) {
  .rk-kaart .kaart-venster { height: 62vh; min-height: 18rem; }
  .rk-kaart-teken .kaart-venster { height: 66vh; }
}
.rk-tip { margin: 8px 0 18px; }
.rk-eigen { margin-bottom: 18px; }
.rk-eigen p, .rk-eigen ul { margin: 0 0 6px; }
.rk-lijst { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
@media (min-width: 760px) { .rk-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rk-link { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 14px 16px; background: var(--wit);
  border: 1px solid var(--rand); border-radius: var(--radius); color: var(--tekst); text-decoration: none; height: 100%; box-sizing: border-box; }
.rk-link:hover { border-color: var(--zee); }
.rk-groep { margin: 4px 0 8px; }
.rk-groep h2 { font-size: 1.35rem; margin: 0 0 10px; }
.rk-icoon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #efe4f2; color: #7b2d8e; }
.rk-icoon-lopen { background: #e5f4ea; color: #1d7a46; }
.rk-icoon .ic { width: 24px; height: 24px; }
.rk-tekst { display: grid; gap: 2px; min-width: 0; }
.rk-tekst strong { color: var(--zee-donker); overflow-wrap: anywhere; }
.rk-tekst small { color: var(--tekst-zacht); }
.rk-kort { font-size: .92rem; color: var(--tekst-zacht); overflow-wrap: anywhere; }
.rk-bron, .rk-bronvermelding { margin-top: 12px; }
.rk-feiten { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rk-feiten div { flex-direction: column; gap: 0; }
.rk-detail .wrap + .wrap { margin-top: 14px; }
.rk-acties { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; }
.rk-fotos h2, .rk-upload h2 { display: flex; align-items: center; gap: 8px; font-size: 1.35rem; }
.rk-galerij { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.rk-foto { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; scroll-margin-top: 90px; }
.rk-foto:target { outline: 3px solid var(--zon); }
.rk-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.rk-foto p { margin: 0; padding: 10px 12px; font-size: .95rem; overflow-wrap: anywhere; }
.rk-meld { border: 0; background: none; padding: 6px 0; min-height: 32px; color: var(--tekst-zacht); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.rk-upload { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); padding: 18px; margin-bottom: 24px; }
.rk-upload .formulier, .rk-velden { grid-template-columns: minmax(0, 1fr); }
.rk-upload input[type="file"], .rk-gpx input[type="file"] { min-height: 44px; width: 100%; max-width: 100%; box-sizing: border-box; }
@media (max-width: 640px) { .rk-upload { padding: 14px; } }
.rk-plek { display: grid; gap: 8px; }
.rk-plek legend { font-weight: 600; font-size: .95rem; margin-bottom: 4px; }
.rk-plek .knop { justify-self: start; }
.rk-plek-gekozen { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; color: var(--dijk); }
.rk-plek-gekozen[hidden] { display: none; }
.rk-plek-gekozen .ic { width: 18px; height: 18px; }
.rk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.rk-tabs .knop[aria-pressed="true"] { background: var(--zee); border-color: var(--zee); color: var(--wit); }
.rk-gpx[hidden] { display: none; }
.rk-tekenbalk { margin-top: 10px; padding: 12px 14px;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schaduw); display: grid; gap: 8px; }
.rk-tekenbalk p { margin: 0; }
.rk-stand strong { font-size: 1.15rem; color: var(--zee-donker); }
.rk-velden { margin-top: 18px; }
.rk-sterren { border: 0; margin: 0 0 12px; padding: 0; }
.rk-sterren legend { font-weight: 600; margin-bottom: 6px; }
.rk-sterren-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-ster { position: relative; }
.rk-ster input { position: absolute; opacity: 0; width: 44px; height: 44px; margin: 0; cursor: pointer; }
.rk-ster > span { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 8px; border: 1px solid var(--rand); border-radius: 10px; background: var(--wit); font-weight: 700; }
.rk-ster input:focus-visible + span { outline: 3px solid var(--zon); outline-offset: 2px; }
.rk-ster input:checked + span { background: #7b2d8e; border-color: #7b2d8e; color: #fff; }
.rk-sterren.lopen .rk-ster input:checked + span { background: #1d7a46; border-color: #1d7a46; }
.rk-schets-blok { margin: 0 0 18px; }
.rk-schets { display: block; width: 100%; height: auto; background: #f4f7f4; border: 1px solid var(--rand); border-radius: var(--radius); }
.rk-schets polyline { stroke: #7b2d8e; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.rk-schets.lopen polyline { stroke: #1d7a46; }
.rk-schets .begin { fill: #1d7a46; }
.rk-schets .eind { fill: #b42318; }

.soort-klusjes { color: #8a4b12; }
.bk-prijs-label { font-weight: 600; font-size: .82em; color: var(--tekst-zacht); }
.blok-klus-uitleg { padding: 4px 0 8px; }
.klus-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: klus; }
.klus-stappen li { counter-increment: klus; position: relative; display: grid; gap: 4px; padding: 14px 16px 14px 60px;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius-s); min-width: 0; }
.klus-stappen li::before { content: counter(klus); position: absolute; left: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--zon); color: var(--zee-donker); font-weight: 800; }
.klus-stappen strong { color: var(--zee-donker); }
.klus-stappen span { font-size: .92rem; color: var(--tekst-zacht); }
.klus-tip { margin: 0 0 14px; }
@media (min-width: 760px) { .klus-stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.formulier .ob-stap { padding: 18px; margin: 0; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); display: grid; gap: 14px; min-width: 0; }
.formulier .ob-stap > legend { display: flex; align-items: center; gap: 10px; float: left; width: 100%; margin: 0 0 4px; padding: 0; font-family: var(--font-kop); font-size: 1.25rem; font-weight: 600; }
.formulier .ob-stap > legend + * { clear: both; }
.ob-nr { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--zee-licht); color: var(--zee-donker); font: 700 .95rem var(--font); flex: none; }
.ob-tegels { display: grid; gap: 10px; }
.ob-tegel { position: relative; display: grid; gap: 4px; padding: 14px 16px 14px 48px; min-height: 64px; background: var(--zand); border: 2px solid var(--rand); border-radius: var(--radius-s); cursor: pointer; }
.ob-tegel input { position: absolute; left: 16px; top: 17px; width: 20px; height: 20px; margin: 0; accent-color: var(--zee); }
.ob-tegel:has(input:checked) { border-color: var(--zee); background: var(--zee-licht); }
.ob-tegel:has(input:focus-visible) { outline: 3px solid var(--zee-donker); outline-offset: 2px; box-shadow: 0 0 0 5px var(--zon); }
.ob-tegel-titel { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.ob-tegel-titel .ic { width: 20px; height: 20px; }
.ob-tegel-uitleg { font-size: .9rem; color: var(--tekst-zacht); }
.ob-paneel { display: grid; gap: 14px; }
.ob-paneel[hidden], .ob-paginas[hidden], .ob-voorbeeld[hidden], .ob-klaar[hidden] { display: none; }
.ob-paneel input[type="file"] { min-height: 44px; }
.ob-ontwerpen { display: grid; gap: 2px; }
.ob-paginas p { margin: 0 0 6px; }
.ob-paginas-lijst { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.ob-pagina { flex: none; display: grid; gap: 4px; justify-items: center; width: 104px; min-height: 44px; padding: 6px; background: var(--wit); border: 2px solid var(--rand); border-radius: var(--radius-s); font: 600 .8rem var(--font); color: var(--tekst); cursor: pointer; }
.ob-pagina canvas { width: 88px; height: auto; border: 1px solid var(--rand); background: var(--wit); }
.ob-pagina[aria-pressed="true"] { border-color: var(--zee); background: var(--zee-licht); }
.ob-pagina:focus-visible { outline: 3px solid var(--zee-donker); outline-offset: 2px; box-shadow: 0 0 0 5px var(--zon); }
.ob-voorbeeld { margin: 0; display: grid; gap: 6px; justify-items: center; }
.ob-voorbeeld canvas { display: block; width: 100%; max-width: 380px; height: auto; border: 1px solid var(--rand); border-radius: var(--radius-s); box-shadow: var(--schaduw); background: var(--wit); }
.ob-klaar { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); padding: 22px; }
.ob-klaar:focus { outline: none; }
.ob-klaar h2 { margin-top: 0; }
.ob-formulier { gap: 18px; }

.label-memoriam { background: #e6e3de; color: #3d4447; }
.nk-memoriam .nk-foto img { object-fit: contain; background: #eceae5; }
.bericht-foto-kaart { max-width: 560px; margin-left: auto; margin-right: auto; }
.bericht-foto-kaart img { border: 1px solid var(--rand); }
.ob-oproep { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 22px 0 0; padding: 14px 16px; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); }
.ob-oproep p { margin: 0; flex: 1 1 260px; }
.ob-home { padding: 18px 0; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); background: var(--wit); }
.ob-home-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.ob-home-kop { margin: 0; font-size: 1.05rem; letter-spacing: .02em; }
.ob-home-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; flex: 1 1 260px; }
.ob-home-lijst a { font-weight: 600; }
.sport-home { background: var(--zand); border-top: 0; }
.sport-home .ob-home-kop { display: inline-flex; align-items: center; gap: 6px; }
.sport-kort a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 40px; }
.sport-kort .sk-uit { font-weight: 600; font-size: .85rem; padding: 2px 8px; border-radius: var(--radius-s); background: var(--zee-licht); color: var(--zee-donker); font-variant-numeric: tabular-nums; }
.sport-kort .sk-uit.is-score { background: var(--zee); color: var(--wit); }
.ob-home-leeg { margin: 0; flex: 1 1 260px; }
.ob-home-links { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ob-afscheid { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; }
.ob-afscheid legend { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: 6px; }
.ob-kaarsje.is-aan { background: #fff6e0; border-color: var(--zon); }
.ob-kaarsje svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.ob-kaarsje.is-aan svg path { fill: var(--zon); stroke: var(--zon-donker); }
.ob-condoleance .velden-rij { margin-bottom: 4px; }
.ob-jaar { font-family: var(--font-kop); margin: 28px 0 12px; }
.ob-jaar:first-child { margin-top: 0; }
.ob-register-feiten { color: var(--tekst-zacht); }
.ob-register-lijst .reactie.is-verborgen { opacity: 1; background: var(--zand); }
.ob-verborgen-label { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--rand); color: var(--tekst); font-size: .8rem; font-weight: 600; }
.ob-verborgen-label[hidden] { display: none; }
.ob-extra { display: grid; gap: 10px; margin: 18px 0 0; padding: 14px 16px; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); }
.ob-extra-rij { display: flex; align-items: flex-start; gap: 10px; margin: 0; overflow-wrap: anywhere; }
.ob-extra-rij .ic { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--zee); }
.ob-extra-rij a { display: inline-flex; align-items: center; min-height: 44px; }
.ob-dank { margin: 22px 0 0; padding: 16px 18px; background: var(--zand); border-radius: var(--radius); }
.ob-dank h2 { margin: 0 0 6px; font-size: 1.15rem; }
.ob-dank .klein { margin: 6px 0 0; }
.ob-cond-foto { display: inline-block; margin: 8px 0 0; }
.ob-cond-foto img, .ob-cond-foto-reg { display: block; max-width: min(320px, 100%); height: auto; border-radius: var(--radius-s); border: 1px solid var(--rand); }
.ob-cond-foto-reg { margin: 8px 0 0; }
.ob-cond-foto-veld { display: grid; gap: 4px; min-width: 0; }
.ob-cond-foto-veld input { min-width: 0; width: 100%; }
.ob-register-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.ob-dank-schrijven { margin: 28px 0 18px; }
.ob-dank-schrijven .formulier { gap: 10px; }
.nk-meeleven { color: var(--tekst-zacht); }
.ob-home-herdenking { display: flex; align-items: flex-start; gap: 8px; margin: 0; flex: 1 1 100%; }
.ob-home-herdenking .ic { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--zee); }
.ob-ai { display: grid; gap: 6px; padding: 12px 14px; background: var(--zee-licht); border-radius: var(--radius-s); }
.ob-ai[hidden] { display: none; }
.ob-push { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px 30px; }
.ob-push[hidden] { display: none; }
.ob-fotos { margin: 22px 0 0; }
.ob-fotos h2 { margin: 0 0 10px; font-size: 1.15rem; }
.ob-fotos-lijst { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 10px; }
.ob-fotos-lijst li { display: grid; gap: 4px; align-content: start; min-width: 0; }
.ob-fotos-lijst img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--rand); background: var(--zand); }
.ob-fotos-lijst .klein { overflow-wrap: anywhere; }
.ob-foto-wacht { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 8px; text-align: center; border: 1px dashed var(--rand); border-radius: var(--radius-s); color: var(--tekst-zacht); font-size: .9rem; }
.ob-fotos-beheer .knop-tekst { justify-self: start; min-height: 44px; }
.ob-ai .hint, .ob-ai p { margin: 0; }
.ob-namen { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.ob-naam { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; padding: 12px; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); }
.ob-naam-kaart { flex: none; width: 76px; }
.ob-naam-kaart img { display: block; width: 76px; height: 95px; object-fit: contain; background: #eceae5; border-radius: 4px; }
.ob-naam-in { display: grid; align-content: start; gap: 6px; min-width: 0; }
.ob-naam-kop { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.ob-naam-kop a { text-decoration: none; color: var(--tekst); }
.ob-naam-kop a:hover { text-decoration: underline; }
.ob-naam .klein { margin: 0; }
.ob-naam .ob-kaarsje { grid-column: 1 / -1; justify-self: start; white-space: nowrap; }
.ob-naam-in:first-child { grid-column: 1 / -1; }
@media print {
  .kop, .voet, .onderbalk, .skiplink, .toast, .ob-print-weg { display: none !important; }
  .ob-register-lijst .reactie.is-verborgen { display: none; }
  body { background: #fff; padding-bottom: 0; }
  .ob-register .bericht-foto-kaart { max-width: 9cm; }
  .ob-register-lijst .reactie { break-inside: avoid; }
}

@media (min-width: 600px) {
  .ob-tegels { grid-template-columns: 1fr 1fr; }
  .formulier .ob-stap { padding: 22px 24px; }
}

.fa-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.fa-tegel { display: flex; flex-direction: column; min-width: 0; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; color: var(--tekst); text-decoration: none; height: 100%; }
.fa-tegel:hover { border-color: var(--zee); }
.fa-tegel img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--zand); }
.fa-tegel span { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-width: 0; }
.fa-tegel strong { overflow-wrap: anywhere; }
.fa-tegel small { color: var(--tekst-zacht); font-weight: 400; }
.fa-foto { margin: 0 0 16px; }
.fa-foto img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--zand); }
.fa-bron { margin: 0 0 18px; color: var(--tekst-zacht); overflow-wrap: anywhere; }
.fa-upload { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); padding: 18px; margin: 0 0 22px; }
.fa-upload h2 { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; margin-top: 0; }
.fa-eigen { margin: 0 0 18px; }
.melding-ok { background: var(--dijk-licht); }
.klus-leeftijd { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.klus-leeftijd legend { font-weight: 600; margin-bottom: 4px; }
.keuzes-radio { border: 0; padding: 0; margin: 0 0 8px; display: grid; }
.keuzes-radio legend { font-weight: 600; margin-bottom: 2px; }
.keuzes-radio .vinkveld { padding: 6px 0; min-height: 40px; }
.ouder-status { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius-s); background: var(--zee-licht); font-weight: 600; }
.ouder-status-akkoord { background: var(--dijk-licht); }
.ouder-status-geweigerd, .ouder-status-ingetrokken { background: var(--rood-licht); }
.ouder-bericht { margin: 16px 0; }
.ouder-keuze { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.ouder-keuze .formulier-melding { flex-basis: 100%; }
.ouder-contacten { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.ouder-contacten li { padding: 10px 14px; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius-s); overflow-wrap: anywhere; }
.ouder-contacten .klein { display: block; color: var(--tekst-zacht); }
.label-klus { background: var(--dijk-licht); color: var(--dijk); }
.label-klus-vast { background: #f4ecd9; color: #6b5313; }
.klus-acties { margin: 0 0 20px; }
.klus-acties p:last-child { margin-bottom: 0; }
.klus-bedankjes { margin: 0 0 20px; display: grid; gap: 10px; }
.klus-bedankjes blockquote { margin: 0; padding: 12px 16px; background: var(--wit); border-left: 4px solid var(--zon); border-radius: var(--radius-s); }
.klus-bedankjes blockquote p { margin: 0 0 4px; }
.klus-bedankjes footer { font-size: .85rem; color: var(--tekst-zacht); }
.ouder-melden { margin-top: 8px; }
.ouder-melden summary { cursor: pointer; font-size: .9rem; color: var(--rood); min-height: 32px; display: inline-flex; align-items: center; }
.uren-totaal { font-size: 1.1rem; padding: 12px 16px; background: var(--zee-licht); border-radius: var(--radius-s); }
.flyer { max-width: 760px; margin: 0 auto 40px; padding: 32px 24px; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--radius); }
.flyer-boven { margin: 0; font-weight: 700; color: var(--zee); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.flyer-titel { font-size: clamp(2rem, 8vw, 3.4rem); margin: 6px 0 4px; }
.flyer-sub { font-size: 1.3rem; margin: 0 0 18px; }
.flyer-klussen { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.flyer-klussen li { padding: 10px 14px; background: var(--zand); border-radius: var(--radius-s); font-weight: 600; font-size: 1.1rem; }
.flyer-onder { display: grid; gap: 20px; }
.flyer-hoe h2 { margin-top: 0; }
.flyer-hoe ol { padding-left: 1.2em; font-size: 1.1rem; }
.flyer-klein { font-size: .9rem; color: var(--tekst-zacht); }
.flyer-qr { text-align: center; }
.flyer-qr svg { width: 180px; height: 180px; }
.flyer-qr p { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
@media (min-width: 640px) { .flyer-onder { grid-template-columns: 1fr 240px; align-items: start; } }
@media print {
  .kop, .voet, .onderbalk, .geen-print, .skiplink, .toast { display: none !important; }
  body { background: #fff; }
  .flyer { border: 0; max-width: none; margin: 0; padding: 0; font-size: 1.25rem; }
  .flyer-titel { font-size: 4rem; }
  .flyer-sub { font-size: 1.7rem; margin-bottom: 28px; }
  .flyer-klussen { gap: 12px; margin-bottom: 36px; }
  .flyer-klussen li { font-size: 1.35rem; padding: 16px 18px; }
  .flyer-hoe ol { font-size: 1.3rem; }
  .flyer-onder { grid-template-columns: 1fr 260px; }
  .flyer-qr svg { width: 240px; height: 240px; }
}


.label-voorbeeld { background: var(--paars); color: var(--wit); }
.bk.is-voorbeeld, .nk.is-voorbeeld { border: 1px dashed var(--paars); }
.ikoon-knop.is-stil, .ikoon-knop.is-stil:hover { cursor: default; background: none; color: var(--tekst-zacht); }
.ar-titel .label-voorbeeld { margin-left: 6px; vertical-align: 1px; }
.melding-voorbeeld { background: #efebf7; border-left: 4px solid var(--paars); }
.melding-voorbeeld p { margin: 0 0 10px; max-width: 70ch; }
.melding-voorbeeld p:last-child { margin-bottom: 0; }
.voorbeeld-uitleg { font-size: .9rem; color: var(--tekst-zacht); margin: 0 0 12px; }
.voorbeeld-uitleg .label { vertical-align: 1px; }