:root{
  --nacht:#13211c; --nacht-diep:#0b1511; --nacht-zacht:#1d322a;
  --amber:#c0822e; --amber-licht:#e0a85d; --amber-diep:#8a5c18;
  --klei:#a8432c;
  --room:#faf5ec; --room-diep:#f2e9da; --room-warm:#ebdcc4;
  --lijn:#ddcfb6;
  --inkt:#22201a; --grijs:#6b6153;
  --sans:"Karla",ui-sans-serif,system-ui,sans-serif;
  --display:"Fraunces",ui-serif,Georgia,serif;
  --breed:1180px; --leesbreed:66ch;
}
*,*::before,*::after{box-sizing:border-box}
/* scroll-padding-top omdat de kop blijft staan: zonder dit landt een menulink
   met de kop van de sectie onder die balk, en dat zag je op een laptop al
   (de kop is daar sinds het begin sticky). Op een telefoon is de balk hoger,
   want de naam staat daar over twee of drie regels. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
/* Drie waarden omdat de kop drie hoogtes heeft, alle drie nagemeten: 74px boven
   1180, 83px daaronder (daar breekt de naam over twee regels) en 62 tot 87 op
   een telefoon. meet.mjs legt deze waarde tegen de echte hoogte.
   De eerste waarde ging op 09-10-2026 van 4,5 naar 5rem: het embleem maakte de
   kop daar 22px hoger dan de balk waar deze afstand omheen gerekend was, en een
   menulink zette de sectiekop daardoor onder de balk. Dat is precies waarvoor
   die meting in meet.mjs zit. */
@media (max-width:1180px) and (min-width:901px){html{scroll-padding-top:6.2rem}}
@media (max-width:900px){html{scroll-padding-top:6.5rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--room);color:var(--inkt);
  font-family:var(--sans);font-size:clamp(1rem,.96rem + .2vw,1.09rem);line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;margin:0;
  font-variation-settings:"SOFT" 0,"WONK" 0}
em{font-style:italic}
.wrap{width:min(100% - 2.5rem,var(--breed));margin-inline:auto}
@media (max-width:420px){.wrap{width:min(100% - 1.75rem,var(--breed))}}

/* ------------------------------------------------------------- overslaan */
.overslaan{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--nacht);color:var(--room);padding:.7rem 1.1rem;border-radius:0 0 .4rem 0}
.overslaan:focus{left:0}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* ---------------------------------------------------------------- header */
.kop{position:sticky;top:0;z-index:50;background:var(--nacht);color:var(--room)}
.kop__in{display:flex;align-items:center;gap:1rem;flex-wrap:nowrap;padding:.7rem 0}
/* De kop droeg tot 08-10-2026 "CDLF" groot met de naam klein ernaast. De klant
   wil de naam uit de akte en niet de afkorting, en dat is geen tekstwissel maar
   een ander merk: 49 tekens waar 4 stonden. Daarom staat de naam hier niet op
   nowrap maar mag hij breken - een wordmark die niet mag breken bepaalt de
   smalste maat van de pagina (zie playground/CLAUDE.md), en bij deze lengte zou
   dat een pagina van 500 breed opleveren. Twee regels in de kop is hier dus geen
   nood maar de bedoeling; de maten hieronder zijn nagemeten met meet.mjs. */
.merk{font-family:var(--display);font-size:1.05rem;line-height:1.2;letter-spacing:.01em;
  color:var(--room);text-decoration:none;flex:0 1 auto;min-width:0;
  display:flex;align-items:center;gap:.6rem}
.merk__naam{min-width:0;overflow-wrap:break-word;text-wrap:balance}
.merk:hover,.merk:focus-visible{color:var(--amber-licht)}
@media (min-width:1240px){.merk{font-size:1.25rem}}
/* Tussen het omslagpunt en 1180 past de naam niet op een regel naast zes links:
   dan twee regels in plaats van een rij die overloopt. Dit was 21ch naast vijf
   links; met de galerijlink erbij moet de naam smaller. */
