/* ══════════════════════════════════════════════════════════════════════════
   Bakır — Ensar Yufka. Koper op aubergine, twee kruisende banen.
   Eén stylesheet, geen framework, geen CDN.

   De volgorde:
     0 tokens en lettertypes      8 driehoeken: schuin gesneden foto's
     1 grondslag en typografie    9 duo, punten, cijfers, klanten
     2 blad: het schuine vlak    10 opgevraagd, spec, gegevens
     3 kopbalk                   11 formulier
     4 melding                   12 recepten
     5 hero                      13 voettekst
     6 de twee banen             14 taalscherm
     7 knoppen en productlijst   15 onthulling, beperkte beweging, afdrukken

   Waar in dit bestand een getal staat dat op contrast slaat, is dat gemeten met
   _contrast.py en niet geschat.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 0. tokens en lettertypes ────────────────────────────────────────────── */

@font-face {
  font-family: 'Antonio';
  src: url('/assets/fonts/antonio.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/assets/fonts/barlow.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow';
  src: url('/assets/fonts/barlow-halfvet.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Twee terugvalletters met bijgestelde maten. Zonder deze twee verspringt de
   tekst op het moment dat Antonio binnenkomt: Antonio is 76,2 procent zo breed
   als Arial, dus een baanlabel dat in de terugval op twee regels past valt
   daarna op één, en dat is een echte verschuiving. Op 375 pixels was dat
   CLS 0,0027, precies in .baan-binnen. De percentages hieronder zijn gemeten
   met een canvas, niet geschat: acht kopregels in vijf talen, in hoofdletters,
   want in deze richting staat alles wat Antonio zet in hoofdletters. Antonio
   is dan 64,1 procent van Arial (in onderkast 76 procent, en die waarde zou
   hier dus verkeerd zijn), Barlow 94,4 procent. Stijgen 1,15 en 1,00 em,
   dalen 0,14 en 0,20 em; die twee worden door size-adjust weer opgeschaald,
   vandaar 1,15/0,641 = 179 procent. */
@font-face {
  font-family: 'Antonio terugval';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Nimbus Sans');
  size-adjust: 64.1%;
  ascent-override: 179.4%;
  descent-override: 21.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Barlow terugval';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Nimbus Sans');
  size-adjust: 95.4%;
  ascent-override: 104.8%;
  descent-override: 21%;
  line-gap-override: 0%;
}
/* Barlow in hoofdletters is 87,9 procent van Arial en in onderkast 95,4. Eén
   getal kan die twee niet allebei bedienen, dus er is een tweede terugval voor
   de kleine kapitaaltjes. Zonder die tweede viel het onderschrift van de gouden
   baan op 375 pixels eerst over drie regels en na het inladen over twee: dat
   was de laatste verschuiving die er nog was. */
@font-face {
  font-family: 'Barlow terugval caps';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Nimbus Sans');
  size-adjust: 87.9%;
  ascent-override: 113.8%;
  descent-override: 22.8%;
  line-gap-override: 0%;
}

:root {
  /* Bakır: koper op aubergine, kruisende banen. Gedurfd, consument, deelbaar. */
  --grond:      #241823;
  --vlak:       #33203A;
  --tekst:      #F5E9E0;   /* 14,32:1 op grond, 12,51:1 op vlak */
  --gedempt:    #BFA3AE;   /*  7,37:1 op grond,  6,44:1 op vlak */
  --goud:       #D9A93A;   /*  7,88:1 op grond,  6,88:1 op vlak */
  --koper:      #D97A3C;   /*  5,53:1 op grond,  4,83:1 op vlak */
  --knop-vlak:  #D97A3C;
  --knop-tekst: #241823;   /*  5,53:1 op de koperen knop, 7,88:1 op de gouden */
  --focus:      #D9A93A;
  --hairline:   rgba(245, 233, 224, .16);

  --kop: 'Antonio', 'Antonio terugval', 'Arial Narrow', system-ui, sans-serif;
  --lees: 'Barlow', 'Barlow terugval', system-ui, -apple-system, sans-serif;
  --lees-caps: 'Barlow', 'Barlow terugval caps', system-ui, -apple-system, sans-serif;

  --breed: 1180px;
  --rand: clamp(1.1rem, 4vw, 3rem);
  --schuin: clamp(16px, 3vw, 46px);
  --radius: 0;                       /* deze richting rondt niets af */
  --veer: cubic-bezier(.16, 1, .3, 1);
  --duur: .6s;
  --nav-ruimte: 22ch;

  /* de twee banen; de hoeken worden per breedte bijgesteld, zie deel 6 */
  --hoek-koper: -12deg;
  --hoek-goud: 10deg;
  --baan-h: clamp(88px, 9vw, 150px);
  --baan-slack: 160px;               /* overmaat links en rechts voor de schuifbeweging */
  --kruis-b: clamp(76px, 14vw, 180px);   /* het woordmerk op het kruispunt */
  --baan-marge: 200px;               /* zie deel 6, punt 3: de wig moet open zijn */
}

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

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

body {
  margin: 0;
  background: var(--grond);
  color: var(--tekst);
  font-family: var(--lees);
  font-size: clamp(1rem, .96rem + .22vw, 1.09rem);
  line-height: 1.62;
  font-synthesis-weight: none;
  overflow-wrap: break-word;
  hyphens: auto;
}

img, picture, svg, video { max-width: 100%; }
img { height: auto; display: block; }

/* ── 1. grondslag en typografie ──────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--kop);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: .94;
  margin: 0 0 .5em;
  hyphens: none;                     /* Antonio is smal genoeg; koppeltekens storen hier */
}
h1 { font-size: clamp(2.6rem, 8vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 5.2vw, 3.4rem); }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.6rem); }
h4 { font-size: 1.05rem; letter-spacing: .04em; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--goud); }
a:hover { color: var(--tekst); }

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

