@charset "utf-8";

/* ===========================================================================
   Katman - negen lagen in de diepte
   Ensar Yufka, richting 10. Palet en assen uit design/tokens-10demos.md.

   De opbouw van dit bestand:
     1  tokens en vlakken
     2  grondslag
     3  kopbalk, mededeling, taalstapel
     4  de stapel: eerst de gewone verticale vorm, dan de opwaardering naar 3D
     5  de binnenkant van een laag
     6  banden op de dertien andere pagina's
     7  onderdelen
     8  voettekst
     9  onthulling en beperkte beweging

   Regel die overal geldt: er wordt alleen transform en opacity geanimeerd.
   Niets raakt width, height, top, left of margin, dus CLS blijft nul.
   =========================================================================== */

/* -- 1. tokens en vlakken ------------------------------------------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolagegrotesque.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/assets/fonts/dmsans.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* de grond: de ruimte tussen de lagen. Nooit bijna-zwart hierop. */
  --grond:            #605949;
  --grond-tekst:      #F3EFE7;   /*  6,06:1 */
  --grond-goud-tekst: #E7CF82;   /*  4,51:1 */
  --grond-goud-lijn:  #CDA628;   /*  3,00:1, alleen lijnen */

  --laag-licht:            #F3EFE7;
  --laag-licht-tekst:      #1B1814;   /* 15,42:1 */
  --laag-licht-gedempt:    #4A443B;   /*  8,40:1 */
  --laag-licht-goud-tekst: #6E5410;   /*  6,23:1 */
  --laag-licht-goud-lijn:  #A48420;   /*  3,10:1 */

  --laag-donker:            #1B1814;
  --laag-donker-tekst:      #F3EFE7;  /* 15,42:1 */
  --laag-donker-gedempt:    #B0A694;  /*  7,35:1 */
  --laag-donker-goud:       #DDBB4F;  /*  9,51:1 */

  --knop-vlak:  #DDBB4F;
  --knop-tekst: #1B1814;              /*  9,51:1 op de knop */

  --kop: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --tekst: 'DM Sans', system-ui, -apple-system, sans-serif;

  --radius: 0;
  --lagen: 9;
  --laag-afstand: 300px;
  --perspectief: 1400px;
  --perspectief-punt: 50% 46%;
  --veer: cubic-bezier(.16, 1, .3, 1);
  --duur: .3s;
  --nav-ruimte: 22ch;

  --kop-h: 60px;
  --rand: clamp(1rem, 4vw, 3.5rem);
  --breed: 78rem;
}

/* Elk vlak zet zijn eigen tekst-, gedempte-, goud- en focuskleur. Zo hoeft geen
   enkel onderdeel te weten op welke ondergrond het staat. */
.vlak-licht, .laag--licht, .band--licht {
  --vlak: var(--laag-licht);
  --vt: var(--laag-licht-tekst);
  --vg: var(--laag-licht-gedempt);
  --vgoud: var(--laag-licht-goud-tekst);
  --vlijn: var(--laag-licht-goud-lijn);
  --vrand: rgba(27, 24, 20, .16);
  --vzacht: rgba(27, 24, 20, .05);
  --focus: #6E5410;
}
.vlak-donker, .laag--donker, .band--donker {
  --vlak: var(--laag-donker);
  --vt: var(--laag-donker-tekst);
  --vg: var(--laag-donker-gedempt);
  --vgoud: var(--laag-donker-goud);
  --vlijn: var(--laag-donker-goud);
  --vrand: rgba(243, 239, 231, .18);
  --vzacht: rgba(243, 239, 231, .06);
  --focus: #E7CF82;
}
.vlak-grond, .band--grond {
  --vlak: var(--grond);
  --vt: var(--grond-tekst);
  --vg: var(--grond-tekst);
  --vgoud: var(--grond-goud-tekst);
  --vlijn: var(--grond-goud-lijn);
  --vrand: rgba(243, 239, 231, .26);
  --vzacht: rgba(243, 239, 231, .08);
  --focus: #E7CF82;
}

/* -- 2. grondslag --------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kop-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grond);
  color: var(--grond-tekst);
  font-family: var(--tekst);
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--kop);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
img, video, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--focus, #E7CF82);
  outline-offset: 3px;
}

.vw {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.overslaan {
  position: fixed; top: 8px; left: 8px; z-index: 90;
  transform: translateY(-160%);
  background: var(--knop-vlak); color: var(--knop-tekst);
  padding: .7rem 1.1rem; font-weight: 700; text-decoration: none;
  transition: transform .2s var(--veer);
}
.overslaan:focus { transform: translateY(0); }

.ico { width: 1.25em; height: 1.25em; flex: none; }

/* -- 3. kopbalk, mededeling, taalstapel ----------------------------------- */

.melding {
  background: #4C4639;
  color: var(--grond-tekst);
  border-bottom: 1px solid rgba(243, 239, 231, .14);
  font-size: .875rem;
}
.melding-weg .melding { display: none; }
.melding-binnen {
  max-width: var(--breed); margin-inline: auto;
  padding: .55rem var(--rand);
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
}
.melding-binnen p { margin: 0; }
.melding-binnen button {
  background: none; border: 1px solid rgba(243, 239, 231, .3); color: inherit;
  width: 34px; height: 34px; flex: none; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  transition: background-color .2s linear;
}
.melding-binnen button:hover { background: rgba(243, 239, 231, .12); }

