/* ============================================================
   Het Bruukshuus → Bruuks Huus, copy-paste-conversie (Taak 3)
   ----------------------------------------------------------------------------
   BRON: Klanten/Bruukshuus/mockup/css/styles.css (goedgekeurd, geliefd design).
   Structuur, classes, layout en de "Voetlicht"-animatietaal blijven 1-op-1
   staan (Benjamin-eis: copy-paste, de wow blijft). Wat verandert: de kleur- en
   font-bron. Dit bestand bevat daarom eerst een TOKEN-BRUG die de originele
   mockup-variabelenamen (--green, --ink, --serif, ...) laat verwijzen naar de
   Bruuks Huus brandbook-tokens uit tokens.css (Taak 2, Pixel) — de rest van
   dit bestand (de volledige mockup-CSS) hoeft daardoor niet regel voor regel
   herschreven te worden en blijft functioneel identiek aan de bron.
   Lettertype: Bricolage Grotesque + Public Sans (mockup) → Nunito Sans (brandbook,
   --bh-font, --sans) voor body/UI. Sinds Font-impl ronde 2 (2026-07-07) heeft --serif
   een echte merk-serif, Source Serif 4, voor de koppen (h1-h4/.serif/.pull/.em) —
   beide self-hosted via tokens.css, geen Google Fonts-fetch.
   Ticket-/kaartjes-CSS (".tickets/.type-card/.panel/.show-card/.order/...")
   staat nog in dit bestand (1-op-1 uit de bron) maar wordt door geen enkel
   Bruuks Huus-template meer aangeroepen: het ticketsysteem is eruit (archief
   in Klanten/Bruukshuus/Versies/tickets-archief-2026-07/). Dode, onschadelijke
   CSS — mag in een latere opschoning weg.
   ============================================================ */

:root{
  /* ---- Token-brug: mockup-naam → Bruuks Huus brandbook-token ---- */
  /* Wave F punt 4 (Benjamin-besluit 2026-07-04): pagina-achtergrond dichter naar wit
     dan de crème-tokens (--bh-bg/--bh-bg-alt in tokens.css, Pixel-domein — buiten mijn
     zone), daarom hier literaal overschreven i.p.v. via de token-verwijzing. Navbar
     (.mast) blijft ongemoeid: die heeft een eigen hardgecodeerde rgba-crème-achtergrond,
     leest geen --paper. Kaarten (--white hieronder, nog #FFFFFF) tekenen zich hierdoor
     nog subtiel af tegen de bijna-witte pagina. */
  --paper:        #FCFBF8;
  --paper-2:      #FDFDFB;
  --white:        var(--bh-surface);
  --ink:          var(--bh-text-strong);
  --ink-soft:     var(--bh-text-muted);
  --line:         var(--bh-border);

  --green:        var(--bh-accent);       /* terracotta: warme signatuur (kickers/underlines/focus/corners) */
  --green-bright: var(--bh-accent-soft);  /* oranje: hover-licht + on-dark bright accent */
  --green-deep:   var(--bh-heading);      /* groen: koppen + waarde-nadruk (AA op crème) */
  --green-ink:    var(--bh-groen-diep);   /* groen-diep: footer/donkere band */
  --green-wash:   var(--bh-salie-40);     /* salie 40%: zachte vlak-fills */
  --night:        var(--bh-inkt);         /* bijna-zwart-groen: disco-nacht */

  --maxw:   var(--bh-maxw);
  --gut:    var(--bh-gutter);
  --ease:   var(--bh-ease);
  --serif:  "Source Serif 4", Georgia, "Times New Roman", serif; /* merk-serif koppen (Font-impl ronde 2), self-hosted tokens.css */
  --sans:   var(--bh-font);

  --shadow-lift: var(--bh-shadow-lg);
  --shadow-deep: var(--bh-shadow-md);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.62;
  font-size:18px; /* opm. Melvin 2026-08-28 #1: ouder publiek, was 17px */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Papier, subtiele verticale verloop (Wave F: start-stop nu ook var(--paper) i.p.v.
   een hardgecodeerde crème-hex, anders bleef er een warme band boven in beeld hangen
   op pagina's die nu dichter naar wit gaan — incl. /evenementen/, die HELEMAAL wit
   moet zijn, zie de page-template-override verderop in dit bestand). */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(178deg, var(--paper) 0%, var(--paper) 46%, var(--paper-2) 100%);
}
/* Papierkorrel, echte textuur, geen glow */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* Wave F punt 4: /evenementen/ moet HELEMAAL wit zijn (Benjamin-besluit 2026-07-04),
   strikter dan de site-brede "dichter naar wit"-verschuiving hierboven. WP genereert
   deze body-class automatisch uit de bestandsnaam page-evenementen.php (Template Name-
   header bovenin dat bestand); geen extra hook nodig. */
body.page-template-page-evenementen-php{
  --paper:    #ffffff;
  --paper-2:  #ffffff;
}

/* Per-pagina zachte enter in de Voetlicht-taal (geen harde paginawissel-flits) */
main{display:block; animation:page-in .6s var(--ease) both}
@keyframes page-in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
/* overflow-x:clip — universele vangnet voor reveal-right-elementen die DIRECT
   in .wrap staan (geen tussenliggende grid zoals .split/.teaser/.locatie-grid
   die zelf al hun eigen overflow-x:clip hebben). translateX(42px) pre-reveal
   steekt anders op mobiel buiten de viewport (bv .head reveal-right op de
   agenda-voorproefje-sectie, front-page.php). Alleen x-as geclipt, y-as blijft
   visible (zelfde reden als .split hierboven) — .mast-nav blijft ongemoeid
   want position:fixed-elementen negeren overflow-clip van een niet-transformed
   ancestor. Bron: 390px-lek homepage (24px), Scorrie-diagnose 2026-07-07. */
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); overflow-x:clip}
.serif{font-family:var(--serif)}
.skip{position:absolute; left:-9999px; top:0; background:var(--green-deep); color:var(--paper); padding:10px 16px; border-radius:3px; z-index:200}
.skip:focus{left:12px; top:12px}

h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.06; margin:0; color:var(--green-deep); letter-spacing:-.01em}

/* ---- Almanak-kicker: plaat-nummer + kapitaaltjes ---- */
.kicker{
  display:inline-flex; align-items:baseline; gap:.7em;
  font-family:var(--sans); font-weight:700; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  margin:0 0 18px;
}
.kicker .no{
  font-family:var(--serif); font-style:italic; font-weight:600;
  letter-spacing:0; text-transform:none; font-size:1.05rem; color:var(--green-deep);
  position:relative; padding-right:.7em;
}
.kicker .no::after{content:""; position:absolute; right:0; top:.18em; bottom:.1em; width:1px; background:var(--line)}

/* ============ MASTHEAD ============ */
.mast-rule{height:5px; background:var(--green); position:relative; z-index:60}
.mast{
  position:sticky; top:0; z-index:55;
  background:rgba(245,240,230,.86); backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--line);
}
.mast .wrap{display:flex; align-items:center; justify-content:space-between; padding:12px var(--gut); gap:18px}
.brand{display:flex; align-items:center; gap:12px}
/* Wave F punt 2 (Benjamin-besluit 2026-07-04): logo overal op de evenementen-maat.
   Was width:38px;height:38px (gedwongen vierkant) — maar logo-beeldmerk.svg's
   viewBox was ongecropt (0 0 1366 768, veel lege ruimte rond het beeldmerk zelf),
   dus binnen die 38x38-box werd het icoon fors uitgelet-boxed en oogde het kleiner
   dan de feest-choreografie-SVG in header.php (die een strak gecropte viewBox
   "24 4 824 762" gebruikt op DEZELFDE paden). Fix: viewBox van het losse SVG-bestand
   gelijkgetrokken aan die crop (zie assets/img/logo/logo-beeldmerk.svg), en hier
   dezelfde width:40px/height:auto-logica als feest.css .brand .logo-svg toegepast,
   zodat home/dorp-pagina's exact dezelfde zichtbare logo-grootte tonen als
   evenementen/evenement-detail. */
.brand .mk{width:40px; height:auto; flex:none}
.brand .wm{display:flex; flex-direction:column; line-height:.98}
.brand .wm b{font-family:var(--serif); font-weight:700; font-size:1.4rem; color:var(--ink); letter-spacing:-.01em}
.brand .wm span{font-family:var(--sans); font-weight:600; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--green-deep); margin-top:4px}
.mast-nav{display:flex; align-items:center; gap:26px}
.mast-nav a.lk{font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.02em; color:var(--ink-soft); transition:color .25s var(--ease); position:relative}
.mast-nav a.lk::after{content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px; background:var(--green); transition:right .3s var(--ease)}
.mast-nav a.lk:hover{color:var(--green-deep)}
.mast-nav a.lk:hover::after{right:0}
.mast-nav a.lk.is-active{color:var(--green-deep)}
.mast-nav a.lk.is-active::after{right:0}
/* Reserveren als heldere primaire nav-actie: gevulde knop met hover-lift (Benjamin-fix,
   was een vlakke "ingedrukte" look — nu conform styleguide-knoppen .btn-primary).
   Wave E punt 3 + Wave F punt 1 (Benjamin-melding herhaald 2026-07-04: Contact oogt
   "kleiner/lager" dan Reserveren): border 1.5px transparent + dezelfde padding als
   .lk-secondary gaf al een pixel-identiek box-model (bevestigd, delta 0px op
   top/bottom/height) — maar de STATISCHE rust-box-shadow hieronder woog optisch
   zwaarder (een 2px vlakke "lip" + zachte drop-shadow) waardoor de knop toch groter/
   lager oogde dan de rand-only Contact-knop, ook al was de bounding box identiek.
   Fix: geen box-shadow meer in rust — alleen de vulling (outline vs filled) verschilt
   nu nog, precies zoals gevraagd. De hover-state houdt zijn eigen (grotere) shadow. */
.mast-nav a.lk-cta{
  color:var(--bh-on-accent); background:var(--bh-action); border:1.5px solid transparent; border-radius:3px;
  padding:8px 16px; font-weight:700;
  transition:transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.mast-nav a.lk-cta::after{display:none}
.mast-nav a.lk-cta.is-active{background:var(--bh-action-hover); color:var(--bh-on-accent)}
.mast-nav a.lk-cta:hover{
  background:var(--bh-action-hover); color:var(--bh-on-accent); transform:translateY(-2px);
  box-shadow:0 4px 0 var(--bh-action-hover), 0 14px 24px -12px rgba(20,26,22,.6);
}
/* Contact als secundaire (outline) knop naast Reserveren — zelfde padding + border-
   breedte als .lk-cta hierboven, zodat beide knoppen exact even groot zijn. Rust blijft
   outline vs filled (bewust verschil), maar de HOVER moet als paar aanvoelen: zelfde
   lift (-2px) + zelfde schaduw-taal (vlakke "lip" + zachte ambient drop-shadow) als
   .lk-cta hierboven — alleen de lip-kleur is Contacts eigen hover-vulkleur i.p.v. de
   CTA-accentkleur (Benjamin-melding 2026-07-05, na Wave F punt 1 al de resting-boxen
   gelijk had getrokken; nu de hover-paren). */
.mast-nav a.lk-secondary{
  color:var(--green-deep); background:transparent; border:1.5px solid var(--green-deep); border-radius:3px;
  padding:8px 16px; font-weight:700;
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mast-nav a.lk-secondary::after{display:none}
.mast-nav a.lk-secondary.is-active{background:var(--green-deep); color:var(--paper)}
.mast-nav a.lk-secondary:hover{
  background:var(--green-deep); color:var(--paper); transform:translateY(-2px);
  box-shadow:0 4px 0 var(--green-deep), 0 14px 24px -12px rgba(20,26,22,.6);
}
.nav-toggle{display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:4px; background:var(--white); cursor:pointer; padding:0; align-items:center; justify-content:center}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:""; display:block; width:20px; height:2px; background:var(--green-deep); position:relative; transition:transform .3s var(--ease), opacity .2s}
.nav-toggle span::before{position:absolute; top:-6px}
.nav-toggle span::after{position:absolute; top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---- Dropdown-navigatie (groepeert verwante secties) ---- */
.nav-item{position:relative; display:flex; align-items:center}
.drop-toggle{
  font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.02em; color:var(--ink-soft);
  background:none; border:none; cursor:pointer; padding:0; position:relative;
  display:inline-flex; align-items:center; gap:6px; transition:color .25s var(--ease);
}
.drop-toggle::after{content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px; background:var(--green); transition:right .3s var(--ease)}
.drop-toggle:hover,.nav-item:hover .drop-toggle,.drop-toggle.is-active{color:var(--green-deep)}
.drop-toggle.is-active::after{right:0}
.drop-toggle .caret{width:8px; height:8px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .3s var(--ease); flex:none}
.drop{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:248px; background:var(--white); border:1px solid var(--line); border-radius:6px;
  box-shadow:var(--shadow-lift); padding:8px; z-index:60;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.drop::before{
  content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
}
.drop a{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:4px;
  font-family:var(--sans); font-weight:600; font-size:.86rem; color:var(--ink); letter-spacing:.01em;
  transition:background .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
}
.drop a::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--green); opacity:0; transform:scale(.4); transition:.22s var(--ease); flex:none}
.drop a:hover,.drop a:focus-visible{background:var(--green-wash); color:var(--green-deep); padding-left:18px; outline:none}
.drop a:hover::before,.drop a:focus-visible::before,.drop a[aria-current="page"]::before{opacity:1; transform:scale(1)}
.drop a[aria-current="page"]{color:var(--green-deep); background:var(--green-wash)}
@media (min-width:941px){
  .nav-item:hover .drop,.nav-item:focus-within .drop,.nav-item.open .drop{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0)}
  .nav-item:hover .caret,.nav-item:focus-within .caret,.nav-item.open .caret{transform:translateY(1px) rotate(225deg)}
}

