/* bzob2.tdgdigital.com — "Tot maandag." Sociëteit-concept op logo 2 (rond embleem, Fraunces, koper).
   Alles in rem; vanaf 1440 schaalt het hele ontwerp mee (onderaan). */
@font-face{font-family:Fraunces;src:url(/fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url(/fonts/fraunces-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:Commissioner;src:url(/fonts/commissioner.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --groen:#17231F; --groen-2:#20302A; --groen-3:#2C4038;
  --inkt:#1E2328; --tekst:#2B2F31; --zacht:#6A6862;
  --koper:#C47A35; --koper-d:#A5612A; --koper-l:#E2A86E;
  --papier:#F3EDE3; --creme:#FBF8F2; --lijn:rgba(30,35,40,.16); --lijn-l:rgba(251,248,242,.18);
  --f-d:Fraunces, Georgia, "Times New Roman", serif; --f-t:Commissioner, system-ui, -apple-system, "Segoe UI", sans-serif;
  --goot:clamp(1rem, 4vw, 3.5rem); --kop-h:4.25rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--papier);color:var(--tekst);font:400 1.0625rem/1.6 var(--f-t);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;hyphens:auto;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--koper-d)}
h1,h2,h3{font-family:var(--f-d);font-weight:500;line-height:1.02;letter-spacing:-.015em;margin:0;hyphens:manual;font-optical-sizing:auto;text-wrap:balance}
h1 em,h2 em{font-style:italic;font-weight:400;color:var(--koper-d)}
.band-groen h1 em,.band-groen h2 em,.hero em{color:var(--koper-l)}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--koper);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--creme);padding:.6rem 1rem;border-radius:.3rem}
.skip:focus{top:1rem}

