/* Het ontwerp van de landensites.
 *
 * Overgenomen uit het Tourex-sjabloon, variant home-three
 * (public/assets/css/main.css in dat pakket). Dat sjabloon werkt met twee
 * kleuren en dat is de kern ervan: paars is actie, oranje hoort bij de prijs.
 * Toen alles nog hetzelfde accent droeg sprong er niets meer uit.
 *
 * De opbouw van de pagina's is van ons: hero, secties, kaarten, filterkolom.
 * De vormgeving komt uit het sjabloon: palet, letters (Poppins en Outfit),
 * hoeken, knoppen en het ritme tussen de secties.
 */

:root {
  /* Palet en letters uit het Tourex-sjabloon, variant home-three. Twee
     kleuren, en dat verschil is het hele punt: paars is actie (knoppen,
     links), oranje hoort bij de prijs en de labels. Toen alles nog een
     terracotta accent had sprong er niets meer uit. */

  /* inkt */
  --inkt: #020615;
  --inkt-tekst: #353844;
  --inkt-zacht: #353844;
  --inkt-zachter: #454546;
  --inkt-stil: #737374;

  /* accent; per site te overschrijven vanuit Site.kleur_accent */
  --accent: #560ce3;
  --accent-diep: #4409b8;
  --accent-zacht: #f0e9ff;
  --prijs: #f74a1f;

  /* lijnen en vlakken */
  --lijn: #e6e6e6;
  --lijn-licht: #f0f0f0;
  --lijn-zwaar: #c5c5c5;
  --vlak-warm: #f8f8f8;
  --vlak-koel: #f6f6f7;
  --vlak-kaart: #f6f4fa;
  --vlak-diep: #020615;
  --beeld-leeg: #f3f3f4;
  --hero-leeg: #020615;

  /* signaalkleuren voor drukte en trend */
  --sein-rustig: #1f7a4d;
  --sein-midden: #8a7a10;
  --sein-druk: #c2610f;
  --sein-vol: #d13d1c;

  /* letters */
  --font-titel: Outfit, Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-tekst: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: Outfit, Poppins, system-ui, sans-serif;

  /* maatvoering */
  --breed: 1360px;
  --marge: 40px;
  --kop-hoog: 94px;
  /* Hoever het filterlijf over de onderrand van de hero valt. */
  --tilhoogte: 120px;
  /* Hoever het zoekpaneel over de hero valt. Staat hier omdat zowel het
     paneel als de herotekst zich eraan moet houden. */
  --zoekoverlap: 150px;
  /* Hoe hoog het herobeeld op mobiel is. Een maat en geen los getal,
     want de fotocredit hangt eraan en schoof mee de mist in toen deze
     hoogte veranderde. */
  --herobeeld: 46vh;
  --herobeeld-zoek: 24vh;
  --radius: 12px;
  --radius-knop: 6px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--inkt);
  font-family: var(--font-tekst);
  font-size: 17px;
  line-height: 1.66;
  padding-top: var(--kop-hoog);
  overflow-x: hidden;
}
/* Een pagina die met een hero opent, laat het beeld tot de bovenkant lopen en
   de kop erover zweven. Dan begint de foto op nul en niet onder een balk. */
body.lijf--hero { padding-top: 0; }

img, svg, video { max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-diep); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.alleen-schermlezer {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.alleen-schermlezer:focus {
  position: fixed; top: 12px; left: 12px; z-index: 200; width: auto; height: auto;
  clip: auto; margin: 0; padding: 12px 20px; background: #fff;
  border: 1px solid var(--lijn-zwaar);
}

/* --------------------------------------------------------------- omhulsel */

.omhulsel { max-width: var(--breed); margin: 0 auto; }

.sectie { padding: 130px var(--marge) 0; }
.sectie--kort { padding-top: 68px; }
.sectie--kop { padding-top: 52px; }
.sectie--slot { padding-bottom: 130px; }
.sectie--vlak { margin-top: 130px; padding: 130px var(--marge) 130px; background: var(--vlak-koel); }
.sectie--vlak-warm { margin-top: 130px; padding: 120px var(--marge) 120px; background: var(--vlak-warm); }

/* Een sectieband met een foto erachter. De sluier is geen effect maar een
   voorwaarde: welke foto de bron levert weten we niet, dus moet de tekst
   leesbaar blijven op een witte gevel én op een nachtelijke haven. Vandaar een
   vaste donkere laag en geen doorschijnende. */
.sectie--beeld {
  position: relative; background-size: cover; background-position: center;
  background-repeat: no-repeat; color: #fff;
}
.sectie--beeld::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, oklch(0.24 0.03 40 / 0.92) 0%,
                              oklch(0.24 0.03 40 / 0.72) 58%,
                              oklch(0.24 0.03 40 / 0.5) 100%);
}
.sectie--beeld > * { position: relative; }
.sectie--beeld .kicker { color: oklch(0.86 0.06 60); }
.sectie--beeld .titel-m, .sectie--beeld .titel-l { color: #fff; }
.sectie--beeld .intro, .sectie--beeld .voetnoot { color: rgba(255, 255, 255, 0.84); }
/* De tweede knop op een fotoband. Dit stond er als `border-color` plus witte
   letters, en dat werkte niet: `.knop--rand` heeft helemaal geen rand maar een
   lichtpaarse vulling, dus er kwam wit op lichtpaars te staan en de knop viel
   weg tegen de foto. Op een foto weet je de achtergrond niet, dus moet de knop
   zijn eigen contrast meenemen: een doorschijnend vlak met een witte rand
   leest zowel op een lichte gevel als op een donkere kust. */
.sectie--beeld .knop--rand {
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.75); color: #fff;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.sectie--beeld .knop--rand:hover {
  background: rgba(255, 255, 255, 0.3); border-color: #fff; color: #fff;
}

/* ------------------------------------------------------------- typografie */

/* Boventitel zoals tg-section-subtitle in het sjabloon: paars, gewone letters,
   geen mono en geen spatiëring. Kapitalen met veel letterafstand hoorden bij
   het vorige ontwerp. */
.kicker {
  margin: 0 0 10px;
  font-family: var(--font-titel);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}
.kicker--stil { color: var(--inkt-stil); }
.kicker--breed { letter-spacing: 0; }
/* De pilvariant van het sjabloon: paars op lichtpaars. */
.kicker--pil {
  display: inline-block; background: var(--accent-zacht);
  border-radius: 100px; padding: 6px 18px; font-size: 15px;
}

.titel-xl {
  margin: 0 0 12px;
  font-family: var(--font-titel);
  font-weight: 700;
  font-size: 62px;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.titel-l {
  margin: 0 0 18px;
  font-family: var(--font-titel);
  font-weight: 700;
  font-size: 48px;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.titel-m {
  margin: 0 0 14px;
  font-family: var(--font-titel);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.titel-s {
  margin: 0 0 20px;
  font-family: var(--font-titel);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.titel-kaart {
  margin: 0 0 8px;
  font-family: var(--font-titel);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.15;
}

.lood {
  margin: 0 0 18px;
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--inkt-tekst);
  text-wrap: pretty;
}
.intro {
  margin: 0;
  font-size: 19px;
  line-height: 1.7;
  color: var(--inkt-zacht);
  text-wrap: pretty;
}
.bijschrift {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--inkt-stil);
}
/* Bijschrift en fotograaf bij een foto. Op een hero staat hij over het beeld
   heen, rechtsonder, waar hij de titel niet in de weg zit. */
.beeldbron {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--inkt-stil);
}
.beeldbron__foto { opacity: 0.75; }

/* De fotograaf in de hoek van het beeld zelf, in plaats van een colofonregel
   onder het raster. Klein en met een schaduwrand, zodat hij op elke foto
   leesbaar is zonder de aandacht te trekken. */
.beeldcredit {
  position: absolute; right: 10px; bottom: 8px; z-index: 3;
  font-size: 10.5px; line-height: 1.2; color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); pointer-events: none;
  max-width: 70%; text-align: right;
}
.beeldbron a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.beeldbron--over {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 3;
  margin: 0;
  max-width: min(92%, 560px);
  text-align: right;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.beeldbron--over a { color: inherit; }

.voetnoot { margin: 14px 0 0; font-size: 13.5px; color: var(--inkt-stil); }

.inleider { max-width: 820px; margin-bottom: 44px; }
.inleider--breed { max-width: 900px; }

.mono { font-family: var(--font-mono); }

/* Vrije HTML uit de database (import uit WordPress). */
.tekst { font-size: 18px; line-height: 1.72; color: var(--inkt-tekst); }
.tekst > :first-child { margin-top: 0; }
.tekst > :last-child { margin-bottom: 0; }
.tekst p { margin: 0 0 20px; text-wrap: pretty; }
.tekst h2 {
  margin: 40px 0 14px; font-family: var(--font-titel); font-weight: 400;
  font-size: 32px; line-height: 1.1; letter-spacing: -0.02em; color: var(--inkt);
}
.tekst h3 {
  margin: 32px 0 10px; font-family: var(--font-titel); font-weight: 400;
  font-size: 25px; line-height: 1.15; color: var(--inkt);
}
.tekst h4 { margin: 26px 0 8px; font-size: 17px; font-weight: 700; color: var(--inkt); }
.tekst ul, .tekst ol { margin: 0 0 18px; padding-left: 22px; }
.tekst li { margin-bottom: 8px; }
/* Beeld in lopende tekst vult altijd de kolom. WordPress leverde ze op hun
   eigen formaat af (soms een staand kiekje van 600 breed) en dat oogt als een
   vergissing naast tekst die wel de volle breedte pakt. */
.tekst img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); margin: 6px 0;
}
.tekst figure { margin: 28px 0; }
.tekst figcaption {
  margin-top: 10px; font-family: var(--font-titel); font-size: 13px; font-weight: 500;
  color: var(--inkt-stil);
}
.tekst blockquote {
  margin: 24px 0; padding-left: 22px; border-left: 2px solid var(--accent);
  font-family: var(--font-titel); font-size: 24px; line-height: 1.3; color: var(--inkt);
}
.tekst table { width: 100%; border-collapse: collapse; margin: 0 0 22px; }
.tekst th, .tekst td {
  text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--lijn-licht);
  font-size: 15.5px; vertical-align: top;
}
.tekst th { font-family: var(--font-titel); font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--inkt-stil); }

/* ---------------------------------------------------------------- knoppen */