.vw {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 90;
  background: var(--goud);
  color: var(--knop-tekst);
  padding: .8rem 1.2rem;
  font-weight: 600;
  text-decoration: none;
}
.overslaan:focus { left: 0; }

.tag {
  font-family: var(--kop);
  font-size: clamp(.82rem, 1.4vw, .96rem);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--goud);
  margin: 0 0 .9rem;
  line-height: 1.3;
}
.lead {
  font-size: clamp(1.06rem, 1.5vw, 1.28rem);
  color: var(--gedempt);
  max-width: 62ch;
  margin-bottom: 1.6rem;
}
.klein { font-size: .86rem; color: var(--gedempt); }
.noot {
  font-size: .92rem;
  color: var(--gedempt);
  border-left: 3px solid var(--koper);
  padding-left: 1rem;
  max-width: 62ch;
  margin-bottom: 2rem;
}
.omhulsel {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* ── 2. blad: het vlak met de schuine boven- en onderrand ─────────────────
   Geen enkele sectiegrens in deze richting is horizontaal. De schuinte zit op
   een apart, absoluut geplaatst kind (.blad-grond) met clip-path, en NIET op
   het vlak dat door de waarnemer wordt bekeken. Een element met clip-path
   heeft voor een IntersectionObserver geen oppervlak meer; die vuurt dan nooit
   en de inhoud blijft eeuwig onzichtbaar.

   Er wordt nergens een negatieve z-index gebruikt. Een element op negatieve
   diepte achter een ondoorzichtig vlak is onzichtbaar terwijl elke meting zegt
   dat het goed staat. */

.blad {
  position: relative;
  padding-block: clamp(3.6rem, 7vw, 6.5rem);
}
.blad-grond {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.blad-inhoud {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.bladnr {
  position: absolute;
  z-index: 1;
  top: clamp(.9rem, 2vw, 1.6rem);
  left: var(--rand);
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1;
  color: var(--koper);
  opacity: .34;
  letter-spacing: -.02em;
}
@media (min-width: 1360px) {
  /* Op breed staat het nummer naast het blok in plaats van erboven. */
  .bladnr { left: max(var(--rand), calc(50vw - var(--breed) / 2 - 3.6rem)); top: clamp(3.6rem, 7vw, 6.5rem); }
}

section.vlak .blad-grond {
  background: var(--vlak);
  clip-path: polygon(0 var(--schuin), 100% 0, 100% calc(100% - var(--schuin)), 0 100%);
}

/* De gouden baan uit de hero komt verderop terug als accentlijn: smaller, maar
   herkenbaar dezelfde schuinte. Hij loopt langs elk blok dat naar de zakelijke
   kant wijst. */
[data-goudlijn] .blad-grond::before {
  content: "";
  position: absolute;
  left: -6%;
  width: 112%;
  top: calc(62% - 1px);
  height: 2px;
  background: var(--goud);
  opacity: .42;
  transform: rotate(var(--hoek-goud));
}

/* ── 3. kopbalk ──────────────────────────────────────────────────────────── */

.kopbalk-houder {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--grond);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--veer), background-color .3s var(--veer);
}
.kopbalk-houder.klein {
  border-bottom-color: var(--hairline);
  background: rgba(36, 24, 35, .94);
  backdrop-filter: blur(10px);
}
.kopbalk {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding: .7rem var(--rand);
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 2vw, 1.6rem);
}
.merk { display: block; flex: none; line-height: 0; }
/* Er bestaat geen SVG van het logo en de bron is 480 x 203. Breder dan 240 CSS-
   pixels wordt het zichtbaar zacht. Dat is een harde grens. */
.merk img { width: clamp(124px, 17vw, 190px); height: auto; }

.hoofdnav { margin-left: auto; }
.hoofdnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(.4rem, 1.6vw, 1.4rem);
}
.hoofdnav a {
  display: block;
  padding: .6rem .2rem;
  min-width: 0;
  font-family: var(--kop);
  font-size: 1.02rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tekst);
  border-bottom: 2px solid transparent;
}
.hoofdnav a:hover, .hoofdnav a[aria-current="page"] {
  color: var(--goud);
  border-bottom-color: var(--goud);
}

.zakelijk-knop {
  flex: none;
  display: inline-block;
  min-width: 0;
  max-width: var(--nav-ruimte);
  padding: .58rem 1.05rem;
  background: var(--koper);
  color: var(--knop-tekst);       /* 5,53:1 */
  font-family: var(--kop);
  font-size: 1.02rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--koper);
}
.zakelijk-knop:hover { background: var(--goud); border-color: var(--goud); color: var(--knop-tekst); }
.hoofdnav .menu-onder { display: none; }

