/* ==========================================================================
   BOUWSTEEN tokens — de gedeelde bodem onder alle andere bouwstenen
   --------------------------------------------------------------------------
   Wat het is : lettertypen, kleuren, maten (--zij, --sectie, --kophoogte,
                --kaart, --gap), de basisopmaak van body/h1-h4/p/ul/img, het
                omhulsel (max-breedte + zijmarge), de sectie-achtergronden
                (.blok--donker / .blok--creme / .blok--creme2), de knoppen en
                het hulpje .blokfoto (foto op volle breedte).
   Velden     : geen.  Varianten: geen.
   Mobiel     : 15 px zijmarge, 48 px sectie-padding, kop 60 px hoog.
   Bureaublad : vanaf 1024 px dezelfde maten als de oude homepage (gemeten op
                1440 en 1920 px): omhulsel 1500 px inhoud + 15 px zijmarge, h2 65 px,
                kaarttitel 40 px, kaartafstand 30 px; 150 px sectie-padding, kop 124 px
                (bovenbalk 40 + rubriekenbalk 84, zie blok-kop).
                (Bart 3 sep 20:00: "komt niet overeen met de oude homepage qua
                afmetingen" — variant D (1280/52/32) is daarom teruggedraaid.)
   Paginagrond: het donkere zeshoekenpatroon van de oude site staat op
                html,body (tegel full-bg-aef51b.svg, gecentreerd; onder
                1024 px op 1200 px breed, daarboven 'auto' = zo breed als
                het venster — exact de regels van het oude thema). Donkere
                blokken (.blok--donker) zijn DOORZICHTIG zodat het patroon
                doorloopt. De tegel gaat pas aan met de klasse html.patroon,
                die src/gedrag/patroon.js na 'load' zet — ELKE pagina met
                .blok--donker moet het fragment gedrag/patroon invoegen, anders
                blijft de grond effen #191919.
                NOOIT een patroon per blok zetten: elke tegel
                begint dan bij de bovenrand van dat blok opnieuw en op de
                naad tussen twee donkere blokken zie je de tegelrand.
   VERPLICHT  : dit bestand komt ALTIJD als eerste; elke andere bouwsteen
                rekent op deze variabelen.
   ========================================================================== */
/* ==== Nieuwe homepage — eigen opmaak, geen thema-CSS  */
@font-face { font-family:"Merriweather"; font-weight:400; font-style:normal; font-display:swap; src:url(/assets/fonts/Merriweather-Regular-faec15.woff2) format('woff2') }
@font-face { font-family:"Merriweather"; font-weight:700; font-style:normal; font-display:swap; src:url(/assets/fonts/Merriweather-Bold-24dc07.woff2) format('woff2') }
@font-face { font-family:"Agenda"; font-weight:300; font-style:normal; font-display:swap; src:url(/assets/fonts/Agenda-Light-925313.woff2) format('woff2') }
@font-face { font-family:"Agenda"; font-weight:400; font-style:normal; font-display:swap; src:url(/assets/fonts/Agenda-Regular-6afa45.woff2) format('woff2') }
@font-face { font-family:"Agenda"; font-weight:700; font-style:normal; font-display:swap; src:url(/assets/fonts/Agenda-Bold-ebd72c.woff2) format('woff2') }

:root {
  --goud:#c89b4f; --goud-op:#a87a28;
  --donker:#191919; --donker-2:#232323;
  --creme:#fffbf2; --creme-2:#fbf6e9;
  --groen:#357358;
  --tekst:#191919; --tekst-om:#5d574c;
  --licht:#f4f1ea; --licht-om:#c9c3b6;
  --rand:#e6dcc8;
  --kop:"Merriweather",Georgia,"Times New Roman",serif;
  --txt:"Agenda","Helvetica Neue",Helvetica,Arial,sans-serif;
  --zij:15px; --sectie:48px; --kophoogte:60px;
  --kaart:min(360px,calc(100vw - 30px));
  --gap:15px;
}