.kolom{width:min(100% - 2*var(--goot), 92rem);margin-inline:auto}
.band{padding:clamp(4rem, 9vw, 8.5rem) 0}
.band-groen{background:var(--groen);color:var(--creme)}
.band-papier{background:var(--papier)}
.band-creme{background:var(--creme)}
.label{font:600 .8rem/1.2 var(--f-t);letter-spacing:.02em;color:var(--koper-d);margin:0 0 1.1rem;display:flex;align-items:baseline;gap:.6rem}
.label::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor;flex-shrink:0;transform:translateY(-.05rem)}
.band-groen .label,.hero .label{color:var(--koper-l)}
.label a{text-decoration:none}
.sec-kop{max-width:46rem;margin-bottom:clamp(2.5rem, 5vw, 4rem)}
.sec-kop h2{font-size:clamp(2.6rem, 6.4vw, 5.6rem)}
.sec-kop .intro{margin-top:1.4rem}
.sec-kop-rij{max-width:none;display:grid;grid-template-columns:1fr;gap:1.2rem 4rem;align-items:end}
@media (min-width:56rem){.sec-kop-rij{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.sec-kop-rij .intro{margin:0 0 .6rem}}
.intro{font-size:clamp(1.06rem, 1.5vw, 1.2rem);line-height:1.6;max-width:40rem}
.band-groen .intro{color:rgba(251,248,242,.82)}

.knop{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.75rem 1.4rem;border-radius:2rem;border:1.5px solid var(--inkt);background:var(--inkt);color:var(--creme);font-weight:600;font-size:.98rem;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.knop:hover{background:var(--koper-d);border-color:var(--koper-d);color:var(--creme)}
.knop-lijn{background:transparent;color:var(--inkt)}
.band-groen .knop{background:var(--koper);border-color:var(--koper);color:var(--groen)}
.band-groen .knop:hover{background:var(--koper-l);border-color:var(--koper-l)}
.lees{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor}
.lees::after{content:"→";transition:transform .2s}
.lees:hover::after{transform:translateX(.25rem)}

/* ---------- embleem ---------- */
.embleem{width:100%;height:auto;aspect-ratio:1;overflow:visible}
.em-buiten{fill:none;stroke:currentColor;stroke-width:3}
.em-binnen{fill:none;stroke:currentColor;stroke-width:1.5}
.em-tekst{fill:currentColor;font-family:var(--f-d);font-weight:600;font-variation-settings:"opsz" 24}
.em-nb{fill:none;stroke:currentColor;stroke-linejoin:round}
.em-zo{fill:var(--koper)}
.em-zob{fill:currentColor;font-family:var(--f-d);font-style:italic;font-weight:500}

/* ---------- kop ---------- */
.kop{position:fixed;inset:0 0 auto;z-index:50;height:var(--kop-h);display:flex;align-items:center;gap:1.5rem;padding:0 var(--goot);color:var(--creme);transition:background .35s,box-shadow .35s,transform .35s}
.kop.is-vast{background:rgba(23,35,31,.94);box-shadow:0 1px 0 var(--lijn-l)}
@supports (backdrop-filter:blur(1rem)){.kop.is-vast{background:rgba(23,35,31,.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}}
.merk{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit;margin-right:auto;min-height:2.75rem}
.merk:hover{color:inherit}
.merk-em{width:2.9rem;flex-shrink:0;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.merk:hover .merk-em{transform:rotate(-24deg)}
.merk-w{display:flex;flex-direction:column;line-height:1.02}
.merk-w b{font:600 1.15rem/1 var(--f-d);letter-spacing:-.005em}
.merk-w i{font:italic 400 .9rem/1.15 var(--f-d);color:var(--koper-l)}
.kop-nav ul{display:flex;gap:1.7rem;list-style:none;margin:0;padding:0}
.kop-nav a,.kop-login{font-size:.94rem;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;min-height:2.75rem;position:relative}
.kop-nav a::after{content:"";position:absolute;left:50%;bottom:.45rem;width:.32rem;height:.32rem;border-radius:50%;background:var(--koper-l);transform:translateX(-50%) scale(0);transition:transform .25s}
.kop-nav a:hover,.kop-nav a[aria-current]{color:inherit}
.kop-nav a:hover::after,.kop-nav a[aria-current]::after{transform:translateX(-50%) scale(1)}
.kop-login{border:1px solid var(--lijn-l);border-radius:2rem;padding:0 1.1rem}
.kop-login:hover{border-color:var(--koper-l);color:inherit}
.kop-menu{display:none;flex-shrink:0;width:2.9rem;height:2.9rem;border-radius:50%;border:1px solid var(--lijn-l);background:transparent;cursor:pointer;position:relative}
.kop-menu span{position:absolute;left:30%;right:30%;height:1.5px;background:currentColor;transition:transform .3s}
.kop-menu span:first-child{top:42%}.kop-menu span:nth-child(2){top:58%}
.kop-menu[aria-expanded="true"] span:first-child{transform:translateY(.23rem) rotate(45deg)}
.kop-menu[aria-expanded="true"] span:nth-child(2){transform:translateY(-.23rem) rotate(-45deg)}
.lade{position:fixed;inset:0;z-index:45;background:var(--groen);color:var(--creme);padding:calc(var(--kop-h) + 1.5rem) var(--goot) 2rem;overflow-y:auto;max-height:100dvh}
.lade ul{list-style:none;margin:0;padding:0}
.lade li a{display:block;font:500 clamp(2rem, 8vw, 3rem)/1.15 var(--f-d);text-decoration:none;padding:.45rem 0;border-bottom:1px solid var(--lijn-l)}
.lade-volgend{margin-top:2rem;color:rgba(251,248,242,.75)}
.lade-volgend a{color:var(--koper-l)}
@media (max-width:68rem){.kop-nav,.kop-login{display:none}.kop-menu{display:block}}
@media (max-width:22rem){.merk-w b{font-size:1rem}.merk-w i{font-size:.8rem}.merk-em{width:2.5rem}}

/* ---------- opening: het embleem wordt gestempeld ---------- */
.opening{position:fixed;inset:0;z-index:80;background:var(--creme);color:var(--inkt);display:grid;place-items:center;align-content:center;gap:1.4rem;transition:opacity .7s ease .1s, visibility 0s linear .8s}
.opening[hidden]{display:none}
.op-stempel{width:min(62vw, 46svh, 24rem);position:relative}
.op-stempel::after{content:"";position:absolute;inset:-3%;border-radius:50%;border:2px solid var(--koper);opacity:0;transform:scale(.9)}
.op-woord{margin:0;display:flex;flex-direction:column;align-items:center;line-height:1.05;opacity:0;transform:translateY(.6rem)}
.op-woord b{font:600 clamp(1.8rem, 5vw, 2.6rem)/1 var(--f-d)}
.op-woord i{font:italic 400 clamp(1.1rem, 3vw, 1.5rem)/1.3 var(--f-d);color:var(--koper-d)}
.op-sla{position:absolute;right:var(--goot);bottom:max(1.5rem, env(safe-area-inset-bottom));border:0;background:none;font-size:.9rem;color:var(--zacht);cursor:pointer;min-height:2.75rem;text-decoration:underline;text-underline-offset:.2em}
.opening .em-buiten,.opening .em-binnen,.opening .em-nb{stroke-dasharray:100;stroke-dashoffset:100}
.opening .em-masker{stroke-dasharray:100;stroke-dashoffset:100}
.opening .em-zo{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6)}
.opening .em-zob{opacity:0}
.opening.speelt .em-buiten{animation:teken 1s cubic-bezier(.6,0,.3,1) forwards}
.opening.speelt .em-masker{animation:teken 1.25s cubic-bezier(.45,0,.3,1) .35s forwards}
.opening.speelt .em-binnen{animation:teken .8s cubic-bezier(.6,0,.3,1) .55s forwards}
.opening.speelt .em-nb{animation:teken 1.1s ease-in-out .85s forwards}
.opening.speelt .em-zo{animation:zo .55s cubic-bezier(.2,1.4,.4,1) 1.8s forwards}
.opening.speelt .em-zob{animation:in .4s ease 2s forwards}
.opening.speelt .op-woord{animation:op .6s ease 2.1s forwards}
.opening.speelt .op-stempel{animation:druk .5s cubic-bezier(.3,0,.3,1) 2.45s}
.opening.speelt .op-stempel::after{animation:rand .9s ease-out 2.6s}
.opening.weg{opacity:0;visibility:hidden}
@keyframes teken{to{stroke-dashoffset:0}}
@keyframes zo{to{opacity:1;transform:none}}
@keyframes in{to{opacity:1}}
@keyframes op{to{opacity:1;transform:none}}
@keyframes druk{40%{transform:scale(.955)}100%{transform:none}}
@keyframes rand{0%{opacity:.8;transform:scale(.96)}100%{opacity:0;transform:scale(1.18)}}
body.opening-aan{overflow:hidden}
body.opening-aan .kop{opacity:0;transition:none}
.kop{transition:background .35s,box-shadow .35s,opacity .6s ease .1s}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr;align-content:end;gap:2rem;padding:calc(var(--kop-h) + 2rem) var(--goot) clamp(2rem, 5vw, 4rem);color:var(--creme);background:var(--groen);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(23,35,31,.55) 0, rgba(23,35,31,.05) 22%, rgba(23,35,31,.1) 34%, rgba(23,35,31,.8) 66%, rgba(23,35,31,.96) 100%),linear-gradient(90deg, rgba(23,35,31,.62), rgba(23,35,31,.15) 55%, rgba(23,35,31,0) 75%)}
.hero-in{max-width:56rem}
.hero-boven{font-weight:600;font-size:.9rem;color:var(--koper-l);margin-bottom:.8rem;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.hero-boven span span{color:var(--creme);opacity:.6;margin:0 .2rem}
@media (max-width:24rem){.hb-naam{display:none}}
.hero-kop{font-size:clamp(4.2rem, 21vw, 13rem);font-weight:500;line-height:.86;letter-spacing:-.035em;font-variation-settings:"opsz" 144;margin-left:-.04em}
.hero-kop em{font-weight:400;display:block}
.hero-tekst{hyphens:manual;max-width:36rem;margin:1.6rem 0 0;font-size:clamp(1.05rem, 1.5vw, 1.22rem);color:rgba(251,248,242,.88)}
.convocatie{display:grid;gap:.35rem;width:min(100%, 24rem);background:var(--creme);color:var(--inkt);text-decoration:none;padding:1.4rem 1.5rem 1.2rem;border-radius:.2rem;position:relative;box-shadow:0 1.6rem 3rem -1.6rem rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.convocatie::before{content:"";position:absolute;inset:.45rem;border:1px solid rgba(196,122,53,.55);pointer-events:none}
.convocatie:hover{transform:translateY(-.3rem) rotate(-.6deg);color:var(--inkt)}
.cv-kop{font-size:.78rem;font-weight:600;color:var(--koper-d)}
.cv-datum{font:500 1.6rem/1.05 var(--f-d);hyphens:manual}
.cv-wat{font:italic 400 1.05rem/1.35 var(--f-d);color:var(--tekst)}
.cv-voet{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.6rem;padding-top:.7rem;border-top:1px solid var(--lijn);font-size:.86rem;font-weight:600}
@media (min-width:62rem){.hero{grid-template-columns:1fr auto;align-items:end}.convocatie{margin-bottom:.4rem}}
@media (max-height:34rem) and (orientation:landscape){.hero{grid-template-columns:1fr auto;align-items:end}.hero-kop{font-size:clamp(3rem, 11vw, 6rem)}.hero-tekst{display:none}.convocatie{width:18rem;padding:1rem 1.1rem}.cv-datum{font-size:1.25rem}}

/* ---------- Aan tafel ---------- */
.tafel{display:grid;gap:1.5rem}
.tf-kies label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.6rem}
.tf-rij{display:flex;flex-wrap:wrap;gap:.6rem}
.tf-rij input{flex:1 1 16rem;min-height:3rem;padding:.7rem 1.1rem;border:1.5px solid var(--lijn);border-radius:2rem;background:var(--creme)}
.band-creme .tf-rij input{background:#fff}
.tf-rij input:focus{border-color:var(--koper);outline:none}
.tf-zaal{position:relative;width:min(100%, 54rem);margin:1rem auto 0;aspect-ratio:1.45}
.tf-blad{position:absolute;left:50%;top:50%;width:40%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 50% 50%, #fff 0, var(--creme) 70%);box-shadow:0 0 0 1px var(--lijn), inset 0 0 0 .55rem var(--creme), inset 0 0 0 calc(.55rem + 1px) rgba(196,122,53,.5), 0 2rem 3rem -2rem rgba(23,35,31,.45);transition:border-radius .5s,width .5s,height .5s,aspect-ratio .5s}
.tf-midden{position:absolute;left:50%;top:50%;width:32%;transform:translate(-50%,-50%);text-align:center;display:grid;justify-items:center;gap:.3rem;z-index:2}
.tf-midden .tm-em{width:3.4rem;color:var(--inkt)}
.tf-midden b{font:500 clamp(1.05rem, 2.1vw, 1.55rem)/1.1 var(--f-d);hyphens:manual;overflow-wrap:break-word;text-wrap:balance}
.tf-midden small{font-size:.82rem;color:var(--zacht)}
.tf-midden a{font-size:.85rem;font-weight:600;color:var(--koper-d);min-height:2.75rem;display:inline-flex;align-items:center}
.tf-stoelen{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.tf-stoel{position:absolute;width:clamp(8rem, 24%, 13rem);transform:translate(-50%,-50%);transition:left .7s cubic-bezier(.2,.8,.2,1), top .7s cubic-bezier(.2,.8,.2,1), opacity .5s;text-align:center}
.tf-stoel button{all:unset;cursor:pointer;display:grid;justify-items:center;gap:.25rem;width:100%;min-height:2.75rem;padding:.3rem;border-radius:.4rem;box-sizing:border-box}
.tf-stoel button:focus-visible{outline:2px solid var(--koper);outline-offset:2px}
.tf-stoel i{width:1.25rem;height:1.25rem;border-radius:50%;background:var(--koper);box-shadow:0 0 0 .3rem rgba(196,122,53,.18);transition:transform .25s}
.tf-stoel b{font:500 1rem/1.15 var(--f-d);color:var(--inkt);hyphens:auto;overflow-wrap:break-word;text-wrap:balance}
.tf-stoel small{font-size:.78rem;color:var(--zacht);font-weight:600}
.tf-stoel button:hover i{transform:scale(1.3)}
.tf-stoel button:hover b{color:var(--koper-d)}
.tafel.is-nieuw .tf-stoel{left:50%!important;top:50%!important;opacity:0}
.tf-noot{font-size:.88rem;color:var(--zacht);text-align:center;max-width:40rem;margin:0 auto}
/* lange tafel (smal scherm): naam boven aan het hoofd, gasten links en rechts */
.tafel.is-lang .tf-zaal{aspect-ratio:auto;height:44rem}
.tafel.is-lang .tf-blad{width:30%;aspect-ratio:auto;top:7.5rem;height:calc(100% - 7.5rem);transform:translateX(-50%);border-radius:2.5rem}
.tafel.is-lang .tf-midden{top:0;width:100%;transform:translateX(-50%)}
.tafel.is-lang .tf-midden .tm-em{display:none}
.tafel.is-lang .tf-stoel{width:34%}
.tafel.is-lang .tf-stoel b{font-size:.92rem;hyphens:auto;overflow-wrap:anywhere}
@media (max-width:24rem){.tafel.is-lang .tf-stoel b{font-size:.84rem}.tafel.is-lang .tf-stoel small{font-size:.72rem}}

/* ---------- Het jaar rond ---------- */
.jaarring{display:grid;gap:1.6rem}
.jr-jaren{display:flex;flex-wrap:wrap;gap:.3rem}
.jr-jaren button{min-height:2.75rem;min-width:3.6rem;padding:0 .9rem;border-radius:2rem;border:1px solid var(--lijn-l);background:transparent;cursor:pointer;font:500 1rem var(--f-d)}
.jr-jaren button[aria-pressed="true"]{background:var(--creme);color:var(--groen);border-color:var(--creme)}
.jr-jaren button:hover{border-color:var(--koper-l)}
.jr-veld{display:grid;grid-template-columns:1fr;gap:2rem 4rem;align-items:center}
@media (min-width:60rem){.jr-veld{grid-template-columns:minmax(0, 37rem) minmax(0,1fr)}}
.jr-schijf{position:relative;width:min(100%, 37rem);margin-inline:auto;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;border-radius:50%}
.jr-schijf.sleept{cursor:grabbing}
.jr-svg{width:100%;height:auto;aspect-ratio:1}
.jr-buiten{fill:none;stroke:var(--lijn-l);stroke-width:2}
.jr-baan{fill:none;stroke:rgba(251,248,242,.3);stroke-width:2}
.jr-binnen{fill:var(--groen-2);stroke:rgba(226,168,110,.45);stroke-width:2}
.jr-maand{fill:rgba(251,248,242,.62);font:italic 400 29px var(--f-d);letter-spacing:.02em}
.jr-streep{stroke:rgba(251,248,242,.35);stroke-width:2}
.jr-wijzer{fill:var(--koper-l)}
.jr-punt{cursor:pointer}
.jr-punt circle{fill:var(--koper);stroke:var(--groen);stroke-width:6;transition:r .3s}
.jr-punt.toekomst circle{fill:var(--groen);stroke:var(--koper-l);stroke-width:5}
.jr-punt.afgelast circle{fill:var(--groen-3);stroke:rgba(251,248,242,.4)}
.jr-punt.gekozen circle{fill:var(--koper-l);stroke:var(--creme);stroke-width:5}
.jr-punt .jr-gloed{fill:none;stroke:var(--koper-l);stroke-width:2;opacity:0}
.jr-punt.gekozen .jr-gloed{opacity:.7}
.jr-vandaag line{stroke:var(--creme);stroke-width:3}
.jr-vandaag text{fill:var(--creme);font:600 20px var(--f-t)}
.jr-midden{position:absolute;inset:22%;display:grid;place-content:center;justify-items:center;text-align:center;pointer-events:none}
.jm-dag{font:500 .95rem var(--f-t);color:var(--koper-l)}
.jm-nr{font:500 clamp(4.2rem, 13vw, 7.5rem)/.9 var(--f-d);letter-spacing:-.04em;font-variation-settings:"opsz" 144}
.jm-maand{font:italic 400 clamp(1.1rem, 3vw, 1.5rem)/1.2 var(--f-d)}
.jm-status{margin-top:.5rem;font:italic 400 1.05rem var(--f-d);color:rgba(251,248,242,.7)}
.jm-status.komt{color:var(--koper-l)}
.jr-detail{max-width:34rem;min-height:12rem}
.jr-detail h3{font-size:clamp(1.7rem, 3vw, 2.5rem);line-height:1.08;margin-bottom:1rem}
.jr-detail ol{list-style:none;margin:0 0 1.2rem;padding:0;border-top:1px solid var(--lijn-l)}
.jr-detail li{display:flex;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--lijn-l);font-size:.95rem}
.jr-detail li b{font:500 1rem var(--f-d);color:var(--koper-l);min-width:3.2rem;font-variant-numeric:tabular-nums}
.jr-detail .jd-n{color:rgba(251,248,242,.75);font-size:.95rem}
.jr-detail .jd-leeg{color:rgba(251,248,242,.6);font-style:italic}
.jr-knoppen{display:flex;align-items:center;justify-content:center;gap:1rem}
@media (min-width:60rem){.jr-knoppen{width:37rem;max-width:100%}}
.jr-pijl{width:3rem;height:3rem;border-radius:50%;border:1px solid var(--lijn-l);background:transparent;cursor:pointer;font:400 1.6rem/1 var(--f-d);display:grid;place-items:center;padding-bottom:.2rem}
.jr-pijl:hover{border-color:var(--koper-l);color:var(--koper-l)}
.jr-hint{margin:0;font-size:.86rem;color:rgba(251,248,242,.62);text-align:center}

/* ---------- de avond ---------- */
.avond{display:grid;grid-template-columns:1fr;gap:2.5rem 5rem;align-items:center}
@media (min-width:58rem){.avond{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.av-beeld{margin:0;position:relative;border-radius:50% 50% .3rem .3rem / 32% 32% .3rem .3rem;overflow:hidden;aspect-ratio:4/5;background:var(--groen)}
.av-beeld img{width:100%;height:100%;object-fit:cover}
@media (min-width:40rem) and (max-width:57.99rem){.av-beeld{aspect-ratio:16/11;border-radius:.3rem}}
.av-tekst h2{font-size:clamp(2.6rem, 5.6vw, 4.8rem);margin-bottom:1.4rem}
.av-tekst>p:not(.label){max-width:34rem;font-size:1.1rem}
.menukaart{margin-top:2.2rem;background:#fff;padding:1.8rem clamp(1.2rem, 3vw, 2.4rem) 1.4rem;position:relative;max-width:30rem;text-align:center;box-shadow:0 1.5rem 3rem -2rem rgba(23,35,31,.35)}
.menukaart::before{content:"";position:absolute;inset:.45rem;border:1px solid rgba(196,122,53,.5);pointer-events:none}
.mk-kop{font:italic 400 1.25rem/1.2 var(--f-d);margin:0 0 1rem}
.menukaart ol{list-style:none;margin:0;padding:0}
.menukaart li{display:flex;align-items:baseline;gap:.6rem;padding:.35rem 0;text-align:left}
.menukaart li b{font:500 1.05rem var(--f-d);min-width:3.1rem;font-variant-numeric:tabular-nums;color:var(--koper-d)}
.menukaart li span{flex:1}
.mk-voet{margin:1rem 0 0;font:italic 400 .85rem var(--f-d);color:var(--zacht)}

/* ---------- Hoort u erbij? ---------- */
.lidcheck{display:grid;grid-template-columns:1fr;gap:2rem 4rem;align-items:center}
@media (min-width:58rem){.lidcheck{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.lc-kaart{margin:0}
.lc-kaart figcaption,.lid-kaart figcaption{font-size:.86rem;color:var(--zacht);margin-top:.6rem}
.kaart{width:100%;height:auto;aspect-ratio:1024/556;overflow:visible}
.k-nb{fill:var(--creme);stroke:var(--inkt);stroke-width:2.2;stroke-linejoin:round}
.band-creme .k-nb{fill:#fff}
.k-gem{fill:rgba(196,122,53,.32);stroke:var(--papier);stroke-width:1.6;stroke-linejoin:round;transition:fill .4s}
.k-gem:hover{fill:rgba(196,122,53,.55)}
.k-gem.k-hier{fill:var(--koper)}
.k-stip{fill:var(--inkt)}
.k-stip .k-ring{fill:none;stroke:var(--inkt);stroke-width:2.5;animation:puls 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes puls{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.5);opacity:0}}
.lc-form{display:grid;gap:1rem}
.veld{display:grid;gap:.35rem}
.veld>span:first-child{font-size:.88rem;font-weight:600}
.veld input,.veld select,.veld textarea{width:100%;min-height:3rem;padding:.7rem .95rem;border:1.5px solid var(--lijn);border-radius:.35rem;background:#fff}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--koper);outline:none}
.select{position:relative}
.select::after{content:"";position:absolute;right:1rem;top:50%;width:.5rem;height:.5rem;border:solid var(--inkt);border-width:0 1.5px 1.5px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.select select{appearance:none;-webkit-appearance:none;padding-right:2.4rem}
.lc-form .knop{justify-self:start}
.lc-uit{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--lijn);min-height:7rem}
.lc-uit .lu-kop{font:500 clamp(1.5rem, 3vw, 2.1rem)/1.1 var(--f-d);margin-bottom:.7rem}
.lc-uit .lu-kop em{color:var(--koper-d)}
.lc-uit ul{margin:.4rem 0 1rem;padding:0;list-style:none}
.lc-uit li{padding:.3rem 0 .3rem 1.6rem;position:relative}
.lc-uit li::before{content:"";position:absolute;left:0;top:.75rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--koper)}
.lc-uit li.nee::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--zacht)}
.contributie{margin-top:clamp(3rem, 6vw, 5rem);display:grid;gap:1rem 3rem;grid-template-columns:1fr;align-items:center;padding-top:2rem;border-top:1px solid var(--lijn)}
@media (min-width:56rem){.contributie{grid-template-columns:auto 1fr auto}}
.ct-bedrag{margin:0;display:flex;flex-direction:column}
.ct-bedrag b{font:500 clamp(3rem, 6vw, 4.6rem)/1 var(--f-d);letter-spacing:-.03em}
.ct-bedrag span{font-size:.9rem;color:var(--zacht)}
.contributie p:not(.ct-bedrag){margin:0;max-width:38rem}

/* ---------- sinds 1989 ---------- */
.sinds{display:grid;grid-template-columns:1fr;gap:2rem 5rem;align-items:center}
@media (min-width:56rem){.sinds{grid-template-columns:auto 1fr}}
.sinds-jaar{display:flex;flex-direction:column;font:400 clamp(7rem, 22vw, 17rem)/.8 var(--f-d);letter-spacing:-.05em;font-variation-settings:"opsz" 144;color:transparent;-webkit-text-stroke:1.5px var(--koper-l)}
.sinds-jaar span:last-child{margin-left:.45em;color:var(--koper-l);-webkit-text-stroke:0;font-style:italic}
.sinds-tekst h2{font-size:clamp(2.6rem, 5.6vw, 4.8rem);margin-bottom:1.4rem}
.sinds-onder{display:grid;grid-template-columns:1fr;gap:3rem 5rem;margin-top:clamp(3.5rem, 7vw, 6rem);padding-top:3rem;border-top:1px solid var(--lijn-l)}
@media (min-width:60rem){.sinds-onder{grid-template-columns:1.5fr 1fr}}
.sinds-onder h3{font-size:1.6rem;margin-bottom:1.4rem}
.bestuur{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(8.5rem, 1fr));gap:1.6rem 1.2rem}
.bestuur li{display:grid;gap:.15rem;justify-items:start;font-size:.9rem}
.bestuur b{font:500 1.02rem/1.2 var(--f-d);margin-top:.6rem}
.bestuur li>span:last-child{color:var(--zacht)}
.band-groen .bestuur li>span:last-child{color:rgba(251,248,242,.66)}
.rond{display:block;width:6.5rem;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--groen-3);box-shadow:0 0 0 1px rgba(196,122,53,.6), 0 0 0 .3rem transparent}
.rond img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.bestuur li:hover .rond img{filter:none}
.bestuur-groot{grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr));gap:3rem 2rem}
.bestuur-groot .rond{width:min(100%, 12rem)}
.nieuws{list-style:none;margin:0 0 1.2rem;padding:0}
.nieuws a{display:grid;gap:.15rem;padding:.9rem 0;border-bottom:1px solid var(--lijn);text-decoration:none}
.band-groen .nieuws a{border-color:var(--lijn-l)}
.nieuws time{font-size:.8rem;font-weight:600;color:var(--koper-d)}
.band-groen .nieuws time{color:var(--koper-l)}
.nieuws span{font:500 1.15rem/1.25 var(--f-d)}
.nieuws a:hover span{text-decoration:underline;text-underline-offset:.2em}
.nieuws-groot span{font-size:clamp(1.3rem, 2.4vw, 1.8rem)}
@media (min-width:56rem){.nieuws-groot a{grid-template-columns:12rem 1fr;align-items:baseline}}

/* ---------- paginakop ---------- */
.pkop{padding:calc(var(--kop-h) + clamp(3rem, 8vw, 7rem)) 0 clamp(3rem, 6vw, 5rem)}
.pkop-h{font-size:clamp(3rem, 9vw, 7.5rem);line-height:.92;letter-spacing:-.03em;font-variation-settings:"opsz" 144;margin-bottom:1.4rem}
.pkop-naam{font-size:clamp(2.4rem, 6.5vw, 5.4rem);hyphens:auto;overflow-wrap:break-word}
.pkop-lang{font-size:clamp(2.2rem, 6vw, 4.6rem)}
.citaat{font:italic 400 clamp(1.4rem, 2.8vw, 2.1rem)/1.3 var(--f-d);max-width:52rem;margin-top:1.4rem;padding-left:1.4rem;border-left:2px solid var(--koper-l)}
.pl-in{display:grid;grid-template-columns:1fr;gap:2rem 4rem;align-items:end}
@media (min-width:56rem){.pl-in{grid-template-columns:1fr auto}}
.visitekaart{background:#fff;width:min(100%, 22rem);aspect-ratio:1.6;display:grid;place-items:center;padding:1.8rem;position:relative;transform:rotate(-2deg);box-shadow:0 1.6rem 3rem -1.6rem rgba(0,0,0,.6)}
.visitekaart::before{content:"";position:absolute;inset:.4rem;border:1px solid rgba(196,122,53,.5)}
.visitekaart img{max-height:100%;width:auto;max-width:100%;object-fit:contain}
.vk-naam{font:500 1.3rem/1.15 var(--f-d);color:var(--inkt);text-align:center}

/* ---------- ledenregister ---------- */
.rg-bediening{display:grid;gap:1rem;z-index:5;background:var(--papier);padding:1rem 0;border-bottom:1px solid var(--lijn)}
@media (min-width:62rem) and (min-height:44rem){.rg-bediening{position:sticky;top:calc(var(--kop-h) - 1px)}}
.rg-zoek{max-width:28rem}
.rg-zoek input{border-radius:2rem;padding-inline:1.2rem}
.rg-groepen{display:flex;flex-wrap:wrap;gap:.35rem}
.rg-groepen button{min-height:2.75rem;padding:0 .9rem;border:1px solid var(--lijn);background:transparent;border-radius:2rem;cursor:pointer;font-size:.88rem;font-weight:500}
.rg-groepen button span{color:var(--zacht);margin-left:.25rem}
.rg-groepen button[aria-pressed="true"]{background:var(--inkt);color:var(--creme);border-color:var(--inkt)}
.rg-groepen button[aria-pressed="true"] span{color:var(--koper-l)}
.rg-abc{display:flex;flex-wrap:wrap;gap:.1rem}
.rg-abc a{min-width:2.75rem;min-height:2.75rem;display:grid;place-items:center;font:italic 500 1.1rem var(--f-d);text-decoration:none;border-radius:50%}
.rg-abc a:hover{background:var(--creme);color:var(--koper-d)}
.rg-status{font-size:.9rem;color:var(--zacht);margin:1rem 0 0;min-height:1.4em}
.rg-lijst{columns:1;column-gap:4rem}
@media (min-width:62rem){.rg-lijst{columns:2}}
.rg-letter{break-inside:avoid-column;padding-top:1.4rem}
.rg-letter[hidden]{display:none}
.rg-letter h2{font:italic 400 2.6rem/1 var(--f-d);color:var(--koper-d);margin-bottom:.4rem}
.rg-letter ol{list-style:none;margin:0;padding:0}
.rg-letter li[hidden]{display:none}
.rg-letter a{display:grid;grid-template-columns:1fr auto;gap:0 1rem;padding:.7rem 0;border-bottom:1px solid var(--lijn);text-decoration:none;break-inside:avoid}
.rg-letter a b{font:500 1.18rem/1.2 var(--f-d)}
.rg-letter a span{grid-column:1;font-size:.85rem;color:var(--zacht)}
.rg-letter a small{grid-row:1/3;grid-column:2;align-self:center;text-align:right;font:500 1.25rem/1 var(--f-d);color:var(--koper-d);font-variant-numeric:tabular-nums}
.rg-letter a small i{display:block;font:500 .66rem var(--f-t);color:var(--zacht);font-style:normal}
.rg-letter a:hover b{color:var(--koper-d)}

/* ---------- lidpagina ---------- */
.lid{display:grid;grid-template-columns:1fr;gap:3rem 5rem}
@media (min-width:58rem){.lid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.lid-tekst{max-width:42rem;font-size:1.08rem}
.lid-tekst .leeg{color:var(--zacht);font-style:italic}
.lid-h2{font-size:1.8rem;margin:2.5rem 0 1.2rem}
.personen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(9rem, 1fr));gap:1.4rem 1rem}
.personen li{display:grid;gap:.2rem;font-size:.9rem;justify-items:start}
.personen .rond{width:5.5rem}
.personen b{font:500 1rem/1.2 var(--f-d);margin-top:.5rem}
.pp-leeg{width:100%;height:100%;display:grid;place-items:center;font:italic 500 1.5rem var(--f-d);color:var(--koper-l)}
.pp-li{font-size:.85rem;color:var(--koper-d);min-height:2.75rem;display:inline-flex;align-items:center}
.lid-zij{display:grid;gap:2rem;align-content:start}
.lid-blok h2{font-size:1.5rem;margin-bottom:.8rem}
.lid-blok p{margin-bottom:.8rem;overflow-wrap:anywhere}
.lid-kaart{margin:0}
.bij h2{font-size:clamp(2.2rem, 5vw, 3.8rem);margin-bottom:1rem}
.bij-lijst{list-style:none;margin:2rem 0 3rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr));gap:0 3rem}
.bij-lijst a{display:grid;grid-template-columns:6.2rem 1fr;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--lijn);text-decoration:none;font-size:.95rem}
.bij-lijst time{font:500 .98rem var(--f-d);color:var(--koper-d)}
.buren{display:grid;grid-template-columns:1fr 1fr;gap:1rem;border-top:1px solid var(--lijn);padding-top:1.5rem}
.buren a{display:grid;gap:.2rem;text-decoration:none;font:500 1.15rem/1.2 var(--f-d)}
.buren a[rel="next"]{text-align:right}
.buren a span{font:600 .78rem var(--f-t);color:var(--koper-d)}

