/* ==========================================================================
   Dorpsbelangen Pekela — huisstijl
   ========================================================================== */

:root{
  --ink:#14201c;
  --ink-zacht:#4a5c55;
  --groen:#1e5b4a;
  --groen-diep:#12382e;
  --groen-licht:#e7f0ea;
  --oker:#dd9c24;
  --oker-licht:#fdf3de;
  --blauw:#2c6e8f;
  --blauw-licht:#e6eff4;
  --paars:#6b5192;
  --paars-licht:#efeaf6;
  --rood:#b6462f;
  --rood-licht:#fbeae6;
  --papier:#fbf8f2;
  --zacht:#f2ede2;
  --wit:#fff;
  --rand:rgba(20,32,28,.12);
  --rand-sterk:rgba(20,32,28,.22);
  --schaduw:0 1px 2px rgba(20,32,28,.06),0 8px 24px -12px rgba(20,32,28,.18);
  --schaduw-op:0 2px 4px rgba(20,32,28,.07),0 18px 40px -16px rgba(20,32,28,.28);
  --r:14px;
  --r-groot:24px;
  --serif:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --breed:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
svg{width:1.15em;height:1.15em;flex:none;vertical-align:-.16em}
a{color:var(--groen);text-decoration-color:rgba(30,91,74,.3);text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 .5em;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
.wrap{width:min(100% - 2.5rem,var(--breed));margin-inline:auto}
.smal{width:min(100% - 2.5rem,740px);margin-inline:auto}

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font:600 .95rem/1 var(--sans);letter-spacing:.01em;
  padding:.95em 1.5em;border-radius:100px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:.18s ease;white-space:nowrap;
}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn-primair{background:var(--groen);color:#fff}
.btn-primair:hover{background:var(--groen-diep);transform:translateY(-1px);box-shadow:var(--schaduw-op)}
.btn-oker{background:var(--oker);color:#26200f}
.btn-oker:hover{background:#c9891a;transform:translateY(-1px)}
.btn-lijn{border-color:var(--rand-sterk);color:var(--ink);background:transparent}
.btn-lijn:hover{border-color:var(--ink);background:rgba(20,32,28,.04)}
.btn-wit{background:#fff;color:var(--groen-diep)}
.btn-wit:hover{transform:translateY(-1px);box-shadow:var(--schaduw-op)}
.btn-lijn-licht{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(4px)}
.btn-lijn-licht:hover{background:#fff;color:var(--groen-diep);border-color:#fff}
.btn-klein{padding:.6em 1.1em;font-size:.85rem}

/* ---------- Labels ---------- */
.label{
  display:inline-flex;align-items:center;gap:.4em;
  font:600 .72rem/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  padding:.5em .85em;border-radius:100px;background:var(--zacht);color:var(--ink-zacht);
}
.label svg{width:1em;height:1em}
.label.groen{background:var(--groen-licht);color:#17503f}
.label.blauw{background:var(--blauw-licht);color:#1e5570}
.label.paars{background:var(--paars-licht);color:#53407a}
.label.rood{background:var(--rood-licht);color:#93331f}
.label.oker{background:var(--oker-licht);color:#8a5d08}

/* ---------- Header (zwevend) ---------- */
:root{--kop-h:92px}
.kop{position:sticky;top:0;z-index:60;padding:14px 14px 0;pointer-events:none}
.kop-in{
  pointer-events:auto;width:min(100% - 2rem,1320px);margin-inline:auto;
  display:flex;align-items:center;gap:1.1rem;padding:.7rem .8rem .7rem 1.35rem;
  background:#fff;border-radius:20px;border:1px solid rgba(20,32,28,.07);
  box-shadow:0 12px 34px -16px rgba(8,30,24,.32),0 2px 6px rgba(8,30,24,.05);
}
.is-home .hero2{margin-top:calc(-1 * var(--kop-h))}
.is-home .hero2-inhoud{padding-top:clamp(8rem,13vw,10.5rem)}
body:not(.is-home) .kop + .pagina-kop{margin-top:calc(-1 * var(--kop-h));padding-top:calc(var(--kop-h) + clamp(2rem,4vw,3.25rem))}
.merk{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--ink);flex:none;position:relative;z-index:2}
.merk-mark{width:48px;height:48px;flex:none;object-fit:contain;display:block}
.merk-tekst strong{display:block;font-family:var(--serif);font-size:1.12rem;line-height:1.15;font-weight:600}
.merk-tekst span{display:block;font-size:.74rem;color:var(--ink-zacht);letter-spacing:.03em}

.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.nav a{
  font:550 .93rem/1 var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap;
  padding:.65rem .62rem;border-radius:9px;transition:.15s;position:relative;
}
.nav a:hover{background:var(--groen-licht)}
.nav a.actief{color:var(--groen)}
.nav a.actief::after{content:"";position:absolute;left:.62rem;right:.62rem;bottom:.28rem;height:2px;border-radius:2px;background:var(--oker)}
.kop-cta{display:flex;gap:.5rem;align-items:center;flex:none;position:relative;z-index:2}
.nav-mobiel{display:none}
.menu-knop{display:none;background:var(--wit);border:1.5px solid var(--rand);border-radius:12px;padding:.5rem;cursor:pointer;color:var(--ink)}
.menu-knop svg{width:22px;height:22px;display:block}

/* ---------- Hero (2026) ---------- */
.hero2{padding:14px 14px clamp(2.5rem,5vw,4rem);position:relative}
.hero2-kader{
  position:relative;isolation:isolate;overflow:hidden;border-radius:30px;
  min-height:min(80vh,780px);display:flex;align-items:flex-end;background:var(--groen-diep);
}
.hero2-foto{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  animation:heroZoom 16s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes heroZoom{from{transform:scale(1.09)}to{transform:scale(1.01)}}
.hero2-kader::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(8,30,24,.86) 0%,rgba(8,30,24,.62) 42%,rgba(8,30,24,.18) 78%,rgba(8,30,24,.08) 100%),
    linear-gradient(0deg,rgba(8,30,24,.7) 0%,rgba(8,30,24,0) 50%);
}
.hero-acties{display:flex;gap:.65rem;flex-wrap:wrap;margin-bottom:0}
.hero2-inhoud{
  width:min(100% - 3rem,var(--breed));margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,5vw,5rem);align-items:end;
  padding:clamp(6rem,11vw,9rem) 0 clamp(6rem,8vw,7.25rem);color:#fff;
}
.hero2-kicker{
  display:flex;align-items:center;gap:.8rem;margin:0 0 1.4rem;
  font:600 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78);
}
.hero2-kicker::before{content:"";width:30px;height:1px;background:var(--oker)}
.hero2 h1{
  font-size:clamp(2rem,3.9vw,3.35rem);line-height:1.06;letter-spacing:-.03em;font-weight:500;
  color:#fff;margin:0 0 1.4rem;max-width:26ch;text-wrap:balance;
}
.hero2 h1 em{font-style:italic;font-weight:400;color:#f2c56a;white-space:nowrap}
.hero2-lead{font-size:1.08rem;line-height:1.65;color:rgba(255,255,255,.8);max-width:31em;margin:0 0 2rem}
.hero2-cijfers{display:flex;flex-wrap:wrap;gap:1rem 0;margin:2.75rem 0 0;padding:0}
.hero2-cijfers dd{white-space:nowrap}
/* Altijd ruimte voor de schuifbalk: zo schuift de menubalk niet op tussen korte en lange pagina's */
html{scrollbar-gutter:stable}
.hero2-cijfers div{padding:0 1.75rem;border-left:1px solid rgba(255,255,255,.2)}
.hero2-cijfers div:first-child{padding-left:0;border-left:0}
.hero2-cijfers dd{margin:0;font:500 1.75rem/1 var(--serif);color:#fff;letter-spacing:-.02em}
.hero2-cijfers dt{order:2;font-size:.72rem;letter-spacing:.04em;color:rgba(255,255,255,.6);margin-top:.45rem}
.hero2-cijfers div{display:flex;flex-direction:column}

.hero2-agenda{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:24px;padding:.45rem;
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5);
}
.hero2-agenda-kop{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem 1rem .6rem}
.hero2-agenda-kop h2{margin:0;font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.hero2-agenda-kop a{display:inline-flex;align-items:center;gap:.4em;font:600 .82rem/1 var(--sans);color:#fff;text-decoration:none}
.hero2-agenda-kop a svg{width:14px;height:14px;transition:transform .2s}
.hero2-agenda-kop a:hover svg{transform:translateX(3px)}
.hero2-item{display:flex;align-items:center;gap:.95rem;padding:.7rem;border-radius:16px;text-decoration:none;color:#fff;transition:background .2s}
.hero2-item:hover{background:rgba(255,255,255,.12)}
.hero2-datum{
  flex:none;width:50px;height:54px;border-radius:13px;background:#fff;color:var(--groen-diep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
}
.hero2-datum b{font:600 1.25rem/1 var(--serif)}
.hero2-datum span{font:600 .6rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-zacht);margin-top:.28rem}
.hero2-item-tekst{min-width:0;flex:1}
.hero2-item h3{margin:0 0 .2rem;font:600 .93rem/1.3 var(--sans);letter-spacing:0;color:#fff}
.hero2-item p{margin:0;font-size:.78rem;color:rgba(255,255,255,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero2-item-pijl{flex:none;opacity:0;transform:translateX(-4px);transition:.2s}
.hero2-item-pijl svg{width:16px;height:16px}
.hero2-item:hover .hero2-item-pijl{opacity:1;transform:none}
.hero2-leeg{margin:0;padding:1rem;color:rgba(255,255,255,.7);font-size:.9rem}

.snel{
  position:relative;z-index:2;width:min(100% - 3rem,var(--breed));margin:-3.4rem auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);padding:.5rem;
  background:var(--wit);border-radius:24px;border:1px solid var(--rand);
  box-shadow:0 34px 70px -38px rgba(8,30,24,.45);
}
.snel a{position:relative;display:flex;align-items:center;gap:1rem;padding:1.2rem 1.3rem;border-radius:18px;text-decoration:none;color:var(--ink);transition:background .2s}
.snel a + a::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:var(--rand);transition:opacity .2s}
.snel a:hover{background:var(--groen-licht)}
.snel a:hover::before,.snel a:hover + a::before{opacity:0}
.snel-tekst{flex:1;min-width:0}
.snel small{display:block;margin-bottom:.45rem;font:600 .66rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--oker)}
.snel b{display:block;font:600 1.06rem/1.25 var(--serif);letter-spacing:-.01em}
.snel-pijl{
  flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--rand-sterk);
  display:grid;place-items:center;color:var(--groen);transition:.25s;
}
.snel-pijl svg{width:15px;height:15px}
.snel a:hover .snel-pijl{background:var(--groen);border-color:var(--groen);color:#fff;transform:rotate(-45deg)}

/* Compacte agenda-items */
.mini-item{display:flex;gap:.9rem;padding:.85rem 1.25rem;border-bottom:1px solid var(--rand);text-decoration:none;color:inherit;transition:.15s}
.mini-item:last-child{border-bottom:0}
.mini-item:hover{background:var(--groen-licht)}
.mini-datum{
  flex:none;width:50px;text-align:center;border-radius:10px;background:var(--zacht);
  padding:.42rem .2rem;line-height:1.1;
}
.mini-datum b{display:block;font-family:var(--serif);font-size:1.18rem;color:var(--groen-diep)}
.mini-datum span{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-zacht)}
.mini-tekst h4{font-size:.93rem;font-family:var(--sans);font-weight:600;margin:0 0 .15rem;line-height:1.35}
.mini-tekst p{margin:0;font-size:.79rem;color:var(--ink-zacht)}

/* ---------- Snelle ingangen ---------- */
.ingangen{padding:clamp(1rem,3vw,2rem) 0 clamp(3rem,6vw,4.5rem)}
.ingang-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.ingang{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--wit);
  border:1px solid var(--rand);border-radius:var(--r);padding:1.6rem 1.5rem 1.4rem;
  transition:.2s;position:relative;overflow:hidden;
}
.ingang::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--groen);opacity:0;transition:.2s}
.ingang:hover{transform:translateY(-3px);box-shadow:var(--schaduw-op);border-color:var(--rand-sterk)}
.ingang:hover::after{opacity:1}
.ingang-oog{
  display:block;font:600 .7rem/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--oker);margin-bottom:.9rem;
}
.ingang h3{font-size:1.16rem;margin-bottom:.4rem}
.ingang p{margin:0 0 1.25rem;font-size:.89rem;color:var(--ink-zacht);line-height:1.6}
.ingang-meer{
  margin-top:auto;display:inline-flex;align-items:center;gap:.45em;
  font:600 .86rem/1 var(--sans);color:var(--groen);
}
.ingang-meer svg{width:15px;height:15px;transition:transform .2s}
.ingang:hover .ingang-meer svg{transform:translateX(4px)}

/* ---------- Over ons met collage ---------- */
.overons-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
.collage{display:grid;grid-template-columns:1.12fr .88fr;grid-template-rows:1fr 1fr;gap:.85rem;aspect-ratio:1/.9}
.collage figure{margin:0;overflow:hidden;border-radius:var(--r);background:var(--zacht);position:relative}
.collage figure:first-child{grid-row:1/3}
.collage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.collage figure:hover img{transform:scale(1.05)}
.collage figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem .95rem .8rem;
  font:600 .74rem/1.3 var(--sans);color:#fff;
  background:linear-gradient(to top,rgba(10,30,24,.78),transparent);
}
.overons-punten{list-style:none;padding:0;margin:1.5rem 0 2rem;display:grid;gap:.8rem}
.overons-punten li{display:flex;gap:.8rem;align-items:flex-start;font-size:.95rem;color:var(--ink-zacht);line-height:1.6}
.overons-punten svg{width:19px;height:19px;flex:none;color:var(--groen);margin-top:.22rem}

/* ---------- Twee kolommen (inhoud + zijkolom) ---------- */
.twee-kol{display:grid;grid-template-columns:var(--kol,1fr 1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.twee-kol > *{min-width:0}

/* ---------- Sectie ---------- */
.sectie{padding:clamp(3rem,6vw,5rem) 0}
.sectie.wit{background:var(--wit);border-block:1px solid var(--rand)}
.sectie.zacht{background:var(--zacht)}
.sectie-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.5rem;flex-wrap:wrap}
.sectie-kop p{margin:0;color:var(--ink-zacht);max-width:46ch}
.sectie-kop h2{margin-bottom:.3rem}
.sectie-oog{display:inline-flex;align-items:center;gap:.55em;font:600 .78rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--oker);margin-bottom:.85rem}
.sectie-oog::before{content:"";width:22px;height:2px;background:var(--oker);border-radius:2px}

/* ---------- Agenda ---------- */
.agenda-lijst{display:flex;flex-direction:column;gap:.85rem}
.agenda-rij{
  display:grid;grid-template-columns:88px 1fr auto;gap:1.5rem;align-items:center;
  background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);
  padding:1.25rem 1.5rem;text-decoration:none;color:inherit;transition:.18s;
}
.agenda-rij:hover{border-color:var(--groen);box-shadow:var(--schaduw);transform:translateX(3px)}
.agenda-datum{
  text-align:center;border-radius:12px;background:var(--groen-licht);padding:.7rem .4rem;line-height:1.05;
}
.agenda-datum b{display:block;font-family:var(--serif);font-size:1.85rem;color:var(--groen-diep)}
.agenda-datum span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--groen);font-weight:600}
.agenda-datum small{display:block;font-size:.68rem;color:var(--ink-zacht);margin-top:.15rem}
.agenda-info h3{font-size:1.18rem;margin-bottom:.3rem}
.agenda-info p{margin:0 0 .5rem;font-size:.92rem;color:var(--ink-zacht)}
.agenda-meta{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.83rem;color:var(--ink-zacht)}
.agenda-meta span{display:inline-flex;align-items:center;gap:.35em}
.agenda-meta svg{width:14px;height:14px;opacity:.6}
.agenda-pijl{color:var(--groen);flex:none}
.agenda-pijl svg{width:22px;height:22px}

.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.75rem}
.filter{
  font:550 .86rem/1 var(--sans);padding:.6em 1.05em;border-radius:100px;
  border:1.5px solid var(--rand);background:var(--wit);color:var(--ink-zacht);
  cursor:pointer;transition:.15s;text-decoration:none;
}
.filter:hover{border-color:var(--rand-sterk);color:var(--ink)}
.filter.aan{background:var(--groen);border-color:var(--groen);color:#fff}

/* ---------- Agenda: filterbalk ---------- */
.agenda-balk{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:2rem}
.schakel{display:inline-flex;background:var(--zacht);border-radius:100px;padding:.25rem}
.schakel a{
  display:block;padding:.55em 1.15em;border-radius:100px;text-decoration:none;
  font:600 .87rem/1 var(--sans);color:var(--ink-zacht);transition:.18s;
}
.schakel a:hover{color:var(--ink)}
.schakel a.aan{background:var(--groen-diep);color:#fff;box-shadow:0 2px 6px -2px rgba(18,56,46,.5)}
.kies{display:inline-flex;align-items:center;gap:.5rem;background:var(--wit);border:1.5px solid var(--rand);border-radius:100px;padding:.15rem .5rem .15rem 1rem}
.kies > span{display:flex;color:var(--ink-zacht)}
.kies svg{width:15px;height:15px}
.kies select{
  border:0;background:none;padding:.6em 1.6em .6em .2em;font:600 .87rem/1 var(--sans);color:var(--ink);
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5c55' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .35rem center;background-size:15px;
}
.kies select:focus-visible{outline:2px solid var(--groen);outline-offset:3px;border-radius:8px}
.agenda-telling{margin-left:auto;font-size:.85rem;color:var(--ink-zacht)}

/* ---------- Agenda: lijst ---------- */
.maand-groep{margin-bottom:2.25rem}
.maand-kop{
  display:flex;align-items:baseline;gap:.5rem;font-size:1.05rem;margin:0 0 .85rem .25rem;
  text-transform:capitalize;
}
.maand-kop span{color:var(--ink-zacht);font-weight:400}
.agenda-paneel{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r-groot);overflow:hidden}
.agenda-rij2{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;gap:1.35rem;align-items:center;
  padding:1.05rem 1.5rem;border-top:1px solid var(--rand);text-decoration:none;color:inherit;transition:background .15s;
}
.agenda-rij2:first-child{border-top:0}
.agenda-rij2:hover{background:var(--groen-licht)}
.dag{text-align:center;line-height:1.05}
.dag b{display:block;font:500 1.55rem/1 var(--serif);color:var(--groen-diep);letter-spacing:-.02em}
.dag > span{font:600 .66rem/1 var(--sans);text-transform:uppercase;letter-spacing:.09em;color:var(--ink-zacht)}
.agenda-hoofd{min-width:0}
.agenda-titel{display:block;font:600 1.06rem/1.35 var(--serif);letter-spacing:-.01em}
.agenda-onder{display:block;margin-top:.2rem;font-size:.86rem;color:var(--ink-zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agenda-cat{display:inline-flex;align-items:center;gap:.5em;font-size:.8rem;color:var(--ink-zacht);white-space:nowrap}
.agenda-cat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-zacht)}
.stip-groen::before{background:var(--groen)}
.stip-blauw::before{background:var(--blauw)}
.stip-paars::before{background:var(--paars)}
.stip-rood::before{background:var(--rood)}
.stip-oker::before{background:var(--oker)}
.agenda-rij2 .agenda-pijl{opacity:0;transform:translateX(-4px);transition:.18s}
.agenda-rij2:hover .agenda-pijl{opacity:1;transform:none}

/* ---------- Agenda: aanmelden ---------- */
.aanmeld{background:var(--papier);border:1px solid var(--rand);border-radius:var(--r-groot);overflow:hidden}
.aanmeld summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.6rem 1.75rem;cursor:pointer;list-style:none;transition:background .15s;
}
.aanmeld summary::-webkit-details-marker{display:none}
.aanmeld summary:hover{background:var(--zacht)}
.aanmeld summary .sectie-oog{margin-bottom:.5rem}
.aanmeld summary strong{display:block;font:600 1.3rem/1.25 var(--serif);letter-spacing:-.015em}
.aanmeld-sub{display:block;margin-top:.3rem;font-size:.92rem;color:var(--ink-zacht)}
.aanmeld-knop{
  flex:none;width:42px;height:42px;border-radius:50%;background:var(--groen);color:#fff;
  display:grid;place-items:center;transition:transform .25s;
}
.aanmeld-knop svg{width:17px;height:17px;transform:rotate(90deg)}
.aanmeld[open] .aanmeld-knop{transform:rotate(180deg)}
.aanmeld-body{
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.75rem,4vw,3.25rem);align-items:start;
  padding:0 1.75rem 2rem;border-top:1px solid var(--rand);padding-top:2rem;
}

