/*
Theme Name: BOL Laakkwartier-Noord
Theme URI: https://bollaaknoord.nl
Author: Bewonersorganisatie Laakkwartier-Noord
Description: Maatwerkthema voor Bewonersorganisatie Laakkwartier-Noord (BOL) in Den Haag. Eén gedeelde header, footer en stylesheet voor de hele site, met agenda, nieuws, prikbord en vrijwilligers.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bol
Tags: bewonersorganisatie, wijk, den-haag, agenda, nieuws
*/

/* ==========================================================================
   BOL Laakkwartier-Noord — hoofdstylesheet
   Dit is de ENIGE stylesheet van de site. Alles wat er op elke pagina
   hetzelfde uit hoort te zien, staat hier één keer gedefinieerd.
   ========================================================================== */

/* ── 1. ONTWERPTOKENS — kleuren, radius, schaduw ──────────────────────────────────── */
:root{--g:#3d7a1e;--gdk:#2c5c15;--glt:#edf7e6;--glt2:#d6efca;--glt3:#f5faf2;--zw:#111111;--txt:#1a1a1a;--grijs:#5a5a5a;--gdis:#63705f;--grijslt:#f6f6f6;--rand:#e5e5e5;--wit:#ffffff;--rad:10px;--sh:0 2px 12px rgba(0,0,0,.07)}

/* ── 2. RESET & BASISTYPOGRAFIE ──────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Verborgen is verborgen. Zonder deze regel wint een eigen display-waarde
   (bijvoorbeeld display:flex op een formulier) van het hidden-attribuut,
   waardoor iets dat dicht hoort te staan gewoon open op het scherm blijft. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:#fff!important}
body{font-family:'Nunito',sans-serif;color:var(--txt);background:#ffffff!important;line-height:1.6;-webkit-font-smoothing:antialiased;color-scheme:light only}
h1,h2,h3,h4{line-height:1.25;color:var(--zw);font-weight:800;background:transparent}
h1{font-size:clamp(26px,6vw,46px)}
h2{font-size:clamp(20px,4vw,34px)}
h3{font-size:clamp(16px,3vw,20px)}
p{color:var(--grijs);line-height:1.7;background:transparent}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}

/* ── 3. LAYOUT — centrale contentbreedte ──────────────────────────────────── */
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 20px}