/* ============ HERO (cinematisch, full-bleed foto) ============ */
.hero{
  position:relative; min-height:min(92vh, 820px);
  display:flex; align-items:flex-end;
  overflow:hidden; color:var(--paper);
  isolation:isolate;
}
.hero-media{position:absolute; inset:-8% 0 0 0; z-index:-2; will-change:transform}
.hero-media img{width:100%; height:116%; object-fit:cover; object-position:center 42%}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(46,58,49,.18) 0%, rgba(46,58,49,0) 26%, rgba(46,58,49,.30) 60%, rgba(46,58,49,.84) 100%),
    linear-gradient(82deg, rgba(46,58,49,.74) 0%, rgba(46,58,49,.32) 42%, rgba(46,58,49,0) 72%);
}
.hero .wrap{width:100%; padding-top:96px; padding-bottom:clamp(40px,7vw,86px); position:relative}
.hero .kicker{color:rgba(247,241,231,.86)}
.hero .kicker .no{color:var(--green-bright)}
.hero h1{
  font-size:clamp(2.7rem,6.4vw,5.2rem); margin:0 0 24px; max-width:15ch; color:var(--paper);
  text-shadow:0 2px 30px rgba(20,26,22,.5);
}
.hero h1 em{font-style:normal; position:relative; white-space:nowrap; color:var(--paper)}
.hero h1 em::before{
  content:""; position:absolute; left:-.05em; right:-.05em; bottom:.07em; height:.32em; z-index:-1;
  background:var(--green); border-radius:2px; transform:scaleX(0); transform-origin:left;
  animation:wipe 1s var(--ease) .7s forwards;
}
@keyframes wipe{to{transform:scaleX(1)}}
.hero p.lead{
  font-family:var(--serif); font-size:clamp(1.1rem,1.55vw,1.34rem); line-height:1.5;
  color:rgba(247,241,231,.92); max-width:50ch; margin:0 0 30px; text-shadow:0 1px 18px rgba(20,26,22,.5);
}
.hero p.lead b{color:var(--green-bright); font-weight:600}

.cta-row{display:flex; flex-wrap:wrap; gap:14px 16px; align-items:center}
.btn{
  font-family:var(--sans); font-weight:700; font-size:.96rem; letter-spacing:.01em;
  border:none; cursor:pointer; border-radius:3px; padding:15px 26px;
  display:inline-flex; align-items:center; gap:10px;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), color .28s var(--ease);
}
.btn .arr{transition:transform .28s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-primary{color:var(--bh-on-accent); background:var(--bh-action); box-shadow:0 2px 0 var(--bh-action-hover), 0 14px 26px -16px rgba(20,26,22,.9)}
.btn-primary:hover{transform:translateY(-2px); background:var(--bh-action-hover); box-shadow:0 4px 0 var(--bh-action-hover), 0 20px 34px -16px rgba(20,26,22,.95)}
.btn-ghost{background:rgba(247,241,231,.08); color:var(--paper); border:1.5px solid rgba(247,241,231,.6); backdrop-filter:blur(2px)}
.btn-ghost:hover{background:var(--paper); color:var(--green-deep); border-color:var(--paper); transform:translateY(-2px)}
.on-paper .btn-ghost{background:transparent; color:var(--green-deep); border-color:var(--green-deep)}
.on-paper .btn-ghost:hover{background:var(--green-deep); color:var(--paper)}

.hero-today{
  position:absolute; right:var(--gut); bottom:clamp(34px,6vw,64px); z-index:2;
  width:clamp(150px, 18vw, 212px);
  background:var(--white); padding:9px 9px 7px; border-radius:4px;
  box-shadow:0 22px 44px -22px rgba(20,26,22,.85); transform:rotate(1.6deg);
  transition:transform .5s var(--ease);
}
.hero-today:hover{transform:rotate(0deg) translateY(-4px)}
.hero-today img{border-radius:2px; aspect-ratio:3/2; object-fit:cover}
.hero-today figcaption{
  font-family:var(--sans); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:7px; display:flex; justify-content:space-between; gap:8px;
}
.hero-today figcaption b{color:var(--green-deep)}

/* ============ PAGINA-KOP (subpagina hero-band) ============ */
.pagehero{
  position:relative; overflow:hidden; color:var(--paper); isolation:isolate;
  display:flex; align-items:flex-end; min-height:clamp(300px,46vh,440px);
}
.pagehero .ph-media{position:absolute; inset:0; z-index:-2}
.pagehero .ph-media img{width:100%; height:100%; object-fit:cover; object-position:center 42%}
.pagehero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(46,58,49,.34) 0%, rgba(46,58,49,.12) 38%, rgba(46,58,49,.76) 100%),
    linear-gradient(82deg, rgba(46,58,49,.72) 0%, rgba(46,58,49,.3) 46%, rgba(46,58,49,0) 78%);
}
.pagehero .wrap{width:100%; padding-top:clamp(58px,9vw,96px); padding-bottom:clamp(28px,5vw,54px); position:relative}
.pagehero .kicker{color:rgba(247,241,231,.86)}
.pagehero .kicker .no{color:var(--green-bright)}
.pagehero h1{
  font-family:var(--serif); font-weight:600; font-size:clamp(2.1rem,5vw,3.7rem); line-height:1.04;
  color:var(--paper); margin:0 0 14px; max-width:18ch; letter-spacing:-.01em; text-shadow:0 2px 26px rgba(20,26,22,.5);
}
.pagehero h1 em{font-style:normal; color:var(--green-bright)}
.pagehero .ph-intro{
  font-family:var(--serif); font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.5;
  color:rgba(247,241,231,.92); max-width:54ch; margin:0; text-shadow:0 1px 16px rgba(20,26,22,.5);
}
.pagehero--nieuws-zonder-beeld{background:var(--green-deep)}

/* ============ HOME: week-strook (beschikbaarheid-voorproefje, Taak wave-d punt 1) ============ */
.bh-week-sectie{padding-top:clamp(34px,5vw,56px); padding-bottom:clamp(34px,5vw,56px)}
.bh-week{
  background:var(--white); border:1px solid var(--line); border-radius:var(--bh-radius-lg);
  box-shadow:var(--bh-shadow-md); padding:clamp(22px,3vw,34px);
}
.bh-week-kop{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px 20px; margin-bottom:20px}
.bh-week-titel{font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,2.2vw,1.7rem); color:var(--green-deep); margin:0}
.bh-week-cta{font-family:var(--sans); font-weight:700; font-size:.84rem; color:var(--green-deep); display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:color .25s var(--ease)}
.bh-week-cta .arr{transition:transform .28s var(--ease)}
.bh-week-cta:hover{color:var(--green)}
.bh-week-cta:hover .arr{transform:translateX(5px)}

.bh-week-rij{display:grid; grid-template-columns:repeat(7,1fr); gap:8px}
.bh-week-dag{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:12px 4px 10px; border-radius:var(--bh-radius-sm); background:var(--bh-salie-40);
  color:var(--ink); text-align:center; position:relative;
  transition:transform var(--bh-dur-fast) var(--bh-ease), box-shadow var(--bh-dur-fast) var(--bh-ease), background var(--bh-dur-fast) var(--bh-ease);
}
.bh-week-dag:hover{transform:translateY(-2px); box-shadow:var(--bh-shadow-sm)}
.bh-week-dag:focus-visible{outline:2px solid var(--bh-focus); outline-offset:2px}
.bh-week-dagnaam{font-family:var(--sans); font-weight:700; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; opacity:.78}
.bh-week-dagnr{font-family:var(--serif); font-weight:600; font-size:1.2rem; line-height:1}
.bh-week-vandaag-label{
  font-family:var(--sans); font-weight:700; font-size:.56rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bh-on-accent); background:var(--bh-action); border-radius:var(--bh-radius-pill);
  padding:1px 7px; position:absolute; top:-9px;
}
.bh-week-dag.is-deels{background:var(--bh-oranje-70)}
.bh-week-dag.is-vol{background:var(--bh-terracotta); color:var(--bh-on-accent)}
.bh-week-dag.is-vandaag{box-shadow:0 0 0 2.5px var(--bh-action) inset}
.bh-week-dag.is-vandaag:hover{box-shadow:0 0 0 2.5px var(--bh-action) inset, var(--bh-shadow-sm)}

/* Wave E punt 2 (Benjamin-feedback: "je ziet niks" van wat er die week te doen is)
   — korte, senior-leesbare items per dag: max 2 regels + een "+N meer"-indicatie. */
.bh-week-items{display:flex; flex-direction:column; gap:2px; width:100%; margin-top:2px}
.bh-week-item{
  font-family:var(--sans); font-size:.62rem; line-height:1.3; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.bh-week-item-meer{font-weight:700; color:var(--green-deep)}
.bh-week-dag.is-deels .bh-week-item,.bh-week-dag.is-vol .bh-week-item{color:var(--bh-on-accent); opacity:.94}
.bh-week-dag.is-vol .bh-week-item-meer{color:var(--bh-on-accent)}

.bh-week-legenda{list-style:none; display:flex; flex-wrap:wrap; gap:16px; margin:18px 0 0; padding:0; font-family:var(--sans); font-size:var(--bh-fs-xs); color:var(--ink-soft)}
.bh-week-legenda li{display:inline-flex; align-items:center; gap:6px}
.bh-week-dot{width:11px; height:11px; border-radius:50%; display:inline-block; background:var(--bh-salie-40)}
.bh-week-dot.is-deels{background:var(--bh-oranje-70)}
.bh-week-dot.is-vol{background:var(--bh-terracotta)}

@media (max-width:640px){
  .bh-week-rij{gap:5px}
  .bh-week-dag{padding:9px 2px 8px; border-radius:6px}
  .bh-week-dagnaam{font-size:.56rem}
  .bh-week-dagnr{font-size:1rem}
  .bh-week-vandaag-label{display:none}
  /* Te weinig breedte voor leesbare tekst in 7 smalle kolommen op mobiel — de
     bezet-status-kleur van het vakje blijft wel het belangrijkste signaal tonen. */
  .bh-week-items{display:none}
}

/* ============ HOME: drie werelden onder één dak ============ */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:46px}
/* Front page toont sinds Wave F vier pijlers i.p.v. drie (Dagcafé/Evenementen/Bruuks Beats/
   Flexibele werkplekken) -- de vaste 3-koloms-grid liet de 4e kaart alleen op een tweede rij
   vallen, linksuitgelijnd met lege ruimte ernaast. :has() scoped dit puur via CSS op het
   aantal .pillar-kinderen, zodat page-contact.php's eigen .pillars (nog altijd 3 kaarten)
   ongemoeid blijft -- geen extra modifier-class of PHP-wijziging nodig. Alleen desktop
   (min-width:941px, zelfde grens als de .pillars mobile-override op regel 851): :has()
   verhoogt de specificity t.o.v. kale .pillars, dus zonder deze media-scope zou deze regel
   ook op mobiel de 1-koloms-override overstemmen. */
@media (min-width:941px){
  .pillars:has(.pillar:nth-child(4)){grid-template-columns:repeat(2,1fr); gap:28px 24px}
}
.pillar{
  position:relative; display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:var(--shadow-deep);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.pillar:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:var(--green)}
.pillar .pillar-ph{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--green-wash)}
.pillar .pillar-ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.pillar:hover .pillar-ph img{transform:scale(1.05)}
.pillar .pillar-body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.pillar h3{font-size:1.4rem; color:var(--ink); margin:0 0 8px}
.pillar p{margin:0 0 18px; color:var(--ink-soft); font-size:.95rem; flex:1}
.pillar .pillar-go{font-family:var(--sans); font-weight:700; font-size:.84rem; letter-spacing:.02em; color:var(--green-deep); display:inline-flex; align-items:center; gap:8px}
.pillar .pillar-go .arr{transition:transform .28s var(--ease)}
.pillar:hover .pillar-go .arr{transform:translateX(5px)}

/* home: verhaal-teaser */
/* overflow-x:clip — zelfde reden als .split/.disco-grid/.acco-grid verderop:
   .t-copy is reveal-right en steekt zonder clip op mobiel buiten de viewport. */
.teaser{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center; margin-top:46px; overflow-x:clip}
.teaser .t-copy .pull{font-family:var(--serif); font-size:clamp(1.2rem,1.8vw,1.5rem); line-height:1.4; color:var(--green-deep); border-left:3px solid var(--green); padding-left:18px; margin:0 0 20px}
.teaser .t-copy p{color:var(--ink-soft); margin:0 0 20px}

/* ============ SECTIE-FRAME ============ */
section.block{padding:clamp(54px,8vw,104px) 0; position:relative}
.block + .block{border-top:1px solid var(--line)}
.head{max-width:60ch; position:relative}
.head h2{font-size:clamp(2.05rem,4.4vw,3.3rem); margin:0 0 14px}
.head .intro{font-family:var(--serif); font-size:clamp(1.05rem,1.5vw,1.24rem); line-height:1.5; color:var(--ink-soft); margin:0}
.center{margin-left:auto; margin-right:auto; text-align:center}
.center.head::after{left:50%; transform:translateX(-50%) scaleX(0)}
.center.head.in::after{transform:translateX(-50%) scaleX(1)}

