/* Zaal Toon — laag 2: chrome, hero, kaarten, secties, alle pagina's, responsive.
   Overgezet uit output/live/stijl.css (element 0.10/0.11).
   ⚠ De CSS is één bestand op twee plaatsen (plan.md): wijzig je hier iets,
   pas het dan ook aan in output/live/stijl.css, en omgekeerd. */

  .wrap { max-width: var(--kolom); margin-inline: auto; padding-inline: 1.75rem; }

  /* ---------- Knoppen. Crème op feestrood haalt 4,02, dus tekst 19px/800. ---------- */

  /* Tekst blijft 19px/800: creme op feestrood haalt 4,02 en dat is alleen AA
     vanaf 18,66 px bold. Kleiner maken doe je met padding, niet met de letter. */
  .knop {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1.375rem;
    border-radius: var(--pil);
    font-family: "Manrope", sans-serif;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    border: 2px solid transparent;
    white-space: nowrap;
  }
  .knop--primair { background: var(--rood); color: var(--creme-op); }
  .knop--primair:hover { background: var(--rood-op); }
  /* Tweede knop in toongroen in plaats van inkt. Zwart bij een prijzenknop
     leest als een waarschuwing. Creme op toongroen haalt 4,60, dus elke maat mag. */
  .knop--tweede  { background: transparent; color: var(--groen); border-color: var(--groen); }
  .knop--tweede:hover { background: var(--groen); color: var(--creme-op); }
  /* Gevulde rode kopknop, kleiner dan de hero-knop. Het rood is een tint
     dieper dan feestrood: creme op #E03E1A haalt 4,24 en mag pas vanaf 19 px
     vet, op #D53817 haalt het 4,69 en mag de tekst naar 16 px. */
  .knop--kop { background: #D53817; color: var(--creme-op); font-size: 16px; padding: .5rem 1.25rem; }
  .knop--kop:hover { background: var(--rood-op); }

  /* Tweede actie als tekstlink. Twee omkaderde knoppen naast elkaar vechten. */
  .tekstlink {
    display: inline-flex; align-items: center; gap: .4rem;
    font-weight: 800; font-size: 1.0625rem; color: var(--inkt);
    text-decoration: none; border-bottom: 2px solid var(--zand); padding-bottom: 2px;
  }
  .tekstlink:hover { border-bottom-color: var(--rood); color: var(--rood-op); }

  /* Iconen in knoppen en tekstlinks. Lijnstijl volgens het brandbook. */
  .knop .ico { width: 20px; height: 20px; flex: none; }
  .knop--kop { gap: .4rem; }
  .knop--kop .ico { width: 17px; height: 17px; }

  /* De kopbalk liep op smalle schermen buiten beeld: logo, tekstknop en
     menuknop passen samen niet onder de 480 px. Eerst krimpt de padding,
     daarna valt het label weg en blijft een rond knopje met de kalender. */
  @media (max-width: 34rem) {
    .knop--kop { padding: .5rem .75rem; }
    .balk__rechts { gap: .375rem; }
  }
  @media (max-width: 26rem) {
    .knop--kop { padding: .625rem; border-radius: 50%; }
    .knop__label {
      position: absolute; width: 1px; height: 1px;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
  }
  .tekstlink .ico { width: 19px; height: 19px; display: block; }

  /* ---------- Badge ---------- */

  /* Status, geen knop. Knoppen zijn hier rood met 19 px vette tekst.
     Dit is klein, met spatiering en een stip ervoor. */
  .badge {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--inkt);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 0;
    background: none;
  }
  .badge::before {
    content: ""; width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--groen); flex: none;
    box-shadow: 0 0 0 3px rgba(27,127,99,.28);
  }

  /* ---------- Gloed. Dekking 18 tot 22 procent, middelpunt aan de rand,
       uitdovend voor 72 procent van de straal. Maximaal twee kleuren per sectie. ---------- */

  .sectie { position: relative; padding: 4.25rem 0; overflow: hidden; }
  .sectie > .wrap { position: relative; z-index: 1; }
  /* ---------- Achtergrondgloed ----------
     Brandbook §05, uitgebreid op 2026-09-02 in overleg met Thomas.

     Het systeem scheidt KLEUR van POSITIE. Een gloed krijgt dus twee klassen:
       <div class="gloed gloed--koel gloed--zijkanten"></div>

     Wat uit het brandbook blijft gelden:
       · maximaal twee gloedkleuren per sectie
       · dekking tussen 16% en 22%. Zie je een kleurvlek, dan is het te veel
       · het middelpunt ligt altijd buiten of aan de rand van het kader
       · geen gloed over een foto of over een gekleurde kaart
       · geen scherpe randen: de gloed dooft uit voor 72% van zijn straal

     Wat Thomas herzien heeft:
       · meer dan twee combinaties per pagina mag
       · elke kleur mag ook alleen gebruikt worden
       · blauw komt erbij. LET OP: blauw staat NIET in het brandbook. De tint is
         afgeleid van de blauwe wanduplighting op de zaalfoto's, zodat de kleur
         uit het gebouw zelf komt. Het brandbook moet hierop bijgewerkt worden.
     ------------------------------------------------------------------ */

  .gloed {
    position: absolute; inset: 0; pointer-events: none;
    /* Kleurtokens. Elk verloop dooft uit naar dezelfde kleur met alfa 0, nooit
       naar transparent, anders krijg je een grijze waas in plaats van een gloed.

       Een gloed is licht, geen verf. Toongroen #1B7F63 en het afgeleide blauw
       zijn diepe kleuren: over creme trekken ze het vlak donkerder en dan zie je
       een grijze waas, geen kleur. Elke gloed gebruikt daarom een pasteltint van
       dezelfde tinthoek, ongeveer 70 procent helderheid, met een hogere dekking.
       Een pastel op 20 procent zie je niet, op 34 tot 38 procent leest ze als
       kleur zonder het vlak te verzwaren. De merkkleuren zelf veranderen niet:
       die blijven voor tekst, knoppen en vlakken.
         rood  #E03E1A -> #FF9E7A op 34 procent
         groen #1B7F63 -> #81E4C8 op 38 procent
         blauw #1B6F9E -> #81CDF0 op 38 procent
       Geel blijft op #FFC53D en 20 procent: dat was al een lichte kleur, en de
       goedgekeurde koppen van home en Prijzen hangen eraan vast. */
    --gl-rood:  radial-gradient(circle, rgba(255, 158, 122, .34) 0%, rgba(255, 158, 122, 0) 70%);
    --gl-geel:  radial-gradient(circle, rgba(255, 197, 61, .20) 0%, rgba(255, 197, 61, 0) 70%);
    --gl-groen: radial-gradient(circle, rgba(129, 228, 200, .38) 0%, rgba(129, 228, 200, 0) 70%);
    --gl-blauw: radial-gradient(circle, rgba(129, 205, 240, .38) 0%, rgba(129, 205, 240, 0) 70%);
    --g1: none; --g2: none;
  }
  .gloed::before, .gloed::after { content: ""; position: absolute; border-radius: 50%; }
  .gloed::before { background: var(--g1); }
  .gloed::after  { background: var(--g2); }

  /* --- Kleurcombinaties --- */
  .gloed--feest {
    --g1: radial-gradient(circle, rgba(224, 62, 26, .22) 0%, rgba(224, 62, 26, 0) 68%);
    --g2: var(--gl-geel);
  }
  .gloed--rustig {
    --g1: var(--gl-groen);
    --g2: radial-gradient(circle, rgba(255, 197, 61, .18) 0%, rgba(255, 197, 61, 0) 70%);
  }
  .gloed--koel   { --g1: var(--gl-blauw); --g2: var(--gl-geel); }   /* kalm, met warmte */
  .gloed--avond  { --g1: var(--gl-blauw); --g2: var(--gl-groen); }  /* de zaal bij avond */

  /* --- Enkele kleuren --- */
  .gloed--rood   { --g1: var(--gl-rood);  --g2: none; }
  .gloed--geel   { --g1: var(--gl-geel);  --g2: none; }
  .gloed--groen  { --g1: var(--gl-groen); --g2: none; }
  .gloed--blauw  { --g1: var(--gl-blauw); --g2: none; }

  /* --- Posities ---
     De standaard is rechtsboven plus linksonder. De andere zetten alleen de
     geometrie om, zodat elke kleur op elke plaats kan staan. */
  .gloed::before { width: 90rem; height: 90rem; top: -58rem; right: -34rem; }
  .gloed::after  { width: 70rem; height: 70rem; bottom: -48rem; left: -26rem; }

  .gloed--gespiegeld::before { right: auto; left: -34rem; }
  .gloed--gespiegeld::after  { left: auto; right: -26rem; }

  /* Van links en rechts, maar bewust niet op dezelfde hoogte. Twee gloeden
     waterpas naast elkaar lezen als een band dwars over de sectie. Door de
     linker hoger te zetten dan de rechter krijgt het blok ertussen diagonaal
     licht, en blijft het midden vrij van een middelpunt. */
  .gloed--zijkanten::before {
    width: 62rem; height: 62rem; top: 32%; right: auto; left: -40rem; transform: translateY(-50%);
  }
  .gloed--zijkanten::after {
    width: 48rem; height: 48rem; top: 78%; bottom: auto; left: auto; right: -30rem; transform: translateY(-50%);
  }

  /* Eén gloed vanaf de onderrand, als overgang naar de volgende sectie. */
  .gloed--onder::before {
    width: 84rem; height: 84rem; top: auto; bottom: -62rem;
    right: auto; left: 50%; transform: translateX(-50%);
  }
  .gloed--onder::after { display: none; }

  /* Voetgloed. Een gloed linksonder, zodat de voet niet als een wit blad
     onder de pagina hangt. Bewust zwakker dan een sectiegloed: de voet mag
     leven krijgen, geen aandacht trekken. Daarom een enkele kleur en een
     dekking onder de sectienorm. Staat op elke pagina. */
  .gloed--voet::before {
    width: 74rem; height: 74rem; top: auto; right: auto;
    bottom: -40rem; left: -31rem;
  }
  .gloed--voet::after { display: none; }

  /* De twee eerste varianten houden hun eigen maten, zodat de door de klant
     goedgekeurde koppen van home, De zaal en Prijzen niet verschuiven. */
  .gloed--feest::before  { width: 90rem; height: 90rem; top: -58rem; right: -34rem; }
  .gloed--feest::after   { width: 70rem; height: 70rem; bottom: -48rem; left: -26rem; }
  .gloed--rustig::before { width: 76rem; height: 76rem; top: -50rem; right: auto; left: -30rem; }
  .gloed--rustig::after  { width: 62rem; height: 62rem; bottom: -44rem; left: auto; right: -22rem; }

  /* Boog onderaan de hero, die de bocht van de fotowaaier voortzet.
     De buitenste foto's hangen lager dan de middelste, dus de scheidingslijn
     komt in het midden omhoog en zakt naar de zijkanten. De boog ligt achter
     de foto's, zodat de waaier er net op lijkt te rusten. */
  .sectie--boog { padding-bottom: 9.5rem; }
  .boog {
    position: absolute; left: 0; right: 0; bottom: -1px;
    width: 100%; height: 9rem; display: block; z-index: 0;
  }
  @media (max-width: 48rem) { .sectie--boog { padding-bottom: 6rem; } .boog { height: 4.5rem; } }

  .sectie--perzik { background: var(--perzik); }
  .sectie--op { background: var(--creme-op); }

  /* ---------- Header ---------- */

  header {
    background: var(--creme);
    border-bottom: 1px solid var(--zand);
    position: sticky;
    top: 0;
    z-index: 20;
  }
  .balk { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; padding-block: 1rem; }
  .balk__rechts { display: flex; align-items: center; gap: .875rem; justify-self: end; }
  .logo { width: 132px; height: auto; display: block; color: var(--inkt); flex: none; }
  .hoofdnav { display: flex; gap: 2rem; justify-content: center; }
  .hoofdnav a {
    color: var(--inkt); text-decoration: none; font-weight: 600; font-size: 1rem;
    padding: .25rem 0; border-bottom: 2px solid transparent;
  }
  .hoofdnav a:hover { border-bottom-color: var(--rood); }
  @media (max-width: 56rem) {
    .hoofdnav { display: none; }
    .balk { grid-template-columns: auto 1fr; }
  }

  /* Menuknop. Lijnicoon van 2 px met ronde uiteinden, conform het brandbook. */
  /* Menuknop. Drie rechte streepjes van ongelijke lengte: lang, kort, midden.
     Bij hover schuiven de twee kortste uit tot de volle breedte. */
  .menuknop {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer;
    width: 2.75rem; height: 2.75rem; padding: 0; color: var(--inkt);
  }
  .menuknop svg { display: block; }
  .menuknop svg line { transition: transform .28s cubic-bezier(.22,1,.36,1); }
  .menuknop svg line:nth-child(1) { transform-origin: 4px 6px; }
  .menuknop svg line:nth-child(2) { transform-origin: 4px 11px; transform: scaleX(.5); }
  .menuknop svg line:nth-child(3) { transform-origin: 4px 16px; transform: scaleX(.75); }
  .menuknop:hover { color: var(--rood-op); }
  .menuknop:hover svg line:nth-child(2),
  .menuknop:hover svg line:nth-child(3) { transform: scaleX(1); }

  /* Overlaymenu. Perzik, want het brandbook laat geen donkere vlakken toe. */
  .overlay {
    position: fixed; inset: 0; z-index: 50; background: var(--perzik);
    overflow-y: auto; padding: 1.75rem 0 4rem;
    opacity: 0; visibility: hidden; transform: translateY(-1.5rem);
    transition: opacity .34s ease, transform .34s cubic-bezier(.22,1,.36,1), visibility 0s .34s;
  }
  .overlay.open {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .34s ease, transform .34s cubic-bezier(.22,1,.36,1), visibility 0s;
  }
  .overlay__kop { display: flex; align-items: center; justify-content: space-between; }
  .overlay__sluit {
    display: inline-flex; align-items: center; gap: .5rem;
    background: none; border: 0; cursor: pointer; padding: .5rem .25rem;
    font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 800; color: var(--inkt);
  }
  .overlay__sluit:hover { color: var(--rood-op); }
  .overlay__binnen {
    display: grid; grid-template-columns: 1.35fr 1fr; gap: 4rem; margin-top: 3rem;
  }
  @media (max-width: 56rem) { .overlay__binnen { grid-template-columns: 1fr; gap: 2.5rem; } }

  .overlay__nav { display: grid; gap: .875rem; }
  .overlay__nav a,
  .overlay__nav .nav-plaatshouder {
    font-family: "Archivo Black", Impact, sans-serif;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    letter-spacing: -.03em; line-height: 1.25;
    color: var(--inkt); text-decoration: none;
    display: inline-block; width: fit-content;
    border-bottom: 3px solid transparent;
  }
  .overlay__nav a:hover { color: var(--rood-op); border-bottom-color: var(--geel); }
  .overlay__nav a, .overlay__nav .nav-plaatshouder, .overlay__info {
    opacity: 0; transform: translateY(.75rem);
    transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
  }
  .overlay.open .overlay__nav a, .overlay.open .overlay__nav .nav-plaatshouder, .overlay.open .overlay__info { opacity: 1; transform: none; }
  .overlay.open .overlay__nav > *:nth-child(1) { transition-delay: .06s }
  .overlay.open .overlay__nav > *:nth-child(2) { transition-delay: .10s }
  .overlay.open .overlay__nav > *:nth-child(3) { transition-delay: .14s }
  .overlay.open .overlay__nav > *:nth-child(4) { transition-delay: .18s }
  .overlay.open .overlay__nav > *:nth-child(5) { transition-delay: .22s }
  .overlay.open .overlay__nav > *:nth-child(6) { transition-delay: .26s }
  .overlay.open .overlay__nav > *:nth-child(7) { transition-delay: .30s }
  .overlay.open .overlay__nav > *:nth-child(8) { transition-delay: .34s }
  .overlay.open .overlay__nav > *:nth-child(9) { transition-delay: .38s }
  .overlay.open .overlay__info { transition-delay: .22s }

  .overlay__info h2 {
    font-family: "Archivo Black", Impact, sans-serif; font-weight: 400;
    font-size: 1.375rem; letter-spacing: -.03em; line-height: 1.3; margin-bottom: .75rem;
  }
  .overlay__info h2 + p { margin-bottom: 1.75rem; }
  .overlay__info a { color: var(--rood-op); font-weight: 600; }
  .overlay__uren { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1.5rem; margin-bottom: 1.75rem; }
  .overlay__uren span:nth-child(even) { font-weight: 700; }

  /* ---------- Hero ---------- */

  /* Hero gecentreerd, in een kolom. De foto's eronder liggen als een waaier,
     elk beeld iets gedraaid en verspringend, met een cremerand die ze scheidt. */
  .hero { max-width: 50rem; margin-inline: auto; text-align: center; }
  .hero .lead { max-width: 650px; margin-inline: auto; }

  .waaier {
    display: flex; justify-content: center; align-items: flex-end;
    margin-top: 3.5rem; padding-bottom: 2rem;
  }
  .waaier img {
    width: 13.5rem; height: 17rem; object-fit: cover; display: block;
    border-radius: var(--radius); border: 6px solid var(--creme);
    margin-inline: -1.6rem; transform-origin: bottom center;
    transition: transform .28s ease, opacity .28s ease;
  }
  .waaier img:nth-child(1) { transform: rotate(-13deg)  translateY(1.9rem); z-index: 1; }
  .waaier img:nth-child(2) { transform: rotate(-7.8deg) translateY(.8rem);  z-index: 2; }
  .waaier img:nth-child(3) { transform: rotate(-2.6deg) translateY(.15rem); z-index: 3; }
  .waaier img:nth-child(4) { transform: rotate(2.6deg)  translateY(.15rem); z-index: 3; }
  .waaier img:nth-child(5) { transform: rotate(7.8deg)  translateY(.8rem);  z-index: 2; }
  .waaier img:nth-child(6) { transform: rotate(13deg)   translateY(1.9rem); z-index: 1; }

  /* Waar je over zweeft komt naar voren, recht en volledig zichtbaar.
     De rest dimt, zodat duidelijk is welke foto actief is. */
  .waaier:hover img { opacity: .5; }
  .waaier img:hover {
    opacity: 1; z-index: 10;
    transform: rotate(0deg) translateY(-1.25rem) scale(1.08);
  }

  @media (max-width: 68rem) {
    .waaier img { width: 10.5rem; height: 13.5rem; margin-inline: -1.3rem; }
  }
  @media (max-width: 48rem) {
    .waaier img:nth-child(1), .waaier img:nth-child(6) { display: none; }
    .waaier img { width: 8.5rem; height: 11rem; margin-inline: -1rem; }
  }
  @media (max-width: 32rem) {
    .waaier img:nth-child(2), .waaier img:nth-child(5) { display: none; }
    .waaier img { width: 9.5rem; height: 12rem; margin-inline: -.75rem; }
  }
  /* Zonder hover, zoals op een telefoon, blijft de waaier gewoon leesbaar. */
  @media (hover: none) {
    .waaier:hover img { opacity: 1; }
    .waaier img:hover { transform: none; }
    .waaier img:nth-child(3):hover { transform: rotate(-2.6deg) translateY(.15rem); }
    .waaier img:nth-child(4):hover { transform: rotate(2.6deg) translateY(.15rem); }
  }

  /* Feiten, geen koppen. Ze ondersteunen de titel in plaats van ermee te concurreren. */
  .hero__cijfers {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
    gap: .5rem 1.5rem; margin: 1.75rem 0 2rem;
  }
  .hero__cijfers > div { display: flex; align-items: baseline; gap: .5rem; }
  .hero__cijfers > div + div { padding-left: 1.5rem; border-left: 1px solid var(--zand); }
  .cijfer { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em; }
  .cijfer + span { font-size: .9375rem; font-weight: 600; color: #4A423B; }
  @media (max-width: 30rem) {
    .hero__cijfers > div + div { padding-left: 0; border-left: 0; }
  }
  .hero__acties { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
  .hero .hero__acties { justify-content: center; }

  /* ---------- Kaarten ---------- */

  .kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; align-items: stretch; }
  @media (max-width: 60rem) { .kaarten { grid-template-columns: 1fr; } }
  .kaart {
    background: var(--creme-op);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--inkt);
    border: 1px solid var(--zand);
  }
  /* Vaste hoogte in plaats van aspect-ratio. Een height-attribuut op de img
     overrulet aspect-ratio, waardoor kaarten met een ander bronformaat scheef
     liepen. Met een vaste hoogte zijn de drie beelden altijd identiek. */
  .kaart img { width: 100%; height: 200px; object-fit: cover; display: block; }
  .kaart__tekst { padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
  .kaart__tekst p { margin: 0; font-size: 1rem; line-height: 1.6rem; }
  .kaart__meer { margin-top: auto; padding-top: .75rem; font-weight: 800; color: var(--rood-op); }
  .kaart:hover { border-color: var(--rood); }

  /* ---------- Lijst met beeld ---------- */

  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
  @media (max-width: 60rem) { .duo { grid-template-columns: 1fr; gap: 2.5rem; } }

  ul.inbegrepen { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: grid; gap: .875rem; }
  ul.inbegrepen li { display: flex; gap: .875rem; align-items: flex-start; font-size: 1.0625rem; }
  ul.inbegrepen svg { flex: none; margin-top: .3rem; }

  /* Cijfers in plaats van foto's. Deze sectie gaat over schaal, en een close-up
     van een tap toont juist een klein ding. Archivo Black is volgens het
     brandbook voor titels en cijfers. */
  .telling { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .tegel { background: var(--creme-op); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.375rem; }
  .tegel b {
    font-family: "Archivo Black", Impact, sans-serif; font-weight: 400;
    font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1;
    letter-spacing: -.04em; display: block; margin-bottom: .375rem;
  }
  .tegel span { font-size: 1rem; font-weight: 600; line-height: 1.4; display: block; }
  .tegel small { display: block; font-size: .875rem; color: #6B5A49; margin-top: .25rem; }
  .tegel--geel { background: var(--geel); }
  /* Contrast op geel. Geel is een lichte kleur, dus tekst die op creme net
     4,5 haalt zakt erop naar 4,18 en het rood van een groot cijfer naar 2,73.
     Beide krijgen hun diepere variant, alleen op deze tegel. */
  .tegel--geel small,
  .tegel--geel .capaciteit dt { color: #5F4F3F; }
  .tegel--geel .tegel__groot { color: var(--rood-op); }

  /* Niet elke tegel heeft een cijfer. Waar de boodschap de kern is, draagt de
     regel zelf het gewicht in plaats van een woord in de cijferstijl. */
  .tegel--uitspraak span {
    font-family: "Manrope", sans-serif; font-weight: 800;
    font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.35;
    letter-spacing: -.01em;
  }
  .tegel--uitspraak small { margin-top: .5rem; }

  /* Wisselende formaten, zoals het brandbook de tegels ook gebruikt. */
  .tegel--breed { grid-column: 1 / -1; }

  /* Het kopcijfer in feestrood. Groot genoeg dat 4,24 als AA-groot telt. */
  .tegel__groot { color: var(--rood); font-size: clamp(2.75rem, 2rem + 2.4vw, 4rem); }
  /* Tellers. Tabelcijfers, anders springt de breedte bij elke stap. */
  [data-tel] { font-variant-numeric: tabular-nums; }

  /* Label/bedrag boven een volledige zin, i.p.v. de .capaciteit-flexrij die enkel
     bij korte labels werkt (zie prijzen.html, sectie "opruimen"). */
  .tegel__status { font-weight: 800; font-size: 1.0625rem; margin: .75rem 0 .375rem; }
  .tegel__detail { font-size: .9375rem; color: #6B5A49; margin: 0; }

  .capaciteit { margin: 1.5rem 0 0; }
  .capaciteit > div {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: .625rem 0; border-top: 1px solid var(--zand);
  }
  .capaciteit dt { color: #6B5A49; font-size: .9375rem; }
  .capaciteit dd {
    margin: 0; font-family: "Archivo Black", Impact, sans-serif; font-weight: 400;
    font-size: 1.125rem; letter-spacing: -.02em;
  }

  @media (max-width: 34rem) { .telling { grid-template-columns: 1fr; } }

  /* Geruststelling onder de hoofdknop. */
  .gerust { font-size: .9375rem; color: #6B5A49; margin: 1rem 0 0; }

  /* Praktische feiten onder de knop. Een rustige regel in plaats van tegels:
     het afsluitblok is gecentreerd en heeft maar een taak. */
  .feiten {
    margin: 1.25rem auto 0; font-size: .9375rem; font-weight: 600; color: #6B5A49;
  }
  .hero .gerust { margin-inline: auto; }

  @media (max-width: 48rem) {
      }


  /* De harde afspraken, feitelijk en zonder alarmkleur. */
  .voorwaarden {
    font-size: .9375rem; color: #6B5A49;
    border-top: 1px solid var(--zand); padding-top: 1rem; margin-top: 1.5rem;
  }

  /* ---------- Sfeerband ----------
     Eén groot beeld van een aangeklede zaal. Het bijschrift doet het echte werk:
     het scheidt wat wij leveren van wat de klant zelf meebracht, zodat het beeld
     geen belofte wordt die de kale zaal moet waarmaken. */

  /* Ruimte rond het gekantelde beeld, anders loopt de slagschaduw tegen de sectierand. */
  .sfeerband { padding: 5.5rem 0; }
  .sfeerband__tekst h2 { margin-bottom: 1.25rem; }

  .sfeerband__duo {
    display: grid; grid-template-columns: 1.05fr .95fr;
    gap: 4rem; align-items: center;
    perspective: 1000px;
  }

  /* Het beeld staat gekanteld: de linkerrand komt naar voren, de rechterrand wijkt
     terug richting de tekst. De onthul-animatie zit op de figure, de kanteling op
     de img, anders vechten twee transforms om hetzelfde element. */
  .sfeerband__beeld { margin: 0; transform-style: preserve-3d; }
  .sfeerband__beeld img {
    width: 100%; height: auto; display: block;
    border-radius: var(--radius);
    transform: rotateY(16deg) rotateX(3deg) scale(.97);
    box-shadow: -14px 40px 80px rgba(30, 26, 22, .30), 0 4px 14px rgba(30, 26, 22, .12);
    transition: transform .7s cubic-bezier(.2, .7, .25, 1), box-shadow .7s ease;
    will-change: transform;
  }

  /* Bij hover draait het beeld naar de bezoeker toe en komt het iets omhoog.
     Het richt zich op, in plaats van nog verder weg te kantelen. */
  .sfeerband__beeld:hover img,
  .sfeerband__beeld:focus-within img {
    transform: rotateY(4deg) rotateX(0deg) scale(1.01) translateY(-8px);
    box-shadow: -8px 52px 96px rgba(30, 26, 22, .34), 0 6px 18px rgba(30, 26, 22, .14);
  }

  .sfeerband__tekst > *:last-child { margin-bottom: 0; }

  @media (max-width: 60rem) {
    .sfeerband__duo { grid-template-columns: 1fr; gap: 2.5rem; perspective: none; }
    .sfeerband__beeld img {
      transform: none;
      box-shadow: 0 18px 44px rgba(30, 26, 22, .18);
    }
  }

  /* Wie beweging liever vermijdt, krijgt gewoon een recht beeld dat stil blijft staan. */
  @media (prefers-reduced-motion: reduce) {
    .sfeerband__beeld img,
    .sfeerband__beeld:hover img,
    .sfeerband__beeld:focus-within img { transform: none; transition: none; }
  }

  /* ---------- Park ---------- */

  .park img { width: 100%; height: auto; border-radius: var(--radius); display: block; margin-bottom: 2.5rem; }

  /* De buitenkant, twee beelden naast elkaar. Dezelfde plek aangekleed en gewoon,
     want dat is precies het verschil dat een bezoeker vooraf wil zien. */
  .buitenduo {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
    margin-top: 3rem;
  }
  .buitenduo figure { margin: 0; }
  .buitenduo img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
  @media (max-width: 48rem) {
    .buitenduo { grid-template-columns: 1fr; gap: 2rem; }
  }

  /* ---------- Afsluiter ---------- */

  .afsluiter { text-align: center; }
  .afsluiter p { margin-inline: auto; }
  .afsluiter .hero__acties { justify-content: center; }


  /* ---------- Sprong naar de inhoud ----------
     WCAG 2.4.1 (niveau A). Zonder deze link moet wie met het toetsenbord werkt
     op elke pagina eerst door de volledige kop tabben. Onzichtbaar tot hij
     focus krijgt, dan verschijnt hij bovenaan links. */
  .sprong {
    position: absolute; left: .75rem; top: -4rem; z-index: 100;
    background: var(--inkt); color: var(--creme);
    padding: .75rem 1.25rem; border-radius: var(--pil);
    font-weight: 700; text-decoration: none;
    transition: top .15s ease;
  }
  .sprong:focus { top: .75rem; }
  /* Het doel krijgt tabindex="-1" zodat de focus er echt naartoe gaat. Die
     omtrek hoort de bezoeker niet te zien, de focus zit al waar hij moet zijn. */
  main:focus { outline: none; }
  @media (prefers-reduced-motion: reduce) { .sprong { transition: none; } }

  /* ---------- Footer ---------- */

  /* Afgebakend tot de paginavoet. Een <footer> in een blockquote is de juiste
     bronvermelding volgens de HTML-spec, en die mag deze opmaak niet erven. */
  body > footer {
    position: relative; overflow: hidden;
    background: var(--creme-op); border-top: 1px solid var(--zand); padding: 3.5rem 0 2.5rem;
  }
  body > footer > .wrap { position: relative; z-index: 1; }
  .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
  @media (max-width: 48rem) { .footer__grid { grid-template-columns: 1fr; } }
  footer h3 { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem; }
  footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
  footer a { color: var(--inkt); text-decoration: none; font-weight: 600; }
  footer a:hover { color: var(--rood-op); }
  .socials { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.25rem; }
  .socials a {
    display: inline-flex; align-items: center; gap: .5rem;
    text-decoration: none; font-weight: 600;
  }
  .socials svg { display: block; }

  .footer__legals { display: inline-flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
  /* Mailbox in mandarijn. De echte mandarijn #F26D3D haalt op deze crème maar
     2,94 en tekst van 14 px heeft 4,5 nodig, dus dit is dezelfde tint zover
     verdiept tot ze 4,56 haalt. */
  .footer__credit { justify-self: end; color: #6B5A49; }
  .footer__credit a { font-weight: 700; color: #D2420E; }
  .footer__credit a:hover { color: #A7350B; }
  .btw { font-size: .875rem; color: #6B5A49; margin: 0 0 1.5rem; }
  /* Juridische links gecentreerd bovenaan, daaronder de handelsnaam links en
     de credit rechts (Sven, 29-09). */
  .footer__slot {
    margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--zand);
    font-size: .875rem; display: grid; grid-template-columns: 1fr auto;
    gap: 1rem 2rem; align-items: center;
  }
  .footer__slot .footer__legals { grid-column: 1 / -1; justify-self: center; }
  /* Smal scherm: alles onder elkaar, netjes gecentreerd. */
  @media (max-width: 60rem) {
    .footer__slot { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .footer__credit { justify-self: center; }
  }

  /* ---------- Beweging ---------- */

  /* Onthullen tijdens het scrollen. Elk element komt op met een eigen vertraging,
     zodat een sectie zich opbouwt in plaats van in een keer te verschijnen. */
  .js .onthul {
    opacity: 0; transform: translateY(1.75rem);
    transition: opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js .onthul.zichtbaar { opacity: 1; transform: none; }

  /* Zonder javascript wordt .js nooit gezet en blijft alles gewoon staan. */

  /* Beeld dat inzoomt bij hover. De uitsnede blijft gelijk, alleen de foto beweegt. */
  .kaart img {
    transition: transform .5s cubic-bezier(.22,1,.36,1);
  }
  .kaart:hover img { transform: scale(1.05); }
  .kaart { overflow: hidden; }

  /* Pijltjes die meeschuiven. */
  .tekstlink, .kaart__meer { position: relative; }
  .tekstlink .pijl, .kaart__meer .pijl {
    display: inline-block; transition: transform .3s cubic-bezier(.34,1.4,.64,1);
  }
  .tekstlink:hover .pijl, .kaart:hover .kaart__meer .pijl { transform: translateX(.35rem); }
  /* Een pijl schuift vooruit, een kalender niet. Die tilt even op. */
  .tekstlink:hover .pijl--kal { transform: translateY(-.15rem); }

  /* Asymmetrische verdeling in plaats van twee gelijke helften. */
  .duo { grid-template-columns: 1.15fr 1fr; }
  @media (max-width: 60rem) { .duo { grid-template-columns: 1fr; } }

  /* De parksectie: het tekstblok is smaller dan de foto en schuift over de
     onderrand ervan. Iets lichter dan de sectie, zodat de rand van de kaart
     leesbaar is zonder schaduw. */
  .park .duo {
    position: relative; z-index: 1;
    max-width: 58rem; margin: -7rem auto 0;
    background: var(--creme-op); border-radius: var(--radius);
    padding: 2.5rem 3rem;
    gap: 2.5rem;
    align-items: start;
  }
  /* De laatste alinea in de rechterkolom mag geen ondermarge hebben, anders is
     de witruimte onderaan groter dan bovenaan. */
  .park .duo > div > *:last-child { margin-bottom: 0; }
  @media (max-width: 60rem) {
    .park .duo { max-width: 100%; margin-top: -3rem; padding: 2rem 1.75rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .js .onthul { opacity: 1; transform: none; transition: none; }
    .kaart img { transition: none; }
  }

  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

  /* ============================================================
     Onderdelen voor de binnenpagina's (de-zaal.html, prijzen.html)
     ============================================================ */

  /* Paginakop: lichter dan de hero op de homepage, want een binnenpagina
     opent met een antwoord en niet met een belofte. */
  .paginakop { padding-top: 3rem; }
  .paginakop .lead { max-width: 58ch; }
  .paginakop__beeld {
    width: 100%; height: auto; display: block;
    border-radius: var(--radius); margin-top: 3rem;
  }
  .kruimels {
    font-size: .875rem; color: #6B5A49; margin-bottom: 1.25rem;
    display: flex; gap: .5rem; flex-wrap: wrap;
  }
  .kruimels a { color: #6B5A49; }

  /* Vier vierkante beelden op een rij, valt terug op twee kolommen. */
  .viertal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
  .viertal figure { margin: 0; }
  .viertal img { width: 100%; height: auto; display: block; border-radius: 14px; }
  .viertal figcaption { margin-top: .625rem; font-size: .8125rem; color: #6B5A49; }
  @media (max-width: 54rem) { .viertal { grid-template-columns: repeat(2, 1fr); } }

  /* Het park in vier seizoenen, plus de winterfoto (element: opmerkingen 09-09) als 5de
     beeld. Bento-indeling op vraag van Sven: de winterfoto (staand, 5de in de galerij) groot
     links over de volle hoogte, de andere vier in een 2×2-raster rechts. Vaste
     beeldverhoudingen i.p.v. natuurlijke hoogte, want de foto's lopen uiteen (liggend/staand)
     — zonder aspect-ratio zou de rasterhoogte per foto verspringen. */
  .seizoenen {
    display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: repeat(2, 1fr);
    gap: 1rem; margin-top: 2.5rem;
  }
  .seizoenen figure { margin: 0; }
  .seizoenen img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; display: block; border-radius: var(--radius); }
  .seizoenen figcaption { margin-top: .625rem; font-size: .875rem; color: #6B5A49; }
  .seizoenen > :nth-child(1) { grid-column: 2; grid-row: 1; }
  .seizoenen > :nth-child(2) { grid-column: 3; grid-row: 1; }
  .seizoenen > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .seizoenen > :nth-child(4) { grid-column: 3; grid-row: 2; }
  .seizoenen > :nth-child(5) { grid-column: 1; grid-row: 1 / 3; }
  .seizoenen > :nth-child(5) img { aspect-ratio: unset; } /* staande winterfoto, geen 4:3 opdringen */
  @media (max-width: 40rem) {
    .seizoenen { grid-template-columns: 1fr; grid-template-rows: none; }
    .seizoenen > * { grid-column: auto !important; grid-row: auto !important; }
    .seizoenen img { aspect-ratio: 4 / 3; height: auto; }
  }

  /* Prijsregels. Bewust geen echte tabel: op een telefoon breekt een tabel
     van 25 regels, en dat is precies wat er vandaag misloopt. */
  .prijsregels { margin: 2rem 0 0; padding: 0; list-style: none; }
  .prijsregels li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
    padding: .875rem 0; border-bottom: 1px solid var(--zand);
  }
  .prijsregels li:first-child { border-top: 1px solid var(--zand); }
  /* Deze omschrijving liep tot 1.060 px: `flex: 1` geeft haar alle restruimte in de rij.
     Het bedrag blijft rechts staan, de tekst wikkelt eerder. */
  .prijsregels .omschrijving { flex: 1; max-width: 650px; }
  .prijsregels .bedrag { font-weight: 800; white-space: nowrap; }
  /* Doorgestreept oud bedrag naast een vervallen kost, zodat de korting zichtbaar is
     i.p.v. enkel "€0" te tonen zonder context. */
  .bedrag-was { text-decoration: line-through; font-weight: 600; color: #6B5A49; }
  /* Ook in de tegels blijft een bedrag op één regel. */
  .capaciteit dd { white-space: nowrap; }
  .prijsregels .totaal { border-bottom: 2px solid var(--inkt); }
  .prijsregels .totaal .omschrijving,
  .prijsregels .totaal .bedrag { font-weight: 800; font-size: 1.125rem; }
  .prijsregels small { display: block; font-size: .8125rem; color: #6B5A49; font-weight: 400; margin-top: .1875rem; }

  /* Drankenlijst als tabel (element 3.6) — zelfde randkleur en gewicht als .prijsregels,
     nu in tabelvorm omdat er drie kolommen zijn i.p.v. omschrijving/bedrag. Scrollwrapper
     is een vangnet, drie korte kolommen passen normaal gewoon op een telefoonbreedte. */
  .tabel-scroll { overflow-x: auto; }
  .drankentabel { width: 100%; border-collapse: collapse; font-size: .9375rem; }
  .drankentabel th, .drankentabel td { padding: .625rem .75rem; text-align: left; border-bottom: 1px solid var(--zand); }
  .drankentabel th { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--groen); border-bottom: 2px solid var(--inkt); }
  .drankentabel th:nth-child(2), .drankentabel th:nth-child(3),
  .drankentabel td:nth-child(2), .drankentabel td:nth-child(3) { text-align: right; white-space: nowrap; font-weight: 700; }

  /* Het grote bedrag. Dit is de luidste kop van de site en dat is bewust:
     geen enkele feestzaal in het Waasland publiceert zijn tarief. */

  /* Sprongkoppelingen: twaalf vragen zonder wegwijzer laat je niet scrollen. */
  .sprongen {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin-top: 2.25rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(234, 223, 203, .8);
  }
  .sprongen__label {
    font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 800; color: var(--groen); margin-right: .5rem;
  }
  .sprongen a {
    display: inline-block; padding: .4375rem .875rem;
    background: rgba(234, 223, 203, .6); border-radius: var(--pil);
    font-size: .875rem; font-weight: 600; color: var(--inkt); text-decoration: none;
    transition: background .18s ease, color .18s ease, transform .18s ease;
  }
  .sprongen a:hover { background: var(--inkt); color: var(--creme); transform: translateY(-1px); }
  .sprongen a:focus-visible { outline: 2px solid var(--rood); outline-offset: 2px; }

  @media (max-width: 40rem) {
    .sprongen__label { width: 100%; margin: 0 0 .25rem; }
  }

  /* Tussenkop in een prijzenlijst, om altijd van uitzonderlijk te scheiden. */
  .prijsregels__kop {
    font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--groen); margin: 2rem 0 .25rem;
  }
  .prijsregels__kop:first-of-type { margin-top: 1.5rem; }

  /* ============================================================
     Kop van de prijzenpagina
     ------------------------------------------------------------
     Het bedrag is geen kop maar een vastgesteld feit, dus het zit
     in een kaart in plaats van los te zweven. Die insluiting geeft
     het gewicht, waardoor de grootte omlaag kan. Alles wat over het
     getal gaat, staat in de kaart: wat je koopt, hoe lang, en dat
     btw erin zit. Links het betoog, rechts het feit.
     ============================================================ */

  .prijskop__duo {
    display: grid; grid-template-columns: minmax(0, 1fr) 24rem;
    gap: 3.25rem; align-items: center;
  }
  /* De maat op de alinea's en niet op de kolom, anders ontstaat er een gat
     tussen het betoog en de kaart. */
  .prijskop__betoog > p { max-width: 36rem; }

  .prijskop {
    font-family: "Archivo Black", Impact, sans-serif;
    font-size: clamp(1.875rem, 3.2vw, 2.625rem); line-height: 1.08;
    letter-spacing: -.015em; margin: 0 0 1.25rem;
  }
  .prijskop__troef {
    font-size: 1.0625rem; font-weight: 800; line-height: 1.5;
    margin: 0 0 .625rem;
  }
  .prijskop__betoog > p:last-of-type { margin-bottom: 0; }

  /* De kaart zelf. Eén hairline, geen schaduwspel: dit is een feit,
     geen aanbieding. */
  .prijskaart {
    background: var(--creme-op);
    border: 1px solid var(--zand);
    border-radius: var(--radius);
    padding: 2rem 2rem 1.75rem;
  }
  .prijskaart__wat {
    font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 800; color: var(--groen); margin: 0 0 .75rem;
  }

  /* Het euroteken staat op dezelfde grondlijn als de cijfers en niet
     als superscript ernaast. Iets kleiner, want de cijfers dragen. */
  .prijskaart__bedrag {
    font-family: "Archivo Black", Impact, sans-serif;
    font-size: clamp(2.5rem, 4vw, 3rem); line-height: 1;
    letter-spacing: -.03em; color: var(--inkt); margin: 0;
  }
  /* Even groot als de cijfers, in dezelfde kleur. Een kleiner euroteken hangt
     ernaast als los merkteken in plaats van er deel van uit te maken. */
  .prijskaart__valuta { margin-right: .04em; }

  .prijskaart__uitleg {
    font-size: .9375rem; line-height: 1.55; color: #6B5A49;
    margin: .875rem 0 0;
  }

  .prijskaart__voet {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    margin: 1.25rem 0 0; padding-top: 1.125rem;
    border-top: 1px solid var(--zand);
  }
  .prijskaart__voet dt {
    font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
    color: #6B5A49; margin-bottom: .1875rem;
  }
  .prijskaart__voet dd { margin: 0; font-size: .9375rem; font-weight: 700; }

  @media (max-width: 62rem) {
    .prijskop__duo { grid-template-columns: 1fr; gap: 2.5rem; }
    .prijskop__betoog { max-width: none; }
    .prijskaart { max-width: 24rem; }
  }

  /* ============================================================
     HERSTELD op 2026-08-28
     Bij het opruimen van de oude kop-opmaak heeft een reguliere
     expressie te veel weggehaald: alles tussen twee ankers, ruim
     240 regels. Onderstaande blokken zijn daarbij gesneuveld en
     staan hier terug. Nooit meer regex loslaten op CSS.
     ============================================================ */

  .valuta { font-size: .55em; vertical-align: .28em; margin-right: .04em; }

  /* Menu-items voor pagina's die nog gebouwd moeten worden. Ze dragen dezelfde
     typografie als de echte links, alleen gedempt, met een label erbij. Zonder dat
     label leest een uitgegrijsd item als een kapotte link in plaats van als een
     pagina die eraan komt. */
  .nav-plaatshouder { color: #6B5A49; cursor: default; }
  .overlay__nav .nav-plaatshouder {
    display: inline-flex; align-items: baseline; gap: .75rem;
    width: fit-content; line-height: 1.25;
  }
  .overlay__nav .nav-plaatshouder::after {
    content: "binnenkort";
    font-family: "Manrope", -apple-system, "Segoe UI", sans-serif;
    font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 800; color: var(--groen); letter-spacing: .14em;
    background: rgba(27, 127, 99, .12); border-radius: var(--pil);
    padding: .25rem .5rem; white-space: nowrap;
  }

  /* ---------- Kop van De zaal ---------- */
  .zaalhero { padding-top: 2.25rem; padding-bottom: 4rem; }
  .zaalhero__grid {
    display: grid; grid-template-columns: 1fr 1.15fr;
    gap: 3.5rem; align-items: center;
  }
  .zaalhero__beeld { margin: 0; }
  .zaalhero__beeld img {
    width: 100%; height: auto; display: block;
    aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--radius);
    box-shadow: 0 22px 60px rgba(30, 26, 22, .18);
  }
  @media (max-width: 60rem) {
    .zaalhero__grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .zaalhero__beeld { order: -1; }
    .zaalhero__beeld img { aspect-ratio: 3 / 2; }
  }

  /* ---------- Optiegroepen op de prijzenpagina ---------- */
  .opties { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; margin-top: 2.5rem; }
  .opties h3 { font-size: 1rem; letter-spacing: .04em; margin-bottom: .5rem; }
  @media (max-width: 48rem) { .opties { grid-template-columns: 1fr; } }

  /* ---------- Slider ---------- */
  .slider { margin-top: 2.5rem; position: relative; }
  .slider__spoor {
    display: flex; gap: 1.25rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding-bottom: 1rem;
    scrollbar-width: thin; scrollbar-color: var(--zand) transparent;
  }
  .slider__spoor:focus-visible { outline: 3px solid var(--rood); outline-offset: 4px; border-radius: var(--radius); }
  .slider__spoor::-webkit-scrollbar { height: 6px; }
  .slider__spoor::-webkit-scrollbar-thumb { background: var(--zand); border-radius: 99px; }
  .slide { margin: 0; flex: 0 0 clamp(17rem, 40%, 26rem); scroll-snap-align: start; }
  .slide img {
    width: 100%; height: auto; display: block;
    aspect-ratio: 3 / 2; object-fit: cover;
    border-radius: var(--radius);
    box-shadow: 0 12px 34px rgba(30, 26, 22, .14);
  }
  .slide figcaption { margin-top: .75rem; font-weight: 800; font-size: .9375rem; }
  .slider__bediening { display: flex; gap: .625rem; margin-top: 1.25rem; }
  .slider__knop {
    width: 46px; height: 46px; border-radius: 50%;
    border: 2px solid var(--inkt); background: transparent; color: var(--inkt);
    display: grid; place-items: center; cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
  }
  .slider__knop svg { width: 22px; height: 22px; }
  .slider__knop:hover:enabled { background: var(--inkt); color: var(--creme); }
  .slider__knop:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; }
  .slider__knop:disabled { opacity: .3; cursor: default; border-color: #6B5A49; }
  @media (prefers-reduced-motion: reduce) { .slider__spoor { scroll-behavior: auto; } }

  /* ---------- Veelgestelde vragen ---------- */
  .faq { max-width: 46rem; margin-top: 2.5rem; margin-inline: auto; }
  .faq details { border-bottom: 1px solid var(--zand); }
  .faq details:first-of-type { border-top: 1px solid var(--zand); }
  .faq summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between;
    padding: 1.25rem 0; font-weight: 800; font-size: 1.0625rem; line-height: 1.4;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: var(--rood-op); }
  .faq summary:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; border-radius: 6px; }
  .faq summary .teken {
    flex: 0 0 auto; width: 22px; height: 22px; margin-top: .125rem;
    position: relative; transition: transform .25s ease;
  }
  .faq summary .teken::before,
  .faq summary .teken::after {
    content: ""; position: absolute; background: var(--rood);
    left: 50%; top: 50%; border-radius: 2px;
  }
  .faq summary .teken::before { width: 14px; height: 2.5px; transform: translate(-50%, -50%); }
  .faq summary .teken::after { width: 2.5px; height: 14px; transform: translate(-50%, -50%); transition: opacity .25s ease; }
  .faq details[open] summary .teken { transform: rotate(180deg); }
  .faq details[open] summary .teken::after { opacity: 0; }
  .faq .antwoord { padding: 0 2.5rem 1.5rem 0; margin: 0; }
  .faq .antwoord p { margin: 0 0 .875rem; }
  .faq .antwoord p:last-child { margin-bottom: 0; }
  .faq-sectie { text-align: center; }
  .faq-sectie .overline, .faq-sectie .lead { margin-inline: auto; }
  .faq-sectie .faq { text-align: left; }
  @media (prefers-reduced-motion: reduce) { .faq summary .teken { transition: none; } }

  /* ---------- Reviews ---------- */
  .reviews__kop { max-width: 46rem; }
  .reviews__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
  @media (max-width: 54rem) { .reviews__raster { grid-template-columns: 1fr; } }
  .review {
    margin: 0; padding: 1.75rem;
    background: var(--creme-op); border-radius: var(--radius);
    display: flex; flex-direction: column; gap: 1rem;
  }
  .review__sterren { display: flex; gap: .1875rem; }
  .review__sterren svg { width: 18px; height: 18px; flex: none; }
  .review__sterren svg.gevuld { fill: var(--geel); stroke: var(--geel); }
  .review__sterren svg.leeg { fill: none; stroke: var(--zand); }
  .review__tekst { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
  .review__wie { font-size: .875rem; color: #6B5A49; font-weight: 600; margin-top: auto; }
  .review--leeg {
    background: transparent; border: 2px dashed var(--zand);
    min-height: 11rem; justify-content: center; text-align: center;
  }
  .review--leeg .review__tekst, .review--leeg .review__wie { color: #6B5A49; font-style: italic; }
  .review--leeg .review__wie { margin-top: 0; }

  /* ---------- Gekanteld beeld, gespiegeld ----------
     Op de homepage staat het beeld links en komt de linkerrand naar voren.
     Hier staat het rechts, dus draait de kanteling om: de rechterrand komt
     naar voren en de linkerrand wijkt terug richting de tekst. */

  .kantelgrid { perspective: 1000px; }
  .kantelgrid .zaalhero__beeld { transform-style: preserve-3d; }
  .kantelgrid .zaalhero__beeld img {
    transform: rotateY(-16deg) rotateX(3deg) scale(.97);
    box-shadow: 14px 40px 80px rgba(30, 26, 22, .30), 0 4px 14px rgba(30, 26, 22, .12);
    transition: transform .7s cubic-bezier(.2, .7, .25, 1), box-shadow .7s ease;
    will-change: transform;
  }
  .kantelgrid .zaalhero__beeld:hover img,
  .kantelgrid .zaalhero__beeld:focus-within img {
    transform: rotateY(-4deg) rotateX(0deg) scale(1.01) translateY(-8px);
    box-shadow: 8px 52px 96px rgba(30, 26, 22, .34), 0 6px 18px rgba(30, 26, 22, .14);
  }

  @media (max-width: 60rem) {
    .kantelgrid { perspective: none; }
    .kantelgrid .zaalhero__beeld img {
      transform: none;
      box-shadow: 0 18px 44px rgba(30, 26, 22, .18);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .kantelgrid .zaalhero__beeld img,
    .kantelgrid .zaalhero__beeld:hover img,
    .kantelgrid .zaalhero__beeld:focus-within img { transform: none; transition: none; }
  }

  /* ---------- Carrousel: bijgesteld op 2026-08-28 ----------
     Geen schuifbalk meer en geen bijschriften. De pijlen zijn de enige
     bediening en staan rechtsonder, waar de blik na het lezen van de
     beelden vanzelf terechtkomt. Slepen en vegen blijven werken. */

  .slider__spoor {
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0;
  }
  .slider__spoor::-webkit-scrollbar { display: none; width: 0; height: 0; }

  .slide figcaption { display: none; }

  .slider__bediening { justify-content: flex-end; margin-top: 1.5rem; }

  /* ---------- Terug naar boven ----------
     De prijzenpagina telt veertien secties. Wie onderaan beslist, moet niet
     terug hoeven scrollen naar de agenda. Verschijnt pas na een schermhoogte,
     zodat hij bovenaan niets in de weg staat. */

  .naarboven {
    position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 40;
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid var(--zand); background: var(--creme-op); color: var(--inkt);
    display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 6px 20px rgba(30, 26, 22, .16);
    transition: background .2s ease, color .2s ease, transform .2s ease;
  }
  .naarboven[hidden] { display: none; }
  .naarboven svg { width: 20px; height: 20px; }
  .naarboven:hover { background: var(--inkt); color: var(--creme); transform: translateY(-2px); }
  .naarboven:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; }

  @media (max-width: 40rem) {
    .naarboven { right: 1rem; bottom: 1rem; width: 44px; height: 44px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .naarboven { transition: none; }
  }

  /* ============================================================
     Contactpagina
     ------------------------------------------------------------
     Op een contactpagina zijn het nummer en het mailadres de inhoud,
     geen bijzaak onderaan. Ze staan daarom in een kaart bovenaan, in
     hetzelfde formaat als het bedrag op de prijzenpagina.
     ============================================================ */

  .contactkop__duo {
    display: grid; grid-template-columns: minmax(0, 1fr) 24rem;
    gap: 3.25rem; align-items: center;
  }
  .contactkop__duo > div > p { max-width: 36rem; }

  /* De contactgegevens zijn het hardste stuk van deze pagina, dus de kaart mag dat
     laten zien. Een verlooprand van geel naar rood met een warme gloed erachter, en
     binnenin een licht verloop zodat het nummer in inkt leesbaar blijft. De rand is
     transparant met background-clip, wat een echte verlooprand geeft in plaats van
     een geschilderd blokje eromheen. */
  .contactkaart {
    position: relative;
    border: 2px solid transparent;
    border-radius: var(--radius);
    padding: 2rem; font-style: normal;
    background:
      linear-gradient(158deg, #FFFDF8 0%, #FFF6E9 55%, #FFEFE0 100%) padding-box,
      linear-gradient(135deg, var(--geel) 0%, var(--perzik) 42%, var(--rood) 100%) border-box;
    box-shadow: 0 18px 50px rgba(224, 62, 26, .13), 0 3px 10px rgba(30, 26, 22, .06);
  }

  /* Zachte gloed achter de kaart, in dezelfde familie als de sectiegloed. */
  .contactkaart::after {
    content: ""; position: absolute; z-index: -1;
    inset: 12% -8% -14% -8%;
    background: radial-gradient(60% 60% at 50% 50%, rgba(255, 197, 61, .34), transparent 70%);
    filter: blur(34px); pointer-events: none;
  }
  .contactkaart__wat {
    font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 800; color: var(--groen); margin: 0 0 .75rem;
  }
  .contactkaart__groot {
    font-family: "Archivo Black", Impact, sans-serif;
    font-size: clamp(1.75rem, 2.6vw, 2.125rem); line-height: 1.1;
    letter-spacing: -.02em; color: var(--inkt);
    display: block; text-decoration: none;
  }
  .contactkaart__groot:hover { color: var(--rood-op); }
  .contactkaart__mail {
    display: block; margin-top: .625rem;
    font-weight: 800; font-size: 1.0625rem; color: var(--inkt);
    text-decoration: none; border-bottom: 2px solid var(--zand); padding-bottom: 2px;
    width: fit-content;
  }
  .contactkaart__mail:hover { color: var(--rood-op); border-bottom-color: var(--rood); }
  .contactkaart__adres {
    margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px solid rgba(234, 223, 203, .9);
    font-size: .9375rem; line-height: 1.6; color: #6B5A49;
  }
  .contactkaart a:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; border-radius: 4px; }

  /* ---------- Snelantwoorden ----------
     Elke kaart geeft het antwoord al en linkt pas daarna door. Dat is
     de hele pagina in drie blokken: wij antwoorden voor je belt. */

  .snelantwoorden {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem;
  }
  @media (max-width: 54rem) { .snelantwoorden { grid-template-columns: 1fr; } }

  .snel {
    display: flex; flex-direction: column;
    background: var(--creme); border: 1px solid var(--zand);
    border-radius: var(--radius); padding: 1.75rem;
    text-decoration: none; color: var(--inkt);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .snel:hover { transform: translateY(-3px); border-color: var(--geel); box-shadow: 0 14px 34px rgba(30, 26, 22, .12); }
  .snel:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; }
  .snel__vraag { margin: 0 0 .875rem; font-weight: 800; font-size: 1.0625rem; line-height: 1.35; }
  .snel__cijfer {
    font-family: "Archivo Black", Impact, sans-serif;
    font-size: 2.5rem; line-height: 1; letter-spacing: -.03em; margin: 0 0 .5rem;
  }
  .snel__valuta { margin-right: .04em; }
  .snel__antwoord { margin: 0 0 1.25rem; font-size: .9375rem; line-height: 1.55; color: #6B5A49; }
  .snel__meer { margin-top: auto; font-weight: 800; font-size: .9375rem; color: var(--rood-op); }
  .snel:hover .pijl { transform: translateX(.35rem); }

  /* ---------- Aanvraagformulier ---------- */

  /* Het formulier staat gecentreerd op de pagina, met de kop erboven mee.
     De velden zelf blijven links uitgelijnd, want gecentreerde labels lezen slecht. */
  .aanvraag-sectie { text-align: center; }
  .aanvraag-sectie .overline,
  .aanvraag-sectie .lead { margin-inline: auto; }
  .aanvraag { max-width: 46rem; margin: 2.5rem auto 0; text-align: left; }

  .keuze { border: 0; padding: 0; margin: 0 0 2.25rem; }
  .keuze__legend {
    padding: 0; margin-bottom: .875rem;
    font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 800; color: var(--groen);
  }
  .keuze__opties { display: grid; grid-template-columns: repeat(3, 1fr); gap: .875rem; }
  @media (max-width: 44rem) { .keuze__opties { grid-template-columns: 1fr; } }

  /* position: relative, anders positioneert de verborgen radio zich tegen een
     verder gelegen ouder en springt de pagina bij focus. */
  .keuze__optie { cursor: pointer; position: relative; display: block; }
  .keuze__optie input { position: absolute; opacity: 0; pointer-events: none; }
  .keuze__kaart {
    display: block; height: 100%;
    background: var(--creme-op); border: 2px solid var(--zand);
    border-radius: 14px; padding: 1rem 1.125rem;
    transition: border-color .18s ease, background .18s ease;
  }
  .keuze__titel { display: block; font-weight: 800; font-size: .9375rem; line-height: 1.35; }
  .keuze__uitleg { display: block; margin-top: .25rem; font-size: .8125rem; color: #6B5A49; }
  .keuze__optie input:checked + .keuze__kaart { border-color: var(--rood); background: rgba(224, 62, 26, .06); }
  .keuze__optie input:focus-visible + .keuze__kaart { outline: 3px solid var(--rood); outline-offset: 3px; }
  .keuze__gevolg {
    margin: 1rem 0 0; font-size: .9375rem; color: #6B5A49;
    border-left: 3px solid var(--geel); padding-left: .875rem;
  }

  .velden { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
  @media (max-width: 44rem) { .velden { grid-template-columns: 1fr; } }
  /* De velden zijn <p>, en die dragen globaal max-width: 62ch voor de leesbaarheid.
     Voor een formulierveld is dat verkeerd: het brede tekstvak liep ertegenaan en
     vulde zijn kolom niet. */
  .veld { margin: 0; max-width: none; display: flex; flex-direction: column; gap: .375rem; }
  .veld--breed { grid-column: 1 / -1; }
  .veld label { font-weight: 700; font-size: .9375rem; }
  .veld__eis { font-weight: 400; font-size: .8125rem; color: #6B5A49; margin-left: .375rem; }
  .veld input, .veld select, .veld textarea {
    font: inherit; font-size: 1rem; color: var(--inkt);
    background: var(--creme-op); border: 1px solid var(--zand); border-radius: 12px;
    padding: .75rem .875rem; width: 100%;
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .veld textarea { resize: vertical; min-height: 6rem; }
  .veld input:focus, .veld select:focus, .veld textarea:focus {
    outline: none; border-color: var(--rood);
    box-shadow: 0 0 0 3px rgba(224, 62, 26, .18);
  }

  .aanvraag__voet {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
    margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--zand);
  }
  .aanvraag__nota { margin: 0; font-size: .9375rem; color: #6B5A49; }

  /* ---------- Foutstaat van het formulier ----------
     Deze staat moest ontworpen worden voor de omzetting naar PHP, anders bepaalt
     Gravity Forms hoe een fout eruitziet. De melding staat bij het veld zelf,
     niet enkel bovenaan, en zegt wat je moet doen in plaats van wat er mis is. */

  .veld__fout {
    display: none; font-size: .875rem; font-weight: 600; color: var(--rood-op);
    margin: 0; align-items: center; gap: .375rem;
  }
  .veld--mis .veld__fout { display: flex; }
  .veld--mis input, .veld--mis select, .veld--mis textarea {
    border-color: var(--rood); background: rgba(224, 62, 26, .04);
  }
  .veld__fout::before {
    content: "!"; flex: 0 0 auto;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--rood); color: var(--creme);
    font-size: .6875rem; font-weight: 800; line-height: 16px; text-align: center;
  }

  /* Samenvatting bovenaan het formulier. Krijgt focus na een mislukte poging,
     zodat wie met het toetsenbord of een schermlezer werkt meteen weet wat er scheelt. */
  .aanvraag__melding {
    display: none; margin: 0 0 1.5rem; padding: 1rem 1.125rem;
    border-radius: 14px; border: 2px solid var(--rood);
    background: rgba(224, 62, 26, .06); font-weight: 600;
  }
  .aanvraag__melding:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; }
  .aanvraag--mis .aanvraag__melding { display: block; }

  /* Bewijsregel boven het formulier. Het aantal is verifieerbaar, de citaten zijn er nog
     niet. Bewust geen kaart of kader: dit moet vertrouwen wekken vlak voor de invulvelden,
     niet de aandacht van het formulier wegnemen. */
  .aanvraag__bewijs {
    max-width: 650px; margin: 1.25rem auto 0;
    font-size: .9375rem; color: #6B5A49;
  }
  .aanvraag__bewijs b {
    font-family: "Archivo Black", Impact, sans-serif; font-weight: 400;
    font-size: 1.5rem; color: var(--rood); margin-right: .125rem;
  }

  /* Regel over wat er met de gegevens gebeurt. Hoort bij de knop, niet in de voettekst. */
  /* Bevestiging dat de datum uit de agenda is meegekomen. */
  .aanvraag__uitagenda {
    max-width: 46rem; margin: .625rem auto 0;
    font-size: .9375rem; font-weight: 700; color: var(--groen);
  }

  .aanvraag__privacy { margin: .875rem 0 0; font-size: .875rem; color: #6B5A49; }

  /* Een regel voor wie namens een vereniging of een bedrijf boekt. Die groep heeft
     andere vragen dan een particulier en herkent zich anders in geen enkele keuzekaart. */
  .keuze__zakelijk { margin: .75rem 0 0; font-size: .875rem; color: #6B5A49; }

  /* Voetlinks haalden 23 px hoogte waar WCAG 2.2 er 24 vraagt. Een pixel te kort,
     en een pixel is genoeg om te zakken. */
  body > footer a { display: inline-block; min-height: 24px; line-height: 24px; }
  body > footer .socials a { display: inline-flex; }

  /* ---------- De route ---------- */

  .route { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; margin-top: 2.5rem; }
  @media (max-width: 48rem) { .route { grid-template-columns: 1fr; } }
  .route__optie h3 { font-size: 1.125rem; margin-bottom: .625rem; }
  .route__optie p { margin-bottom: .75rem; }
  .route__optie p:last-child { margin-bottom: 0; }

  @media (max-width: 62rem) {
    .contactkop__duo { grid-template-columns: 1fr; gap: 2.5rem; }
    .contactkop__duo > div > p { max-width: none; }
    .contactkaart { max-width: 24rem; }
  }

  /* ================================================================
     Sfeerbeelden
     ================================================================ */

/* ---------- Kop van Sfeerbeelden ----------
     Zesde opzet, naar de tweede referentie van Thomas. De vijf eerdere en waarom ze
     wegvielen staan in de changelog. Deze is: tekst gecentreerd bovenaan, daaronder
     een strook beelden over de volle breedte die in een boog staat en traag schuift.

     De boog komt van perspectief, niet van een draaiing in het plat vlak. Elke kaart
     draait om haar eigen verticale as, en hoe verder ze van het midden staat hoe
     schuiner. Doordat de dichtstbijzijnde rand groter afbeeldt lijken de buitenste
     kaarten hoger dan die in het midden, precies zoals in de referentie.

     De hoek hangt af van waar een kaart op dat moment staat, dus die kan niet in de
     CSS vastliggen: zodra de strook schuift zou de boog meeschuiven en breken. Het
     script rekent hem per beeldje uit. Het leest daarvoor niets uit de opmaak, het
     rekent met de vaste stapafstand, anders forceer je elke beeldje een herberekening
     van de hele pagina. */

  /* De inhoud stond 24 px onder de sectierand met 99 px wit eronder: te hoog en te
     ver van de strook. Nu andersom verdeeld. */
  .sfeerkop {
    text-align: center;
    padding-top: 4rem; padding-bottom: 1.25rem;
  }
  .sfeerkop .kruimels { text-align: left; margin: 0 0 2.5rem; }
  /* Elke <p> draagt globaal max-width: 62ch. Gecentreerde tekst centreert dan binnen
     die 62ch en staat dus links in de kolom. */
  .sfeerkop .overline, .sfeerkop .lead, .sfeerkop__acties, .sfeerkop__nota { margin-inline: auto; }

  /* Een gewicht, zoals op de vier andere paginas. De referentie zette de eerste regel
     in een lichter lettertype en de tweede vol. Dat stond op zich goed, maar het maakte
     deze pagina de enige met een tweedelige titel. Terugzetten is een span met .licht
     rond de eerste regel plus de regels die hier stonden. */
  .sfeerkop__titel { max-width: 18ch; margin: 0 auto; }

  .sfeerkop__acties {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
    margin-top: 1.75rem;
  }
  .sfeerkop__nota { margin-top: 1.125rem; font-size: .9375rem; color: #6B5A49; }
  /* Feestrood haalt op 15 px maar 4,02 tegen creme. Het diepere rood haalt 5,9. */
  .sfeerkop__nota b { color: var(--rood-op); font-family: "Archivo Black", Impact, sans-serif; font-weight: 400; }

/* ---------- De boogstrook, tussen de twee secties ----------
     Geen slider ín de kop maar de scheiding tússen de kop en de galerij. De kop is
     creme, de galerij creme-op, en de strook loopt in een verloop van de ene kleur naar
     de andere. Zo hoort ze bij geen van beide en verbindt ze allebei.

     STATISCHE VERSIE. Eerst de vorm exact, animeren komt daarna.

     Heet .strook en niet .boog. Die naam was al bezet door de gebogen scheidingslijn
     onder de hero van de homepage, absoluut gepositioneerd en 9 rem hoog.

     ── Waarom perspective() in de transform staat en niet op de ouder ──
     Met `perspective` op de ouder ligt het projectiemiddelpunt in het midden van de
     strook. Een kaart die daar ver vandaan staat wordt dan ook in de breedte uitgerekt,
     en dat verschil groeit met de afstand: 236 px in het midden tegenover 323 aan de
     rand, bij een opmaakbreedte van 272. Met een vaste tussenruimte kan de witruimte
     dan nooit gelijk zijn. Als functie in de transform ligt het middelpunt in de kaart
     zelf, dus hangt de breedte alleen van de hoek af.

     ── Waarom geen skewY ──
     Een schuintrekking houdt de breedte gelijk, maar maakt van elke foto een
     parallellogram: beide verticale randen blijven even hoog. Een trapezium vraagt dat
     de rand die naar je toe komt hoger is, en dat kan alleen met perspectief.

     ── Waarom de waarden per kaart uitgerekend zijn ──
     Eerst gaf ik elke kaart dezelfde hoek per stap en dezelfde rek per stap. De
     randhoogtes liepen dan 432, 367, 382, 352 ... : de richting keerde vier keer om en
     de lijn knikte. Nu ligt er EEN kromme over de hele strook en landt elke rand daar
     exact op, dus sluit de rechterrand van elke kaart aan op de linkerrand van de
     volgende. Uitgerekend in `boog_reken.py`, de randen lopen van 337 naar 261 en terug
     zonder één omkering.

     Per kaart staan er drie waarden inline:
       --hoek  de draaiing, volgt uit de verhouding tussen haar twee randhoogtes
       --rek   verticale rek, zodat de randen op de kromme uitkomen
       --f     hoeveel smaller ze afbeeldt door de verkorting

     De negatieve zijmarge is precies de helft van wat de kaart in de breedte verliest,
     zodat de zichtbare witruimte overal gelijk blijft. */

  .strook {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* De ruimte boven en onder schaalt mee met de kaart. Een vaste 4 rem volstond op
       1440 px, maar op 2560 wordt een kaart 410 px breed en 638 px hoog terwijl de
       opmaak 492 zegt: de bovenste en onderste rand liepen dan buiten de strook.
       0,28 van de breedte dekt de 0,178 die de rek erbovenop legt, met marge. */
    padding-block: calc(var(--kaart-breed) * 0.28);
    background: linear-gradient(to bottom, var(--creme) 0%, var(--creme-op) 100%);
  }

  .strook__spoor { display: flex; justify-content: center; gap: var(--kaart-gat); }

  .strook__kaart {
    flex: 0 0 auto; margin: 0;
    width: var(--kaart-breed);
    /* Het perspectief schaalt mee met de kaartbreedte. Een vaste waarde in pixels zou
       de vorm bij elk breekpunt anders maken, want de diepte van een rand hangt af van
       de halve breedte. Zo blijft de meetkunde op elk scherm gelijkvormig. */
    transform: scaleY(var(--rek))
               perspective(calc(var(--kaart-breed) * 3.24))
               rotateY(var(--hoek));
    margin-inline: calc((var(--f) - 1) * var(--kaart-breed) / 2);
  }
  .strook__kaart img {
    display: block; width: 100%; height: auto; aspect-ratio: 5 / 6;
    object-fit: cover; border-radius: 6px; background: var(--zand);
    box-shadow: 0 14px 34px rgba(30, 26, 22, .18);
  }

  /* De kaartbreedte volgt de schermbreedte, niet een reeks breekpunten. Reden: de
     strook moet altijd breder zijn dan het scherm, zodat de buitenste kaarten er half
     aflopen en er nergens wit langs de rand overblijft. Met vaste maten klopte dat maar
     bij een enkele breedte: op 1600 px bleef er ruimte over.

     De som achter 16vw: zeven kaarten van gemiddeld 0,97 na de verkorting plus zes
     tussenruimtes van 0,111 maakt 119 procent van het scherm. Er valt dus 9,6 procent
     per kant weg en van de buitenste kaart blijft 40 procent staan.

     De ondergrens van 9,5 rem is er voor de telefoon, waar 16vw op een postzegel
     uitkomt. De tussenruimte volgt uit de breedte, zodat de hele boog gelijkvormig
     blijft op elk scherm. */
  .strook {
    --kaart-breed: max(9.5rem, 16vw);
    --kaart-gat: calc(var(--kaart-breed) * 0.111);
  }

  /* ---------- Filterbalk ----------
     Blijft plakken onder de kop, want bij 32 beelden ben je de filters kwijt
     tegen dat je beslist dat je alleen trouwfeesten wil zien. */

  /* `position: sticky` werkt niet binnen een voorouder met `overflow: hidden`: die
     maakt een scrollcontainer, en de balk plakt dan aan iets dat nooit scrollt. Elke
     sectie draagt die overflow voor de achtergrondgloed, dus deze balk heeft nooit
     geplakt. `overflow: clip` knipt wel bij maar maakt geen scrollcontainer. Browsers
     die clip niet kennen houden de hidden uit `.sectie` aan, dus de gloed blijft hoe
     dan ook binnen het kader. */
  #galerij { overflow: clip; }

  /* De voeler staat vlak boven de balk. Zodra hij uit beeld schuift, plakt de balk.
     Zo weet het script wanneer de scheidingslijn nodig is. */
  .filterbalk__voeler { height: 1px; margin-bottom: -1px; }

  .filterbalk {
    position: sticky; top: 78px; z-index: 20;
    /* Stond op 0 boven en 2 rem onder: de pillen kleefden tegen de lead en tegen het
       raster. Nu 2 rem boven en 3 rem onder. */
    margin: 2rem 0 3rem; padding: 1rem 0;
    background: rgba(255, 253, 248, .88);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: box-shadow .22s ease, border-color .22s ease;
    border-bottom: 1px solid transparent;
  }
  /* De lijn hoort er alleen te staan als de balk echt plakt en er beelden onderdoor
     schuiven. In rust las ze als een streep zonder reden midden in de sectie. */
  .filterbalk--vast {
    border-bottom-color: var(--zand);
    box-shadow: 0 10px 24px rgba(30, 26, 22, .07);
  }
  @media (max-width: 44rem) { .filterbalk { top: 66px; } }
  @media (prefers-reduced-motion: reduce) { .filterbalk { transition: none; } }

  .filters {
    display: flex; flex-wrap: wrap; gap: .5rem;
    list-style: none; padding: 0; margin: 0;
  }
  /* Onder de 44 rem passen de pillen niet meer op twee regels zonder de halve
     pagina te vullen. Dan schuiven ze horizontaal. */
  @media (max-width: 44rem) {
    .filters {
      flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
      padding-bottom: .25rem; scroll-snap-type: x proximity;
    }
    .filters::-webkit-scrollbar { display: none; }
    .filters li { scroll-snap-align: start; }
  }

  .filter {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 2px solid var(--zand); background: var(--creme-op);
    color: var(--inkt); border-radius: var(--pil);
    padding: .5rem 1rem; font: inherit; font-weight: 700; font-size: .9375rem;
    cursor: pointer; white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
  }
  .filter:hover { border-color: var(--rood); }
  .filter:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; }
  .filter__aantal {
    font-family: "Archivo Black", Impact, sans-serif; font-weight: 400;
    font-size: .75rem; line-height: 1;
    background: var(--creme); color: #6B5A49;
    border-radius: var(--pil); padding: .25rem .4375rem;
    transition: background .18s ease, color .18s ease;
  }
  /* Het merkrood haalt met creme-op maar 4,24 op tekst van 15 px, en het doorschijnende
     badge zakte naar 3,19. Vandaar het diepere rood en een omgekeerd badge. */
  .filter[aria-pressed="true"] {
    background: var(--rood-op); border-color: var(--rood-op); color: var(--creme-op);
  }
  .filter[aria-pressed="true"] .filter__aantal { background: var(--creme-op); color: var(--rood-op); }
  @media (prefers-reduced-motion: reduce) { .filter, .filter__aantal { transition: none; } }

  /* ---------- Het raster ----------
     Vier kolommen die dicht opeen vullen. Liggende beelden krijgen twee kolommen
     en staande mogen twee rijen hoog, anders wordt het een postzegelverzameling.
     grid-auto-flow: dense vult de gaten die daardoor ontstaan. */

  /* Elke tegel is even hoog en varieert alleen in breedte. Dat is geen esthetische
     keuze maar een rekenkundige. Met tegels die meer dan een rij beslaan mag de
     dichte vulling ze op elke rijlijn laten starten, en dan schuift alles als
     metselwerk in elkaar met gaten ertussen: 29 procent van het raster stond leeg.
     Een tegel is nu exact een rij hoog, dus elke rij vult exact vier kolommen.
     Een enkele tegel is ongeveer 3:4 en dus staand, want 22 van de 32 bronbeelden
     zijn staande telefoonfotos. Een brede tegel is ongeveer 3:2 en krijgt de
     liggende beelden. */
  .galerij {
    display: grid; grid-auto-flow: dense;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 23rem; gap: .875rem;
  }
  @media (max-width: 68rem) { .galerij { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 26rem; } }
  @media (max-width: 46rem) { .galerij { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 13rem; gap: .625rem; } }

  .gtegel {
    position: relative; margin: 0; padding: 0; border: 0;
    grid-column: span 1; grid-row: span 1;
    border-radius: 16px; overflow: hidden; cursor: zoom-in;
    background: var(--zand);
    transition: opacity .28s ease, transform .28s ease;
  }
  .gtegel--breed { grid-column: span 2; }

  .gtegel img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .7, .25, 1);
  }
  .gtegel:hover img, .gtegel:focus-visible img { transform: scale(1.05); }
  .gtegel:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; }

  /* Het label schuift pas op bij aanwijzen. Altijd tonen zou 32 keer hetzelfde
     woord over de beelden leggen. */
  .gtegel__label {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 2.5rem .875rem .75rem;
    background: linear-gradient(to top, rgba(30, 26, 22, .78), rgba(30, 26, 22, 0));
    color: var(--creme-op); font-size: .8125rem; font-weight: 700;
    letter-spacing: .04em; text-align: left;
    /* Het verloop is meestal donker genoeg, maar bij een lichte onderrand niet.
       De schaduw houdt het label leesbaar op elke foto. */
    text-shadow: 0 1px 3px rgba(30, 26, 22, .8);
    opacity: 0; transform: translateY(.5rem);
    transition: opacity .25s ease, transform .25s ease;
  }
  .gtegel:hover .gtegel__label, .gtegel:focus-visible .gtegel__label { opacity: 1; transform: none; }

  /* Weggefilterd. Eerst wegdoven, dan pas uit het raster halen, anders klapt
     alles ineens door elkaar. */
  .gtegel--weg { opacity: 0; transform: scale(.94); pointer-events: none; }
  .gtegel[hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    .gtegel, .gtegel img, .gtegel__label { transition: none; }
  }

  .galerij__telling { margin: 1.5rem 0 0; font-size: .9375rem; color: #6B5A49; }

  /* ---------- Lichtbak ----------
     Uitzondering op de brandbookregel dat er geen donkere vlakken zijn. Dit is
     geen sectie maar een overlay: een beeld op creme verliest de helft van zijn
     diepte, en elke lichtbak ter wereld is donker omdat het oog dat contrast
     nodig heeft. De pagina eronder blijft licht. */

  .lichtbak {
    position: fixed; inset: 0; z-index: 90;
    display: none; place-items: center;
    background: rgba(30, 26, 22, .92);
    padding: 4.5rem 1.25rem 5.5rem;
  }
  .lichtbak.open { display: grid; }
  .lichtbak__beeld {
    max-width: min(96vw, 68rem); max-height: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
  }
  .lichtbak__beeld img {
    display: block; max-width: 100%; max-height: calc(100vh - 12rem);
    width: auto; height: auto; border-radius: 14px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
  }
  .lichtbak__onder {
    display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
    justify-content: center; text-align: center;
    color: rgba(255, 253, 248, .92); font-size: .9375rem; max-width: 46rem;
  }
  .lichtbak__soort {
    font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 800; color: var(--geel);
  }
  .lichtbak__teller { font-size: .8125rem; color: rgba(255, 253, 248, .68); }

  .lichtbak__knop {
    position: absolute; z-index: 2;
    width: 52px; height: 52px; border-radius: 50%;
    border: 1px solid rgba(255, 253, 248, .28);
    background: rgba(30, 26, 22, .55); color: var(--creme-op);
    display: grid; place-items: center; cursor: pointer;
    transition: background .18s ease, transform .18s ease;
  }
  .lichtbak__knop:hover { background: var(--rood); transform: scale(1.06); }
  .lichtbak__knop:focus-visible { outline: 3px solid var(--geel); outline-offset: 3px; }
  .lichtbak__knop svg { width: 24px; height: 24px; }
  .lichtbak__sluit { top: 1.25rem; right: 1.25rem; }
  .lichtbak__vorige { left: 1.25rem; top: 50%; transform: translateY(-50%); }
  .lichtbak__volgende { right: 1.25rem; top: 50%; transform: translateY(-50%); }
  .lichtbak__vorige:hover, .lichtbak__volgende:hover { transform: translateY(-50%) scale(1.06); }
  @media (max-width: 46rem) {
    .lichtbak { padding: 4rem .75rem 6.5rem; }
    .lichtbak__vorige { left: .75rem; top: auto; bottom: 1.25rem; transform: none; }
    .lichtbak__volgende { right: .75rem; top: auto; bottom: 1.25rem; transform: none; }
    .lichtbak__vorige:hover, .lichtbak__volgende:hover { transform: scale(1.06); }
  }
  @media (prefers-reduced-motion: reduce) { .lichtbak__knop { transition: none; } }

  /* ---------- Tweeluik: dezelfde zaal, twee keer anders ---------- */
  .tweeluik { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.5rem; }
  @media (max-width: 46rem) { .tweeluik { grid-template-columns: 1fr; } }
  .tweeluik figure { margin: 0; }
  .tweeluik img {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
    object-fit: cover; border-radius: var(--radius);
    box-shadow: 0 18px 44px rgba(30, 26, 22, .16);
  }
  .tweeluik figcaption { margin-top: .875rem; font-size: .9375rem; color: #6B5A49; max-width: none; }
  .tweeluik figcaption b { display: block; color: var(--inkt); font-size: 1.0625rem; margin-bottom: .125rem; }


  /* ---------- Verhalenkaarten ----------
     Twee van de drie hebben geen beeld, dus ze zijn op tekst gebouwd en niet op een
     lege fotokader.

     Er stond eerst een groot volgnummer in de hoek van elke kaart. Dat is eruit: op de
     rest van de site staat een groot cijfer alleen als het iets voorstelt (€900, 160
     stoelen, 1 uur vrijblijvend). Een 1, 2 en 3 als versiering is een patroon dat
     nergens anders voorkomt, en dan valt het op om de verkeerde reden. */

  .verhalen {
    list-style: none; padding: 0;
    margin: 2.5rem 0 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
  }
  @media (max-width: 60rem) { .verhalen { grid-template-columns: 1fr; } }

  .verhaal {
    background: var(--creme-op); border-radius: var(--radius);
    padding: 1.75rem 1.5rem 1.625rem;
  }
  .verhaal__soort {
    display: block;
    font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 800; color: var(--groen); margin-bottom: .625rem;
  }
  .verhaal h3 { font-size: 1.1875rem; line-height: 1.25; }
  .verhaal p { margin: .75rem 0 0; font-size: .9375rem; max-width: none; }

  /* ================================================================
     Beschikbaarheid
     ================================================================ */

  /* De agenda staat bovenaan, zonder intro en zonder sfeerbeeld. Dat is een eis uit
     `pagina-beschikbaarheid.md`: een deel van de bezoekers leest hier verder niets. */

  .agendakop { padding-bottom: 3rem; }

  .agenda {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem;
    margin-top: 2rem;
  }
  @media (max-width: 56rem) { .agenda { grid-template-columns: 1fr; } }

  /* De twee maanden liepen visueel in elkaar over: dezelfde tegels, dezelfde afstand,
     alleen een kop ertussen. Een streep plus meer ruimte maakt er twee blokken van.

     De streep staat op het omhulsel en niet op de tabel. Het bijschrift van een tabel
     valt namelijk buiten haar kader, dus een rand op de tabel begon onder de maandnaam
     en hing er los onder. Dat was de rare lijn.

     Welk omhulsel de streep krijgt bepaalt het script, want er staan altijd maar twee
     maanden in beeld. Een nth-of-type-regel zou de balk en het blok eronder ook raken,
     dat zijn dezelfde soort elementen in hetzelfde raster.

     De streep is een inkttint en geen zand. Zand is de randkleur van de site, maar op
     creme haalt die zo weinig verschil dat je de scheiding niet ziet.

     ⚠ De linkermaand kreeg die padding nooit (enkel het script wijst "--rechts" toe aan
     de tweede zichtbare maand), dus haar tegels vulden een bredere kolom en oogden merkbaar
     groter dan de rechtermaand (Sven, 09-09: "linkse kalender is groter, is dat een reden?").
     `padding-right` hieronder op de linkermaand maakt beide kolommen weer even breed —
     enkel op desktop, want bij één maand op smal scherm zou dat gewoon lucht toevoegen. */
  .maandhouder--rechts {
    border-left: 1px solid rgba(30, 26, 22, .13);
    padding-left: 2rem;
  }
  @media (min-width: 56.0625rem) {
    .maandhouder:not(.maandhouder--rechts) { padding-right: 2rem; }
  }

  .agenda__balk {
    grid-column: 1 / -1;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .agenda__balk-links { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .agenda__bereik { margin: 0; font-weight: 700; }

  /* Jaartal-snelspring (09-09): enkel aanwezig in de markup als het 6-maandenvenster over
     een jaargrens loopt, dus geen extra zichtbaarheidsregel hier nodig. */
  .agenda__jaren { display: flex; gap: .375rem; }
  .agenda__jaar {
    padding: .25rem .625rem; border-radius: var(--pil);
    border: 2px solid var(--zand); background: var(--creme-op); color: #6B5A49;
    font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
  }
  .agenda__jaar:hover { border-color: var(--rood); }
  .agenda__jaar:focus-visible { outline: 3px solid var(--rood); outline-offset: 2px; }
  .agenda__jaar--actief { border-color: var(--rood); color: var(--inkt); }

  .agenda__knoppen { display: flex; gap: .5rem; }
  .agenda__knop {
    width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid var(--zand); background: var(--creme-op); color: var(--inkt);
    display: grid; place-items: center; cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
  }
  .agenda__knop:hover:not(:disabled) { border-color: var(--rood); }
  .agenda__knop:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; }
  .agenda__knop:disabled { opacity: .35; cursor: default; }
  .agenda__knop svg { width: 20px; height: 20px; }
  @media (prefers-reduced-motion: reduce) { .agenda__knop { transition: none; } }

  .maand { border-collapse: collapse; width: 100%; }
  .maand__kop {
    caption-side: top; text-align: left;
    font-family: "Archivo Black", Impact, sans-serif; font-weight: 400;
    font-size: 1.125rem; margin-bottom: .75rem;
    /* Eerste letter van een maandnaam blijft klein in het Nederlands, maar in een kop
       leest dat als een fout. Alleen visueel omhoog, de tekst zelf blijft correct. */
    text-transform: capitalize;
  }
  .maand th {
    font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
    color: #6B5A49; font-weight: 800; padding-bottom: .5rem;
  }
  .maand th abbr { text-decoration: none; }
  .maand td { padding: 2px; }

  /* `max-width` begrenst hoe groot een tegel op een brede kolom mag worden (Sven, 09-09:
     "vind persoonlijk dat dit wat lager mag [...] zie je de onderkant niet goed met de
     reserveer datum") — zonder plafond schaalde `width:100%` + `aspect-ratio:1` gewoon mee
     met de kolombreedte, en werd de hele agenda onnodig hoog op brede schermen. 68px is
     bewust géén ronde maat: dat was de effectieve tegelgrootte van de rechtermaand vóór deze
     hele wijziging (532px kolom min 4rem opvulling, gedeeld door 7) — Sven vond net die maat
     ideaal, dus het plafond is nu op precies dat teruggezet i.p.v. de eerdere 44px. */
  .dag {
    width: 100%; max-width: 68px; aspect-ratio: 1; min-height: 34px; margin: 0 auto;
    display: grid; place-items: center;
    border: 1px solid var(--zand); border-radius: 10px;
    background: var(--creme-op); color: var(--inkt);
    font: inherit; font-size: .9375rem; font-weight: 600;
    cursor: pointer; position: relative;
    transition: border-color .15s ease, background .15s ease;
  }
  .dag:hover { border-color: var(--rood); }
  .dag:focus-visible { outline: 3px solid var(--rood); outline-offset: 2px; }

  /* Voorbij: staat er nog wel, want een maand met gaten leest verkeerd, maar hij doet
     niets en vraagt geen aandacht. */
  .dag--voorbij {
    background: transparent; border-color: transparent; color: #6B5A49;
    cursor: default;
  }
  /* Zand haalde maar 1,23 tegen creme: niet te lezen. Een voorbije dag hoeft geen
     aandacht te trekken, maar wie wil weten op welke dag de eerste viel moet het wel
     kunnen zien. Het ontbreken van de tegel zegt al genoeg dat er niets te kiezen valt. */
  .dag--voorbij .dag__cijfer { opacity: .55; }

  /* Bezet: gedempt en met een streep, zodat de status ook zonder kleur leesbaar is.
     Kleur alleen zou het onbruikbaar maken voor wie kleuren niet onderscheidt. */
  .dag--bezet {
    background: var(--creme); border-color: transparent; color: #6B5A49;
  }
  .dag--bezet .dag__cijfer { text-decoration: line-through; text-decoration-thickness: 1.5px; }

  /* Deels vrij: een balkje onderaan in plaats van een tweede kleurvlak. */
  .dag--deels::after {
    content: ""; position: absolute; left: 22%; right: 22%; bottom: 5px;
    height: 3px; border-radius: 2px; background: var(--geel);
  }

  /* Bewijs en bereik onder de agenda. Zes audits op rij stond er op geen enkele pagina
     een bewijsregel, terwijl 140 beoordelingen een verifieerbaar cijfer is. */
  /* `max-width: none` was hier nodig om de globale 62ch los te laten, maar daardoor liep de
     regel tot 1.128 px. Nu een leesmaat in plaats van geen maat. */
  .agenda__onder {
    grid-column: 1 / -1; margin: .5rem 0 0; max-width: 650px;
    font-size: .9375rem; color: #6B5A49;
  }
  .agenda__onder b {
    font-family: "Archivo Black", Impact, sans-serif; font-weight: 400;
    font-size: 1.25rem; color: var(--rood-op); margin-right: .125rem;
  }
  .agenda__onder span { display: block; margin-top: .25rem; }

  /* Wat de reserveerknop doet. Vier van de vijf persona's vroegen zich af waartoe ze
     zich verbinden, en het antwoord is: tot niets. */
  .bezetblok__nota { flex-basis: 100%; margin-top: .25rem; font-size: .875rem; color: #6B5A49; }

  /* De bediening met het toetsenbord staat er ook geschreven. Een raster met pijltoetsen
     is de juiste oplossing, maar niemand ontdekt hem door te proberen. */
  .agenda__hint {
    grid-column: 1 / -1; margin: .25rem 0 0; max-width: none;
    font-size: .875rem; color: #6B5A49;
  }
  .agenda__hint kbd {
    font: inherit; font-weight: 700; font-size: .8125rem;
    background: var(--creme-op); border: 1px solid var(--zand);
    border-radius: 6px; padding: .0625rem .375rem;
  }

  .agenda__legende {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
    margin: .5rem 0 0; padding: 0; list-style: none;
    font-size: .875rem; color: #6B5A49;
  }
  .agenda__legende li { display: flex; align-items: center; gap: .625rem; }
  .agenda__staal {
    width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
    border: 1px solid var(--zand); background: var(--creme-op); position: relative;
  }
  .agenda__staal--bezet { background: var(--creme); border-color: transparent; }
  .agenda__staal--bezet::before {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 14px; height: 1.5px; background: #6B5A49;
  }
  .agenda__staal--deels::after {
    content: ""; position: absolute; left: 22%; right: 22%; bottom: 4px;
    height: 3px; border-radius: 2px; background: var(--geel);
  }

  /* ---------- Wat er gebeurt als je op een bezette dag klikt ----------
     Zonder dit blok is die bezoeker weg, en dat is de duurste bezoeker die je hebt.
     Vandaar dat het geen tekstregel is maar een blok met de eerstvolgende vrije dagen
     erin, klaar om aan te klikken. */

  /* Eén blok voor alle drie de gevallen. Klik je een vrije dag aan, dan staat hier wat
     je ermee kan doen. Klik je een bezette dag aan, dan staan hier de alternatieven.
     Zonder dat blok gebeurt er niets als je op een datum klikt, en dan is de agenda
     een plaatje in plaats van een beginpunt. */
  .bezetblok {
    grid-column: 1 / -1;
    margin: 0; padding: 1.5rem 1.5rem 1.375rem;
    border-radius: var(--radius); border: 2px solid var(--geel);
    background: var(--creme-op);
  }
  .bezetblok--vrij { border-color: var(--groen); }
  .bezetblok__acties { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.125rem 0 0; }
  .bezetblok[hidden] { display: none; }
  .bezetblok__kop { margin: 0; font-weight: 800; font-size: 1.0625rem; }
  .bezetblok__uitleg { margin: .375rem 0 0; font-size: .9375rem; color: #6B5A49; max-width: 46ch; }
  .bezetblok__dagen { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
  .bezetblok__dag {
    border: 2px solid var(--zand); background: var(--creme-op); color: var(--inkt);
    border-radius: var(--pil); padding: .5rem 1rem;
    font: inherit; font-weight: 700; font-size: .9375rem; cursor: pointer;
  }
  .bezetblok__dag:hover { border-color: var(--rood); }
  .bezetblok__dag:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; }

  /* Voorwaarden-vinkje (element 4.4) — vóór de actieknoppen, want de "Reserveer"-knop
     erna staat uit tot dit is aangevinkt. */
  .bezetblok__voorwaarden {
    margin: 1.125rem 0 0; padding: 1rem 1.125rem;
    border-radius: calc(var(--radius) - 8px); background: var(--creme);
  }
  .bezetblok__voorwaarden[hidden] { display: none; }
  .bezetblok__voorwaarden-titel { margin: 0 0 .5rem; font-weight: 800; font-size: .9375rem; }
  .bezetblok__voorwaarden-lijst { margin: 0; padding: 0 0 0 1.125rem; font-size: .875rem; color: #6B5A49; }
  .bezetblok__voorwaarden-lijst li { margin: .25rem 0; }
  .bezetblok__akkoord {
    display: flex; align-items: flex-start; gap: .5rem;
    margin-top: .75rem; font-size: .875rem; font-weight: 700; cursor: pointer;
  }
  .bezetblok__akkoord input { margin-top: .1875rem; width: 1.125rem; height: 1.125rem; accent-color: var(--rood); cursor: pointer; }

  /* Knop uit tot het vinkje aanstaat — zelfde opacity-taal als .agenda__knop:disabled. */
  .knop--uit { opacity: .4; pointer-events: none; }

  /* De gekozen dag blijft aangeduid, zodat je na het scrollen nog weet waar je stond. */
  .dag--gekozen { border-color: var(--rood); border-width: 2px; background: rgba(224, 62, 26, .06); }

  /* Dagen tussen een gekozen start- en einddag van een periode — zachter dan de
     eindpunten zelf, zodat start/eind duidelijk blijven aanwijsbaar. */
  .dag--periode { background: rgba(224, 62, 26, .06); border-radius: 0; }

  /* ---------- De tien stappen ---------- */
  .stappen {
    list-style: none; counter-reset: stap; padding: 0;
    margin: 2.5rem 0 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: .875rem 2.5rem;
  }
  @media (max-width: 52rem) { .stappen { grid-template-columns: 1fr; } }
  .stap {
    counter-increment: stap;
    display: grid; grid-template-columns: auto 1fr; gap: .875rem;
    align-items: baseline;
    padding: .625rem 0; border-bottom: 1px solid var(--zand);
  }
  /* Dit nummer is wel inhoud: het zegt in welke volgorde je de stappen doorloopt.
     Het beslaat beide rijen, want er staan drie onderdelen in twee kolommen: zonder
     deze plaatsing schoof het label naar rechts en zakte de omschrijving eronder. */
  .stap::before {
    content: counter(stap);
    grid-column: 1; grid-row: 1 / span 2;
    font-family: "Archivo Black", Impact, sans-serif; font-weight: 400;
    font-size: 1rem; color: var(--rood-op); min-width: 1.25rem;
  }
  .stap b { grid-column: 2; grid-row: 1; font-weight: 800; }
  .stap span { grid-column: 2; grid-row: 2; font-size: .9375rem; color: #6B5A49; margin-top: .125rem; }

  /* ---------- Drie manieren om af te ronden ---------- */
  .afronden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
  @media (max-width: 60rem) { .afronden { grid-template-columns: 1fr; } }
  .afrond {
    background: var(--creme-op); border-radius: var(--radius);
    padding: 1.75rem 1.5rem 1.625rem;
    display: flex; flex-direction: column;
  }
  .afrond--uit { border: 2px solid var(--rood); }
  .afrond__merk {
    align-self: flex-start; margin-bottom: .75rem;
    background: var(--rood-op); color: var(--creme-op);
    border-radius: var(--pil); padding: .25rem .625rem;
    font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800;
  }
  .afrond h3 { font-size: 1.1875rem; line-height: 1.25; }
  .afrond p { margin: .625rem 0 0; font-size: .9375rem; max-width: none; }

  /* ================================================================
     Feestzaal in het Waasland
     ================================================================ */

  .regiokop__duo {
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem;
    align-items: start; margin-top: 1.5rem;
  }
  @media (max-width: 62rem) { .regiokop__duo { grid-template-columns: 1fr; gap: 2.25rem; } }
  .regiokop__duo > div > p { max-width: 38rem; }

  /* Adreskaart. Op een regiopagina is het adres geen voetnoot maar het antwoord op de
     vraag waarmee de bezoeker binnenkomt: waar ligt dat dan. */
  .adreskaart {
    font-style: normal;
    background: var(--creme-op); border: 1px solid var(--zand);
    border-radius: var(--radius); padding: 1.75rem 1.5rem;
  }
  .adreskaart__wat {
    margin: 0; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 800; color: var(--groen);
  }
  .adreskaart__adres {
    margin: .625rem 0 0; max-width: none;
    font-family: "Archivo Black", Impact, sans-serif; font-weight: 400;
    font-size: 1.3125rem; line-height: 1.3;
  }
  .adreskaart__route { margin: 1.25rem 0 0; padding-top: 1.125rem; border-top: 1px solid var(--zand); }
  .adreskaart__route > div + div { margin-top: .875rem; }
  .adreskaart__route dt {
    font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 800; color: #6B5A49; margin-bottom: .1875rem;
  }
  .adreskaart__route dd { margin: 0; font-weight: 600; }

  /* ---------- De rijtijden ----------
     Dit is de kern van de pagina. Elke gemeente uit het keywordonderzoek staat er met een
     eigen cijfer, en dat is wat deze ene pagina onderscheidt van twaalf dunne varianten
     die elkaar beconcurreren. */

  .afstandduo {
    display: grid; grid-template-columns: minmax(0, 22rem) 1fr; gap: 2.5rem 3.5rem;
    margin-top: 2.5rem; align-items: stretch;
  }
  /* De kaart rekt mee met de tabel ernaast, anders staat er een laag blokje naast een
     hoge lijst en valt de rij uit elkaar. */
  .afstandduo__lijst { min-width: 0; }
  @media (max-width: 62rem) { .afstandduo { grid-template-columns: 1fr; } }

  .afstanden { width: 100%; border-collapse: collapse; }
  .afstanden__kop {
    caption-side: top; text-align: left; margin-bottom: .75rem;
    font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 800; color: #6B5A49;
  }
  .afstanden th, .afstanden td {
    padding: .6875rem 0; border-bottom: 1px solid var(--zand); text-align: left;
  }
  .afstanden th { font-weight: 800; }
  .afstanden td { text-align: right; color: #6B5A49; font-size: .9375rem; white-space: nowrap; }
  .afstanden tr:last-child th, .afstanden tr:last-child td { border-bottom: 0; }

  .afstandduo__noot { margin: 1.5rem 0 0; max-width: none; font-size: .9375rem; color: #6B5A49; }

  /* ---------- De kaart ----------
     Hier stonden twee fotos, van de oprit en van de parking bij avond. Thomas op 03-09:
     "ik vind de fotos op deze pagina echt niet mooi, ik zou ze weglaten en op deze pagina
     een google maps voorzien met een marker waar de zaal zich bevind."

     ⚠ De kaart laadde eerst pas na een klik, om te vermijden dat Google cookies zet voor
     er toestemming is. Thomas op 03-09: "ik wil dat de kaart van in het begin zichtbaar
     is." Dus staat hij er nu meteen, en verhuist die toestemming naar de cookiebanner.
     Zie de BOUWSPEC in de pagina zelf: de iframe mag pas in de DOM komen nadat de banner
     toestemming voor externe media heeft gekregen.

     Een haarlijn, geen verlooprand: die is voorbehouden aan de kaarten naast een H1.
     `overflow` knipt de iframe mee af tot in de ronde hoeken. */
  .kaartblok { display: flex; flex-direction: column; min-width: 0; }
  .kaart {
    position: relative; flex: 1; min-height: 24rem;
    border: 1px solid var(--zand); border-radius: var(--radius); overflow: hidden;
    background: var(--creme-op);
  }
  .kaart iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .kaart__alt { margin: .875rem 0 0; max-width: none; font-size: .9375rem; }

  /* Op een telefoon vangt de kaart de veegbeweging op waarmee je probeert te scrollen: ze
     beslaat op 390 breed bijna de helft van het scherm, dus je verschuift de kaart in plaats
     van de pagina en je zit vast. De kaart blijft meteen zichtbaar, ze reageert alleen pas na
     een tik. Op een muis speelt dit niet, daar staat de laag er niet. */
  .kaart__tik { display: none; }
  @media (hover: none) {
    .kaart:not(.kaart--actief) iframe { pointer-events: none; }
    .kaart:not(.kaart--actief) .kaart__tik {
      display: block; position: absolute; inset: 0; z-index: 2;
      width: 100%; border: 0; cursor: pointer;
      background: rgba(30, 26, 22, .14);
      color: var(--creme-op); font: inherit; font-weight: 800; font-size: .9375rem;
      text-shadow: 0 1px 6px rgba(30, 26, 22, .7);
    }
  }

  /* ---------- Bewijs op de regiopagina ----------
     De audit van 03-09: vier van de vijf personas haakten af omdat de pagina om een bezoek
     vroeg zonder te tonen hoe het eruitziet. Drie beelden uit de galerij, drie verschillende
     soorten feest, met de doorverwijzing naar Sfeerbeelden eronder. */
  .bewijsregel {
    margin: 1.25rem 0 0; max-width: none; font-size: .9375rem; color: #6B5A49;
  }
  .bewijsregel b { color: var(--inkt); }

  .bewijsstrook {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.25rem;
  }
  @media (max-width: 48rem) { .bewijsstrook { grid-template-columns: 1fr; } }
  .bewijsstrook figure { margin: 0; }
  /* De galerijbeelden staan door elkaar staand en liggend. Een vaste verhouding met
     object-fit zet ze op een rij zonder ze uit te rekken. */
  /* `height: auto` is hier niet overbodig. Het height-attribuut in de HTML legt via de
     browserstijl een vaste hoogte op, en zolang breedte en hoogte allebei vastliggen wordt
     aspect-ratio genegeerd. Zonder deze regel staan de drie beelden op hun eigen verhouding
     en loopt de strook ongelijk. */
  .bewijsstrook img {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--radius);
    box-shadow: 0 14px 34px rgba(30, 26, 22, .14);
  }
  .bewijsstrook figcaption {
    margin-top: .75rem; font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 800; color: var(--groen);
  }
  /* Op perzik haalt toongroen maar 3,71 op 1 en de eis is 4,5. Dezelfde diepere tint als de
     overline op een perzikke sectie gebruikt, die haalt 4,83. Speelde niet op Waasland en
     Trouwfeest, want daar staat de strook op creme. */
  .sectie--perzik .bewijsstrook figcaption { color: #166B56; }

  /* ---------- De treinsectie ----------
     Stond eerst naast een staande foto. Zonder die foto is dit een sectie van een kolom
     breed. Bewust smal: na het raster met drie redenen erboven leest een enkele gedachte
     prettiger dan opnieuw een raster. */
  .treinblok { max-width: 46rem; }

  /* ---------- De drie redenen ---------- */
  .redenen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
  @media (max-width: 60rem) { .redenen { grid-template-columns: 1fr; } }
  .reden {
    background: var(--creme-op); border-radius: var(--radius);
    padding: 1.75rem 1.5rem 1.625rem;
  }
  /* Eerst stond hier een groot cijfer per kaart: 160, 0 en 1. Alleen die 160 stelde
     iets voor. Een nul voor "geen parkeergedoe" en een een voor "er is een park" zijn
     versiering, en dat is precies het patroon dat op Sfeerbeelden al sneuvelde. Nu een
     label boven de kop, zoals de verhalenkaarten daar. */
  .reden__soort {
    display: block;
    font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 800; color: var(--groen); margin-bottom: .625rem;
  }
  .reden h3 { font-size: 1.1875rem; line-height: 1.25; }
  .reden p { margin: .625rem 0 0; font-size: .9375rem; max-width: none; }

  /* ================================================================
     Kaders — de verlooprand is voor herokaarten
     ================================================================
     Thomas op 03-09, bij de adreskaart op de Waaslandpagina: "ik zie weer dit saaie
     blokje, ik wil dat je die saaie witte kader overal aanpast zoals op de contactpagina".
     Eerst te breed toegepast, op elke losstaande kaart van de site. Thomas daarna:
     "je hoefde niet alle kaders op de hele website aan te passen naar de gradient border,
     enkel de kaders die gebruikt worden in de hero". Dus alleen daar, en dat is ook waar
     het effect voor bedoeld is: de kaart naast de H1 draagt het kernfeit van haar pagina
     en mag opvallen. Kaarten verderop de pagina blijven vlak, anders roept alles even hard.

     Drie kaarten vandaag, alle drie naast een H1: `.contactkaart` (het telefoonnummer),
     `.prijskaart` (€900) en `.adreskaart` (het adres). Komt er een nieuwe bij, dan hoort ze in
     deze lijst met een eigen kleurpaar.

     ⚠ ER STONDEN ER EVEN VIJF, en dat was fout op twee manieren. Trouwfeest en Verenigingen
     kregen er ook een. In de hero gaven ze een tweede brandpunt naast de H1, en toen ik ze
     naar een eigen sectie verhuisde stonden ze daar als een losse doos in een lege band, met
     een kop links en de kaart gecentreerd. Thomas: "ik vind dit wel echt zeer lelijk dat die
     kader daar zo gewoon staat." Beide weggehaald.

     DE LES: een herokaart hoort naast een H1 en draagt één feit. Werkt ze daar niet, dan is een
     kaart de verkeerde vorm en heb je een sectie nodig. De rekensom op Trouwfeest gebruikt nu
     `.prijsregels`, hetzelfde patroon als de goedgekeurde prijzenpagina, en het feit op
     Verenigingen staat naast de vergelijkingstabel waar het thuishoort.

     De rand is een transparante border met background-clip. Dat geeft een echte
     verlooprand in plaats van een geschilderd blokje eromheen. Let op bij het aanpassen:
     border-color doet daardoor niets meer, want de border ís transparant. Wie een hover
     wil, verandert de gloed of de schaduw.

     ⚠ ELKE KAART HEEFT EEN EIGEN KLEURPAAR, en dat is geen versiering. Thomas op 03-09:
     "elke kader in de hero van dat type heeft ook altijd hetzelfde geel en rood en verloop,
     ik wil hier variatie in." Dat sluit aan op de gloedregel van 02-09: kleur en positie
     variëren per pagina, ze staan nooit twee keer hetzelfde.

     Vier kaarten, vier paren merkkleuren, en geen enkel paar komt twee keer voor. De gloed
     erachter volgt de dominante kleur van de rand en staat op elke kaart ergens anders, want
     twee gloeden op dezelfde plek lezen als een sjabloon.

       contactkaart  geel + rood     bellen en langskomen, warm en dringend
       prijskaart    groen + geel    de 900 euro, helder en zonder verrassing
       adreskaart    blauw + groen   de ligging en het park, buiten en streek

     De contactkaart houdt haar combinatie: die is op 02-09 goedgekeurd en de rest is eromheen
     gebouwd. Komt er een vijfde herokaart, dan krijgt die een vijfde paar, geen kopie.

     Blauw is `#1B6F9E`, afgeleid van de blauwe wanduplighting op de zaalfoto's. ⚠ Het staat
     nog altijd niet in het brandbook. */

  .contactkaart {
    --kaartrand: linear-gradient(135deg, var(--geel) 0%, var(--perzik) 42%, var(--rood) 100%);
    --kaartgloed: rgba(255, 197, 61, .26);
    --gloedplek: 50% 50%;
    --kaartschaduw: rgba(224, 62, 26, .065);
  }
  .prijskaart {
    --kaartrand: linear-gradient(150deg, var(--groen) 0%, #86C9A4 46%, var(--geel) 100%);
    --kaartgloed: rgba(129, 228, 200, .28);
    --gloedplek: 28% 72%;
    --kaartschaduw: rgba(27, 127, 99, .07);
  }
  .adreskaart {
    --kaartrand: linear-gradient(118deg, #1B6F9E 0%, #5FB2B4 50%, var(--groen) 100%);
    --kaartgloed: rgba(129, 205, 240, .28);
    --gloedplek: 72% 32%;
    --kaartschaduw: rgba(27, 111, 158, .075);
  }

  /* De schaduw is bewust zacht. Thomas op 03-09: "hier vind ik de shadow achter het kader te
     hard, die moet veel subtieler, eigenlijk overal waar je dit doet bij de kaders." De dekking
     is gehalveerd en de vervaging is groter geworden, zodat de kaart lijkt te zweven in plaats
     van een rand te tekenen. De gloed erachter is mee gedempt, want samen maakten ze de halo
     die te zwaar aanvoelde. */
  .contactkaart, .adreskaart, .prijskaart {
    position: relative;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background:
      linear-gradient(158deg, #FFFDF8 0%, #FFF6E9 55%, #FFEFE0 100%) padding-box,
      var(--kaartrand) border-box;
    box-shadow: 0 24px 64px var(--kaartschaduw), 0 2px 6px rgba(30, 26, 22, .035);
  }

  /* Zachte gloed achter de kaart, in dezelfde familie als de sectiegloed. Kleur en plek
     komen van de kaart zelf, zodat geen twee kaarten dezelfde gloed op dezelfde plek dragen. */
  .contactkaart::after, .adreskaart::after, .prijskaart::after {
    content: ""; position: absolute; z-index: -1;
    inset: 12% -8% -14% -8%;
    background: radial-gradient(60% 60% at var(--gloedplek), var(--kaartgloed), transparent 70%);
    filter: blur(42px); pointer-events: none;
  }

  /* ================================================================
     Trouwfeest
     ================================================================ */

  /* Ook hier één kolom in de hero, om dezelfde reden als op de verenigingenpagina:
     een kop en een kaart met een verlooprand naast elkaar zijn twee brandpunten.
     De tekstbreedte komt uit het blok bij `.verenkop` hierboven. */

  /* ---------- Beeld naast tekst ---------- */
  .trouwbeeld { margin: 0; }
  .trouwbeeld img {
    display: block; width: 100%; height: auto; max-height: 26rem;
    aspect-ratio: 4 / 3; object-fit: cover;
    border-radius: var(--radius);
    box-shadow: 0 18px 44px rgba(30, 26, 22, .16);
  }
  .trouwbeeld figcaption { margin-top: .75rem; font-size: .9375rem; color: #6B5A49; }
  #dagervoor .duo { align-items: start; }

  /* De bewijsstrook van de Waaslandpagina, hier in een variant van vier. */
  .bewijsstrook--vier { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 64rem) { .bewijsstrook--vier { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 34rem) { .bewijsstrook--vier { grid-template-columns: 1fr; } }

  /* Vier vlakke kaarten, geen verlooprand: die is voor de kaart naast de H1. */
  .pastlijst {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2rem;
  }
  @media (max-width: 52rem) { .pastlijst { grid-template-columns: 1fr; } }
  .pastlijst > div {
    background: var(--creme-op); border: 1px solid var(--zand);
    border-radius: var(--radius); padding: 1.5rem 1.5rem 1.375rem;
  }
  .pastlijst h3 { font-size: 1.0625rem; line-height: 1.3; }
  .pastlijst p { margin: .5rem 0 0; font-size: .9375rem; max-width: none; }

  /* ================================================================
     Verenigingen en bedrijven
     ================================================================ */

  /* ---------- Tekstbreedte in een hero van één kolom ----------
     Thomas op 03-09: "teksten nooit over de volledige breedte zetten, hero max op 650 px."
     Dat geldt ook voor de H1, en die was hier juist het probleem: een kop van één regel over
     1.400 px leest niet, je oog verliest de terugweg naar het begin van de volgende regel.

     650 px is ongeveer 40 rem. Eén regel bevat dan rond de 60 tekens bij de leestekst en rond
     de 30 bij de kop, wat binnen de klassieke 45 tot 75 tekens valt. Geldt voor elke hero van
     één kolom, dus voor Trouwfeest, Verenigingen en de sitemap. De drie goedgekeurde ontwerpen
     hebben hun eigen kop en blijven ongemoeid. */
  .verenkop > .wrap > h1,
  .verenkop > .wrap > p,
  .trouwkop > .wrap > h1,
  .trouwkop > .wrap > p,
  .sitemapkop > .wrap > h1,
  .sitemapkop > .wrap > p { max-width: 650px; }


  /* ---------- De vergelijkingstabel ----------
     Het hart van de pagina. Deze bezoeker vergelijkt met een dorpszaal die een fractie kost,
     dus het verschil benoemen werkt beter dan de prijs verdedigen. De tabel begint bewust met
     wat een gemeentezaal wél heeft: wie met zijn eigen sterktes opent, leest als een verkoper. */
  .vergelijkduo {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 2.5rem 3.5rem;
    margin-top: 2.5rem; align-items: start;
  }
  @media (max-width: 62rem) { .vergelijkduo { grid-template-columns: 1fr; } }

  .vergelijk { width: 100%; border-collapse: collapse; }
  .vergelijk__kop {
    caption-side: top; text-align: left; margin-bottom: .75rem;
    font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 800; color: #6B5A49;
  }
  .vergelijk th, .vergelijk td {
    padding: .6875rem .5rem; border-bottom: 1px solid var(--zand); text-align: left;
  }
  .vergelijk thead th {
    font-size: .8125rem; font-weight: 800; color: #6B5A49;
    border-bottom-width: 2px; padding-bottom: .5rem;
  }
  .vergelijk tbody th { font-weight: 700; font-size: .9375rem; padding-left: 0; }
  .vergelijk td { font-size: .9375rem; color: #6B5A49; }
  /* De eigen kolom staat in inkt en vet, de andere in grijs. Zo leest het verschil zonder
     dat er een vinkje of een kruisje bij hoeft. */
  .vergelijk td.ja { color: var(--inkt); font-weight: 800; }
  .vergelijk tr:last-child th, .vergelijk tr:last-child td { border-bottom: 0; }

  /* Een kolomkop die alleen voor schermlezers bestaat: de eerste kolom heeft visueel geen
     titel nodig, maar een tabel zonder kop op die kolom leest verwarrend voor. */
  .vh {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  .vergelijkduo__naast > h3 { font-size: 1.125rem; line-height: 1.3; }
  .vergelijkduo__naast > p { margin: .75rem 0 0; max-width: none; }

  /* ================================================================
     Sitemap
     ================================================================
     Een HTML-sitemap voor bezoekers. Bij de omzetting komt de lijst uit de menustructuur,
     niet uit handwerk: een sitemap die je met de hand bijhoudt loopt binnen een maand achter. */

  .sitemapraster {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3.5rem;
  }
  @media (max-width: 52rem) { .sitemapraster { grid-template-columns: 1fr; gap: 2rem; } }
  .sitemapraster h2 { font-size: 1.1875rem; line-height: 1.25; }

  .sitelijst { list-style: none; margin: 1.125rem 0 0; padding: 0; }
  .sitelijst li { padding: .75rem 0; border-bottom: 1px solid var(--zand); }
  .sitelijst li:first-child { padding-top: 0; }
  .sitelijst li:last-child { border-bottom: 0; }
  .sitelijst > li > a, .sitelijst > li > .nav-plaatshouder {
    display: inline-block; font-weight: 800; font-size: 1rem;
  }
  .sitelijst > li > a { color: var(--inkt); text-decoration: none; border-bottom: 2px solid var(--zand); }
  .sitelijst > li > a:hover { color: var(--rood-op); border-bottom-color: var(--rood); }
  /* De plaatshouder is geen link en mag er ook niet als een uitzien. De onderregel valt weg
     en de kleur is gedempt, met het label dat de rest van de site ook gebruikt. */
  .sitelijst > li > .nav-plaatshouder { color: #6B5A49; }
  .sitelijst > li > span:last-child {
    display: block; margin-top: .25rem; font-size: .9375rem; line-height: 1.5; color: #6B5A49;
  }

  .sitemapnoot {
    margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--zand);
    max-width: none; font-size: .9375rem; color: #6B5A49;
  }

  /* De conclusie onder de rekensom plus de doorverwijzing, in één alinea. */
  .rekennoot { margin: 1.5rem 0 0; }

  /* ---------- Sociale iconen in het overlaymenu ----------
     Op vraag van Thomas op 03-09. In het menu stonden Facebook en Instagram als kale
     tekstlinks, terwijl de voettekst dezelfde twee al met een icoon toont. Exact dezelfde
     SVG-paden hergebruikt, zodat er één waarheid is en geen tweede set iconen.

     Iets groter dan in de voet (22 px tegenover 20), want het menu leest op armlengte en de
     regels eromboven staan er ook groter. Raakdoel blijft ruim boven 24 px door de padding. */
  .overlay__socials {
    list-style: none; padding: 0; margin: 1.5rem 0 0;
    display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  }
  .overlay__socials a {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .375rem 0; text-decoration: none; font-weight: 700;
  }
  .overlay__socials svg { display: block; width: 22px; height: 22px; flex: none; }
  .overlay__socials a span { border-bottom: 2px solid transparent; }
  .overlay__socials a:hover span { border-bottom-color: currentColor; }

  /* ---------- WordPress-adminbar ----------
     Bestaat niet in de statische mockup, enkel zichtbaar voor ingelogde gebruikers
     (nooit voor een bezoeker). #wpadminbar is fixed op top:0 met een hogere
     z-index dan onze sticky header (20) en het overlaymenu (50), dus zonder
     correctie schuift de header er bij het scrollen onderdoor. WP-core duwt de
     pagina zelf 32px (782px breed en smaller: 46px) naar beneden bij het laden,
     maar `position: sticky`/`fixed` volgt dat niet vanzelf. */
  body.admin-bar header { top: 32px; }
  body.admin-bar .overlay { top: 32px; height: calc(100% - 32px); }
  @media screen and (max-width: 782px) {
    body.admin-bar header { top: 46px; }
    body.admin-bar .overlay { top: 46px; height: calc(100% - 46px); }
  }

  /* Prijzen, sectie "achteraf": de rechterkolom is veel hoger dan de linkerkolom
     (twee prijslijstjes tegenover enkel een intro). De gedeelde .duo centreert
     verticaal, wat hier het korte tekstblok laat zweven i.p.v. bovenaan te
     starten — enkel hier overschreven, .duo blijft elders gecentreerd. */
  #achteraf .duo { align-items: start; }

/* Maand-dropdown naast de jaartalknoppen (14-09) — sluit visueel aan bij .agenda__jaar. */
.agenda__maandkeuze { display: inline-flex; align-items: center; margin-left: .5rem; }
.agenda__maand {
  font: inherit;
  padding: .3rem .6rem;
  border: 1px solid var(--zand);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}
.agenda__maand:hover, .agenda__maand:focus { border-color: var(--rood); }

/* 'Vandaag' + 'Eerste vrije datum' — subtiele tekstknoppen naast de maand-dropdown (14-09). */
.agenda__spring {
  font: inherit;
  color: var(--rood);
  background: none;
  border: 0;
  padding: .3rem .5rem;
  margin-left: .35rem;
  cursor: pointer;
  border-radius: 999px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.agenda__spring:hover, .agenda__spring:focus {
  background: var(--zand);
  text-decoration: none;
}

/* ======== Agenda: 2-kolommen-layout (Sven, 21-09) ======== */
.agenda__twee-kolommen {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
}
@media (max-width: 60rem) {
  .agenda__twee-kolommen { grid-template-columns: 1fr; }
}
.agenda__kalender .maandhouder { padding-right: 0; } /* Reset oude 2-maanden-view. */
.agenda__zijkant { position: sticky; top: 1.5rem; }
@media (max-width: 60rem) {
  .agenda__zijkant { position: static; }
}
.agenda__zijkant .agenda__legende {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: transparent;
  border-top: 1px solid var(--zand);
}

/* Adjacent days (dagen van vorige/volgende maand — Google-Calendar-stijl). */
.dag--buiten-maand {
  opacity: .32;
  cursor: default;
  pointer-events: none;
  color: var(--inkt);
}

/* Startboodschap in het bezetblok — subtiel, uitnodigend. */
.bezetblok--start .bezetblok__kop { color: var(--inkt); }
.bezetblok--start .bezetblok__uitleg { color: #6b6b6b; }

/* Oude .agenda-grid (2-maanden-view) uitzetten — de 2-kolommen-layout leeft nu op
   .agenda__twee-kolommen, .agenda zelf mag full-width block zijn (Sven, 21-09). */
.agenda { display: block !important; grid-template-columns: none !important; }
.agenda__balk { display: flex; }
.maandhouder:not(.maandhouder--rechts) { padding-right: 0 !important; }

/* Adjacent days klikbaar (Sven, 21-09) — behoud grayed uiterlijk, wél hover-cue.
   Overschrijft de eerdere pointer-events:none regel. */
button.dag.dag--buiten-maand {
  opacity: .35;
  pointer-events: auto;
  cursor: pointer;
}
button.dag.dag--buiten-maand:hover,
button.dag.dag--buiten-maand:focus { opacity: .7; }
/* Voorbij-cellen en niet-klikbare span-cellen blijven onaanraakbaar. */
span.dag.dag--buiten-maand { pointer-events: none; }

/* Agenda-balk op één lijn (Sven, 21-09) — bereik-tekst is weg, dropdown zegt al de maand. */
.agenda__kalender .agenda__balk {
  flex-wrap: nowrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.agenda__kalender .agenda__balk-links {
  flex-wrap: nowrap;
  gap: .35rem;
  flex: 1;
  min-width: 0;
}
.agenda__kalender .agenda__spring {
  padding: .3rem .55rem;
  white-space: nowrap;
}
.agenda__kalender .agenda__maand { padding: .3rem .5rem; }
/* Fallback: onder ~48rem wrapt de knoppenrij toch, anders past ze niet. */
@media (max-width: 48rem) {
  .agenda__kalender .agenda__balk-links { flex-wrap: wrap; }
}

/* Datum-dropdown op eigen rij onder de balk (Sven, 21-09). */
.agenda__maandkeuze-rij { margin-bottom: 1rem; }
.agenda__maandkeuze-rij .agenda__maand { min-width: 12rem; }

/* Dropdown-rij vervangt visueel de kalender-caption (Sven, 21-09). */
.agenda__maandkeuze-rij { margin-bottom: .5rem; margin-top: .5rem; }

/* Dropdown naast de kalender-caption 'September 2026' (Sven, 21-09).
   Caption zit in <table><caption> — geen makkelijke flex-broer, dus we tillen
   de dropdown op met een negatieve margin en zetten 'm rechts. */
.agenda__maandkeuze-rij {
  text-align: right;
  margin-bottom: 0;
  margin-top: 0;
  position: relative;
  z-index: 2;
}
@media (min-width: 48rem) {
  .agenda__kalender .maandhouder .maand__kop {
    text-align: left;
  }
  .agenda__maandkeuze-rij { margin-bottom: -2.4rem; }
}

/* Spring-knoppen subtieler (Sven, 21-09): donkerder rood, geen hover-pil. */
.agenda__kalender .agenda__spring {
  color: #A0311A; /* donkerder dan var(--rood) #E03E1A */
  border-radius: 0;
}
.agenda__kalender .agenda__spring:hover,
.agenda__kalender .agenda__spring:focus {
  background: none;
  text-decoration: underline;
  color: var(--rood);
}

/* Spring-knoppen zonder eigen padding/margin — flex-container regelt spacing (Sven, 21-09). */
.agenda__kalender .agenda__spring {
  padding: .3rem 0;
  margin: 0;
}

/* Meer lucht tussen spring-knoppen (Sven, 21-09). */
.agenda__kalender .agenda__balk-links { gap: 1.25rem; }

/* ---------- Foto bij een optie (Prijzen en wizard, Sven 29-09) ----------
   Klein en rustig: een rond pictogram naast de naam, de foto zelf pas na een klik. */
.optie-foto-knop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; margin: 0 0 0 .5rem; padding: 0;
  border: 1px solid var(--zand); border-radius: 50%;
  background: var(--creme-op); color: var(--groen);
  vertical-align: middle; cursor: pointer;
  transition: border-color .18s ease;
}
.optie-foto-knop svg { width: 15px; height: 15px; }
.optie-foto-knop:hover { border-color: var(--groen); }
.optie-foto-knop:focus-visible { outline: 3px solid var(--rood); outline-offset: 2px; }

dialog.optie-foto {
  padding: 0; border: 0; border-radius: var(--radius);
  width: min(40rem, 92vw); background: var(--creme-op); overflow: hidden;
}
dialog.optie-foto::backdrop { background: rgba(30, 26, 22, .6); }
dialog.optie-foto img {
  display: block; width: 100%; height: auto; max-height: 75vh;
  object-fit: contain; background: var(--zand);
}
.optie-foto__titel { margin: 0; max-width: none; padding: .875rem 1.125rem; font-weight: 700; }
.optie-foto__sluit {
  position: absolute; top: .625rem; right: .625rem;
  width: 2.25rem; height: 2.25rem; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 253, 248, .92); color: var(--inkt);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.optie-foto__sluit:focus-visible { outline: 3px solid var(--rood); outline-offset: 2px; }