/* bzob.tdgdigital.com — "De muur van Zuidoost". Barlow Condensed (het woordmerk van het logo) + Mona Sans.
   Kleuren uit het logo: inkt #1E2328, oranje #F28D21; papier en kalk als grond, voeg als lijn. */
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlowcondensed-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlowcondensed-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlowcondensed-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/fonts/barlowcondensed-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Mona Sans";src:url(/fonts/monasans-400-800.woff2) format("woff2");font-weight:200 900;font-display:swap}
:root{
  --inkt:#1E2328;--nacht:#15181c;--papier:#F4F1EB;--kalk:#E8E3D9;--voeg:#CFC8BB;--oranje:#F28D21;--oranje-t:#A35400;
  --grijs:#5F646A;--grijs-d:#A7ABB0;
  --rand:clamp(1rem,4.2vw,4.5rem);--kop-h:4.75rem;
  --d:"Barlow Condensed","Arial Narrow",sans-serif;--t:"Mona Sans",system-ui,sans-serif;
  --steen-h:3.15rem;--voegb:.3rem;
  --metsel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='845' height='58'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='0' width='58' height='25'/%3E%3Crect x='65' y='0' width='58' height='25'/%3E%3Crect x='260' y='0' width='58' height='25'/%3E%3Crect x='325' y='0' width='58' height='25'/%3E%3Crect x='390' y='0' width='58' height='25'/%3E%3Crect x='455' y='0' width='58' height='25'/%3E%3Crect x='585' y='0' width='58' height='25'/%3E%3Crect x='650' y='0' width='58' height='25'/%3E%3Crect x='715' y='0' width='58' height='25'/%3E%3Crect x='780' y='0' width='58' height='25'/%3E%3Crect x='-32.5' y='32' width='58' height='26'/%3E%3Crect x='32.5' y='32' width='58' height='26'/%3E%3Crect x='97.5' y='32' width='58' height='26'/%3E%3Crect x='162.5' y='32' width='58' height='26'/%3E%3Crect x='227.5' y='32' width='58' height='26'/%3E%3Crect x='292.5' y='32' width='58' height='26'/%3E%3Crect x='357.5' y='32' width='58' height='26'/%3E%3Crect x='422.5' y='32' width='58' height='26'/%3E%3Crect x='487.5' y='32' width='58' height='26'/%3E%3Crect x='552.5' y='32' width='58' height='26'/%3E%3Crect x='617.5' y='32' width='58' height='26'/%3E%3Crect x='682.5' y='32' width='58' height='26'/%3E%3Crect x='747.5' y='32' width='58' height='26'/%3E%3Crect x='812.5' y='32' width='58' height='26'/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom/auto 100%;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--kop-h) + 1rem)}
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}:where(button,input,select,textarea){font-size:.8333rem}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:var(--t);font-size:1.0625rem;line-height:1.6;font-weight:400}
img,video,svg{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
p,li,dd,td{hyphens:auto;overflow-wrap:break-word;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;hyphenate-limit-chars:9 4 4}
h1,h2,h3{hyphens:manual;overflow-wrap:normal;text-wrap:balance;margin:0}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a[href^=mailto],a[href^=tel]{hyphens:none;white-space:nowrap}
:focus-visible{outline:3px solid var(--oranje);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--papier);padding:.5rem 1rem}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kolom{width:calc(100% - 2*var(--rand));margin-inline:auto}
.label{font-family:var(--d);font-weight:700;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .9rem;color:var(--oranje-t)}
.band-inkt .label,.pkop .label{color:var(--oranje)}
.band-oranje .label{color:var(--inkt)}
.label a{text-decoration:none}
h2{font-family:var(--d);font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,6.2vw,6rem);line-height:.9;letter-spacing:.003em}
h3{font-family:var(--d);font-weight:700;text-transform:uppercase;font-size:1.45rem;letter-spacing:.04em;line-height:1.05}
.intro{font-size:clamp(1.08rem,1.35vw,1.28rem);line-height:1.55;max-width:44rem;margin:1.2rem 0 0}
.oranje{color:var(--oranje)}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.1rem;padding:.7rem 1.5rem;border:0;border-radius:0;
  background:var(--oranje);color:var(--inkt);font-family:var(--d);font-weight:700;font-size:1.2rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  box-shadow:inset 0 -.22rem 0 rgba(0,0,0,.18);transition:transform .15s,background-color .15s}
.knop:hover{transform:translateY(-2px)}
.knop-inkt{background:var(--inkt);color:var(--papier)}
.lees{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:600;text-decoration:none;border-bottom:2px solid var(--oranje)}
.lees::after{content:"";width:.9rem;height:.6rem;margin-left:.5rem;background:currentColor;clip-path:polygon(0 35%,65% 35%,65% 0,100% 50%,65% 100%,65% 65%,0 65%)}

/* ---------- banden + sectierand: een laag metselwerk met vertanding ---------- */
.band{position:relative;padding-block:clamp(4.5rem,9vw,9rem);background:var(--bg);color:var(--fg)}
.band-papier{--bg:var(--papier);--fg:var(--inkt)}
.band-kalk{--bg:var(--kalk);--fg:var(--inkt)}
.band-inkt{--bg:var(--inkt);--fg:var(--papier)}
.band-oranje{--bg:var(--oranje);--fg:var(--inkt)}
.band::before{content:"";position:absolute;left:0;right:0;top:1px;height:clamp(1.9rem,2.9vw,3.1rem);transform:translateY(-100%);background:var(--bg);pointer-events:none;
  -webkit-mask:var(--metsel);mask:var(--metsel)}
.pkop + .band::before,.hero + .band::before{display:block}
.sec-kop{margin-bottom:clamp(2.2rem,4vw,3.6rem)}
.sec-kop-rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem 4rem;align-items:end}
.sec-kop-rij .intro{margin:0}