/* ---------- Werkgroepen (kaarten zoals de oude nieuwspagina) ---------- */
.werk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.werk-item{display:flex;min-width:0}
.werk-kaart{
  display:flex;flex-direction:column;width:100%;padding:0;text-align:left;font:inherit;cursor:pointer;
  background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);overflow:hidden;color:inherit;transition:.2s;
}
.werk-kaart:hover{transform:translateY(-4px);box-shadow:var(--schaduw-op)}
.werk-kaart:focus-visible{outline:3px solid var(--oker);outline-offset:2px}
.werk-beeld{display:grid;place-items:center;width:100%;aspect-ratio:16/10;background:var(--zacht);overflow:hidden;position:relative}
.werk-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.werk-kaart:hover .werk-beeld img{transform:scale(1.04)}
.werk-beeld.leeg-beeld{background:var(--tint,var(--groen-licht))}
.werk-beeld.leeg-beeld::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(255,255,255,.5) 11px 22px);
}
.beeld-woord{
  position:relative;z-index:1;font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.9rem);
  line-height:1.1;letter-spacing:-.02em;text-align:center;padding:0 1.25rem;
  color:var(--kleur,var(--groen));opacity:.45;text-wrap:balance;
}
.werk-body{display:flex;flex-direction:column;flex:1;width:100%;padding:1.35rem 1.4rem 1.5rem}
.werk-soort{display:block;margin-bottom:.7rem}
.werk-kaart h3{font-size:1.15rem;margin-bottom:.45rem}
.werk-kaart p{font-size:.9rem;color:var(--ink-zacht);margin:0 0 1rem;line-height:1.6}
.werk-meer{margin-top:auto;font:600 .87rem/1 var(--sans);color:var(--groen);display:inline-flex;align-items:center;gap:.4em}
.werk-meer svg{width:15px;height:15px;transition:.15s}
.werk-kaart:hover .werk-meer svg{transform:translateX(3px)}