.talen ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
}
.talen a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  font-family: var(--kop);
  font-size: .92rem;
  letter-spacing: .08em;
  text-decoration: none;
  color: var(--gedempt);          /* 7,37:1 */
  border: 1px solid transparent;
}
.talen a:hover { color: var(--tekst); border-color: var(--hairline); }
.talen a[aria-current="true"] {
  background: var(--koper);
  color: var(--knop-tekst);       /* 5,53:1 */
}

.menuknop {
  display: none;
  min-width: 46px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--tekst);
  cursor: pointer;
}
.ico { width: 22px; height: 22px; flex: none; }
.ico-kruis { display: none; }

@media (max-width: 1079px) {
  .kopbalk > .zakelijk-knop { display: none; }
  .menuknop { display: inline-flex; }
  .hoofdnav {
    display: none;
    order: 9;
    width: 100%;
    margin-left: 0;
    padding-bottom: .6rem;
  }
  .kopbalk { flex-wrap: wrap; }
  .hoofdnav ul { flex-direction: column; gap: 0; }
  .hoofdnav a {
    padding: .85rem 0;
    border-bottom: 1px solid var(--hairline);
    font-size: 1.18rem;
  }
  .hoofdnav .menu-onder { display: block; padding-top: .9rem; }
  .talen { margin-left: auto; }
  /* Het menu staat dicht in de server-HTML. Bij demo 4 stond het bij een tweede
     bezoek open in de HTML zelf en gaf dat CLS 0,34. Hier kan dat niet: de stand
     staat in de stylesheet en JavaScript zet alleen een klasse. */
  .menu-open .hoofdnav { display: block; }
  .menu-open .ico-menu { display: none; }
  .menu-open .ico-kruis { display: block; }
}
@media (min-width: 1080px) {
  .hoofdnav { display: block !important; }
}
@media (max-width: 559px) {
  /* Alles op één rij houden. Sloeg de balk om, dan stond de menuknop op een
     eigen regel en werd de kopbalk twee keer zo hoog. */
  .kopbalk { gap: .45rem; padding-inline: .9rem; }
  .merk img { width: 112px; }
  .talen a { min-width: 28px; min-height: 44px; font-size: .82rem; letter-spacing: .04em; }
  .menuknop { min-width: 44px; min-height: 44px; }
}

/* ── 4. melding ──────────────────────────────────────────────────────────
   Bewust geen zwevende laag. In demo 1 lag zo'n balk precies over de twee
   heroknoppen en waren die niet meer aan te klikken. Deze melding staat in de
   gewone stroom, direct onder de kopbalk, en kan per definitie niets afdekken.
   Wegklikken is een handeling van de bezoeker, dus de verschuiving die daarna
   optreedt telt niet mee in CLS. */

.melding { background: var(--vlak); border-bottom: 1px solid var(--hairline); }
.melding-weg .melding { display: none; }
.melding-binnen {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding: .6rem var(--rand);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .84rem;
  color: var(--gedempt);          /* 6,44:1 op vlak */
}
.melding p { margin: 0; }
.melding button {
  margin-left: auto;
  flex: none;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--tekst);
  cursor: pointer;
}
.melding .ico { width: 18px; height: 18px; }

/* ── 5. hero ─────────────────────────────────────────────────────────────
   Geen foto. Deze richting is typografisch: de kop is het beeld en de twee
   banen zijn de twee deuren. Er staat dus ook nergens tekst op een foto, en de
   leesbaarheidsvraag uit demo 3 speelt hier niet. */

.hero { padding-block: clamp(1.3rem, 3.2vw, 2.6rem) 0; }
.hero-tekst {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.hero h1 {
  font-size: clamp(2.9rem, 11.2vw, 6.9rem);
  line-height: .86;
  letter-spacing: -.012em;
  margin: 0 0 1rem;
  transform-style: preserve-3d;
  will-change: transform;
}
.hero h1 .rg { display: block; }
.hero h1 .rg2 { color: var(--koper); }   /* 5,53:1, en dit is grote tekst */
.hero h1 .rg3 { color: var(--goud); }    /* 7,88:1 */
.hero-onder {
  font-size: clamp(1.06rem, 1.6vw, 1.34rem);
  color: var(--gedempt);
  max-width: 54ch;
  margin-bottom: 1.25rem;
}
.hero-feiten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 5vw, 3.4rem);
}
.hero-feiten li { display: flex; flex-direction: column; }
.hero-feiten b {
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--tekst);
  font-variant-numeric: tabular-nums;
}
.hero-feiten span {
  font-family: var(--lees-caps);
  font-size: .8rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gedempt);
  margin-top: .3rem;
}