*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
html,body { background:var(--donker) }
/* De tegel komt pas ná 'load' (gedrag/patroon.js zet html.patroon). Zonder die omweg ligt de
   SVG (27 KB) in het eerste scherm en haalt de browser hem met hoge prioriteit op, vóór de
   herofoto: LCP +0,3 s, Lighthouse 96 -> 94. In het eerste scherm is het patroon toch niet
   te zien (kop + hero vullen het), dus niemand mist hem. */
html.patroon,html.patroon body { background-image:url(/assets/img/full-bg-aef51b.svg); background-repeat:repeat; background-position:center center; background-size:1200px }
body { margin:0; color:var(--tekst); font-family:var(--txt); font-size:17px; line-height:1.6; font-weight:400 }
img { max-width:100%; height:auto; display:block }
a { color:inherit }
h1,h2,h3,h4 { font-family:var(--kop); font-weight:700; margin:0; line-height:1.2 }
p { margin:0 }
ul { margin:0; padding:0; list-style:none }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer }
:focus-visible { outline:3px solid var(--goud); outline-offset:2px }

.omhulsel { max-width:1200px; margin:0 auto; padding:0 var(--zij) }
.blok { padding:var(--sectie) 0 }
.blok--donker { background:transparent; color:var(--licht) } /* doorzichtig: het patroon staat op html,body */
.blok--donker h2,.blok--donker h3 { color:#fff }
.blok--donker .kaart h3 { color:var(--tekst) }
.blok--creme { background:var(--creme) }
.blok--creme2 { background:var(--creme-2) }
h2.kop { font-size:36px; margin-bottom:20px }
.blok--donker .accent { color:var(--goud) }
.accent-groen { color:var(--groen) }
.accent-goud { color:var(--goud) }
.lood { margin-bottom:20px }
.citaat { font-family:var(--kop); font-style:italic; font-size:19px; margin-bottom:18px }

/* knoppen */
.knop { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:11px 26px;
  font-family:var(--kop); font-weight:700; font-size:16px; text-decoration:none; text-align:center; border:2px solid var(--goud); transition:background .18s,color .18s }
.knop--vol { background:var(--goud); border-color:var(--goud); color:#fff }
.knop--vol:hover { background:var(--goud-op); border-color:var(--goud-op) }
.knop--hol { background:transparent; color:var(--goud) }
.knop--hol:hover { background:var(--goud); color:#fff }
.knop--breed { width:100% }

/* gedeeld hulpje: foto op volle breedte (vlak-fotorij, tweekolom) */
.blokfoto { aspect-ratio:16/9; width:100%; object-fit:cover; margin-bottom:20px }
.rij__spoor > .blokfoto { width:var(--kaart); margin-bottom:0 }

@media (min-width:768px) {
  :root { --kaart:calc((min(100vw,1200px) - var(--zij) * 2 - var(--gap)) / 2) }
}

@media (min-width:1024px) {
  /* -- basis: volle-breedte-omhulsel, typografie, knoppen  */
  /* maten van de oude homepage: 15 px zijmarge, inhoud maximaal 1500 px (op 1440 px
     dus 1410 breed, op 1920 px 1500 met 210 px marge — precies zoals oud) */
  :root { --zij:15px; --sectie:150px; --kophoogte:124px; --gap:30px;
          --kaart:calc((100% - var(--gap) * 2) / 3) }
  html.patroon,html.patroon body { background-size:auto } /* tegel = vensterbreedte, zoals het oude thema boven 1024 px */
  body { font-size:18px; color:var(--licht) }
  .omhulsel { max-width:1530px; padding:0 var(--zij) } /* 1500 inhoud + 2 × 15, zoals oud */
  h2.kop { font-size:65px; line-height:1.24; margin-bottom:29px }
  .lood { margin-bottom:24px }
  .citaat { font-size:20px }
  .knop { min-height:55px; padding:14px 17px; font-size:17px; border-width:1px }
  .knop--breed { width:auto }
}

@media (min-width:1024px) and (max-width:1279px) {
  h2.kop { font-size:48px }
}