/* ===========================================================================
   B&L Party Services
   ---------------------------------------------------------------------------
   Deze stijl stond tot 1 oktober 2026 als <style>-blok in home.html, en de
   vijf andere pagina's lazen dat blok daar letterlijk uit. Dat hield zichzelf
   in sync zolang mijn bouwscripts draaiden, maar die scripts horen niet bij
   het project. Nu is dit het enige bestand met stijl erin.

   Lettertypepaden zijn root-relatief (/fonts/...), zoals het framework vraagt.
   =========================================================================== */


/* ==================================================================
   B&L Party Services · Home
   Huisstijl: BLP-brandbook v5, modern editorial in de bento-variant.
   Componenten naar de meegestuurde schermafbeeldingen:
   sfeertegel met tekst en knop onderaan, beeldtegel met label
   onderaan, gerechtkaart met hart linksboven en pijl rechtsonder.
   ================================================================== */

@font-face { font-family: "Playfair Display"; src: url("/fonts/playfair-display-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/fonts/playfair-display-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/fonts/playfair-display-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --wit: #ffffff;
  --grond: #f4f2ee;
  --kaart: #ffffff;
  --diep: #1a1917;
  --accent: #b83318;
  --lijn: #e0dcd4;
  --lijn-zacht: #d4cfc4;
  --lijn-sterk: #7a756b;
  --inkt: #1a1917;
  --inkt-body: #45423c;
  --inkt-zacht: #68635b;
  --op-diep: #f4f2ee;
  --op-accent: #fff7f3;
  --op-foto: #ffffff;
  --rood: #ef4023;
  --rood-diep: #b83318;
  --link: #ab2e18;
  --tag-inkt: #4f5c3a;
  --tag-grond: #e6e8d8;

  --display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --tekst: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --marge: 20px;
  --sectie: 56px;
  --gat: 14px;
}
@media (min-width: 760px)  { :root { --marge: 36px; --sectie: 88px; --gat: 16px; } }
@media (min-width: 1160px) { :root { --marge: 48px; --sectie: 112px; --gat: 18px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="licht"]) {
    --wit: #161513; --grond: #1e1d1a; --kaart: #272522; --diep: #0e0d0c;
    --lijn: #353330; --lijn-zacht: #403d38; --lijn-sterk: #8a857b;
    --inkt: #f4f2ee; --inkt-body: #d7d3cb; --inkt-zacht: #a49f96;
    --link: #ff8163; --tag-inkt: #a7b87f; --tag-grond: #2a3020;
  }
}
:root[data-theme="donker"] {
  --wit: #161513; --grond: #1e1d1a; --kaart: #272522; --diep: #0e0d0c;
  --lijn: #353330; --lijn-zacht: #403d38; --lijn-sterk: #8a857b;
  --inkt: #f4f2ee; --inkt-body: #d7d3cb; --inkt-zacht: #a49f96;
  --link: #ff8163; --tag-inkt: #a7b87f; --tag-grond: #2a3020;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--wit); color: var(--inkt-body);
  font-family: var(--tekst); font-size: 16px; line-height: 27px; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--rood); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.wrap { max-width: 1320px; margin: 0 auto; padding-inline: var(--marge); }
.sectie { padding-block: var(--sectie); }

/* ---------- Type ----------
   Schreef: 2 maten, gewicht 400.  Schreefloos: 4 maten, gewicht 400 of 600.
   ------------------------------------------------------------------ */
.d2xl { font-family: var(--display); font-weight: 400; font-size: clamp(42px, 7.6vw, 84px); line-height: 1.03; letter-spacing: -0.022em; margin: 0; }
.dxl  { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.14; letter-spacing: -0.014em; margin: 0; color: var(--inkt); }
.k2 { font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: -0.008em; margin: 0; color: var(--inkt); }
.body { font-size: 17px; line-height: 28px; font-weight: 400; margin: 0; }
.bodys { font-size: 15px; line-height: 24px; font-weight: 400; margin: 0; }
.mini { font-size: 13px; line-height: 20px; font-weight: 400; margin: 0; color: var(--inkt-zacht); }
.label { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; display: block; color: var(--inkt-zacht); }

/* ---------- Knoppen ---------- */
.pil { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font-size: 15px; line-height: 24px; font-weight: 600; text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease; }
.pil:hover { text-decoration: none; }
.pil--zwart { background: var(--inkt); color: var(--wit); }
.pil--zwart:hover { background: var(--inkt-body); color: var(--wit); }
.pil--rand { border-color: var(--lijn-sterk); color: var(--inkt); }
.pil--rand:hover { background: var(--rood-diep); border-color: var(--rood-diep); color: var(--wit); }
.pil--glas { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34);
  backdrop-filter: blur(12px); color: var(--op-foto); }
.pil--glas:hover { background: var(--wit); color: var(--inkt); border-color: var(--wit); }
.pil--wit { background: var(--wit); color: var(--inkt); }
.pil--wit:hover { background: var(--rood-diep); color: var(--wit); }

.tag { display: inline-block; font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--tag-inkt); background: var(--tag-grond); border-radius: 6px; padding: 3px 8px; }

/* ---------- Navigatiebalk: navigatie links, logo in het midden, acties rechts ---------- */
.balk { position: sticky; top: 0; z-index: 30; background: var(--wit);
  border-bottom: 1px solid transparent; transition: background .2s ease, border-color .2s ease; }
.balk.vast { background: rgba(255,255,255,.86); backdrop-filter: blur(14px); border-bottom-color: var(--lijn); }
.balk__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; align-content: center;
  gap: 20px; min-height: 84px; padding-block: 16px; }
.balk__nav { display: none; align-items: center; gap: 26px; }
.balk__nav a { font-size: 15px; line-height: 24px; color: var(--inkt-body); }
.balk__nav a[aria-current] { color: var(--link); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--rood);
  text-decoration-thickness: 2px; text-underline-offset: 7px; }
.balk__nav a[aria-current]:hover { color: var(--link); }
.balk__logo { justify-self: center; display: inline-flex; align-items: center;
  justify-content: center; min-height: 44px; line-height: 0; }
.balk__logo img { width: 120px; height: auto; }
.balk__acties { justify-self: end; display: flex; align-items: center; gap: 22px; }
.balk__folder { display: none; align-items: center; gap: 8px; min-height: 46px;
  font-size: 15px; font-weight: 600; color: var(--inkt); }
.balk__folder:hover { color: var(--link); text-decoration: none; }
@media (min-width: 920px) { .balk__nav { display: flex; } .balk__folder { display: inline-flex; } }

/* Elk deel krijgt zijn eigen kolom. Zonder dit schuift het logo naar links
   zodra de nav verborgen is, want een element op display:none telt niet mee
   in het raster en dan plaatst de browser wat overblijft van links af. */