/* ---------- kop ---------- */
.kop{position:fixed;inset:0 0 auto;z-index:40;height:var(--kop-h);display:flex;align-items:center;gap:2rem;padding-inline:var(--rand);color:var(--papier);
  transition:background-color .3s,box-shadow .3s}
.kop.vast{background:var(--inkt);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.kop-logo{display:flex;align-items:center;min-height:2.75rem;flex-shrink:0;margin-right:auto}
.kop-logo svg{height:clamp(2.2rem,2.9vw,2.75rem);width:auto}
.kop-logo .lg-l{display:none}
.kop-nav ul{display:flex;gap:.3rem;list-style:none;margin:0;padding:0}
.kop-nav a{display:inline-flex;align-items:center;min-height:2.75rem;min-width:2.75rem;padding:0 .75rem;font-family:var(--d);font-weight:700;font-size:1.16rem;letter-spacing:.07em;text-transform:uppercase;text-decoration:none}
.kop-nav a:hover,.kop-nav a[aria-current]{color:var(--oranje)}
.kop-login{display:inline-flex;align-items:center;min-height:2.6rem;padding:0 1rem;border:2px solid currentColor;font-family:var(--d);font-weight:700;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;font-size:1.05rem}
.kop-login:hover{background:var(--oranje);border-color:var(--oranje);color:var(--inkt)}
.kop-menu{display:none;flex-shrink:0;width:2.9rem;height:2.9rem;border:0;background:var(--oranje);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:.28rem;padding:0}
.kop-menu span{display:block;width:1.3rem;height:.17rem;background:var(--inkt);transition:transform .25s,opacity .25s}
.kop-menu[aria-expanded=true] span:nth-child(1){transform:translateY(.45rem) rotate(45deg)}
.kop-menu[aria-expanded=true] span:nth-child(2){opacity:0}
.kop-menu[aria-expanded=true] span:nth-child(3){transform:translateY(-.45rem) rotate(-45deg)}
.lade{position:fixed;inset:var(--kop-h) 0 0;z-index:39;background:var(--inkt);color:var(--papier);padding:1.5rem var(--rand) 2rem;overflow-y:auto}
.lade ul{list-style:none;margin:0;padding:0}
.lade a{display:flex;align-items:center;min-height:3.4rem;font-family:var(--d);font-weight:800;font-size:2.4rem;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.12)}
.lade-volgend{margin-top:1.6rem;color:var(--grijs-d)}
@media (max-width:1060px){.kop-nav,.kop-login{display:none}.kop-menu{display:flex}}

/* ---------- opening: de muur wordt gemetseld ---------- */
.opening{position:fixed;inset:0;z-index:60;background:var(--inkt);display:grid;place-items:center;align-content:center;gap:clamp(1.5rem,4vh,3rem);padding:var(--rand);transition:opacity .7s ease,visibility .7s}
.opening.weg{opacity:0;visibility:hidden}
.op-muur{width:min(78vw,58rem,calc((100svh - 14rem) * 1.82));height:auto;aspect-ratio:1020/560}
.op-muur rect{transform-box:fill-box;transform-origin:50% 100%}
.op-woord{width:min(64vw,34rem);opacity:0;transform:translateY(.8rem);transition:opacity .6s,transform .6s}
.op-woord.zicht{opacity:1;transform:none}
.op-sla{position:absolute;right:var(--rand);bottom:1.5rem;min-height:2.75rem;min-width:2.75rem;padding:0 1rem;background:none;border:1px solid rgba(255,255,255,.3);color:var(--papier);font-family:var(--d);font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;min-height:max(100svh,38rem);display:flex;align-items:flex-end;background:var(--inkt);color:var(--papier);isolation:isolate;overflow:hidden}
.hero-beeld{position:absolute;inset:0;z-index:-1}
.hero-beeld img,.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-film{opacity:0;transition:opacity 1.2s}
.hero-film.speelt{opacity:1}
.hero-beeld::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(21,24,28,.72) 0,rgba(21,24,28,.1) 22%,rgba(21,24,28,.15) 45%,rgba(21,24,28,.82) 78%,rgba(21,24,28,.94) 100%),
  linear-gradient(90deg,rgba(21,24,28,.55),rgba(21,24,28,0) 60%)}
.hero-in{width:calc(100% - 2*var(--rand));margin:0 auto;padding:calc(var(--kop-h) + 3rem) 0 clamp(3.2rem,6vw,5.5rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,25rem);grid-template-areas:"label label" "kop kop" "tekst bord";gap:0 4rem;align-items:end}
.hero-label{grid-area:label;font-family:var(--d);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oranje);margin:0 0 1rem}
.hero-kop{grid-area:kop;font-family:var(--d);font-weight:800;text-transform:uppercase;font-size:clamp(4rem,12.4vw,15rem);line-height:.84;letter-spacing:-.005em;margin:0 0 1.6rem;text-wrap:initial}
.hero-kop .w{display:inline-block;white-space:nowrap}
.hero-tekst{grid-area:tekst;max-width:38rem;font-size:clamp(1.1rem,1.35vw,1.3rem);line-height:1.55;margin:0;align-self:end}
/* het bouwbord van de volgende bijeenkomst */
.bord{grid-area:bord;display:grid;background:var(--papier);color:var(--inkt);text-decoration:none;border-top:.55rem solid var(--oranje);box-shadow:0 1.2rem 2.6rem rgba(0,0,0,.35);transition:transform .2s}
.bord:hover{transform:translateY(-3px)}
.bord>span{padding:0 1.15rem}
.bord-kop{font-family:var(--d);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.95rem;padding-top:.85rem!important;color:var(--oranje-t)}
.bord-datum{font-family:var(--d);font-weight:800;font-size:2rem;line-height:1;text-transform:uppercase;margin-top:.3rem}
.bord-wat{font-size:.98rem;line-height:1.4;margin:.6rem 0 1rem;color:var(--grijs)}
.bord-voet{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--voeg);padding-block:.75rem!important;font-weight:600;font-size:.95rem}
.bord-pijl{font-family:var(--d);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem;display:inline-flex;align-items:center;gap:.5rem}
.bord-pijl::after{content:"";width:1rem;height:.7rem;background:var(--oranje);clip-path:polygon(0 35%,65% 35%,65% 0,100% 50%,65% 100%,65% 65%,0 65%)}