/* ---- Fotokader: passe-partout + hoek-ticks + bijschrift ---- */
.frame{position:relative; background:var(--white); padding:12px; border:1px solid var(--line); border-radius:5px; box-shadow:var(--shadow-deep); margin:0}
.frame .ph{position:relative; overflow:hidden; border-radius:2px; background:var(--green-wash); aspect-ratio:4/3}
.frame .ph img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.3s var(--ease)}
.frame.kb.in .ph img{transform:scale(1.05)}
.frame:hover .ph img{transform:scale(1.045)}
.frame .corner{position:absolute; width:9px; height:9px; border:1.5px solid var(--green); z-index:2}
.frame .c1{top:6px; left:6px; border-right:0; border-bottom:0}
.frame .c2{top:6px; right:6px; border-left:0; border-bottom:0}
.frame .c3{bottom:6px; left:6px; border-right:0; border-top:0}
.frame .c4{bottom:6px; right:6px; border-left:0; border-top:0}
.frame figcaption{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-top:9px; padding:2px 4px 1px;
}
.frame figcaption .l{font-family:var(--sans); font-style:italic; font-size:.94rem; color:var(--green-deep)}
.frame figcaption .r{font-family:var(--sans); font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.frame .stamp{
  position:absolute; top:-12px; right:18px; z-index:3;
  font-family:var(--sans); font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-deep); background:var(--green-wash); border:1px solid var(--green); border-radius:2px; padding:5px 10px;
}

/* ---- Split: tekst + beeld ---- */
/* overflow-x:clip (niet hidden): clipt alleen de x-as, laat de y-as gewoon
   visible (geen ongewenste scroll-container-bijwerking). Nodig omdat
   .reveal-left/.reveal-right (zie verderop) starten met translateX(±42px) —
   zonder clip steekt dat op mobiel (waar --gut kleiner is dan 42px) buiten de
   viewport uit en veroorzaakt het horizontale document-scroll. Bron: 390px-
   overflow-meting /plannen/ (scrollWidth 414 vs clientWidth 390). */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start; margin-top:46px; overflow-x:clip}
.split.rev .split-media{order:-1}
.split-copy h3{font-size:clamp(1.5rem,2.4vw,2.05rem); color:var(--ink); margin:0 0 14px}
.split-copy p{margin:0 0 16px; color:var(--ink-soft)}
.split-copy .lead-line{font-family:var(--serif); font-size:1.16rem; color:var(--green-deep); line-height:1.5; margin:0 0 18px}
/* Fotoraster naast de dagcafétekst op /plannen/: twee bij twee, tekst verticaal gecentreerd ernaast. */
.split-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.split-grid .frame figcaption{flex-direction:column; align-items:flex-start; gap:2px}
.split:has(.split-grid){align-items:center}

/* Homepage: verwijzing naar de 3D-impressie op /plannen/ (poster, knop over het beeld). */
.home-3d{display:block; position:relative; margin-top:46px; color:inherit; text-decoration:none}
.home-3d .ph{display:block; aspect-ratio:2560/1092; background:#efe9dc}
.home-3d .ph img{object-fit:contain}
.home-3d-knop{position:absolute; right:clamp(22px,3.4vw,42px); bottom:clamp(22px,3.4vw,42px); z-index:3}
.home-3d:hover .home-3d-knop,.home-3d:focus-visible .home-3d-knop{transform:translateY(-2px); background:var(--bh-action-hover)}
.home-3d:hover .home-3d-knop .arr{transform:translateX(5px)}
#impressie-3d{scroll-margin-top:24px}

/* ---- Feiten-rij (kleine specs) ---- */
.specs{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:0}
.specs li{display:flex; gap:14px; align-items:flex-start; padding:13px 0; border-top:1px solid var(--line)}
.specs li:last-child{border-bottom:1px solid var(--line)}
.specs li svg{width:20px; height:20px; color:var(--green-deep); flex:none; margin-top:2px}
.specs li .st b{display:block; font-family:var(--sans); font-weight:700; font-size:.96rem; color:var(--ink)}
.specs li .st span{font-size:.9rem; color:var(--ink-soft)}

/* ---- Evenementen: 3D-impressie blikvanger ---- */
.feature{margin-top:46px; position:relative}
.feature .frame .ph{aspect-ratio:21/9; background:#e7e2d6}
.feature .frame .ph img{object-fit:contain; background:#efe9dc}

/* Draaibare 3D-impressie (plannen). Canvas ligt over de poster en is doorzichtig, zodat
   de papierkleur van het kader doorschijnt. De kaderregel moet winnen van
   .feature.frame .ph in wave-d.css (laadt later), vandaar vier klassen.
   Zie assets/js/impressie-3d.js. */
.feature.frame.impressie-3d .ph{background:#efe9dc}
/* poster heel tonen in elk kader (papierkleur valt weg tegen het kader); wave-d.css zet cover */
.feature.frame.impressie-3d .ph img{object-fit:contain}
.frame.impressie-3d:hover .ph img, .frame.kb.impressie-3d.in .ph img{transform:none}
.impressie-3d-houder{position:absolute; inset:0}
.impressie-3d-canvas{display:block; width:100%; height:100%; touch-action:pan-y; cursor:grab; outline:none}
.impressie-3d-canvas:active{cursor:grabbing}
.impressie-3d-canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--green)}
.impressie-3d.is-3d .impressie-3d-poster{visibility:hidden}
.impressie-3d:not(.is-3d) .impressie-3d-canvas{visibility:hidden}
.impressie-3d.is-groot .impressie-3d-canvas{touch-action:none}
.impressie-3d-bediening{position:absolute; right:10px; bottom:10px; z-index:3; display:flex; gap:6px}
.impressie-3d-bediening[hidden]{display:none}
.impressie-3d-bediening button{
  width:38px; height:38px; display:grid; place-items:center; padding:0; cursor:pointer;
  background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:4px; color:var(--green-deep);
  box-shadow:0 1px 3px rgba(0,0,0,.08); transition:background .2s var(--ease)
}
.impressie-3d-bediening button:hover{background:var(--white)}
.impressie-3d-bediening button:focus-visible{outline:2px solid var(--green); outline-offset:2px}
.impressie-3d-bediening svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.impressie-3d-hint{
  position:absolute; left:12px; bottom:12px; z-index:3; max-width:calc(100% - 200px); margin:0; padding:6px 11px; border-radius:999px; pointer-events:none;
  background:rgba(255,255,255,.88); font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green-deep); opacity:0; transition:opacity .5s var(--ease)
}
.impressie-3d-hint .aanraak{display:none}
@media (pointer:coarse){.impressie-3d-hint .muis{display:none} .impressie-3d-hint .aanraak{display:inline}}
.impressie-3d.is-3d .impressie-3d-hint{opacity:1}
/* lagen en doorkijk: linksboven; past het niet op één regel, dan horizontaal scrollbaar
   (op een telefoon twee regels, zie onder) */
.impressie-3d-lagen{
  position:absolute; left:10px; top:10px; z-index:3; display:flex; gap:6px; flex-wrap:nowrap;
  max-width:calc(100% - 20px); overflow-x:auto; scrollbar-width:none; padding:2px
}
.impressie-3d-lagen::-webkit-scrollbar{display:none}
.impressie-3d-lagen[hidden]{display:none}
.impressie-3d-schakel{
  display:flex; flex:none; background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:4px;
  box-shadow:0 1px 3px rgba(0,0,0,.08); overflow:hidden
}
.impressie-3d-schakel button{
  appearance:none; border:0; background:none; cursor:pointer; padding:0 11px; height:32px; white-space:nowrap;
  font-family:var(--sans); font-size:.74rem; font-weight:600; color:var(--green-deep); transition:background .2s var(--ease)
}
.impressie-3d-schakel button + button{border-left:1px solid var(--line)}
.impressie-3d-schakel button:hover{background:var(--white)}
.impressie-3d-schakel button[aria-pressed="true"]{background:var(--green-deep); color:var(--white)}
.impressie-3d-schakel button:focus-visible{outline:2px solid var(--green); outline-offset:-2px}
/* ruimtenamen boven het model */
.impressie-3d-namen{position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden}
.impressie-3d:not(.is-3d) .impressie-3d-namen{visibility:hidden}
.impressie-3d-naam{
  position:absolute; left:0; top:0; padding:3px 8px; border-radius:3px; white-space:nowrap;
  background:rgba(255,255,255,.9); box-shadow:0 1px 2px rgba(0,0,0,.12);
  font-family:var(--sans); font-size:.68rem; font-weight:700; line-height:1.25; color:var(--green-deep);
  opacity:0; transition:opacity .18s linear
}
.impressie-3d-naam small{margin-left:5px; font-weight:500; color:var(--ink-soft); font-size:.92em}
.impressie-3d-naam.is-zichtbaar{opacity:1}
/* telefoon: hoger kader zodat het gebouw en de bediening samen passen, compactere knoppen,
   geen hint (de knoppen spreken voor zich) */
@media (max-width:640px){
  .feature.frame.impressie-3d .ph{aspect-ratio:1/1}
  .impressie-3d-hint{display:none}
  .impressie-3d-lagen{left:8px; top:8px; max-width:calc(100% - 16px); gap:5px; flex-wrap:wrap}
  .impressie-3d-schakel button{height:28px; padding:0 9px; font-size:.7rem}
  .impressie-3d-bediening{right:8px; bottom:8px; gap:5px}
  .impressie-3d-bediening button{width:34px; height:34px}
}
.impressie-3d.is-bediend .impressie-3d-hint{opacity:0}
.impressie-3d .ph:fullscreen{aspect-ratio:auto; width:100vw; height:100vh; border-radius:0}
.impressie-3d .ph:-webkit-full-screen{aspect-ratio:auto; width:100vw; height:100vh; border-radius:0}
html.impressie-3d-vast{overflow:hidden}
/* De vastgehouden page-in-transform maakt main anders het kader van de vaste laag. */
html.impressie-3d-vast main{animation-fill-mode:none}
html.impressie-3d-vast .impressie-3d.is-groot .ph{position:fixed; inset:0; z-index:1000; aspect-ratio:auto; border-radius:0}

/* ---- Galerij ---- */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px}
.gallery .frame .ph{aspect-ratio:4/5}
.gallery .frame.wide{grid-column:span 2}
.gallery .frame.wide .ph{aspect-ratio:16/10}

.rail-dots{display:none}

/* ---- Zaalverhuur kaarten ---- */
.huur{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px}
.huur .card{background:var(--white); border:1px solid var(--line); border-radius:5px; padding:24px 22px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
.huur .card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:var(--green)}
.huur .card .ic{width:46px; height:46px; border-radius:4px; background:var(--green-wash); color:var(--green-deep); display:grid; place-items:center; margin-bottom:14px}
.huur .card .ic svg{width:24px; height:24px}
.huur .card h4{font-size:1.2rem; color:var(--ink); margin:0 0 6px}
.huur .card p{margin:0; font-size:.92rem; color:var(--ink-soft)}

/* ============ DISCO, nacht-band ============ */
.disco{background:var(--night); color:var(--paper); position:relative; overflow:hidden; border-top:1px solid var(--green-ink)}
.disco::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(40% 60% at 16% 8%, rgba(200,101,71,.28), transparent 60%),
    radial-gradient(46% 70% at 92% 100%, rgba(226,152,104,.18), transparent 62%);
}
.disco .wrap{position:relative; z-index:1}
.disco .head h2,.disco .head .kicker .no{color:var(--green-bright)}
.disco .head .kicker{color:rgba(247,241,231,.74)}
.disco .head .intro{color:rgba(247,241,231,.84)}
/* overflow-x:clip — zelfde reden als .split hierboven: .disco-side heeft
   reveal-right (translateX(42px)-begin) en steekt zonder clip op mobiel
   buiten de viewport uit. */
.disco-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(22px,4vw,44px); align-items:stretch; margin-top:44px; overflow-x:clip}
.disco-stage{position:relative; border-radius:6px; overflow:hidden; border:1px solid rgba(226,152,104,.28); min-height:340px; box-shadow:0 40px 80px -50px #000}
.disco-stage picture{display:contents}
.disco-stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.78) brightness(.62) contrast(1.08); transition:transform 1.4s var(--ease)}
.disco-stage.in img{transform:scale(1.06)}
.disco-stage::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(46,58,49,.2), rgba(46,58,49,.78)),
    radial-gradient(120% 80% at 50% 116%, rgba(200,101,71,.55), transparent 60%);
  mix-blend-mode:multiply;
}
.disco-stage .cap{position:absolute; left:22px; bottom:20px; z-index:2}
.disco-stage .cap b{font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.3rem); color:var(--paper); display:block; line-height:1.04; text-shadow:0 2px 20px #000}
.disco-stage .cap span{font-family:var(--sans); font-style:italic; color:var(--green-bright); font-size:1rem}
.disco-side{display:flex; flex-direction:column; gap:18px; justify-content:center}
.disco-side .ds-row{display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-top:1px solid rgba(247,241,231,.16)}
.disco-side .ds-row:first-child{border-top:none}
.disco-side .ds-row .no{font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--green-bright); flex:none; min-width:1.6em}
.disco-side .ds-row b{display:block; color:var(--paper); font-family:var(--serif); font-size:1.22rem; margin-bottom:3px}
.disco-side .ds-row p{margin:0; color:rgba(247,241,231,.78); font-size:.93rem}
/* Plannen-specifieke warme CTA (Bruuks Beats-blok) — bewust GEEN wijziging aan
   --bh-action (tokens.css), die blijft site-breed groen. Gescoped via
   .disco-side .btn-warm zodat dit nergens anders dan dit blok raakt (.disco-
   side bestaat alleen op page-plannen.php). #C4371A/#A62A12 = dezelfde
   geverifieerde terracotta-knopkleur als de evenement-detailpagina's
   --ev-btn/--ev-btn-hover (feest.css) — wit erop 5.4:1 (AA-normaal). De
   fellere signatuur-poppy #E0531C (wave-d.css --beat-poppy) meet op deze
   knoptekst-grootte (.96rem/700) maar ~3.6:1 en is daarom hier niet als
   knopvlak gebruikt, wel nog zichtbaar in de club-lichtbundels erboven. */