/* ── 6. de twee banen ────────────────────────────────────────────────────
   De signatuur van deze richting en tegelijk de doelgroepensplitsing. De
   koperen baan draagt de consument, de gouden de inkoper. Ze kruisen op het
   punt waar het woordmerk staat.

   Drie dingen die hier bewust zijn vastgelegd:

   1. .baanzone heeft een vaste hoogte en overflow:hidden. Een rotate() op een
      vlak met een achtergrond veroorzaakt anders horizontale scroll, en dat is
      op 375 px de eerste fout die je maakt.
   2. De banen steken links en rechts --baan-slack buiten de zone. De
      schuifbeweging bij het scrollen is op de helft daarvan begrensd, dus er
      komt nooit een uiteinde in beeld.
   3. De wig. Waar de twee banen elkaar overlappen ligt de gouden over de
      koperen heen, en daar is het koperen label dus onleesbaar. De vrije
      ruimte onder de gouden baan groeit met de afstand tot het midden:

        vrije hoogte(dx) = |dx| x (tan a + tan b)

      Het label moet dus buiten |dx| = labelhoogte / (tan a + tan b) blijven.
      Dat is de reden dat de hoeken uit tokens-10demos.md (-7 en 5 graden)
      hier niet zijn overgenomen: bij die hoeken is tan a + tan b = 0,21, en
      dan moet een label van 60 pixels hoog 285 pixels van het midden blijven.
      Op 1180 pixels breed past het Duitse "Packungsweise bestellen" daar niet
      meer. De hoeken zijn daarom per breedte opgevoerd tot de wig snel genoeg
      open gaat, en de labelbreedte is met --baan-marge afgetopt. Nagerekend
      met _baanmeet.py: tien breedtes maal vijf talen, elk label op 36 punten
      afgetast met elementFromPoint. Zie README, kopje Afwijkingen.

   4. Onder 640 px vervalt de plaat. Het woordmerk staat daar al veertig pixels
      hoger in de meelopende kopbalk, en een plaat op het kruispunt zou op die
      breedte in vijf talen door een label heen lopen. De banen kruisen daar
      kaal, wat nog steeds een kruis is. */

.baanzone {
  position: relative;
  overflow: hidden;
  margin-top: clamp(1.3rem, 2.8vw, 2.2rem);
  height: calc(var(--baan-h) * 1.05 + 26vw);
  max-height: min(520px, 48vh + 60px);
  min-height: 300px;
}
.baanwolk {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 50% 50%, rgba(217, 122, 60, .16), transparent 70%);
}
.baan {
  position: absolute;
  left: calc(var(--baan-slack) * -1);
  right: calc(var(--baan-slack) * -1);
  top: 50%;
  height: var(--baan-h);
  margin-top: calc(var(--baan-h) / -2);
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  padding: 0 calc(var(--baan-slack) + var(--rand));
  transform-origin: 50% 50%;
  will-change: transform;
}
.baan--koper {
  background: var(--koper);
  color: var(--knop-tekst);          /* 5,53:1 */
  transform: rotate(var(--hoek-koper));
  z-index: 1;
  justify-content: flex-start;
}
.baan--goud {
  background: var(--goud);
  color: var(--knop-tekst);          /* 7,88:1 */
  transform: rotate(var(--hoek-goud));
  z-index: 2;
  justify-content: flex-end;
}
.baan-binnen {
  display: block;
  max-width: calc(50% - var(--kruis-b) / 2 - var(--baan-marge));
  padding-bottom: clamp(.5rem, 1.4vw, 1.1rem);
}
.baan--goud .baan-binnen { text-align: right; }
.baan-label {
  display: block;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(.95rem, 2.6vw, 2.3rem);
  line-height: .96;
  text-transform: uppercase;
  letter-spacing: .01em;
  hyphens: none;                     /* "ZAKE-LIJK" is geen woordafbreking */
}
.baan-onder {
  font-family: var(--lees-caps);
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .25rem;
  font-size: clamp(.62rem, .95vw, .86rem);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.2;
  hyphens: none;
}
.baan--goud .baan-onder { justify-content: flex-end; }
.baan-onder .ico { width: 1.05em; height: 1.05em; }
.baan:hover .baan-onder .ico { transform: translateX(4px); }
.baan-onder .ico { transition: transform .3s var(--veer); }
.baan:focus-visible { outline-offset: -6px; }

/* De plaat op het kruispunt. Hij vangt geen klikken: de twee banen eronder
   moeten over hun hele lengte aanklikbaar blijven. */
.kruis {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: clamp(.6rem, 1.4vw, 1.1rem) clamp(.7rem, 1.8vw, 1.4rem);
  background: var(--grond);
  border: 1px solid var(--hairline);
  pointer-events: none;
  line-height: 0;
}
.kruis img { width: var(--kruis-b); height: auto; }

@media (max-width: 1099px) {
  :root { --hoek-koper: -15deg; --hoek-goud: 13deg; --baan-marge: 150px; }
}
@media (max-width: 899px) {
  :root { --hoek-koper: -18deg; --hoek-goud: 15deg;
          --baan-h: clamp(84px, 12vw, 116px); --baan-marge: 108px; }
}
@media (max-width: 639px) {
  /* De plaat vervalt. Zie de toelichting hierboven, punt 4. */
  :root { --kruis-b: 0px; --baan-marge: 84px; }
  .kruis { display: none; }
}
/* Op breed staan de kerncijfers naast de onderregel in plaats van eronder.
   Dat scheelt ruim zestig pixels hoogte, en die zijn nodig om het kruispunt van
   de twee banen boven de vouw te houden op een scherm van 900 pixels hoog. */