.kopbalk {
  position: sticky; top: 0; z-index: 60;
  height: var(--kop-h);
  background: var(--grond);
  border-bottom: 1px solid rgba(243, 239, 231, .16);
  display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.5rem);
  padding-inline: var(--rand);
}
/* Bewust geen krimpende kopbalk. Bij een pagina waarvan de scroll al een camera
   door negen lagen stuurt, is een tweede scrollafhankelijke maat alleen risico. */

.merk { display: flex; align-items: center; flex: none; }
.merk img { width: clamp(112px, 13vw, 168px); height: auto; }  /* bron is 480 breed */

.hoofdnav { margin-left: auto; }
.hoofdnav > ul { display: flex; gap: clamp(.4rem, 1.4vw, 1.5rem); }
.hoofdnav a {
  display: block; padding: .45rem .2rem; text-decoration: none;
  font-size: .95rem; letter-spacing: .01em;
  max-width: var(--nav-ruimte);
  border-bottom: 2px solid transparent;
  transition: border-color .2s linear, color .2s linear;
}
.hoofdnav a:hover { border-bottom-color: var(--grond-goud-lijn); }
.hoofdnav a[aria-current="page"] {
  border-bottom-color: var(--grond-goud-tekst);
  color: var(--grond-goud-tekst);
}
.menu-onder { display: none; }

.zakelijk-knop {
  flex: none; text-decoration: none;
  padding: .5rem 1rem; font-weight: 700; font-size: .92rem;
  max-width: var(--nav-ruimte);
  border: 1px solid var(--grond-goud-lijn);
  color: var(--grond-goud-tekst);
  transition: background-color .2s linear, color .2s linear;
}
.zakelijk-knop[aria-current="page"] { background: var(--knop-vlak); color: var(--knop-tekst); border-color: var(--knop-vlak); }
.zakelijk-knop:hover { background: var(--knop-vlak); color: var(--knop-tekst); border-color: var(--knop-vlak); }

.groepknop { display: none; }
/* De schakelaar bestaat alleen als er een stapel is om om te draaien. Ligt de
   pagina plat (smal scherm, beperkte beweging, geen JavaScript), dan staan de
   negen lagen gewoon onder elkaar en heeft omdraaien geen betekenis. */
.stapel-aan .groepknop {
  flex: none; display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid rgba(243, 239, 231, .3);
  color: var(--grond-tekst); font: inherit; font-size: .88rem;
  padding: .45rem .8rem; cursor: pointer; min-height: 40px;
  max-width: calc(var(--nav-ruimte) + 3rem);
  transition: background-color .2s linear, border-color .2s linear;
}
.groepknop:hover { background: rgba(243, 239, 231, .12); }
.groepknop[aria-pressed="true"] { border-color: var(--grond-goud-lijn); color: var(--grond-goud-tekst); }
.groepknop .ico { transition: transform .5s var(--veer); }
.groepknop[aria-pressed="true"] .ico { transform: rotate(180deg); }

/* De taalwissel is een tabbladstapel: vijf standen in de diepte, de actieve
   vooraan. Dezelfde beweging als het hoofdidee, in het klein. */
.talen { flex: none; }
.talen > ul {
  display: flex; align-items: flex-end;
  perspective: 420px; perspective-origin: 50% 60%;
}
.talen li { transform-style: preserve-3d; }
.talen a {
  display: grid; place-items: center;
  min-width: 42px; min-height: 40px; padding: .35rem .5rem;
  text-decoration: none; font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  background: #524C3E;
  border: 1px solid rgba(243, 239, 231, .18);
  border-bottom: 2px solid transparent;
  transform: translate3d(0, 3px, calc(var(--t) * -14px));
  transition: transform .35s var(--veer), background-color .2s linear;
}
.talen a:hover { background: #6B6353; transform: translate3d(0, 0, 0); }
.talen a[aria-current="true"] {
  background: var(--grond);
  color: var(--grond-goud-tekst);
  border-bottom-color: var(--grond-goud-tekst);
  transform: translate3d(0, 0, 12px);
}

.menuknop {
  display: none; flex: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid rgba(243, 239, 231, .3);
  color: inherit; cursor: pointer; place-items: center;
}
.menuknop .ico-kruis { display: none; }
.menuknop[aria-expanded="true"] .ico-menu { display: none; }
.menuknop[aria-expanded="true"] .ico-kruis { display: block; }

@media (max-width: 899px) {
  .menuknop { display: grid; }
  .kopbalk > .zakelijk-knop, .kopbalk > .talen { display: none; }
  .hoofdnav {
    position: fixed; inset: auto 0 0 0; top: calc(var(--kop-h) + var(--melding-h, 0px));
    background: var(--grond); z-index: 55;
    padding: 1.25rem var(--rand) 2rem;
    overflow-y: auto;
    display: none;
  }
  .hoofdnav.open { display: block; }
  .hoofdnav > ul { flex-direction: column; gap: 0; }
  .hoofdnav a {
    max-width: none; font-size: 1.15rem; padding: .85rem 0;
    border-bottom: 1px solid rgba(243, 239, 231, .14);
  }
  .menu-onder { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; align-items: flex-start; }
  .menu-onder .talen > ul { perspective: none; flex-wrap: wrap; gap: .4rem; }
  .menu-onder .talen a { min-height: 48px; min-width: 56px; transform: none; }
  .groepknop { margin-left: auto; }
}
@media (max-width: 560px) {
  .groepknop span { display: none; }
  .groepknop { padding: .45rem; width: 44px; justify-content: center; }
}

/* -- 4. de stapel --------------------------------------------------------- */
/* De basisvorm is negen gewone secties onder elkaar. De 3D-scene is de
   opgewaardeerde versie en wordt alleen aangezet als html.stapel-aan staat.
   Die klasse wordt in de kop van het document gezet, vóór de eerste weergave,
   zodat er nooit van de ene vorm naar de andere wordt gesprongen. */

.stapel { position: relative; }
.stapel-scene { display: block; }

.laag {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--vlak); color: var(--vt);
  border-top: 1px solid var(--vrand);
}