@media (max-width:1180px) and (min-width:901px){.merk__naam{max-width:17ch}}
@media (max-width:1239px) and (min-width:901px){.nav{gap:.75rem}.nav a{font-size:.8rem}}

/* Het embleem op een romen schijf, en dat is geen versiering.
   Het aangeleverde logo is getekend voor een witte achtergrond: de drie figuren
   hebben een witte contour en de landmassa's in de bol zijn wit. Zet je dat
   rechtstreeks op het donkergroen van de kop, dan zweven die witte vlakken los
   in het donker en verdwijnt de donkere buitenrand van de bol in de
   achtergrond - nagemeten met het oog, zie werk/kop-proef.png. Op een lichte
   schijf leest hetzelfde embleem op 40px nog als merk.
   De schijf is iets ruimer dan de tekening (padding), zodat de zonnestralen
   rechtsboven er net overheen steken in plaats van tegen de rand te eindigen. */
.merk__beeld{flex:0 0 auto;width:52px;height:52px;padding:5px;
  background:var(--room);border-radius:50%}
@media (max-width:1099px){.merk__beeld{width:46px;height:46px;padding:4px}}
.nav{display:flex;align-items:center;flex-wrap:nowrap;gap:.95rem;margin-left:auto;order:2}
.nav a{font-size:.85rem;text-decoration:none;color:#d8cfbd;padding:.2rem 0;white-space:nowrap;
  border-bottom:1px solid transparent}