@media (min-width: 1100px) {
  .hero-tekst {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }
  .hero-tekst .tag, .hero-tekst h1 { grid-column: 1 / -1; }
  .hero-onder { grid-column: 1; margin-bottom: 0; }
  .hero-feiten { grid-column: 2; margin-bottom: .2rem; }
}

@media (max-width: 559px) {
  :root { --hoek-koper: -24deg; --hoek-goud: 20deg;
          --baan-h: 78px; --baan-slack: 90px; --baan-marge: 64px; }
  .baanzone { height: 306px; min-height: 306px; max-height: none; }
}
@media (max-width: 419px) {
  :root { --baan-marge: 58px; }
}
@media (max-width: 359px) {
  /* Op 320 px is er zo weinig ruimte dat het Duitse en het Franse label over
     twee regels gaan. De wig moet daar dus nog sneller open, anders schuift de
     gouden baan over de onderste regel van het koperen label. */
  :root { --hoek-koper: -30deg; --hoek-goud: 26deg; --baan-h: 72px; }
  .baanzone { height: 318px; min-height: 318px; max-height: none; }
}

/* ── 7. knoppen en productlijst ──────────────────────────────────────────── */

.knoppen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.knop {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 48px;
  padding: .7rem 1.35rem;
  font-family: var(--kop);
  font-size: 1.06rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--koper);
  cursor: pointer;
  transition: background-color .3s var(--veer), color .3s var(--veer), border-color .3s var(--veer);
}
.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: var(--goud); border-color: var(--goud); color: var(--knop-tekst); }
.knop-lijn { background: transparent; color: var(--tekst); border-color: var(--hairline); }
.knop-lijn:hover { border-color: var(--goud); color: var(--goud); }

.kop-groep { max-width: 26ch; margin-bottom: 1.2rem; }
.kop-groep .lead { max-width: 62ch; }
@media (min-width: 900px) { .kop-groep { max-width: none; } }

.lijst { list-style: none; margin: 0; padding: 0; }
.regel { border-top: 1px solid var(--hairline); }
.lijst li:last-child .regel { border-bottom: 1px solid var(--hairline); }
.regel summary {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2.2vw, 1.6rem);
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
}
.regel summary::-webkit-details-marker { display: none; }
.regel-vel { flex: none; line-height: 0; }
.velbeeld img {
  width: clamp(52px, 9vw, 88px);
  height: auto;
  transition: transform .45s var(--veer);
}
.regel[open] .velbeeld img, .regel summary:hover .velbeeld img { transform: rotate(-9deg) scale(1.06); }
.regel-mid { flex: 1 1 auto; min-width: 0; }
.regel-naam {
  display: block;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.4vw, 2.2rem);
  text-transform: uppercase;
  line-height: 1;
}
.regel summary:hover .regel-naam { color: var(--goud); }
.regel-kort {
  display: block;
  color: var(--gedempt);
  font-size: .92rem;
  margin-top: .3rem;
  max-width: 46ch;
}
.regel-rechts { flex: none; display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.3rem); }
.regel-prijs {
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  color: var(--goud);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.regel-per {
  font-family: var(--lees-caps);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gedempt);
}
.plus {
  position: relative;
  width: 34px; height: 34px;
  border: 1px solid var(--hairline);
  flex: none;
}
.plus::before, .plus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--goud);
  transition: transform .35s var(--veer);
}
.plus::before { width: 13px; height: 2px; transform: translate(-50%, -50%); }
.plus::after { width: 2px; height: 13px; transform: translate(-50%, -50%); }
.regel[open] .plus::after, .recept-regel[open] .plus::after { transform: translate(-50%, -50%) scaleY(0); }
.regel-uit, .recept-uit {
  display: grid;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  padding: 0 0 1.8rem;
  border-left: 2px solid var(--koper);
  padding-left: clamp(1rem, 3vw, 2rem);
}
@media (min-width: 760px) { .regel-uit { grid-template-columns: 1fr 1fr; } }
.regel-uit h3, .recept-uit h4 { color: var(--goud); }
.regel-uit p { color: var(--gedempt); }
.mini { display: grid; gap: .4rem; margin: 1rem 0 0; }
.mini > div { display: flex; gap: .6rem; border-bottom: 1px solid var(--hairline); padding-bottom: .35rem; }
.mini dt { color: var(--gedempt); font-size: .86rem; margin: 0; }
.mini dd { margin: 0 0 0 auto; font-weight: 600; font-size: .86rem; }

@media (max-width: 559px) {
  .regel summary { flex-wrap: wrap; }
  .regel-mid { flex: 1 1 60%; }
  .regel-rechts { margin-left: auto; }
}

/* ── 8. driehoeken: schuin gesneden foto's ───────────────────────────────
   De uitsnede zit op een binnenste element (.schuin-vlak). De figure zelf
   blijft rechthoekig en houdt zijn ruimte, dus er verspringt niets en de
   waarnemer ziet nog een oppervlak. Er staat nergens tekst op een foto: het
   bijschrift staat eronder, op de aubergine grond, waar het 14,32:1 haalt. */