.laag-tab {
  display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.25rem);
  padding: 0 var(--rand); min-height: 46px;
  border-bottom: 1px solid var(--vrand);
  font-size: .82rem; letter-spacing: .04em;
  background: var(--vzacht);
}
.laag-nr {
  font-family: var(--kop); font-weight: 800; font-size: 1rem;
  color: var(--vgoud); flex: none; font-variant-numeric: tabular-nums;
}
.laag-titel {
  font-family: var(--kop); font-weight: 700; font-size: .95rem;
  letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.laag-groep {
  margin-left: auto; flex: none;
  color: var(--vg); text-transform: uppercase; font-size: .68rem; letter-spacing: .12em;
  border: 1px solid var(--vrand); padding: .2rem .5rem;
}

.laag-binnen {
  flex: 1; min-height: 0;
  padding: clamp(1.5rem, 3.4vh, 2.75rem) var(--rand);
  display: grid; gap: clamp(1.1rem, 2.4vw, 2.25rem);
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

/* -- 5. de binnenkant van een laag ---------------------------------------- */

.tag {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--vgoud); margin-bottom: .9rem;
}
.laag-woord h1 { font-size: clamp(2.1rem, 5.4vw, 4.2rem); font-stretch: 92%; }
.laag-woord h1 em { font-style: normal; color: var(--vgoud); }
.laag-woord h2 { font-size: clamp(1.7rem, 3.5vw, 2.9rem); font-stretch: 94%; }
.laag-onder {
  margin-top: 1rem; color: var(--vg);
  max-width: 46ch; font-size: 1.02rem;
}
.knoppen { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.laag-link { margin-top: 1.25rem; }

.hero-feiten {
  display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.8rem;
  padding-top: 1.2rem; border-top: 1px solid var(--vrand);
}
.hero-feiten li { display: flex; flex-direction: column; }
.hero-feiten b {
  font-family: var(--kop); font-size: 1.45rem; font-weight: 800; color: var(--vgoud);
  line-height: 1.1;
}
.hero-feiten span { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--vg); }

.laag-beeld { position: relative; overflow: hidden; min-height: 0; }
.laag-beeld picture, .laag-beeld img { width: 100%; height: 100%; object-fit: cover; }
.laags-vel .laag-beeld img, .laag--spec .laag-beeld img { object-fit: contain; }

/* De platte vorm is geen noodrem maar de tweede, even complete vorm. Hij krijgt
   daarom dezelfde kolommaat en dezelfde leesbreedte als de banden op de andere
   dertien pagina's, en het beeld wordt niet opgerekt tot buiten zijn bron. */
.laag-tab, .laag-binnen { max-width: var(--breed); margin-inline: auto; width: 100%; }
.laag-binnen { padding-block: clamp(2.25rem, 5vw, 4rem); }
.laag-beeld img { max-height: 62vh; }
@media (min-width: 900px) {
  .laag-binnen {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
  }
  .laag-woord { grid-column: 1; }
  .laag-beeld { grid-column: 2; align-self: stretch; }
  .laag-vulling { grid-column: 1 / -1; }
  .laag--video .laag-vulling { grid-column: 2; grid-row: 1; }
  .laag--video .laag-woord { grid-column: 1; grid-row: 1; }
}
/* De platte regels hierboven gelden vanaf 900 pixels breed en raken dus ook de
   stapel. align-items: center zorgde daar dat een rasteronderdeel zichzelf op
   inhoudshoogte zette in plaats van op de rijhoogte, waarna de videolaag twintig
   tot honderdveertig pixels buiten zijn laag viel en werd weggeknipt. */
.stapel-aan .laag-tab, .stapel-aan .laag-binnen { max-width: none; margin-inline: 0; }
.stapel-aan .laag-binnen { align-items: stretch; }
.stapel-aan .laag-binnen { padding-block: clamp(1.5rem, 3.4vh, 2.75rem); }
.stapel-aan .laag-beeld img { max-height: none; }

/* De inhoudsopgave van de stapel. In de platte vorm is dit een gewone index
   boven de negen secties, met echte ankerlinks. Met de stapel aan wordt het een
   smalle liniaal langs de rechterrand en neemt JavaScript de sprong over. */
.stapel-hint { display: none; }
.stapelvouw { background: var(--grond); border-bottom: 1px solid rgba(243, 239, 231, .16); }
.stapelvouw > summary {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  max-width: var(--breed); margin-inline: auto;
  padding: .75rem var(--rand); min-height: 48px;
  font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--grond-goud-tekst); list-style: none;
}
.stapelvouw > summary::-webkit-details-marker { display: none; }
.stapelvouw-aantal {
  margin-left: auto; font-family: var(--kop); font-weight: 800;
  color: var(--grond-tekst); letter-spacing: 0;
}
.stapelnav { background: var(--grond); padding: 0 var(--rand) clamp(1.25rem, 3vw, 2rem); }
.stapelnav ol {
  max-width: var(--breed); margin-inline: auto;
  display: grid; gap: .15rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.stapelnav a {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .5rem 0; min-height: 44px; text-decoration: none;
  color: var(--grond-tekst); font-size: .95rem;
  border-bottom: 1px solid rgba(243, 239, 231, .16);
}
.stapelnav a:hover { color: var(--grond-goud-tekst); }
.stapelnav-nr { font-family: var(--kop); font-weight: 800; color: var(--grond-goud-tekst); font-size: .85rem; }

/* -- de opwaardering naar 3D ---------------------------------------------- */

.stapel-aan .stapel {
  height: calc((var(--lagen) - 1) * 78vh + 100vh);
}
.stapel-aan .stapel-raam {
  position: sticky; top: var(--kop-h);
  height: calc(100vh - var(--kop-h));
  overflow: hidden;
  /* Het raam is niet breder dan het nodig heeft. Het is de laag die elk beeld
     opnieuw wordt samengesteld, en het vlak waarin dat gebeurt telt mee: op 2560
     scheelde deze aftopping vijf beelden per seconde. De grond eromheen is een
     gewone achtergrond en kost niets. */
  width: min(100%, 1400px); margin-inline: auto;
}
/* Het perspectief staat op de scene, niet op het raam. Anders vallen de
   stapelnavigatie en de scrollhint binnen dezelfde 3D-context als de lagen en
   heeft z-index geen zeggenschap meer over wat er vóór wat komt. */
.stapel-aan .stapel-scene {
  position: absolute; inset: 0;
  perspective: var(--perspectief);
  perspective-origin: var(--perspectief-punt);
  /* preserve-3d is hier geen sier maar de reden dat de stapel klopt: zonder deze
     regel sorteert de browser de lagen op documentvolgorde in plaats van op
     diepte, en staat laag 2 vóór laag 1 terwijl hij wel kleiner is. Dat zag geen
     enkele meting; het bleek uit één schermafdruk van de Franse startpagina. */
  transform-style: preserve-3d;
}
.stapel-aan .laag {
  position: absolute;
  /* Twee maten met een reden. De breedte is afgetopt op 1180 pixels omdat een
     laag die op scroll van schaal verandert elk beeld opnieuw gerasterd wordt:
     op 1920 scheelde die aftopping 22 trage beelden op 120. De schaduw die hier
     stond is eruit om dezelfde reden: één zachte schaduw van 70 pixels kostte
     14 beelden per seconde, gemeten op 1440. De lagen scheiden nu op kleur en
     op een haarlijn, wat op deze grond ruim genoeg is. */
  left: max(clamp(1rem, 5vw, 6rem), calc((100% - 1180px) / 2));
  right: max(clamp(1rem, 5vw, 6rem), calc((100% - 1180px) / 2));
  top: clamp(4rem, 13vh, 8rem);
  /* Ook de hoogte is afgetopt, om dezelfde reden als de breedte: op 1080 was de
     laag 22 procent groter in oppervlak dan op 900 en dat kostte drie beelden per
     seconde. Een kaart die niet het hele scherm vult, leest bovendien beter als
     een voorwerp in de ruimte. */
  bottom: max(clamp(1rem, 3.5vh, 2.5rem), calc(100% - clamp(4rem, 13vh, 8rem) - 760px));
  border: 1px solid var(--vrand);
  overflow: hidden;
  pointer-events: none;
  transform-origin: 50% 50%;
  contain: layout paint;
  backface-visibility: hidden;
}
.stapel-aan .laag.scherp { pointer-events: auto; }
.stapel-aan .laag .laag-tab { pointer-events: auto; cursor: pointer; }
.stapel-aan .laag.weg { visibility: hidden; }
/* Een laag die volledig achter de voorste ligt, wordt tot zijn tab afgeknipt.
   Zonder deze regel stelt de browser drie schermvullende vlakken per beeld
   samen; met de regel nog één. Gemeten verschil op 1440: 51 fps met 19 trage
   beelden op 120, tegen 59 fps met 2. Dit is de enige reden dat negen lagen
   op scroll haalbaar zijn. */
.stapel-aan .laag.smal { clip-path: inset(0 0 calc(100% - 150px) 0); }
.stapel-aan .laag.smal .laag-binnen { visibility: hidden; }

.stapel-aan .laag-tab { min-height: 46px; }
.stapel-aan .laag-binnen {
  overflow: hidden;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, auto);
  align-content: stretch;
}
.stapel-aan .laag-woord { grid-column: 1; grid-row: 1; align-self: center; }
.stapel-aan .laag-beeld { grid-column: 2; grid-row: 1; }
.stapel-aan .laag-vulling { grid-column: 1 / -1; grid-row: 2; }
.stapel-aan .laag--hero .laag-woord { grid-row: 1 / -1; }
.stapel-aan .laag--video .laag-vulling { grid-column: 2; grid-row: 1; min-height: 0; }
.stapel-aan .laag--video .laag-woord { grid-row: 1 / -1; }