.balk__nav { grid-column: 1; }
.balk__logo { grid-column: 2; }
.balk__acties { grid-column: 3; }

/* ---------- Hamburgermenu, onder 920 px ----------
   Boven die breedte staat alles in de balk zelf en is dit hele blok stil.
   Eronder blijft er in de balk enkel het logo en de knop over, en zit de rest
   in een paneel dat van rechts binnenschuift. */

.balk__burger { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-right: -10px; padding: 0;
  border: 0; border-radius: 10px; background: none; color: var(--inkt);
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.balk__burger:hover { background: var(--grond); }
.balk__burger svg { display: block; }
@media (min-width: 920px) { .balk__burger { display: none; } }

/* De offerteknop verhuist onder 920 px naar het paneel. Anders staan er drie
   dingen naast elkaar op 390 px en past het logo niet meer in het midden. */
@media (max-width: 919px) { .balk__acties .pil { display: none; } }

.mobmenu { position: fixed; inset: 0; z-index: 60; }
.mobmenu[hidden] { display: none; }
.mobmenu__waas { position: absolute; inset: 0; background: rgba(26,25,23,.42);
  opacity: 0; transition: opacity .3s ease; }
.mobmenu__paneel { position: absolute; top: 0; right: 0; height: 100%;
  width: min(86vw, 360px); background: var(--wit); border-left: 1px solid var(--lijn);
  display: flex; flex-direction: column; padding: 18px 26px 30px;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform .32s cubic-bezier(.4, 0, .2, 1); }
.mobmenu.open .mobmenu__waas { opacity: 1; }
.mobmenu.open .mobmenu__paneel { transform: translateX(0); }

.mobmenu__kop { display: flex; justify-content: flex-end; min-height: 46px; align-items: center; }
.mobmenu__sluit { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-right: -10px; padding: 0;
  border: 0; border-radius: 10px; background: none; color: var(--inkt);
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mobmenu__sluit:hover { background: var(--grond); }
.mobmenu__sluit svg { display: block; }

.mobmenu__nav { display: flex; flex-direction: column; margin-top: 10px; }
.mobmenu__nav a { display: flex; align-items: center; min-height: 56px;
  font-size: 19px; line-height: 26px; font-weight: 500; color: var(--inkt);
  border-bottom: 1px solid var(--lijn); }
.mobmenu__nav a:hover { color: var(--link); text-decoration: none; }
.mobmenu__nav a[aria-current] { color: var(--link); font-weight: 600; }
.mobmenu__nav a[aria-current]::before { content: ""; width: 3px; height: 20px;
  margin-right: 12px; background: var(--rood); border-radius: 2px; }

.mobmenu__staart { margin-top: auto; padding-top: 28px; display: grid; gap: 14px; }
.mobmenu__folder { display: inline-flex; align-items: center; gap: 9px; min-height: 46px;
  font-size: 15px; font-weight: 600; color: var(--inkt); }
.mobmenu__folder:hover { color: var(--link); text-decoration: none; }
.mobmenu__staart .pil { justify-content: center; }

/* Wie beweging heeft uitgezet krijgt het paneel zonder schuif. Het opent en
   sluit dan meteen, wat hetzelfde doet zonder de animatie. */
@media (prefers-reduced-motion: reduce) {
  .mobmenu__waas, .mobmenu__paneel { transition: none; }
}

/* ---------- Knoppen op telefoonformaat ----------
   Onder 600 px pakt elke knop de volle breedte. Dat maakt het doel groter en
   het zet twee knoppen onder elkaar in plaats van ze allebei half te maken.
   De houders moeten mee: ze zijn flex en zouden de knoppen anders naast elkaar
   blijven zetten, waarna width:100% niets meer voorstelt. */
@media (max-width: 599px) {
  .pil { width: 100%; justify-content: center; text-align: center; }
  .hero__knoppen,
  .afsluit__knoppen,
  .keuzeknoppen,
  .strookvoet,
  .formulier__voet { flex-direction: column; align-items: stretch;
    width: 100%; align-self: stretch; }
  /* .afsluit__in is zelf een kolom met align-items: flex-start, dus de
     knoppenhouder erin krimpt naar zijn inhoud. Dan vult een knop zijn houder
     wel, maar staat die houder op 179 px in een kolom van 350. */
  .afsluit__in { align-items: stretch; }
  /* In deze twee staat naast de knop ook tekst. Die hoort links te blijven
     staan en niet gecentreerd te worden door de stapeling. */
  .strookvoet, .formulier__voet { text-align: left; }
}

/* ---------- Hero ---------- */
.hero__doek { position: relative; border-radius: 22px 22px 0 22px; overflow: hidden; min-height: 620px; display: flex; }
@media (min-width: 760px) { .hero__doek { min-height: 590px; } }
.hero__doek > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* De waas loopt diagonaal vanuit de linkeronderhoek, want daar staat de tekst.
   Rechtsboven en rechtsonder blijft de foto open. Rechtsonder staat alleen de
   uitgesneden hoek met de belknop. Die heeft zijn eigen witte vlak.
   Gemeten op de echte pixels, niet berekend: de vorige verticale waas liet de
   titel op 2,33 zakken, want de foto heeft daar spierwitte hoogsels. */
.hero__waas { position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(26,25,23,.42) 0%, rgba(26,25,23,.30) 14%,
    rgba(26,25,23,.86) 42%, rgba(26,25,23,.94) 100%); }
/* Pas vanaf 920 px diagonaal. Daaronder staat de knop nog onder de tekst en
   vult het tekstblok de hele breedte, dus daar hoort een verticale waas.
   Deze stops zijn de lichtste die op elke breedte nog ruim slagen: de titel
   haalt minimaal 4,68 waar 3,0 de eis is. */
@media (min-width: 920px) {
  .hero__waas { background: linear-gradient(to top right,
    rgba(26,25,23,.92) 0%, rgba(26,25,23,.84) 34%, rgba(26,25,23,.54) 58%,
    rgba(26,25,23,.14) 80%, rgba(26,25,23,.03) 100%); }
}
/* Drie niveaus, elk met een eigen afstand. Geen gelijke gap, want dan staat
   alles even ver uit elkaar en ontstaat er geen rangorde:
   1 de titel, 2 wat het is plus de actie, 3 de feiten, kleiner en stiller. */
.hero__in { position: relative; z-index: 2; margin-top: auto; padding: var(--marge);
  display: flex; flex-direction: column; gap: 0;
  width: fit-content; max-width: min(960px, 100%); }
.hero__in h1 { margin-bottom: 22px; }
@media (min-width: 760px) { .hero__in { padding: 44px; } }
.hero__in h1 { color: var(--op-foto); }
.hero__in p { color: var(--op-foto); opacity: .92; }
.hero__rij { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero__rij p { max-width: 46ch; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__knoppen .pil { white-space: nowrap; }
/* Vanaf 920 px is er geen knop meer in de tekst. De belknop zit in de
   uitgesneden hoek rechtsonder en de offerteknop staat permanent in de balk.
   De alinea bepaalt dus de breedte van het blok. De lijn van de feitenbalk
   eindigt netjes op die rand. */
@media (min-width: 920px) {
  .hero__knoppen { display: none; }
}

/* Uitgesneden hoek rechtsonder: het beeld wijkt, de knop zit in het witte gat.
   De twee hoekstukken maken de holle ronding waar wit en beeld elkaar raken.
   Een masker in plaats van een verloop, want `transparent` is doorzichtig zwart
   en dat geeft een donkere rand langs de boog. */
.hero__hoek { display: none; }
@media (min-width: 920px) {
  .hero__hoek {
    display: block; position: absolute; z-index: 4; right: 0; bottom: 0;
    background: var(--wit); padding: 18px 10px 10px 18px;
    border-top-left-radius: 20px;
  }
  .hero__hoek::before, .hero__hoek::after {
    content: ""; position: absolute; width: 20px; height: 20px;
    background: var(--wit);
    -webkit-mask-image: radial-gradient(circle 20px at 0 0, #0000 19.5px, #000 20.5px);
    mask-image: radial-gradient(circle 20px at 0 0, #0000 19.5px, #000 20.5px);
  }
  .hero__hoek::before { right: 0; top: -20px; }
  .hero__hoek::after  { left: -20px; bottom: 0; }
  .hero__hoek .pil { margin: 0; }
  .hero__hoek-mobiel { display: none; }
}

/* ---------- Introrij: kop links, twee tekstkolommen ernaast.
   Grid op de eerste basislijn, zodat alle drie op één lijn beginnen. ---------- */
.intro { display: grid; gap: 30px; }
@media (min-width: 900px) { .intro { grid-template-columns: 1fr 1fr 1.3fr; gap: 56px; align-items: baseline; } }

/* ---------- Sfeertegel: tekst en knop onderaan, hele tegel klikbaar ---------- */
.rij3 { display: grid; gap: var(--gat); grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 680px)  { .rij3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1040px) { .rij3 { grid-template-columns: 1.75fr 1fr 1fr; } }

.tegel { position: relative; border-radius: 18px; overflow: hidden; min-height: 380px; display: flex; }
@media (min-width: 1040px) { .tegel { min-height: 460px; } }
.tegel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.6,.2,1); }
/* Twee wazen. Op smalle schermen is de tegel laag en vult de tekst hem bijna,
   dus daar moet hij zwaarder. Vanaf 680 px staan de tegels naast elkaar, is er
   meer beeld boven de tekst en kan hij een stuk lichter. Deze tweede is de
   lichtste die op elke breedte nog slaagt: getest met lichtere varianten en
   dan zakte de tekst onder de norm. */
.tegel__waas { position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(26,25,23,.02) 0%, rgba(26,25,23,.20) 22%, rgba(26,25,23,.88) 48%, rgba(26,25,23,.97) 100%); }
@media (min-width: 680px) {
  .tegel__waas { background: linear-gradient(to bottom, rgba(26,25,23,0) 0%, rgba(26,25,23,.12) 30%, rgba(26,25,23,.74) 56%, rgba(26,25,23,.93) 100%); }
}
.tegel__in { position: relative; z-index: 2; padding: 24px; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.tegel__in h3 { color: var(--op-foto); font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: -0.008em; margin: 0; }
.tegel__in p { color: var(--op-foto); font-size: 15px; line-height: 24px; margin: 0; max-width: 44ch; }
.tegel:hover > img { transform: scale(1.045); }
.tegel:hover .tegel__cta { background: var(--rood-diep); color: var(--wit); }
.tegel__cta .pijl { flex: 0 0 16px; width: 16px; height: 16px; margin-right: -24px; opacity: 0;
  transform: translateX(-6px);
  transition: margin-right .3s cubic-bezier(.2,.6,.2,1), opacity .25s ease, transform .3s cubic-bezier(.2,.6,.2,1); }
.tegel:hover .tegel__cta .pijl { margin-right: 0; opacity: 1; transform: none; }
/* De knop is de echte link; dit vlak maakt de hele tegel aanklikbaar. */
.tegel__cta::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.tegel__cta { align-self: flex-start; margin-top: 10px; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 0;
  background: var(--wit); color: var(--inkt); font-size: 15px; font-weight: 600;
  transition: background .18s ease, color .18s ease; }
.tegel__cta:hover { background: var(--rood-diep); color: var(--wit); text-decoration: none; }

/* ---------- Kopregel: kop links, knop rechts ---------- */
.koprij { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-bottom: 36px; }
/* Beeld rechts in de kopregel, met de tekst en de knop links ernaast.
   Niet groter tonen dan de bron: dit is een foto van Luc zelf op 480 px. */

/* ---------- Kerstfolder ----------
   Eerder stonden de tekst en de foto's hier los van elkaar in een kopregel, met
   een gat van bijna vierhonderd pixels ertussen. Nu is het een spreiding: een
   haarlijn over de volle breedte, twee kolommen die op diezelfde lijn beginnen
   en een vaste tussenruimte in plaats van space-between. De haarlijn is
   dezelfde die de vragen en de citaten gebruiken. */
.kerst { display: grid; gap: 34px;
  border-top: 1px solid var(--lijn); padding-top: 32px; }
@media (min-width: 900px) {
  /* De foto's krijgen iets meer breedte dan de tekst. De tekst is drie regels,
     het raster draagt het gerecht. */
  .kerst { grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr);
    gap: 72px; align-items: start; padding-top: 42px; }
}
/* Het raster zelf: vier foto's strak tegen elkaar in twee rijen. De schotel en
   het dessert bovenaan, de tartaar en de hapjes eronder. Elke rij krijgt zijn
   hoogte van de foto die er de verhouding van draagt (a en c), de andere twee
   rekken mee. Zo sluiten de randen op elke breedte aan, zonder narekenen.
   De foto's zijn vooraf bijgesneden op precies de verhouding van hun vak, met
   het gerecht in het midden. */
.raster4 { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px;
  width: 100%; }
.raster4 img { display: block; width: 100%; height: 100%;
  object-fit: cover; border-radius: 8px; }
.raster4 .vak-a { grid-column: 1 / 4; grid-row: 1; height: auto; aspect-ratio: 1.551; }
.raster4 .vak-b { grid-column: 4 / 6; grid-row: 1; }
.raster4 .vak-c { grid-column: 1 / 3; grid-row: 2; height: auto; aspect-ratio: 1.574; }
.raster4 .vak-d { grid-column: 3 / 6; grid-row: 2; }

.koprij__beeld { border-radius: 14px; width: 100%; max-width: 480px; height: auto;
  object-fit: cover; align-self: flex-end; }
@media (min-width: 900px) { .koprij__beeld { width: 42%; max-width: 440px; } }



/* ---------- Menulijst ---------- */
.menu { display: grid; gap: 48px; }
@media (min-width: 900px) { .menu { grid-template-columns: 300px 1fr; column-gap: 80px; row-gap: 0; } }
.lijst { border-top: 1px solid var(--lijn); }
.lijst__rij { position: relative; display: flex; align-items: baseline; gap: 24px; padding-block: 15px; border-bottom: 1px solid var(--lijn); }
.lijst__naam { display: flex; flex-direction: column; gap: 2px; }
.lijst__titel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Bij hover legt het gerecht zich aan de rechterkant van zijn rij, licht
   gekanteld en dwars over de lijnen heen. Het haakje is een vak van nul bij nul,
   dus de rij verspringt niet. Portret, want zo komen de foto's van een telefoon
   binnen en dan hoeft er niets weggesneden te worden. Elke rij heeft een eigen
   portretuitsnede (hover-*.webp), geen bijgesneden landschapsfoto, anders zie je
   enkel het midden van het gerecht. De ring in de sectiekleur
   laat het beeld door de lijnen snijden zonder dat het rommelig wordt.
   Pas vanaf 1100 px, want daaronder is de rij te smal. Enkel op apparaten die
   echt hoveren. */
.lijst__naam { flex: 0 1 auto; }
/* Sinds de prijzen eruit zijn (Luc, 18 sep) is de rechterkant van de rij leeg.
   Het haakje schuift met margin-left: auto mee naar die rand. Het beeld hangt
   er met right aan vast. Zo staan de foto's van alle rijen op één lijn in
   plaats van te verspringen met de lengte van de gerechtnaam. */
.lijst__beeld { display: none; position: relative; width: 0; height: 0;
  align-self: center; margin-left: auto; z-index: 2; }
.lijst__beeld img { position: absolute; right: 16px; top: 0;
  /* max-width: none, anders klemt de basisregel img { max-width: 100% }
     het beeld op de nulbreedte van zijn haakje. */
  width: 216px; max-width: none; height: 288px; object-fit: cover; border-radius: 14px;
  box-shadow: 0 0 0 6px var(--grond);
  transform-origin: right center; pointer-events: none; opacity: 0;
  transform: translateY(-50%) rotate(12deg) scale(.84);
  transition: opacity .22s ease, transform .42s cubic-bezier(.22,.72,.26,1); }
@media (hover: hover) and (min-width: 1100px) {
  .lijst__beeld { display: block; }
  .lijst__rij:hover { z-index: 3; }
  .lijst__rij:hover .lijst__beeld img { opacity: 1; transform: translateY(-50%) rotate(4.5deg) scale(1); }
}
/* Vanaf 1360 px is er rechts genoeg ruimte om het gerecht echt te laten zien. */
@media (hover: hover) and (min-width: 1360px) {
  .lijst__beeld img { width: 264px; height: 352px; }
}

/* ---------- Voettekst ---------- */
.voet { background: var(--diep); color: var(--op-diep); }
.voet a { color: var(--op-diep); }
/* Het telefoonnummer en het mailadres in de voettekst stonden op twintig pixels
   hoog. WCAG 2.2 maakt een uitzondering voor links in lopende tekst, dus het is
   formeel geen fout, maar dit is wel de belangrijkste conversie van de site en
   twee regels van twintig pixels boven elkaar zijn met een duim lastig te
   raken. Inline-block met wat lucht eromheen brengt ze op vierentwintig zonder
   dat de regelafstand van de kolom verspringt. */
.voet__kolom p a[href^="tel:"],
.voet__kolom p a[href^="mailto:"] { display: inline-block; padding-block: 3px; }
.voet .label { color: var(--op-diep); opacity: .55; }
.voet .bodys, .voet .mini { color: var(--op-diep); }
.voet .mini { opacity: .55; }
.voet__net { display: grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap: 44px; padding-top: var(--sectie); }
@media (min-width: 700px)  { .voet__net { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 48px; } }
@media (min-width: 1000px) { .voet__net { grid-template-columns: 1.25fr 1fr 1fr; gap: 64px; } }
.voet__kolom { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.voet__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.voet__nav a { font-size: 15px; line-height: 24px; opacity: .82; }
.voet__nav a:hover { opacity: 1; text-decoration: underline; }
.voet__onder { margin-top: 56px; border-top: 1px solid rgba(244,242,238,.15);
  padding-block: 22px 40px; display: grid; gap: 16px; text-align: center; }
@media (min-width: 900px) {
  .voet__onder { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; text-align: left; }
  .voet__mailbox { text-align: right; }
}
.voet__social { display: flex; gap: 10px; margin-top: 4px; }
.voet__social a { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(244,242,238,.28);
  transition: background .18s ease, color .18s ease, border-color .18s ease; }
.voet__social a:hover { background: var(--op-diep); color: var(--diep); border-color: var(--op-diep); }
.voet__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
/* .voet .mini zet opacity op .55 en wint op specificiteit van .voet__mailbox.
   Een kind kan de dekking van zijn ouder niet terugdraaien, dus stond de hele
   regel op 55%. Vandaar de dubbele klasse: die telt zwaarder. */
.voet .mini.voet__mailbox { color: var(--op-diep); opacity: 1; }
.voet__mailbox a { color: #ff5233; font-weight: 600; }
.voet__mailbox a:hover { color: #ff7a5c; text-decoration: underline; }
.voet__links a { font-size: 13px; line-height: 20px; padding-block: 2px; opacity: .82; }
.voet__links a:hover { opacity: 1; }

/* ---------- Toegankelijkheid: sprong naar de inhoud ---------- */
.spring { position: absolute; left: -9999px; top: 0; z-index: 60; }
.spring:focus { left: 12px; top: 12px; background: var(--inkt); color: var(--wit);
  padding: 11px 18px; border-radius: 8px; font-size: 15px; line-height: 24px; font-weight: 600; }

/* ---------- Plaatsregel in de hero ----------
   Blijft smaller dan de titel. Anders bepaalt zij de breedte van het tekstblok
   en steekt de knop rechts voorbij de titelrand. */
/* De balk rekt tot de volle breedte van het blok zonder die breedte te bepalen.
   Zo eindigt de lijn erboven exact op de rand van de alinea in plaats van op
   zijn eigen tekstlengte. width: 0 haalt hem uit de fit-content-berekening,
   min-width: 100% zet hem daarna terug op de volle breedte. */
.hero__feiten { width: 0; min-width: 100%; margin-top: 26px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.26);
  display: flex; flex-wrap: wrap; gap: 6px 32px; }
.hero__feiten span { display: inline-flex; align-items: center; gap: 9px;
  color: var(--op-foto); opacity: .82; font-size: 15px; line-height: 24px; }
.hero__feiten svg { flex: 0 0 15px; }

/* ---------- Losse regel onder een sectie ---------- */
.extra { margin: 26px 0 0; color: var(--inkt-zacht); }

/* ---------- Bewijs: citaten op een lijnenraster ----------
   Bewust geen kaarten en geen sterren per citaat. Deze sectie staat tussen twee
   secties vol beeld, dus hier alleen typografie. Eén cijfer groot, de rest stil.
   De citaten lenen de maat van .body en wisselen alleen van letterfamilie,
   zodat de schaal niet groeit. */
.bewijs { display: grid; gap: 34px;
  /* Een afgeronde kaart in plaats van een open band. De sectie ervoor en erna
     zijn allebei wit, dus zonder eigen vlak leest het bewijs als een staartje
     van de tegels erboven. Dezelfde vorm als het slotblok en de urenkaart. */
  background: var(--grond); border-radius: 24px; padding: 38px var(--marge); }
@media (min-width: 760px)  { .bewijs { padding: 48px 44px; } }
@media (min-width: 900px)  { .bewijs { grid-template-columns: 290px 1fr; gap: 56px; align-items: start; padding: 56px 52px; } }
@media (min-width: 1160px) { .bewijs { grid-template-columns: 290px 1fr; gap: 64px; padding: 64px 60px; } }
/* Het cijfer op de basislijn van de tekst, tekst op één regel. Met twee regels
   naast een gecentreerd cijfer leek de tekst erboven te zweven, want een cijfer
   in de schreef zit lager in zijn regelvak dan lopende tekst.
   Dit is de enige plek met een zevende tekstmaat. Eén cijfer, één keer, het
   zwaarste bewijs op de pagina. */
.score { display: flex; align-items: baseline; gap: 12px; margin: 28px 0 0; }
.score b { font-family: var(--display); font-weight: 400; font-size: clamp(46px, 4.4vw, 58px);
  line-height: 1; letter-spacing: -0.022em; color: var(--inkt); font-variant-numeric: tabular-nums; }
.score span { color: var(--inkt-zacht); white-space: nowrap; }
.bewijs__noot { margin: 20px 0 0; max-width: 34ch; color: var(--inkt-zacht); }
.bewijs__meer { margin: 22px 0 0; }
.bewijs__meer a { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; font-weight: 600; }
.citaten { display: grid; border-top: 1px solid var(--lijn-zacht); }
@media (min-width: 720px) { .citaten { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.citaat { margin: 0; padding: 24px 0; border-bottom: 1px solid var(--lijn-zacht);
  display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 720px) {
  .citaat { padding: 28px 20px 0 0; border-bottom: 0; }
  .citaat + .citaat { padding-left: 20px; border-left: 1px solid var(--lijn-zacht); }
}
.citaat blockquote { margin: 0; font-family: var(--display); font-size: 17px; line-height: 29px; color: var(--inkt); }
.citaat figcaption { margin-top: auto; }
/* De score die de klant echt gaf. Vier sterren tussen twee vijven laten staan
   is geloofwaardiger dan drie keer hetzelfde. Het is bovendien wat er op Google staat.
   Kleur via --link, want die kantelt mee in donkere modus. Op --rood-diep
   zou het contrast daar onder de 3 op 1 zakken. */
.sterren { display: flex; gap: 3px; color: var(--link); }
.sterren svg { width: 14px; height: 14px; flex: none; }
.sterren .leeg { opacity: .32; }

/* ---------- Menulijst, nu binnen de Ofyr-sectie ---------- */
.menu { margin-top: clamp(48px, 6vw, 84px); }
/* Staat nu in de kolom van de lijst zelf, dus links uitgelijnd op de rijen
   erboven in plaats van rechts tegen de sectierand. De marge is ruim, want de
   foto van de laatste rij steekt onder de lijst uit. */
.bestel { margin: 56px 0 0; color: var(--inkt-zacht); text-align: left; }
@media (min-width: 900px) { .bestel { grid-column: 2; margin-top: 44px; } }

/* ---------- Afsluitend actieblok: donkere kaart, één vraag, twee wegen ---------- */
/* ---------- Afsluitdoek ----------
   Dezelfde vorm als de hero: afgerond beeldvlak met een uitgesneden hoek
   rechtsonder. De pagina opent en sluit op hetzelfde gebaar. Lager dan de hero,
   want dit is een naschrift. De waas is op de gerenderde pixels nagemeten. */
.afsluit { position: relative; border-radius: 22px 22px 0 22px; overflow: hidden;
  min-height: 580px; display: flex; }
@media (min-width: 760px) { .afsluit { min-height: 450px; } }
/* Brede band in een smal venster snijdt tussen de twee mensen door. Brandpunt
   naar links, zodat ze in beeld blijven. Vanaf 760 px is de doek breed genoeg. */
.afsluit > img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 30% center; }
@media (min-width: 760px) { .afsluit > img { object-position: center; } }
.afsluit__waas { position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(26,25,23,.34) 0%, rgba(26,25,23,.24) 16%,
    rgba(26,25,23,.86) 44%, rgba(26,25,23,.94) 100%); }
/* De waas liep tot voorbij de helft van het vlak terwijl de tekst op een
   laptop al op 41 procent eindigt. Gemeten met de gerenderde randen, niet
   geschat. Hij valt nu eerder weg, zodat de foto rechts echt te zien is.
   Twee trappen, want op 1024 px loopt de tekst tot 53 procent en op 1440 nog
   maar tot 41. Eén verloop voor beide zou of te kort of te lang zijn. */
@media (min-width: 920px) {
  .afsluit__waas { background: linear-gradient(to top right,
    rgba(26,25,23,.92) 0%, rgba(26,25,23,.84) 34%, rgba(26,25,23,.50) 54%,
    rgba(26,25,23,.14) 72%, rgba(26,25,23,0) 88%); }
}
@media (min-width: 1180px) {
  .afsluit__waas { background: linear-gradient(to top right,
    rgba(26,25,23,.92) 0%, rgba(26,25,23,.82) 28%, rgba(26,25,23,.42) 46%,
    rgba(26,25,23,.10) 64%, rgba(26,25,23,0) 80%); }
}
.afsluit__in { position: relative; z-index: 2; margin-top: auto; padding: var(--marge);
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  width: fit-content; max-width: min(720px, 100%); }
@media (min-width: 760px) { .afsluit__in { padding: 44px; gap: 20px; } }
.afsluit__in h2 { color: var(--op-foto); }
.afsluit__in p { color: var(--op-foto); opacity: .92; max-width: 44ch; }
.afsluit__knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.afsluit__hoek { display: none; }
@media (min-width: 920px) {
  .afsluit__hoek {
    display: block; position: absolute; z-index: 4; right: 0; bottom: 0;
    background: var(--wit); padding: 18px 10px 10px 18px;
    border-top-left-radius: 20px;
  }
  .afsluit__hoek::before, .afsluit__hoek::after {
    content: ""; position: absolute; width: 20px; height: 20px; background: var(--wit);
    -webkit-mask-image: radial-gradient(circle 20px at 0 0, #0000 19.5px, #000 20.5px);
    mask-image: radial-gradient(circle 20px at 0 0, #0000 19.5px, #000 20.5px);
  }
  .afsluit__hoek::before { right: 0; top: -20px; }
  .afsluit__hoek::after  { left: -20px; bottom: 0; }
  .afsluit__hoek-mobiel { display: none; }
}

/* ---------- Vragen ----------
   Zelfde raster en zelfde lijnen als de bewijssectie, zodat de pagina er geen
   nieuwe vormtaal bij krijgt. details en summary in plaats van een accordeon
   in JavaScript: open en dicht met het toetsenbord. Zonder script leesbaar. */
.vragen { border-top: 1px solid var(--lijn); }
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary { list-style: none; cursor: pointer; position: relative;
  padding: 20px 46px 20px 0; font-size: 21px; line-height: 28px; font-weight: 600;
  letter-spacing: -0.008em; color: var(--inkt); }
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover { color: var(--link); }
.vraag summary::after { content: ""; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px; border-right: 2px solid var(--inkt-zacht);
  border-bottom: 2px solid var(--inkt-zacht); transform: translateY(-70%) rotate(45deg);
  transition: transform .25s cubic-bezier(.2,.6,.2,1); }
.vraag[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.vraag p { margin: 0 0 24px; max-width: 62ch; }


/* ===========================================================================
   Stijl per pagina
   ---------------------------------------------------------------------------
   Deze blokken stonden tot 1 oktober als tweede <style> in hun eigen pagina.
   Ze staan hier omdat het framework één stijlbestand verwacht, en omdat zes
   losse blokken zes extra verzoeken zijn. De regels waren al per pagina
   afgeschermd met eigen klassen, dus ze botsen niet.
   =========================================================================== */

/* ---------- traiteur-catering.html ---------- */
/* ---------- Lagere hero voor de vervolgpagina's ----------
   Zelfde vorm en zelfde waas als de home, maar minder hoog. Een vervolgpagina
   opent niet met hetzelfde gebaar als de voordeur. Ook de kop is kleiner: 62 px
   in plaats van 84. Dat scheelt een regel, en daardoor past er een plaatsnaam
   in de H1 zonder dat hij over drie regels loopt. */
.hero__doek--laag { min-height: 480px; }
@media (min-width: 760px) { .hero__doek--laag { min-height: 460px; } }
.d2xl--sub { font-size: clamp(36px, 5.2vw, 62px); line-height: 1.07; }

/* ---------- Gelegenheden ----------
   Blokken zonder foto. Dat is een keuze: de home draagt het beeld, deze pagina
   draagt de inhoud. Evenveel beeldtegels zouden de pagina traag en rommelig
   maken, en evenveel belknoppen zijn evenveel keer dezelfde vraag. Eén regel
   onder het raster volstaat. De haarlijn is dezelfde als bij de menulijst en de
   vragen.
   Let op het aantal: het moeten er twaalf of vijftien zijn, want die gaan
   gelijk op bij drie kolommen. Sinds de festivals erbij kwamen zijn het er
   dertien, dus er is er een samengevoegd.
   Let op wat er NIET in staat: de barbecue. Die stond hier tot 23 september als
   een van de twaalf, en kreeg daarnaast een eigen sectie. Het sterkste argument
   van de zaak twee keer half tonen kostte punten op de opbouw. Nu staat hij
   enkel nog in zijn eigen sectie. */
.gelegen { display: grid; border-top: 1px solid var(--lijn); }
@media (min-width: 680px)  { .gelegen { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 48px; } }
@media (min-width: 1100px) { .gelegen { grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 60px; } }
.geval { padding: 24px 0 26px; border-bottom: 1px solid var(--lijn-zacht); }
.geval h3 { font-size: 20px; line-height: 27px; font-weight: 600; letter-spacing: -0.008em; margin: 0; color: var(--inkt); }
.geval p { margin: 7px 0 0; font-size: 15px; line-height: 24px; color: var(--inkt-zacht); }

/* ---------- Kolomblok met beeld ernaast ----------
   Dezelfde spreiding als de kerstfolder op de home: haarlijn over de volle
   breedte, twee kolommen die op die lijn beginnen. */
.spreid { display: grid; gap: 34px; border-top: 1px solid var(--lijn); padding-top: 32px; }
@media (min-width: 900px) {
  .spreid { grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr);
    gap: 72px; align-items: start; padding-top: 42px; }
}
@media (min-width: 900px) { .spreid--om > :first-child { order: 2; } }
.spreid img { display: block; width: 100%; height: auto; border-radius: 14px; }

/* ---------- Bewijs op wit ----------
   Zelfde onderdeel als op de home, maar zonder het beige vlak eromheen. Hier
   staat het onder de Ofyr-sectie, die zelf al beige is. Twee beige vlakken
   tegen elkaar lezen als één blok. Een haarlijn doet hier hetzelfde werk. */
.bewijs--open { background: transparent; border-radius: 0; padding: 0;
  border-top: 1px solid var(--lijn); padding-top: 34px; }
@media (min-width: 900px) { .bewijs--open { padding-top: 44px; } }

/* ---------- Werkstrook ----------
   Vier foto's uit de galerij, als bewijs in beeld naast het bewijs in woorden.
   Alle vier de bronbeelden staan op 675 bij 900, dus op 3:4 valt er niets weg. */
.werkstrook { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 30px;
  border-radius: 12px; }
.werkstrook:focus-visible { outline: 2px solid var(--inkt); outline-offset: 5px; }
@media (min-width: 680px) { .werkstrook { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; } }
.werkstrook img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4;
  object-fit: cover; border-radius: 10px; transition: opacity .18s ease; }
.werkstrook:hover img { opacity: .88; }
.strookvoet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px; margin-top: 18px; }
.strookvoet p { margin: 0; color: var(--inkt-zacht); }

/* ---------- Uit de keuken ----------
   Zes kolommen met gerechtnamen, zonder prijzen. Dezelfde haarlijnen als de
   gelegenheden erboven, maar smaller gezet: dit zijn losse namen en geen
   zinnen, dus ze mogen dichter op elkaar. */
.keuken { display: grid; gap: 0; border-top: 1px solid var(--lijn); }
@media (min-width: 620px)  { .keuken { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 48px; } }
@media (min-width: 1000px) { .keuken { grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 56px; } }
.kook { padding: 22px 0 24px; border-bottom: 1px solid var(--lijn-zacht); }
.kook h3 { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; margin: 0 0 12px; color: var(--inkt-zacht); }
.kook ul { margin: 0; padding: 0; list-style: none; }
.kook li { font-size: 16px; line-height: 27px; color: var(--inkt-body); }
.kook li span { color: var(--inkt-zacht); font-size: 14px; }

/* ---------- Stappen ----------
   Genummerd, want dit is echt een volgorde. Elders op de site staan geen
   nummers, precies omdat daar geen volgorde in zit. */
.stappen { display: grid; gap: 0; counter-reset: stap; border-top: 1px solid var(--lijn); }
@media (min-width: 900px) { .stappen { grid-template-columns: repeat(4, minmax(0,1fr)); column-gap: 40px; } }
.stap { counter-increment: stap; padding: 26px 0; border-bottom: 1px solid var(--lijn-zacht); }
.stap::before { content: counter(stap); display: block; font-family: var(--display);
  font-size: 30px; line-height: 1; color: var(--inkt-zacht); margin-bottom: 14px; }
.stap h3 { font-size: 18px; line-height: 25px; font-weight: 600; margin: 0; color: var(--inkt); }
.stap p { margin: 7px 0 0; font-size: 15px; line-height: 24px; color: var(--inkt-zacht); }

/* ---------- Praktische regels ---------- */
.feiten { display: grid; gap: 0; border-top: 1px solid var(--lijn); }
@media (min-width: 760px) { .feiten { grid-template-columns: 260px 1fr; column-gap: 48px; } }
.feit { display: contents; }
.feit dt { padding: 20px 0 6px; font-size: 15px; font-weight: 600; color: var(--inkt); }
.feit dd { margin: 0; padding: 0 0 22px; font-size: 17px; line-height: 28px; color: var(--inkt-body); border-bottom: 1px solid var(--lijn-zacht); }
@media (min-width: 760px) {
  .feit dt { padding: 22px 0; border-bottom: 1px solid var(--lijn-zacht); }
  .feit dd { padding: 22px 0; }
}

/* ---------- Twee wegen naast elkaar ----------
   Tot 23 september stond de enige route naar het formulier onderaan de pagina,
   op 5648 pixels. Vier telefoonknoppen daarboven, nul formulierroutes. Wie
   liever schrijft dan belt moest helemaal naar beneden, en dat is net de
   feestplanner die in weken beslist. Dit blok staat direct onder de praktische
   gegevens, op het punt waarop de bezoeker klaar is met vergelijken. */
.keuzeknoppen { display: flex; flex-wrap: wrap; gap: 12px; }
.keuzeblok { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 28px; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--lijn); }
.keuzeblok p { margin: 0; color: var(--inkt-zacht); flex: 1 1 280px; max-width: 46ch; }

/* ---------- galerij.html ---------- */
/* ---------- Galerij ----------
   Metselverband met CSS-kolommen. De foto's komen van een telefoon en staan
   dus door elkaar in staand en liggend. Een vast raster zou ze allemaal
   moeten bijsnijden, en dan verlies je net wat er op staat. Zo houdt elke
   foto zijn eigen verhouding en blijft de onderlinge afstand gelijk.

   Let op het aantal per groep: acht, acht en acht. Dat is geen toeval.
   Vrijwel alle foto's staan rechtop en zijn dus even hoog. Bij negen foto's
   over vier kolommen verdeelt de browser ze als 3/3/3/0 en blijft de vierde
   kolom leeg, wat eruitziet als een fout in de opmaak. Acht gaat gelijk op bij
   vier, drie en twee kolommen.
   Het waren er twaalf in de derde groep tot 24 september. Luc keurde toen drie
   foto's af en er is er een vierde weggehaald om de groepen gelijk te houden. */
.galerij { column-count: 2; column-gap: 12px; }
@media (min-width: 760px)  { .galerij { column-count: 3; column-gap: 14px; } }
@media (min-width: 1200px) { .galerij { column-count: 4; column-gap: 16px; } }
.galerij figure { break-inside: avoid; margin: 0 0 12px; }
@media (min-width: 760px) { .galerij figure { margin-bottom: 14px; } }
@media (min-width: 1200px) { .galerij figure { margin-bottom: 16px; } }
.galerij img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--grond); }
/* Het bijschrift staat er als onderschrift en niet als opgelegde laag over de
   foto. Zodra Luc de echte bijschriften doorgeeft, staat hier zijn tekst. */
.galerij figcaption { margin-top: 8px; font-size: 13px; line-height: 19px; color: var(--inkt-zacht); }

.groep { margin-top: 56px; }
.groep:first-of-type { margin-top: 0; }
.groep__kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px 24px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--lijn); }
.groep__kop p { margin: 0; color: var(--inkt-zacht); max-width: 46ch; }