/* Knop uit het Tourex-sjabloon: paars, 6px hoeken, hoofdletters. Paars is de
   enige actiekleur op de site; oranje is voorbehouden aan de prijs. */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; border: 0; font: inherit; font-size: 15px; font-weight: 600;
  letter-spacing: 0.01em; text-transform: uppercase;
  background: var(--accent); color: #fff; border-radius: var(--radius-knop);
  padding: 13px 27px; white-space: nowrap; transition: background 0.16s ease;
}
.knop:hover { background: var(--accent-diep); color: #fff; }
.knop--breed { width: 100%; padding: 15px; font-size: 15.5px; }
/* Tweede knop: paars op een lichtpaarse ondergrond, geen zwarte rand. */
.knop--rand {
  background: var(--accent-zacht); color: var(--accent);
  border: 0; border-radius: var(--radius-knop); padding: 13px 24px; font-size: 14.5px;
}
.knop--rand:hover { background: var(--accent); color: #fff; }
.knop--donker { background: var(--inkt); }
.knop--donker:hover { background: #1a1f33; }

.doorlink {
  display: inline-block; font-size: 15px; font-weight: 600; color: var(--accent);
  border-bottom: 1px solid var(--accent); padding-bottom: 4px; white-space: nowrap;
}

.kop-rij {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; margin-bottom: 30px;
}
.kop-rij .titel-m { margin-bottom: 0; }

.kruimels { margin: 0 0 18px; font-family: var(--font-titel); font-size: 13px; font-weight: 500; color: oklch(0.5 0.02 60); }
.kruimels a { border-bottom: 1px solid oklch(0.8 0.06 36); }

/* ------------------------------------------------------------------ beeld */

.plaatshouder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--beeld-leeg); color: var(--inkt-stil);
  font-family: var(--font-titel); font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  text-align: center; padding: 12px;
}
.beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------- sitekop */

.sitekop {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  /* Logo en menu volgen dezelfde middenkolom als de content en de
     hero-tekst; de balk zelf blijft de volle breedte. Op een gewoon scherm
     wint gewoon de marge. */
  height: var(--kop-hoog);
  padding: 0 max(var(--marge), calc((100% - var(--breed)) / 2));
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lijn);
}

/* Zwevend boven een hero: geen ondergrond, witte letters, wit logo. Zodra je
   voorbij het beeld scrolt zet ontrwerp.js de klasse `sitekop--vast` en komt
   de gewone witte balk terug. Zonder JavaScript blijft de kop zwevend; dat
   leest nog steeds, want onder de kop staat altijd de donkere waas. */
.lijf--hero .sitekop {
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
}
.lijf--hero .sitekop:not(.sitekop--vast) .sitekop__merk,
.lijf--hero .sitekop:not(.sitekop--vast) .sitekop__knop,
.lijf--hero .sitekop:not(.sitekop--vast) .sitekop__markt,
.lijf--hero .sitekop:not(.sitekop--vast) .sitekop__hamburger { color: #fff; }
.sitekop .knop--rand {
  background: none; border: 1px solid var(--lijn-zwaar); color: var(--inkt);
  border-radius: 100px; padding: 8px 22px; font-size: 14px;
}
.sitekop .knop--rand:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.lijf--hero .sitekop:not(.sitekop--vast) .knop--rand {
  color: #fff; border-color: rgba(255, 255, 255, 0.7);
}
.lijf--hero .sitekop:not(.sitekop--vast) .knop--rand:hover {
  background: var(--accent); border-color: var(--accent);
}
/* Waar een echte witte versie bestaat, wisselen we van bestand. Alleen waar
   die ontbreekt maakt een filter het kleurlogo wit; dat is de mindere optie,
   want het vlakt drie kleuren en een laag op halve dekking tot een witte vlek.
   Vijf van de negen sites hebben een echte witte versie. */

.sitekop--vast {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(10px);
  border-bottom-color: transparent !important;
  box-shadow: 0 1px 3px 0 rgba(18, 20, 32, 0.14);
}

.sitekop__merk {
  display: inline-flex; align-items: center;
  font-family: var(--font-titel); font-size: 29px; letter-spacing: -0.01em;
  white-space: nowrap; color: var(--inkt);
}
.sitekop__merk:hover { color: var(--inkt); }
/* Verhouding overgenomen van de oude site: het logo vult ruim de helft
   van de kophoogte. Op 38 pixels was de ".com" eronder nog geen zes
   pixels hoog en oogde niets scherp. */
.sitekop__logo { height: 54px; width: auto; display: block; }

/* De varianten staan bewust ná de basisregel hierboven. Stonden ze ervoor,
   dan won `display: block` van de basis en verschenen beide logo's naast
   elkaar zodra de kop wit werd; de kop sprong dan honderd pixels breder. */
.sitekop__logo--wit { display: none; }
.lijf--hero .sitekop:not(.sitekop--vast) .sitekop__logo--wit { display: block; }
.lijf--hero .sitekop:not(.sitekop--vast) .sitekop__logo--kleur { display: none; }
.lijf--hero .sitekop:not(.sitekop--vast) .sitekop__logo--enkel {
  filter: brightness(0) invert(1);
}
/* Twee bestanden boven elkaar zou de kop twee keer zo breed maken. */
.sitekop__merk { position: relative; }
.sitekop__tld { font-family: var(--font-titel); font-size: 13.5px; font-weight: 500; }
/* Menu zoals tgmenu: 15px, halfvet, gewone letters. Geen onderstreping bij het
   openklappen maar de accentkleur; dat is rustiger op een foto. */
.sitekop__nav { display: flex; gap: 4px; font-size: 15px; font-weight: 500; align-items: center; }
.sitekop__knop {
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--inkt); background: none; border: 0; font: inherit;
  font-weight: 500; padding: 36px 12px 34px;
}
.sitekop__knop:hover { color: var(--accent); }
.sitekop__knop[aria-expanded="true"] { color: var(--accent); }
.sitekop__pijl { font-size: 9px; opacity: 0.6; }
.sitekop__rechts { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.sitekop__markt { font-size: 13px; color: var(--inkt-stil); white-space: nowrap; }
.sitekop__hamburger { display: none; }

/* mega-menu */
.mega {
  position: fixed; top: var(--kop-hoog); left: 0; right: 0; z-index: 49;
  background: #fff; border-bottom: 1px solid oklch(0.9 0.01 80);
  box-shadow: 0 18px 30px -24px rgba(0, 0, 0, 0.45);
}
.mega[hidden] { display: none; }
.mega__binnen {
  /* Inclusief de eigen marges, zelfde rekensom als de hero-tekst; anders
     springt het paneel een marge naar rechts ten opzichte van de kop. */
  max-width: calc(var(--breed) + 2 * var(--marge));
  margin: 0 auto; padding: 40px var(--marge) 44px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 400px;
  gap: 52px; align-items: start;
}
.mega__label {
  margin: 0 0 18px; font-family: var(--font-titel); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--accent);
}
.mega__label--stil { color: var(--inkt-stil); }
.mega__lijst { display: grid; gap: 4px; }
.mega__item { display: block; padding: 12px 0; border-bottom: 1px solid oklch(0.94 0.01 80); }
.mega__item-titel {
  display: block; font-family: var(--font-titel); font-weight: 400; font-size: 28px;
  line-height: 1.12; letter-spacing: -0.01em; color: var(--inkt);
}
.mega__item:hover .mega__item-titel { color: var(--accent); }
.mega__item-noot { display: block; margin-top: 4px; font-size: 14.5px; color: oklch(0.5 0.02 60); }
.mega__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid oklch(0.89 0.01 80); border-radius: 999px;
  padding: 8px 15px 8px 11px; font-size: 14px; color: oklch(0.28 0.015 60);
}
.chip:hover { border-color: var(--inkt); color: var(--inkt); }
.chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
}
.mega__uitgelicht-beeld {
  position: relative; height: 260px; border-radius: var(--radius);
  overflow: hidden; background: var(--beeld-leeg);
}
.mega__voet { border-top: 1px solid oklch(0.94 0.01 80); }
.mega__voet-binnen {
  max-width: var(--breed); margin: 0 auto; padding: 16px var(--marge);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.mega__voet-tekst { font-family: var(--font-titel); font-size: 13px; font-weight: 500; color: oklch(0.5 0.02 60); }

/* ------------------------------------------------------------------ heros */

.hero {
  position: relative; height: 62vh; min-height: 460px; overflow: hidden;
  background: var(--hero-leeg);
}
.hero--laag { height: 52vh; min-height: 380px; }
/* Overzichtspagina met opgetild filterlijf: de kop en de opgetilde rand eten
   samen ruim tweehonderd pixels, dus deze hero heeft meer bodem nodig om de
   gecentreerde tekst ertussen te laten passen, ook op een laag scherm. */
.hero--overzicht { height: 58vh; min-height: 540px; }
.hero--midden { height: 58vh; min-height: 420px; }
.hero--hoog { height: 66vh; min-height: 480px; }
/* De hero zoomt langzaam in. Op een breed scherm, en daar alleen.

   Reden: Speed Index meet wanneer het beeld tot rust komt, en bij een animatie
   die nooit stopt komt het nooit tot rust. Dat gaf 13,2 seconden op mobiel
   terwijl de pagina in 1,1 seconde geschilderd was en in 2,0 seconde zijn
   grootste element had - het cijfer beschreef de animatie, niet de laadtijd.
   Op een telefoon staat de hero bovendien klein en is een zoom van negen
   procent nauwelijks te zien; daar kost hij alleen compositing en batterij. */
.hero__beeld { position: absolute; inset: 0; }
@media (min-width: 1024px) {
  .hero__beeld { animation: kenburns 30s ease-in-out infinite alternate; }
}
/* Zonder foto blijft de hero donker. De kop zweeft er wit overheen, en op de
   lichte plaatshouder van elders zou die niet te lezen zijn. */
.hero .plaatshouder { background: var(--hero-leeg); color: rgba(255, 255, 255, 0.45); }
.hero__waas {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 6, 21, 0.75) 0%, rgba(2, 6, 21, 0) 188px),
    linear-gradient(180deg, rgba(2, 6, 21, 0) 40%, rgba(2, 6, 21, 0.55) 100%);
}
.hero__tekst {
  /* In het midden van het beeld, zoals op de oude live sites: verticaal
     gecentreerd, en horizontaal in dezelfde middenkolom als de rest van de
     content in plaats van tegen de schermrand. Het verticale midden is
     optisch: de zwevende kop eet bovenaan ruimte, dus het punt schuift een
     halve kophoogte omlaag. De tekst zelf blijft links uitgelijnd. */
  position: absolute; left: 0; right: 0;
  max-width: calc(var(--breed) + 2 * var(--marge));
  margin: 0 auto; padding: 0 var(--marge);
  top: calc(50% + var(--kop-hoog) / 2); transform: translateY(-50%);
  pointer-events: none; text-align: center;
}
.hero__kicker {
  margin: 0 0 10px; font-family: var(--font-titel); font-size: 17px;
  font-weight: 500; letter-spacing: 0; text-transform: none;
  color: rgba(255, 255, 255, 0.92);
}
/* Titel met een streep eronder, zoals tg-hero-title. De streep hoort bij de
   letters en niet bij de kolom, dus inline-block. */