.disco-side .btn-warm{background:#C4371A; box-shadow:0 2px 0 #A62A12, 0 14px 26px -16px rgba(20,26,22,.9)}
.disco-side .btn-warm:hover{background:#A62A12; box-shadow:0 4px 0 #A62A12, 0 20px 34px -16px rgba(20,26,22,.95)}

/* ============ KAARTJES-SYSTEEM (meerstaps) — dode CSS, geen enkel template gebruikt dit meer ============ */
.tickets .panelwrap{margin-top:44px}
.steps{display:flex; align-items:center; gap:10px; margin-bottom:26px; flex-wrap:wrap}
.step{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-size:.78rem; font-weight:700; color:var(--ink-soft); letter-spacing:.02em}
.step .n{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--line); background:var(--white); font-variant-numeric:tabular-nums; transition:.3s var(--ease)}
.step.active .n{background:var(--bh-action); border-color:var(--bh-action); color:var(--bh-on-accent)}
.step.done .n{background:var(--green-deep); border-color:var(--green-deep); color:var(--paper)}
.step.active{color:var(--green-deep)}
.step-sep{flex:1 1 18px; min-width:14px; height:1px; background:var(--line)}

.type-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.type-card{
  position:relative; text-align:left; cursor:pointer; appearance:none;
  background:var(--white); border:1px solid var(--line); border-radius:5px;
  padding:24px 22px 22px; font-family:var(--sans); color:var(--ink);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease), opacity .5s var(--ease), filter .5s var(--ease);
}
.type-card::before{
  content:""; position:absolute; left:-1px; top:18px; bottom:18px; width:4px; border-radius:0 3px 3px 0;
  background:var(--green); transform:scaleY(0); transform-origin:top; transition:transform .35s var(--ease);
}
.type-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:var(--green)}
.type-card:hover::before{transform:scaleY(1)}
.type-card .tic{width:50px; height:50px; border-radius:4px; display:grid; place-items:center; background:var(--green-wash); color:var(--green-deep); margin-bottom:16px; transition:.3s var(--ease)}
.type-card .tic svg{width:26px; height:26px}
.type-card:hover .tic{transform:translateY(-2px); box-shadow:0 0 0 5px rgba(200,101,71,.16), 0 10px 20px -10px rgba(200,101,71,.5)}
.type-card .no{font-family:var(--serif); font-style:italic; font-size:.9rem; color:var(--ink-soft); position:absolute; top:18px; right:20px}
.type-card h3{font-size:1.32rem; color:var(--ink); margin:0 0 6px}
.type-card p{font-size:.9rem; color:var(--ink-soft); margin:0 0 14px; min-height:2.7em}
.type-card .from{font-family:var(--sans); font-size:.84rem; font-weight:700; color:var(--green-deep); letter-spacing:.01em}
.type-card .check{position:absolute; top:16px; right:16px; width:24px; height:24px; border-radius:50%; background:var(--bh-action); color:var(--bh-on-accent); display:grid; place-items:center; opacity:0; transform:scale(.4); transition:.32s var(--ease)}
.type-card .check svg{width:13px;height:13px}
.type-card[aria-pressed="true"]{border-color:var(--green); box-shadow:inset 0 26px 42px -24px rgba(200,101,71,.5), 0 0 0 2px var(--green), var(--shadow-lift)}
.type-card[aria-pressed="true"]::before{transform:scaleY(1)}
.type-card[aria-pressed="true"] .check{opacity:1; transform:scale(1)}
.type-card[aria-pressed="true"] .tic{background:var(--bh-action); color:var(--bh-on-accent)}
.type-card[aria-pressed="true"] .no{opacity:0}
.type-grid:has(.type-card[aria-pressed="true"]) .type-card:not([aria-pressed="true"]){opacity:.5; filter:saturate(.82)}
.type-grid:has(.type-card[aria-pressed="true"]) .type-card:not([aria-pressed="true"]):hover{opacity:1; filter:none}

.panel{
  background:var(--white); border:1px solid var(--line); border-radius:5px;
  box-shadow:var(--shadow-deep); padding:clamp(22px,3vw,34px); min-height:240px; margin-top:24px;
}
.panel .empty{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:200px; gap:14px}
.panel .empty svg{width:46px;height:46px;color:var(--green-deep);opacity:.7}
.panel .empty b{font-family:var(--serif); font-weight:600; font-size:1.3rem; color:var(--green-deep)}
.panel .empty span{color:var(--ink-soft)}
.panel.flash{animation:panelflash .5s var(--ease)}
@keyframes panelflash{0%{clip-path:inset(100% 0 0 0); opacity:.3}100%{clip-path:inset(0 0 0 0); opacity:1}}

.panel-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap}
.panel-head h3{font-size:clamp(1.35rem,2.2vw,1.8rem); color:var(--green-deep)}
.panel-head .sub{font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:1rem}
.back-link{font-family:var(--sans); font-size:.82rem; font-weight:700; color:var(--green-deep); cursor:pointer; background:none; border:none; padding:6px 0; display:inline-flex; align-items:center; gap:6px}
.back-link:hover{text-decoration:underline}

.show-list{display:grid; gap:14px}
.show-card{
  display:flex; align-items:center; gap:18px; text-align:left; cursor:pointer; appearance:none; width:100%;
  background:var(--paper); border:1px solid var(--line); border-radius:5px; padding:16px 18px; font-family:var(--sans); color:var(--ink);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}
.show-card:hover{transform:translateX(4px); border-color:var(--green); box-shadow:var(--shadow-lift); background:var(--white)}
.show-card .date{flex:none; width:64px; text-align:center; border-right:1px solid var(--line); padding-right:16px}
.show-card .date .d{font-family:var(--serif); font-size:1.7rem; color:var(--green-deep); line-height:1}
.show-card .date .m{font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px}
.show-card .info b{display:block; font-family:var(--serif); font-size:1.18rem; color:var(--ink); line-height:1.12; margin-bottom:3px}
.show-card .info span{font-size:.88rem; color:var(--ink-soft)}
.show-card .info .meta{display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; font-size:.8rem; color:var(--green-deep); font-weight:600}
.show-card .go{margin-left:auto; color:var(--green-deep); flex:none; transition:transform .28s var(--ease)}
.show-card:hover .go{transform:translateX(4px)}

.order-grid{display:grid; grid-template-columns:1fr 332px; gap:clamp(22px,3vw,40px); align-items:start}
.ev-head h4{font-size:clamp(1.4rem,2.4vw,1.9rem); color:var(--green-deep); margin:0 0 6px}
.ev-head .door{font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:1.04rem; margin:0 0 18px}
.ev-meta{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px}
.ev-meta span{display:inline-flex; align-items:center; gap:7px; font-size:.82rem; font-weight:600; color:var(--green-deep); background:var(--green-wash); border:1px solid #cfdca3; padding:7px 12px; border-radius:3px}
.ev-meta span svg{width:14px;height:14px}
.ev-note{font-family:var(--serif); font-size:1.04rem; color:var(--ink-soft); margin:0 0 18px; font-style:italic}
.plek{display:grid; gap:10px; margin-top:8px}
.plek .ph-label{font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.plek-opts{display:flex; gap:10px; flex-wrap:wrap}
.plek-opt{cursor:pointer; border:1px solid var(--line); background:var(--white); border-radius:4px; padding:9px 14px; font-family:var(--sans); font-size:.86rem; font-weight:600; color:var(--ink-soft); transition:.25s var(--ease)}
.plek-opt[aria-pressed="true"]{border-color:var(--green); background:var(--green-wash); color:var(--green-deep); box-shadow:0 0 0 1px var(--green)}
.plek-opt:hover{border-color:var(--green)}

.order{background:var(--paper); border:1px solid var(--line); border-radius:5px; padding:20px; position:sticky; top:96px}
.order .ohead{font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px}
.tier{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
.tier:last-of-type{border-bottom:none}
.tier .tinfo b{display:block; font-size:.96rem; color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
.tier .tinfo span{font-size:.8rem; color:var(--ink-soft)}
.stepper{display:flex; align-items:center; gap:2px; background:var(--white); border:1px solid var(--line); border-radius:3px; padding:3px}
.stepper button{width:30px; height:30px; border-radius:2px; border:none; cursor:pointer; background:transparent; color:var(--green-deep); font-size:1.2rem; line-height:1; display:grid; place-items:center; transition:background .2s var(--ease), transform .12s var(--ease)}
.stepper button:hover:not(:disabled){background:var(--green-wash)}
.stepper button:active:not(:disabled){transform:scale(.86)}
.stepper button:disabled{opacity:.3; cursor:not-allowed}
.stepper .q{min-width:26px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}
.total-row{display:flex; align-items:baseline; justify-content:space-between; margin:18px 0 2px; padding-top:14px; border-top:2px solid var(--ink)}
.total-row .lbl{font-size:.86rem; color:var(--ink-soft)}
.total-row .amt{font-family:var(--serif); font-weight:600; font-size:1.85rem; color:var(--green-deep); font-variant-numeric:tabular-nums; display:inline-block; transform-origin:right center}
.total-row .amt.pop{animation:amtpop .42s var(--ease)}
@keyframes amtpop{0%{transform:scale(1)}38%{transform:scale(1.13)}100%{transform:scale(1)}}
.pay-note{font-family:var(--sans); font-style:italic; font-size:.82rem; color:var(--ink-soft); margin:4px 0 16px; text-align:right}
.btn-pay{width:100%; justify-content:center; color:var(--bh-on-accent); background:var(--bh-action); box-shadow:0 2px 0 var(--bh-action-hover); position:relative; overflow:hidden; font-weight:700; border:none; border-radius:3px; padding:15px 26px; font-family:var(--sans); cursor:pointer; display:inline-flex; align-items:center; gap:10px; transition:transform .28s var(--ease), background .28s var(--ease)}
.btn-pay:hover:not(:disabled){transform:translateY(-2px); background:var(--bh-action-hover)}
.btn-pay:disabled{opacity:.45; cursor:not-allowed; box-shadow:none; background:#cdd3bd; color:var(--ink-soft)}

.confirm{text-align:center; padding:14px 6px}
.confirm .seal{width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:var(--bh-action); color:var(--bh-on-accent); display:grid; place-items:center; box-shadow:0 0 0 6px var(--green-wash); animation:pop .5s var(--ease) both}
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.confirm .seal svg{width:30px;height:30px}
.confirm h3{font-size:1.7rem; color:var(--green-deep); margin:0 0 8px}
.confirm p{color:var(--ink-soft); margin:0 auto 8px; max-width:46ch}
.confirm .recap{font-family:var(--serif); font-weight:600; font-size:1.12rem; color:var(--ink)}
.confirm .imp-line{font-family:var(--sans); font-style:italic; font-size:.92rem; color:var(--green-deep); margin:14px auto 20px; max-width:44ch}

/* ============ AGENDA-strip ============ */
.agenda{margin-top:40px; display:grid; gap:0; border-top:1px solid var(--line)}
.agenda .row{display:grid; grid-template-columns:120px 1fr auto; gap:18px; align-items:center; padding:16px 4px; border-bottom:1px solid var(--line); transition:background .25s var(--ease), padding-left .25s var(--ease)}
.agenda .row:hover{background:var(--green-wash); padding-left:12px}
.agenda .row .when{font-family:var(--serif); color:var(--green-deep); font-size:1.02rem}
.agenda .row .what b{font-family:var(--serif); font-size:1.14rem; color:var(--ink)}
.agenda .row .what span{display:block; font-size:.88rem; color:var(--ink-soft)}
.agenda .row .tag2{font-family:var(--sans); font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); border:1px solid var(--line); border-radius:2px; padding:5px 9px; white-space:nowrap}
/* Bescheiden evenement-thumbnail (Benjamin-besluit 2026-07-02): alleen als het
   evenement een foto heeft, klein vierkant naast de titel, geen apart grid-
   kolom (voorkomt een leeg gat + layout-shift bij evenementen zonder foto). */
.agenda .row .what .what-head{display:flex; align-items:center; gap:10px}
.agenda-thumb{width:40px; height:40px; border-radius:var(--bh-radius-sm); object-fit:cover; flex:none}

/* Afzonderlijke dagen van één evenement. De lijst blijft compact op overzichten,
   maar verbergt nooit een tweede dag of een afwijkend tijdvak. */
.ev-momenten{display:flex; flex-direction:column; gap:6px; min-width:0}
.ev-moment{display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline}
.ev-moment__datum{font-family:var(--serif); font-weight:600; color:var(--green-deep)}
.ev-moment__tijd{font-family:var(--sans); font-size:.84rem; color:var(--ink-soft)}
.ev-momenten--compact{gap:3px}
.ev-momenten--compact .ev-moment{display:grid; gap:0}
.ev-momenten--compact .ev-moment__datum{font-size:.9rem}
.ev-momenten--compact .ev-moment__tijd{font-size:.76rem}

/* Geen passende foto betekent een eerlijke datumweergave. Zo suggereert een
   willekeurige kerkfoto niet langer dat die bij het evenement hoort. */
.ev-date-panel{width:100%; min-height:100%; padding:28px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:var(--bh-creme-2); color:var(--green-deep)}
.ev-date-panel__dag{font-family:var(--serif); font-weight:700; font-size:clamp(3rem,7vw,5.4rem); line-height:.9}
.ev-date-panel__maand{font-family:var(--sans); font-weight:800; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin-top:10px}
.ev-date-panel__meer,.ev-date-panel__label{font-family:var(--sans); font-weight:700; font-size:.88rem; color:var(--ink-soft); margin-top:8px}
.ev-media > .ev-date-panel{min-height:360px; border:1px solid var(--line); border-radius:var(--bh-radius-lg)}

/* ============ OVER / CONTACT ============ */
/* overflow-x:clip — .lidkaart (bond-voor-senioren) is reveal-right en lekte
   zonder clip-ancestor buiten de viewport op mobiel (zelfde patroon als .split). */
.over-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,64px); margin-top:46px; align-items:start; overflow-x:clip}
.over-copy p{color:var(--ink-soft); margin:0 0 16px}
.over-copy p .em{color:var(--green-deep); font-weight:600}
.over-copy .pull{font-family:var(--serif); font-size:clamp(1.2rem,1.8vw,1.5rem); line-height:1.4; color:var(--green-deep); border-left:3px solid var(--green); padding-left:18px; margin:24px 0}
.over-media{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.over-media .frame:first-child{grid-column:1/-1}
.over-media .frame .ph{aspect-ratio:4/3}
.over-media .frame.tall .ph{aspect-ratio:3/4}

.contact{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:46px; padding-top:40px; border-top:1px solid var(--line)}
.contact .ci h4{font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--green-deep); margin:0 0 12px}
.contact .ci p{margin:0; color:var(--ink-soft); font-size:.96rem}
.contact .ci .big{font-family:var(--serif); font-size:1.16rem; color:var(--ink); margin-bottom:4px}

/* ---- Kom langs: kaart-impressie + uitnodiging + mock-formulier ---- */
/* Wave E punt 5 (Benjamin-melding: "hele witte balk" in de kaart): align-items:stretch
   rekte de mapcard-kolom op tot de hoogte van de langere formulier-kolom, terwijl
   .map-canvas een vaste aspect-ratio houdt — het verschil bleef leeg wit onder
   .map-foot staan. Foto + kaart staan nu samen in .locatie-media (linkerkolom,
   natuurlijke hoogte via align-items:start), het formulier alleen rechts. */
/* overflow-x:clip — .komlangs-side is reveal-right en lekte zonder clip-ancestor
   ~24px buiten de viewport op /contact/ (390px, zelfde patroon als .split). */
.locatie-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,46px); align-items:start; margin-top:46px; overflow-x:clip}
.locatie-media{display:flex; flex-direction:column; gap:20px}
.locatie-media .frame{margin:0}
.mapcard{position:relative; background:var(--white); border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:var(--shadow-deep); display:flex; flex-direction:column}
.mapcard .map-canvas{position:relative; aspect-ratio:4/3; background:var(--green-wash); overflow:hidden}
.mapcard .map-canvas .map-bg{position:absolute; inset:0; width:100%; height:100%; display:block}
.mapcard .map-pin{position:absolute; left:50%; top:49%; transform:translate(-50%,-100%); z-index:2; color:var(--green-deep)}
.mapcard .map-pin svg{width:36px; height:36px; filter:drop-shadow(0 7px 10px rgba(20,26,22,.45))}
.mapcard .map-pin::after{content:""; position:absolute; left:50%; bottom:-3px; width:14px; height:5px; border-radius:50%; transform:translateX(-50%); background:rgba(20,26,22,.28); z-index:-1}
.mapcard .map-foot{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:14px 16px; border-top:1px solid var(--line)}
.mapcard .map-foot b{font-family:var(--serif); font-size:1.05rem; color:var(--ink)}
.mapcard .map-foot span{font-family:var(--sans); font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}