/* ---------- Pagina-kop met knop rechts ---------- */
.kop-split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem 3rem;align-items:center;position:relative}
.kop-knop-groot{
  display:flex;align-items:center;gap:1.1rem;max-width:340px;padding:1.25rem 1.4rem;
  background:var(--groen-diep);color:#fff;border-radius:20px;text-decoration:none;
  box-shadow:0 18px 40px -22px rgba(18,56,46,.6);transition:transform .2s,box-shadow .2s;
}
.kop-knop-groot:hover{transform:translateY(-3px);box-shadow:0 24px 46px -22px rgba(18,56,46,.7)}
.kop-knop-groot small{display:block;margin-bottom:.35rem;font:600 .68rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--oker)}
.kop-knop-groot b{display:block;font:600 1.12rem/1.3 var(--serif);letter-spacing:-.01em}
.kop-knop-pijl{flex:none;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;transition:background .2s}
.kop-knop-pijl svg{width:16px;height:16px}
.kop-knop-groot:hover .kop-knop-pijl{background:var(--oker);color:#26200f}

/* ---------- Organisaties ---------- */
.org-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.org-kaart{
  display:flex;gap:1.1rem;background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);
  padding:1.4rem;text-decoration:none;color:inherit;transition:.18s;align-items:flex-start;
}
.org-kaart:hover{border-color:var(--groen);box-shadow:var(--schaduw);transform:translateY(-2px)}
.org-mark{
  width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;
  font:600 1.05rem/1 var(--serif);background:var(--groen-licht);color:var(--groen-diep);overflow:hidden;
}
.org-mark img{width:100%;height:100%;object-fit:cover}
.org-info h3{font-size:1.03rem;margin-bottom:.25rem}
.org-info p{font-size:.87rem;color:var(--ink-zacht);margin:0 0 .6rem;line-height:1.55}
.org-link{font:600 .82rem/1 var(--sans);color:var(--groen);display:inline-flex;align-items:center;gap:.35em}
.org-link svg{width:13px;height:13px}

/* ---------- Stem-band ---------- */
.stem-band{background:var(--groen-diep);color:#fff;position:relative;overflow:hidden}
.stem-band::before{
  content:"";position:absolute;top:-30%;right:-5%;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(221,156,36,.16),transparent 62%);
}
.stem-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;position:relative}
.stem-band h2{color:#fff}
.stem-band .sectie-oog{color:var(--oker)}
.stem-band p{color:rgba(255,255,255,.78)}
.stem-punten{list-style:none;padding:0;margin:1.75rem 0 2rem;display:grid;gap:.85rem}
.stem-punten li{display:flex;gap:.85rem;align-items:flex-start;font-size:.95rem;color:rgba(255,255,255,.86)}
.stem-punten svg{width:20px;height:20px;flex:none;color:var(--oker);margin-top:.15rem}

.poll{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-groot);padding:1.75rem}
.poll h3{color:#fff;font-size:1.18rem;margin-bottom:1.25rem}
.poll-optie{
  display:block;width:100%;text-align:left;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);
  color:#fff;border-radius:11px;padding:.85rem 1.1rem;margin-bottom:.6rem;cursor:pointer;
  font:550 .93rem/1.3 var(--sans);transition:.15s;position:relative;overflow:hidden;
}
.poll-optie:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3)}
.poll-optie.gekozen{border-color:var(--oker);background:rgba(221,156,36,.16)}
.poll-balk{position:absolute;inset:0 auto 0 0;background:rgba(221,156,36,.22);transition:width .5s ease;z-index:0}
.poll-optie > span{position:relative;z-index:1;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.poll-pct{font-variant-numeric:tabular-nums;font-size:.85rem;opacity:.85}
.poll-totaal{font-size:.82rem;color:rgba(255,255,255,.6);margin:.9rem 0 0;text-align:center}

/* ---------- Ideeën ---------- */
.idee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.idee{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);padding:1.5rem;display:flex;flex-direction:column}
.idee h3{font-size:1.06rem;margin-bottom:.5rem}
.idee p{font-size:.91rem;color:var(--ink-zacht);margin:0 0 1.1rem}
.idee-voet{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;border-top:1px solid var(--rand)}
.idee-wie{font-size:.83rem;color:var(--ink-zacht)}
.steun-knop{
  display:inline-flex;align-items:center;gap:.4em;background:var(--groen-licht);border:1.5px solid transparent;
  color:var(--groen-diep);border-radius:100px;padding:.45em .9em;font:600 .84rem/1 var(--sans);cursor:pointer;transition:.15s;
}
.steun-knop:hover{border-color:var(--groen);background:#fff}
.steun-knop.gedaan{background:var(--oker-licht);color:#8a5d08;cursor:default}
.steun-knop svg{width:15px;height:15px}

/* ---------- Sponsors ---------- */
.sponsor-rang{margin-bottom:2.5rem}
.sponsor-rang:last-child{margin-bottom:0}
.rang-kop{display:flex;align-items:center;gap:.85rem;margin-bottom:1.1rem}
.rang-kop h3{margin:0;font-size:1.1rem}
.rang-lijn{flex:1;height:1px;background:var(--rand)}
.sponsor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.sponsor{
  background:var(--wit);border:1px solid var(--rand);border-radius:var(--r);padding:1.5rem;
  text-decoration:none;color:inherit;transition:.18s;display:flex;flex-direction:column;gap:.6rem;
}
.sponsor:hover{border-color:var(--oker);box-shadow:var(--schaduw);transform:translateY(-2px)}
.sponsor.goud{border-left:4px solid var(--oker)}
.sponsor.zilver{border-left:4px solid #9aa5a0}
.sponsor.brons{border-left:4px solid #b98a63}
.sponsor-logo{height:52px;display:flex;align-items:center}
.sponsor-logo img{max-height:52px;width:auto;object-fit:contain}
.sponsor-naam{font:600 1.02rem/1.3 var(--serif)}
.sponsor p{font-size:.86rem;color:var(--ink-zacht);margin:0}

.pakket-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}
.pakket{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r-groot);padding:2rem 1.75rem;display:flex;flex-direction:column}
.pakket.uitgelicht{border-color:var(--oker);box-shadow:var(--schaduw-op);position:relative}
.pakket.uitgelicht::before{
  content:"Populair";position:absolute;top:-11px;left:1.75rem;background:var(--oker);color:#26200f;
  font:600 .72rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:.45em .9em;border-radius:100px;
}
.pakket-prijs{font-family:var(--serif);font-size:2.1rem;color:var(--groen-diep);line-height:1;margin:.4rem 0 .2rem}
.pakket-prijs small{font-family:var(--sans);font-size:.85rem;color:var(--ink-zacht);font-weight:500}
.pakket ul{list-style:none;padding:0;margin:1.5rem 0}
.pakket li{display:flex;gap:.65rem;align-items:flex-start;font-size:.91rem;margin-bottom:.7rem;color:var(--ink-zacht)}
.pakket li svg{width:17px;height:17px;color:var(--groen);flex:none;margin-top:.2rem}
.pakket .btn{margin-top:auto;justify-content:center}

/* ---------- Logomuur sponsoren ---------- */
.logo-muur{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.logo-item{min-width:0}
.logo-tegel{
  position:relative;width:100%;aspect-ratio:16/10;display:grid;place-items:center;padding:1.5rem 1.75rem;
  background:var(--wit);border:1px solid var(--rand);border-radius:20px;cursor:pointer;
  font:inherit;color:inherit;transition:transform .25s,box-shadow .25s,border-color .25s;
  min-width:0;overflow:hidden;
}
.logo-tegel img{max-width:100%;max-height:70px;width:auto;object-fit:contain;transition:transform .35s}
.logo-woord{font:600 1.08rem/1.25 var(--serif);text-align:center;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word}
.logo-plus{
  position:absolute;right:.75rem;bottom:.75rem;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--groen);color:#fff;
  opacity:0;transform:scale(.7);transition:.25s;
}
.logo-plus svg{width:14px;height:14px}
.logo-tegel:hover,.logo-tegel:focus-visible{transform:translateY(-3px);border-color:var(--rand-sterk);box-shadow:var(--schaduw-op)}
.logo-tegel:hover img{transform:scale(1.04)}
.logo-tegel:hover .logo-plus,.logo-tegel:focus-visible .logo-plus{opacity:1;transform:none}
.logo-tegel:focus-visible{outline:3px solid var(--oker);outline-offset:2px}

/* ---------- Pop-up ---------- */
body.pop-open{overflow:hidden}
.pop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1.25rem}
.pop[hidden]{display:none}
.pop-achter{position:absolute;inset:0;background:rgba(8,24,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:popVaag .25s ease both}
.pop-venster{
  position:relative;display:flex;flex-direction:column;width:min(100%,700px);max-height:min(90vh,880px);
  background:var(--wit);border-radius:28px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.5);animation:popIn .32s cubic-bezier(.2,.8,.2,1) both;
}
.pop-inhoud{overflow-y:auto;padding:clamp(1.6rem,4vw,2.6rem);overscroll-behavior:contain}
.pop-sluit{
  position:absolute;top:1rem;right:1rem;z-index:2;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--rand);background:rgba(255,255,255,.92);
  color:var(--ink);cursor:pointer;transition:.2s;
}
.pop-sluit:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}
.pop-sluit:focus-visible,.slider-knop:focus-visible{outline:3px solid var(--oker);outline-offset:2px}
.pop-sluit svg{width:18px;height:18px}
@keyframes popIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes popVaag{from{opacity:0}to{opacity:1}}