.hero__titel {
  margin: 0 0 18px; color: #fff; display: inline-block;
  border-bottom: 4px solid #fff; padding-bottom: 6px;
}
.hero__onder {
  margin: 0 auto; font-size: 18px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.92); max-width: 680px; text-wrap: pretty;
}
/* Op een overzichtspagina staat de tekst hoger, want onderaan komt het
   filterlijf overheen. */
/* Op een overzichtspagina valt het filterlijf over de onderrand; het midden
   ligt dan tussen de kop en die opgetilde rand. */
.hero__tekst--hoog { top: calc(50% + (var(--kop-hoog) - var(--tilhoogte)) / 2); }
.hero__onder--streep { border-left: 3px solid rgba(255, 255, 255, 0.5); padding-left: 16px; }

@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }

/* beeldband van drie */
.band { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; height: 360px; }
.band--laag { height: 320px; }
.band__vak { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--beeld-leeg); }

/* mozaïek boven een plaats */
.mozaiek {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: 210px 210px; gap: 12px;
}
.mozaiek__groot { grid-row: span 2; }
.mozaiek__vak { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--beeld-leeg); }

/* ---------------------------------------------------------------- cijfers */

.cijfers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn);
}
.cijfers__vak { padding: 26px 24px 26px 0; }
.cijfers__waarde { margin: 0 0 6px; font-family: var(--font-titel); font-size: 38px; line-height: 1; }
.cijfers__label {
  margin: 0; font-family: var(--font-titel); font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--inkt-stil);
}

.feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feiten__vak { border-top: 1px solid oklch(0.9 0.01 80); padding-top: 14px; }
.feiten__label {
  margin: 0 0 4px; font-family: var(--font-titel); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--inkt-stil);
}
.feiten__waarde { margin: 0; font-size: 16px; font-weight: 600; }

/* ---------------------------------------------------------------- rooster */

.duo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 72px; }
.duo--gelijk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.duo--tekst { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.duo--zwaar { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.duo__zijkant { border-left: 1px solid var(--lijn); padding-left: 40px; }

.rooster { display: grid; gap: 22px; }
.rooster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rooster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.rooster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- kaarten */

.kaart { display: block; color: inherit; }

/* Bestemmingskaart met de naam over het beeld, zoals op de oude site: de foto
   is de kaart, de naam ligt erin. Scheelt een regel tekst onder elk kaartje en
   het raster wordt er rustiger van. */
.kaart--beeldnaam .kaart__beeld {
  border-radius: 12px; height: 190px;
  box-shadow: 0 16px 32px -26px rgba(20, 14, 10, 0.6);
}
.kaart--beeldnaam .kaart__beeld::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 11, 10, 0) 45%, rgba(12, 11, 10, 0.72));
}
.kaart--beeldnaam .kaart__naam {
  position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 2;
  margin: 0; color: #fff; font-size: 21px; font-weight: 700;
  line-height: 1.2; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.kaart--beeldnaam:hover .kaart__beeld { box-shadow: 0 20px 40px -24px rgba(20, 14, 10, 0.55); }

/* De rest van de regio's als pillen met een rond miniatuur ervoor. */
.pillen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pil {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  background: #fff; border: 1px solid var(--lijn); border-radius: 999px;
  padding: 7px 18px 7px 7px; color: inherit;
}
.pil:hover { color: inherit; border-color: oklch(0.84 0.02 70); }
.pil__beeld {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  overflow: hidden; background: var(--beeld-leeg);
}
.pil__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pil__naam {
  font-size: 14.5px; font-weight: 500; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.pillen__kop {
  margin: 0; align-self: center; font-family: var(--font-titel); font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--inkt-stil);
}

@media (max-width: 1100px) { .pillen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .pillen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kaart--beeldnaam .kaart__beeld { height: 160px; }
}
.kaart:hover { color: inherit; }
.kaart__beeld {
  position: relative; height: 240px; border-radius: var(--radius);
  overflow: hidden; background: var(--beeld-leeg);
  min-width: 0; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.kaart:hover .kaart__beeld { transform: scale(1.03); }
.kaart__beeld--hoog { height: 300px; }
.kaart__beeld--reis { height: 280px; }
.kaart__vlag {
  position: absolute; top: 12px; left: 12px; pointer-events: none;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0;
  text-transform: none; background: rgba(255, 255, 255, 0.94);
  color: oklch(0.3 0.02 60); padding: 6px 9px;
}
.kaart__naam { margin: 14px 0 4px; font-size: 16.5px; font-weight: 600; }
.kaart__naam--titel {
  margin: 16px 0 6px; font-family: var(--font-titel); font-weight: 400;
  font-size: 27px; line-height: 1.14;
}
.kaart__meta { margin: 0 0 6px; font-size: 14.5px; color: oklch(0.48 0.015 60); }
.kaart__blurb { margin: 0 0 8px; font-size: 16px; line-height: 1.6; color: var(--inkt-zachter); text-wrap: pretty; }
.kaart__prijs { margin: 0; font-family: var(--font-mono); font-size: 13px; color: oklch(0.28 0.02 60); }

.streepkaart { border-top: 2px solid var(--lijn-zwaar); padding-top: 16px; }
.streepkaart--ruim { padding-top: 20px; }
.streepkaart__regels { display: grid; gap: 5px; }

/* Lijstje met vinkjes voor voorzieningen. */
.vinkjes { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.vinkjes li { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--inkt-tekst); }
.vinkjes svg { flex-shrink: 0; color: var(--accent); }
.streepkaart__regel {
  display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--lijn-licht); padding-bottom: 5px;
}
.streepkaart__sleutel {
  font-family: var(--font-titel); font-size: 13px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--inkt-stil);
}
.streepkaart__waarde { font-size: 14px; font-weight: 600; text-align: right; }

/* Een streepkaart met eigennamen erin. In het ontwerp draagt de linkerkolom
   een kort label ("Vlucht") en mag die in kapitalen; een naam als "Caló d'en
   Rafelino" wordt daar onleesbaar van. Dus draaien we de rollen om: de naam
   krijgt de lijfletter, het mono-stempel gaat naar de afstand. */
.streepkaart--namen .streepkaart__sleutel {
  font-family: var(--font-tekst); font-size: 14.5px; letter-spacing: 0;
  text-transform: none; color: var(--inkt); line-height: 1.4;
}
.streepkaart--namen .streepkaart__waarde {
  font-family: var(--font-titel); font-size: 13px; font-weight: 500; letter-spacing: 0;
  text-transform: none; font-weight: 400; color: var(--inkt-stil);
  white-space: nowrap; align-self: center;
}
.streepkaart--namen .streepkaart__regel { align-items: baseline; }

/* --------------------------------------------------------------- tabellen */

.tabel { border-top: 1px solid var(--lijn-zwaar); }
.tabel__kop, .tabel__rij { display: grid; gap: 20px; padding: 12px 2px; }
.tabel__kop { border-bottom: 1px solid oklch(0.9 0.01 80); }
.tabel__rij { padding: 20px 2px; border-bottom: 1px solid oklch(0.94 0.01 80); align-items: baseline; }
.tabel__rij--dicht { padding: 14px 2px; align-items: center; border-bottom-color: var(--lijn-licht); }
.tabel__titel {
  font-family: var(--font-titel); font-size: 12.5px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: oklch(0.5 0.02 60);
}
.tabel__sterk { font-size: 16.5px; font-weight: 700; }
.tabel__accent { font-size: 16.5px; color: var(--accent); font-weight: 600; }
.tabel__tekst { font-size: 16px; line-height: 1.6; color: oklch(0.38 0.015 60); text-wrap: pretty; }
.tabel__klein { font-size: 15px; color: oklch(0.4 0.015 60); }
.tabel__getal { font-family: var(--font-mono); font-size: 14px; color: oklch(0.3 0.02 60); }
.tabel__getal--rechts { text-align: right; }

.tabel--basis .tabel__kop, .tabel--basis .tabel__rij {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 0.7fr); gap: 24px;
}
.tabel--kalender .tabel__kop, .tabel--kalender .tabel__rij {
  grid-template-columns: 72px repeat(4, minmax(0, 0.55fr)) minmax(0, 1.9fr); gap: 16px;
}
.tabel--wijk .tabel__kop, .tabel--wijk .tabel__rij {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.7fr) minmax(0, 0.7fr) minmax(0, 0.6fr) minmax(0, 0.55fr);
}
.tabel--strand .tabel__kop, .tabel--strand .tabel__rij {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.65fr) minmax(0, 0.6fr) minmax(0, 0.75fr) minmax(0, 1.5fr);
  gap: 18px;
}
.tabel--jaar .tabel__kop, .tabel--jaar .tabel__rij {
  grid-template-columns: 130px minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 0.6fr) minmax(0, 2.2fr); gap: 18px;
}
.tabel--kamer .tabel__kop, .tabel--kamer .tabel__rij {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr) 110px; gap: 20px;
}
.tabel--jaar .tabel__rij { padding: 16px 2px; }
.tabel--strand .tabel__rij { padding: 17px 2px; }

.lijstpaar { border-top: 1px solid oklch(0.9 0.01 80); }
.lijstpaar__rij {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 18px;
  align-items: baseline; padding: 12px 2px; border-bottom: 1px solid var(--lijn-licht);
}
.lijstpaar__wat { margin: 0 0 2px; font-size: 16px; color: oklch(0.28 0.015 60); }
.lijstpaar__noot { margin: 0; font-size: 13.5px; color: var(--inkt-stil); }
.lijstpaar__waarde { text-align: right; font-family: var(--font-mono); font-size: 14.5px; }

.blokrij { padding: 15px 2px; border-bottom: 1px solid var(--lijn-licht); }
.blokrij__kop { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.blokrij__naam { font-size: 16.5px; font-weight: 600; }
.blokrij__zij { font-family: var(--font-mono); font-size: 13.5px; color: oklch(0.45 0.02 60); white-space: nowrap; }
.blokrij__tekst { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--inkt-zachter); text-wrap: pretty; }