/* ---------- de muur ---------- */
.muur-bediening{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.m-filters{display:flex;flex-wrap:wrap;gap:.35rem}
.m-filter{min-height:2.75rem;padding:.4rem .85rem;border:0;background:transparent;color:inherit;font-family:var(--d);font-weight:700;font-size:1.08rem;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;box-shadow:inset 0 -2px 0 var(--voeg)}
.m-filter b{font-weight:600;color:var(--grijs);margin-left:.25rem}
.m-filter:hover{box-shadow:inset 0 -3px 0 var(--inkt)}
.m-filter[aria-pressed=true]{background:var(--inkt);color:var(--papier);box-shadow:inset 0 -.22rem 0 var(--oranje)}
.m-filter[aria-pressed=true] b{color:var(--oranje)}
.m-zoek input{width:min(19rem,80vw);min-height:2.9rem;padding:.5rem .9rem;border:2px solid var(--inkt);border-radius:0;background:var(--papier);font:inherit;color:var(--inkt)}
.m-status{min-height:1.6em;margin:0 0 .8rem;font-weight:600;color:var(--grijs)}
.muur-wrap{position:relative}
.muur{--n:8;display:grid;grid-template-columns:repeat(calc(var(--n)*2),minmax(0,1fr));gap:var(--voegb);position:relative}
.muur.js-los{display:flex;flex-wrap:wrap}
.steen,.halve{height:var(--steen-h);grid-column:span 2}
.halve{grid-column:span 1;background:var(--inkt);opacity:.92}
.steen{display:flex;align-items:center;padding:.3rem .65rem;background:var(--inkt);color:var(--papier);text-decoration:none;overflow:hidden;
  font-family:var(--d);font-weight:600;font-size:clamp(.88rem,.95vw,1.02rem);line-height:1.02;letter-spacing:.02em;text-transform:uppercase;
  transition:background-color .25s,color .25s,opacity .3s,transform .25s,box-shadow .25s;box-shadow:inset 0 -.18rem 0 rgba(0,0,0,.25)}
.steen span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;hyphens:none}
.steen:hover,.steen:focus-visible{background:var(--oranje);color:var(--inkt)}
.muur[data-filter] .steen{opacity:.16}
.muur[data-filter] .steen.raak{opacity:1;background:var(--oranje);color:var(--inkt)}
.muur[data-filter] .halve{opacity:.16}
.steen.uit{transform:translateY(-.35rem) scale(1.06);background:var(--oranje)!important;color:var(--inkt)!important;opacity:1!important;z-index:3;box-shadow:0 .9rem 1.6rem rgba(30,35,40,.38),inset 0 -.18rem 0 rgba(0,0,0,.2)}
.muur-compact .muur{max-height:min(36rem,62svh);overflow:hidden;-webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
.muur-compact.open .muur{max-height:none;-webkit-mask:none;mask:none;overflow:visible}
.muur-compact.open .m-meer{display:none}
.m-meer{display:flex;margin:1.2rem auto 0;min-height:2.9rem;padding:.6rem 1.4rem;border:2px solid var(--inkt);background:none;font-family:var(--d);font-weight:700;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;color:inherit}
.muur-klein{--n:6}
.muur-klein .steen{height:2.7rem;font-size:.9rem}
/* steenkaart */
.steenkaart{position:absolute;z-index:10;width:min(25rem,calc(100vw - 2*var(--rand)));background:var(--papier);color:var(--inkt);border-top:.5rem solid var(--oranje);box-shadow:0 1.4rem 3rem rgba(30,35,40,.32);padding:1.2rem 1.25rem 1.25rem}
.sk-logo{height:4.2rem;display:flex;align-items:center;margin-bottom:.9rem}
.sk-logo img{max-height:100%;width:auto;max-width:13rem;object-fit:contain}
.sk-naam{font-family:var(--d);font-weight:800;font-size:1.9rem;line-height:.98;text-transform:uppercase;margin:0}
.sk-meta{margin:.4rem 0 .8rem;color:var(--grijs);font-size:.95rem}
.sk-mensen{font-size:.95rem;margin:0 0 1rem}
.sk-knoppen{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.sk-knoppen .knop{min-height:2.75rem;font-size:1.05rem;padding:.5rem 1rem}
.sk-knoppen .lees{font-size:.95rem}
.sk-dicht{position:absolute;right:.4rem;top:.4rem;width:2.75rem;height:2.75rem;border:0;background:none;cursor:pointer;font-size:1.6rem;line-height:1;color:var(--grijs)}
@media (max-width:700px){
  .steenkaart{position:fixed;left:0;right:0;bottom:0;top:auto!important;width:auto;max-height:80svh;overflow-y:auto;z-index:45;padding-bottom:max(1.25rem,env(safe-area-inset-bottom))}
}

/* ---------- planning ---------- */
.sec-agenda{background:var(--inkt) linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 2.4rem}
.planning{display:grid;grid-template-columns:minmax(0,1fr) minmax(20rem,27rem);grid-template-areas:"kop kop" "schema detail";gap:1.6rem 3rem;align-items:start}
.pl-kop{grid-area:kop;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center}
.pl-jaren{display:flex;flex-wrap:wrap;gap:.25rem}
.pl-jaren button{min-height:2.75rem;min-width:3.6rem;border:0;background:transparent;color:var(--grijs-d);font-family:var(--d);font-weight:700;font-size:1.2rem;letter-spacing:.04em;cursor:pointer;box-shadow:inset 0 -2px 0 rgba(255,255,255,.14)}
.pl-jaren button[aria-selected=true]{color:var(--inkt);background:var(--oranje);box-shadow:none}
.pl-legenda{margin:0;display:flex;gap:.5rem 1.1rem;align-items:center;color:var(--grijs-d);font-size:.9rem;flex-wrap:wrap}
.pl-legenda i{display:inline-block;vertical-align:middle;margin-right:.35rem}
.pl-ruit{width:.85rem;height:.85rem;transform:rotate(45deg);border:2px solid var(--oranje)}
.pl-ruit.klaar{background:var(--grijs-d);border-color:var(--grijs-d)}
.pl-vandaag-l{width:2px;height:1.1rem;background:var(--oranje)}
.pl-schema{grid-area:schema;min-width:0}
.pl-maanden{display:grid;grid-template-columns:var(--lab,15rem) minmax(0,1fr);border-bottom:1px solid rgba(255,255,255,.18)}
.pl-maanden>div{display:grid;grid-template-columns:repeat(12,1fr)}
.pl-maanden>div span{font-family:var(--d);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.92rem;color:var(--grijs-d);padding:.35rem 0 .45rem .35rem;border-left:1px solid rgba(255,255,255,.12)}
.pl-rijen{list-style:none;margin:0 0 2rem;padding:0;position:relative}
.pl-rij{display:grid;grid-template-columns:var(--lab,15rem) minmax(0,1fr);border-bottom:1px solid rgba(255,255,255,.08)}
.pl-rij button{all:unset;box-sizing:border-box;display:contents;cursor:pointer}
.pl-lab{display:flex;flex-direction:column;justify-content:center;min-height:3.6rem;padding:.4rem .9rem .4rem 0;line-height:1.2;cursor:pointer}
.pl-lab b{font-family:var(--d);font-weight:700;font-size:1.18rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.pl-lab small{font-size:.84rem;color:var(--grijs-d);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pl-baan{position:relative;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px calc(100%/12));cursor:pointer}
.pl-balk{position:absolute;top:50%;height:.32rem;margin-top:-.16rem;background:rgba(242,141,33,.28)}
.pl-mark{position:absolute;top:50%;width:1.15rem;height:1.15rem;margin:-.575rem 0 0 -.575rem;transform:rotate(45deg);border:2px solid var(--oranje);background:var(--inkt);transition:transform .25s}
.pl-rij.klaar .pl-mark{background:var(--grijs-d);border-color:var(--grijs-d)}
.pl-rij.klaar .pl-balk{background:rgba(255,255,255,.1)}
.pl-rij.afgelast .pl-mark{background:transparent;border-color:var(--grijs-d);border-style:dashed}
.pl-rij.afgelast .pl-lab b{text-decoration:line-through;color:var(--grijs-d)}
.pl-rij.volgend .pl-mark{background:var(--oranje);animation:puls 1.8s ease-in-out infinite}
@keyframes puls{50%{box-shadow:0 0 0 .55rem rgba(242,141,33,0)}0%{box-shadow:0 0 0 0 rgba(242,141,33,.6)}}
.pl-rij:hover,.pl-rij.actief{background:rgba(255,255,255,.05)}
.pl-rij.actief .pl-lab b{color:var(--oranje)}
.pl-rij.actief .pl-mark{transform:rotate(45deg) scale(1.3)}
.pl-rij:focus-within{outline:3px solid var(--oranje);outline-offset:-3px}
.pl-vandaag{position:absolute;top:-2.2rem;bottom:-1.8rem;width:2px;background:var(--oranje);margin-left:calc(var(--lab,15rem));pointer-events:none}
.pl-vandaag::before{content:"Vandaag";position:absolute;bottom:-1.7rem;left:.4rem;font-family:var(--d);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--oranje);white-space:nowrap}
.pl-vandaag.rechts::before{left:auto;right:.4rem}
.pl-detail{grid-area:detail;background:var(--papier);color:var(--inkt);border-top:.55rem solid var(--oranje);padding:1.4rem 1.4rem 1.5rem;position:sticky;top:calc(var(--kop-h) + 1rem)}
.pd-status{font-family:var(--d);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.95rem;color:var(--oranje-t);margin:0}
.pd-datum{font-family:var(--d);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,2.6vw,2.6rem);line-height:.95;margin:.3rem 0 .6rem}
.pd-wat{margin:0 0 1rem;font-size:1.02rem}
.pd-prog{list-style:none;margin:0 0 1.1rem;padding:0;border-top:1px solid var(--voeg)}
.pd-prog li{display:grid;grid-template-columns:3.6rem 1fr;gap:.5rem;padding:.4rem 0;border-bottom:1px solid var(--voeg);font-size:.95rem;line-height:1.35}
.pd-prog b{font-family:var(--d);font-weight:700;font-size:1.1rem}
.pd-n{display:flex;align-items:baseline;gap:.6rem;margin:0 0 1rem}
.pd-n b{font-family:var(--d);font-weight:800;font-size:2.6rem;line-height:1}
.pd-knoppen{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center}
.pd-knoppen .knop{min-height:2.75rem;font-size:1.05rem;padding:.5rem 1.1rem}

/* ---------- de avond ---------- */
.avond{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.av-lijst{list-style:none;margin:2.2rem 0 0;padding:0;counter-reset:x}
.av-lijst li{border-top:1px solid var(--voeg)}
.av-lijst li:last-child{border-bottom:1px solid var(--voeg)}
.av-lijst button{all:unset;box-sizing:border-box;display:flex;align-items:baseline;gap:1.2rem;width:100%;min-height:3.4rem;padding:.55rem 0;cursor:pointer}
.av-lijst button b{font-family:var(--d);font-weight:800;font-size:2rem;line-height:1;min-width:4.4rem;color:var(--grijs);transition:color .2s}
.av-lijst button span{font-family:var(--d);font-weight:700;font-size:1.5rem;text-transform:uppercase;letter-spacing:.03em}
.av-lijst button[aria-pressed=true] b{color:var(--oranje-t)}
.av-lijst button:focus-visible{outline:3px solid var(--oranje)}
.av-lijst p{margin:0;max-height:0;overflow:hidden;opacity:0;padding-left:5.6rem;transition:max-height .4s,opacity .4s,padding .4s;color:var(--grijs)}
.av-lijst button[aria-pressed=true]+p{max-height:8rem;opacity:1;padding-bottom:.9rem}
.av-beelden{position:relative;aspect-ratio:4/3;background:var(--inkt);overflow:hidden}
.av-beeld{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s}
.av-beeld.actief{opacity:1}
.av-beeld img{width:100%;height:100%;object-fit:cover}
.av-beelden::after{content:"";position:absolute;left:0;bottom:0;height:.55rem;width:calc(var(--av,0) * 1%);background:var(--oranje);transition:width .3s linear}

/* ---------- lid worden ---------- */
.lidcheck{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"form kaart" "uit kaart";gap:1.6rem clamp(2rem,5vw,5rem);align-items:start}
.lc-form{grid-area:form;display:grid;gap:1rem}
.lc-veld{display:grid;gap:.35rem}
.lc-veld>span:first-child,.formulier label>span:first-child{font-family:var(--d);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:1rem}
.lc-veld input,.lc-select select,.formulier input,.formulier textarea{width:100%;min-height:3.1rem;padding:.6rem .9rem;border:2px solid var(--inkt);border-radius:0;background:var(--papier);color:var(--inkt);font:inherit;font-size:1.05rem}
.lc-veld input{font-family:var(--d);font-weight:700;font-size:1.6rem;letter-spacing:.12em;text-transform:uppercase}
.lc-select{position:relative;display:block}
.lc-select select{appearance:none;-webkit-appearance:none;padding-right:2.6rem}
.lc-select::after{content:"";position:absolute;right:1rem;top:50%;width:.7rem;height:.7rem;margin-top:-.5rem;border-right:2px solid var(--inkt);border-bottom:2px solid var(--inkt);transform:rotate(45deg);pointer-events:none}
.lc-form .knop{justify-self:start}
.lc-kaart{grid-area:kaart;margin:0}
.lc-kaart figcaption{margin-top:.6rem;font-size:.92rem}
.steenkaart-nb{width:100%;height:auto;aspect-ratio:1020/560;overflow:visible}
.steenkaart-nb rect{transition:fill .4s}
.steenkaart-nb .nb{fill:var(--inkt)}
.steenkaart-nb .zo{fill:var(--oranje)}
.band-oranje .steenkaart-nb .zo{fill:var(--papier)}
.steenkaart-nb .jij{animation:jij 1.1s steps(2,jump-none) infinite}
@keyframes jij{0%{fill:var(--oranje)}100%{fill:var(--inkt)}}
.band-oranje .steenkaart-nb .jij{animation-name:jij2}
@keyframes jij2{0%{fill:var(--inkt)}100%{fill:var(--papier)}}
.k-stip circle{fill:var(--papier);stroke:var(--inkt);stroke-width:5}
.k-stip .k-ring{fill:none;stroke:var(--inkt);stroke-width:4;transform-box:fill-box;transform-origin:center;animation:ring 2s ease-out infinite}
@keyframes ring{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
.lc-uitkomst{grid-area:uit;font-size:1.05rem}
.lc-uitkomst p{margin:0 0 .7rem}
.lc-uitkomst .lc-kop{font-family:var(--d);font-weight:800;font-size:2.1rem;line-height:.98;text-transform:uppercase;margin-bottom:.6rem}
.lc-uitkomst ul{margin:0 0 .8rem;padding:0;list-style:none}
.lc-uitkomst li{display:flex;gap:.6rem;align-items:baseline;padding:.25rem 0}
.lc-uitkomst li::before{content:"";flex:0 0 1.1rem;height:.55rem;background:var(--inkt)}
.lc-uitkomst li.nee::before{background:transparent;box-shadow:inset 0 0 0 2px var(--inkt)}
.lid-prijs{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem 3rem;align-items:center;margin-top:clamp(2.5rem,5vw,4.5rem);padding-top:2rem;border-top:2px solid var(--inkt)}
.lid-prijs p{margin:0}
.lp-bedrag{font-size:1rem}
.lp-bedrag b{display:block;font-family:var(--d);font-weight:800;font-size:clamp(3.6rem,6vw,5.6rem);line-height:.9}

/* ---------- sinds 1989 ---------- */
.sinds{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"tekst nieuws" "bestuur bestuur";gap:clamp(3rem,5vw,5rem) clamp(2rem,6vw,6rem)}
.sinds-tekst{grid-area:tekst}.sinds-bestuur{grid-area:bestuur}.sinds-nieuws{grid-area:nieuws}
.sinds h3{margin-bottom:1rem}
.sinds .lees{margin-top:1.4rem}
.bestuur-lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1.2rem}
.bestuur-lijst li{display:grid;gap:.15rem;line-height:1.25;font-size:.92rem}
.bestuur-lijst b{font-weight:600}
.bestuur-lijst li>span:last-child{color:var(--grijs)}
.bs-foto{display:block;aspect-ratio:4/5;background:var(--kalk);margin-bottom:.5rem;overflow:hidden}
.bs-foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .4s}
.bestuur-lijst li:hover img{filter:none}
.nieuws-lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--voeg)}
.nieuws-lijst a{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--voeg);text-decoration:none;align-items:baseline;min-height:2.75rem}
.nieuws-lijst time{font-size:.9rem;color:var(--grijs)}
.nieuws-lijst span{font-weight:600}
.nieuws-lijst a:hover span{text-decoration:underline;text-decoration-color:var(--oranje);text-decoration-thickness:2px}
.nieuws-groot a{grid-template-columns:12rem minmax(0,1fr);padding:1.2rem 0}
.nieuws-groot span{font-family:var(--d);font-weight:700;font-size:1.8rem;line-height:1.05;text-transform:uppercase}