/* ---------- contact.html ---------- */
/* ---------- Contactspreiding ----------
   Formulier links, praktische gegevens rechts. Dezelfde haarlijn en dezelfde
   twee kolommen als bij de kerstfolder op de home. */
.contactrij { display: grid; gap: 40px; border-top: 1px solid var(--lijn); padding-top: 32px; }
@media (min-width: 900px) {
  .contactrij { grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr);
    gap: 72px; align-items: start; padding-top: 42px; }
}

/* ---------- Formulier ----------
   Eén kolom, ruime raakvlakken, zichtbare focus. De velden lenen de vorm van
   de knoppen: dezelfde randkleur, dezelfde ronding op de kleinere maat. */
.veldrij { display: grid; gap: 18px; }
@media (min-width: 620px) { .veldrij--twee { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.veld { display: flex; flex-direction: column; gap: 7px; }
.veld label { font-size: 14px; font-weight: 600; color: var(--inkt); }
.veld label span { font-weight: 400; color: var(--inkt-zacht); }
.veld input, .veld select, .veld textarea {
  font: inherit; font-size: 16px; color: var(--inkt); background: var(--wit);
  border: 1px solid var(--lijn-sterk); border-radius: 12px;
  padding: 12px 14px; min-height: 48px; width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease; }
.veld textarea { min-height: 132px; resize: vertical; line-height: 26px; }
.veld input:hover, .veld select:hover, .veld textarea:hover { border-color: var(--inkt-zacht); }
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible {
  outline: none; border-color: var(--inkt); box-shadow: 0 0 0 3px rgba(26,25,23,.12); }
.formulier { margin-top: 24px; display: grid; gap: 18px; }

/* Het aanvinkvakje staat op 20 px met 4 px lucht eronder, zodat de rij op de
   vierentwintig van WCAG 2.5.8 uitkomt. Het label loopt ernaast door over
   meerdere regels, dus align-items: flex-start en niet center. */
.veld--akkoord { flex-direction: row; align-items: flex-start; gap: 12px; }
.veld--akkoord input { width: 20px; height: 20px; min-height: 0; flex: 0 0 auto;
  margin: 2px 0; padding: 0; accent-color: var(--inkt); cursor: pointer; }
.veld--akkoord label { font-size: 15px; line-height: 24px; font-weight: 400;
  color: var(--inkt-body); cursor: pointer; }
.veld--akkoord label a { font-weight: 600; }

/* Honingpot. Buiten beeld schuiven in plaats van display: none, want dat
   laatste herkennen de meeste bots. Niet in de tabvolgorde en niet in de
   toegankelijkheidsboom. */
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulier__voet { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 6px; }
.formulier__voet .mini { max-width: 40ch; }

/* ---------- Praktische kaart ----------
   Dezelfde afgeronde kaart als het bewijsblok en de vragen op de home. */
.kaart { background: var(--grond); border-radius: 24px; padding: 30px var(--marge); }
@media (min-width: 760px) { .kaart { padding: 34px 32px; } }
.kaart + .kaart { margin-top: 16px; }
.kaart dl { margin: 0; display: grid; gap: 0; }
.kaart dt { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--inkt-zacht); }
.kaart dd { margin: 8px 0 0; font-size: 17px; line-height: 28px; color: var(--inkt-body); }
.kaart dd + dt { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--lijn); }
.kaart a { font-weight: 600; }