/* ---------- agenda / bijeenkomst ---------- */
.sec-ring-p{padding-top:0}
.archief h2{font-size:clamp(2.4rem, 5vw, 3.8rem);margin-bottom:2rem}
.arch-jaar{display:grid;grid-template-columns:1fr;gap:.5rem 3rem;padding:1.6rem 0;border-top:1px solid var(--lijn)}
@media (min-width:52rem){.arch-jaar{grid-template-columns:9rem 1fr}}
.arch-jaar h2{font:italic 400 2.4rem/1 var(--f-d);color:var(--koper-d);margin:0}
.arch-jaar ol{list-style:none;margin:0;padding:0}
.arch-jaar a{display:grid;grid-template-columns:7.5rem 1fr auto;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--lijn);text-decoration:none;align-items:baseline}
.arch-jaar time{font:500 1rem var(--f-d)}
.arch-jaar small{font-size:.8rem;color:var(--zacht);white-space:nowrap}
.arch-jaar .afgelast span{text-decoration:line-through;color:var(--zacht)}
@media (max-width:30rem){.arch-jaar a{grid-template-columns:6rem 1fr}.arch-jaar small{grid-column:2}}
.ev-kop{padding-top:calc(var(--kop-h) + clamp(2.5rem, 6vw, 5rem))}
.convocatie-groot{background:var(--creme);color:var(--inkt);max-width:46rem;margin:0 auto;padding:clamp(2rem, 5vw, 3.6rem) clamp(1.4rem, 5vw, 3.6rem);position:relative;text-align:center;box-shadow:0 2rem 4rem -2.5rem rgba(0,0,0,.7)}
.convocatie-groot::before{content:"";position:absolute;inset:.6rem;border:1px solid rgba(196,122,53,.55);pointer-events:none}
.cg-em{width:5.5rem;margin:0 auto 1.2rem;color:var(--inkt)}
.cg-status{font-size:.82rem;font-weight:600;color:var(--koper-d)}
.cg-datum{font-size:clamp(2.6rem, 7.5vw, 5rem);line-height:1;letter-spacing:-.03em;margin:.4rem 0 1rem}
.cg-datum span{display:block;font:italic 400 .42em/1.3 var(--f-d);letter-spacing:0;color:var(--koper-d)}
.cg-wat{font:italic 400 clamp(1.2rem, 2.6vw, 1.6rem)/1.35 var(--f-d);max-width:34rem;margin:0 auto 1.2rem}
.cg-voet{margin:0;font-size:.9rem;color:var(--zacht);padding-top:1rem;border-top:1px solid var(--lijn);display:inline-block}
.is-afgelast .cg-datum,.is-afgelast .cg-wat{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--koper)}
.ev{display:grid;grid-template-columns:1fr;gap:3rem 5rem}
@media (min-width:58rem){.ev{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.ev-tekst{max-width:42rem;font-size:1.06rem}
.ev-tekst h3{font-size:1.5rem;margin:1.8rem 0 .7rem}
.ev-tekst .punt{padding-left:1.2rem;position:relative;margin-bottom:.4rem}
.ev-tekst .punt::before{content:"·";position:absolute;left:.2rem;color:var(--koper);font-weight:700}
.ev-tekst .leeg{color:var(--zacht);font-style:italic}
.ev-beeld{margin:2rem 0 0}
.ev-zij{display:grid;gap:2.5rem;align-content:start}
.ev-zij .menukaart{margin-top:0}
.ev-aanmeld h2{font-size:1.6rem;margin-bottom:.7rem}
.f-noot{font-size:.86rem;color:var(--zacht);margin-top:1rem}
.ev-h2{font-size:clamp(2rem, 4.5vw, 3.2rem);margin-bottom:1.6rem}
.presentie{list-style:none;margin:0;padding:0;columns:15rem;column-gap:2.5rem}
.presentie li{break-inside:avoid;border-bottom:1px solid var(--lijn)}
.presentie a{display:flex;align-items:center;min-height:2.75rem;font:500 1rem/1.2 var(--f-d);text-decoration:none;padding:.3rem 0}
.presentie a::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--koper);margin-right:.7rem;flex-shrink:0}