.komlangs-side{display:flex; flex-direction:column; gap:16px; justify-content:center}
.komlangs-side .invite{font-family:var(--serif); font-size:clamp(1.15rem,1.7vw,1.42rem); line-height:1.44; color:var(--green-deep); margin:0}
.komlangs-side > p{color:var(--ink-soft); margin:0}

.contact-form{display:grid; gap:13px; margin-top:2px}
.cf-row{display:grid; gap:6px}
.cf-two{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.contact-form label{font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.contact-form input,.contact-form textarea{
  font-family:var(--sans); font-size:.95rem; color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:4px; padding:12px 14px; width:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-form textarea{resize:vertical; min-height:104px}
.contact-form input:focus,.contact-form textarea:focus{outline:none; border-color:var(--bh-focus); box-shadow:0 0 0 3px var(--bh-terracotta-a40)}
.contact-form .cf-note{font-family:var(--sans); font-style:italic; font-size:.82rem; color:var(--ink-soft); margin:0}
.cf-sent{font-family:var(--serif); font-style:italic; color:var(--green-deep); margin:6px 0 0; display:none}
.cf-sent.show{display:flex; align-items:center; gap:9px; clip-path:inset(100% 0 -10% 0); animation:voetlicht .6s var(--ease) forwards}
.cf-sent svg{width:20px; height:20px; flex:none; color:var(--green-deep)}

/* ============ FOOTER ============ */
footer{background:var(--green-ink); color:var(--paper); margin-top:0}
footer .wrap{padding:clamp(48px,6vw,76px) var(--gut) clamp(28px,4vw,42px)}
.foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1.15fr; gap:34px; align-items:start}
footer .brand .wm b{color:var(--paper)}
footer .brand .wm span{color:var(--green-bright)}
footer .brand .mk-foot{width:38px;height:38px;flex:none}
footer .blurb{font-family:var(--serif); color:rgba(247,241,231,.82); max-width:42ch; margin:18px 0 0; font-size:1.04rem; line-height:1.5}
footer h4{font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--green-bright); margin:0 0 16px}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; font-size:.95rem; color:rgba(247,241,231,.86)}
footer ul li{display:flex; align-items:flex-start; gap:9px}
footer ul li svg{width:15px;height:15px;margin-top:3px;color:var(--green-bright);flex:none}
footer a{transition:color .25s var(--ease)}
footer a:hover{color:var(--green-bright)}
.foot-bar{border-top:1px solid rgba(247,241,231,.16); margin-top:40px; padding-top:22px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; font-size:.82rem; color:rgba(247,241,231,.66)}
.foot-bar .imp-foot{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-style:italic; color:rgba(247,241,231,.82)}
.foot-bar .imp-foot .dot{width:7px;height:7px;border-radius:50%;background:var(--green-bright);flex:none}
.foot-bar .foot-legal{display:inline-flex; align-items:center; gap:10px}
.foot-bar .foot-legal a{color:rgba(247,241,231,.78); text-underline-offset:2px}
.foot-bar .foot-legal a:hover{color:var(--green-bright); text-decoration:underline}
.foot-bar .foot-legal span{opacity:.5}

/* ===================================================================
   Signatuur-bewegingstaal: "Voetlicht" — DE WOW-LAAG (Benjamin-eis: blijft)
   Een terracotta voetlicht-/bouwlijn ontsteekt; inhoud rijst van ónder die
   lijn het licht in (clip-onthulling van onder naar boven). Puur
   transform/opacity/clip-path = GPU-vriendelijk. Structuur 1-op-1 uit de bron.
   =================================================================== */
.head::after{
  content:""; position:absolute; left:2px; bottom:-15px; width:78px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--green), var(--green-bright));
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease) .12s;
}
.head.in::after{transform:scaleX(1)}

.reveal:not(.stagger){clip-path:inset(100% 0 -24% 0); transform:translateY(28px); opacity:0; transition:clip-path .92s var(--ease), transform .92s var(--ease), opacity .7s var(--ease); will-change:clip-path, transform}
.reveal:not(.stagger).in{clip-path:inset(0 0 -24% 0); transform:none; opacity:1; will-change:auto}

/* ---- Animatie-varianten (Taak wave-d, punt 5): eigen invalshoek per sectie,
   zelfde Voetlicht-sweep-mechanisme (main.js), alleen de transform/clip-path
   per variant verschilt. Iggy mag deze op zijn eigen pagina's hergebruiken. ---- */
.reveal-fade{opacity:0; transition:opacity .9s var(--ease); will-change:opacity}
.reveal-fade.in{opacity:1; will-change:auto}

.reveal-left{clip-path:inset(0 -24% 0 0); transform:translateX(-42px); opacity:0; transition:clip-path .9s var(--ease), transform .9s var(--ease), opacity .7s var(--ease); will-change:clip-path, transform}
.reveal-left.in{clip-path:inset(0 -24% 0 0); transform:none; opacity:1; will-change:auto}

.reveal-right{clip-path:inset(0 0 0 -24%); transform:translateX(42px); opacity:0; transition:clip-path .9s var(--ease), transform .9s var(--ease), opacity .7s var(--ease); will-change:clip-path, transform}
.reveal-right.in{clip-path:inset(0 0 0 -24%); transform:none; opacity:1; will-change:auto}

.reveal-zoom{transform:scale(.93); opacity:0; transition:transform 1s var(--ease), opacity .8s var(--ease); will-change:transform, opacity}
.reveal-zoom.in{transform:none; opacity:1; will-change:auto}

.stagger > *{clip-path:inset(100% 0 -22% 0); transform:translateY(34px); opacity:0; transition:clip-path .82s var(--ease), transform .82s var(--ease), opacity .6s var(--ease); will-change:clip-path, transform}
.stagger.in > *{clip-path:inset(0 0 -22% 0); transform:none; opacity:1; will-change:auto}
.stagger.in > *:nth-child(1){transition-delay:.05s}
.stagger.in > *:nth-child(2){transition-delay:.15s}
.stagger.in > *:nth-child(3){transition-delay:.25s}
.stagger.in > *:nth-child(4){transition-delay:.35s}
.stagger.in > *:nth-child(5){transition-delay:.45s}
.stagger.in > *:nth-child(6){transition-delay:.55s}

/* hero rijst bij laden het licht in */
.hi{clip-path:inset(100% 0 -20% 0); transform:translateY(24px); opacity:0; animation:voetlicht 1s var(--ease) forwards}
.hi.d1{animation-delay:.15s}.hi.d2{animation-delay:.32s}.hi.d3{animation-delay:.5s}.hi.d4{animation-delay:.68s}
@keyframes voetlicht{to{clip-path:inset(0 0 -20% 0); transform:none; opacity:1}}
.hero-today.hi{animation-delay:.9s}