/* Geen ingebedde kaart. Die kost een externe verbinding en een
   toestemmingsmelding, voor een adres dat je toch in je eigen telefoon plakt.
   Een link naar Google Maps is eerlijker en sneller. */

/* ---------- privacy.html ---------- */
/* ---------- Leespagina ----------
   Eén kolom, geen beeld. Dit is de enige pagina die niemand vrijwillig leest,
   dus hij moet vooral kort en te overzien zijn. Regellengte bewust onder de
   zeventig tekens. Elke rubriek begint op een haarlijn zodat je met scrollen
   meteen de kop ziet die je zoekt. */
.lees { max-width: 68ch; }
.lees__blok { border-top: 1px solid var(--lijn); padding-top: 26px; margin-top: 34px; }
.lees__blok h2 { font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.008em;
  margin: 0; color: var(--inkt); font-family: var(--tekst); }
.lees__blok p { margin: 14px 0 0; }
.lees__blok ul { margin: 14px 0 0; padding-left: 20px; }
.lees__blok li { margin: 7px 0 0; font-size: 17px; line-height: 28px; color: var(--inkt-body); }
.lees__blok li::marker { color: var(--inkt-zacht); }

/* De inhoudsopgave is geen versiering: deze pagina wordt gebruikt om één ding
   op te zoeken, zelden om van begin tot eind te lezen. Op smalle schermen staat
   hij als een rij pillen onder de inleiding, op brede schermen rechts naast de
   tekst waar hij meeschuift. Dat vult meteen de halve breedte die een
   leeskolom van 68 tekens anders leeg laat. */