/* ---------- over / contact / formulieren ---------- */
.over{display:grid;grid-template-columns:1fr;gap:3rem 5rem}
@media (min-width:58rem){.over{grid-template-columns:1fr 1fr}}
.over-blok h2{font-size:clamp(1.9rem, 3.6vw, 2.8rem);margin-bottom:1.4rem}
.over-blok h3{font-size:1.35rem;margin:2rem 0 .6rem}
.over-blok .ct-bedrag{margin-bottom:1.2rem}
.criteria{margin:0 0 1.2rem;padding-left:1.4rem}
.criteria li{margin-bottom:.6rem;padding-left:.3rem}
.criteria li::marker{font:italic 500 1.1rem var(--f-d);color:var(--koper-d)}
.branches{list-style:none;margin:0;padding:0}
.branches li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--lijn);flex-wrap:wrap}
.branches b{font:500 1.05rem var(--f-d)}
.branches span{font-size:.85rem;color:var(--zacht)}
.aanvraag{display:grid;grid-template-columns:1fr;gap:2rem 5rem}
@media (min-width:58rem){.aanvraag{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.aanvraag h2{font-size:clamp(2.2rem, 4.6vw, 3.6rem);margin-bottom:1.2rem}
.formulier{display:grid;gap:1rem}
.formulier h2{font-size:1.8rem}
.f-rij{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:40rem){.f-rij{grid-template-columns:1fr 1fr}}
.formulier .knop{justify-self:start}
.contact{display:grid;grid-template-columns:1fr;gap:3rem 5rem}
@media (min-width:58rem){.contact{grid-template-columns:1fr 1.2fr}}
.contact h2{font-size:1.8rem;margin-bottom:1rem}
.contact .groot{font:500 clamp(1.3rem, 2.6vw, 1.8rem)/1.4 var(--f-d)}
.lees-kolom{max-width:44rem;font-size:1.08rem}
.lees-kolom h2{font-size:1.6rem;margin:2.2rem 0 .7rem}
.lees-kolom .leeg{color:var(--zacht);font-style:italic}
.juridisch p{overflow-wrap:anywhere}
.login-in{display:grid;grid-template-columns:1fr;gap:2.5rem 5rem;align-items:end}
@media (min-width:58rem){.login-in{grid-template-columns:1fr minmax(0,26rem)}}
.login-form{background:var(--creme);color:var(--inkt);padding:2rem;border-radius:.3rem}
.login-form .knop{background:var(--inkt);border-color:var(--inkt);color:var(--creme)}

/* ---------- voet ---------- */
.voet{background:var(--groen);color:rgba(251,248,242,.85);padding:clamp(3.5rem, 7vw, 6rem) 0 1.6rem;border-top:1px solid var(--lijn-l)}
.voet-in{width:min(100% - 2*var(--goot), 92rem);margin:0 auto;display:grid;grid-template-columns:1fr;gap:2.5rem}
@media (min-width:40rem){.voet-in{grid-template-columns:1fr 1fr}}
@media (min-width:62rem){.voet-in{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.voet-merk{display:flex;align-items:center;gap:1.4rem;color:var(--creme)}
.voet-merk a{width:7.5rem;flex-shrink:0;color:var(--creme);display:block}
.voet-tot{font:italic 400 clamp(1.8rem, 3vw, 2.4rem)/1 var(--f-d);color:var(--koper-l);margin:0}
.voet h2{font:600 .8rem var(--f-t);color:var(--koper-l);margin-bottom:.9rem}
.voet ul{list-style:none;margin:0;padding:0}
.voet li a,.voet p a{display:inline-flex;align-items:center;min-height:2.5rem;text-decoration:none}
.voet a:hover{color:var(--koper-l)}
.voet p{line-height:1.5}
.voet-onder{width:min(100% - 2*var(--goot), 92rem);margin:3rem auto 0;padding-top:1.2rem;border-top:1px solid var(--lijn-l);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;font-size:.82rem;color:rgba(251,248,242,.6)}
.voet-onder a{display:inline-flex;min-height:2.75rem;align-items:center}

/* ---------- onthulling ---------- */
.js .onthul{opacity:0;transform:translateY(1.4rem);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.js .onthul.zichtbaar{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .onthul{opacity:1;transform:none}
}
/* brede schermen: het 1440-ontwerp schaalt als geheel mee */
@media (min-width:1440px){html{font-size:clamp(100%, 1.1111vw, 200%)}}