/* logo's tekenen zichzelf (architectuur-bouwlijn), monoline accent-marks */
.draw-mk path,.draw-mk line{stroke-dasharray:170; stroke-dashoffset:170; animation:inkdraw 1.6s var(--ease) .4s forwards}
@keyframes inkdraw{to{stroke-dashoffset:0}}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .order-grid{grid-template-columns:1fr 300px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .frame.wide{grid-column:span 2}
}
@media (max-width:940px){
  html{scroll-padding-top:70px}
  .mast-nav{
    position:fixed; top:62px; left:0; right:0; z-index:50; flex-direction:column; align-items:stretch; gap:0;
    height:calc(100vh - 62px); height:calc(100dvh - 62px);
    background:var(--paper); padding:8px var(--gut) calc(24px + env(safe-area-inset-bottom));
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateY(-130%); transition:transform .4s var(--ease); box-shadow:0 24px 40px -28px rgba(20,26,22,.5);
  }
  .mast-nav.open{transform:translateY(0)}
  .mast-nav a.lk{padding:14px 2px; font-size:.95rem}
  /* :not()-scope, want .lk-secondary/.lk-cta dragen ook class "lk" (header.php:142-143).
     Ze hebben hun eigen bewuste tekstkleur (green-deep / on-accent) en hun eigen 4-zijdige
     border (resp. outline / transparant) — de kale-tab-divider hoort daar niet overheen.
     Zonder deze scope werd Evenementen (kale .lk) grijzer dan de drop-toggle-tabs (var(--ink)),
     en kreeg Contact's outline-box een verkeerde onderrand (1px var(--line) i.p.v. de eigen
     1.5px var(--green-deep)) i.p.v. een volledige rand. */
  .mast-nav a.lk:not(.lk-secondary):not(.lk-cta){color:var(--ink); border-bottom:1px solid var(--line)}
  .mast-nav a.lk::after{display:none}
  /* border-color transparent + inset box-shadow i.p.v. de echte border: de 1.5px
     outline werd op high-DPR-mobiel op een fractionele Y-positie sub-pixel afgesneden
     aan de bovenrand. De border blijft gereserveerd (box-sizing:border-box, geen
     layout-shift), maar wordt onzichtbaar; de inset box-shadow tekent 'm crisp op
     elke DPR (Scorrie-diagnose 2026-07-07). */
  .mast-nav a.lk-secondary{display:block; width:100%; text-align:center; margin-top:16px; padding:14px 16px; font-size:.95rem; box-sizing:border-box; border-color:transparent; box-shadow:inset 0 0 0 1.5px var(--green-deep)}
  .mast-nav a.lk-cta{display:block; width:100%; text-align:center; margin-top:10px; padding:14px 16px; font-size:.95rem; border-bottom:none; box-sizing:border-box}
  .nav-toggle{display:inline-flex}
  .hero{display:block; min-height:auto; padding-bottom:0}
  .hero .wrap{padding-top:78px; padding-bottom:20px}
  .hero h1{max-width:18ch}
  .hero-today{position:static; width:auto; max-width:240px; margin:8px var(--gut) 34px; transform:rotate(0)}
  .over-mark{display:none !important}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > div:first-child{grid-column:1 / -1}
  .pillars{grid-template-columns:1fr; gap:18px}
  .teaser{grid-template-columns:1fr; gap:26px}
  .teaser .t-media{order:-1}
  .split{grid-template-columns:1fr; gap:30px}
  .split.rev .split-media{order:0}
  .disco-grid{grid-template-columns:1fr}
  .order-grid{grid-template-columns:1fr}
  .order{position:static; order:2}
  .huur{grid-template-columns:1fr}
  .over-grid{grid-template-columns:1fr}
  .locatie-grid{grid-template-columns:1fr; gap:26px}
  .contact{grid-template-columns:1fr}
  .feature .frame .ph{aspect-ratio:16/10}
  /* Dropdowns worden accordions binnen het hamburger-paneel */
  .mast-nav{align-items:stretch}
  .nav-item{display:block; border-bottom:1px solid var(--line)}
  .drop-toggle{width:100%; justify-content:space-between; padding:15px 2px; font-size:.95rem; color:var(--ink); box-sizing:border-box}
  .drop-toggle::after{display:none}
  .drop-toggle .caret{transition:transform .3s var(--ease)}
  .nav-item.open .drop-toggle{color:var(--green-deep)}
  .nav-item.open .drop-toggle .caret{transform:translateY(1px) rotate(225deg)}
  .drop{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    min-width:0; border:none; box-shadow:none; background:transparent; padding:0;
    max-height:0; overflow:hidden; transition:max-height .34s var(--ease);
  }
  .nav-item.open .drop{max-height:420px; padding:2px 0 10px}
  .drop a{padding:11px 12px; font-size:.92rem}
  .drop a::before{display:none}
  .news-lead .nl-media{order:-1}
  /* De grid-template-columns/gap-overrides voor .read-grid, .news-lead, .news-grid,
     .news-teaser, .acco-grid, .rf-grid, .recur-grid, .ver-grid, .onder-grid en
     .stichting-grid stonden hier eerder, maar waren dode code: de latere
     onvoorwaardelijke base-regels (DORPSPORTAAL-UITBREIDING-sectie verderop)
     hebben dezelfde specificiteit en wonnen door bronvolgorde. Verplaatst naar
     na die base-regels zodat ze weer werkzaam zijn — zie de twee media-blokken
     vlak vóór de 404-sectie. Root-cause: Scorrie computed-style-diagnose 2026-07-07. */
}
/* ---- Foto's compact op mobiel: rijke galerijen worden een carrousel ---- */
@media (max-width:700px){
  .media-rail{
    display:flex; gap:14px; align-items:stretch;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin:0 calc(var(--gut)*-1); padding:4px var(--gut) 10px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .media-rail::-webkit-scrollbar{display:none}
  .media-rail > *{
    flex:0 0 84%; scroll-snap-align:center;
    grid-column:auto !important; width:auto !important; margin:0 !important; margin-top:0 !important;
  }
  .media-rail .frame .ph{aspect-ratio:4/3 !important}
  .rail-dots{display:flex; gap:8px; justify-content:center; margin-top:14px}
  .rail-dots button{width:8px; height:8px; padding:0; border:none; border-radius:50%; background:var(--line); cursor:pointer; transition:background .25s var(--ease), transform .25s var(--ease)}
  .rail-dots button[aria-current="true"]{background:var(--green); transform:scale(1.3)}
  .over-media .frame .ph,.over-media .frame.tall .ph{aspect-ratio:4/3}
}
@media (max-width:560px){
  body{font-size:17px}
  .split-grid{gap:10px}
  .home-3d-knop{position:static; display:flex; justify-content:center; margin-top:12px}
  :root{--gut:18px}
  .cf-two{grid-template-columns:1fr}
  .type-grid{grid-template-columns:1fr; gap:12px}
  .type-card p{min-height:0}
  .type-card .no{display:none}
  .gallery{grid-template-columns:1fr}
  .gallery .frame.wide{grid-column:span 1}
  .foot-grid{grid-template-columns:1fr}
  .over-media{grid-template-columns:1fr}
  .agenda .row{grid-template-columns:1fr; gap:6px; padding:14px 4px}
  .agenda .row .tag2{justify-self:start}
  .show-card{flex-wrap:wrap; gap:12px}
  .show-card .date{border-right:none; border-bottom:1px solid var(--line); padding:0 0 8px; width:auto; text-align:left; display:flex; gap:8px; align-items:baseline}
  .show-card .go{display:none}
  .cta-row .btn{width:100%; justify-content:center}
  .brand .wm b{font-size:1.24rem}
  .steps{font-size:.7rem}
  .step .lbl{display:none}
  .anchor-row a{font-size:.74rem; padding:8px 13px}
  /* .ver-grid, .onder-grid en .zakelijk dl/dd stonden hier eerder, maar waren
     dode code door dezelfde bronvolgorde-bug als hierboven (940px-blok) — zie
     die toelichting. Verplaatst naar na de base-regels, vlak vóór de 404-sectie. */
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .reveal,.stagger > *,.hi,.hero-today.hi,.reveal-left,.reveal-right,.reveal-fade,.reveal-zoom{opacity:1 !important; transform:none !important; clip-path:none !important}
  .head::after{transform:scaleX(1) !important}
  .center.head::after{transform:translateX(-50%) scaleX(1) !important}
  .hero h1 em::before{transform:scaleX(1) !important}
  .draw-mk path,.draw-mk line{stroke-dashoffset:0 !important}
  .hero-media{transform:none !important}
  .drop{transition:none !important}
}

/* ===================================================================
   DORPSPORTAAL-UITBREIDING
   Nieuws · Accommodaties + Reserveren · Agenda · Verenigingen ·
   Ondernemers · Stichting/bestuur · lange-tekst-pagina's.
   Bouwt voort op dezelfde tokens, frames en Voetlicht-taal.
   =================================================================== */

.anchor-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:30px}
.anchor-row a{
  font-family:var(--sans); font-weight:700; font-size:.78rem; letter-spacing:.02em; color:var(--green-deep);
  background:var(--white); border:1px solid var(--line); border-radius:40px; padding:9px 16px;
  display:inline-flex; align-items:center; gap:8px; transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.anchor-row a:hover{background:var(--green-wash); border-color:var(--green); transform:translateY(-2px)}
.anchor-row a .no{font-family:var(--serif); font-style:italic; color:var(--green)}

.prose{max-width:68ch}
.prose p{color:var(--ink-soft); margin:0 0 18px; font-size:1.02rem}
.prose p.lead-line{font-family:var(--serif); font-size:clamp(1.18rem,1.8vw,1.5rem); line-height:1.45; color:var(--green-deep); margin:0 0 22px}
.prose h3{font-size:clamp(1.4rem,2.4vw,1.95rem); color:var(--ink); margin:30px 0 12px}
.prose h4{font-family:var(--serif); font-weight:600; font-size:1.18rem; color:var(--green-deep); margin:24px 0 8px}
.prose .pull{font-family:var(--serif); font-size:clamp(1.2rem,1.8vw,1.5rem); line-height:1.4; color:var(--green-deep); border-left:3px solid var(--green); padding-left:18px; margin:26px 0}
.prose ul{margin:0 0 18px; padding-left:0; list-style:none; display:grid; gap:10px}
.prose ul li{position:relative; padding-left:24px; color:var(--ink-soft)}
.prose ul li::before{content:""; position:absolute; left:4px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--green); transform:translateY(-50%)}
.prose a.inline{color:var(--green-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--green)}
.prose a.inline:hover{color:var(--green)}
.read-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,60px); align-items:start; margin-top:46px}
.read-aside{display:grid; gap:18px; position:sticky; top:96px}

/* ---- NIEUWS ---- */
/* overflow-x:clip — .nl-media is reveal-right en lekte zonder clip-ancestor
   buiten de viewport op mobiel (archief-nieuws, zelfde patroon als .split). */
.news-lead{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(26px,4vw,52px); align-items:center; margin-top:46px; overflow-x:clip}
.news-lead .nl-copy .nc-date{font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green-deep)}
.news-lead .nl-copy h3{font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--ink); margin:10px 0 14px}
.news-lead .nl-copy p{color:var(--ink-soft); margin:0 0 16px}
.news-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:40px}
.news-card{
  background:var(--white); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  box-shadow:var(--shadow-deep); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.news-card[open]{border-color:var(--green); box-shadow:var(--shadow-lift)}
.news-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--green)}
.news-card[open]:hover{transform:none}
.news-card summary{list-style:none; cursor:pointer; padding:22px 22px 20px; display:block; position:relative}
.news-card summary::-webkit-details-marker{display:none}
.news-card summary:focus-visible{outline:2px solid var(--green); outline-offset:-4px; border-radius:6px}
.news-card .nc-date{font-family:var(--sans); font-weight:700; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); display:inline-flex; align-items:center; gap:8px}
.news-card .nc-tag{font-family:var(--sans); font-weight:700; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); border-radius:2px; padding:3px 8px}
.news-card h3{font-size:1.38rem; color:var(--ink); margin:12px 0 8px; line-height:1.12}
.news-card .nc-intro{color:var(--ink-soft); font-size:.95rem; margin:0}
.news-card .nc-more{font-family:var(--sans); font-weight:700; font-size:.8rem; color:var(--green-deep); display:inline-flex; align-items:center; gap:8px; margin-top:14px}
.news-card .nc-more .arr{transition:transform .28s var(--ease)}
.news-card:hover .nc-more .arr{transform:translateX(4px)}
.news-card[open] .nc-more .lbl-open{display:none}
.news-card .nc-more .lbl-close{display:none}
.news-card[open] .nc-more .lbl-close{display:inline}
.news-card[open] .nc-more .arr{transform:rotate(90deg)}
.news-card .nc-body{padding:0 22px 24px; animation:voetlicht .5s var(--ease) both}
.news-card .nc-body p{color:var(--ink-soft); margin:0 0 14px; font-size:.97rem}
.news-card .nc-body p:last-child{margin-bottom:0}
.news-card .nc-body .nc-figure{margin:0 0 16px; border-radius:4px; overflow:hidden; border:1px solid var(--line)}
.news-card .nc-body .nc-figure img{width:100%; height:auto; display:block}