.nav a:hover,.nav a:focus-visible{color:var(--room);border-bottom-color:var(--amber)}
.taalkeus{display:flex;gap:.4rem;align-items:center;font-size:.8rem;order:3;flex:0 0 auto}
.taalkeus a{text-decoration:none;color:#d8cfbd;padding:.1rem .4rem;border-radius:.2rem}
.taalkeus a[aria-current]{background:var(--amber);color:var(--nacht-diep);font-weight:700}

/* De menuknop bestaat alleen op een telefoon en alleen als er js is. Hij staat
   hier op display:none en wordt daar aangezet; zo kan hij nooit naast een rij
   links staan die al zichtbaar is. */
.menu__knop{display:none}

/* ------------------------------------------------- de kop op een telefoon
   Dit is de derde vorm op 08-10-2026 en de reden staat in de klacht: het menu
   was "niet mobielvriendelijk". Vorm 1 (zes links die naar twee regels vouwden
   met de taalkeuze op een derde) las als kapot werk. Vorm 2 was een eigen regel
   onder de naam, en die PASTE - nagemeten vanaf 320 - maar paste is niet
   vriendelijk: vijf grijze links van 12,5px op een rij van 292px breed, met
   raakvlakken van 24x26px, en de hele balk scrollde met de pagina weg zodat je
   halverwege het stuk geen menu meer had. Nagemeten voor de verbouwing.
   Vorm 3 is de gewone telefoonvorm: een knop van 44px die een paneel opent met
   rijen van 48px in leesbare letters, en de balk blijft nu staan zodat het menu
   overal op de pagina binnen bereik is. De links zelf zijn ongemoeid - het
   paneel is hoe je ze aanraakt, niet wat erin staat.
   De grens stond tot 10-10-2026 op 760 en loopt sinds de galerijlink mee met
   MENU_BREEK in inhoud.mjs: zes links naast deze naam passen op 768 niet meer op
   een regel, en dan is de rij weer de kop die hierboven is afgekeurd. */
@media (max-width:900px){
  .kop__in{flex-wrap:wrap;gap:.2rem .7rem;padding:.55rem 0;align-items:center}
  /* flex-basis 0 in plaats van auto: de naam is langer dan een telefoonregel, en
     met auto duwt hij de taalkeuze naar een eigen regel eronder. Nu krimpt de
     naam tot wat er naast de taalkeuze en de knop over is en breekt hij
     daarbinnen over twee of drie regels. Dat de naam breekt is de bedoeling,
     zie de kanttekening bij .merk. */
  /* De naam is hier .9rem en niet .95, en dat is geen smaakkwestie: het embleem
     neemt 36+7px van de regel af en bij .95 kostte dat op 360 een vierde regel
     naam, waarmee de kop van 72 naar 109px ging. Een balk die blijft staan en
     een derde van een telefoonscherm vult is erger dan een naam die iets
     kleiner staat. Nagemeten op 320/340/360/390/420: 82/66/87/69/69px. */
  .merk{flex:1 1 0;font-size:.9rem;gap:.45rem}
  .merk__beeld{width:36px;height:36px;padding:3px}
  .taalkeus{margin-left:auto;font-size:.82rem}
  .taalkeus a{padding:.45rem .5rem}

  html.js .menu__knop{display:inline-flex;align-items:center;gap:.45rem;order:4;
    min-height:44px;min-width:44px;padding:0 .7rem;background:none;cursor:pointer;
    border:1px solid rgba(216,207,189,.3);border-radius:.4rem;
    color:#e4dcce;font:inherit;font-size:.82rem;line-height:1}
  html.js .menu__knop:hover,html.js .menu__knop:focus-visible{border-color:var(--amber);color:var(--room)}
  /* Drie streepjes, en het middelste verdwijnt als het paneel open staat, zodat
     de knop ook zonder het woord ernaast laat zien in welke stand hij staat. */
  html.js .menu__balk{position:relative;display:block;width:17px;height:1.5px;
    background:currentColor;border-radius:2px}
  html.js .menu__balk::before,html.js .menu__balk::after{content:"";position:absolute;left:0;
    width:17px;height:1.5px;background:currentColor;border-radius:2px}
  html.js .menu__balk::before{top:-5.5px}
  html.js .menu__balk::after{top:5.5px}
  html.js .kop--open .menu__balk{background:transparent}
  html.js .kop--open .menu__balk::before{top:0;transform:rotate(45deg)}
  html.js .kop--open .menu__balk::after{top:0;transform:rotate(-45deg)}

  /* Het paneel hangt onder de balk in plaats van de pagina naar beneden te
     duwen: .kop is sticky en dus zelf het anker voor deze absolute positie.
     De randen worden nagemeten (meet.mjs), want een zwevend paneel hangt zo
     over de rand van het scherm - zie de regel daarover in playground/CLAUDE.md. */
  html.js .nav{display:none}
  html.js .kop--open .nav{display:flex}
  html.js .kop .nav{position:absolute;left:0;right:0;top:100%;z-index:49;
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    background:var(--nacht);border-top:1px solid rgba(216,207,189,.17);
    box-shadow:0 14px 28px rgba(0,0,0,.4)}
  html.js .kop .nav a{font-size:1rem;padding:.9rem 1.25rem;min-height:48px;
    display:flex;align-items:center;white-space:normal;border-bottom:none;
    border-top:1px solid rgba(216,207,189,.1)}
  html.js .kop .nav a:first-child{border-top:none}
  html.js .kop .nav a:hover,html.js .kop .nav a:focus-visible{background:var(--nacht-zacht);color:var(--room)}

  /* Zonder js blijft de rij van hiervoor staan: die paste gemeten vanaf 320, en
     een bezoeker zonder js hoort niet met een knop te zitten die niets doet.
     overflow-x hoort erbij - met de systeemletter is de rij breder dan met
     Fraunces, en dat verschil loopt liever in het menu weg dan in de pagina. */
  html:not(.js) .nav{order:4;flex:1 0 100%;margin:.4rem 0 0;justify-content:space-between;
    gap:.7rem;border-top:1px solid rgba(216,207,189,.17);padding:.5rem 0;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  html:not(.js) .nav::-webkit-scrollbar{display:none}
  html:not(.js) .nav a{font-size:.78rem}
}
@media (max-width:420px){
  html.js .kop .nav a{padding-inline:.875rem}   /* zelfde kantlijn als .wrap */
}
@media (max-width:359px){
  html:not(.js) .nav{gap:.45rem}
  html:not(.js) .nav a{font-size:.72rem}
  /* Op 320 kostte het woord "Menu" de naam een vierde regel: de kop was daar
     91px en op 360 maar 72. De knop is hier dus alleen de drie streepjes, met
     het woord weg maar het aria-label eronder, en blijft 44x44. */
  html.js .menu__knop{padding:0;width:44px;justify-content:center}
  html.js .menu__knop span:not(.menu__balk){position:absolute;left:-9999px}
  /* Op 320 is elke pixel naast de naam een extra regel eronder. Het embleem
     blijft staan - het is het merk, niet een plaatje - maar krimpt naar 32 en
     schuift dichter tegen de naam aan. */
  .merk{gap:.4rem;font-size:.84rem}
  .merk__beeld{width:32px;height:32px;padding:2px}
}

/* ------------------------------------------------------------------ hero */
/* De hero was tot 08-10-2026 een tekstkolom in een verder leeg donker vlak: op
   een laptop stond alles in de linkerhelft en was de rechterhelft 600px niets.
   De klant noemde dat lelijk en had gelijk. De foto van het bestuur stond toen
   verderop naast een lijstje van drie namen, waar hij een kolom van 280px leeg
   liet. Een foto, twee gaten; nu staat hij in de hero en zijn beide weg. */
.hero{background:var(--nacht);color:var(--room);
  padding:clamp(2.6rem,7vw,5rem) 0 clamp(2.8rem,6vw,4.5rem);
  background-image:radial-gradient(70rem 40rem at 82% 12%,#1d322a 0%,rgba(29,50,42,0) 62%)}
.hero__in{display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center}
@media (min-width:900px){.hero__in{grid-template-columns:1.08fr .72fr}}
.hero .knoppen{margin-bottom:0}
.hero__beeld{margin:0}
/* Bijsnijden mag hier: dit is een kiekje op de stoep en geen foto die iemand
   gemaakt heeft om te laten zien. Staand naast de tekst, liggend eronder -
   anders is een portretfoto op volle telefoonbreedte 1,5 scherm hoog en moet je
   langs het bestuur heen scrollen om bij de eerste zin te komen. 28% vanaf
   boven houdt de drie gezichten in beeld in allebei de uitsnedes (nagemeten,
   zie meet.mjs). Op 09-10-2026 verving de klant de foto door een andere opname
   van hetzelfde drietal op dezelfde stoep, dichterbij genomen; de uitsnede is
   toen opnieuw bekeken op 390 en 1280 (kijk-heel.mjs) en 28% klopt nog. Komt er
   ooit een foto met een andere compositie, dan is dit het getal dat mee moet. */
.hero__beeld img{width:100%;border-radius:.9rem;aspect-ratio:4/3;object-fit:cover;
  object-position:50% 28%;border:1px solid #2b473c}
@media (min-width:900px){.hero__beeld img{aspect-ratio:3/4}}
.hero__bij{display:block;margin-top:.65rem;font-size:.8rem;color:#9aa89f}
/* hyphens/overflow-wrap omdat "Rechtvaardigheid," in de systeemletter breder is
   dan een scherm van 320: de pagina was daardoor opzij te slepen zolang de
   webfont nog onderweg was, en dat is precies het moment dat een bezoeker op een
   trage verbinding het langst ziet. Met Fraunces past het wel, dus deze twee
   regels doen normaal niets. Gevonden met kop-zonder-font.mjs. */
/* Kleiner dan de 4,1rem van voor de foto: de tekst heeft vanaf 900 nog maar 60%
   van de breedte, en op precies 900 was "Rechtvaardigheid," bij de oude schaal
   breder dan zijn eigen kolom. */
.hero h1{font-size:clamp(2.1rem,1.1rem + 3.4vw,3.4rem);max-width:19ch;color:var(--room);
  overflow-wrap:break-word}
/* Afbreken alleen waar het moet, en 700px was te ruim: op een telefoon van 390
   past "Rechtvaardigheid," gewoon, en toch brak de kop daar midden in
   "erkenning" omdat hyphens:auto aanstond. Dat is dezelfde zetfout in de eerste
   zin van de stichting die hierboven op een laptop al gerepareerd was, alleen
   dan op het apparaat waar de meeste mensen hem zien. Nodig is het alleen onder
   de 360, en alleen zolang de systeemletter er staat: daar is
   "Rechtvaardigheid," breder dan het scherm. overflow-wrap hierboven blijft het
   vangnet als het er ondanks dat nog niet in past. */
@media (max-width:359px){.hero h1{hyphens:auto}}
.hero h1 em{display:block;color:var(--amber-licht)}
.hero__lead{max-width:56ch;margin:1.5rem 0 0;color:#ddd5c6;font-size:clamp(1rem,.95rem + .35vw,1.2rem)}
.knoppen{display:flex;flex-wrap:wrap;gap:.75rem;margin:2rem 0 clamp(2.4rem,6vw,3.6rem)}
.knop{display:inline-block;padding:.78rem 1.4rem;border-radius:2rem;text-decoration:none;
  font-weight:700;font-size:.92rem;border:2px solid transparent;
  white-space:normal;overflow-wrap:anywhere;text-align:center}
.knop--vol{background:var(--amber);color:var(--nacht-diep)}
.knop--vol:hover{background:var(--amber-licht)}
.knop--rand{border-color:#5b6b62;color:var(--room)}
.knop--rand:hover{border-color:var(--amber);color:var(--amber-licht)}

/* ----------------------------------------------------------------- vlak */
.vlak{padding:clamp(3rem,7vw,5.5rem) 0}
.vlak--room{background:var(--room)}
.vlak--diep{background:var(--room-diep)}
.vlak--nacht{background:var(--nacht);color:var(--room)}
.vlak--krap{padding:clamp(2.2rem,4vw,3rem) 0}
.vlak--nacht h2{color:var(--room)}
/* h1 staat erbij sinds de galerijpagina. Daar is de sectiekop de kop van de
   pagina en dus een h1; de maat is dezelfde, want hij staat op dezelfde plek. */
.vlak h2,.vlak h1{font-size:clamp(1.65rem,1.2rem + 1.8vw,2.5rem);max-width:22ch}
.streep{width:3rem;height:3px;background:var(--amber);margin:0 0 1.5rem;border:0}

/* ----------------------------------------------------------------- doel */
/* Dezelfde vorm als .kaart en .leden li: streep erboven, geen doos. Drie
   verschillende manieren om een blok te markeren op een pagina van vijf
   secties is geen systeem maar drie keer iets bedenken. */
.doel{display:grid;gap:2.2rem;margin-top:2.4rem}
@media (min-width:760px){.doel{grid-template-columns:repeat(2,1fr);gap:2.2rem 2.6rem}}
.doel__blok{border-top:3px solid var(--amber);padding:1.1rem 0 0}
.doel__blok h3{font-size:1.25rem;margin-bottom:.6rem}
.doel__blok p{margin:0;color:var(--grijs)}

/* ----------------------------------------------------------------- werk */
.raster{display:grid;gap:2.2rem;margin-top:2.4rem}
@media (min-width:760px){.raster--3{grid-template-columns:repeat(3,1fr);gap:2.4rem 2.6rem}}
/* Zes gelijke dozen met een nummer erin (01 t/m 06) lazen als een sjabloon, en
   de nummers suggereerden bovendien een volgorde die de akte niet geeft. Nu een
   streep boven elk blok en verder niets: zelfde raster, geen dozen. */
.kaart{padding:1.1rem 0 0;border-top:3px solid var(--amber);display:flex;flex-direction:column}
.kaart h3{font-size:1.2rem;margin-bottom:.6rem}
.kaart p{margin:0;color:var(--grijs);font-size:.96rem}

/* --------------------------------------------------------------- bestuur */
/* Drie namen naast elkaar. Ze stonden tot 08-10-2026 als een smalle kolom
   dozen naast de groepsfoto, en omdat drie regels tekst korter zijn dan een
   staande foto bleef daar een kolom van 280px leeg. De foto staat nu in de
   hero; wat hier overblijft is een rij van drie gelijke kaarten. */
.leden{list-style:none;padding:0;margin:2.4rem 0 0;display:grid;gap:1.5rem}
@media (min-width:760px){.leden--rij{grid-template-columns:repeat(3,1fr)}}
.leden li{border-top:3px solid var(--amber);padding:1rem .2rem 0}
.leden b{display:block;font-weight:700;font-size:1.02rem;overflow-wrap:anywhere}
/* De functie staat onder de naam en niet erboven. Een kapitalenlabel boven een
   naam leest als een opschrift op een congresbadge; de klant wees het af op
   08-10-2026. Zelfde reden voor .gegevens div hieronder. */
.leden span{display:block;margin-top:.15rem;font-size:.9rem;color:var(--grijs)}

/* --------------------------------------------------------------- galerij
   Kolommen en geen raster, en dat is een keuze over het materiaal: de elf foto's
   lopen van 1,5 breed tot 0,56 hoog, en in een raster bepaalt de hoogste foto de
   hoogte van zijn hele rij. Dan staat er onder een liggende foto een gat van
   400px. Met kolommen schuift elke foto onder zijn voorganger aan.
   Bijsnijden naar een gelijk vak was het alternatief en is hier niet gedaan: op
   de helft van deze foto's zou de kop of het ontwerp zelf dan buiten beeld
   vallen. Wat er wel gesneden is, is in galerij.py gedaan en met een reden. */
.galerij{columns:1;column-gap:1.6rem;margin-top:2.4rem}
@media (min-width:620px){.galerij{columns:2}}
@media (min-width:1000px){.galerij{columns:3;column-gap:1.8rem}}
/* break-inside EN page-break-inside: oudere WebKit kent alleen de tweede, en een
   foto die midden in een kolom doorbreekt is twee halve foto's. */
.galerij figure{break-inside:avoid;page-break-inside:avoid;margin:0 0 1.6rem}
.galerij img{width:100%;border-radius:.6rem;border:1px solid var(--lijn);
  background:var(--room-diep)}
.galerij figcaption{margin:.55rem 0 0;font-size:.85rem;color:var(--grijs)}

/* ----------------------------------------------------------------- steun */
.steun__tekst{max-width:var(--leesbreed);margin:1.3rem 0 2rem;color:#ddd5c6}
/* De ANBI-regels. Zelfde vorm als de blokken elders op de site: een streep
   erboven, geen doos. Kleiner en grijzer dan de lopende tekst, want dit is de
   stand van zaken en geen pleidooi - maar niet zo grijs dat het wegvalt, want
   de middelste zin is er een die iemand echt moet lezen. */
.anbi{max-width:var(--leesbreed);margin:2.6rem 0 0;padding:1rem 0 0;
  border-top:3px solid var(--amber)}
.anbi__label{font-size:.9rem;color:var(--grijs)}
.anbi p{margin:.35rem 0 0;font-size:.95rem;color:#ddd5c6}

/* --------------------------------------------------------------- contact */
.gegevens{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:.9rem}
@media (min-width:620px){.gegevens{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}}
.gegevens div{font-size:.9rem;color:var(--grijs)}
.gegevens b{font-weight:700;font-size:1.02rem;overflow-wrap:anywhere}
.gegevens a{text-decoration-thickness:1px;text-underline-offset:3px}
.contact__volgt{margin:1.6rem 0 0;color:var(--grijs);font-style:italic}

/* ------------------------------------------------------------------ voet */
.voet{background:var(--nacht-diep);color:#a89f8f;padding:2.4rem 0;font-size:.84rem}
/* center en niet baseline sinds het embleem in deze rij staat: op baseline hangt
   de schijf onder de tekstregel in plaats van ernaast. Voor de tekst onderling
   maakt het niets uit, die staat allemaal op dezelfde grootte. */
.voet__in{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center}
.voet b{color:var(--room);font-weight:600}
/* Hier staat het embleem op de maat waarop het echt te lezen is. In de kop moet
   het klein omdat die balk blijft staan; de voet heeft de ruimte, en dit is de
   enige plek op de site waar je de drie figuren en de eilanden kunt zien.
   De rij lijnt daarom op center uit, zie de kanttekening bij .voet__in. */
.voet__merk{flex:0 0 auto;width:72px;height:72px;padding:6px;
  background:var(--room);border-radius:50%}
@media (max-width:520px){.voet__merk{width:60px;height:60px;padding:5px}}