/* ---------- paginakoppen ---------- */
.pkop{position:relative;padding:calc(var(--kop-h) + clamp(3rem,7vw,6rem)) 0 clamp(3.5rem,7vw,6rem);background:var(--inkt);color:var(--papier);overflow-x:clip}
.pkop::after{content:"";position:absolute;right:var(--rand);bottom:clamp(3.5rem,7vw,6rem);width:clamp(7rem,16vw,15rem);aspect-ratio:1020/560;opacity:.12;
  background:url(/logo/beeldmerk-wit.svg) center/contain no-repeat;pointer-events:none}
.pkop-h{font-family:var(--d);font-weight:800;text-transform:uppercase;font-size:clamp(3.1rem,8.4vw,9rem);line-height:.88;max-width:16ch}
.pkop-naam{font-size:clamp(2.5rem,6vw,6.4rem);max-width:none;overflow-wrap:anywhere;hyphens:auto}
.pkop-lang{font-size:clamp(2.4rem,5.4vw,5.6rem);max-width:22ch}
.pkop .intro{color:#d7d9dc}
.citaat{font-family:var(--d);font-weight:600;font-size:clamp(1.6rem,2.6vw,2.6rem);line-height:1.12;max-width:52rem;margin:1.6rem 0 0;padding-left:1.4rem;border-left:.55rem solid var(--oranje)}
.pkop-steen .kolom.pkop-lid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
.pkop-steen::after{display:none}
.lid-logo{background:var(--papier);padding:1.3rem 1.6rem;width:clamp(12rem,22vw,20rem);height:clamp(7rem,11vw,10rem);display:grid;place-items:center;border-top:.5rem solid var(--oranje)}
.lid-logo img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.lg-leeg{font-family:var(--d);font-weight:800;text-transform:uppercase;font-size:1.4rem;text-align:center;line-height:1}

/* ---------- lidpagina ---------- */
.lid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,6vw,6rem)}
.lid-tekst{font-size:1.12rem;max-width:44rem}
.lid-tekst p:first-child{margin-top:0;font-size:1.25rem;line-height:1.5}
.lid-h2{font-size:clamp(1.8rem,2.6vw,2.4rem);margin:2.5rem 0 1rem}
.personen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:1.2rem}
.personen li{display:grid;grid-template-columns:4.5rem minmax(0,1fr);grid-template-rows:auto auto;gap:0 .9rem;align-items:center}
.personen img,.pp-leeg{grid-row:span 2;width:4.5rem;height:4.5rem;object-fit:cover;background:var(--kalk)}
.pp-leeg{display:grid;place-items:center;font-family:var(--d);font-weight:800;font-size:1.4rem}
.personen b{font-weight:600;line-height:1.25;align-self:end}
.pp-li{font-size:.9rem;color:var(--oranje-t);align-self:start;display:inline-flex;min-height:2.75rem;align-items:center}
.lid-zij{display:grid;gap:1.6rem;align-content:start}
.lid-blok{margin:0;padding-top:1rem;border-top:2px solid var(--inkt)}
.lid-blok h2{font-size:1.6rem;margin-bottom:.6rem}
.lid-blok p{margin:0 0 .7rem}
.lid-blok a{display:inline-flex;min-height:2.2rem;align-items:center}
.lid-kaart figcaption{font-size:.9rem;color:var(--grijs);margin-top:.5rem}
.leeg{color:var(--grijs);font-style:italic}
.bij h2 b,.ev-h2 b{color:var(--oranje-t);margin-left:.4rem}
.bij-lijst{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:0 2.4rem}
.bij-lijst a{display:grid;grid-template-columns:6.6rem minmax(0,1fr);gap:.8rem;padding:.65rem 0;border-bottom:1px solid var(--voeg);text-decoration:none;align-items:baseline;min-height:2.75rem}
.bij-lijst time{font-family:var(--d);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--oranje-t)}
.buren{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem;border-top:2px solid var(--inkt)}
.buren a{display:grid;padding:1rem 0;text-decoration:none;font-family:var(--d);font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,2vw,1.9rem);line-height:1;min-height:2.75rem}
.buren a span{font-family:var(--t);font-weight:600;text-transform:none;font-size:.9rem;color:var(--grijs);margin-bottom:.35rem}
.buren a[rel=next]{text-align:right}
.buren a:hover{color:var(--oranje-t)}