.punten { display: grid; gap: 20px; }
.punt { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; align-items: baseline; }
.punt__nr { font-family: var(--font-titel); font-size: 24px; color: var(--accent); }
.punt__titel { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.punt__tekst { margin: 0; font-size: 17px; line-height: 1.66; color: oklch(0.4 0.015 60); text-wrap: pretty; }

.maanden { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.maanden__vak { text-align: center; border-radius: 3px; padding: 12px 4px; }
.maanden__naam {
  margin: 0 0 6px; font-family: var(--font-titel); font-size: 12.5px; font-weight: 500;
  text-transform: none; color: oklch(0.4 0.02 60);
}
.maanden__graad { margin: 0; font-size: 14px; font-weight: 600; color: oklch(0.28 0.02 60); }

/* Vier standen voor klimaat en drukte: aangenaam, gemiddeld, warm, mijden. */
.maanden__vak--0 { background: oklch(0.93 0.05 145); }
.maanden__vak--1 { background: oklch(0.96 0.015 85); }
.maanden__vak--2 { background: oklch(0.93 0.06 75); }
.maanden__vak--3 { background: oklch(0.9 0.08 40); }
.sein--0 { color: var(--sein-rustig); }
.sein--1 { color: var(--sein-midden); }
.sein--2 { color: var(--sein-druk); }
.sein--3 { color: var(--sein-vol); }
.tabel__rij--vol { background: oklch(0.985 0.012 40); }

/* Het beeld onder het vervoerblok. Die kolom is korter dan de inleiding
   ernaast, dus bleef er wit over; een foto van de plaats vult dat en zegt
   bovendien iets. Vaste hoogte, want de kolom moet niet meegroeien met wat de
   fotobron toevallig aan verhouding levert. */
.kolombeeld {
  /* `position: relative` is hier geen opmaak maar een voorwaarde: `.beeld` is
     absoluut gepositioneerd, en zonder een gepositioneerde ouder zoekt het
     beeld er een verderop en vult het de hele sectie. */
  position: relative; margin: 20px 0 0; border-radius: var(--radius);
  overflow: hidden; height: 260px; background: var(--beeld-leeg);
}

/* --------------------------------------------------------- reiswijzer

Het smalle vervoerblok naast de inleiding. Dit gebruikte `.kenmerkrij`, een
klasse voor een rij chips, en had dus geen eigen regelopmaak: op de pagina
stond een lijst met bolletjes en blauwe links. Vandaar een eigen blok.

Twee kolommen per regel: links de naam met het feit eronder, rechts het getal
of de code. De code staat rechts omdat dat is waar iemand op zoekt in een
boekingsformulier. */

.reiswijzer { padding: 24px 26px; background: #fff; }
.reiswijzer__kop {
  margin: 0 0 4px; font-family: var(--font-titel); font-size: 13px;
  font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--inkt-stil);
}
.reiswijzer__label {
  margin: 18px 0 2px; font-family: var(--font-titel); font-size: 15px;
  font-weight: 500; color: var(--inkt);
}
.reiswijzer__kop + .reiswijzer__label { margin-top: 14px; }
.reiswijzer__lijst { list-style: none; margin: 0; padding: 0; }
.reiswijzer__rij {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--lijn);
}
.reiswijzer__rij:last-child { border-bottom: 0; padding-bottom: 2px; }
.reiswijzer__naam {
  min-width: 0; font-size: 15px; line-height: 1.35; color: var(--inkt);
}
.reiswijzer__bij {
  display: block; margin-top: 3px; font-size: 13px; line-height: 1.45;
  color: var(--inkt-stil);
}
.reiswijzer__waarde {
  font-family: var(--font-titel); font-size: 15px; font-weight: 500;
  white-space: nowrap; color: var(--inkt);
}
/* De luchthavencode als badge. Vaste breedte zou hem afknijpen bij een
   viertekencode, dus alleen een ondergrens. */
.reiswijzer__badge {
  min-width: 44px; text-align: center; padding: 5px 9px;
  border-radius: 6px; background: var(--vlak-kaart);
  font-family: var(--font-titel); font-size: 13px; font-weight: 600;
  letter-spacing: 0.03em; color: var(--inkt);
}

.merkvlak {
  margin-top: 24px; background: var(--vlak-kaart); border-radius: var(--radius); padding: 24px;
}

/* -------------------------------------------------------------- formulier */

.paneel { border: 1px solid oklch(0.9 0.01 80); border-radius: var(--radius); padding: 28px; }
.paneel--breed { padding: 34px 36px; }
.paneel--diep { background: var(--vlak-diep); border-color: var(--vlak-diep); color: #fff; }
.paneel--diep .paneel__titel { color: #fff; }
.paneel__kop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; margin-bottom: 24px;
}
.paneel__titel { margin: 0; font-family: var(--font-titel); font-weight: 400; font-size: 30px; }

.veld { display: grid; gap: 6px; }
.veld__label {
  font-family: var(--font-titel); font-size: 12.5px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--inkt-stil);
}
.veld input, .veld select, .veld textarea {
  border: 1px solid oklch(0.88 0.01 80); border-radius: 3px; padding: 13px 14px;
  font: inherit; font-size: 15px; outline: none; background: #fff; color: var(--inkt);
  width: 100%;
}
.veld textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--accent); }
.veldenrij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.veldenkolom { display: grid; gap: 10px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  cursor: pointer; border: 1px solid oklch(0.88 0.01 80); background: none;
  border-radius: 999px; padding: 9px 17px; font: inherit; font-size: 14px;
  color: oklch(0.32 0.015 60); white-space: nowrap;
}
.filter:hover { border-color: var(--inkt); color: var(--inkt); }
.filter[aria-current="true"] {
  background: oklch(0.2 0.01 60); border-color: oklch(0.2 0.01 60); color: #fff;
}

.blaren { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.blaren a, .blaren span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 10px 14px; border: 1px solid oklch(0.9 0.01 80);
  border-radius: 3px; font-size: 14.5px; color: oklch(0.3 0.015 60);
}
.blaren a:hover { border-color: var(--inkt); color: var(--inkt); }
.blaren [aria-current="page"] {
  background: oklch(0.2 0.01 60); border-color: oklch(0.2 0.01 60); color: #fff;
}

/* ----------------------------------------------------------------- naslag */

.naslag { border-top: 1px solid oklch(0.88 0.012 80); }
.naslag > summary {
  cursor: pointer; padding: 24px 0; display: flex; align-items: baseline;
  justify-content: space-between; gap: 24px; list-style: none;
}
.naslag > summary::-webkit-details-marker { display: none; }
.naslag__titel { font-family: var(--font-titel); font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; }
.naslag__schakel {
  font-family: var(--font-titel); font-size: 13px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: oklch(0.52 0.02 60); white-space: nowrap;
}
.naslag__body { padding: 4px 0 40px; }
.naslag .minder { display: none; }
.naslag[open] .minder { display: inline; }
.naslag[open] .meer { display: none; }

.vragen { border-top: 1px solid oklch(0.88 0.012 80); }
.vraag { border-bottom: 1px solid oklch(0.92 0.01 80); }
.vraag > summary {
  cursor: pointer; padding: 20px 0; display: flex; align-items: baseline;
  justify-content: space-between; gap: 24px; list-style: none;
  font-size: 17.5px; font-weight: 600;
}
.vraag > summary::-webkit-details-marker { display: none; }
.vraag__teken { font-family: var(--font-mono); font-size: 17px; color: var(--accent); }
.vraag[open] .vraag__plus { display: none; }
.vraag:not([open]) .vraag__min { display: none; }
.vraag__antwoord {
  margin: 0; padding: 0 0 22px; max-width: 780px;
  font-size: 16.5px; line-height: 1.65; color: var(--inkt-zacht); text-wrap: pretty;
}

/* -------------------------------------------------- detailpagina van een object */

.galerij {
  display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 220px 220px; gap: 10px;
}
.galerij__groot { grid-row: span 2; }
.galerij__vak { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--beeld-leeg); }

.duo--detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 72px; align-items: start; }

.zijpaneel { position: sticky; top: calc(var(--kop-hoog) + 24px); display: grid; gap: 16px; }

.specs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
  border-top: 1px solid oklch(0.9 0.01 80); border-bottom: 1px solid oklch(0.9 0.01 80);
  padding: 22px 0; margin-bottom: 30px;
}
.specs__label {
  margin: 0 0 4px; font-family: var(--font-titel); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--inkt-stil);
}
.specs__waarde { margin: 0; font-size: 17px; font-weight: 600; }

.prijs-groot { margin: 0 0 6px; font-family: var(--font-titel); font-size: 52px; line-height: 1; }
.prijs-eenheid { font-family: var(--font-tekst); font-size: 17px; font-weight: 500; color: var(--inkt-stil); }
.prijs-noot { margin: 0 0 22px; font-size: 14.5px; color: var(--inkt-stil); }

.knop--donker { background: oklch(0.2 0.01 60); }
.knop--donker:hover { background: var(--inkt); }
.knop--stil {
  background: none; border: 1px solid oklch(0.85 0.01 80); color: oklch(0.25 0.01 60);
}
.knop--stil:hover { background: none; border-color: var(--inkt); color: var(--inkt); }

.paar {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--lijn-licht);
}
.paar__label { font-size: 15px; color: oklch(0.35 0.015 60); }
.paar__waarde { font-family: var(--font-mono); font-size: 14px; }

.persoon { display: flex; gap: 16px; align-items: center; }
.persoon__portret {
  width: 68px; height: 68px; border-radius: 999px; overflow: hidden;
  flex-shrink: 0; background: var(--beeld-leeg); position: relative;
}

/* ---------------------------------------------------------------- artikel */

.artikelbalk {
  display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  align-items: center; border-bottom: 1px solid var(--lijn); padding-bottom: 22px;
}
.artikelbalk__auteur { display: flex; align-items: center; gap: 14px; }
.artikelbalk__portret {
  width: 48px; height: 48px; border-radius: 999px; overflow: hidden;
  background: var(--beeld-leeg); flex-shrink: 0; position: relative;
}
.artikelbalk__naam { margin: 0 0 2px; font-size: 15.5px; font-weight: 600; }
.artikelbalk__meta { margin: 0; font-family: var(--font-titel); font-size: 13.5px; font-weight: 500; color: var(--inkt-stil); }