.inhoudsopgave { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 26px; }
.inhoudsopgave a { display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 14px; border: 1px solid var(--lijn); border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--inkt-body); }
.inhoudsopgave a:hover { border-color: var(--inkt); color: var(--inkt); text-decoration: none; }

@media (min-width: 1100px) {
  .leesrij { display: grid; grid-template-columns: minmax(0,68ch) 1fr; column-gap: 80px; align-items: start; }
  .leesrij .lees { max-width: none; }
  .inhoudsopgave { position: sticky; top: 96px; display: flex; flex-direction: column;
    align-items: flex-start; gap: 2px; margin-top: 8px; padding-top: 26px;
    border-top: 1px solid var(--lijn); }
  .inhoudsopgave a { border: 0; border-radius: 0; padding: 0; min-height: 32px;
    font-size: 15px; color: var(--inkt-zacht); }
  .inhoudsopgave a:hover { color: var(--inkt); }
  .inhoudsopgave__kop { display: block; }
}
.inhoudsopgave__kop { display: none; }

/* ---------- sitemap.html ---------- */
/* ---------- Sitemap ----------
   Eén kolom met een regel per bestemming. Geen raster: de volgorde is de
   belangrijkste informatie op deze pagina, en een raster leest in twee
   richtingen tegelijk. De haarlijn tussen de regels is dezelfde als bij de
   menulijst en de vragenrubriek, zodat het ritme van de site doorloopt. */