/* ---------- bouwbord (evenement) ---------- */
.ev-kop{padding-top:calc(var(--kop-h) + clamp(2.5rem,6vw,5rem))}
.bouwbord{background:var(--papier);color:var(--inkt);max-width:62rem;box-shadow:0 2rem 4rem rgba(0,0,0,.4);position:relative}
.bouwbord::before,.bouwbord::after{content:"";position:absolute;bottom:-3.2rem;width:.9rem;height:3.2rem;background:linear-gradient(90deg,#8d8b86,#c9c6bf 40%,#77756f)}
.bouwbord::before{left:12%}.bouwbord::after{right:12%}
.bb-band{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--oranje);padding:.85rem clamp(1.1rem,3vw,2rem);font-family:var(--d);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(1.1rem,1.6vw,1.4rem)}
.bb-status{margin:0;font-size:.95rem;letter-spacing:.12em;background:var(--inkt);color:var(--papier);padding:.25rem .7rem}
.bb-status.afgelast{background:transparent;color:var(--inkt);box-shadow:inset 0 0 0 2px var(--inkt)}
.bb-datum{font-family:var(--d);font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,6.4vw,6.4rem);line-height:.9;padding:clamp(1.2rem,3vw,2.2rem) clamp(1.1rem,3vw,2rem) clamp(1rem,2vw,1.6rem)}
.bb-velden{margin:0;border-top:2px solid var(--inkt)}
.bb-velden div{display:grid;grid-template-columns:minmax(8rem,14rem) minmax(0,1fr);border-bottom:1px solid var(--voeg)}
.bb-velden dt{font-family:var(--d);font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.75rem clamp(1.1rem,3vw,2rem);color:var(--grijs)}
.bb-velden dd{margin:0;padding:.75rem clamp(1.1rem,3vw,2rem) .75rem 0;font-weight:600;font-size:1.1rem}
.bb-opdr{margin:0;padding:.75rem clamp(1.1rem,3vw,2rem);font-size:.9rem;color:var(--grijs);background:var(--kalk)}
.ev{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,6vw,6rem);padding-top:2rem}
.ev-tekst{font-size:1.1rem;max-width:46rem}
.ev-tekst>p:first-child{margin-top:0;font-size:1.3rem;line-height:1.45;font-weight:500}
.ev-tekst h3{margin:2rem 0 .5rem}
.punt{padding-left:1.4rem;position:relative}.punt::before{content:"";position:absolute;left:0;top:.65em;width:.8rem;height:.4rem;background:var(--oranje)}
.ev-beeld{margin:2rem 0 0}
.ev-beeld img{width:100%;height:auto}
.ev-zij{display:grid;gap:2rem;align-content:start}
.ev-prog h2,.ev-aanmeld h2{font-size:1.9rem;margin-bottom:.8rem}
.ev-prog table{width:100%;border-collapse:collapse;border-top:2px solid var(--inkt)}
.ev-prog th,.ev-prog td{text-align:left;vertical-align:top;padding:.6rem 0;border-bottom:1px solid var(--voeg)}
.ev-prog th{font-family:var(--d);font-weight:800;font-size:1.25rem;width:4.6rem;color:var(--oranje-t)}
.ev-aanmeld{background:var(--inkt);color:var(--papier);padding:1.4rem 1.4rem 1.5rem;border-top:.5rem solid var(--oranje)}
.ev-aanmeld p{margin:0 0 1rem}
.ev-aanmeld .f-noot a{color:var(--oranje)}
.ev-h2{font-size:clamp(2rem,4vw,3.6rem);margin-bottom:1.6rem}