.artikelraster {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.9fr) minmax(0, 1fr);
  gap: 36px; align-items: start;
}
/* De tekstsecties van een bestemming: opgave links, tekst rechts. Dezelfde
   verhouding als een artikel, maar zonder de derde kolom. */
.tekstraster {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.6fr);
  gap: 48px; align-items: start;
}
.tekstkolom { max-width: 780px; }
.tekstsectie + .tekstsectie {
  margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--lijn);
}
.tekstsectie .titel-s { margin: 0 0 16px; scroll-margin-top: calc(var(--kop-hoog) + 20px); }

.opgave { position: sticky; top: calc(var(--kop-hoog) + 24px); }
.opgave__titel {
  margin: 0 0 14px; font-family: var(--font-titel); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--inkt-stil);
}
.opgave__lijst { display: grid; gap: 11px; }
.opgave__lijst a {
  font-size: 15px; line-height: 1.4; color: oklch(0.48 0.015 60);
  border-left: 2px solid oklch(0.9 0.01 80); padding-left: 12px;
}
.opgave__lijst a:hover { color: var(--inkt); border-left-color: var(--accent); }

.artikel__lood {
  margin: 0 0 26px; font-family: var(--font-titel); font-size: 27px;
  line-height: 1.45; color: oklch(0.25 0.015 60); text-wrap: pretty;
}
.artikel__body { font-size: 19px; line-height: 1.75; color: oklch(0.34 0.015 60); }
.artikel__body h2 { font-size: 38px; margin: 40px 0 14px; }
.artikel__body h3 { font-size: 27px; }
.artikel__body p { margin: 0 0 30px; }
.artikel__body figure { margin: 40px 0; }
.artikel__body figcaption {
  margin: 12px 0 0; font-family: var(--font-titel); font-size: 13.5px; font-weight: 500; color: var(--inkt-stil);
}

.artikel__zij { position: sticky; top: calc(var(--kop-hoog) + 24px); display: grid; gap: 16px; }
.verderlezen { border-bottom: 1px solid oklch(0.94 0.01 80); padding-bottom: 12px; display: block; }
.verderlezen__kicker {
  margin: 0 0 4px; font-family: var(--font-titel); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--accent);
}
.verderlezen__titel { margin: 0; font-size: 15.5px; line-height: 1.4; font-weight: 600; color: var(--inkt); }

/* ----------------------------------------------------- aanbod als brede rij */

.aanbodlijst { display: grid; gap: 18px; }
/* De resultaatrij als kaart. Dezelfde driedeling als eerst (beeld, tekst,
   prijs en knoppen), maar met de afwerking van de oude live site: het beeld
   ligt ín de kaart in plaats van tegen de rand, er valt een zachte schaduw
   onder, en de prijs staat als vlag op het beeld. */
.aanbodrij {
  display: grid; grid-template-columns: 300px minmax(0, 1fr) 220px; gap: 24px;
  background: #fff; border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 16px;
  box-shadow: 0 10px 30px -24px rgba(2, 6, 21, 0.35);
  color: inherit; transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.aanbodrij:hover {
  color: inherit; border-color: oklch(0.84 0.02 70);
  box-shadow: 0 20px 44px -28px rgba(20, 14, 10, 0.5);
}
.aanbodrij__beeld {
  position: relative; height: 252px; border-radius: 8px; overflow: hidden;
  background: var(--beeld-leeg);
}
.aanbodrij__body { padding: 10px 0; }

/* De regel met datum, duur en sterren: kleine feiten met een terracotta
   pictogram ervoor, zoals op het origineel. */
.kenmerkrij {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  margin: 0 0 16px; font-size: 14.5px; color: var(--inkt-zacht);
}
.kenmerkrij__item { display: inline-flex; align-items: center; gap: 7px; }

/* Dezelfde lijst, maar als regels onder elkaar in plaats van chips ernaast.

   Vier sjablonen gebruiken `kenmerkrij__rij` (cruisehavens, cruisekaarten, de
   cruisepagina) en die drie klassen hadden gewoon geen CSS: op de regiopagina
   stond dus een lijst met bolletjes en blauwe links, en op de cruisepagina
   ook. Geen ontwerp maar een browserstandaard.

   Met `:has` blijft de chipvariant intact: alleen een lijst die werkelijk
   regels bevat wordt een stapel. Zo hoefden de sjablonen niet allemaal een
   andere klasse te krijgen. */
.kenmerkrij:has(.kenmerkrij__rij) {
  display: grid; gap: 0; list-style: none; padding: 0;
}
.kenmerkrij__rij {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--lijn);
}
.kenmerkrij__rij:last-child { border-bottom: 0; padding-bottom: 2px; }
.kenmerkrij__naam {
  min-width: 0; font-size: 15px; line-height: 1.35; color: var(--inkt);
}
.kenmerkrij__waarde {
  font-family: var(--font-titel); font-size: 14.5px; font-weight: 500;
  text-align: right; color: var(--inkt);
}
.kenmerkrij svg { flex-shrink: 0; color: var(--prijs); }
.aanbodrij__plaats {
  margin: 0 0 8px; font-family: var(--font-titel); font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--inkt-stil);
}
.aanbodrij__naam {
  margin: 0 0 10px; font-family: var(--font-titel); font-weight: 400;
  font-size: 32px; line-height: 1.1;
}
.aanbodrij__tekst {
  margin: 0 0 16px; font-size: 17px; line-height: 1.64;
  color: var(--inkt-zacht); max-width: 520px; text-wrap: pretty;
}
.aanbodrij__merken { display: flex; gap: 8px; flex-wrap: wrap; }
.merkje {
  font-size: 13px; color: oklch(0.4 0.015 60); background: var(--vlak-kaart);
  border-radius: 3px; padding: 6px 11px;
}
.aanbodrij__zij {
  padding: 10px 10px 10px 0; display: flex; flex-direction: column;
  align-items: flex-end; justify-content: space-between; text-align: right;
}
.aanbodrij__knoppen { display: grid; gap: 10px; width: 100%; }

/* Compacte variant voor de aanbodblokken op een bestemmingspagina: twee naast
   elkaar, beeld links, en alleen het hoognodige eronder. Zelfde afwerking als
   de rij op het overzicht, kleiner formaat. */
.aanbodraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.aanbodrij--klein { grid-template-columns: 190px minmax(0, 1fr); gap: 18px; padding: 14px; }
.aanbodrij--klein .aanbodrij__beeld { height: 190px; }
.aanbodrij--klein .aanbodrij__body { padding: 4px 4px 4px 0; }
.aanbodrij--klein .aanbodrij__naam { font-size: 21px; font-weight: 600; font-family: var(--font-tekst); line-height: 1.25; }
.aanbodrij--klein .aanbodrij__tekst { font-size: 15px; line-height: 1.55; margin-bottom: 12px; }
.aanbodrij--klein .kenmerkrij { font-size: 13.5px; gap: 6px 16px; margin-bottom: 14px; }
.aanbodrij--klein .aanbodrij__vlag { font-size: 11.5px; padding: 6px 12px; }

/* Naast een filterkolom blijft er te weinig over voor drie kolommen: de titel
   brak dan na elke twee woorden. Onder deze breedte gaan prijs en knoppen
   onder de tekst staan. */
@media (max-width: 1340px) {
  .filterlijf .aanbodrij { grid-template-columns: 260px minmax(0, 1fr); }
  .filterlijf .aanbodrij__zij {
    grid-column: 1 / -1; flex-direction: row; align-items: center;
    text-align: left; padding: 0 4px 4px; gap: 18px; flex-wrap: wrap;
  }
  .filterlijf .aanbodrij__zij > div { display: flex; align-items: center; gap: 16px; }
  .filterlijf .aanbodrij__knoppen { display: flex; gap: 10px; width: auto; }
  .filterlijf .aanbodrij__knoppen .knop { width: auto; }
  .filterlijf .aanbodrij__prijs { margin: 0; }
  .filterlijf .aanbodrij__noot { margin: 0; }
}

@media (max-width: 1100px) { .aanbodraster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .aanbodrij--klein { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .aanbodrij--klein .aanbodrij__beeld { height: 200px; }
}
/* De hele kaart is klikbaar via de titel, maar de knoppen erin blijven hun
   eigen bestemming houden. Een link in een link mag niet, dus dit. */
.aanbodrij { position: relative; }
.strekt::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.aanbodrij__knoppen, .aanbodrij__vlag { position: relative; z-index: 2; }

/* De titel is een link, maar hij hoort niet de linkkleur te dragen: dan staat
   elke kaart in het raster in terracotta en springt er niets meer uit. Donker
   dus, en alleen de knop houdt de accentkleur. */
.aanbodrij__naam a { color: var(--inkt); }
.aanbodrij:hover .aanbodrij__naam a { color: var(--accent); }

/* Het lijf vult de kaart, zodat de knop bij elke kaart op dezelfde hoogte
   onderaan staat. Zonder dit danst hij mee met de lengte van de titel. */
.aanbodrij--klein .aanbodrij__body { display: flex; flex-direction: column; }
.aanbodrij--klein .aanbodrij__knoppen { margin-top: auto; }
.aanbodrij--klein .aanbodrij__knoppen .knop {
  width: auto; justify-self: start; padding: 11px 22px; font-size: 14.5px;
}

/* Prijs en oordeel als tekst naast de knop; de vlag op de foto is te klein om
   het enige prijssignaal te zijn. */
.aanbodrij__slot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 12px;
}
.aanbodrij__vanaf { margin: 0; font-size: 14px; color: var(--inkt-stil); }
.aanbodrij__vanaf b {
  font-family: var(--font-titel); font-weight: 400; font-size: 24px;
  color: var(--inkt); margin-right: 3px;
}
.aanbodrij__knoppen .knop { width: 100%; text-align: center; justify-content: center; }
.aanbodrij__prijs { margin: 0 0 2px; font-family: var(--font-titel); font-size: 40px; line-height: 1; }
.aanbodrij__noot { margin: 0 0 14px; font-size: 13px; color: var(--inkt-stil); }

.uitlegrij {
  border-top: 1px solid var(--lijn); padding-top: 40px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px;
}

/* ----------------------------------------------------------- oproep en kaart */

.oproep {
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; flex-wrap: wrap;
}
.oproep__knoppen { display: flex; gap: 12px; flex-wrap: wrap; }

/* De landkaart laadt pas na een klik: een iframe van Google zet zijn cookies
   anders al voordat de bezoeker iets gekozen heeft.

   Bewust niet `.kaart`: dat is in dit ontwerp een kaartje in een raster
   (`.kaart__beeld`, `.kaart__blurb`). Die naam hier hergebruiken gaf elke
   kaart op de site display:flex en daarmee een beeld van nul pixels breed. */