.pop-kop{display:flex;align-items:center;gap:1.25rem;margin:0 3rem 1.5rem 0}
.pop-kop h2{font-size:clamp(1.5rem,3vw,2rem);margin:.5rem 0 0}
.pop-kop-tekst h2{margin-top:0}
.pop-kop .sectie-oog{margin-bottom:.6rem}
.pop-logo{
  flex:none;width:128px;height:84px;border-radius:16px;border:1px solid var(--rand);background:#fff;
  display:grid;place-items:center;padding:.8rem;
}
.pop-logo img{max-width:100%;max-height:100%;object-fit:contain}
.pop-logo span{font:600 1.4rem/1 var(--serif);color:var(--groen-diep)}
.pop-tekst{font-size:1rem;margin-bottom:1.5rem}
.pop-meta{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.6rem}
.pop-meta li{display:flex;align-items:center;gap:.7rem;font-size:.93rem;color:var(--ink-zacht)}
.pop-meta svg{width:17px;height:17px;color:var(--groen);flex:none}
.pop-meta a{color:var(--groen);text-decoration:none}
.pop-meta a:hover{text-decoration:underline}
.pop-tekst h3{font-size:1.1rem;margin:1.5rem 0 .5rem}
.pop-tekst > :last-child{margin-bottom:0}