/* ---------- archief ---------- */
.archief h2{margin-bottom:2rem}
.arch-jaar{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1rem 2rem;border-top:2px solid var(--inkt);padding:1.2rem 0 2rem}
.arch-jaar h2{font-size:2.6rem;margin:0}
.arch-jaar ol{list-style:none;margin:0;padding:0}
.arch-jaar a{display:grid;grid-template-columns:8.5rem minmax(0,1fr) auto;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--voeg);text-decoration:none;align-items:baseline;min-height:2.75rem}
.arch-jaar time{font-family:var(--d);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.arch-jaar small{color:var(--grijs);font-size:.88rem;white-space:nowrap}
.arch-jaar .afgelast span{text-decoration:line-through;color:var(--grijs)}
.arch-jaar a:hover span{color:var(--oranje-t)}

/* ---------- over, contact, formulieren ---------- */
.over{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,6vw,6rem)}
.over-blok h2{font-size:clamp(2rem,3.4vw,3.2rem);margin-bottom:1.2rem}
.over-blok h3{margin:2rem 0 .5rem}
.criteria{margin:0 0 1rem;padding-left:1.4rem}
.criteria li{padding:.3rem 0}
.criteria li::marker{font-family:var(--d);font-weight:800;color:var(--oranje-t)}
.branches{list-style:none;margin:0;padding:0;columns:2;column-gap:2rem}
.branches li{break-inside:avoid;padding:.45rem 0;border-bottom:1px solid var(--voeg);line-height:1.3}
.branches b{display:block;font-weight:600}.branches span{font-size:.88rem;color:var(--grijs)}
.aanvraag{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem)}
.formulier{display:grid;gap:1rem}
.formulier label{display:grid;gap:.35rem}
.f-rij{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.f-noot{font-size:.9rem;color:var(--grijs);margin:0}
.band-inkt .f-noot,.login .f-noot{color:var(--grijs-d)}
.formulier .knop{justify-self:start}
.bestuur-groot{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4rem 1.6rem}
.bestuur-groot li{font-size:1.05rem}
.bestuur-groot b{font-family:var(--d);font-weight:800;font-size:1.6rem;text-transform:uppercase;line-height:1}
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(2rem,6vw,6rem)}
.contact h2{font-size:2.4rem;margin-bottom:1rem}
.contact .groot{font-family:var(--d);font-weight:700;font-size:1.8rem;line-height:1.3}
.lees-kolom{max-width:44rem}
.lees-kolom p{margin:0 0 1rem}
.juridisch h2{font-size:1.9rem;margin:2rem 0 .6rem}
.login-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:3rem;align-items:start}
.login-form{background:var(--papier);color:var(--inkt);padding:1.6rem;border-top:.5rem solid var(--oranje)}
.login-form .f-noot{color:var(--grijs)}
.lijst-uit{margin-top:2.5rem}
.lijst-uit summary{display:inline-flex;align-items:center;min-height:2.75rem;cursor:pointer;font-family:var(--d);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem}
.tabel{width:100%;border-collapse:collapse;margin-top:1rem}
.tabel th,.tabel td{text-align:left;padding:.55rem .8rem .55rem 0;border-bottom:1px solid var(--voeg)}
.tabel th{font-family:var(--d);text-transform:uppercase;letter-spacing:.06em}
.tabel a{display:inline-flex;min-height:2.2rem;align-items:center}