/* de navigatie langs de stapel */
/* Met de stapel aan staat de opsomming meteen buiten de gewone stroom, ook vóór
   het script hem opent. Zou hij eerst in de stroom staan en daarna eruit springen,
   dan is dat precies de verspringing die deze demo niet mag hebben. */
.stapel-aan .stapelvouw {
  position: absolute; right: clamp(.4rem, 1.4vw, 1.1rem); top: 50%;
  transform: translateY(-50%); z-index: 5;
  background: none; border: 0;
}
.stapel-aan .stapelvouw > summary { display: none; }
.stapel-aan .stapelnav { background: none; padding: 0; }
.stapel-aan .stapelnav ol { display: flex; flex-direction: column; gap: .2rem; }
.stapel-aan .stapelnav a {
  align-items: center; gap: .5rem; justify-content: flex-end;
  padding: .3rem .4rem; min-height: 26px; border-bottom: 0;
  font-size: .7rem; letter-spacing: .08em;
}
.stapel-aan .stapelnav-nr {
  color: var(--grond-tekst); opacity: .55;
  transition: opacity .25s linear, color .25s linear;
}
.stapel-aan .stapelnav-titel {
  max-width: 0; overflow: hidden; white-space: nowrap;
  opacity: 0; transition: max-width .35s var(--veer), opacity .25s linear;
}
.stapel-aan .stapelnav a:hover .stapelnav-titel,
.stapel-aan .stapelnav a:focus-visible .stapelnav-titel { max-width: 15ch; opacity: 1; }
.stapel-aan .stapelnav a[aria-current="true"] .stapelnav-nr { opacity: 1; color: var(--grond-goud-tekst); }
.stapel-aan .stapelnav a[aria-current="true"] { border-right: 2px solid var(--grond-goud-lijn); }