.landkaart {
  position: relative; border: 1px solid var(--lijn);
  border-radius: var(--radius); overflow: hidden;
  background: var(--vlak-kaart); min-height: 380px;
  display: flex; align-items: center; justify-content: center;
}
.landkaart__vraag { max-width: 460px; padding: 32px; text-align: center; }
.landkaart__tekst { margin: 0 0 18px; font-size: 15.5px; color: var(--inkt-zacht); }
.landkaart__knoppen { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.landkaart iframe { display: block; width: 100%; height: 460px; border: 0; }

@media (max-width: 860px) {
  .oproep { flex-direction: column; align-items: flex-start; gap: 20px; }
  .landkaart { min-height: 300px; }
  .landkaart iframe { height: 320px; }
}

/* ----------------------------------------------------------------- zoeken */

.zoek { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 3.5fr); gap: 36px; align-items: start; }
.zoek__facetten { position: sticky; top: calc(var(--kop-hoog) + 24px); }
.zoek__facet {
  display: flex; justify-content: space-between; gap: 12px; font-size: 15px;
  color: oklch(0.3 0.015 60); border-bottom: 1px solid var(--lijn-licht); padding-bottom: 8px;
}
.zoek__facet .mono { font-size: 12px; color: oklch(0.6 0.02 60); }
.zoek__facet--aan { color: var(--accent); font-weight: 700; }
.zoek__balk {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  border-bottom: 1px solid var(--lijn); padding-bottom: 14px; margin-bottom: 8px;
}
.zoek__rij {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.6fr) minmax(0, 1fr);
  gap: 22px; padding: 22px 0; border-bottom: 1px solid oklch(0.94 0.01 80); align-items: center;
}

/* --------------------------------------------------------------- seoblok */

/* De ruimte boven de streep is een marge en geen padding, en dat is hier het
   hele punt. Dit ontwerp zet zijn lucht boven elke sectie (`.sectie` heeft
   130px boven en 0 onder), maar de seoblok had alleen padding-top. Die zit
   binnen de rand, dus de streep plakte tegen de laatste alinea van de pagina:
   tekst, meteen een lijn, en dan pas ruimte. Een marge duwt de streep zelf
   omlaag en volgt daarmee hetzelfde ritme als de rest. */
.seoblok {
  border-top: 1px solid var(--lijn); margin-top: 110px;
  padding: 74px var(--marge) 82px;
  background: oklch(0.985 0.006 85);
}
/* Eindigt de pagina met een gekleurde band (de boekoproep), dan scheidt die de
   twee al en zou een marge er een streep wit tussen zetten.

   Het moet via `main` en niet met `+` op de band zelf: de seoblok staat buiten
   `main`, dus zijn voorganger is altijd `<main>` en nooit een sectie. Zo'n
   regel matcht dan nooit en ziet er in het bestand uit alsof hij werkt. */
main:has(> .sectie--vlak:last-child) + .seoblok,
main:has(> .sectie--vlak-warm:last-child) + .seoblok,
main:has(> .sectie--beeld:last-child) + .seoblok { margin-top: 0; }
.seoblok__duo {
  max-width: var(--breed); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 64px; align-items: start;
}
.seoblok__titel {
  margin: 0 0 20px; font-family: var(--font-titel); font-weight: 400;
  font-size: 40px; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance;
}
.seoblok__alinea { margin-bottom: 22px; }
.seoblok__kop { margin: 26px 0 10px; font-size: 19px; font-weight: 700; }
.seoblok__tekst { margin: 0; font-size: 17.5px; line-height: 1.75; color: var(--inkt-tekst); text-wrap: pretty; }
.seoblok__links {
  max-width: var(--breed); margin: 60px auto 0; border-top: 1px solid var(--lijn);
  padding: 34px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px;
}
/* Staan de linkkolommen er als enige, dan scheidt die streep niets en is de
   marge erboven pure leegte. Op de meeste pagina's is dat het geval: alleen de
   pagina's met een uitgeschreven naslagtekst hebben er iets boven staan. */
.seoblok__links:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.seoblok:has(.seoblok__links:first-child) { padding-top: 64px; }
.seoblok__kolomtitel {
  margin: 0 0 14px; font-family: var(--font-titel); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--accent);
}
.seoblok__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.seoblok__lijst a { font-size: 15px; line-height: 1.4; color: oklch(0.3 0.015 60); }
.seoblok__lijst a:hover { color: var(--accent); }

/* ------------------------------------------------------------------- voet */