/* ── 4. HEADER & NAVIGATIE ──────────────────────────────────── */
.hdr .wrap{padding-left:16px;padding-right:16px}
.hdr{background:#fff!important;border-bottom:3px solid var(--g);position:sticky;top:0;z-index:999;box-shadow:0 2px 8px rgba(0,0,0,.07)}
.hdr-inner{display:flex;align-items:center;justify-content:space-between;height:104px;padding-left:0;gap:12px;background:#fff!important}
/* min-width:0 zorgt dat de naam naast het logo inkrimpt als de ruimte krap
   wordt, in plaats van het menu uit de header te duwen. */
.logo{display:flex;align-items:center;gap:10px;flex-shrink:1;min-width:0}
.logo-text{min-width:0;overflow:hidden}
.logo img{height:92px;width:auto;flex-shrink:0}
.logo-text{display:flex;flex-direction:column;line-height:1.3}
.logo-r1{font-size:12px;font-weight:800;color:var(--g);display:block}
.logo-r2{font-size:12px;font-weight:800;color:var(--g);display:block}
.logo-r3{font-size:11px;color:var(--grijs);font-weight:500;display:block;margin-top:1px}
.nav-desk{display:none}
.ham{background:#ffffff!important;border:2px solid var(--rand);border-radius:8px;padding:9px 11px;cursor:pointer;display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.ham span{display:block;width:20px;height:2px;background:#111;border-radius:2px;transition:all .25s}
.ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-nav{display:none;background:#ffffff!important;border-top:1px solid var(--rand);padding:12px 20px 20px}
.mob-nav.open{display:block}
.mob-nav a{display:flex;align-items:center;padding:13px 16px;font-size:16px;font-weight:700;color:#111!important;border-radius:8px;margin-bottom:4px;transition:background .15s}
.mob-nav a:hover,.mob-nav a.actief{background:var(--glt);color:var(--g)!important}
.mob-nav .cta{background:var(--g)!important;color:#fff!important;margin-top:8px;justify-content:center;border-radius:8px}
.mob-nav .cta:hover{background:var(--gdk)!important}

/* ── 5. KRUIMELPAD (breadcrumb) ──────────────────────────────────── */
.bc{background:var(--glt3);border-bottom:1px solid var(--rand);padding:10px 0}
.bc-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--grijs);flex-wrap:wrap}
.bc-row a{color:var(--g);font-weight:700}

/* ── 6. KNOPPEN ──────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;border-radius:var(--rad);border:2px solid transparent;cursor:pointer;transition:all .18s;white-space:nowrap;text-decoration:none}
.btn-g{background:var(--g);color:#fff!important;border-color:var(--g)}
.btn-wit{background:#fff!important;color:#3d7a1e!important;border-color:#fff;font-weight:800}
.btn-g:hover{background:var(--gdk)}
.btn-wl{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.6)}
.btn-wl:hover{border-color:#fff;background:rgba(255,255,255,.12)}

/* ── 7. HERO — homepage ──────────────────────────────────── */
.hero{background:var(--g);padding:52px 0 56px}
.hero-tag{display:inline-block;background:rgba(255,255,255,.2);color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:5px 14px;border-radius:20px;margin-bottom:16px}
.hero h1{color:#fff!important;margin-bottom:16px}
.hero-sub{font-size:17px;color:rgba(255,255,255,.9)!important;margin-bottom:32px;max-width:520px}
.hero-btns{display:flex;flex-direction:column;gap:12px}

/* ── 8. CIJFERBALK ──────────────────────────────────── */
.stats{background:#fff;padding:28px 0;border-bottom:1px solid var(--rand)}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rand);border-radius:var(--rad);overflow:hidden}
.stat{background:#fff;padding:22px 16px;text-align:center;border-right:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.stat:nth-child(2n){border-right:none}
.stat:nth-child(3),.stat:nth-child(4){border-bottom:none}
.stat-nr{font-size:32px;font-weight:800;color:var(--g);display:block;line-height:1}
.stat-lbl{font-size:12px;color:var(--grijs);margin-top:5px;font-weight:600}

/* ── 9. SECTIES & KOPPEN ──────────────────────────────────── */
.sec{padding:52px 0;background:#fff}
.sec-bg{background:var(--grijslt)}
.s-lbl{display:block;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--g);margin-bottom:8px}
.sec h2{margin-bottom:22px}
.arrow-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:800;color:var(--g);margin-top:20px;transition:gap .15s}
.arrow-link::after{content:'→'}
.arrow-link:hover{gap:10px}

/* ── 10. NIEUWSLIJST — homepage ──────────────────────────────────── */

/* ── 11. AGENDALIJST — homepage ──────────────────────────────────── */
.ag-lst{border-top:1px solid var(--rand);margin-bottom:4px}
.ag-itm{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--rand);background:transparent}
.ag-blk{background:var(--g);color:#fff;border-radius:8px;min-width:52px;padding:10px;text-align:center;flex-shrink:0}
.ag-blk strong{font-size:20px;font-weight:800;display:block;line-height:1;color:#fff}
.ag-blk span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff}
.ag-inf strong{font-size:14px;font-weight:700;color:#111;display:block}
.ag-inf span{font-size:12px;color:var(--grijs)}

/* ── 12. KERNDOELEN — homepage ──────────────────────────────────── */
.kdoel-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.kdoel{background:#fff;border:1px solid var(--rand);border-radius:var(--rad);padding:20px 16px;border-top:3px solid var(--g)}
.kdoel-nr{font-size:11px;font-weight:800;color:var(--g);letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:8px}
.kdoel h3{font-size:16px;margin-bottom:6px}
.kdoel p{font-size:13px}

/* ── 13. CTA-BLOK ──────────────────────────────────── */
/* Was 52px boven en onder plus een grote knop; dat maakte het blok bijna
   300px hoog. Nu compacter, zonder dat het zijn nadruk verliest. */
/* De groene oproepbalk onderaan elke pagina. Heette eerder .cta, net als de
   Contact-knop in het menu; twee onderdelen met dezelfde naam vragen om fouten. */
.cta-blok{background:var(--g);padding:28px 0;text-align:center;position:relative;isolation:isolate}
/* Oproepblok met achtergrondfoto: het groen blijft als sluier liggen, zodat
   de tekst leesbaar blijft en de knop een rustige ondergrond houdt. */
.cta-blok--foto{padding:52px 0}
.cta-media{position:absolute;inset:0;z-index:-2;background-image:var(--cta-foto);background-size:cover;background-position:center}
.cta-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,92,21,.72) 0%,rgba(28,58,13,.88) 100%)}
.cta-blok h2{color:#fff!important;margin-bottom:8px;font-size:clamp(19px,3vw,26px)}
.cta-blok p{color:rgba(255,255,255,.88)!important;font-size:15px;line-height:1.55;margin-bottom:16px;max-width:520px;margin-left:auto;margin-right:auto}

/* ── 14. PAGINAKOP ──────────────────────────────────── */
/* Eén groene paginakop voor de hele site. Stond eerder als vijf losse
   varianten in de CSS (44px en 52px hoog); is nu overal gelijk en compacter. */
.pghero{background:var(--g);padding:24px 0 26px}
.pghero .s-lbl{color:rgba(255,255,255,.65)}
.pghero h1{color:#fff!important;margin:6px 0 8px;font-size:clamp(24px,4.4vw,38px)}
.pghero .intro{font-size:15px;color:rgba(255,255,255,.9)!important;max-width:700px;line-height:1.55}

/* ── 15. NIEUWSKAARTEN ──────────────────────────────────── */
.ng{display:grid;grid-template-columns:1fr;gap:18px}
.nk{background:#fff;border:1px solid var(--rand);border-radius:var(--rad);overflow:hidden;box-shadow:var(--sh);transition:transform .2s,box-shadow .2s}
.nk:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.11)}
.nk-img{height:150px;background:var(--glt);display:block;overflow:hidden}
.nk-img svg{opacity:.4}
.nk-body{padding:18px}
.nk-dat{font-size:11px;font-weight:800;color:var(--g);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:6px}
/* Het kopniveau van een kaarttitel wisselt per pagina (h2 als de kaarten
   direct onder de h1 staan, anders h3). De opmaak mag daar niet van
   afhangen, anders wordt de titel op de ene pagina ineens 34px. */
.nk h2,.nk h3,.nk h4{font-size:16px;margin-bottom:8px;color:#111;line-height:1.35}
.nk p{font-size:13px;line-height:1.6}
.nk .arrow-link{margin-top:10px;font-size:13px}

/* ── 18. OVER ONS — tekstblokken ──────────────────────────────────── */
.over-p{font-size:15px;margin-bottom:14px;color:var(--grijs)}
.cij-box .s-lbl{color:rgba(255,255,255,.65);margin-bottom:16px}

/* ── 20. ROLKAARTEN ──────────────────────────────────── */
.rg{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:48px;margin-top:22px}
.rk{border:1px solid var(--rand);border-radius:var(--rad);padding:22px;background:#fff;transition:border-color .2s,box-shadow .2s}
.rk:hover{border-color:var(--g);box-shadow:0 4px 16px rgba(61,122,30,.1)}
.rk h2,.rk h3,.rk h4{font-size:17px;margin-bottom:8px;line-height:1.35}
.rk p{font-size:14px}

/* ── 22. FORMULIEREN — basis ──────────────────────────────────── */
.form{display:flex;flex-direction:column;gap:18px}
.veld{display:flex;flex-direction:column;gap:6px}
label{font-size:13px;font-weight:800;color:var(--zw);text-transform:uppercase;letter-spacing:.05em}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),select,textarea{width:100%;min-width:0;padding:13px 16px;border:2px solid var(--rand);border-radius:10px;font-family:'Nunito',sans-serif;font-size:15px;line-height:1.2;color:#111;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
/* Regelhoogte staat vast, zodat een veld altijd precies 48px hoog is en niet
   meebeweegt met de lettermetriek van het lettertype. */
input[type=submit],input[type=button],input[type=reset]{width:auto}

/* ── Selectievakjes en keuzerondjes ──
   Deze krijgen bewust hun eigen opmaak: met de tekstveldstijl erop werd het
   een leeg wit vak waarin nooit een vinkje verscheen. */
input[type=checkbox],input[type=radio]{-webkit-appearance:none;appearance:none;width:20px;height:20px;min-width:20px;flex-shrink:0;margin:0;padding:0;border:2px solid var(--rand);background:#fff;cursor:pointer;position:relative;transition:border-color .15s,background .15s;vertical-align:-4px}
input[type=checkbox]{border-radius:5px}
input[type=radio]{border-radius:50%}
input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--g)}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--g);border-color:var(--g)}
input[type=checkbox]:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
input[type=radio]:checked::after{content:'';position:absolute;left:4px;top:4px;width:8px;height:8px;border-radius:50%;background:#fff}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:3px solid var(--g);outline-offset:2px}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.5;cursor:not-allowed}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(61,122,30,.12)}
textarea{resize:vertical;min-height:120px}
.sub-btn{background:var(--g);color:#fff;border:none;padding:15px 28px;font-family:'Nunito',sans-serif;font-size:16px;font-weight:800;border-radius:8px;cursor:pointer;transition:background .15s,transform .15s;width:100%}
.sub-btn:hover{background:var(--gdk)}

/* ── 23. FOOTER ──────────────────────────────────── */
.ftr{background:#111111;padding:64px 0 0}
.ftr-grid{display:grid;grid-template-columns:1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid #2a2a2a}
.ftr-brand{display:flex;flex-direction:column}
/* Het merkblok staat boven de contactkaarten en moet daar qua schaal bij
   passen: even breed, en tekst die niet wegvalt bij de kaarten eronder. */
.ftr-logo-blok{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.ftr-logo-blok img{height:96px;width:auto;flex-shrink:0;background:#fff;border-radius:10px;padding:8px}
.ftr-logo-text{display:flex;flex-direction:column;line-height:1.3}
.ftr-logo-r1{font-size:17px;font-weight:800;color:#4a8c2a;display:block}
.ftr-logo-r2{font-size:17px;font-weight:800;color:#4a8c2a;display:block}
.ftr-logo-r3{font-size:13px;color:#aaaaaa;font-weight:500;display:block;margin-top:4px}
.ftr-omschrijving{font-size:15px;color:#ffffff;line-height:1.75;max-width:320px;font-weight:400;margin-bottom:20px}
.ftr-contact-rij{display:flex;flex-direction:column;gap:10px}
.ftr-col-titel{font-size:14px;font-weight:800;color:#4a8c2a;margin-bottom:18px;text-transform:uppercase;letter-spacing:.08em;display:block}
.ftr-col{display:flex;flex-direction:column}
.ftr-col a{font-size:14px;color:#cccccc;padding:5px 0;font-weight:500;transition:color .15s}
.ftr-col a:hover{color:#ffffff}
.ftr-bot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.ftr-bot-row p{font-size:13px;color:#666666;font-weight:500}
.ftr-bot-row a{font-size:13px;color:#666666;font-weight:500;transition:color .15s}
.ftr-bot-row a:hover{color:#aaaaaa}

/* ── 23b. FOOTER — link-hover (stond los op twee pagina's, nu overal) ── */
.ftr a{transition:color .15s,opacity .15s}

/* ── 24. CTA-KNOP ──────────────────────────────────── */
.cta-blok .btn-cta{display:inline-block;background:#ffffff;color:#3d7a1e!important;padding:12px 28px;font-family:'Nunito',sans-serif;font-size:16px;font-weight:800;border-radius:10px;border:none;cursor:pointer;transition:background .18s,transform .18s;text-decoration:none}
.cta-blok .btn-cta:hover{background:#edf7e6;transform:translateY(-2px)}

/* ── 25. AGENDA — filters & kaarten ──────────────────────────────────── */
.filter-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.filter-tab{padding:9px 18px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:700;border-radius:20px;border:2px solid var(--rand);background:#fff;color:var(--grijs);cursor:pointer;transition:all .15s}
.filter-tab.actief,.filter-tab:hover{background:var(--g);color:#fff;border-color:var(--g)}
.ag-kaarten{display:flex;flex-direction:column;gap:14px}
.ag-kaart{background:#fff;border:1px solid var(--rand);border-radius:12px;overflow:hidden;display:flex;align-items:stretch;transition:box-shadow .2s,transform .2s;text-decoration:none}
.ag-kaart:hover{box-shadow:0 6px 24px rgba(0,0,0,.09);transform:translateY(-2px)}
.ag-kaart-datum{background:var(--g);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 18px;min-width:72px;flex-shrink:0;text-align:center}
.ag-kaart-datum strong{font-size:28px;font-weight:800;color:#fff;line-height:1;display:block}
.ag-kaart-datum span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.85);display:block;margin-top:2px}
.ag-kaart-datum small{font-size:11px;color:rgba(255,255,255,.7);display:block;margin-top:4px}
/* Agendakaart mét foto: beeld links, datumblok erover heen. */
.ag-kaart-foto{position:relative;width:160px;flex-shrink:0;overflow:hidden;background:var(--glt)}
.ag-kaart-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.ag-kaart:hover .ag-kaart-foto img{transform:scale(1.05)}
.ag-kaart-datum--op-foto{position:absolute;left:10px;top:10px;min-width:0;padding:9px 11px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.ag-kaart-datum--op-foto strong{font-size:22px}
.ag-kaart-datum--op-foto span{font-size:11px;margin-top:1px}
.ag-kaart-datum--op-foto small{display:none}
.ag-kaart-body{padding:16px 20px;flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px}
.ag-kaart-type{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;align-self:flex-start}
.type-vergadering{background:#edf7e6;color:var(--g)}
.type-activiteit{background:#fff3e0;color:#e65100}
.type-informatie{background:#e3f2fd;color:#1565c0}
.type-festival{background:#fce4ec;color:#c62828}
.ag-kaart-titel{font-size:17px;font-weight:800;color:var(--zw);line-height:1.25}
.ag-kaart-info{display:flex;flex-wrap:wrap;gap:12px}
.ag-kaart-info span{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--grijs);font-weight:600}
.ag-kaart-info svg{flex-shrink:0;color:var(--g)}
.ag-kaart-pijl{display:flex;align-items:center;padding:0 16px;color:var(--g);flex-shrink:0;font-size:20px;font-weight:800}

/* ── 26. AGENDA — archief ──────────────────────────────────── */
.archief-kaarten{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.archief-kaart{background:#fff;border:1px solid var(--rand);border-radius:10px;padding:16px 18px;display:flex;align-items:center;gap:14px;text-decoration:none;transition:background .15s}
.archief-kaart:hover{background:var(--glt3)}
.archief-datum-blok{background:var(--glt3);border-radius:8px;padding:10px 12px;text-align:center;min-width:52px;width:52px;flex-shrink:0}
.archief-datum-blok strong{font-size:18px;font-weight:800;color:var(--grijs);display:block;line-height:1}
.archief-datum-blok span{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--grijs);letter-spacing:.06em}
.archief-info{flex:1;min-width:0}
.archief-info h2,.archief-info h3,.archief-info h4{font-size:15px;font-weight:700;color:var(--grijs);display:block;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.archief-info span{font-size:13px;color:#aaa}
.archief-tag-foto{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:8px 14px;border-radius:20px;background:var(--g);color:#fff;white-space:nowrap;flex-shrink:0}
.archief-tag-verslag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:8px 14px;border-radius:20px;background:var(--glt);color:var(--g);border:1px solid var(--glt2);white-space:nowrap;flex-shrink:0}

/* ── 27. CONTACT ──────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr;gap:40px;padding:52px 0}
.contact-blok h2{font-size:20px;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--glt2)}
.cg-kaart{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--rand);border-radius:10px;padding:16px 18px;margin-bottom:10px;text-decoration:none;transition:box-shadow .2s,transform .15s}
.cg-kaart:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateY(-2px)}
.cg-kaart-icoon{width:44px;height:44px;border-radius:10px;background:var(--glt);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cg-kaart-icoon svg{color:var(--g)}
/* Sociale media houden hun eigen herkenbare kleur. */
.cg-kaart--facebook .cg-kaart-icoon{background:rgba(24,119,242,.12)}
.cg-kaart--facebook .cg-kaart-icoon svg{color:#1877f2}
.cg-kaart--linkedin .cg-kaart-icoon{background:rgba(10,102,194,.12)}
.cg-kaart--linkedin .cg-kaart-icoon svg{color:#0a66c2}
.cg-kaart-tekst{display:flex;flex-direction:column;gap:2px}
.cg-kaart-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--grijs)}
.cg-kaart-val{font-size:15px;font-weight:700;color:var(--zw)}
.ot-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.ot-kaart{background:#fff;border:1px solid var(--rand);border-radius:10px;padding:16px;border-left:3px solid var(--g)}
.ot-dag{font-size:14px;font-weight:800;color:var(--zw);display:block;margin-bottom:3px}
.ot-tijd{font-size:14px;color:var(--grijs)}
.kaart-embed{border-radius:10px;overflow:hidden;border:1px solid var(--rand)}
.kaart-embed iframe{width:100%;height:160px;border:none;display:block}
.kaart-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;background:var(--glt);color:var(--g);font-size:14px;font-weight:800;text-decoration:none}
.kaart-link:hover{background:var(--glt2)}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.doelen-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:24px}
.doel-kaart{background:#fff;border:1px solid var(--rand);border-radius:12px;padding:20px;display:flex;gap:14px;align-items:flex-start}
.doel-icoon{width:44px;height:44px;background:var(--glt);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.doel-icoon svg{color:var(--g)}
.doel-tekst h3{font-size:16px;font-weight:800;margin-bottom:4px}
.doel-tekst p{font-size:14px;margin:0}
.bestuur-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px}
.bestuur-kaart{background:#fff;border:1px solid var(--rand);border-radius:12px;overflow:hidden;text-align:center}
.bestuur-foto{width:100%;aspect-ratio:1;background:linear-gradient(135deg,var(--glt),var(--glt2));display:flex;align-items:center;justify-content:center}
.bestuur-foto svg{color:var(--g);opacity:.4}
.bestuur-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* Initialen zolang er nog geen foto is geüpload. */
.bestuur-initialen{font-size:clamp(30px,5vw,42px);font-weight:800;color:var(--g);opacity:.5;letter-spacing:.03em;line-height:1;font-family:'Nunito',sans-serif}
.bestuur-info{padding:14px 12px}
.bestuur-info strong{font-size:15px;font-weight:800;color:var(--zw);display:block;margin-bottom:3px}
.bestuur-info span{font-size:13px;color:var(--grijs)}
/* Flexbox in plaats van een raster: met zeven partners houdt een raster van
   drie of vier kolommen een half lege laatste rij over. Zo wordt de rest
   netjes gecentreerd, ongeacht hoeveel partners er zijn. */
.partner-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:24px}
.partner-kaart{background:#fff;border:1px solid var(--rand);border-radius:var(--rad);padding:24px 18px;text-align:center;text-decoration:none;transition:box-shadow .15s,transform .15s,border-color .15s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:132px;flex:1 1 210px;max-width:300px}
a.partner-kaart:hover{box-shadow:0 6px 18px rgba(0,0,0,.09);transform:translateY(-2px);border-color:var(--glt2)}
/* Elk partnerlogo krijgt dezelfde maximale maat, ongeacht of het een SVG of
   een PNG is en hoe breed of hoog het origineel is. */
/* Vast kader per logo: elk logo krijgt exact dezelfde ruimte en wordt daar
   passend in geschaald. Ook nodig omdat sommige SVG's geen eigen afmeting
   hebben en anders op 0 bij 0 pixels uitkomen. */
.partner-kaart img{width:auto;max-width:100%;max-height:54px;height:auto;object-fit:contain;object-position:center;display:block;margin:0}
.partner-kaart span{font-size:14px;font-weight:700;color:var(--grijs);display:block;margin-top:0;line-height:1.35}
/* Een partner zonder logo mag geen leeg vak worden: dan draagt de naam zelf het kaartje. */
.partner-kaart--zonder-logo span{font-size:17px;font-weight:800;color:var(--zw)}

/* ── 29. PRIKBORD ──────────────────────────────────── */
.pb-layout{display:grid;grid-template-columns:1fr;gap:40px;padding:48px 0}
.pb-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.pb-filter{padding:9px 18px;font-family:'Nunito',sans-serif;font-size:14px;font-weight:700;border-radius:20px;border:2px solid var(--rand);background:#fff;color:var(--grijs);cursor:pointer;transition:all .15s}
.pb-filter.actief,.pb-filter:hover{background:var(--g);color:#fff;border-color:var(--g)}
.pb-berichten{display:flex;flex-direction:column;gap:14px}
.pb-bericht{background:#fff;border:1px solid var(--rand);border-radius:12px;padding:20px 22px;transition:box-shadow .2s}
.pb-bericht:hover{box-shadow:0 4px 16px rgba(0,0,0,.07)}
.pb-bericht-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap;row-gap:6px}
.pb-cat{display:inline-block;padding:5px 12px;border-radius:20px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
/* De categorieen blijven aan hun kleur herkenbaar, maar in gedempte tinten die
   naast het groen van de site staan in plaats van de felle standaardkleuren. */
.cat-vraag{background:#edf7e6;color:#2c5c15}
.cat-melding{background:#fbeede;color:#8a4f0d}
.cat-idee{background:#e3edf1;color:#1c5468}
.cat-initiatief{background:#efe8f1;color:#5e4269}
/* Datum en straat staan in leesvolgorde achter de naam, met dezelfde
   puntscheiding ertussen. */
.pb-datum{font-size:13px;color:var(--grijs);font-weight:600;margin-left:-6px;display:inline-flex;align-items:center;gap:7px;line-height:1.2}
.pb-datum::before{content:'\00B7';color:#c8c8c8;font-weight:700}
.pb-auteur{font-size:14px;font-weight:800;color:var(--zw);line-height:1.2}
/* Puntje tussen naam en straat, zodat ze als één regel lezen. */
.pb-straat{font-size:13px;color:var(--grijs);margin-left:-6px;display:inline-flex;align-items:center;gap:7px;line-height:1.2}
.pb-straat::before{content:'\00B7';color:#c8c8c8;font-weight:700}
.pb-tekst{font-size:15px;color:var(--grijs);line-height:1.7;margin-bottom:0}
.pb-tekst p:last-child{margin-bottom:0}
/* De voettekst met naam en straat is vervallen; die staan nu bovenaan. */
/* Eén definitie: een gewone tekstlink, geen balk en geen vlak.
   Stond eerder twee keer in dit bestand met tegenstrijdige waarden. */
.pb-reactie-btn{display:inline-block;width:auto;margin-top:14px;padding:0;background:none;border:none;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;color:var(--g);cursor:pointer;text-align:left;text-decoration:none}
.pb-reactie-btn:hover{color:var(--gdk);text-decoration:underline}
.pb-leeg{background:var(--glt3);border:2px dashed var(--glt2);border-radius:12px;padding:40px 24px;text-align:center;display:none}
.pb-leeg svg{color:var(--g);opacity:.4;margin-bottom:12px}
.pb-leeg p{color:var(--grijs);font-size:15px}
.pb-form-card{background:#fff;border:1px solid var(--rand);border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06)}
/* Zie de gedeelde regel bij "GROOT FORMULIER": .pb-form-head en
   .form-wrap-head hebben exact dezelfde opmaak. */
.pb-form-body{padding:24px}
.pb-form{display:flex;flex-direction:column;gap:16px}
label .req{color:var(--g);margin-left:2px}
input.fout,select.fout,textarea.fout{border-color:#dc2626}
input.goed,select.goed,textarea.goed{border-color:var(--g)}
.fout-msg{font-size:12px;color:#dc2626;font-weight:700;display:none;margin-top:2px}
.fout-msg.zichtbaar{display:block}
.pb-submit{background:var(--g);color:#fff;border:none;padding:15px 32px;font-family:'Nunito',sans-serif;font-size:16px;font-weight:800;border-radius:10px;cursor:pointer;transition:background .15s,transform .15s;width:100%}
.pb-submit:hover{background:var(--gdk);transform:translateY(-1px)}
.pb-submit:disabled{background:var(--gdis);cursor:not-allowed;transform:none}
.pb-success{background:var(--glt);border:1px solid var(--glt2);border-radius:10px;padding:20px;text-align:center;display:none}
.pb-success.zichtbaar{display:block}
.pb-success strong{color:var(--g);font-size:17px;display:block;margin-bottom:6px}
.pb-info-box{background:var(--glt3);border-radius:10px;padding:14px 18px;margin-top:16px;font-size:13px;color:var(--grijs);line-height:1.5}
.pb-info-box strong{color:var(--zw);display:block;margin-bottom:3px}
.pb-info-box p{margin:0;line-height:1.5;font-size:13px}

/* ── 30. GROOT FORMULIER (contact & vrijwilligers) ──────────────────────────────────── */
.form-wrap{background:#fff;border:1px solid var(--rand);border-radius:14px;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.06)}
/* Eén kop voor elk formulier op de site: gecentreerd en overal even groot.
   Stond eerder als twee losse varianten in de CSS (22px/24px en 24px/28px). */
.form-wrap-head,.pb-form-head{background:var(--g);padding:22px 26px;text-align:center}
.form-wrap-head h2,.pb-form-head h2{color:#fff!important;margin:0 0 4px;font-size:20px}
.form-wrap-head p,.pb-form-head p{color:rgba(255,255,255,.85);font-size:14px;margin:0}
.form-wrap-body{padding:28px}
input.goed,textarea.goed{border-color:var(--g)}
.form-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.privacy-note{font-size:12px;color:var(--grijs)}
.submit-btn{background:var(--g);color:#fff;border:none;padding:15px 32px;font-family:'Nunito',sans-serif;font-size:16px;font-weight:800;border-radius:10px;cursor:pointer;transition:background .15s,transform .15s;white-space:nowrap}
.submit-btn:hover{background:var(--gdk);transform:translateY(-1px)}
.submit-btn:disabled{background:var(--gdis);cursor:not-allowed;transform:none}
.success-box{background:var(--glt);border:1px solid var(--glt2);border-radius:10px;padding:24px;text-align:center;display:none}
.success-box.zichtbaar{display:block}
.success-box strong{color:var(--g);font-size:18px;display:block;margin-bottom:8px}

/* ── 31. VRIJWILLIGERS ──────────────────────────────────── */
.vr-layout{display:grid;grid-template-columns:1fr;gap:40px;padding:52px 0}
.vr-rollen h2{font-size:20px;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid var(--glt2)}
.rol-kaart{background:#fff;border:1px solid var(--rand);border-radius:12px;padding:20px 22px;display:flex;gap:16px;align-items:flex-start;margin-bottom:12px;transition:box-shadow .2s}
.rol-kaart:hover{box-shadow:0 4px 16px rgba(0,0,0,.07)}
.rol-icoon{width:44px;height:44px;background:var(--glt);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rol-icoon svg{color:var(--g)}
.rol-info h3{font-size:16px;font-weight:800;margin-bottom:4px}

/* Blokje onder de rollen: vult de ruimte die het langere formulier ernaast
   overlaat, en biedt een tweede route voor wie liever eerst belt. */
.vr-hulp{margin-top:18px;background:var(--glt);border:1px solid var(--glt2);border-radius:var(--rad);padding:20px 22px}
/* Sluit het hulpblok een sectie af, dan hoeft de sectie eronder minder
   lucht te hebben: anders valt er een gat van ruim 150 pixels. */
.doneer-layout:has(.vr-hulp),.vr-layout:has(.vr-hulp){padding-bottom:0}
.sec:has(> .wrap > .doneer-layout .vr-hulp)+.sec{padding-top:28px}
.vr-hulp .s-lbl{margin-bottom:6px}
.vr-hulp p{font-size:15px;line-height:1.65;margin:0 0 14px}
.vr-hulp-rij{display:flex;gap:10px;flex-wrap:wrap}
.vr-hulp-knop{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--rand);border-radius:8px;padding:10px 14px;font-size:14px;font-weight:800;color:var(--zw);transition:border-color .15s,color .15s}
.vr-hulp-knop:hover{border-color:var(--g);color:var(--g)}
.vr-hulp-knop svg{color:var(--g);flex-shrink:0}
.rol-info p{font-size:14px;margin:0}

/* ── 32. DETAILPAGINA — nieuws & agenda ──────────────────────────────────── */
.terug{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:800;color:var(--g);margin-bottom:24px;text-decoration:none}
.terug:hover{text-decoration:underline}
.detail-grid{display:grid;grid-template-columns:1fr;gap:32px}
.body-tekst h2{font-size:clamp(20px,4vw,28px);margin:34px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--glt2)}
.body-tekst p{font-size:15px;margin-bottom:14px}
.body-tekst ul{display:flex;flex-direction:column;gap:8px;margin:12px 0 16px}
/* Zelfde reden als bij .missie-tekst: geen flex, anders breekt elke
   opsomming waar het bestuur een vetgedrukt woord in zet. */
.body-tekst ul li{position:relative;padding-left:20px;color:var(--grijs)}
.body-tekst ul li::before{content:'';position:absolute;left:0;top:10px;width:8px;height:8px;background:var(--g);border-radius:50%}
.sidebar-card{background:#fff;border:1px solid var(--rand);border-radius:10px;overflow:hidden;margin-bottom:16px}
.card-head{background:var(--g);padding:14px 20px}
.card-head h2{color:#fff;font-size:15px;font-weight:800;margin:0;line-height:1.3}
.card-body{padding:20px}
.info-rij{padding:12px 0;border-bottom:1px solid var(--rand);display:flex;flex-direction:column;gap:3px}
.info-rij:last-child{border-bottom:none;padding-bottom:0}
.info-lbl{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--grijs)}
.info-val{font-size:15px;font-weight:800;color:var(--zw)}
.btn-sidebar{display:block;padding:14px;background:var(--g);color:#fff;text-align:center;font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;border-radius:8px;text-decoration:none;margin-top:4px;transition:background .15s}
.btn-sidebar:hover{background:var(--gdk)}
.btn-sidebar-lijn{display:block;padding:13px;background:#fff;color:var(--g);text-align:center;font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;border-radius:8px;border:2px solid var(--g);text-decoration:none;margin-top:10px;transition:all .15s}
.btn-sidebar-lijn:hover{background:var(--glt)}
.deel-rij{display:flex;gap:8px;flex-wrap:wrap}
.deel-btn{flex:1;min-width:90px;padding:11px 8px;background:var(--glt3);border:1px solid var(--rand);border-radius:8px;text-align:center;font-size:12px;font-weight:800;color:var(--zw);text-decoration:none;transition:background .15s}
.deel-btn:hover{background:var(--glt);color:var(--g)}
.thumbnail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:20px}
.thumbnail-grid img{width:100%;height:140px;object-fit:cover;border-radius:8px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.thumbnail-grid img:hover{transform:scale(1.03);box-shadow:0 4px 12px rgba(61,122,30,.15)}
.view-all-btn{width:100%;padding:12px;background:var(--g);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:800;cursor:pointer;transition:background .15s;margin-bottom:20px}
.view-all-btn:hover{background:var(--gdk)}
.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.92);z-index:9999;display:none;align-items:center;justify-content:center}
.lightbox.active{display:flex}
.lightbox-content{position:relative;width:90%;height:90%;max-width:1000px;max-height:800px;display:flex;align-items:center;justify-content:center}
.lightbox-image{max-width:100%;max-height:100%;object-fit:contain}
.lightbox-close{position:absolute;top:20px;right:20px;width:40px;height:40px;background:rgba(255,255,255,.2);border:none;color:#fff;font-size:28px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:10001}
.lightbox-close:hover{background:rgba(255,255,255,.3)}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;background:rgba(255,255,255,.2);border:none;color:#fff;font-size:24px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:background .15s;z-index:10001}
.lightbox-nav:hover{background:rgba(255,255,255,.3)}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
.lightbox-counter{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-size:14px;font-weight:700;background:rgba(0,0,0,.5);padding:8px 12px;border-radius:4px;z-index:10001}

/* ==========================================================================
   35. FOOTER — contactkaartjes, kolommen en nieuwsbrief
   (stonden voorheen als losse inline-stijlen in elk HTML-bestand)
   ========================================================================== */
.ftr-rechts{display:flex;flex-direction:column;gap:24px}
/* De kolommen voegen zich naar hun inhoud, zodat langere namen als
   "Wijkberaad Laak Centraal" niet over twee regels breken. */
.ftr-kolommen{display:flex;flex-direction:column;gap:24px}
.ftr-col a,.ftr-kvk{white-space:nowrap}
.ftr-kaart{display:flex;align-items:center;gap:12px;background:#1e1e1e;border:1px solid #333;border-radius:8px;padding:12px 14px;text-decoration:none;transition:background .15s}
.ftr-kaart:hover{background:#2a2a2a}
.ftr-kaart svg{flex-shrink:0;color:#4a8c2a}
.ftr-kaart-tekst{display:flex;flex-direction:column}
.ftr-kaart-lbl{font-size:11px;color:#888;font-weight:600;text-transform:uppercase;letter-spacing:.06em;display:block}
.ftr-kaart-val{font-size:14px;color:#fff;font-weight:600}
/* De sociale kaarten zien er hetzelfde uit als de andere contactkaarten;
   alleen het pictogram heeft de eigen kleur van het platform. */
.ftr-kaart--facebook svg{color:#1877f2}
.ftr-kaart--linkedin svg{color:#0a66c2}
.ftr-kvk{font-size:14px;color:#cccccc;padding:5px 0;font-weight:500;display:block}
.ftr-kaart-embed{border-radius:10px;overflow:hidden;border:1px solid #333}
.ftr-kaart-embed iframe{width:100%;height:340px;border:none;display:block;filter:grayscale(20%)}
.ftr-kaart-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;background:#1a2e14;color:#4a8c2a;font-size:14px;font-weight:800;text-decoration:none;transition:background .15s}
.ftr-kaart-link:hover{background:#243d1c}
.ftr-nieuwsbrief{border-top:1px solid #2a2a2a;padding:28px 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.ftr-nieuwsbrief-titel{font-size:16px;font-weight:800;color:#fff;display:block}
.ftr-nieuwsbrief-sub{font-size:14px;color:#888}
.ftr-nieuwsbrief-form{display:flex;gap:8px;flex-wrap:wrap}
.ftr-nieuwsbrief-form input[type=email]{width:240px;max-width:100%;min-width:0;padding:10px 14px;border-radius:8px;border:1px solid #333;background:#1e1e1e;color:#fff;font-size:14px;line-height:1.2;font-family:'Nunito',sans-serif}
.ftr-nieuwsbrief-form input[type=email]:focus{border-color:#4a8c2a;box-shadow:none}
.ftr-nieuwsbrief-form button{padding:10px 20px;border-radius:8px;border:1px solid transparent;background:#3d7a1e;color:#fff;font-size:14px;line-height:1.2;font-weight:800;font-family:'Nunito',sans-serif;cursor:pointer;transition:background .15s}
.ftr-nieuwsbrief-form button:hover{background:#2c5c15}
.ftr-bot{border-top:1px solid #2a2a2a;padding:20px 0}

/* ==========================================================================
   36. TOEGANKELIJKHEID EN HULPKLASSEN
   ========================================================================== */
.schermlezer,.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.overslaan{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--g);color:#fff;padding:12px 20px;font-weight:800;border-radius:0 0 8px 0}
.overslaan:focus{left:0}
:focus-visible{outline:3px solid var(--g);outline-offset:2px}
.mob-nav-fb{display:flex;align-items:center;gap:8px;color:#1877f2!important;font-weight:700;padding:13px 16px;border-radius:8px;font-size:16px;margin-top:4px}
.nk-img-leeg{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/10;background:var(--glt);color:var(--g)}
.bol-melding{padding:14px 16px;border-radius:10px;font-size:14px;font-weight:600;margin-bottom:16px;border:1px solid var(--rand);background:var(--grijslt);color:var(--txt)}
.bol-melding--waarschuwing{background:#fff8e5;border-color:#f0d68a;color:#6b4e00}
.bol-leeg{padding:48px 20px;text-align:center;color:var(--grijs);background:var(--grijslt);border:1px dashed var(--rand);border-radius:var(--rad)}

/* ==========================================================================
   37. WORDPRESS-BLOKKEN EN REDACTIE-INHOUD
   Zodat tekst die het bestuur zelf toevoegt automatisch in de huisstijl valt.
   ========================================================================== */
.body-tekst>*+*{margin-top:18px}
.body-tekst h3{font-size:clamp(17px,3vw,21px);margin-top:26px}
.body-tekst a{color:var(--g);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.body-tekst a:hover{color:var(--gdk)}
.body-tekst strong{color:var(--zw)}
.body-tekst ol{padding-left:22px;color:var(--grijs);line-height:1.8}
.body-tekst ol li{margin-bottom:8px}
.body-tekst blockquote{border-left:4px solid var(--g);background:var(--glt);padding:18px 22px;border-radius:0 var(--rad) var(--rad) 0;font-size:17px;font-style:italic;color:var(--txt)}
.body-tekst blockquote p{color:var(--txt)}
.body-tekst img,.body-tekst figure img{border-radius:var(--rad)}
.body-tekst figure{margin:24px 0}
.body-tekst figcaption,.wp-element-caption{font-size:13px;color:var(--grijs);margin-top:8px;text-align:center}
.body-tekst table{width:100%;border-collapse:collapse;font-size:15px}
.body-tekst th,.body-tekst td{border:1px solid var(--rand);padding:10px 12px;text-align:left}
.body-tekst th{background:var(--glt);font-weight:800;color:var(--zw)}
.alignleft{float:left;margin:0 24px 18px 0}
.alignright{float:right;margin:0 0 18px 24px}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.alignwide{width:min(100%,1180px);margin-left:auto;margin-right:auto}
.alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.wp-block-image{margin:24px 0}
.wp-block-gallery.has-nested-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:24px 0}
.wp-block-gallery.has-nested-images figure.wp-block-image{margin:0;width:100%!important}
/* De hoogte staat op de figure, niet op de afbeelding. WordPress zet zelf
   height:100% op galerijafbeeldingen met een specifiekere selector; zonder
   deze aanpak wordt een staande foto twee keer zo hoog als de rest en staat
   de hele rij scheef. */
.wp-block-gallery.has-nested-images figure.wp-block-image{height:140px;overflow:hidden;border-radius:8px}
.wp-block-gallery.has-nested-images figure.wp-block-image img,
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image img{width:100%;height:100%;object-fit:cover;border-radius:8px;transition:transform .15s,box-shadow .15s}
.wp-block-gallery.has-nested-images figure.wp-block-image img:hover{transform:scale(1.03);box-shadow:0 4px 12px rgba(61,122,30,.15)}
.wp-block-button__link{background:var(--g);color:#fff;border-radius:10px;padding:15px 32px;font-weight:800;font-family:'Nunito',sans-serif}
.wp-block-button__link:hover{background:var(--gdk)}
.wp-block-separator{border:none;border-top:1px solid var(--rand);margin:32px 0}

/* Paginering */
.bol-paginering{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:36px}
.bol-paginering .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--rand);border-radius:8px;background:#fff;font-size:14px;font-weight:800;color:var(--zw);transition:background .15s,border-color .15s}
.bol-paginering .page-numbers:hover{background:var(--glt);border-color:var(--g);color:var(--g)}
.bol-paginering .page-numbers.current{background:var(--g);border-color:var(--g);color:#fff}
.bol-paginering .dots{border-color:transparent;background:transparent}

/* ==========================================================================
   38. CONTACT FORM 7
   De plugin verzorgt alleen het versturen. De opmaak komt uit dezelfde
   klassen als de rest van de site (.form, .veld, .veld-rij, .form-footer),
   dus er is geen tweede set formulierstijlen die uit de pas kan lopen.
   Hieronder staat alleen wat de wrappers van de plugin onschadelijk maakt.
   ========================================================================== */
.wpcf7 .screen-reader-response{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
/* Contact Form 7 stopt zijn verborgen velden in een <fieldset>. Zonder de
   stylesheet van de plugin krijgt die de standaard browserrand en verschijnt
   hij als een grijs blokje van 4 bij 4 naast het invoerveld. */
.wpcf7 fieldset.hidden-fields-container{display:none}
.wpcf7-form p{margin:0}
.wpcf7-form-control-wrap{display:block;position:relative}

/* Kleine, niet-nadrukkelijke toevoeging achter een labeltekst, bijv. "(optioneel)" */
.label-opt{font-weight:500;text-transform:none;letter-spacing:normal;font-size:12px;color:var(--grijs)}

/* Foutmelding van de plugin krijgt dezelfde stijl als .fout-msg */
.wpcf7-not-valid{border-color:#dc2626!important}
.wpcf7-not-valid-tip{display:block;font-size:12px;color:#dc2626;font-weight:700;margin-top:4px;text-transform:none;letter-spacing:normal}

/* Meldingen na het versturen — standaard verborgen, pas zichtbaar na een poging */
.wpcf7-response-output{display:none;margin:0!important;padding:14px 16px!important;border:2px solid var(--rand)!important;border-radius:10px;font-size:14px;font-weight:600;line-height:1.5}
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{display:block}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--g)!important;background:var(--glt);color:var(--gdk)}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output{border-color:#dc2626!important;background:#fdecec;color:#a11}
.wpcf7-spinner{display:none;position:relative;width:22px;height:22px;margin:0 0 0 10px;border-radius:50%;background:var(--glt2);vertical-align:middle}
.wpcf7 form.submitting .wpcf7-spinner{display:inline-block}
.wpcf7-spinner::before{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border:2px solid var(--g);border-top-color:transparent;border-radius:50%;animation:bol-draai .8s linear infinite}
@keyframes bol-draai{to{transform:rotate(360deg)}}

.wpcf7-list-item{margin:0 16px 0 0}
.wpcf7-list-item-label{font-size:14px;font-weight:500;text-transform:none;letter-spacing:normal;color:var(--grijs)}

/* Akkoordvakje: vakje en tekst netjes naast elkaar, hele regel aanklikbaar. */
.wpcf7-acceptance .wpcf7-list-item{margin:0;display:block}
.wpcf7-acceptance label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;text-transform:none;letter-spacing:normal;font-weight:400}
.wpcf7-acceptance .wpcf7-list-item-label{font-size:14px;font-weight:500;color:var(--grijs);line-height:1.5}
.wpcf7-acceptance input[type=checkbox]{margin-top:2px}
.wpcf7-acceptance{padding:2px 0}

/* Nieuwsbriefformulier in de footer: op één regel, donkere stijl */
.ftr-nieuwsbrief-cf7{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Het veld houdt een vaste, passende breedte; de wrapper van de plugin mag niet meerekken. */
.ftr-nieuwsbrief-cf7 .wpcf7-form-control-wrap{display:block;flex:0 0 auto;width:240px;max-width:100%}
.ftr-nieuwsbrief-cf7 input[type=email]{width:100%;min-width:0;padding:10px 14px;border:1px solid #333;border-radius:8px;background:#1e1e1e;color:#fff;font-size:14px;line-height:1.2}
.ftr-nieuwsbrief-cf7 input[type=email]:focus{border-color:#4a8c2a;box-shadow:none}
.ftr-nieuwsbrief-cf7 input[type=submit]{padding:10px 20px;border-radius:8px;border:1px solid transparent;background:#3d7a1e;color:#fff;font-size:14px;line-height:1.2;font-weight:800;font-family:'Nunito',sans-serif;cursor:pointer;transition:background .15s;width:auto}
.ftr-nieuwsbrief-cf7 input[type=submit]:hover{background:#2c5c15}
.ftr-nieuwsbrief-cf7 .wpcf7-response-output{width:100%;background:#1e1e1e;color:#fff;border-color:#333!important;font-size:13px}

/* ==========================================================================
   38b. ONDERDELEN DIE IN WORDPRESS ZIJN BIJGEKOMEN
   ========================================================================== */

/* Prikbordblok op de homepage */
/* Compact en gecentreerd: over de volle contentbreedte oogde dit blok als een
   losse balk, terwijl het een tussenzinnetje is tussen twee secties. */
.home-prikbord{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;background:var(--glt);border:1px solid var(--glt2);border-radius:var(--rad);padding:18px 24px;max-width:540px;margin:0 auto}
.home-prikbord h3{font-size:clamp(17px,2.6vw,20px);margin-bottom:4px}
.home-prikbord p{max-width:46ch;margin:0 auto;font-size:15px;line-height:1.55}

/* Grote foto boven een nieuwsbericht of agendapunt */
/* Vaste verhouding, zodat elk artikel dezelfde fotoband krijgt — ook als de
   bronfoto kleiner of anders van vorm is. Bijgesneden vanaf iets boven het
   midden, want daar staan doorgaans de gezichten. */
.detail-hero-foto{margin:0 0 24px}
.detail-hero-foto img{width:100%;aspect-ratio:9 / 5;object-fit:cover;object-position:center 30%;border-radius:var(--rad);display:block;transition:filter .15s}
.detail-hero-foto:hover img{filter:brightness(.95)}

/* Zijbalk van detailpagina's */
.detail-zijbalk{display:flex;flex-direction:column;gap:16px}

/* Kop boven de fotogalerij */
.galerij-kop{font-size:clamp(17px,3vw,21px);margin:34px 0 14px}

/* Tekst naast het nieuwsbriefformulier in de footer */
.ftr-nieuwsbrief-tekst{display:flex;flex-direction:column;gap:2px}

/* Zoekformulier op de zoekresultatenpagina */
.zoekform{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px;max-width:560px}
.zoekform input[type=search]{flex:1;min-width:220px;width:auto}
.zoekform .sub-btn{width:auto;flex-shrink:0}

/* Agendapunt waarvan de datum voorbij is */
.ag-kaart--geweest{opacity:.72}
.ag-kaart--geweest:hover{opacity:1}

/* Terugvalvlak als een kaart geen foto heeft */
/* Standaard vanuit het midden bijsnijden; per foto te verfijnen met het
   brandpunt in de mediabibliotheek. Stond op 30% van boven, waardoor je
   bij staande foto's het plafond zag. */
.nk-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* ── Reacties op prikbordberichten ── */
.pb-reacties{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--rand);display:flex;flex-direction:column;gap:12px}
.pb-reactie{background:var(--glt3);border-radius:8px;padding:12px 14px}
.pb-reactie-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.pb-reactie-naam{font-size:13px;font-weight:800;color:var(--zw)}
.pb-reactie-straat{font-size:12px;color:var(--grijs)}
.pb-reactie-datum{font-size:12px;color:#aaa;margin-left:auto}
.pb-reactie-tekst{font-size:14px;color:var(--grijs);line-height:1.6;margin:0}
.pb-reactie-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--rand);display:flex;flex-direction:column;gap:14px}
.pb-reactie-form .pb-submit{width:auto;align-self:flex-start;padding:12px 24px;font-size:15px}
.pb-veld-verborgen{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   KOPBALK MET FOTO
   Zes uitwerkingen. De foto komt uit de variabele --hero-foto, die het
   sjabloon per pagina zet. Zonder foto blijft de balk gewoon groen.
   ========================================================================== */
.hero,.pghero{position:relative;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2;background-image:var(--hero-foto);background-size:cover;background-position:var(--hero-pos,center)}
.hero-media::after{content:'';position:absolute;inset:0}
.heeft-foto .wrap{position:relative;z-index:1}

/* A · diagonaal verloop */
.hero--diagonaal .hero-media::after{background:linear-gradient(100deg,rgba(44,92,21,.95) 0%,rgba(44,92,21,.80) 45%,rgba(44,92,21,.40) 100%)}

/* B · verloop van onderaf */
.hero--onderaf .hero-media::after{background:linear-gradient(180deg,rgba(17,17,17,.15) 0%,rgba(28,58,13,.72) 55%,rgba(28,58,13,.95) 100%)}
.hero--onderaf{display:flex;align-items:flex-end}
.hero--onderaf.pghero{min-height:300px}
.hero--onderaf.hero{min-height:380px}

/* D · tekst op een groen paneel */
.hero--paneel .hero-media::after{background:rgba(17,17,17,.18)}
.hero--paneel.pghero{min-height:300px;display:flex;align-items:center}
.hero--paneel.hero{min-height:380px;display:flex;align-items:center}
.hero--paneel .hero-paneel{background:rgba(44,92,21,.93);border-radius:14px;padding:30px 32px;max-width:640px}

/* E · horizontale overgang */
.hero--overgang .hero-media{inset:0 0 0 38%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 42%);mask-image:linear-gradient(90deg,transparent 0%,#000 42%)}
.hero--overgang .hero-media::after{background:none}
.hero--overgang .wrap>*{max-width:560px}

/* F · schuine snede */
.hero--snede .hero-media{inset:0 0 0 42%;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.hero--snede .hero-media::after{background:none}
.hero--snede .wrap>*{max-width:520px}

/* H · foto breekt uit de balk */
.hero--uitbreek{padding-bottom:92px}
.hero--uitbreek .hero-media{display:none}
.hero--uitbreek .hero-uitbreek{position:absolute;right:max(20px,calc(50% - 520px));bottom:-56px;width:40%;max-width:400px;height:264px;
  border-radius:14px;background-image:var(--hero-foto);background-size:cover;background-position:center;
  box-shadow:0 16px 40px rgba(0,0,0,.28);border:5px solid #fff;z-index:2}
.hero--uitbreek+*{padding-top:96px}
.hero--uitbreek .wrap>*{max-width:560px}

/* ==========================================================================
   OPMAAKBLOKKEN VOOR PAGINA'S
   Bouwstenen die het bestuur zelf kan invoegen via Blokken → Patronen:
   beeld en tekst om en om, leeskolom, cijferrij, uitbrekend beeld,
   tekst met zijkolom, en inklapbare vragen.
   ========================================================================== */

/* Leeskolom */
.mx-lees{max-width:620px;margin:0 auto}
.mx-lees.links{margin-left:0;margin-right:auto}
.mx-lees p{font-size:17px;line-height:1.75;margin-bottom:18px}
.mx-lees p:last-child{margin-bottom:0}
.mx-lead{font-size:19px;line-height:1.7;color:var(--txt);font-weight:500}
/* Bronvermelding: rechts uitgelijnd en kleiner, zodat hij duidelijk
   ondergeschikt is aan de tekst erboven. */
/* Bronvermelding gecentreerd onder de laatste foto, met een dun lijntje
   erboven dat even breed is als de tekst. */
.mx-bronnen{max-width:560px;margin:44px auto 0;text-align:center;padding-top:18px;border-top:1px solid var(--rand)}
.mx-bronnen h2,.mx-bronnen h3{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--grijs);margin-top:26px;margin-bottom:6px;padding-bottom:0;border-bottom:none}
.mx-bronnen p{font-size:13px;line-height:1.65;color:var(--grijs);margin:0}
/* Openingsalinea over de volle contentbreedte, gelijk aan de cijferrij
   eronder. Iets ruimere regelafstand, omdat een lange regel anders lastig
   te volgen is. */
.mx-intro-breed{max-width:none;margin:0 0 8px}
.mx-intro-breed .mx-lead{line-height:1.8;max-width:none}

/* Beeld en tekst om en om */
/* Beeld en tekst even hoog: de kolommen rekken mee (align-items:stretch) en
   de foto vult wat er in zijn kolom overblijft. Zo begint en eindigt het beeld
   op dezelfde hoogte als de tekst ernaast, hoe lang die tekst ook is. */
.mx-zigzag{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch;margin-bottom:52px}
.mx-zigzag:last-child{margin-bottom:0}
/* Ademruimte tussen een tekst- of beeldblok en het volgende blok met
   beeld en tekst. Zonder dit plakt een bijschrift tegen het labeltje
   van het blok eronder. */
.wp-block-group + .mx-zigzag,.mx-breed-tekst + .mx-zigzag{margin-top:64px}
.mx-zigzag + .wp-block-group{margin-top:12px}
.mx-zigzag.om .mx-zig-beeld{order:2}
.mx-zig-beeld{display:flex;flex-direction:column}
.mx-zig-beeld figure{margin:0;flex:1 1 auto;min-height:260px;display:flex}
.mx-zig-beeld img{width:100%;height:100%;object-fit:cover;border-radius:var(--rad);display:block;box-shadow:var(--sh)}
.mx-zig-tekst{display:flex;flex-direction:column;justify-content:center}

/* Het citaat onder een foto is een badge, geen tekstblok: strakker tegen de
   foto aan en compacter dan het losse citaat in de lopende tekst. */
/* Citaat als badge bij een foto in een beeldkolom. De marge staat aan de
   kant van de foto, of die er nu boven of onder staat. */
.mx-zig-beeld .mx-citaat{margin:0;padding:12px 16px;font-size:15px;line-height:1.5;flex:0 0 auto;border-radius:0 8px 8px 0}
.mx-zig-beeld figure + .mx-citaat{margin-top:10px}
.mx-zig-beeld .mx-citaat + figure{margin-top:10px}
.mx-zig-tekst h2,.mx-zig-tekst h3{font-size:23px;margin-top:0;margin-bottom:12px;padding-bottom:0;border-bottom:none}
.mx-zig-tekst p{font-size:16px;line-height:1.75;margin-bottom:14px}
.mx-zig-tekst p:last-child{margin-bottom:0}

/* Tekst met een zijkolom die meeloopt */
.mx-zij{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start}
.mx-zij-tekst p{font-size:16px;line-height:1.75;margin-bottom:16px}
/* De tekstkolom begint met een labeltje en een kop; de kaartjes horen
   gelijk te lopen met de eerste alinea daaronder. */
.mx-zij-kolom{position:sticky;top:130px;display:flex;flex-direction:column;gap:12px}
/* Via de ouder, anders wint WordPress' eigen kolomopmaak van deze marge. */
.mx-zij > .mx-zij-kolom{margin-top:76px}
.mx-kaart{background:var(--glt3);border:1px solid var(--rand);border-radius:var(--rad);padding:18px 20px}
.mx-kaart strong{display:block;font-size:24px;color:var(--g);line-height:1.1;margin-bottom:2px}
.mx-kaart span{font-size:13px;color:var(--grijs);line-height:1.4;display:block}
/* Dezelfde kaartjes, maar opgebouwd uit gewone blokken zodat het bestuur
   ze in de editor kan aanpassen in plaats van in rauwe HTML. */
.mx-kaart .mx-kaart-getal{font-size:24px;color:var(--g);line-height:1.1;margin:0 0 2px;font-weight:800}
.mx-kaart .mx-kaart-tekst{font-size:13px;color:var(--grijs);line-height:1.4;margin:0}

/* Uitbrekend beeld en citaat */
.mx-accent{position:relative;margin:44px 0}
.mx-accent img{width:100%;height:340px;object-fit:cover;border-radius:var(--rad);display:block}
.mx-accent figcaption{font-size:13px;color:var(--grijs);margin-top:10px;text-align:center}
/* Uitbreken buiten de tekstkolom. Met margin-left:50% rekent de browser
   tegen de smalle kolom en schuift het beeld links uit beeld; met
   position:relative + left:50% klopt het middelpunt wel. */
.mx-breed{width:min(880px,calc(100vw - 40px));position:relative;left:50%;transform:translateX(-50%);margin-left:0;margin-right:0}
/* Tekst op dezelfde breedte als een uitbrekend beeld, zodat kop en foto
   netjes onder elkaar uitlijnen. */
.mx-breed-tekst{width:min(880px,calc(100vw - 40px));position:relative;left:50%;transform:translateX(-50%);margin-left:0;margin-right:0}
.mx-breed-tekst p{font-size:17px;line-height:1.75}
.mx-citaat{border-left:4px solid var(--g);background:var(--glt);padding:22px 26px;border-radius:0 var(--rad) var(--rad) 0;font-size:19px;line-height:1.6;font-style:italic;color:var(--txt);margin:36px 0}
.mx-citaat p{font-size:inherit;line-height:inherit;color:inherit;margin:0}
/* Staat het citaat bóven een foto, dan hoort het er strak op aan te sluiten. */
.mx-citaat + .wp-block-image{margin-top:18px}

/* Intro: tekst links, staand beeld rechts */
.mx-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center}
.mx-intro-tekst p{font-size:16px;line-height:1.75;margin-bottom:16px}
.mx-intro-tekst p:last-child{margin-bottom:0}
.mx-intro-beeld img{width:100%;height:360px;object-fit:cover;border-radius:var(--rad);display:block;box-shadow:var(--sh)}
.mx-intro-beeld figure{margin:0}
.mx-intro-beeld figcaption{font-size:13px;color:var(--grijs);margin-top:10px}

/* Blokkenraster */
.mx-raster3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mx-raster2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mx-blok{background:#fff;border:1px solid var(--rand);border-radius:var(--rad);padding:24px;transition:box-shadow .2s,border-color .2s}
.mx-blok:hover{box-shadow:0 6px 20px rgba(0,0,0,.07);border-color:var(--glt2)}
.mx-blok h3,.mx-blok h4{font-size:16px;font-weight:800;color:var(--zw);margin-bottom:8px;line-height:1.35}
.mx-blok p{font-size:15px;line-height:1.7;margin:0}
.mx-blok-icoon{width:42px;height:42px;border-radius:10px;background:var(--glt);display:flex;align-items:center;justify-content:center;color:var(--g);margin-bottom:14px}

/* Inklapbare vragen */
.mx-vragen{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.mx-vragen details,.mx-vragen .wp-block-details{border:1px solid var(--rand);border-radius:var(--rad);background:#fff;overflow:hidden;margin:0;padding:0}
.mx-vragen details[open]{border-color:var(--glt2);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.mx-vragen summary{cursor:pointer;padding:16px 20px;font-size:16px;font-weight:800;color:var(--zw);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.mx-vragen summary::-webkit-details-marker{display:none}
.mx-vragen summary::after{content:'+';font-size:22px;font-weight:400;color:var(--g);flex-shrink:0;line-height:1}
.mx-vragen details[open] summary::after{content:'\2013'}
.mx-vragen summary:hover{background:var(--glt3)}
.mx-vragen details>*:not(summary){padding:0 20px 18px;font-size:15px;line-height:1.75;color:var(--grijs);margin:0}
.mx-antwoord{padding:0 20px 18px;font-size:15px;line-height:1.75;color:var(--grijs)}

/* Cijferrij */
.mx-cijferrij{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mx-cijfer{background:#fff;border:1px solid var(--rand);border-radius:var(--rad);padding:26px 18px;text-align:center}
.mx-cijfer strong{display:block;font-size:34px;color:var(--g);line-height:1;margin-bottom:6px}
.mx-cijfer span{font-size:13px;color:var(--grijs);line-height:1.4}

/* Het labeltje boven een kop is overal even groot en staat overal even dicht
   op die kop. Zonder deze regel wint een algemene p-regel binnen een blok
   (bijvoorbeeld .mx-zig-tekst p) en werd het labeltje daar 16px in plaats
   van 11px. */
.mx-zig-tekst .s-lbl,.mx-lees .s-lbl,.mx-zij-tekst .s-lbl,.mx-breed-tekst .s-lbl,
.sec-kop-midden .s-lbl,.leestekst-binnen .s-lbl{font-size:13px;line-height:1.4;margin-bottom:4px;font-weight:800;letter-spacing:.09em;color:var(--g)}
.s-lbl + h2,.s-lbl + h3{margin-top:0}

/* ── Leestekst ──
   Lopende tekst hoort niet in een kolom van een tweekolomsraster: die tekst
   is meestal veel langer dan het blok ernaast, waardoor er een lang leeg vlak
   naast komt te staan. Een eigen sectie met een vaste leesbreedte leest
   prettiger: ongeveer 70 tekens per regel, gecentreerd op de pagina. */
.leestekst{padding-top:0}
.leestekst .wrap{max-width:1080px}
/* 620px bij 17px levert ongeveer 80 tekens per regel. Bij de oude 720px en
   15px waren dat er 110 — te veel: je oog verliest dan de volgende regel. */
.leestekst-binnen{max-width:620px;margin:0 auto;font-size:17px}
.leestekst-binnen p,.leestekst-binnen li{font-size:17px;line-height:1.75}
.leestekst-binnen>*+*{margin-top:20px}
/* Beeld mag breder zijn dan de tekstkolom: dat geeft lucht en laat de foto's
   tot hun recht komen zonder de leesbaarheid van de tekst aan te tasten. */
/* Alleen directe kinderen mogen uitbreken. Zonder de > pakte deze regel ook
   de losse foto's bínnen een galerij, en die schoven dan het scherm uit. */
.leestekst-binnen>.wp-block-image,.leestekst-binnen>.wp-block-gallery{margin:32px 0;width:min(820px,calc(100vw - 40px));position:relative;left:50%;transform:translateX(-50%)}
.leestekst-binnen>.wp-block-image img{width:100%;height:auto;border-radius:var(--rad)}

/* Veelgestelde vragen leesbaarder: iets meer lucht tussen vraag en antwoord */
.leestekst-binnen h3{margin-top:28px}
.leestekst-binnen h3+p{margin-top:8px}

/* ── Wijkkaart op Over ons ── */
.sec-kaart{padding-top:0}
/* Sectiekop gecentreerd boven een gecentreerd beeld. */
/* Gecentreerde sectiekop krijgt lucht boven zich, zodat hij niet tegen het
   bijschrift van de foto erboven plakt. */
.sec-kop-midden{text-align:center;margin-bottom:24px;margin-top:64px}
/* Kop boven de wijkkaart: zelfde formaat als een kop in een beeld-en-tekstblok,
   niet zo groot als een sectiekop. */
.kaart-kop{font-size:23px;margin:0}
/* Uitgelichte zin over de volle contentbreedte, tussen twee secties in. */
/* De losse zin tussen de kerndoelen en de cijfers. De sectie deelt de grijze
   achtergrond van de banden erboven en eronder, zodat er geen witte strook
   tussen valt. De zin zelf staat in een licht groen kaartje — net als de
   witte kaartjes erboven, maar met een accentkleur zodat hij opvalt zonder
   het zware kader met dikke rand van de gewone citaten. */
.sec-citaat{padding:0 0 26px}
.mx-citaat--breed{
  max-width:680px;margin:0 auto;padding:20px 30px;
  background:var(--glt);border:none;border-radius:var(--rad);
  text-align:center;font-size:18px;line-height:1.65;color:var(--txt)}
.sec-kop-midden:first-child{margin-top:0}
/* Vervolglink rechts onder een rij kaarten. */
.arrow-link-rechts{display:flex;justify-content:flex-end;margin-top:24px}
.wijkkaart{margin:0;text-align:center}
.wijkkaart img{max-width:600px;width:100%;height:auto;border-radius:var(--rad);box-shadow:var(--sh);display:block;margin:0 auto}
.wijkkaart figcaption{font-size:13px;color:var(--grijs);margin-top:10px}

/* ── 38c. DONEREN ─────────────────────────────────────────── */
.doneer-layout{display:grid;grid-template-columns:1fr;gap:40px;padding:52px 0}
.doneer-info h2{font-size:22px;margin-bottom:14px}
.doneer-info h2:not(:first-child){margin-top:34px}
.bank-kaart{background:#fff;border:1px solid var(--rand);border-radius:12px;overflow:hidden;margin-top:16px}
.bank-rij{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--rand)}
.bank-rij:last-child{border-bottom:none}
.bank-lbl{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--grijs);flex-shrink:0}
.bank-val{font-size:15px;font-weight:700;color:var(--zw);text-align:right}
/* Een rekeningnummer is data, geen lopende tekst. In Nunito met extra
   letterafstand ziet het er uitgerekt uit en lopen de cijfers niet in de
   pas. Een vaste-breedte-lettertype zet elk cijfer even breed, waardoor de
   groepjes van vier onder elkaar uitlijnen en overtypen makkelijker wordt. */
.bank-iban,.bank-code,.bol-code{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  font-variant-numeric:tabular-nums;letter-spacing:0;font-weight:600}
.bank-iban{font-size:17px;color:var(--zw);white-space:nowrap}
.bank-code{font-size:15px}
/* Dezelfde behandeling voor elk ander identificatienummer op de site,
   zoals het KvK-nummer in de footer. Eén regel, overal gelijk. */
/* Browsers verkleinen monospace-tekst standaard (14px wordt 12,22px).
   Met een expliciete em-waarde volgt de code de tekst eromheen. */
.bol-code{font-size:1em}
/* Telefoonnummers blijven in Nunito — ze staan tussen gewone tekst — maar
   krijgen wel cijfers van gelijke breedte, zodat ze netjes uitlijnen. */
a[href^='tel:'],.ftr-kaart-val,.cg-kaart-val,.vr-hulp-knop{font-variant-numeric:tabular-nums}
.doneer-doelen{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.doneer-doelen .doel-kaart{margin:0}
.doneer-info .pb-info-box{margin-top:28px}
.doneer-info .pb-info-box p{margin-top:6px}
.doneer-info .pb-info-box a{color:var(--g);font-weight:700}

/* ── 39. RESPONSIEF — eerst min-width oplopend, daarna max-width als correctie ── */

/* Het menu naast het logo heeft met negen items ruim 1060px nodig. Daaronder
   blijft het hamburgermenu staan; anders zou de header gaan knellen op tablets
   en kleine laptops. */

@media (prefers-reduced-motion:reduce){.wpcf7-spinner::before{animation:none}}

@media (min-width:480px) {
  .hero-btns{flex-direction:row;flex-wrap:wrap}
  .sub-btn{width:auto}
  .ftr-kolommen{flex-direction:row;justify-content:space-between;gap:28px;flex-wrap:wrap}
}

@media (min-width:540px) {
  .rg{grid-template-columns:1fr 1fr}
  .doelen-grid{grid-template-columns:1fr 1fr}
}

@media (min-width:560px) {
  .ng{grid-template-columns:1fr 1fr}
}

@media (min-width:600px) {
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .stat{border-bottom:none}
  .stat:nth-child(2n){border-right:1px solid var(--rand)}
  .stat:last-child{border-right:none}
}

@media (min-width:640px) {
  .kdoel-grid{grid-template-columns:repeat(4,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .bestuur-grid{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:768px) {
  .contact-grid{grid-template-columns:1fr 1fr;gap:56px}
  .detail-grid{grid-template-columns:1fr 300px;gap:48px;align-items:start}
}

@media (min-width:900px) {
  .ng{grid-template-columns:repeat(3,1fr)}
  .rg{grid-template-columns:repeat(3,1fr)}
  .pb-layout{grid-template-columns:1fr 360px;gap:56px;align-items:start}
  .vr-layout{grid-template-columns:400px 1fr;gap:56px;align-items:start}
  .doneer-layout{grid-template-columns:400px 1fr;gap:56px;align-items:start}
}

@media (min-width:960px) {
  .ftr-grid{grid-template-columns:1.1fr 1fr;gap:64px}
}

@media (min-width:1060px) {
  .ham,.mob-nav{display:none!important}
  .nav-desk{display:flex;align-items:center;gap:2px}
  .nav-desk a{padding:8px 11px;font-size:14px;font-weight:700;color:var(--grijs);border-radius:8px;transition:background .15s,color .15s;white-space:nowrap;background:transparent}
  .nav-desk a:hover,.nav-desk a.actief{background:var(--glt);color:var(--g)}
  .nav-desk .cta{background:var(--g)!important;color:#fff!important;margin-left:6px}
  .nav-desk .cta:hover,.nav-desk .cta.actief{background:var(--gdk)!important}
}

@media(max-width:860px){
  .bank-rij{flex-direction:column;align-items:flex-start;gap:4px}
  .bank-val{text-align:left}
  .bank-iban{white-space:normal;font-size:16px}
  .leestekst-binnen>.wp-block-image,.leestekst-binnen>.wp-block-gallery{width:100%;position:static;left:auto;transform:none}
  .mx-zigzag,.mx-zij,.mx-raster3,.mx-raster2,.mx-intro{grid-template-columns:1fr}
  .mx-zigzag.om .mx-zig-beeld{order:0}
  .mx-zij-kolom{position:static}
  .mx-zij > .mx-zij-kolom{margin-top:0}
  .mx-cijferrij{grid-template-columns:1fr 1fr}
  .mx-breed{width:100%;position:static;left:auto;transform:none;margin-left:0}
  .mx-breed-tekst{width:100%;position:static;left:auto;transform:none}
}

@media (max-width:820px){
  .hero--overgang .hero-media,.hero--snede .hero-media{inset:auto 0 0 0;height:42%;clip-path:none;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);mask-image:linear-gradient(180deg,transparent,#000 55%)}
  .hero--overgang,.hero--snede{padding-bottom:150px}
  .hero--overgang .wrap>*,.hero--snede .wrap>*,.hero--uitbreek .wrap>*{max-width:none}
  .hero--uitbreek .hero-uitbreek{position:static;width:100%;max-width:none;margin-top:24px;height:190px}
  .hero--uitbreek{padding-bottom:32px}
  .hero--uitbreek+*{padding-top:52px}
  .hero--onderaf.pghero,.hero--paneel.pghero,.hero--onderaf.hero,.hero--paneel.hero{min-height:0}
  .hero--paneel .hero-paneel{padding:24px 22px}
}

@media (max-width:768px) {
  .bestuur-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:580px) {
  .ag-kaart-foto{width:104px}
}

@media (max-width:480px) {
  /* Op een smal scherm kost 30px zijpadding te veel tekstbreedte. */
  .mx-citaat--breed{padding:18px;font-size:17px}

  .vrij{grid-template-columns:1fr}
  .veld-rij{grid-template-columns:1fr}
}

/* 40. Zeer smalle schermen (vanaf 320px, o.a. iPhone SE en Galaxy Fold)
   ------------------------------------------------------------------ */
.stats-grid>*,.kdoel-grid>*,.ng>*,.rg>*,.ftr-grid>*,.contact-grid>*,.ot-grid>*,.veld-rij>*,.doelen-grid>*,.bestuur-grid>*,.pb-layout>*,.vr-layout>*,.detail-grid>*,.thumbnail-grid>*,.mx-zigzag>*,.mx-zij>*,.mx-intro>*,.mx-raster3>*,.mx-raster2>*,.mx-cijferrij>*,.doneer-layout>*,.cg-kaart-tekst,.ftr-kaart-tekst{min-width:0}
/* Lange waarden (e-mailadres) mogen afbreken in plaats van de kaart oprekken. */
.cg-kaart-val,.ftr-kaart-val{overflow-wrap:anywhere}

@media (max-width:360px){
  .wrap{padding:0 14px}
  /* "Bewonersorganisatie" is één woord en kan niet afbreken; op zeer smalle
     schermen iets kleiner zodat het in het logo blijft passen. */
  .ftr-logo-r1,.ftr-logo-r2{font-size:14px}
  .form-wrap-body,.pb-form-body{padding:22px 16px}
  .form-wrap-head,.pb-form-head{padding:20px 16px}
  .kdoel-grid{grid-template-columns:1fr}
}

/* 41. Cookietoestemming
   ------------------------------------------------------------------
   Stapelvolgorde op deze site, van onder naar boven:
     999    .hdr          de meelopende koptekst
     1000   .ck-balk      de toestemmingsbalk, moet boven de koptekst
     1200   .ck-paneel    het instellingenvenster, moet boven allebei
     2000   .overslaan    de link "naar de inhoud", altijd bereikbaar
     9999+  .lightbox     de fotoweergave op volledig scherm
   Wie hier iets toevoegt: houd deze volgorde aan.
   ------------------------------------------------------------------ */
.ck-balk{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:#fff;border-top:3px solid var(--g);box-shadow:0 -4px 24px rgba(0,0,0,.14)}
.ck-balk-binnen{width:100%;max-width:1080px;margin:0 auto;padding:20px;display:grid;grid-template-columns:1fr;gap:16px;align-items:center}
.ck-titel{font-size:18px;margin:0 0 6px}
.ck-balk-tekst p{font-size:15px;line-height:1.55;margin:0;color:var(--txt)}
.ck-balk-tekst a{color:var(--g);font-weight:700}
.ck-balk-knoppen{display:flex;flex-wrap:wrap;gap:10px}
.ck-knop{font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;padding:12px 22px;border-radius:10px;border:2px solid var(--g);cursor:pointer;transition:background .15s,color .15s;min-width:0}
.ck-knop--ja{background:var(--g);color:#fff}
.ck-knop--ja:hover{background:#2f5f17}
.ck-knop--nee{background:#fff;color:var(--g)}
.ck-knop--nee:hover{background:var(--glt)}
.ck-knop--kies{background:none;border-color:transparent;color:var(--grijs);text-decoration:underline;padding:12px 8px}
.ck-knop--kies:hover{color:var(--g)}

.ck-paneel{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.ck-paneel-doos{background:#fff;border-radius:14px;width:100%;max-width:620px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,.3)}
.ck-paneel-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;border-bottom:1px solid var(--rand)}
.ck-paneel-kop h2{margin:0;font-size:20px}
.ck-sluit{background:none;border:none;font-size:28px;line-height:1;color:var(--grijs);cursor:pointer;padding:0 4px}
.ck-sluit:hover{color:var(--zw)}
.ck-paneel-body{padding:20px 24px;overflow-y:auto}
.ck-paneel-intro{font-size:15px;color:var(--grijs);margin:0 0 18px;line-height:1.55}
.ck-cat{padding:16px 0;border-bottom:1px solid var(--rand)}
.ck-cat:last-child{border-bottom:none}
.ck-cat-kop{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px}
.ck-cat-titel{font-size:16px;font-weight:800;color:var(--zw)}
.ck-cat-vast{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--grijs);background:var(--glt);padding:5px 10px;border-radius:20px;white-space:nowrap}
.ck-cat-tekst{font-size:15px;line-height:1.55;color:var(--grijs);margin:0}
.ck-schakel{display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0}
.ck-schakel input{position:absolute;opacity:0;width:0;height:0}
.ck-schakel-vorm{display:block;width:46px;height:26px;border-radius:20px;background:#c9cdc7;position:relative;transition:background .18s}
.ck-schakel-vorm::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.ck-schakel input:checked + .ck-schakel-vorm{background:var(--g)}
.ck-schakel input:checked + .ck-schakel-vorm::after{transform:translateX(20px)}
.ck-schakel input:focus-visible + .ck-schakel-vorm{outline:3px solid var(--g);outline-offset:3px}
.ck-schakel-tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ck-paneel-voet{padding:18px 24px;border-top:1px solid var(--rand);display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#fafbfa}
.ck-paneel-link{margin-left:auto;font-size:14px;font-weight:700;color:var(--g)}
body.ck-open{overflow:hidden}

/* Plaatsvervanger voor een externe kaart, tot de bezoeker ja zegt. */
.ck-media{position:relative;min-height:220px;display:flex;align-items:center;justify-content:center;background:var(--glt);border:1px dashed var(--g);border-radius:10px;padding:20px;text-align:center}
.ck-media iframe{width:100%;height:100%;border:0;display:block;border-radius:10px}
.ck-media--geladen{display:block;min-height:0;padding:0;border:none;background:none}
.ck-media-vraag{max-width:340px}
.ck-media-tekst{font-size:14px;line-height:1.55;color:var(--txt);margin:0 0 14px}
.ck-media-knop{font-family:'Nunito',sans-serif;font-size:15px;font-weight:800;padding:11px 22px;border-radius:10px;border:none;background:var(--g);color:#fff;cursor:pointer}
.ck-media-knop:hover{background:#2f5f17}
.ck-media-altijd{display:block;margin:10px auto 0;background:none;border:none;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;color:var(--g);text-decoration:underline;cursor:pointer}

@media (min-width:860px){
  .ck-balk-binnen{grid-template-columns:1fr auto;gap:28px;padding:22px 20px}
  .ck-balk-knoppen{flex-wrap:nowrap}
}
@media (max-width:520px){
  .ck-balk-knoppen{flex-direction:column;align-items:stretch}
  .ck-knop{width:100%;text-align:center}
  .ck-paneel{padding:0}
  .ck-paneel-doos{max-width:none;max-height:100vh;height:100%;border-radius:0}
  .ck-paneel-voet{flex-direction:column;align-items:stretch}
  .ck-paneel-link{margin-left:0;text-align:center;padding-top:4px}
}
.bol-cookie-lijst{margin:20px 0;padding:0}
.bol-cookie-lijst dt{font-weight:800;color:var(--zw);margin:18px 0 4px;font-size:16px}
.bol-cookie-lijst dd{margin:0;color:var(--grijs);line-height:1.65}
.bol-cookie-vast{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--grijs);background:var(--glt);padding:4px 9px;border-radius:20px;vertical-align:middle;margin-left:6px}

/* 42. Printen
   ------------------------------------------------------------------
   Bewoners printen weleens de agenda of de contactgegevens. Op papier
   hebben menu's, formulieren en knoppen geen nut, dus die laten wij weg.
   Wat overblijft is de tekst, zwart op wit, met het webadres eronder.
   ------------------------------------------------------------------ */
@media print {
  /* Alles wat op papier niets toevoegt. */
  .hdr, .ftr-nieuwsbrief, .ck-balk, .ck-paneel, .overslaan,
  .deelknoppen, .filter-tab, .pb-filter, .cta-blok, .btn, .sub-btn,
  .submit-btn, .pb-submit, .btn-sidebar, .btn-sidebar-lijn,
  .form-wrap, .pb-form, .vr-form, .ck-media, .kaart-embed,
  .ftr-kaart-embed, .pb-reactie-btn, .lightbox, .nav-toggle,
  form, .wpcf7, .arrow-link, .arrow-link-rechts { display: none !important; }

  /* Zwart op wit, geen kleurvlakken die inkt kosten.
     Alles op zwart zetten is nodig: witte tekst hoort bij een gekleurde
     achtergrond, en die halen wij hier juist weg. Zonder deze regel
     verdwijnt de tekst van de kopbalk en de groene blokken op papier. */
  body, body * { color: #000 !important; }
  body { background: #fff !important; font-size: 11pt; line-height: 1.45; }
  .cta-blok, .home-prikbord, .groen-blok, .ftr, .sec--groen,
  .ag-kaart-datum, .s-lbl, .kdoel, .mx-citaat { background: none !important; }
  .sec, .leestekst, .ftr { background: #fff !important; padding: 0 !important; }
  .pghero, .hero--onderaf, .hero--overgang, .hero--diagonaal,
  .hero--paneel, .hero--snede, .hero--uitbreek {
    background: none !important; color: #000 !important; padding: 0 0 12pt !important; min-height: 0 !important;
  }
  /* Even specifiek als de schermregels die hier wit opleggen
     (.pghero .intro en .pghero h1 staan op !important), en later in het
     bestand, zodat deze wint. */
  .pghero h1, .pghero p, .pghero .intro, .pghero .s-lbl,
  .hero h1, .hero-sub, .hero-tag,
  .cij-box .s-lbl, .ag-blk, .ag-blk strong, .ag-blk span,
  .ag-kaart-datum, .ag-kaart-datum strong, .ag-kaart-datum span { color: #000 !important; }
  .heeft-foto .hero-media, .pghero img { display: none !important; }
  h1, h2, h3, h4 { color: #000 !important; border: none !important; padding-bottom: 0 !important; }

  /* Ruimte teruggeven: één kolom leest op papier het prettigst. */
  .wrap, .mx-breed, .mx-breed-tekst, .mx-lees { width: auto !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important; position: static !important; left: auto !important; transform: none !important; }
  .mx-zigzag, .mx-zij, .mx-raster2, .mx-raster3, .mx-cijferrij,
  .contact-grid, .ftr-grid, .doelen-grid, .bestuur-grid { display: block !important; }
  .mx-blok, .mx-kaart, .nk, .rk { border: 1px solid #ccc !important; box-shadow: none !important; page-break-inside: avoid; }

  /* Niet afbreken op ongelukkige plekken. */
  h1, h2, h3, h4 { page-break-after: avoid; }
  img, figure, .ag-kaart, .pb-kaart { page-break-inside: avoid; }
  img { max-width: 100% !important; }

  /* Dichtgeklapte vragen openen, anders mist de lezer de antwoorden. */
  details { display: block !important; }
  details > *:not(summary) { display: block !important; }

  /* Bij een link het adres tonen — op papier kun je er niet op klikken. */
  .body-tekst a[href^="http"]::after,
  .leestekst-binnen a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; word-break: break-all; }
  a { color: #000 !important; text-decoration: underline; }

  /* Onderaan iedere pagina waar dit vandaan komt. */
  @page { margin: 18mm 15mm; }
}