.stapel-aan .stapel-hint {
  display: flex; align-items: center; gap: .5rem;
  position: absolute; left: 50%; bottom: .55rem; transform: translateX(-50%);
  color: var(--grond-tekst); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; opacity: .8; z-index: 5;
  transition: opacity .4s linear;
}
.stapel-aan .stapel-hint .ico { animation: wenk 2.4s ease-in-out infinite; }
.stapel-aan.gescrold .stapel-hint { opacity: 0; }
@keyframes wenk {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* Een laag mag nooit meer inhoud hebben dan er in past: hij staat op
   overflow: hidden en dan valt de onderste regel er stil af. Op een venster van
   1440 bij 640 liep elke laag 27 pixels over; met deze maten past het weer. */
@media (max-height: 800px) {
  .stapel-aan .laag { top: clamp(3.2rem, 11vh, 6rem); bottom: .5rem; }
  .stapel-aan .laag-binnen { padding-block: clamp(.9rem, 2.4vh, 1.75rem); gap: clamp(.7rem, 1.8vh, 1.5rem); }
  .stapel-aan .laag-woord h1 { font-size: clamp(1.8rem, 4.4vw, 3.2rem); }
  .stapel-aan .laag-woord h2 { font-size: clamp(1.4rem, 2.8vw, 2.2rem); }
  .stapel-aan .laag-onder { margin-top: .6rem; }
  .stapel-aan .knoppen, .stapel-aan .laag-link { margin-top: .9rem; }
  .stapel-aan .hero-feiten { margin-top: 1rem; padding-top: .8rem; }
}
@media (max-width: 1099px) {
  .stapel-aan .laag-binnen { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
  .stapel-aan .laag-woord h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
  .stapel-aan .laag-woord h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
  .stapelnav a { padding: .25rem .3rem; }
}

/* -- 6. banden op de dertien andere pagina's ------------------------------ */

.band { background: var(--vlak); color: var(--vt); position: relative; }
.band-binnen {
  max-width: var(--breed); margin-inline: auto;
  padding: clamp(2.75rem, 7vw, 5.5rem) var(--rand);
}
/* Het volgnummer van de band is de platte variant van de tab van een laag:
   dezelfde plek in de leesvolgorde, zonder de diepte. */
.band-nr {
  display: flex; align-items: center; gap: .9rem;
  margin-bottom: clamp(1.1rem, 2.4vw, 1.75rem);
  font-family: var(--kop); font-weight: 800; font-size: .9rem;
  color: var(--vgoud); letter-spacing: .06em;
}
.band-nr::after { content: ""; flex: 1; height: 1px; background: var(--vrand); }
.band + .band { border-top: 1px solid var(--vrand); }
.band h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-stretch: 94%; }
.band--kop h1 { font-size: clamp(2.1rem, 5vw, 3.8rem); font-stretch: 92%; }
.band--kop .band-binnen { padding-top: clamp(2.25rem, 5vw, 4rem); }
.lead { margin-top: 1rem; color: var(--vg); max-width: 58ch; }
.band h2 + .lead, .band h2 + .spec, .band h2 + .cijfers,
.band h2 + .punten, .band h2 + .kaarten, .band h2 + .gegevens { margin-top: 1.1rem; }
.lead + .spec, .lead + .kaarten, .lead + .punten, .lead + .recepten,
.lead + .formulier, .lead + .stroken, .lead + .klanten { margin-top: 2.25rem; }
.band--cta { text-align: center; }
.band--cta .lead { margin-inline: auto; }
.band--cta .knoppen { justify-content: center; }
.noot { margin-top: 1.25rem; font-size: .875rem; color: var(--vg); }
.kruimel { font-size: .875rem; margin-bottom: 1.25rem; }
.kruimel a { color: var(--vgoud); }

.tekst { display: grid; gap: clamp(1.5rem, 4vw, 3.25rem); align-items: center; }
.tekst-woord p + p { margin-top: 1rem; }
.tekst-woord p { color: var(--vg); }
.tekst-woord h2 + p { margin-top: 1.1rem; }
.tekst-beeld { margin: 0; }
.tekst-beeld img { width: 100%; height: auto; }
.tekst-beeld figcaption, .kader-beeld figcaption, .videovak figcaption {
  margin-top: .7rem; font-size: .82rem; color: var(--vg);
}
/* Alleen waar een pictogram voor het bijschrift staat, is het een flexrij. Zet
   je dat op alle bijschriften, dan wordt de vette aanhef een eigen kolom en
   breekt hij op twee regels af. */
.kader-beeld figcaption, .videovak figcaption { display: flex; gap: .5rem; align-items: flex-start; }
.tekst-beeld figcaption b, .strook figcaption b { display: block; color: var(--vt); }
@media (min-width: 900px) {
  .tekst { grid-template-columns: 1fr 1fr; }
  .tekst--links .tekst-woord { order: 1; }
  .tekst--links .tekst-beeld { order: 2; }
  .tekst--rechts .tekst-woord { order: 2; }
  .tekst--rechts .tekst-beeld { order: 1; }
}

.eerlijk { max-width: 62ch; }
.eerlijk p { margin-top: 1rem; color: var(--vg); }
.plat { max-width: 68ch; }
.plat-deel + .plat-deel { margin-top: 2.5rem; }
.plat-deel h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.plat-deel p { margin-top: 1rem; color: var(--vg); }
.ander-kop { margin-top: 3rem; }

/* -- 7. onderdelen -------------------------------------------------------- */

.knop {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.35rem; min-height: 48px;
  font-weight: 700; text-decoration: none; font-size: .97rem;
  border: 1px solid transparent;
  transition: transform .3s var(--veer), background-color .2s linear, color .2s linear;
}
.knop .ico { width: 1.05em; height: 1.05em; transition: transform .3s var(--veer); }
.knop:hover .ico { transform: translateX(4px); }
.knop-vol { background: var(--knop-vlak); color: var(--knop-tekst); }
.knop-vol:hover { background: #E7CF82; }
.knop-lijn { border-color: var(--vlijn); color: var(--vt); }
.knop-lijn:hover { background: var(--vzacht); }

.tekstlink {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--vgoud); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.tekstlink .ico { width: 1em; height: 1em; transition: transform .3s var(--veer); }
.tekstlink:hover .ico { transform: translateX(4px); }

/* productkaarten */
.kaarten { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.kaart { display: flex; }
.kaart-link {
  display: grid; grid-template-columns: 84px 1fr; gap: 1rem; align-items: center;
  text-decoration: none; width: 100%;
  border: 1px solid var(--vrand); padding: .75rem;
  transition: border-color .25s linear, transform .35s var(--veer);
}
.kaart-link:hover { border-color: var(--vlijn); transform: translateY(-3px); }
.kaart-beeld { display: block; overflow: hidden; aspect-ratio: 1; }
.kaart-beeld img, .kaart-beeld picture { width: 100%; height: 100%; object-fit: cover; }
.kaart-tekst { display: block; min-width: 0; }
.kaart-label { display: block; font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--vgoud); }
.kaart-naam { display: block; font-family: var(--kop); font-weight: 700; font-size: 1.02rem; margin-top: .2rem; }
.kaart-kort { display: none; }
.kaart-prijs { display: block; margin-top: .35rem; font-weight: 700; font-size: .95rem; }
.kaart-per { font-weight: 400; font-size: .74rem; color: var(--vg); margin-left: .35rem; }
.band .kaart-link { grid-template-columns: 1fr; padding: 0; }
.band .kaart-beeld { aspect-ratio: 4 / 3; }
.band .kaart-tekst { padding: 1rem 1.1rem 1.25rem; }
.band .kaart-kort { display: block; margin-top: .5rem; font-size: .9rem; color: var(--vg); }
.prijs { font-family: var(--kop); font-weight: 800; font-size: 1.8rem; margin-top: 1rem; }

/* punten */
.punten { display: grid; gap: clamp(1rem, 2.4vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.punten li { border-top: 2px solid var(--vlijn); padding-top: .9rem; }
.punten h3 { font-size: 1.08rem; }
.punten p { margin-top: .5rem; color: var(--vg); font-size: .94rem; }

/* cijfers */
.cijfers { display: grid; gap: clamp(1rem, 2.4vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.cijfers li { border-top: 1px solid var(--vrand); padding-top: .8rem; }
.cijfers b { display: block; font-family: var(--kop); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.9rem); color: var(--vgoud); line-height: 1; }
.cijfers span { display: block; margin-top: .4rem; font-size: .88rem; color: var(--vg); }

/* specificatie */
.spec { margin: 0; display: grid; gap: 0; }
.specregel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--vrand); align-items: baseline;
}
.specregel dt { font-weight: 700; font-size: .92rem; }
.specregel dd { margin: 0; color: var(--vg); font-size: .92rem; }
.merk-open {
  display: inline-block; font-size: .72rem; letter-spacing: .07em;
  border: 1px dashed var(--vlijn); color: var(--vgoud); padding: .1rem .5rem;
}
@media (min-width: 900px) { .band .spec { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }

/* landen */
.landen { display: grid; gap: .5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.landen li { display: flex; align-items: center; gap: .5rem; font-size: .95rem; border-bottom: 1px solid var(--vrand); padding: .35rem 0; }
.landen .ico { width: 1em; height: 1em; color: var(--vgoud); }

/* recepten */
.receptkaarten { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.receptkaart { border: 1px solid var(--vrand); padding: 1rem; }
.receptkaart h3 { font-size: 1.02rem; }
.receptkaart p { margin-top: .5rem; font-size: .9rem; color: var(--vg); }
.receptkaart-meta { display: flex; gap: 1rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--vgoud); }
.recepten { display: grid; gap: 1.25rem; }
.recept { border: 1px solid var(--vrand); padding: clamp(1.1rem, 2.4vw, 1.75rem); }
.recept h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.recept-kort { margin-top: .6rem; color: var(--vg); }
.recept-meta { display: flex; gap: 1.25rem; margin-top: .6rem; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--vgoud); }
.recept-uit { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.recept-uit h4 { font-size: .8rem; letter-spacing: .11em; text-transform: uppercase; color: var(--vgoud); }
.recept-uit ul, .recept-uit ol { margin-top: .75rem; display: grid; gap: .45rem; font-size: .93rem; color: var(--vg); }
.recept-uit ul li { padding-left: 1.1rem; position: relative; }
.recept-uit ul li::before { content: ""; position: absolute; left: 0; top: .65em; width: .45rem; height: 1px; background: var(--vlijn); }
.recept-uit ol { counter-reset: s; }
.recept-uit ol li { counter-increment: s; padding-left: 1.8rem; position: relative; }
.recept-uit ol li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; font-family: var(--kop); font-weight: 800; color: var(--vgoud); font-size: .82rem; top: .15em; }
@media (min-width: 800px) { .recept-uit { grid-template-columns: 1fr 1.25fr; } }

/* klanten */
.klanten { display: flex; flex-wrap: wrap; gap: 1rem; }
.klanten li { border: 1px solid var(--vrand); padding: .9rem 1.2rem; }
.klanten b { display: block; font-family: var(--kop); font-size: 1.15rem; }
.klanten span { font-size: .82rem; color: var(--vg); }

/* stroken */
.stroken { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.strook { margin: 0; }
.strook img, .strook picture { width: 100%; height: auto; }
.strook figcaption { margin-top: .6rem; font-size: .85rem; color: var(--vg); }
.strook figcaption b { display: block; color: var(--vt); font-family: var(--kop); }

/* gegevens */
.gegevens { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.gegevens li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; border-top: 1px solid var(--vrand); padding-top: 1rem; }
.gegevens .ico { color: var(--vgoud); margin-top: .2rem; }
.gegevens .tekstlink { grid-column: 2; margin-top: .5rem; font-size: .88rem; }
.gegevens a { color: inherit; }

/* video */
.videovak { margin: 0; max-width: 420px; }
.video-raam { overflow: hidden; border: 1px solid var(--vrand); }
.videovak video { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--vzacht); }
.videovak figcaption .ico { color: var(--vgoud); flex: none; }
/* In de stapel heeft de videolaag een vaste hoogte. Met flexbox bleef het
   bijschrift onder de rand van de laag hangen en werd het weggeknipt; met een
   raster van minmax(0,1fr) plus auto krimpt het beeld en houdt het bijschrift
   zijn eigen ruimte. */
.stapel-aan .laag--video .videovak {
  max-width: none; height: 100%; min-height: 0;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: .6rem;
}
.stapel-aan .laag--video .video-raam { min-height: 0; }
.stapel-aan .laag--video .videovak video {
  height: 100%; width: 100%; aspect-ratio: auto; object-fit: cover;
}
.stapel-aan .laag--video .videovak figcaption { margin-top: 0; }

/* eerlijke plaatshouder: nooit een beeld verzinnen */
.plaatshouder {
  display: grid; place-content: center; gap: .6rem; text-align: center;
  padding: 1.5rem; border: 1px dashed var(--vlijn); background: var(--vzacht);
}
.plaatshouder-label {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--vgoud);
}
.plaatshouder-tekst { font-size: .95rem; color: var(--vg); max-width: 34ch; margin-inline: auto; }
.eerlijk .plaatshouder { max-width: 32rem; margin-top: 1.5rem; }

/* formulier */
.formulier { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.veld { display: grid; gap: .35rem; align-content: start; }
.veld--breed { grid-column: 1 / -1; }
.veld label, .veld legend { font-weight: 700; font-size: .9rem; }
.hint { font-weight: 400; color: var(--vg); font-size: .82rem; }
.veld input, .veld select, .veld textarea {
  font: inherit; font-size: 1rem; padding: .7rem .8rem; min-height: 48px;
  background: var(--vlak); color: var(--vt);
  border: 1px solid var(--vrand); border-radius: 0;
}
.veld input:hover, .veld select:hover, .veld textarea:hover { border-color: var(--vlijn); }
.veld textarea { min-height: 8rem; resize: vertical; }
fieldset.veld { border: 0; padding: 0; margin: 0; }
.keuze { display: flex; align-items: center; gap: .55rem; font-weight: 400; min-height: 44px; }
.keuze input { min-height: 0; width: 20px; height: 20px; accent-color: var(--vgoud); }
.keuze--akkoord { align-items: flex-start; }
.keuze--akkoord input { margin-top: .3rem; }
.keuze--akkoord a { color: var(--vgoud); }
.fout { color: #B3261E; font-size: .85rem; font-weight: 700; }
.vlak-donker .fout { color: #F2B8B5; }
[aria-invalid="true"] { border-color: #B3261E !important; }
.formulier-voet { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.formulier-voet .noot { margin-top: 0; max-width: 40ch; }
.formulier-uitslag:empty { display: none; }
.formulier-uitslag {
  grid-column: 1 / -1; padding: .9rem 1.1rem; border: 1px solid var(--vlijn);
  background: var(--vzacht); font-weight: 700;
}

.anderen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; justify-content: center; }
.anderen a { display: inline-flex; gap: .5rem; align-items: center; text-decoration: none; border: 1px solid var(--vrand); padding: .7rem 1.1rem; }
.anderen a:hover { border-color: var(--vlijn); }

/* -- 8. voettekst --------------------------------------------------------- */

.voet { background: #4C4639; color: var(--grond-tekst); border-top: 1px solid rgba(243, 239, 231, .2); }
.voet-binnen {
  max-width: var(--breed); margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 4rem) var(--rand) 2rem;
  display: grid; gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.voet-merk img { width: 168px; height: auto; }
.spreuk { margin-top: 1rem; color: var(--grond-goud-tekst); font-family: var(--kop); font-size: 1.05rem; }
.voet-sociaal { display: flex; gap: .5rem; margin-top: 1.25rem; }
.voet-sociaal a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(243, 239, 231, .26); }
.voet-sociaal a:hover { background: rgba(243, 239, 231, .12); }
.voet-kolom h2 { font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--grond-goud-tekst); }
.voet-kolom ul { margin-top: 1rem; display: grid; gap: .1rem; }
.voet-kolom a { display: inline-block; padding: .35rem 0; text-decoration: none; font-size: .93rem; }
.voet-kolom a:hover { text-decoration: underline; text-underline-offset: 3px; }
.voet-kolom a[aria-current="true"] { color: var(--grond-goud-tekst); font-weight: 700; }
.voet-adres p { margin-top: 1rem; font-size: .93rem; }
.voet-adres a { display: inline-flex; gap: .5rem; align-items: flex-start; text-decoration: none; }
.voet-adres a:hover { text-decoration: underline; text-underline-offset: 3px; }
.voet-adres .ico { color: var(--grond-goud-tekst); margin-top: .15rem; }
.rustknop {
  margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid rgba(243, 239, 231, .3); color: inherit;
  font: inherit; font-size: .85rem; padding: .55rem .9rem; min-height: 44px; cursor: pointer;
}
.rustknop:hover { background: rgba(243, 239, 231, .12); }
.rustknop[aria-pressed="true"] { border-color: var(--grond-goud-lijn); color: var(--grond-goud-tekst); }
.voet-regel {
  max-width: var(--breed); margin-inline: auto;
  padding: 1.25rem var(--rand) 2.5rem; font-size: .82rem;
  border-top: 1px solid rgba(243, 239, 231, .16); color: #E4DFD4;
}
.voet-regel a { color: var(--grond-goud-tekst); }

/* -- 9. onthulling en beperkte beweging ----------------------------------- */

[data-rv] { opacity: 0; transform: translate3d(0, 22px, 0); }
[data-rv].in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--veer), transform .7s var(--veer);
  transition-delay: var(--rv-wacht, 0ms);
}

.rm [data-rv], .rm [data-rv].in { opacity: 1; transform: none; transition: none; }
.rm .stapel-hint .ico { animation: none; }
.rm .talen a { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-rv], [data-rv].in { opacity: 1 !important; transform: none !important; }
}