.driehoeken {
  display: grid;
  gap: clamp(1rem, 2.4vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .driehoeken { grid-template-columns: repeat(3, 1fr); } }

.schuin { margin: 0; }
.schuin-raam {
  display: block;
  overflow: hidden;
  background: var(--vlak);
}
.schuin-vlak {
  display: block;
  clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
}
.schuin--2 .schuin-vlak { clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 92%); }
.schuin img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s var(--veer);
}
.schuin--hoog img { aspect-ratio: 3 / 4; }
.schuin:hover img { transform: scale(1.045); }
.schuin figcaption {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding-top: .8rem;
  font-size: .86rem;
  color: var(--gedempt);
}
.schuin figcaption b {
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tekst);
}

/* ── 9. duo, punten, cijfers, klanten ────────────────────────────────────── */

.duo { display: grid; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
@media (min-width: 860px) {
  .duo { grid-template-columns: 1.05fr .95fr; }
  .duo--links .duo-beeld { order: -1; }
}
.duo-tekst p { color: var(--gedempt); max-width: 58ch; }

.cijfers-lijst, .punten, .klantlijst, .geglijst, .og-lijst, .receptlijst {
  list-style: none; margin: 0; padding: 0;
}
.cijfers-lijst { display: grid; gap: clamp(1rem, 2.4vw, 2rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .cijfers-lijst { grid-template-columns: repeat(4, 1fr); } }
.cijfer { border-top: 2px solid var(--koper); padding-top: .9rem; }
.cijfer-getal {
  display: block;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
  line-height: 1;
  color: var(--goud);
  font-variant-numeric: tabular-nums;
}
.cijfer-uitleg { display: block; color: var(--gedempt); font-size: .9rem; margin-top: .45rem; }

.punten { display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); }
@media (min-width: 760px) { .punten { grid-template-columns: repeat(2, 1fr); } }
.punt { border-top: 1px solid var(--hairline); padding-top: 1rem; }
.punt-nr {
  display: block;
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .1em;
  color: var(--koper);
  margin-bottom: .45rem;
}
.punt p { color: var(--gedempt); margin: 0; }

.klantlijst { display: grid; gap: .1rem; }
.klant, .klant-rest { border-bottom: 1px solid var(--hairline); padding: .85rem 0; }
.klant { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; }
.klant-naam { font-family: var(--kop); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; }
.klant-soort { color: var(--gedempt); font-size: .88rem; margin-left: auto; }
.klant-rest { color: var(--gedempt); font-size: .9rem; border-bottom: 0; }

.slot .blad-inhoud { max-width: 900px; }
.slot-kader {
  border: 2px solid var(--koper);
  padding: clamp(1.6rem, 4vw, 3rem);
}
.slot-kader h2 { max-width: 18ch; }
.slot-kader p { color: var(--gedempt); max-width: 56ch; }

.kader { display: grid; gap: clamp(1.4rem, 3.4vw, 3rem); align-items: center; }
@media (min-width: 860px) { .kader { grid-template-columns: .8fr 1.2fr; } }
.kader-beeld { margin: 0; }
.kader-beeld .schuin-raam { display: block; overflow: hidden; background: var(--grond); }
.kader-beeld .schuin-vlak { display: block; clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%); }
.kader-beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kader-beeld figcaption { padding-top: .7rem; font-size: .84rem; color: var(--gedempt); }
.kader-tekst p { color: var(--gedempt); max-width: 60ch; }

.eerlijk-tekst { max-width: 66ch; color: var(--gedempt); }
.eerlijk-tekst p { color: var(--gedempt); }

/* ── 10. opgevraagd, spec, gegevens ──────────────────────────────────────── */

.og-lijst { display: grid; gap: .1rem; }
.og {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .3rem .8rem;
  align-items: start;
  padding: .85rem 0;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 720px) { .og { grid-template-columns: 22px minmax(12rem, 18rem) 1fr; } }
.og .ico { width: 20px; height: 20px; margin-top: .18rem; }
.og--vast .ico { color: var(--goud); }
.og--open .ico { color: var(--koper); }
.og-veld { font-weight: 600; }
.og-waarde { color: var(--gedempt); grid-column: 2 / -1; }
@media (min-width: 720px) { .og-waarde { grid-column: auto; } }
.open-punt {
  font-family: var(--lees-caps);
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--koper);
  border: 1px solid var(--koper);
  padding: .1rem .5rem;
}
.open-noot { display: block; font-size: .85rem; margin-top: .3rem; }

.spec { margin: 0; display: grid; gap: .1rem; }
.spec-rij {
  display: grid;
  gap: .2rem .9rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 640px) { .spec-rij { grid-template-columns: minmax(11rem, 16rem) 1fr; } }
.spec dt { font-weight: 600; margin: 0; }
.spec dd { margin: 0; color: var(--gedempt); }
.spec-uitleg { margin-top: 1.2rem; font-size: .88rem; color: var(--gedempt); max-width: 66ch; }
.prijs-regel {
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 2.8rem);
  color: var(--goud);
  line-height: 1;
  margin-bottom: 1rem;
}
.prijs-regel span {
  font-family: var(--lees-caps);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gedempt);
}