.slider{position:relative;margin:0 0 1.5rem;border-radius:20px;overflow:hidden;background:var(--zacht)}
.slider-baan{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.slider-baan::-webkit-scrollbar{display:none}
.slider-baan img{flex:0 0 100%;width:100%;aspect-ratio:3/2;object-fit:cover;scroll-snap-align:start}
.slider-knop{
  position:absolute;top:50%;width:42px;height:42px;margin-top:-21px;border-radius:50%;border:0;
  display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.35);transition:.2s;
}
.slider-knop:hover{background:#fff;transform:scale(1.06)}
.slider-knop svg{width:17px;height:17px}
.slider-knop.vorige{left:.8rem}
.slider-knop.vorige svg{transform:rotate(180deg)}
.slider-knop.volgende{right:.8rem}
.slider-teller{
  position:absolute;right:.8rem;bottom:.8rem;padding:.35em .75em;border-radius:100px;
  background:rgba(8,24,20,.7);color:#fff;font:600 .75rem/1 var(--sans);font-variant-numeric:tabular-nums;
}

/* ---------- Cookiemelding ---------- */
.cookiebalk{
  position:fixed;left:1rem;bottom:1rem;z-index:90;width:min(calc(100% - 2rem),460px);
  padding:1.25rem 1.35rem;border-radius:20px;background:var(--ink);color:rgba(255,255,255,.82);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5);font-size:.9rem;line-height:1.55;
  opacity:0;transform:translateY(24px);transition:opacity .35s,transform .35s;
}
.cookiebalk.toon{opacity:1;transform:none}
.cookiebalk p{margin:0 0 1rem}
.cookiebalk b{display:block;color:#fff;font-size:.95rem;margin-bottom:.2rem}
.cookiebalk-acties{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.cookiebalk-acties a{color:#fff;font-weight:600;font-size:.86rem}

/* ---------- Nieuwsbrief ---------- */
.nieuwsbrief{
  background:linear-gradient(135deg,var(--groen),var(--groen-diep));color:#fff;
  border-radius:var(--r-groot);padding:clamp(2rem,4vw,3.25rem);position:relative;overflow:hidden;
}
.nieuwsbrief::after{
  content:"";position:absolute;right:-60px;bottom:-80px;width:280px;height:280px;border-radius:50%;
  background:rgba(221,156,36,.13);
}
.nieuwsbrief-in{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;position:relative}
.nieuwsbrief h2{color:#fff;margin-bottom:.5rem}
.nieuwsbrief p{color:rgba(255,255,255,.8);margin:0}
.nb-form{display:flex;gap:.6rem;flex-wrap:wrap}
.nb-form input{
  flex:1;min-width:200px;padding:.95em 1.2em;border-radius:100px;border:1.5px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.1);color:#fff;font:500 .95rem var(--sans);
}
.nb-form input::placeholder{color:rgba(255,255,255,.55)}
.nb-form input:focus{outline:none;border-color:var(--oker);background:rgba(255,255,255,.16)}
.nb-klein{font-size:.8rem;color:rgba(255,255,255,.6);margin-top:.85rem}

/* ---------- Nieuwsbrief: klein blok op lichte achtergrond ---------- */
.formulier.nb-blok{padding:1.75rem;margin-top:1.5rem}
.nb-blok .sectie-oog{margin-bottom:.6rem}
.nb-blok h3{font-size:1.05rem;margin-bottom:.4rem}
.nb-blok p{font-size:.9rem;color:var(--ink-zacht);margin-bottom:1.1rem}
.nb-blok .melding{margin:0}
.formulier.nb-blok.nb-compact{padding:1.4rem 1.5rem;margin-top:0}
.nb-compact .sectie-oog{margin-bottom:.45rem}
.nb-compact h3{font-size:1rem;margin-bottom:.25rem}
.nb-compact p{font-size:.85rem;margin-bottom:.85rem}
.nb-compact .nb-licht input{padding:.6em 1em;font-size:.88rem}
.nb-licht{display:flex;gap:.5rem;flex-wrap:wrap}
.nb-licht input{
  flex:1;min-width:0;padding:.75em 1.1em;border:1.5px solid var(--rand);border-radius:100px;
  font:400 .93rem/1.4 var(--sans);color:var(--ink);background:var(--papier);transition:.15s;
}
.nb-licht input:focus{outline:none;border-color:var(--groen);background:#fff;box-shadow:0 0 0 3px var(--groen-licht)}

/* ---------- Vergaderingen (Over ons) ---------- */
.formulier.verg-kaart{padding:1.75rem;min-width:0}
.verg-kaart h3{font-size:1.05rem;margin-bottom:.6rem}
.verg-intro{font-size:.9rem;color:var(--ink-zacht);margin-bottom:1.1rem}
.verg-lijst{
  position:relative;max-height:var(--verg-hoogte,372px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  margin:0 -.5rem 1.25rem;padding:0 .5rem;border-block:1px solid var(--rand);
  scrollbar-width:thin;scrollbar-color:var(--rand-sterk) transparent;
}
.verg-lijst::-webkit-scrollbar{width:6px}
.verg-lijst::-webkit-scrollbar-thumb{background:var(--rand-sterk);border-radius:6px}
.verg-lijst.heeft-meer{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 46px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 46px),transparent)}
.verg-lijst:focus-visible{outline:2px solid var(--groen);outline-offset:3px;border-radius:8px}
.verg-item + .verg-item{border-top:1px solid var(--rand)}
.verg-lijst:last-child{margin-bottom:0}
.verg-rij{
  display:flex;align-items:center;gap:.9rem;width:100%;padding:.8rem .35rem;background:none;border:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:10px;transition:background .15s;
}
.verg-rij:hover{background:var(--groen-licht)}
.verg-rij:focus-visible{outline:2px solid var(--groen);outline-offset:-2px}
.verg-datum{flex:none;width:52px;text-align:center;line-height:1.05}
.verg-datum b{display:block;font:500 1.4rem/1 var(--serif);color:var(--groen-diep)}
.verg-datum span{display:block;margin-top:.2rem;font:600 .62rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-zacht)}
.verg-datum small{display:block;margin-top:.15rem;font:500 .62rem/1 var(--sans);letter-spacing:.04em;color:var(--ink-zacht);opacity:.8}
.verg-tekst{flex:1;min-width:0}
.verg-tekst b{display:block;font-size:.92rem;font-weight:600}
.verg-tekst > span{display:block;margin-top:.15rem;font-size:.8rem;color:var(--ink-zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.verg-komend{display:inline-block;margin-left:.3rem;padding:.2em .55em;border-radius:100px;background:var(--oker-licht);color:#8a5d08;font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;vertical-align:.1em}
.verg-pijl{flex:none;color:var(--ink-zacht);transition:transform .15s}
.verg-pijl svg{width:16px;height:16px}
.verg-rij:hover .verg-pijl{transform:translateX(3px);color:var(--groen)}
.pop-docs{display:flex;gap:.6rem;flex-wrap:wrap}
.pers-knop{width:100%;justify-content:center}
.pers-knop svg{width:13px;height:13px}
.verg-lijst + .pers-knop{margin-top:0}

/* ---------- Vriend worden ---------- */
.vriend-snel{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.vriend-chip{
  display:inline-flex;align-items:center;padding:.55em 1.05em;border-radius:100px;text-decoration:none;
  font:600 .9rem/1 var(--sans);color:#fff;border:1.5px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);transition:.15s;
}
.vriend-chip:hover{background:#fff;color:var(--groen-diep);border-color:#fff}
.vriend-snel--licht{margin:0}
.vriend-snel--licht .vriend-chip{color:var(--groen-diep);border-color:var(--rand-sterk);background:var(--papier)}
.vriend-snel--licht .vriend-chip:hover{background:var(--groen);color:#fff;border-color:var(--groen)}
.bedrag-kiezer{border:0;padding:0;margin:0 0 1.4rem}
.bedrag-kiezer legend{font:600 .88rem/1 var(--sans);margin-bottom:.6rem;padding:0}
.bedrag-knoppen{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:.55rem;margin-bottom:1rem}
.bedrag-knop{position:relative;cursor:pointer}
.bedrag-knop input{position:absolute;opacity:0;pointer-events:none}
.bedrag-knop span{
  display:flex;align-items:center;justify-content:center;min-height:54px;padding:.6rem;border-radius:14px;text-align:center;
  border:1.5px solid var(--rand);background:var(--papier);font:600 1.05rem/1.2 var(--serif);color:var(--ink);transition:.15s;
}
.bedrag-knop:last-child span{font:600 .88rem/1.2 var(--sans)}
.bedrag-knop:hover span{border-color:var(--rand-sterk)}
.bedrag-knop input:checked + span{border-color:var(--groen);background:var(--groen);color:#fff;box-shadow:0 8px 20px -12px rgba(30,91,74,.8)}
.bedrag-knop input:focus-visible + span{outline:3px solid var(--oker);outline-offset:2px}
.bedrag-eigen label{display:block;font:600 .88rem/1 var(--sans);margin-bottom:.5rem}
.bedrag-invoer{display:flex;align-items:center;max-width:220px;border:1.5px solid var(--rand);border-radius:12px;background:var(--papier);transition:.15s}
.bedrag-invoer:focus-within{border-color:var(--groen);background:#fff;box-shadow:0 0 0 3px var(--groen-licht)}
.bedrag-invoer span{padding:0 .2rem 0 1rem;font:600 1.15rem/1 var(--serif);color:var(--ink-zacht)}
.bedrag-invoer input{flex:1;min-width:0;border:0;background:none;padding:.75rem .9rem .75rem .3rem;font:600 1.15rem/1 var(--serif);color:var(--ink);outline:none}
.bedrag-eigen small{display:block;margin-top:.45rem;font-size:.82rem;color:var(--ink-zacht)}
.bedrag-eigen.fout .bedrag-invoer{border-color:var(--rood)}
.bedrag-eigen.fout small{color:var(--rood)}
.vriend-resultaat{display:flex;gap:1.25rem;align-items:flex-start;padding:1.75rem;margin-bottom:1.5rem;border-radius:var(--r-groot);background:var(--groen-diep);color:#fff}
.vriend-resultaat h2{color:#fff;font-size:1.4rem;margin-bottom:.4rem}
.vriend-resultaat p{color:rgba(255,255,255,.82);margin:0 0 .5rem}
.vriend-resultaat-icoon{flex:none;width:52px;height:52px;border-radius:50%;background:var(--oker);color:#26200f;display:grid;place-items:center}
.vriend-resultaat-icoon svg{width:24px;height:24px}
.vriend-resultaat-bedrag b{color:#fff}
.melding.testmodus{background:var(--oker-licht);color:#7a5407}
.binnenkort{display:flex;gap:.8rem;align-items:flex-start;padding:1rem 1.15rem;margin-bottom:1.4rem;border-radius:14px;background:var(--groen-licht);color:var(--groen-diep);font-size:.93rem;line-height:1.55}
.binnenkort svg{width:20px;height:20px;flex:none;margin-top:.1rem;color:var(--groen)}
.binnenkort p{margin:0}
.binnenkort a{color:var(--groen-diep);font-weight:600}
.is-binnenkort .bedrag-kiezer,.is-binnenkort .veld,.is-binnenkort .veld-rij,.is-binnenkort .keuze{opacity:.55;pointer-events:none}
.btn[disabled]{cursor:not-allowed;opacity:.75;transform:none!important;box-shadow:none!important}
.vrienden-namen{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.45rem}
.vrienden-namen li{padding:.4em .85em;border-radius:100px;background:var(--groen-licht);color:var(--groen-diep);font-size:.86rem;font-weight:600}
.vriend-blok .vriend-snel{margin-top:.2rem}
.kleine-tekst{font-size:.82rem;color:var(--ink-zacht);line-height:1.6}
button + .kleine-tekst{margin-top:1rem}
.kleine-tekst p{margin:0 0 .5rem}
.kleine-tekst p:last-child{margin:0}
.kleine-tekst svg{width:13px;height:13px;vertical-align:-.12em}
.tekst-zacht p{color:var(--ink-zacht)}

/* ---------- Disclaimer en stappenplan ---------- */
.disclaimer{display:flex;gap:.65rem;align-items:flex-start;max-width:72ch;margin:2rem 0 0;padding-top:1.1rem;border-top:1px solid var(--rand);font-size:.8rem;line-height:1.6;color:var(--ink-zacht)}
.disclaimer svg{width:15px;height:15px;flex:none;margin-top:.15rem;opacity:.7}
.disclaimer p{margin:0}
.disclaimer a{color:inherit}
.disclaimer-artikel{margin-top:2.5rem}
.stappenplan{background:var(--groen-licht);border-radius:14px;padding:1rem 1.15rem 1.05rem;margin-bottom:1.5rem;font-size:.88rem}
.stappenplan > b{display:block;font-size:.9rem;color:var(--groen-diep);margin-bottom:.55rem}
.stappenplan ol{margin:0;padding-left:1.25rem;display:grid;gap:.35rem;color:var(--ink)}
.stappenplan ol li::marker{color:var(--groen);font-weight:700}
.stappenplan-lijst{text-align:left;max-width:520px;margin:1.5rem auto 0;background:var(--papier);border:1px solid var(--rand)}
.stappenplan-lijst ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.stappenplan-lijst li{display:flex;gap:.55rem;align-items:flex-start;color:var(--ink-zacht)}
.stappenplan-lijst svg{width:16px;height:16px;flex:none;color:var(--groen);margin-top:.18rem}
.veld-tip{display:block;margin-top:.4rem;font-size:.79rem;line-height:1.45;color:var(--ink-zacht)}
.veld-rij + .veld-tip{margin:-.6rem 0 1.15rem}

/* ---------- Formulieren ---------- */
.formulier{background:var(--wit);border:1px solid var(--rand);border-radius:var(--r-groot);padding:clamp(1.75rem,3vw,2.5rem)}
.veld{margin-bottom:1.15rem}
.veld label{display:block;font:600 .88rem/1 var(--sans);margin-bottom:.5rem}
.veld .hint{font-weight:400;color:var(--ink-zacht);font-size:.82rem;margin-left:.4em}
.veld input,.veld textarea,.veld select{
  width:100%;padding:.8em 1em;border:1.5px solid var(--rand);border-radius:11px;
  font:400 .96rem/1.5 var(--sans);color:var(--ink);background:var(--papier);transition:.15s;
}
.veld textarea{min-height:140px;resize:vertical}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:none;border-color:var(--groen);background:#fff;box-shadow:0 0 0 3px var(--groen-licht)}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.keuze{display:flex;gap:.65rem;align-items:flex-start;font-size:.9rem;color:var(--ink-zacht);margin-bottom:1.15rem}
.keuze input{width:auto;margin-top:.25rem;flex:none;accent-color:var(--groen)}
.soort-kiezer{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1.5rem}
.soort-kiezer label{
  display:block;border:1.5px solid var(--rand);border-radius:12px;padding:1rem;cursor:pointer;
  text-align:center;transition:.15s;background:var(--papier);
}
.soort-kiezer label:hover{border-color:var(--rand-sterk)}
.soort-kiezer input{position:absolute;opacity:0;pointer-events:none}
.soort-kiezer input:checked + .soort-in{color:var(--groen)}
.soort-kiezer label:has(input:checked){border-color:var(--groen);background:var(--groen-licht)}
.soort-in svg{width:24px;height:24px;margin-bottom:.4rem;color:var(--groen)}
.soort-in b{display:block;font:600 .9rem/1 var(--sans);margin-bottom:.2rem}
.soort-in span{font-size:.78rem;color:var(--ink-zacht)}

.melding{padding:1rem 1.25rem;border-radius:12px;margin-bottom:1.5rem;font-size:.93rem;display:flex;gap:.7rem;align-items:flex-start}
.melding svg{width:19px;height:19px;flex:none;margin-top:.15rem}
.melding.ok{background:var(--groen-licht);color:#17503f}
.melding.fout{background:var(--rood-licht);color:#93331f}

/* ---------- Pagina-kop ---------- */
.pagina-kop{padding:clamp(2.5rem,5vw,4rem) 0 clamp(2rem,3vw,2.75rem);background:var(--wit);border-bottom:1px solid var(--rand);position:relative;overflow:hidden}
.pagina-kop::before{content:"";position:absolute;top:-40%;right:-4%;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(221,156,36,.1),transparent 62%)}
.kruimels{display:flex;gap:.5rem;align-items:center;font-size:.83rem;color:var(--ink-zacht);margin-bottom:1rem;position:relative}
.kruimels svg{width:12px;height:12px;opacity:.45}
.kruimels a{color:var(--ink-zacht);text-decoration:none}
.kruimels a:hover{color:var(--groen)}
.pagina-kop h1{font-size:clamp(2rem,4.2vw,3.1rem);margin-bottom:.35em;position:relative}
.pagina-kop p{font-size:1.08rem;color:var(--ink-zacht);max-width:58ch;margin:0;position:relative}

/* ---------- Artikel ---------- */
.artikel{font-size:1.05rem;line-height:1.75}
.artikel h2{font-size:1.6rem;margin-top:2rem}
.artikel h3{font-size:1.22rem;margin-top:1.6rem}
.artikel ul,.artikel ol{padding-left:1.3rem;margin-bottom:1.2rem}
.artikel li{margin-bottom:.5rem}
.artikel blockquote{margin:1.75rem 0;padding:1.25rem 1.5rem;border-left:4px solid var(--oker);background:var(--oker-licht);border-radius:0 12px 12px 0;font-size:1.02rem}
.artikel blockquote p:last-child{margin:0}

.doc-lijst{display:grid;gap:.7rem}
.doc{
  display:flex;gap:1rem;align-items:center;background:var(--wit);border:1px solid var(--rand);
  border-radius:12px;padding:1rem 1.25rem;text-decoration:none;color:inherit;transition:.15s;
}
.doc:hover{border-color:var(--groen);box-shadow:var(--schaduw)}
.doc-icoon{width:40px;height:40px;border-radius:10px;background:var(--rood-licht);color:var(--rood);display:grid;place-items:center;flex:none}
.doc-icoon svg{width:20px;height:20px}
.doc b{display:block;font-size:.96rem;font-weight:600}
.doc span{font-size:.81rem;color:var(--ink-zacht)}

/* ---------- Footer ---------- */
.voet{background:var(--ink);color:rgba(255,255,255,.68);padding:clamp(3rem,5vw,4.5rem) 0 2rem;font-size:.92rem}
.voet-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.75rem;border-bottom:1px solid rgba(255,255,255,.11)}
.voet h4{color:#fff;font-family:var(--sans);font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:1.1rem;font-weight:600}
.voet ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.voet a{color:rgba(255,255,255,.68);text-decoration:none}
.voet a:hover{color:#fff}
.voet-merk{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
.voet-merk .merk-mark{width:56px;height:56px}
.voet-merk strong{color:#fff;font-family:var(--serif);font-size:1.1rem}
.voet-merk span{font-size:.76rem;color:rgba(255,255,255,.5);display:block}
.voet-soc{display:flex;gap:.6rem;margin-top:1.25rem}
.voet-soc a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:.15s}
.voet-soc a:hover{background:var(--groen)}
.voet-soc svg{width:18px;height:18px}
.voet-onder{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:1.75rem;font-size:.83rem;color:rgba(255,255,255,.45)}
.voet-juridisch{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.voet-juridisch a,.voet-juridisch button{color:rgba(255,255,255,.6);text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.voet-juridisch a:hover,.voet-juridisch button:hover{color:#fff}

/* ---------- Diversen ---------- */
.leeg{text-align:center;padding:3.5rem 1.5rem;color:var(--ink-zacht);background:var(--wit);border:1px dashed var(--rand-sterk);border-radius:var(--r-groot)}
.leeg svg{width:42px;height:42px;opacity:.3;margin-bottom:1rem}
.centraal{text-align:center}
.mt-2{margin-top:2rem}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.zichtbaar{opacity:1;transform:none}

/* ---------- Responsief ---------- */
@media (max-width:1000px){
  .stem-grid,.nieuwsbrief-in,.overons-grid{grid-template-columns:1fr}
  .hero2-inhoud{grid-template-columns:minmax(0,1fr);align-items:start;padding:5rem 0 6.5rem}
  .hero2-kader::before{background:linear-gradient(180deg,rgba(8,30,24,.72) 0%,rgba(8,30,24,.82) 55%,rgba(8,30,24,.9) 100%)}
  .snel{grid-template-columns:repeat(2,1fr)}
  .snel a:nth-child(3)::before{opacity:0}
  .ingang-grid{grid-template-columns:repeat(2,1fr)}
  .org-grid,.idee-grid,.pakket-grid,.werk-grid{grid-template-columns:repeat(2,1fr)}
  .aanmeld-body{grid-template-columns:1fr}
  .voet-grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1121px) and (max-width:1320px){
  .merk-tekst{display:none}
}
@media (max-width:1120px){
  .nav{
    position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;align-items:stretch;gap:.25rem;
    background:var(--papier);padding:7rem 1.5rem 1.75rem;box-shadow:var(--schaduw-op);z-index:1;
    transform:translateY(-105%);transition:transform .3s ease;max-height:100vh;overflow-y:auto;
  }
  .nav.open{transform:none}
  .nav a{padding:.9rem 1rem;font-size:1.02rem;border-bottom:1px solid var(--rand);border-radius:0}
  .nav a.actief::after{display:none}
  .menu-knop{display:block;order:3}
  .kop-cta .btn{display:none}
  .nav .nav-mobiel{display:flex;align-items:center;gap:.35rem;color:var(--groen)}
  .kop-cta{margin-left:auto}
}
@media (max-width:860px){
  .kop-split{grid-template-columns:1fr}
  .kop-knop-groot{max-width:none}
  .twee-kol{grid-template-columns:1fr}
  .kop-in{gap:.75rem;padding:.55rem .6rem .55rem 1rem}
  .kop{padding:10px 10px 0}
  :root{--kop-h:78px}
}
@media (max-width:640px){
  body{font-size:16px}
  .agenda-balk{gap:.6rem}
  .agenda-telling{margin-left:0;width:100%}
  .agenda-rij2{grid-template-columns:46px minmax(0,1fr);gap:.9rem;padding:.95rem 1.1rem}
  .agenda-rij2 .agenda-cat{grid-column:2;margin-top:.35rem}
  .agenda-rij2 .agenda-pijl{display:none}
  .agenda-onder{white-space:normal}
  .aanmeld summary{padding:1.25rem}
  .aanmeld-body{grid-template-columns:1fr;padding:1.5rem 1.25rem}
  .logo-muur{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .logo-woord{font-size:.86rem}
  .logo-tegel{padding:1rem;border-radius:16px}
  .logo-tegel img{max-height:48px}
  .logo-plus{opacity:1;transform:none;width:24px;height:24px;right:.5rem;bottom:.5rem}
  .pop{padding:0;align-items:end}
  .pop-venster{width:100%;max-height:92vh;border-radius:24px 24px 0 0}
  .pop-kop{flex-direction:column;align-items:flex-start;gap:.9rem}
  .pop-logo{width:110px;height:70px}
  .cookiebalk{left:.75rem;bottom:.75rem;width:calc(100% - 1.5rem)}
  .hero2{padding:8px 8px 2.5rem}
  .kop-in{width:100%}
  .merk-tekst span{display:none}
  .hero2-kader{border-radius:22px}
  .hero2-inhoud{width:calc(100% - 2.5rem);padding:3.5rem 0 5.5rem}
  .hero2-cijfers{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1rem;margin-top:2.25rem}
  .hero2-cijfers div{padding:0;border-left:0}
  .snel{grid-template-columns:1fr;width:calc(100% - 2rem)}
  .snel a::before{display:none}
  .snel a + a{border-top:1px solid var(--rand);border-radius:0}
  .snel a{padding:1rem 1.1rem}
  .wrap,.smal{width:min(100% - 2rem,var(--breed))}
  .ingang-grid,.org-grid,.idee-grid,.pakket-grid,.werk-grid,.veld-rij,.soort-kiezer{grid-template-columns:1fr}
  .agenda-rij{grid-template-columns:64px 1fr;gap:1rem;padding:1.1rem}
  .agenda-pijl{display:none}
  .agenda-datum b{font-size:1.45rem}
  .voet-grid{grid-template-columns:1fr;gap:2rem}
  .sectie-kop{margin-bottom:1.75rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}


/* ============================================================
   Dorpsbelangen Pekela – vernieuwde agenda, beperkt tot deze pagina
   ============================================================ */
.agenda-hero-acties{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;margin-top:1.75rem}
.agenda-organisaties-link{font-size:.92rem}
.agenda-nieuw{background:var(--papier)}
.agenda-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:2rem;align-items:start}
.agenda-filters{display:grid;gap:.8rem}
.agenda-filters form{display:grid;gap:.65rem}
.agenda-filterkaart{padding:1.1rem 1.2rem;background:#fff;border:1px solid var(--rand);border-radius:16px}
.agenda-filtertitel{display:block;font-weight:650;color:var(--groen-diep);font-size:.89rem;margin-bottom:.65rem}
.agenda-filterkaart input[type=search],.agenda-filterkaart input[type=date],.agenda-filterkaart select{width:100%;max-width:100%;min-width:0;background:var(--papier);border:1px solid var(--rand-sterk);border-radius:9px;padding:.65rem .7rem;font:400 .88rem/1.3 var(--sans);color:var(--ink)}
.agenda-filterkaart :is(input,select):focus-visible{outline:2px solid var(--groen);outline-offset:2px}
.agenda-periode{display:flex;background:var(--papier);border-radius:50px;padding:3px;gap:3px}
.agenda-periode label{flex:1;position:relative;cursor:pointer}
.agenda-periode input{position:absolute;opacity:0}
.agenda-periode span{display:block;text-align:center;padding:.5rem .25rem;border-radius:50px;font-size:.83rem}
.agenda-periode input:checked+span{background:var(--groen);color:white}
.agenda-periode input:focus-visible+span{outline:2px solid var(--oker)}
.agenda-datums{display:grid;gap:.6rem}.agenda-datums label{display:block;font-size:.77rem;color:var(--ink-zacht)}
.agenda-datums input{display:block;margin-top:.3rem}
.agenda-filteracties{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.4rem .2rem}
.agenda-wissen{font-size:.83rem}
.agenda-deelblok{padding:1.1rem 1.2rem;border-radius:16px;background:var(--groen-licht);display:flex;align-items:flex-start;gap:.75rem;flex-direction:column}
.agenda-deelblok strong{font-size:.88rem;color:var(--groen-diep)}
#agenda-deelstatus{font-size:.75rem;color:var(--ink-zacht)}
.agenda-resultaten{min-width:0}
.agenda-resultatenkop{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:var(--ink-zacht);padding:.35rem .1rem 1.25rem}
.agenda-resultatenkop strong{color:var(--groen-diep)}
.agenda-nieuw .maand-kop{margin:0 0 .7rem;font-size:1.25rem}
.agenda-nieuw .maand-groep{margin-bottom:2rem}
.agenda-verhalen{display:grid;gap:.75rem}
.agenda-verhaal{display:grid;grid-template-columns:60px minmax(0,1fr);gap:1.25rem;position:relative;text-decoration:none;color:var(--ink);padding:1.35rem 1.4rem;border:1px solid var(--rand);border-radius:18px;background:#fff;transition:border-color .18s,box-shadow .18s,transform .18s}
.agenda-verhaal:hover{border-color:var(--groen);box-shadow:var(--schaduw);transform:translateY(-1px)}
.agenda-verhaal-datum{display:flex;align-items:center;flex-direction:column;line-height:1.05;border-right:1px solid var(--rand);padding-right:1rem;color:var(--groen-diep)}
.agenda-verhaal-datum b{font:500 2rem/1.1 var(--serif)}
.agenda-verhaal-datum small{font:600 .68rem/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-zacht)}
.agenda-verhaal-inhoud{display:flex;flex-direction:column;min-width:0}
.agenda-verhaal-titel{display:block;font:600 1.18rem/1.3 var(--serif);margin-bottom:.4rem}
.agenda-verhaal-meta{display:flex;flex-wrap:wrap;gap:.4rem 1rem;color:var(--ink-zacht);font-size:.82rem;margin-bottom:.65rem}
.agenda-verhaal-meta>span{display:inline-flex;align-items:center;gap:.3rem}
.agenda-verhaal-meta svg{width:14px;height:14px}
.agenda-verhaal-omschrijving{font-size:.93rem;line-height:1.55;color:var(--ink-zacht)}
.agenda-verhaal-extra{margin-top:.45rem;font-size:.78rem;color:var(--groen)}
.agenda-verhaal-meer{grid-column:2;color:var(--groen);font:600 .82rem/1 var(--sans);margin-top:-.3rem}
.agenda-verhaal-meer span{margin-left:.3rem}
@media(max-width:850px){.agenda-layout{grid-template-columns:1fr;gap:1.5rem}.agenda-filters form{grid-template-columns:repeat(2,minmax(0,1fr))}.agenda-filteracties{grid-column:1/-1}.agenda-deelblok{display:none}}
@media(max-width:530px){.agenda-filters form{grid-template-columns:1fr}.agenda-verhaal{gap:.8rem;grid-template-columns:48px minmax(0,1fr);padding:1rem}.agenda-verhaal-datum{padding-right:.5rem}.agenda-verhaal-datum b{font-size:1.6rem}.agenda-verhaal-titel{font-size:1.05rem}.agenda-resultatenkop>span:last-child{display:none}}

/* Agenda — rustige, compacte activiteitenrijen met foto rechts */
.agenda-nieuw .agenda-verhalen{gap:.65rem}
.agenda-nieuw .agenda-verhaal{
  grid-template-columns:54px minmax(0,1fr) 172px;
  grid-template-rows:1fr auto;
  gap:.35rem 1.15rem;
  min-height:150px;
  padding:1rem 1.1rem;
  align-items:start;
}
.agenda-nieuw .agenda-verhaal-datum{grid-column:1;grid-row:1/3;padding-top:.2rem}
.agenda-nieuw .agenda-verhaal-inhoud{grid-column:2;grid-row:1}
.agenda-nieuw .agenda-verhaal-titel{margin-bottom:.32rem;font-size:1.12rem}
.agenda-nieuw .agenda-verhaal-meta{margin-bottom:.42rem;gap:.25rem .8rem}
.agenda-nieuw .agenda-verhaal-omschrijving{font-size:.875rem;line-height:1.46;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.agenda-nieuw .agenda-verhaal-meer{grid-column:2;grid-row:2;margin-top:.35rem;align-self:end}
.agenda-nieuw .agenda-verhaal-beeld{grid-column:3;grid-row:1/3;width:100%;height:100%;min-height:124px;max-height:160px;border-radius:12px;background:var(--zacht);overflow:hidden;display:grid;place-items:center}
.agenda-nieuw .agenda-verhaal-beeld img{display:block;width:100%;height:100%;object-fit:cover}
.agenda-nieuw .agenda-verhaal-zonderfoto{color:var(--groen);opacity:.28}
.agenda-nieuw .agenda-verhaal-zonderfoto svg{width:42px;height:42px}
@media(max-width:1060px){
  .agenda-nieuw .agenda-verhaal{grid-template-columns:48px minmax(0,1fr) 132px;gap:.35rem .9rem}
  .agenda-nieuw .agenda-verhaal-beeld{min-height:110px}
}
@media(max-width:640px){
  .agenda-nieuw .agenda-verhaal{grid-template-columns:40px minmax(0,1fr) 96px;gap:.25rem .7rem;padding:.85rem;min-height:125px}
  .agenda-nieuw .agenda-verhaal-datum b{font-size:1.4rem}
  .agenda-nieuw .agenda-verhaal-titel{font-size:1rem}
  .agenda-nieuw .agenda-verhaal-omschrijving{-webkit-line-clamp:2;font-size:.82rem}
  .agenda-nieuw .agenda-verhaal-meta{font-size:.76rem}
  .agenda-nieuw .agenda-verhaal-beeld{min-height:96px;border-radius:9px}
}
@media(max-width:390px){
  .agenda-nieuw .agenda-verhaal{grid-template-columns:38px minmax(0,1fr) 74px;gap:.25rem .5rem}
}

/* Twee eigen agenda-tabbladen */
.agenda-tabbladen{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem;border-bottom:1px solid var(--rand);padding-bottom:.65rem}
.agenda-tabbladen a{padding:.72rem 1.1rem;border-radius:12px;text-decoration:none;font:600 .93rem/1.3 var(--sans);color:var(--groen-diep);background:#fff;border:1px solid var(--rand)}
.agenda-tabbladen a.actief{color:white;background:var(--groen);border-color:var(--groen)}
.agenda-tab-uitleg{color:var(--ink-zacht);font-size:.91rem;margin-bottom:1.6rem}
.agenda-nieuw .agenda-verhaal-datum>svg{width:26px;height:26px;margin:.5rem 0 .45rem}

/* ===========================================================
   Agenda mobiel – kop onder navigatie en inklapbare filters
   (desktop blijft ongewijzigd)
   =========================================================== */
.agenda-mobiel-filterknop{display:none}
@media (max-width:850px){
  .agenda-nieuw .agenda-layout{grid-template-columns:minmax(0,1fr)}
  .agenda-mobiel-filterknop{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    width:100%;padding:.95rem 1.1rem;
    background:#fff;color:var(--groen-diep);border:1px solid var(--rand-sterk);
    border-radius:14px;font:600 1rem/1.3 var(--sans);cursor:pointer;text-align:left;
  }
  .agenda-mobiel-filterknop:focus-visible{outline:3px solid var(--oker);outline-offset:2px}
  .agenda-mobiel-filterpijl{font-size:1.4rem;line-height:1;transition:transform .2s}
  .agenda-mobiel-filterknop[aria-expanded="true"] .agenda-mobiel-filterpijl{transform:rotate(180deg)}
  .agenda-nieuw .agenda-filters{display:none}
  .agenda-nieuw .agenda-filters.agenda-filters-open{display:grid}
}
@media (max-width:640px){
  /* De sticky navigatie blijft in de normale documentstroom; geen overlap met de paginatitel. */
  body:not(.is-home) .kop + .pagina-kop{
    margin-top:0;
    padding-top:clamp(2.5rem,7vw,3.5rem);
  }
  .agenda-nieuw .agenda-layout{gap:1rem}
  .agenda-nieuw .agenda-resultatenkop{padding-top:.15rem}
}

/* ============================================================
   Organisatiegids: zijbalk met hoofdgroepen en categorieën, lijst of kaart
   ============================================================ */
.gids{background:var(--papier)}
.gids-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:2rem;align-items:start}
.gids-layout>*{min-width:0}
/* Safari: niets in de zijbalk mag de kolom breder maken dan 290px */
.gids-filters{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;position:sticky;top:6.5rem;width:100%;min-width:0}
.gids-filters>*{min-width:0}
.gids-filterkaart{padding:1.1rem 1.2rem;background:#fff;border:1px solid var(--rand);border-radius:16px}
.gids-filtertitel{display:block;font-weight:650;color:var(--groen-diep);font-size:.89rem;margin-bottom:.65rem}
.gids-zoekveld{display:flex;gap:.4rem}
.gids-zoekveld input{flex:1 1 0;width:100%;min-width:0;-webkit-appearance:none;appearance:none;background:var(--papier);border:1px solid var(--rand-sterk);border-radius:9px;padding:.65rem .7rem;font:400 .88rem/1.3 var(--sans);color:var(--ink)}
.gids-zoekveld button{flex:none;width:42px;border:0;border-radius:9px;background:var(--groen);color:#fff;display:grid;place-items:center;cursor:pointer}
.gids-zoekveld button svg{width:18px;height:18px}
.gids-zoekveld :is(input,button):focus-visible{outline:2px solid var(--oker);outline-offset:2px}
.gids-wissen{display:inline-block;margin-top:.55rem;font-size:.8rem}
.gids-boom{display:grid;gap:.2rem}
.gids-groep{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:12px;text-decoration:none;color:var(--ink);font:500 .92rem/1.3 var(--sans);transition:background .15s}
.gids-groep:hover{background:var(--groen-licht)}
.gids-groep.aan{background:var(--groen);color:#fff}
.gids-groep-icoon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--groen-licht);color:var(--groen)}
.gids-groep-icoon svg{width:18px;height:18px}
.gids-groep.aan .gids-groep-icoon{background:rgba(255,255,255,.16);color:#fff}
.gids-groep-naam{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.gids-tel{margin-left:auto;font-size:.78rem;color:var(--ink-zacht);font-variant-numeric:tabular-nums}
.gids-groep.aan .gids-tel{color:rgba(255,255,255,.82)}
.gids-groep-pijl{display:grid;flex:none;opacity:.45;transition:transform .2s}
.gids-groep-pijl svg{width:15px;height:15px}
.gids-groep[aria-expanded="true"] .gids-groep-pijl{transform:rotate(90deg);opacity:.9}
.gids-soorten{list-style:none;margin:.25rem 0 .55rem 1.55rem;padding:0 0 0 .8rem;border-left:2px solid var(--groen-licht);display:grid;gap:.1rem}
.gids-soorten a{display:flex;justify-content:space-between;gap:.6rem;padding:.42rem .6rem;border-radius:8px;text-decoration:none;color:var(--ink-zacht);font-size:.88rem}
.gids-soorten a:hover{background:var(--groen-licht);color:var(--groen-diep)}
.gids-soorten a.aan{background:var(--oker-licht);color:#7a5407;font-weight:600}
.gids-soorten a.aan .gids-tel{color:#7a5407}
.gids-groep:focus-visible,.gids-soorten a:focus-visible{outline:2px solid var(--oker);outline-offset:2px}
.gids-aanmeldblok{padding:1.1rem 1.2rem;border-radius:16px;background:var(--groen-licht);display:flex;align-items:flex-start;gap:.75rem;flex-direction:column}
.gids-aanmeldblok strong{font-size:.88rem;color:var(--groen-diep);line-height:1.45}
.gids-resultaten{min-width:0}
.gids-resultatenkop{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.88rem;color:var(--ink-zacht);margin-bottom:1.5rem}
.gids-resultatenkop strong,.gids-resultatenkop b{color:var(--groen-diep)}
.gids-weergave{display:flex;background:#fff;border:1px solid var(--rand);border-radius:50px;padding:3px;gap:3px}
.gids-weergave a{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:50px;text-decoration:none;font:600 .84rem/1 var(--sans);color:var(--groen-diep)}
.gids-weergave a svg{width:15px;height:15px}
.gids-weergave a.aan{background:var(--groen);color:#fff}
.gids-weergave a:focus-visible{outline:2px solid var(--oker);outline-offset:2px}
.gids-lijst .sponsor-rang:first-child{margin-top:0}

/* De kaart: eigen stapelcontext, zodat hij nooit over de menubalk of een pop-up heen valt */
.gids-kaart{position:relative;z-index:0;isolation:isolate;height:min(68vh,620px);min-height:420px;border-radius:var(--r-groot);overflow:hidden;border:1px solid var(--rand);box-shadow:var(--schaduw);background:#e8eee9}
/* Filter per tegel i.p.v. op de hele laag: dat houdt slepen en zoomen soepel */
.gids-kaart .leaflet-tile,.kaart-kiezer-kaart .leaflet-tile{filter:grayscale(1) sepia(.35) hue-rotate(55deg) saturate(.85) brightness(1.04) contrast(.92)}
.gids-profiel-rond{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;border:3px solid var(--groen);box-shadow:0 4px 12px rgba(18,56,46,.3);overflow:hidden;transition:transform .15s,border-color .15s}
.gids-profiel-rond img{display:block;width:38px;height:38px;object-fit:contain}
.gids-profiel-rond b{font:600 .95rem/1 var(--serif);color:var(--groen-diep)}
.gids-profiel:hover .gids-profiel-rond{transform:scale(1.1);border-color:var(--oker)}
.gids-profiel-rond.groot{width:68px;height:68px;border-width:3px;box-shadow:none}
.gids-profiel-rond.groot b{font-size:1.25rem}
/* In de pop-up: een logo krijgt een ruim afgerond vlak, zodat ook brede logo's goed leesbaar zijn */
.gids-profiel-rond.groot:has(img){width:auto;min-width:68px;max-width:210px;height:68px;padding:8px 14px;border-radius:16px;border:1px solid var(--rand);background:#fff}
.gids-profiel-rond.groot img{width:auto;max-width:180px;height:50px}
.gids-pop-profiel{display:inline-block;align-self:flex-start;margin-bottom:.5rem;padding:0;border:0;background:none;cursor:pointer;border-radius:50%}
.gids-pop-profiel:hover .gids-profiel-rond{border-color:var(--oker);transform:scale(1.05)}
.gids-pop-knoppen{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.6rem}
.gids-kaart .gids-pop-knoppen .btn{margin:0;color:#fff}
.gids-kaart .gids-pop-knoppen .btn-lijn{color:var(--groen-diep)}
/* Logo en naam samen in hetzelfde tegelformaat */
.logo-met-naam{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;width:100%;min-width:0}
.logo-met-naam img{max-height:52px}
.logo-naam{font:600 .92rem/1.25 var(--serif);text-align:center;text-wrap:balance;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:640px){.logo-met-naam{gap:.4rem}.logo-met-naam img{max-height:34px}.logo-naam{font-size:.78rem}}
.gids-kaart .leaflet-control-zoom{border:0;box-shadow:var(--schaduw);border-radius:12px;overflow:hidden}
.gids-kaart .leaflet-control-zoom a{width:36px;height:36px;line-height:34px;color:var(--groen-diep);font:500 1.15rem/34px var(--sans)}
.gids-kaart .leaflet-control-attribution{font:400 .68rem/1.4 var(--sans);background:rgba(255,255,255,.8);border-radius:8px 0 0 0;padding:2px 8px}
.gids-speld span{display:block;width:26px;height:26px;margin:1px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--groen);border:3px solid #fff;box-shadow:0 3px 10px rgba(18,56,46,.35);transition:background .15s,transform .15s}
.gids-speld:hover span,.gids-speld:focus span{background:var(--oker);transform:rotate(-45deg) scale(1.12)}
.gids-kaart .leaflet-popup-content-wrapper{border-radius:16px;box-shadow:0 12px 32px -10px rgba(20,32,28,.35)}
.gids-kaart .leaflet-popup-content{margin:1rem 1.1rem;min-width:190px}
.gids-kaart-pop{display:flex;flex-direction:column;gap:.25rem;font-family:var(--sans)}
.gids-kaart-pop small{font:600 .68rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--oker)}
.gids-kaart-pop b{font:600 1.05rem/1.3 var(--serif);color:var(--ink)}
.gids-kaart-pop span{font-size:.84rem;color:var(--ink-zacht)}
.gids-kaart-noot{font-size:.85rem;color:var(--ink-zacht);margin:.9rem 0 2rem}

.gids-mobiel-filterknop{display:none}
@media (max-width:850px){
  .gids-layout{grid-template-columns:minmax(0,1fr);gap:1rem}
  .gids-filters{position:static;display:none}
  .gids-filters.open{display:grid}
  .gids-mobiel-filterknop{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:.95rem 1.1rem;background:#fff;color:var(--groen-diep);border:1px solid var(--rand-sterk);border-radius:14px;font:600 1rem/1.3 var(--sans);cursor:pointer;text-align:left}
  .gids-mobiel-filterknop>span:first-child{display:inline-flex;align-items:center;gap:.55rem}
  .gids-mobiel-filterknop svg{width:18px;height:18px}
  .gids-mobiel-pijl{display:grid;transition:transform .2s}
  .gids-mobiel-filterknop[aria-expanded="true"] .gids-mobiel-pijl{transform:rotate(90deg)}
  .gids-mobiel-filterknop:focus-visible{outline:3px solid var(--oker);outline-offset:2px}
  .gids-kaart{height:62vh;min-height:360px}
}