/* ---------- voet ---------- */
.voet{background:var(--nacht);color:var(--papier);padding:clamp(3.5rem,7vw,6rem) var(--rand) 1.5rem;position:relative}
.voet::before{content:"";position:absolute;left:0;right:0;top:1px;height:clamp(1.9rem,2.9vw,3.1rem);transform:translateY(-100%);background:var(--nacht);-webkit-mask:var(--metsel);mask:var(--metsel)}
.voet-in{display:grid;grid-template-columns:minmax(12rem,1.2fr) repeat(3,minmax(0,1fr));gap:2.5rem}
.voet-logo{display:block;width:min(17rem,100%)}
.voet h2{font-size:1.3rem;letter-spacing:.08em;color:var(--oranje);margin-bottom:.8rem}
.voet p{margin:0 0 .8rem;color:#cfd2d5;font-size:.98rem}
.voet ul{list-style:none;margin:0;padding:0}
.voet li a{display:inline-flex;min-height:2.6rem;align-items:center;text-decoration:none;color:#cfd2d5}
.voet a:hover{color:var(--oranje)}
.voet p a{display:inline-flex;min-height:2.2rem;align-items:center}
.voet-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;margin-top:3rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1);font-size:.88rem;color:var(--grijs-d)}
.voet-onder a{display:inline-flex;min-height:2.75rem;align-items:center}