.geglijst { display: grid; gap: .1rem; }
.geg { border-bottom: 1px solid var(--hairline); }
.geg a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  text-decoration: none;
  color: var(--tekst);
  min-height: 48px;
}
.geg a:hover { color: var(--goud); }
.geg .ico { width: 22px; height: 22px; color: var(--koper); }
.geg-kop { display: block; font-weight: 600; }
.geg-onder { display: block; font-size: .84rem; color: var(--gedempt); }
.geg a > .ico:last-child { margin-left: auto; }

.kruimels { padding-top: 1rem; }
.kruimels ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem .6rem;
  font-size: .84rem; color: var(--gedempt);
}
.kruimels li + li::before { content: "/"; margin-right: .6rem; color: var(--koper); }
.kruimels a { color: var(--gedempt); }
.kruimels a:hover { color: var(--goud); }

.prodkop { display: grid; gap: clamp(1.4rem, 3.4vw, 3rem); align-items: center; }
@media (min-width: 800px) { .prodkop { grid-template-columns: 1.25fr .75fr; } }
.velbeeld--groot img { width: min(320px, 74vw); height: auto; margin-inline: auto; }

/* ── 11. formulier ───────────────────────────────────────────────────────── */

.demo-noot {
  border-left: 3px solid var(--koper);
  padding-left: 1rem;
  font-size: .9rem;
  color: var(--gedempt);
  max-width: 62ch;
  margin-bottom: 1.8rem;
}
.formulier { display: grid; gap: 1.1rem; max-width: 46rem; }
@media (min-width: 720px) {
  .formulier { grid-template-columns: 1fr 1fr; }
  .veld--akkoord, .veld--knop, .veld--keuze { grid-column: 1 / -1; }
  .formulier .veld:has(textarea) { grid-column: 1 / -1; }
}
.veld { display: grid; gap: .35rem; }
.veld label, .veld legend {
  font-family: var(--lees-caps);
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gedempt);
}
.hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  font: inherit;
  color: var(--tekst);
  background: var(--vlak);
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: .75rem .9rem;
  min-height: 48px;
  width: 100%;
}
textarea { min-height: 8rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--goud); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--koper);
  border-width: 2px;
}
.fout { color: var(--koper); font-size: .84rem; margin: 0; }
fieldset { border: 1px solid var(--hairline); padding: .9rem 1rem; margin: 0; }
.radio, .akkoord { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--tekst); font-weight: 400; }
.radio { min-height: 44px; align-items: center; }
.radio input, .akkoord input { width: 20px; height: 20px; accent-color: var(--koper); flex: none; margin-top: .18rem; }
.veld--knop { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.status { margin: 0; font-size: .9rem; color: var(--gedempt); }
.status[data-toestand="demo"] { color: var(--goud); }

/* ── 12. recepten ────────────────────────────────────────────────────────── */

.receptlijst { display: grid; }
.recept-regel { border-top: 1px solid var(--hairline); }
.recept:last-child .recept-regel { border-bottom: 1px solid var(--hairline); }
.recept-regel summary {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 2vw, 1.4rem);
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
}
.recept-regel summary::-webkit-details-marker { display: none; }
.recept-regel h3 { margin: 0; flex: 1 1 auto; }
.recept-regel summary:hover h3 { color: var(--goud); }
.recept-meta { color: var(--gedempt); font-size: .84rem; flex: none; }
.recept-uit { padding-bottom: 1.8rem; }
@media (min-width: 800px) { .recept-uit { grid-template-columns: 1fr 1fr; } .recept-kort { grid-column: 1 / -1; } }
.recept-kort { color: var(--gedempt); margin: 0; }
.recept-ing, .recept-stap { margin: .6rem 0 0; padding-left: 1.2rem; color: var(--gedempt); }
.recept-ing { list-style: none; padding-left: 0; }
.recept-ing li { border-bottom: 1px solid var(--hairline); padding: .35rem 0; }
.recept-stap li { margin-bottom: .5rem; }

@media (max-width: 559px) {
  .recept-regel summary { flex-wrap: wrap; }
  .recept-regel h3 { flex: 1 1 100%; order: 2; }
  .recept-meta { order: 3; }
  .plus { order: 4; margin-left: auto; }
}

/* ── 13. voettekst ───────────────────────────────────────────────────────── */

.voet { position: relative; padding-top: clamp(3rem, 6vw, 5rem); }
.voet-rand {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(46px, 6vw, 96px);
  overflow: hidden;
}
/* Een vlakke schuinte, geen -12 graden: bij die hoek staat de lijn over 1600
   pixels ruim 330 pixels hoog en zie je er nog maar een stukje van in een strook
   van 96. Hier loopt hij van rand tot rand door. */