.news-teaser{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
.news-tcard{
  display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-radius:6px; overflow:hidden; box-shadow:var(--shadow-deep);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.news-tcard__media{position:relative; display:block; background:var(--green-wash); overflow:hidden}
.news-tcard__media img{display:block; width:100%; height:auto}
.news-tcard__body{display:flex; flex:1; flex-direction:column; padding:22px 22px 20px}
.news-tcard__play,.bh-facebook-post__play{position:absolute; inset:50% auto auto 50%; display:grid; width:58px; height:58px; place-items:center; transform:translate(-50%,-50%); border-radius:50%; color:var(--white); background:rgba(46,58,49,.86); box-shadow:0 8px 24px rgba(22,31,25,.28)}
.news-tcard__play svg,.bh-facebook-post__play svg{width:24px; height:24px; fill:currentColor; transform:translateX(2px)}
.news-tcard:hover{transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:var(--green)}
.news-tcard .nc-date{font-family:var(--sans); font-weight:700; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep)}
.news-tcard h3{font-size:1.26rem; color:var(--ink); margin:11px 0 8px; line-height:1.14}
.news-tcard p{margin:0 0 16px; font-size:.93rem; color:var(--ink-soft); flex:1}
.news-tcard .pillar-go{font-family:var(--sans); font-weight:700; font-size:.82rem; color:var(--green-deep); display:inline-flex; align-items:center; gap:8px}
.news-tcard .pillar-go .arr{transition:transform .28s var(--ease)}
.news-tcard:hover .pillar-go .arr{transform:translateX(5px)}

/* ---- FACEBOOK-NIEUWSSTROOM ---- */
.bh-facebook-wrap{max-width:1180px}
.bh-facebook-feed{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:28px}
.bh-facebook-feed--masonry{position:relative; display:block}
.bh-facebook-feed--masonry .bh-facebook-post{position:absolute}
.bh-facebook-post{overflow:hidden; background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-deep)}
.bh-facebook-post__meta{display:flex; align-items:center; gap:12px; padding:20px 22px 16px}
.bh-facebook-post__mark{display:grid; flex:0 0 38px; width:38px; height:38px; place-items:center; border-radius:50%; color:var(--white); background:var(--green-deep); font-family:var(--sans); font-size:1.35rem; font-weight:800}
.bh-facebook-post__meta strong,.bh-facebook-post__meta time{display:block; font-family:var(--sans)}
.bh-facebook-post__meta strong{color:var(--ink); font-size:.96rem}
.bh-facebook-post__meta time{margin-top:2px; color:var(--ink-soft); font-size:.78rem}
.bh-facebook-post__media{position:relative; display:block; background:var(--green-wash)}
.bh-facebook-post__media img{display:block; width:100%; height:auto}
.bh-facebook-post__media--video{width:100%; padding:0; overflow:hidden; border:0; color:inherit; font:inherit; cursor:pointer; text-align:inherit}
.bh-facebook-post__media--video:focus-visible{outline:3px solid var(--green); outline-offset:-3px}
.bh-facebook-post__media--zonder-poster,.news-tcard__media--zonder-poster{min-height:240px; display:flex; align-items:flex-end; justify-content:center; padding:24px; color:var(--white); background:linear-gradient(145deg,var(--green-deep),var(--ink)); text-align:center}
.news-tcard__media--zonder-poster{min-height:180px}
.bh-facebook-post__video-label{position:relative; z-index:1; font-family:var(--sans); font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.bh-facebook-post__video{background:var(--ink)}
.bh-facebook-post__video-frame{display:block; width:100%; border:0; aspect-ratio:16/9; background:var(--ink)}
.bh-facebook-detail__media{overflow:hidden; margin:0 0 28px; border:1px solid var(--line); border-radius:8px; background:var(--green-wash)}
.bh-facebook-detail__media:has(.bh-facebook-gallery){overflow:visible; border:0; background:transparent}
.bh-facebook-gallery{position:relative; outline:none}
.bh-facebook-gallery:focus-visible{outline:3px solid var(--green); outline-offset:5px; border-radius:8px}
.bh-facebook-gallery__viewport{overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; scroll-snap-type:x mandatory; border-radius:8px; background:var(--ink)}
.bh-facebook-gallery__viewport::-webkit-scrollbar{display:none}
.bh-facebook-gallery__track{display:flex}
.bh-facebook-gallery__slide{display:grid; flex:0 0 100%; width:100%; aspect-ratio:4/3; place-items:center; scroll-snap-align:start; scroll-snap-stop:always}
.bh-facebook-gallery__slide img{display:block; width:100%; height:100%; object-fit:contain}
.bh-facebook-gallery__bar{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:14px}
.bh-facebook-gallery__arrow{display:grid; width:44px; height:44px; padding:0; place-items:center; border:1px solid var(--green); border-radius:50%; color:var(--green-deep); background:var(--paper); cursor:pointer; transition:color .25s var(--ease),background-color .25s var(--ease),transform .25s var(--ease)}
.bh-facebook-gallery__arrow:hover{color:var(--paper); background:var(--green-deep); transform:translateY(-2px)}
.bh-facebook-gallery__arrow:focus-visible,.bh-facebook-gallery__thumb:focus-visible{outline:3px solid var(--green); outline-offset:3px}
.bh-facebook-gallery__arrow svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.bh-facebook-gallery__status{min-width:7ch; color:var(--ink); font-family:var(--sans); font-size:.82rem; font-weight:700; text-align:center}
.bh-facebook-gallery__thumbs{display:flex; gap:9px; margin-top:12px; padding:3px 2px 5px; overflow-x:auto; scrollbar-color:var(--green) transparent}
.bh-facebook-gallery__thumb{flex:0 0 72px; width:72px; aspect-ratio:1; padding:0; overflow:hidden; border:2px solid transparent; border-radius:8px; background:var(--green-wash); cursor:pointer; opacity:.68; transition:border-color .25s var(--ease),opacity .25s var(--ease),transform .25s var(--ease)}
.bh-facebook-gallery__thumb:hover{opacity:1; transform:translateY(-2px)}
.bh-facebook-gallery__thumb[aria-current="true"]{border-color:var(--green-deep); opacity:1}
.bh-facebook-gallery__thumb img{display:block; width:100%; height:100%; object-fit:cover}
.bh-facebook-post__content{padding:22px}
.bh-facebook-post__content h2{margin:0; font-size:clamp(1.35rem,3vw,1.8rem)}
.bh-facebook-post__text{color:var(--ink); font-size:1rem; line-height:1.7}
.bh-facebook-post__text p{margin:0 0 1em}
.bh-facebook-post__text p:last-child{margin-bottom:0}
.bh-facebook-post__actions{display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.bh-facebook-post__actions a{color:var(--green-deep); font-family:var(--sans); font-size:.83rem; font-weight:700; text-decoration:underline; text-decoration-color:var(--green); text-underline-offset:4px}
.bh-facebook-post__actions a:focus-visible{outline:2px solid var(--green); outline-offset:5px}
.bh-facebook-foot{margin-top:44px; padding-top:28px; border-top:1px solid var(--line)}
.bh-facebook-foot p{max-width:62ch; color:var(--ink-soft)}

@media (max-width:820px){
  .bh-facebook-wrap{max-width:760px}
  .bh-facebook-feed{grid-template-columns:1fr}
  .bh-facebook-feed--masonry{display:grid; height:auto!important}
  .bh-facebook-feed--masonry .bh-facebook-post{position:static; width:auto!important}
  .bh-facebook-gallery__slide{aspect-ratio:1/1}
  .bh-facebook-gallery__thumb{flex-basis:58px; width:58px}
}

@media (prefers-reduced-motion:reduce){
  .bh-facebook-gallery__arrow,.bh-facebook-gallery__thumb{transition:none}
}

/* ---- GROTE FOTOWEERGAVE ----
   Klikbare figuren (figure[data-lightbox], zie main.js) krijgen een knop over het beeld
   met een vergrootteken rechtsboven: altijd zichtbaar, ook op touch zonder hover. De
   weergave zelf is een modale <dialog> op donkere inkt, met dezelfde carrouselkern als
   de Facebookgalerij. Bij de scrollvergrendeling vult main.js de weggevallen scrollbalk
   aan met padding-right op body, zodat de pagina eronder niet verspringt. */
.bh-lightbox-houder{position:relative}
.bh-lightbox-knop{position:absolute; inset:0; z-index:3; width:100%; height:100%; margin:0; padding:0; border:0; background:transparent; cursor:zoom-in; -webkit-tap-highlight-color:transparent}
.bh-lightbox-knop:focus-visible{outline:3px solid var(--green); outline-offset:-3px}
.bh-lightbox-knop__icoon{position:absolute; top:10px; right:10px; display:grid; width:36px; height:36px; place-items:center; border-radius:50%; color:var(--green-deep); background:rgba(252,251,248,.9); box-shadow:0 3px 10px -3px rgba(20,26,22,.4); transition:transform .3s var(--ease),background-color .3s var(--ease)}
.bh-lightbox-knop:hover .bh-lightbox-knop__icoon,.bh-lightbox-knop:focus-visible .bh-lightbox-knop__icoon{background:#FCFBF8; transform:scale(1.08)}
.bh-lightbox-knop__icoon svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

html.bh-lightbox-open body{overflow:hidden}
.bh-lightbox{position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; overflow:hidden; color:#FCFBF8; background:#141A16; font-family:var(--sans)}
.bh-lightbox::backdrop{background:transparent}
.bh-lightbox[open]{animation:bh-lightbox-in .28s var(--ease) both}
.bh-lightbox[open] .bh-lightbox__beeld img{animation:bh-lightbox-beeld .45s var(--ease) both}
@keyframes bh-lightbox-in{from{opacity:0}}
@keyframes bh-lightbox-beeld{from{opacity:0; transform:scale(.97)}}
.bh-lightbox__viewport{position:absolute; inset:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior:contain; scroll-snap-type:x mandatory; scrollbar-width:none; outline:none}
.bh-lightbox__viewport::-webkit-scrollbar{display:none}
.bh-lightbox__track{display:flex; height:100%}
.bh-lightbox__slide{display:flex; flex:0 0 100%; flex-direction:column; width:100%; height:100%; padding:76px 104px 36px; scroll-snap-align:start; scroll-snap-stop:always}
.bh-lightbox__beeld{position:relative; flex:1 1 auto; min-height:0}
.bh-lightbox__beeld img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; -webkit-user-select:none; user-select:none; -webkit-user-drag:none}
.bh-lightbox__beeld img[data-lightbox-src]{opacity:0}
.bh-lightbox__onderschrift{display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:4px 14px; max-width:62ch; margin:18px auto 0; font-size:1rem; line-height:1.5; text-align:center}
.bh-lightbox__meta{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#D5D4C5}
.bh-lightbox__knop{position:absolute; z-index:2; display:grid; width:48px; height:48px; padding:0; place-items:center; border:1px solid rgba(252,251,248,.34); border-radius:50%; color:#FCFBF8; background:rgba(20,26,22,.6); cursor:pointer; transition:color .25s var(--ease),background-color .25s var(--ease),border-color .25s var(--ease)}
.bh-lightbox__knop:hover{color:var(--green-deep); background:#FCFBF8; border-color:#FCFBF8}
.bh-lightbox__knop:focus-visible{outline:3px solid var(--green); outline-offset:3px}
.bh-lightbox__knop svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.bh-lightbox__sluit{top:max(16px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right))}
.bh-lightbox__pijl{top:50%; margin-top:-24px}
.bh-lightbox__pijl--vorige{left:max(24px,env(safe-area-inset-left))}
.bh-lightbox__pijl--volgende{right:max(24px,env(safe-area-inset-right))}
.bh-lightbox__status{position:absolute; top:max(28px,calc(env(safe-area-inset-top) + 12px)); left:max(24px,env(safe-area-inset-left)); margin:0; font-size:.86rem; font-weight:700; letter-spacing:.06em; font-variant-numeric:tabular-nums}
.bh-lightbox--enkel .bh-lightbox__slide{padding-inline:24px}

@media (max-width:820px){
  .bh-lightbox__slide{padding:72px 0 108px}
  .bh-lightbox--enkel .bh-lightbox__slide{padding:72px 0 40px}
  .bh-lightbox__onderschrift{padding:0 20px; font-size:.95rem}
  .bh-lightbox__pijl{top:auto; bottom:max(28px,env(safe-area-inset-bottom)); margin-top:0}
  .bh-lightbox__pijl--vorige{left:20px}
  .bh-lightbox__pijl--volgende{right:20px}
  .bh-lightbox__status{top:auto; bottom:max(40px,calc(env(safe-area-inset-bottom) + 12px)); left:50%; transform:translateX(-50%)}
}

@media (prefers-reduced-motion:reduce){
  .bh-lightbox[open],.bh-lightbox[open] .bh-lightbox__beeld img{animation:none}
  .bh-lightbox-knop__icoon,.bh-lightbox__knop{transition:none}
}

/* ---- ACCOMMODATIES ---- */
/* overflow-x:clip — zelfde reden als .split/.disco-grid hierboven: .acco-card
   wisselt reveal-left/reveal-right af en steekt zonder clip op mobiel
   buiten de viewport uit (24px overflow gemeten op 390px /reserveren/). */
.acco-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:40px; overflow-x:clip}
.acco-card{
  display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-radius:7px; overflow:hidden; box-shadow:var(--shadow-deep);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.acco-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:var(--green)}
.acco-card .acco-ph{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--green-wash)}
.acco-card .acco-ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.acco-card:hover .acco-ph img{transform:scale(1.05)}
.acco-card .acco-cap{position:absolute; top:12px; left:12px; z-index:2; font-family:var(--sans); font-weight:700; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--paper); background:rgba(46,58,49,.62); border:1px solid rgba(226,152,104,.45); border-radius:3px; padding:5px 11px; backdrop-filter:blur(2px); display:inline-flex; align-items:center; gap:7px}
.acco-card .acco-cap svg{width:14px; height:14px}
.acco-card .acco-body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.acco-card .acco-body h3{font-size:1.4rem; color:var(--ink); margin:0 0 8px}
.acco-card .acco-body p{margin:0 0 18px; color:var(--ink-soft); font-size:.94rem; flex:1}
.acco-price{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; padding-top:16px; border-top:1px solid var(--line)}
.acco-price .ap-main{font-family:var(--serif); font-weight:600; font-size:1.3rem; color:var(--green-deep); font-variant-numeric:tabular-nums}
.acco-price .ap-main span{font-family:var(--sans); font-weight:600; font-size:.82rem; color:var(--ink-soft)}
.acco-price .ap-sub{font-family:var(--sans); font-size:.84rem; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.acco-card .acco-body .btn{margin-top:18px; align-self:flex-start}
.acco-card.open-room{border-style:dashed}
.acco-card.open-room .acco-cap{background:var(--bh-action); color:var(--bh-on-accent); border-color:var(--bh-action)}

/* ============ EVENEMENTEN-OVERZICHT (Wave E punt 4) ============ */
.ev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:40px}
.ev-card{
  display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  border-radius:6px; overflow:hidden; box-shadow:var(--shadow-deep);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.ev-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:var(--green)}
.ev-card .ev-ph{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--green-wash)}
.ev-card .ev-ph .ev-date-panel{height:100%}
.ev-card .ev-ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.ev-card:hover .ev-ph img{transform:scale(1.05)}
.ev-card .ev-datum{
  position:absolute; top:12px; left:12px; z-index:2; font-family:var(--sans); font-weight:700;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--paper);
  background:rgba(46,58,49,.62); border:1px solid rgba(226,152,104,.45); border-radius:3px;
  padding:5px 11px; backdrop-filter:blur(2px);
}
.ev-card .ev-body{padding:20px 20px 22px; display:flex; flex-direction:column; flex:1}
.ev-card h3{font-size:1.22rem; color:var(--ink); margin:0 0 8px; line-height:1.16}
.ev-card .ev-body > .ev-momenten{margin:0 0 12px}
.ev-card p{margin:0 0 16px; color:var(--ink-soft); font-size:.9rem; flex:1}
.ev-card .pillar-go{font-family:var(--sans); font-weight:700; font-size:.82rem; color:var(--green-deep); display:inline-flex; align-items:center; gap:8px}
.ev-card .pillar-go .arr{transition:transform .28s var(--ease)}
/* Facebookbeeld bij een evenement (inc/evenement-beeld.php): posters en vierkante beelden
   blijven heel en staan passend op een vervaagde versie van zichzelf, in elke kaartverhouding. */
span.ev-fbbeeld{position:relative; display:block; width:100%; height:100%; overflow:hidden; background:var(--bh-creme-2)}
span.ev-fbbeeld img.ev-fbbeeld__waas{position:absolute; inset:-32px; width:calc(100% + 64px); height:calc(100% + 64px); max-width:none; object-fit:cover; filter:blur(24px) saturate(1.1); opacity:.6}
span.ev-fbbeeld img.ev-fbbeeld__img{position:relative; display:block; width:100%; height:100%; object-fit:contain}
.ev-media > span.ev-fbbeeld{height:auto; border:1px solid var(--line); border-radius:var(--bh-radius-lg)}
.ev-media > span.ev-fbbeeld img.ev-fbbeeld__img{width:auto; max-width:100%; height:auto; max-height:min(72vh, 640px); margin:0 auto}
.ev-card:hover .pillar-go .arr{transform:translateX(5px)}