/* ---------- breekpunten ---------- */
@media (max-width:1180px){
  .planning{grid-template-columns:minmax(0,1fr);grid-template-areas:"kop" "schema" "detail"}
  .pl-detail{position:static}
  .bestuur-lijst{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sinds{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:1100px) and (orientation:portrait),(max-width:900px){
  .hero-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "kop" "tekst" "bord";gap:0}
  .bord{margin-top:2rem;max-width:30rem}
}
@media (max-width:900px){
  .sec-kop-rij,.avond,.lidcheck,.lid,.ev,.over,.aanvraag,.contact,.login-in{grid-template-columns:minmax(0,1fr)}
  .lidcheck{grid-template-areas:"form" "kaart" "uit"}
  .sinds{grid-template-columns:minmax(0,1fr);grid-template-areas:"tekst" "bestuur" "nieuws"}
  .lid-prijs{grid-template-columns:minmax(0,1fr)}
  .lid-prijs .knop{justify-self:start}
  .av-beelden{order:-1}
  .voet-in{grid-template-columns:1fr 1fr}
  .voet-logo{grid-column:1/-1}
  .pkop-steen .kolom.pkop-lid{grid-template-columns:minmax(0,1fr)}
  .bestuur-groot{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  :root{--steen-h:2.75rem;--voegb:.22rem;--kop-h:4.25rem}
  body{font-size:1.02rem}
  .hero{min-height:100svh}
  .hero-kop{font-size:calc((100vw - 2*var(--rand)) / 3.62);line-height:.86;margin-bottom:1.2rem}
  .hero-kop .w{display:block}
  .hero-in{padding-bottom:2.2rem}
  .hero-tekst{font-size:1.04rem}
  .bord-datum{font-size:1.7rem}
  .steen{font-size:.8rem;padding:.25rem .45rem;letter-spacing:.01em}
  .m-zoek,.m-zoek input{width:100%}
  .muur-bediening{gap:.8rem}
  .m-filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1*var(--rand));padding-inline:var(--rand);scrollbar-width:none;width:calc(100% + 2*var(--rand))}
  .m-filter{white-space:nowrap;flex-shrink:0}
  .pl-schema{--lab:0px}
  .pl-maanden{grid-template-columns:minmax(0,1fr)}
  .pl-maanden .pl-label-k{display:none}
  .pl-maanden>div span{font-size:.72rem;padding-left:.15rem;letter-spacing:0}
  .pl-rij{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1.9rem}
  .pl-lab{min-height:0;padding:.55rem 0 .1rem;flex-direction:row;gap:.6rem;align-items:baseline}
  .pl-lab small{-webkit-line-clamp:1}
  .pl-vandaag{margin-left:0}
  .bestuur-lijst{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem .8rem}
  .nieuws-lijst a,.nieuws-groot a{grid-template-columns:minmax(0,1fr);gap:.1rem}
  .nieuws-groot span{font-size:1.45rem}
  .av-lijst button b{font-size:1.6rem;min-width:3.8rem}
  .av-lijst button span{font-size:1.3rem}
  .av-lijst p{padding-left:5rem}
  .arch-jaar{grid-template-columns:minmax(0,1fr)}
  .arch-jaar a{grid-template-columns:5.6rem minmax(0,1fr)}
  .arch-jaar small{grid-column:2}
  .f-rij{grid-template-columns:minmax(0,1fr)}
  .branches{columns:1}
  .bb-velden div{grid-template-columns:minmax(0,1fr)}
  .bb-velden dt{padding-bottom:0}
  .bb-velden dd{padding:.2rem clamp(1.1rem,3vw,2rem) .75rem}
  .buren{grid-template-columns:minmax(0,1fr)}
  .buren a[rel=next]{text-align:left}
  .bij-lijst{grid-template-columns:minmax(0,1fr)}
  .pkop::after{opacity:.08;bottom:auto;top:calc(var(--kop-h) + 1rem)}
  .lade a{font-size:2rem}
  .voet-in{grid-template-columns:minmax(0,1fr)}
  .lc-veld input{font-size:1.35rem}
}
@media (orientation:landscape) and (max-height:520px){
  .hero{min-height:auto}
  .hero-in{padding-top:calc(var(--kop-h) + 1.2rem);grid-template-columns:minmax(0,1fr) minmax(15rem,20rem);grid-template-areas:"label label" "kop kop" "tekst bord";gap:0 2rem}
  .hero-kop{font-size:min(12vw,24svh);margin-bottom:1rem}
  .hero-kop .w{display:inline-block}
  .bord{margin-top:0}
  .bord-wat{display:none}
  .lade a{min-height:2.9rem;font-size:1.6rem}
  .opening{gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}