.voet-rand::before {
  content: "";
  position: absolute;
  left: -6%; width: 112%; top: calc(50% - 1px); height: 3px;
  background: linear-gradient(90deg, var(--koper), var(--goud));
  transform: rotate(-1.6deg);
  transform-origin: 50% 50%;
}
.voet-binnen {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding: 0 var(--rand) 2.4rem;
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
}
@media (min-width: 780px) { .voet-binnen { grid-template-columns: 1.2fr .8fr .7fr 1.1fr; } }
.voet-merk img { width: clamp(150px, 22vw, 220px); height: auto; }
.spreuk { color: var(--goud); font-family: var(--kop); font-size: 1.2rem; margin: .9rem 0; letter-spacing: .04em; }
.voet-sociaal { display: flex; gap: .4rem; }
.voet-sociaal a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  color: var(--tekst);
  border: 1px solid var(--hairline);
}
.voet-sociaal a:hover { color: var(--knop-tekst); background: var(--goud); border-color: var(--goud); }
.voet-kolom h2 {
  font-family: var(--lees-caps);
  font-size: .84rem;
  letter-spacing: .18em;
  color: var(--goud);
  margin-bottom: .9rem;
}
.voet-kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.voet-kolom a { color: var(--gedempt); text-decoration: none; display: inline-block; padding: .32rem 0; }
.voet-kolom a:hover, .voet-kolom a[aria-current="true"] { color: var(--goud); }
.voet-adres p { margin: 0 0 .3rem; }
.voet-adres a {
  display: flex; align-items: center; gap: .55rem;
  color: var(--gedempt); text-decoration: none; padding: .4rem 0; min-height: 44px;
  font-size: .92rem;
}
.voet-adres a:hover { color: var(--goud); }
.voet-adres .ico { width: 18px; height: 18px; color: var(--koper); flex: none; }
.rustknop {
  margin-top: .8rem;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem .9rem;
  background: transparent; border: 1px solid var(--hairline);
  color: var(--gedempt); font: inherit; font-size: .86rem; cursor: pointer;
}
.rustknop:hover { color: var(--goud); border-color: var(--goud); }
.rustknop .ico { width: 17px; height: 17px; }
.voet-regel {
  border-top: 1px solid var(--hairline);
  margin: 0;
  padding: 1.2rem var(--rand);
  text-align: center;
  font-size: .8rem;
  color: var(--gedempt);
}

/* ── 14. taalscherm ──────────────────────────────────────────────────────
   Vijf grote woorden onder elkaar, bij het eerste bezoek, alleen op de home.
   Het staat NIET in de server-HTML: bakir.js bouwt het pas na DOMContentLoaded
   en alleen bij een leeg localStorage. Googlebot ziet het dus nooit en er kan
   bij een tweede bezoek niets verspringen. Escape sluit het, de tabtoets blijft
   binnen het venster en de knop onderaan sluit het ook. */

.taalscherm {
  position: fixed;
  inset: 0;
  z-index: 80;
  /* x dicht: de twee schuine banden mogen niets buiten beeld duwen.
     y open: op een laag liggend scherm moet de lijst te scrollen zijn. */
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--grond);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rand);
}
/* De twee schuine banden zitten in een eigen laag met overflow:hidden. Zouden
   ze rechtstreeks op .taalscherm staan, dan telt hun gedraaide hoogte mee in de
   scrollhoogte van dat venster en kun je onder de knop nog een eind doorrollen
   over lege ruimte. */
.taalscherm-banen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.taalscherm-banen::before, .taalscherm-banen::after {
  content: "";
  position: absolute;
  left: -8%; width: 116%; height: clamp(10px, 1.8vw, 18px);
}
.taalscherm-banen::before { top: 12%; background: var(--koper); transform: rotate(var(--hoek-koper)); }
.taalscherm-banen::after { bottom: 12%; background: var(--goud); transform: rotate(var(--hoek-goud)); }
.taalscherm-binnen {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  margin: auto;                      /* niet align-items alleen: anders is de bovenkant
                                        onbereikbaar zodra de lijst hoger is dan het scherm */
}
.taalscherm h2 {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  color: var(--goud);
  margin-bottom: .2rem;
}
.taalscherm p { color: var(--gedempt); font-size: .95rem; margin-bottom: 1.2rem; }
.taalscherm ul { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.taalscherm li + li { border-top: 1px solid var(--hairline); }
.taalscherm ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(.35rem, 1.1vw, .7rem) 0;
  min-height: 52px;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(1.75rem, 7vw, 2.9rem);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tekst);
}
.taalscherm ul a:hover, .taalscherm ul a:focus-visible { color: var(--koper); }
.taalscherm ul a span { font-size: .9rem; letter-spacing: .16em; color: var(--gedempt); font-family: var(--lees); }
.taalscherm-sluit {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: .6rem 1.1rem;
  background: transparent; border: 1px solid var(--hairline);
  color: var(--gedempt); font: inherit; font-size: .9rem; cursor: pointer;
}
.taalscherm-sluit:hover { color: var(--goud); border-color: var(--goud); }

/* ── 15. onthulling, beperkte beweging, afdrukken ────────────────────────
   data-rv wordt door JavaScript gezet, nooit in de HTML. Valt het script weg,
   dan staat er niets verborgen. */

[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);
}

@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] { opacity: 1 !important; transform: none !important; }
}

/* De bezoeker kan beweging ook zelf uitzetten met de knop in de voettekst. */
.rm [data-rv] { opacity: 1 !important; transform: none !important; }
.rm * { transition-duration: .01ms !important; animation-duration: .01ms !important; }

@media print {
  .kopbalk-houder, .melding, .voet-sociaal, .rustknop, .overslaan, .baanzone, .taalscherm { display: none; }
  body { background: #fff; color: #000; }
  .blad-grond { display: none; }
  a { color: #000; }
}