.ev-beats-badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-weight:700; font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--green-bright); background:rgba(122,184,86,.16);
  border:1px solid rgba(122,184,86,.4); border-radius:var(--bh-radius-pill); padding:4px 12px; margin-bottom:14px;
}

@media (max-width:900px){
  .ev-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .ev-grid{grid-template-columns:1fr}
}
.acco-open-line{font-family:var(--sans); font-weight:700; font-size:.84rem; color:var(--green-deep); padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:8px}
.acco-open-line svg{width:18px; height:18px; flex:none}

/* ---- RESERVEER-FORMULIER ---- */
.reserveer-grid{display:grid; grid-template-columns:1fr; gap:clamp(26px,4vw,44px); margin-top:40px}
.reserveer-form{background:var(--white); border:1px solid var(--line); border-radius:7px; box-shadow:var(--shadow-deep); padding:clamp(22px,3vw,34px)}
.rf-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
/* min-width:0 (belt-and-suspenders): grid-cellen krijgen zonder dit een impliciete
   min-width:auto, waardoor een brede native input[type="date"] de kolom kan opduwen
   i.p.v. zelf te krimpen — ook in een eventuele 2-kolom-fallback. */
.rf-row{display:grid; gap:6px; min-width:0}
.rf-row.full{grid-column:1 / -1}
.reserveer-form label{font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft)}
.reserveer-form label .req{color:var(--green); margin-left:2px}
.reserveer-form input,.reserveer-form select,.reserveer-form textarea{
  font-family:var(--sans); font-size:.95rem; color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:4px; padding:12px 14px; width:100%;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.reserveer-form select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23496154' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; cursor:pointer}
/* input[type=date] heeft native appearance:auto -> computed hoogte 56px i.p.v. de
   46px van de rest (zelfde padding/border/font). appearance:none dwingt dezelfde
   box-hoogte af zodat het datumveld niet 10px hoger/scheef in de rij staat. */
.reserveer-form input[type="date"]{-webkit-appearance:none; appearance:none; height:46px; min-height:46px}
.reserveer-form input[type="date"]::-webkit-date-and-time-value{text-align:left}
.reserveer-form textarea{resize:vertical; min-height:104px}
.reserveer-form input:focus,.reserveer-form select:focus,.reserveer-form textarea:focus{outline:none; border-color:var(--bh-focus); box-shadow:0 0 0 3px var(--bh-terracotta-a40)}
.reserveer-form .rf-foot{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:22px}
.reserveer-form .rf-note{font-family:var(--sans); font-style:italic; font-size:.82rem; color:var(--ink-soft); margin:0; flex:1 1 240px}
.prijslijst{list-style:none; margin:0; padding:0; display:grid; gap:0}
.prijslijst li{display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:13px 2px; border-top:1px solid var(--line)}
.prijslijst li:last-child{border-bottom:1px solid var(--line)}
.prijslijst li b{font-family:var(--serif); font-weight:600; font-size:1.08rem; color:var(--ink)}
.prijslijst li .pl-cap{display:block; font-family:var(--sans); font-size:.8rem; font-weight:400; color:var(--ink-soft)}
.prijslijst li .pl-price{font-family:var(--sans); font-weight:700; font-size:.92rem; color:var(--green-deep); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---- TERUGKERENDE AGENDA ---- */
.recur-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:40px}
.recur-card{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:22px 22px; display:flex; gap:16px; align-items:flex-start; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
.recur-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--green)}
.recur-card .rc-ic{width:46px; height:46px; flex:none; border-radius:5px; background:var(--green-wash); color:var(--green-deep); display:grid; place-items:center}
.recur-card .rc-ic svg{width:24px; height:24px}
.recur-card h4{font-size:1.18rem; color:var(--ink); margin:0 0 3px}
.recur-card .rc-when{font-family:var(--serif); font-style:italic; color:var(--green-deep); font-size:1rem; margin:0 0 6px}
.recur-card p{margin:0; font-size:.92rem; color:var(--ink-soft)}

/* ---- VERENIGINGEN ---- */
.ver-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px}
.ver-card{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:20px 20px; transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease)}
.ver-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--green)}
.ver-card .vc-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px}
.ver-card h4{font-size:1.14rem; color:var(--ink); margin:0}
.ver-card .vc-tag{font-family:var(--sans); font-weight:700; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--green-deep); background:var(--green-wash); border-radius:2px; padding:3px 8px; white-space:nowrap; flex:none}
.ver-card p{margin:0; font-size:.9rem; color:var(--ink-soft)}
.ver-card .vc-go{margin-top:10px; font-family:var(--sans); font-weight:700; font-size:.8rem; color:var(--green-deep); display:inline-flex; align-items:center; gap:7px}
.ver-card .vc-go .arr{transition:transform .28s var(--ease)}
.ver-card:hover .vc-go .arr{transform:translateX(4px)}

/* ---- ONDERNEMERS ---- */
.onder-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px}
.onder-card{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:22px 20px; text-align:center; transition:transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease)}
.onder-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--green)}
.onder-card .oc-mark{width:48px; height:48px; margin:0 auto 12px; border-radius:50%; background:var(--green-wash); color:var(--green-deep); display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:1.25rem}
.onder-card h4{font-size:1.12rem; color:var(--ink); margin:0 0 4px}
.onder-card p{margin:0; font-size:.86rem; color:var(--ink-soft)}
.onder-card.invite{border-style:dashed; background:var(--green-wash); display:flex; flex-direction:column; justify-content:center}
.onder-card.invite .oc-mark{background:var(--bh-action); color:var(--bh-on-accent)}

/* ---- STICHTING: bestuur + zakelijke gegevens ---- */
.stichting-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,56px); align-items:start; margin-top:46px}
.bestuur{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:0}
.bestuur li{display:flex; align-items:center; gap:14px; padding:14px 2px; border-top:1px solid var(--line)}
.bestuur li:last-child{border-bottom:1px solid var(--line)}
.bestuur li .bs-mark{width:40px; height:40px; flex:none; border-radius:50%; background:var(--green-wash); color:var(--green-deep); display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:1rem}
.bestuur li b{display:block; font-family:var(--sans); font-weight:700; font-size:.98rem; color:var(--ink)}
.bestuur li span{font-size:.88rem; color:var(--ink-soft)}
.zakelijk{background:var(--white); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow-deep); padding:24px 24px}
.zakelijk h4{font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--green-deep); margin:0 0 14px}
.zakelijk dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 16px}
.zakelijk dt{font-family:var(--sans); font-weight:700; font-size:.82rem; color:var(--ink-soft)}
.zakelijk dd{margin:0; font-family:var(--sans); font-size:.9rem; color:var(--ink); font-variant-numeric:tabular-nums; text-align:right}
.zakelijk dd a{color:var(--green-deep); text-decoration:underline; text-underline-offset:2px}

/* ---- Mobiel-grid-overrides voor de DORPSPORTAAL-UITBREIDING-sectie hierboven ----
   Stonden eerder in de @media(max-width:940px)/@media(max-width:560px)-blokken
   bovenaan het bestand, maar waren daar dode code: deze base-regels staan verderop
   in het bestand met gelijke specificiteit, dus wint bronvolgorde het van de
   eerder gedeclareerde mobiel-override. Hierheen verplaatst — ná de base-regels —
   zodat ze weer werkzaam zijn. Root-cause: Scorrie computed-style-diagnose 2026-07-07. */
@media (max-width:940px){
  .read-grid{grid-template-columns:1fr; gap:30px}
  .read-aside{position:static}
  .news-lead{grid-template-columns:1fr; gap:24px}
  .news-grid{grid-template-columns:1fr}
  .news-teaser{grid-template-columns:1fr}
  .acco-grid{grid-template-columns:1fr}
  .rf-grid{grid-template-columns:1fr}
  .recur-grid{grid-template-columns:1fr}
  .ver-grid{grid-template-columns:repeat(2,1fr)}
  .onder-grid{grid-template-columns:repeat(2,1fr)}
  .stichting-grid{grid-template-columns:1fr; gap:30px}
}
@media (max-width:560px){
  .ver-grid{grid-template-columns:1fr}
  .onder-grid{grid-template-columns:1fr}
  .zakelijk dl{grid-template-columns:1fr; gap:2px 0}
  .zakelijk dd{text-align:left; margin-bottom:8px}
}

/* ============ 404 ============ */
.bh-404{padding:clamp(80px,14vw,140px) 0; text-align:center}
.bh-404 .code{font-family:var(--serif); font-weight:600; font-size:clamp(4rem,10vw,7rem); color:var(--green-deep); line-height:1; margin:0 0 10px}
.bh-404 p{color:var(--ink-soft); max-width:48ch; margin:0 auto 26px}
.bh-404 .cta-row{justify-content:center; margin-top:0}

/* ============ EVENEMENT-DETAIL (evenement-templates-taak, Webby) ============
   .ev-meta: datum/tijd/locatie/entree-rij op single-evenement.php, elk item
   alleen aanwezig in de markup als het veld gevuld is (presence-guard, geen
   losse lege cellen). .disco-grid--single: 1-koloms variant van de bestaande
   .disco-grid (page-plannen.php) voor het Bruuks Beats-sfeerblok. */
.ev-meta{display:flex; flex-wrap:wrap; gap:20px 34px; margin:0; padding:20px 24px; background:var(--white); border:1px solid var(--line); border-radius:var(--bh-radius-md); box-shadow:var(--bh-shadow-sm)}
.ev-meta__item{display:flex; flex-direction:column; gap:3px; min-width:110px}
.ev-meta__item dt{font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin:0}
.ev-meta__item dd{font-family:var(--serif); font-size:1.08rem; color:var(--green-deep); margin:0}
.disco-grid--single{grid-template-columns:1fr}

/* ============================================================================
   ITEM A (impeccable-golf, Iggy) — lidkaart, gebruikt op page-bond-voor-
   senioren.php binnen .over-grid (al bestaande 1.1fr/.9fr-grid, stackt op
   940px net als de rest van het thema). Geen equivalent prijskaart-component
   bestond nog; verder is deze pagina (en page-samen-in-de-breedeweg.php)
   volledig opgebouwd met bestaande componenten (.pagehero, .block on-paper,
   .split + logo-frame, .agenda .row, .over-grid, .prose, .contact) — copy-
   paste van de goedgekeurde impeccable-demo (_concepts/impeccable-demo-sidb-
   bond.html), geen nieuwe kleuren, alleen bestaande tokens.
   ============================================================================ */
.lidkaart{background:var(--bh-creme-2); border:1px solid var(--line); border-radius:var(--bh-radius-lg); padding:1.7rem 1.7rem 1.9rem}
.lidkaart h3{font-size:1.25rem; color:var(--green-deep); margin:0 0 .6rem}
.lidkaart .prijs{font-family:var(--serif); font-size:2rem; font-weight:800; color:var(--ink); line-height:1.1}
.lidkaart .prijs small{display:block; font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--ink-soft); margin-top:.2rem}
.lidkaart ul{margin:1rem 0 1.3rem; padding:0; list-style:none; display:grid; gap:.6rem}
.lidkaart li{position:relative; padding-left:1.7rem; font-size:1.05rem; color:var(--ink)}
.lidkaart li .vink{position:absolute; left:0; top:.05rem; color:var(--green); font-weight:800}
@media (max-width:640px){ .lidkaart{padding:1.4rem 1.4rem 1.6rem} }

/* ============================================================================
   ITEM A REVISIE-RONDE 2 (Iggy) — .activiteit-grid/-card: "Vaste activiteiten"
   op page-samen-in-de-breedeweg.php + page-bond-voor-senioren.php, was een kale
   .agenda .row-lijst, nu een kaart-/grid-layout met afbeelding. Structuur 1-op-1
   naar het bewezen .ev-card-patroon (page-evenementen.php, §EVENEMENTEN-OVERZICHT
   hierboven) voor visuele consistentie, maar eigen classnamen omdat dit geen
   evenementen zijn (geen CPT/permalink — daarom <article> i.p.v. <a>). De
   .activiteit-ph toont nu een CSS-only "Foto komt nog"-placeholder (geen media-
   generatie hier, dat is Arty's domein); echte SCF-veld-wiring voor eigen
   foto-upload is een losse follow-up, hier alleen de layout.
   ============================================================================ */
.activiteit-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
.activiteit-card{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:var(--shadow-deep); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
.activiteit-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--green)}
.activiteit-card .activiteit-ph{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--green-wash); display:grid; place-items:center}
.activiteit-card .activiteit-ph-label{font-family:var(--sans); font-weight:700; font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--green-deep); opacity:.55}
.activiteit-card .activiteit-when{position:absolute; top:12px; left:12px; z-index:2; font-family:var(--sans); font-weight:700; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--paper); background:rgba(46,58,49,.62); border:1px solid rgba(226,152,104,.45); border-radius:3px; padding:5px 11px; backdrop-filter:blur(2px)}
.activiteit-card .activiteit-body{padding:20px 20px 22px; display:flex; flex-direction:column; flex:1}
.activiteit-card h3{font-size:1.14rem; color:var(--ink); margin:0 0 6px}
.activiteit-card p{margin:0 0 14px; color:var(--ink-soft); font-size:.9rem; flex:1}
.activiteit-card .activiteit-tag{align-self:flex-start; font-family:var(--sans); font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-deep); border:1px solid var(--line); border-radius:2px; padding:5px 9px; white-space:nowrap}
@media (max-width:900px){
  .activiteit-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .activiteit-grid{grid-template-columns:1fr}
}