.plattegrond { max-width: 68ch; }
.plattegrond__groep { border-top: 1px solid var(--lijn); padding-top: 26px; margin-top: 34px; }
.plattegrond__groep h2 { font-size: 22px; line-height: 30px; font-weight: 600;
  letter-spacing: -0.008em; margin: 0 0 6px; color: var(--inkt); font-family: var(--tekst); }
.plattegrond__groep > p { margin: 0 0 10px; color: var(--inkt-zacht); font-size: 15px; line-height: 24px; }

.plattegrond__rij { display: block; border-bottom: 1px solid var(--lijn); padding: 16px 0; }
.plattegrond__rij:hover { text-decoration: none; }
.plattegrond__rij:hover .plattegrond__naam { color: var(--link); }
.plattegrond__naam { display: block; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--inkt); }
.plattegrond__wat { display: block; margin-top: 3px; font-size: 15px; line-height: 23px; color: var(--inkt-body); }

/* De huidige pagina is geen link maar een vermelding. Een link naar de pagina
   waar je al staat is een dood eind, en dat is precies wat een sitemap niet
   hoort te zijn. */
.plattegrond__rij[aria-current] .plattegrond__naam { color: var(--link); }
.plattegrond__rij[aria-current] .plattegrond__naam::after { content: " (je bent hier)";
  font-weight: 400; color: var(--inkt-zacht); font-size: 15px; }

/* Op een breed scherm staat de lijst pagina's links en gaan de twee kleine
   groepen rechts ernaast. Een leeskolom van 68 tekens laat anders de halve
   breedte leeg, hetzelfde bezwaar als bij de privacyverklaring. Twee kolommen
   mogen hier wel, want de groepen zijn gescheiden blokken en geen doorlopende
   tekst: je springt niet van links naar rechts midden in een zin. */
@media (min-width: 1100px) {
  .plattegrond { max-width: none; display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: 72px; }
  .plattegrond > .label,
  .plattegrond > h1,
  .plattegrond > p { grid-column: 1 / -1; max-width: 68ch; }
  .plattegrond__groep:nth-of-type(1) { grid-column: 1; grid-row: 4 / span 2; }
  .plattegrond__groep:nth-of-type(2) { grid-column: 2; grid-row: 4; }
  .plattegrond__groep:nth-of-type(3) { grid-column: 2; grid-row: 5; align-self: start; }
}