.voet { background: var(--vlak-diep); color: rgba(255, 255, 255, 0.86); padding: 70px var(--marge) 90px; }
.voet__binnen {
  max-width: var(--breed); margin: 0 auto; display: flex;
  justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: flex-end;
}
.voet__merk { display: inline-flex; align-items: center; }
.voet__logo { height: 34px; width: auto; display: block; }
.voet__woord { font-family: var(--font-titel); font-size: 30px; color: #fff; }
.voet__tld { font-family: var(--font-titel); font-size: 13.5px; font-weight: 500; color: oklch(0.72 0.14 45); }
.voet__links { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.voet__links a { font-family: var(--font-titel); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.62); }
.voet__links a:hover { color: #fff; }
/* 0.55 en niet 0.4. Op de voetkleur (#020615) gaf 0.4 een contrast van
   3,74:1 en dat haalt de 4,5:1 niet die 13px-tekst nodig heeft; Lighthouse
   viel er terecht over. 0.55 komt op 6,26:1 en blijft visueel ondergeschikt
   aan de links ernaast. */
.voet__copyright { font-family: var(--font-titel); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }

/* --------------------------------------------------------------- animatie */

.opkomst { animation: rijs 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
[data-onthul].gespannen { opacity: 0; }
[data-onthul].gespannen.in { animation: rijs 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes rijs {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .opkomst, [data-onthul].gespannen.in, .hero__beeld { animation: none !important; }
  [data-onthul].gespannen { opacity: 1; }
  .kaart:hover .kaart__beeld { transform: none; }
}


/* ---------------------------------------------------------------- zoekpaneel
   Het paneel dat over de onderkant van de hero valt: producttabs, een
   voorgevuld bestemmingsveld en de echte vanafprijzen.

   Over de hero heen en niet eronder, want dat is de keuze die gemaakt is: de
   actie hoort bij het eerste beeld. De hero wordt daarom hoger gezet waar dit
   paneel staat, zodat de tekst erboven blijft passen en de inhoud eronder niet
   verder wegzakt dan nodig. */
/* Korter dan de gewone hero, want onder het beeld komt een paneel dat zelf al
   ruimte vraagt. Samen halen ze ongeveer dezelfde hoogte als een hero zonder
   paneel, zodat de inhoud eronder niet verder wegzakt. */
.hero--zoek { height: 46vh; min-height: 420px; }
/* De tekst links in dezelfde kolom als de rest van de pagina, en boven het
   paneel in plaats van in het midden van het beeld: het paneel eet de
   onderhelft op, dus daar is geen midden meer.

   De onderrand ligt vast op de overlap van het paneel plus een kier. Op veertig
   pixels viel de kop erachter en was hij alleen nog als vage veeg te zien. */
.hero--zoek .hero__tekst {
  top: auto; bottom: calc(var(--zoekoverlap) + 26px);
  transform: none; text-align: left;
}
.hero--zoek .hero__titel { margin-bottom: 12px; }
.hero--zoek .hero__onder { margin-left: 0; }
/* Het paneel staat ná de hero in de opbouw en wordt eroverheen getild. Erin
   zetten kon niet: de hero knipt zijn overloop af voor het ken-burns-effect,
   en dan verdwenen de prijsregel en de chips onder de rand. */
.herozoek {
  position: relative; z-index: 3;
  max-width: calc(var(--breed) + 2 * var(--marge));
  /* Ruim over het beeld heen: het paneel hoort bij de hero en niet eronder. */
  margin: calc(-1 * var(--zoekoverlap)) auto 0; padding: 0 var(--marge);
}
.herozoek__paneel {
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(2, 6, 21, 0.18);
  padding: 22px 26px 24px;
}
.herozoek__tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--lijn); margin-bottom: 18px;
}
.herozoek__tab {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-family: var(--font-titel); font-size: 15.5px; font-weight: 500;
  color: var(--inkt-stil); padding: 12px 16px 14px;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.herozoek__tab:hover { color: var(--inkt); }
.herozoek__tab.is-aan { color: var(--accent); border-bottom-color: var(--accent); }
.herozoek__aantal {
  display: inline-block; margin-left: 7px; font-size: 12.5px;
  font-family: var(--font-tekst); color: var(--inkt-stil);
}
.herozoek__tab.is-aan .herozoek__aantal { color: var(--accent); }

.herozoek__vorm.is-uit { display: none; }
/* Alle velden op één rij, de knop erachter. Flexbox en geen grid met
   `auto-fit`: dat laatste viel samen met het losse `auto`-spoor terug op één
   kolom, waardoor de velden onder elkaar kwamen te staan. Zo bewegen ze mee
   met hun aantal - reizen heeft er vijf, vastgoed geen - en breken ze netjes
   af op een smal scherm. */
.herozoek__velden { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.herozoek__veld { flex: 1 1 148px; min-width: 0; }
.herozoek__knop { flex: 0 0 auto; }
.herozoek__velden--los .herozoek__extern { flex: 1 1 320px; }
.herozoek__extern { margin: 0; font-size: 15px; color: var(--inkt-tekst); }
.herozoek__veld { display: grid; gap: 5px; }
.herozoek__label {
  font-family: var(--font-titel); font-size: 12.5px; font-weight: 500;
  color: var(--inkt-stil);
}
.herozoek__veld input, .herozoek__veld select {
  border: 1px solid var(--lijn); border-radius: var(--radius-knop);
  padding: 14px 14px; font: inherit; font-size: 15.5px; width: 100%;
  background: #fff; color: var(--inkt);
}
.herozoek__veld input:focus, .herozoek__veld select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.herozoek__knop { padding: 15px 28px; white-space: nowrap; }

.herozoek__prijzen {
  margin: 16px 0 0; font-size: 13.5px; color: var(--inkt-stil);
}
.herozoek__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.herozoek__chip {
  font-size: 13.5px; color: var(--inkt-tekst); text-decoration: none;
  border: 1px solid var(--lijn); border-radius: 999px; padding: 7px 14px;
}
.herozoek__chip:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------- mobiel menu
   Schermvullend, met alle groepen tegelijk. De hamburger opende eerder alleen
   het mega-menu van de eerste groep; de rest van de site was vanaf een telefoon
   niet te bereiken.

   Buiten het mobiele bereik staat dit paneel altijd uit: daar doet het
   mega-menu het werk. */
.mobielmenu { display: none; }

/* ----------------------------------------------------------------- mobiel */

@media (max-width: 1100px) {
  :root { --marge: 28px; }
  .titel-xl { font-size: 64px; }
  .titel-l { font-size: 52px; }
  .titel-m { font-size: 36px; }
  .duo, .duo--tekst, .duo--zwaar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .duo--gelijk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .duo__zijkant { border-left: 0; padding-left: 0; border-top: 1px solid var(--lijn); padding-top: 28px; }
  .rooster--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega__binnen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mega__uitgelicht { display: none; }
}

@media (max-width: 860px) {
  :root { --marge: 20px; --kop-hoog: 72px; }

  body { font-size: 16px; }

  .sitekop__nav, .sitekop__markt { display: none; }
  .sitekop__logo { height: 42px; }
  .sitekop__hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border: 1px solid oklch(0.88 0.01 80);
    border-radius: 999px; background: none; cursor: pointer; color: var(--inkt);
  }
  .sitekop__merk { font-size: 24px; }

  .mega { max-height: calc(100vh - var(--kop-hoog)); overflow-y: auto; }
  .mega__binnen { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 28px var(--marge) 32px; }
  .mega__item-titel { font-size: 23px; }
  .mega__voet-binnen { flex-direction: column; gap: 10px; }

  .sectie { padding: 64px var(--marge) 0; }
  .sectie--kop { padding-top: 28px; }
  .sectie--slot { padding-bottom: 88px; }
  .sectie--vlak, .sectie--vlak-warm { margin-top: 60px; padding: 52px var(--marge) 64px; }

  .titel-xl { font-size: 42px; letter-spacing: -0.02em; }
  .titel-l { font-size: 38px; letter-spacing: -0.02em; }
  .titel-m { font-size: 28px; }
  .titel-s { font-size: 23px; }
  .titel-kaart, .kaart__naam--titel { font-size: 22px; }
  .naslag__titel { font-size: 22px; }
  .lood, .intro { font-size: 17.5px; }
  .tekst { font-size: 16.5px; }
  .tekst h2 { font-size: 26px; }
  .tekst h3 { font-size: 21px; }

  /* De credit hoort bij het beeld, en dat staat op mobiel bovenaan. Absoluut
     over de hero gelegd viel hij wit-op-wit over de tekst eronder. Hij hangt
     aan dezelfde maat als het beeld, anders schuift hij weg zodra die maat
     verandert - en dat is precies wat er gebeurde. */
  .hero .beeldbron--over {
    position: absolute; right: 12px; bottom: auto;
    top: calc(var(--herobeeld) - 26px); left: auto; max-width: 82%;
  }
  .hero--zoek .beeldbron--over { top: calc(var(--herobeeld-zoek) - 26px); }
  .hero, .hero--laag, .hero--midden, .hero--hoog, .hero--zoek {
    height: auto; min-height: 0; overflow: visible;
    /* Op mobiel staat het beeld bóven de tekst in plaats van eronder, en de
       tekst krijgt hieronder donkere letters. De donkere ondergrond van de
       hero hoort daar dan niet meer bij: die maakte de titel onzichtbaar,
       donker op donker, op elke hero-pagina. */
    background: #fff;
  }
  /* Geen kenburns op mobiel: de animatie schaalt het element zelf en de hero
     knipt hier niet meer af (overflow: visible voor de gestapelde opbouw),
     dus het beeld groeide langzaam de pagina uit en de pagina ging
     horizontaal scrollen. Pas na een halve minuut zichtbaar, vandaar dat het
     lang onopgemerkt bleef. */
  .hero__beeld {
    position: relative; height: var(--herobeeld); min-height: 260px;
    overflow: hidden; animation: none;
  }
  .hero__waas { display: none; }
  .hero__tekst {
    position: static; padding: 24px var(--marge) 0; left: auto; right: auto;
    top: auto; transform: none;
  }
  .hero__kicker { color: var(--accent); }
  .hero__titel { color: var(--inkt); }
  .hero__onder { color: var(--inkt-tekst); font-size: 17px; }

  .band, .band--laag { grid-template-columns: minmax(0, 1fr); height: auto; gap: 8px; }
  .band__vak { height: 220px; }
  .mozaiek { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .mozaiek__groot { grid-row: auto; }
  .mozaiek__vak { height: 220px; }

  .cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cijfers__vak { padding: 18px 16px 18px 0; }
  .cijfers__waarde { font-size: 30px; }

  .rooster--2, .rooster--3, .rooster--4 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maanden { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .kop-rij { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 22px; }

  .veldenrij { grid-template-columns: minmax(0, 1fr); }
  .paneel, .paneel--breed { padding: 20px; }
  .paneel__kop { flex-direction: column; align-items: flex-start; gap: 10px; }

  .artikelraster { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tekstraster { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .opgave, .artikel__zij { position: static; }
  .artikel__lood { font-size: 21px; }
  .artikel__body { font-size: 17px; }
  .artikel__body h2 { font-size: 26px; }
  .artikel__body h3 { font-size: 21px; }
  .artikelbalk { flex-direction: column; align-items: flex-start; gap: 16px; }

  .aanbodrij { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 12px; }
  .aanbodrij__beeld { height: 220px; }
  .aanbodrij__body { padding: 0 4px; }
  .aanbodrij__zij {
    padding: 0 4px; align-items: flex-start; text-align: left;
    flex-direction: row; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  }
  .aanbodrij__knoppen { width: 100%; }
  .aanbodrij__prijs { font-size: 32px; }
  .uitlegrij { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .galerij { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .galerij__groot { grid-row: auto; }
  .galerij__vak { height: 220px; }
  .duo--detail { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .zijpaneel { position: static; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prijs-groot { font-size: 40px; }

  .zoek { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .zoek__facetten { position: static; }
  .zoek__rij { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .zoek__rij > div:last-child { text-align: left !important; }
  .zoek__balk { flex-direction: column; align-items: flex-start; gap: 10px; }

  .seoblok { padding-top: 52px; }
  .seoblok__duo { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .seoblok__titel { font-size: 28px; }
  .seoblok__tekst { font-size: 16.5px; }
  .seoblok { padding-bottom: 56px; margin-top: 72px; }
  .seoblok__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 40px; padding-bottom: 0; }

  .voet { padding: 48px var(--marge) 60px; }
  .voet__binnen { flex-direction: column; align-items: flex-start; gap: 26px; }

  /* Tabellen worden op smal scherm gestapelde blokken: de koprij verdwijnt en
     elke cel draagt haar eigen label via data-label. */
  .tabel__kop { display: none; }
  .tabel__rij, .tabel__rij--dicht {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px; padding: 18px 0; align-items: start;
  }
  .tabel__rij > [data-label]::before {
    content: attr(data-label); display: block;
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0;
    text-transform: none; color: var(--inkt-stil); margin-bottom: 2px;
  }
  .tabel__getal--rechts { text-align: left; }
  .lijstpaar__rij { grid-template-columns: minmax(0, 1fr) 90px; }
}

/* ------------------------------------------------------------------ filters */

.filterlijf { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; }

/* Het filterlijf van een overzichtspagina valt over de onderrand van de hero.
   Dat is wat de oude sites deden en het werkt: je ziet zonder scrollen dat er
   iets te kiezen valt, en het beeld krijgt een rand in plaats van los te
   staan. De z-index houdt het boven de donkere waas van de hero. */
.filterlijf--opgetild {
  position: relative; z-index: 5;
  margin-top: calc(var(--tilhoogte) * -1);
}
.filterlijf--opgetild .filterkolom {
  background: #fff; border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 24px 20px;
  top: calc(var(--kop-hoog) + 18px);
  box-shadow: 0 18px 40px -28px rgba(20, 14, 10, 0.4);
}
/* De resultaten beginnen op dezelfde hoogte als de filterkaart. De zoekbalk
   staat daarom in een eigen witte kaart, anders zweeft hij op de foto. */
.zoekbalk--boven {
  background: #fff; border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 16px; margin-bottom: 18px;
  box-shadow: 0 18px 40px -28px rgba(20, 14, 10, 0.4);
}
.filterlijf--opgetild .aanbodrij { background: #fff; }

/* Prijsvlag op het beeld van een resultaat, zoals op de oude overzichten. */
.aanbodrij__vlag {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  background: var(--prijs); color: #fff;
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.02em;
  padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 6px 16px -8px rgba(20, 14, 10, 0.6);
}

/* De filterkolom in de vorm van tg-filter-sidebar uit het sjabloon: een
   grijze kaart met 12px hoeken, koppen van 17px halfvet, en een dunne
   scheidingslijn tussen de groepen. */
.filterkolom {
  position: sticky; top: calc(var(--kop-hoog) + 24px);
  max-height: calc(100vh - var(--kop-hoog) - 48px); overflow-y: auto;
  background: #f9f9f9; border-radius: var(--radius); padding: 27px 24px 26px;
}
.filterkolom__kop {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 0; margin-bottom: 14px; border-bottom: 0;
}
.filterkolom__titel {
  margin: 0; font-family: var(--font-titel); font-size: 17px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--inkt);
}
.filterkolom__wis { font-size: 15px; color: var(--accent); }

/* Zoeken in het aanbod, boven in de kolom zoals in het sjabloon. */
.filterzoek { position: relative; margin-bottom: 22px; }
.filterzoek input {
  width: 100%; border: 1px solid var(--lijn); border-radius: 6px;
  background: #fff; padding: 12px 40px 12px 14px;
  font: inherit; font-size: 14px; outline: none;
}
.filterzoek input:focus { border-color: var(--accent); }
.filterzoek button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 8px; line-height: 0;
  color: var(--inkt-zacht);
}

.filtergroep { margin-bottom: 0; padding: 22px 0; border-top: 1px solid #e4e4e4; }
.filtergroep:first-of-type { border-top: 0; padding-top: 0; }
.filtergroep__titel {
  margin: 0 0 12px; font-family: var(--font-titel); font-size: 17px;
  font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--inkt);
}
.filtergroep__opties { display: grid; gap: 4px; }

.filteroptie { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0; cursor: pointer; }
.filteroptie input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.filteroptie__label { font-size: 15px; line-height: 1.35; color: var(--inkt-tekst); }
.filteroptie__aantal { font-size: 12px; color: oklch(0.62 0.02 60); }
.filteroptie--leeg { cursor: default; }
.filteroptie--leeg .filteroptie__label, .filteroptie--leeg .filteroptie__aantal { color: oklch(0.75 0.01 60); }

.resultaatbalk { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--lijn); padding-bottom: 14px; margin-bottom: 22px; }
.resultaatbalk__telling { font-family: var(--font-titel); font-size: 13.5px; font-weight: 500; color: var(--inkt-stil); }
.resultaatbalk__sorteer { display: flex; align-items: center; gap: 8px; }
.resultaatbalk__sorteer select { border: 1px solid oklch(0.88 0.01 80); border-radius: 3px; padding: 8px 10px; font: inherit; font-size: 14px; background: #fff; color: var(--inkt); }

.zoekbalk { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 26px; }
.zoekbalk input[type="search"], .zoekbalk input[type="text"] {
  flex: 1 1 320px; min-width: 0; border: 1px solid oklch(0.88 0.01 80);
  border-radius: 3px; padding: 15px 16px; font: inherit; font-size: 16px; outline: none;
}
.zoekbalk input:focus { border-color: var(--accent); }

.gekozen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.gekozen__chip { display: inline-flex; align-items: center; gap: 8px; background: oklch(0.2 0.01 60); color: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13px; }
.gekozen__chip:hover { background: var(--inkt); color: #fff; }

@media (max-width: 1100px) {
  .filterlijf { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }
  :root { --tilhoogte: 72px; }
}

@media (max-width: 860px) {
  /* Niets optillen op een smal scherm: daar staat de hero boven en het
     filterlijf eronder, en een negatieve marge zou de kop over het beeld
     trekken. */
  .filterlijf--opgetild { margin-top: 28px; }
  .hero__tekst--hoog { top: auto; }
  .hero__onder--streep { border-left-color: var(--lijn-zwaar); }
  .filterlijf { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .filterkolom { position: static; max-height: none; overflow: visible;
    border: 1px solid var(--lijn); border-radius: var(--radius); padding: 20px; }
  .resultaatbalk { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* zoekpaneel in de hero */
  /* Geen eigen hoogte meer: `.hero--zoek` doet op mobiel mee met de andere
     hero's hierboven, waar het beeld boven de tekst komt te staan. Een eigen
     `height: auto` botste met die regel en duwde de titel het beeld uit. */
  /* Waar een zoekpaneel onder de hero hangt is het beeld een aankondiging en
     geen bezienswaardigheid: eronder staan de kop, vijf zoekvelden, de prijzen
     en de chips, en die willen samen in beeld. Een hero zonder paneel houdt
     zijn volle hoogte. */
  .hero--zoek .hero__beeld { height: var(--herobeeld-zoek); min-height: 180px; }
  .herozoek { margin-top: 6px; padding: 0 var(--marge); }
  .herozoek__paneel { padding: 18px 18px 20px; }
  .herozoek__tabs { flex-wrap: nowrap; overflow-x: auto; }
  .herozoek__tab { white-space: nowrap; padding: 11px 12px 13px; font-size: 14.5px; }

  /* Twee per rij in plaats van vijf onder elkaar. Alle velden blijven staan -
     dezelfde zoekfunctie als op desktop - maar het paneel was zo zevenhonderd
     pixels hoog en vulde het hele scherm voordat er iets van de pagina kwam.
     De bestemming krijgt de volle breedte, want daar staan de langste namen in. */
  .herozoek__velden { gap: 10px 10px; }
  .herozoek__veld { flex: 1 1 calc(50% - 5px); }
  .herozoek__veld:first-child { flex: 1 1 100%; }
  .herozoek__veld input, .herozoek__veld select { padding: 12px 12px; font-size: 15px; }
  .herozoek__knop { width: 100%; }
  .herozoek__prijzen { margin-top: 12px; font-size: 13px; }

  /* -- schermvullend menu -- */
  .mobielmenu {
    display: block; position: fixed; inset: 0; z-index: 60;
    background: #fff; overflow-y: auto;
    /* Zodat de laatste regel niet onder de systeembalk van de telefoon valt. */
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
  .mobielmenu[hidden] { display: none; }
  .mobielmenu__kop {
    position: sticky; top: 0; z-index: 1; background: #fff;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px var(--marge); border-bottom: 1px solid var(--lijn);
  }
  .mobielmenu__titel {
    font-family: var(--font-titel); font-size: 19px; font-weight: 600;
  }
  .mobielmenu__sluit {
    border: 1px solid var(--lijn); background: none; border-radius: 999px;
    width: 44px; height: 44px; display: grid; place-items: center;
    color: var(--inkt); cursor: pointer;
  }
  .mobielmenu__binnen { padding: 8px var(--marge) 0; }
  .mobielmenu__groep { border-bottom: 1px solid var(--lijn); }
  /* De opener is de hele regel en niet alleen het woord: op een telefoon mag
     een aanraakdoel niet kleiner zijn dan een vingertop. */
  .mobielmenu__opener {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0; cursor: pointer; list-style: none;
  }
  .mobielmenu__opener::-webkit-details-marker { display: none; }
  .mobielmenu__opener .mobielmenu__label { margin: 0; }
  .mobielmenu__pijl { display: grid; place-items: center; color: var(--inkt-stil);
    transition: transform 0.18s ease; }
  .mobielmenu__groep[open] .mobielmenu__pijl { transform: rotate(180deg); }
  .mobielmenu__inhoud { padding-bottom: 16px; }
  .mobielmenu__label {
    margin: 0 0 10px; font-family: var(--font-titel); font-size: 12.5px;
    font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--inkt-stil);
  }
  .mobielmenu__label--stil { margin-top: 18px; text-transform: none;
    letter-spacing: 0; font-weight: 500; }
  .mobielmenu__item {
    display: block; padding: 11px 0; text-decoration: none; color: var(--inkt);
  }
  .mobielmenu__item-titel {
    display: block; font-family: var(--font-titel); font-size: 19px; font-weight: 500;
  }
  .mobielmenu__item-noot {
    display: block; margin-top: 2px; font-size: 14px; color: var(--inkt-stil);
  }
  .mobielmenu__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  /* Zoeken staat boven de groepen en blijft altijd zichtbaar: het is de enige
     ingang die niemand hoeft te zoeken. */
  .mobielmenu__zoek { display: block; margin: 14px 0 8px; text-align: center; }
  .mobielmenu__voet {
    margin: 18px 0 0; font-size: 13.5px; color: var(--inkt-stil); line-height: 1.9;
  }
  .mobielmenu__voet a { color: inherit; }
  /* Achtergrond stil zetten zolang het menu open staat. */
  body.menu-open { overflow: hidden; }

}

/* ------------------------------------------------------------ contactvorm */
.contactvorm {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px; margin-top: 4px;
}
.contactvorm__veld { display: grid; gap: 6px; align-content: start; }
.contactvorm__veld--breed, .contactvorm__knop, .contactvorm__melding,
.contactvorm__akkoord { grid-column: 1 / -1; }
.contactvorm input, .contactvorm select, .contactvorm textarea {
  border: 1px solid var(--lijn); border-radius: var(--radius-knop);
  padding: 14px 15px; font: inherit; font-size: 16px; width: 100%;
  background: #fff; color: var(--inkt);
}
.contactvorm input:focus, .contactvorm select:focus, .contactvorm textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.contactvorm textarea { min-height: 170px; resize: vertical; line-height: 1.6; }
.contactvorm__knop { justify-self: start; padding: 16px 34px; }
.contactvorm__fout { margin: 2px 0 0; font-size: 13.5px; color: var(--prijs); }
.contactvorm__melding {
  margin: 0; padding: 14px 16px; border-radius: var(--radius-knop);
  border: 1px solid var(--lijn); font-size: 15px;
}
.contactvorm__melding--fout { border-color: var(--prijs); color: var(--prijs); }
/* Het vinkje: het hokje bovenaan uitlijnen, want de tekst loopt over twee
   regels en een vinkje in het midden daarvan leest als iets anders. */
.contactvorm__akkoord {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px;
  align-items: start; font-size: 14.5px; line-height: 1.55; color: var(--inkt-stil);
}
.contactvorm__akkoord input { width: 20px; height: 20px; margin: 1px 0 0; padding: 0; }

/* Portret van een redacteur. Zonder foto de initialen: liever een letter dan
   een leeg grijs vlak, en zeker liever dan een gezicht dat niet van hem is. */
.auteurkaart { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; }
.auteurkaart__portret {
  /* Positioneringsanker. `.beeld` is absoluut geplaatst met inset 0; zonder
     `relative` hier zoekt hij het dichtstbijzijnde geplaatste voorouderelement
     en dat is de hele sectie: dan staat er een foto van 1797 pixels breed in
     een vakje van 84. */
  position: relative;
  width: 84px; height: 84px; border-radius: 999px; overflow: hidden;
  background: var(--accent-zacht); display: grid; place-items: center;
}
.auteurkaart__portret .beeld { width: 100%; height: 100%; object-fit: cover; }
.auteurkaart__initialen {
  font-family: var(--font-titel); font-size: 27px; font-weight: 600;
  color: var(--accent);
}

@media (max-width: 720px) {
  .contactvorm { grid-template-columns: 1fr; }
  .contactvorm__knop { width: 100%; justify-self: stretch; }
  .auteurkaart { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .auteurkaart__portret { width: 64px; height: 64px; }
}

/* ----------------------------------------------------------- auteursregel */
.auteursregel {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--lijn);
}
.auteursregel__portret {
  position: relative;  /* zie .auteurkaart__portret */
  width: 42px; height: 42px; border-radius: 999px; overflow: hidden;
  background: var(--accent-zacht); display: grid; place-items: center; flex: 0 0 auto;
}
.auteursregel__portret .beeld { width: 100%; height: 100%; object-fit: cover; }
.auteursregel__initialen {
  font-family: var(--font-titel); font-size: 15px; font-weight: 600; color: var(--accent);
}
.auteursregel__tekst { display: grid; gap: 1px; }
.auteursregel__naam { font-family: var(--font-titel); font-size: 15.5px; font-weight: 600; }
.auteursregel__rol { font-size: 13.5px; color: var(--inkt-stil); }

/* ------------------------------------------------------------- herovideo
   Ligt over de posterfoto en verschijnt pas als hij speelt. Zo is er geen
   sprong van foto naar video: het eerste frame van de video is de poster. */
.hero__video { opacity: 0; transition: opacity 700ms ease; }
.hero__video.speelt { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }