/* ══════════════════════════════════════════════════════════════════════════
   Dun — Ensar Yufka. Richting 4 uit design/tokens-10demos.md.

   Het idee in één regel: alles is één haarlijn tot je iets aanwijst.
   Dikte is de beloning, niet de basis.

   Wat dat betekent voor deze stylesheet:
   - geen kaart, geen vlak en geen schaduw in rust; scheiding is een lijn van 1px
   - één kolom, links uitgelijnd, en de witruimte doet het werk
   - alleen transform en opacity bewegen, dus CLS blijft nul
   - elke lijn die iets betekent haalt 3:1, elke lijn die alleen versiert niet.
     Dat onderscheid staat per regel in het commentaar en wordt nagerekend
     door _contrast.py

   Geen frameworks, geen CDN, geen externe bibliotheek.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. lettertypes ────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrumentserif.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  /* latin en latin-ext samen in één bestand: ı zit in latin, ğ İ ş in latin-ext */
  unicode-range: U+0000-024F, U+2000-206F, U+20A0-20BF, U+2122;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/hankengrotesk.woff2') format('woff2-variations');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+2000-206F, U+20A0-20BF, U+2122;
}

/* ── 2. tokens ─────────────────────────────────────────────────────────── */

:root {
  /* Dun: haarlijnen en witruimte. Dikte is de beloning, niet de basis. */
  --grond:      #F7F5F1;
  --vlak:       #FFFFFF;
  --tekst:      #2A2724;   /* 13,64:1 op grond, 14,85:1 op wit */
  --gedempt:    #6E685F;   /*  5,06:1 op grond,  5,51:1 op wit */
  --goud:       #C9A227;   /*  2,22:1 — uitsluitend decoratief, nooit tekst */
  --goud-lijn:  #A48420;   /*  3,27:1 op grond,  3,56:1 op wit */
  --goud-tekst: #816819;   /*  4,91:1 op grond,  5,35:1 op wit */
  --knop-vlak:  #2A2724;
  --knop-tekst: #F7F5F1;   /* 13,64:1 op de knop */
  --focus:      #816819;   /*  4,91:1 op grond */
  --hairline:   #E3DFD7;   /*  1,22:1 — decoratief, draagt nooit betekenis */

  --kop: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --tekst-font: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kop-gewicht: 400;      /* er is maar één gewicht, en dat is genoeg */

  --radius: 0;
  --lijn: 1px;
  --kolom: 62ch;
  --lucht: clamp(4rem, 11vw, 9rem);
  --lucht-half: clamp(2rem, 5.5vw, 4.5rem);
  --strook: 96px;          /* rusthoogte van een foto */
  --strook-vak: 240px;     /* volle hoogte; deze ruimte staat altijd gereserveerd */
  --veer: cubic-bezier(.16, 1, .3, 1);
  --duur: .5s;
  --perspectief: 900px;
  --naar-voren: 18px;
  --nav-ruimte: 22ch;      /* gemeten: "Toptan sipariş verin" is 20 tekens */

  --breed: 1240px;
  --rand: clamp(1.25rem, 5vw, 4rem);
  --gleuf: clamp(0px, 5vw, 4.5rem);   /* de linkermarge waar het volgnummer staat */
  --balk: 68px;                        /* hoogte van de plakkende kopbalk */
}

/* ── 3. reset en basis ─────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* ankerlinks komen onder de plakkende kopbalk uit */
  scroll-padding-top: calc(var(--balk) + 1.5rem);
}

body {
  margin: 0;
  background: var(--grond);
  color: var(--tekst);
  font-family: var(--tekst-font);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;   /* nooit horizontaal scrollen, ook niet in het Frans */
}

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

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

:where(h1, h2, h3, h4) {
  font-family: var(--kop);
  font-weight: var(--kop-gewicht);
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
  hyphens: manual;          /* koppen breken nooit af: "Elke och-tend" is erger dan een korte regel */
  overflow-wrap: break-word;
}

/* Afbreken hoort bij lopende tekst. Werkt alleen met een kloppend lang-attribuut,
   en dat staat op <html>. Toets: "conserveringsmiddelen" (21) en
   "Konservierungsstoffe" (20) moeten in een kolom van 24 tekens passen. */
p, .lead, .regel-kort, li {
  hyphens: auto;
  /* alleen lange woorden breken. Zonder deze grens breekt Chrome "zon-der"
     en dat is lelijker dan een korte regel. 21 tekens moet wel kunnen. */
  hyphenate-limit-chars: 9 4 4;
}
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Eén focusring voor de hele site, en hij is nooit onzichtbaar.
   #816819 op de grond haalt 4,91:1, ruim boven de 3:1 voor UI-onderdelen. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: #E8DFC2; color: var(--tekst); }

.overslaan {
  position: absolute;
  left: var(--rand);
  top: 0;
  z-index: 90;
  transform: translateY(-140%);
  background: var(--tekst);
  color: var(--knop-tekst);
  padding: .7rem 1.1rem;
  text-decoration: none;
  transition: transform .2s var(--veer);
}
.overslaan:focus { transform: translateY(.5rem); }

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

/* ── 4. het ritme: één kolom, links uitgelijnd, lijnen als enige scheiding ─ */

.omhulsel { width: 100%; max-width: var(--breed); margin-inline: auto; padding-inline: var(--rand); }

main > section { padding-block: var(--lucht); }

/* De haarlijn tussen twee secties. Decoratief: hij scheidt, hij informeert niet.
   Daarom mag hij op 1,22:1 staan. */
main > section + section { border-top: var(--lijn) solid var(--hairline); }

/* Direct na een paginakop hoort geen dubbele lucht. Zonder dit staat er tot
   288 pixels niets tussen de inleiding en de eerste regel eronder. */
main > .pagina-kop { padding-bottom: var(--lucht-half); }
main > .pagina-kop + section { padding-top: var(--lucht-half); }

/* Het vaste patroon van een sectie: een smalle gleuf met het volgnummer, dan de
   inhoud. Op smalle schermen valt de gleuf weg en staat het nummer boven de kop. */
.vak {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--rand);
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media (min-width: 900px) {
  .vak { grid-template-columns: var(--gleuf) minmax(0, 1fr); gap: 0 2.5rem; }
}

.vak-inhoud { min-width: 0; }
/* De lege plek waar bij een genummerde sectie het volgnummer staat. Op smal
   valt de gleuf weg, dus dan mag de lege cel ook weg. */
@media (max-width: 899px) { .vak > div:empty { display: none; } }

.merkteken {
  font-family: var(--tekst-font);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--goud-tekst);        /* 4,91:1 — dit is tekst, dus geen --goud */
  padding-top: .5rem;
}

.kop-groep { max-width: 34ch; }

h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem); }
.pagina-kop h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4rem); letter-spacing: -.018em; max-width: 20ch; }
.pagina-kop .trek { max-width: 12rem; }
h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); letter-spacing: -.006em; }

.lead {
  max-width: var(--kolom);
  color: var(--gedempt);           /* 5,06:1 */
  font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem);
  margin-top: 1.25rem;
}

.tag {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--goud-tekst);        /* 4,91:1 */
  margin: 0 0 1.1rem;
}

.klein { font-size: .85rem; color: var(--gedempt); }

.noot {
  font-size: .875rem;
  color: var(--gedempt);
  max-width: var(--kolom);
  border-left: 2px solid var(--goud-lijn);   /* 3,27:1 — draagt betekenis, dus geen --hairline */
  padding-left: 1rem;
}

/* ── 5. knoppen ────────────────────────────────────────────────────────── */

.knoppen { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 2rem; }

.knop {
  --k: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  padding: .8rem 1.6rem;
  border: var(--lijn) solid var(--tekst);
  border-radius: var(--radius);
  background: transparent;
  color: var(--tekst);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .35s var(--veer), box-shadow .35s var(--veer),
              background-color .35s var(--veer), color .35s var(--veer);
}
.knop .ico { width: 17px; height: 17px; flex: none; transition: transform .35s var(--veer); }

.knop-vol { background: var(--knop-vlak); color: var(--knop-tekst); }  /* 13,64:1 */
.knop-lijn { background: transparent; }

/* Dikte is de beloning: pas bij aanwijzen komt er een schaduw. */
.knop:hover, .knop:focus-visible {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 12px 26px -14px rgba(42, 39, 36, .38);
}
.knop:hover .ico, .knop:focus-visible .ico { transform: translateX(3px); }
.knop-lijn:hover, .knop-lijn:focus-visible { background: var(--vlak); }
.knop:active { transform: translate3d(0, 0, 0); }

.knop--stil {
  border-color: transparent;
  padding-inline: 0;
  text-decoration: underline;
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
  min-height: 44px;
}
.knop--stil:hover, .knop--stil:focus-visible { box-shadow: none; background: transparent; }

/* ── 6. kopbalk ────────────────────────────────────────────────────────── */

.kopbalk-houder {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--grond);
  border-bottom: var(--lijn) solid var(--hairline);
}
/* Alleen kleur en schaduw veranderen bij het scrollen. Geen height, geen scale:
   de raakvlakken moeten 44 px blijven en de pagina mag niet verspringen. */
.kopbalk-houder.klein { box-shadow: 0 1px 0 0 var(--hairline), 0 14px 28px -26px rgba(42, 39, 36, .5); }

.kopbalk {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--rand);
  min-height: var(--balk);
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.75rem);
}

.merk { display: flex; align-items: center; flex: none; margin-right: auto; }
/* Het logo bestaat alleen als PNG van 480x203. Nooit breder tonen dan dat,
   en op een scherm met dubbele pixeldichtheid dus nooit boven 200 CSS-pixels. */
.merk img { width: clamp(96px, 14vw, 168px); height: auto; }

.hoofdnav ul { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.hoofdnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: var(--nav-ruimte);
  font-size: .95rem;
  text-decoration: none;
  color: var(--tekst);
  border-bottom: 2px solid transparent;
  transition: border-color .3s var(--veer), color .3s var(--veer);
}
.hoofdnav a:hover { border-bottom-color: var(--goud-lijn); }   /* 3,27:1 */
.hoofdnav a[aria-current="page"] { border-bottom-color: var(--tekst); }  /* 13,64:1, niet alleen kleur */

/* De zakelijke ingang. Staat visueel apart van de navigatie en is op elke
   pagina boven de vouw zichtbaar; zie README, kopje Afwijkingen. */
.zakelijk-knop {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .35rem .9rem;
  max-width: var(--nav-ruimte);
  border: var(--lijn) solid var(--tekst);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .35s var(--veer), box-shadow .35s var(--veer);
}
.zakelijk-knop:hover, .zakelijk-knop:focus-visible {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 10px 22px -14px rgba(42, 39, 36, .4);
}
.zakelijk-knop[aria-current="page"] { background: var(--tekst); color: var(--knop-tekst); }

/* De taalwissel: vijf codes op een rij, altijd zichtbaar, geen uitklapmenu.
   Vijf items van twee tekens passen in elke taal, ook op 320 px. De raakvlakken
   worden 48 px door onzichtbare padding, niet door grotere letters. */
.talen { flex: none; }
.talen ul { display: flex; align-items: center; gap: clamp(1px, .4vw, 4px); }
.talen a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 48px;
  padding-inline: 2px;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--gedempt);                       /* 5,06:1 */
  border-bottom: 2px solid transparent;
  transition: color .3s var(--veer), border-color .3s var(--veer);
}
.talen a:hover { color: var(--tekst); border-bottom-color: var(--goud-lijn); }
/* De actieve taal is ook zonder kleur herkenbaar: een onderlijn van 2 px. */
.talen a[aria-current="true"] { color: var(--tekst); border-bottom-color: var(--tekst); }

.menuknop {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: calc(var(--rand) * -.35);
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menuknop .ico { width: 24px; height: 24px; }
.menuknop .ico-kruis, .menuknop[aria-expanded="true"] .ico-menu { display: none; }
.menuknop[aria-expanded="true"] .ico-kruis { display: block; }

@media (max-width: 1079px) {
  .kopbalk { flex-wrap: wrap; }
  .menuknop { display: inline-flex; }
  /* Dichtgeklapt in de stylesheet en niet met een hidden-attribuut dat het script
     pas ná de eerste weergave zet. Dat kostte 0,27 tot 0,34 aan CLS. */
  .js .hoofdnav { display: none; }
  .js .menu-open .hoofdnav { display: block; }
  .hoofdnav {
    order: 9;
    flex-basis: 100%;
    border-top: var(--lijn) solid var(--hairline);
    padding-block: .5rem 1rem;
  }
  .hoofdnav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .hoofdnav a { min-height: 52px; border-bottom: 0; border-left: 2px solid transparent; padding-left: .75rem; max-width: none; }
  .hoofdnav a[aria-current="page"] { border-left-color: var(--tekst); }
  .hoofdnav .menu-onder { padding: .75rem 0 0; }
  .kopbalk > .zakelijk-knop { display: none; }
  .hoofdnav .zakelijk-knop { display: inline-flex; }
}
@media (min-width: 1080px) {
  .hoofdnav { display: block !important; }
  .hoofdnav .menu-onder { display: none; }
}

/* ── 7. de melding ─────────────────────────────────────────────────────────
   Bewust geen zwevende laag onderin. 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 {
  border-bottom: var(--lijn) solid var(--hairline);
  background: var(--vlak);
}
.melding-weg .melding { display: none; }
.melding-binnen {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding: .7rem var(--rand);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .82rem;
  color: var(--gedempt);           /* 5,51:1 op wit */
}
.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; }

/* ── 8. hero ───────────────────────────────────────────────────────────────
   Twee kolommen op breed, gestapeld op smal. De tekst staat nooit op de foto:
   op de mobiele uitsnede is de linkerkant donker (gemeten donkerste punt
   #140D0B, dat geeft 1,29:1) en dan zou een overlay nodig zijn. Op de grond
   haalt dezelfde tekst 13,64:1 zonder enige truc. */

.hero { padding-block: 0 !important; }
.hero-binnen {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding-inline: var(--rand);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 6vw, 3.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 5.5rem);
}
@media (min-width: 900px) {
  .hero-binnen {
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
    align-items: stretch;
    min-height: min(78vh, 720px);
  }
}

.hero-tekst { max-width: 38rem; align-self: center; }
.hero h1 {
  font-size: clamp(2.35rem, 1.2rem + 4.2vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: nowrap;        /* de regelval staat in de bron, met <br> */
}
@media (max-width: 520px) { .hero h1 { text-wrap: balance; } }
.hero h1 em { font-style: italic; color: var(--tekst); }

/* De signatuur van de hero: één gouden haarlijn die zichzelf trekt.
   scaleX, dus geen breedte-animatie en geen verschuiving. */
.trek {
  height: 1px;
  max-width: 9rem;
  background: var(--goud-lijn);    /* 3,27:1 */
  margin: 1.75rem 0 1.5rem;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--veer) .15s;
}
.js .trek { transform: scaleX(0); }
.js .trek.getrokken, .rm .trek, html:not(.js) .trek { transform: scaleX(1); }

.hero-onder { color: var(--gedempt); font-size: clamp(1.02rem, .98rem + .3vw, 1.18rem); }
/* Drie geverifieerde getallen, als een specificatie: label boven, waarde onder.
   Die volgorde is met opzet taalonafhankelijk. Een label achter een getal
   plakken werkt in het Nederlands en breekt in het Turks. */
.hero-feiten {
  margin-top: clamp(2rem, 5vw, 3rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hero-feiten li {
  padding: .9rem clamp(.6rem, 2vw, 1.5rem) .9rem 0;
  border-top: var(--lijn) solid var(--hairline);
  min-width: 0;
}
.hero-feiten li + li { padding-left: clamp(.75rem, 2.5vw, 1.5rem); border-left: var(--lijn) solid var(--hairline); }
.hero-feiten span {
  display: block;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--goud-tekst);      /* 4,91:1 */
}
.hero-feiten b {
  display: block;
  margin-top: .3rem;
  font-family: var(--kop);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

/* De prijs op een productpagina. Geen badge, geen vlak: een regel op een lijn. */
.prijs-regel {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: var(--lijn) solid var(--hairline);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  font-variant-numeric: tabular-nums;
  max-width: 22ch;
}
.prijs-regel span { font-size: .8rem; color: var(--gedempt); margin-left: .5rem; }

.hero-beeld {
  position: relative;
  margin-inline: calc(var(--rand) * -1);
}
@media (min-width: 900px) {
  .hero-beeld { margin-inline: 0 calc((100vw - min(100vw, var(--breed))) / -2 - var(--rand)); }
}
.hero-beeld img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 72% 55%;
}
@media (min-width: 900px) {
  .hero-beeld { display: flex; }
  .hero-beeld img { aspect-ratio: auto; height: 100%; min-height: 100%; object-position: 80% 55%; }
}
/* De verticale haarlijn die de tekstkolom van de foto scheidt. Decoratief. */
@media (min-width: 900px) {
  .hero-beeld::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: calc(clamp(2rem, 6vw, 3.5rem) / -2);
    width: 1px;
    background: var(--hairline);
  }
}

/* ── 9. de productlijst: de signatuur ──────────────────────────────────────
   In rust is een product één regel op een haarlijn. Bij aanwijzen of tabben
   komt hij achttien pixels naar voren en werpt voor het eerst een schaduw.
   In een richting waarin niets uitsteekt, is achttien pixels veel. */

.lijst { perspective: var(--perspectief); margin-top: clamp(2rem, 5vw, 3.5rem); }
.lijst > li { border-top: var(--lijn) solid var(--hairline); }
.lijst > li:last-child { border-bottom: var(--lijn) solid var(--hairline); }

.regel {
  position: relative;
  transform-style: preserve-3d;
  background: transparent;
  box-shadow: 0 0 0 rgba(42, 39, 36, 0);
  transition: transform var(--duur) var(--veer),
              box-shadow var(--duur) var(--veer),
              background-color var(--duur) var(--veer);
}
.regel:hover, .regel:focus-within {
  transform: translate3d(0, -2px, var(--naar-voren));
  background: var(--vlak);
  box-shadow: 0 18px 40px -18px rgba(42, 39, 36, .28);
}
/* De gouden markering. Deze draagt betekenis (welke regel actief is) en staat
   daarom op --goud-lijn met 3,27:1, niet op --hairline. Zonder beweging is dit
   het enige signaal, en het blijft dan zichtbaar. */
.regel::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--goud-lijn);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--duur) var(--veer);
}
.regel:hover::before, .regel:focus-within::before { transform: scaleY(1); }

.regel summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: .4rem 1.25rem;
  padding: clamp(1.4rem, 3vw, 2.1rem) clamp(.75rem, 2vw, 1.5rem);
  min-height: 56px;
}
.regel summary::-webkit-details-marker { display: none; }

.regel-nr {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--goud-tekst);        /* 4,91:1 */
  align-self: start;
  padding-top: .55rem;
}
.regel-mid { min-width: 0; }
.regel-naam {
  display: block;
  font-family: var(--kop);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.35rem);
  line-height: 1.1;
}
.regel-kort {
  display: block;
  margin-top: .45rem;
  max-width: 56ch;
  font-size: .95rem;
  color: var(--gedempt);           /* 5,06:1 */
}
.regel-rechts {
  display: flex;
  align-items: center;
  gap: 1rem;
  align-self: start;
  padding-top: .35rem;
}
.regel-prijs { font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.regel-per { display: block; font-size: .78rem; color: var(--gedempt); }

/* Het teken dat de regel open kan. Twee haarlijnen, één ervan draait weg. */
.plus {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
}
.plus::before, .plus::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--tekst);        /* 13,64:1 — dit is een bedieningsteken */
  transition: transform .45s var(--veer);
}
.plus::after { transform: rotate(90deg); }
.regel[open] .plus::after { transform: rotate(0deg); }

@media (max-width: 599px) {
  .regel summary { grid-template-columns: 1fr auto; }
  .regel-nr { grid-column: 1 / -1; padding-top: 0; }
  .regel-rechts { flex-direction: column; align-items: flex-end; gap: .5rem; }
}

/* De uitgeklapte regel: twee gelijkwaardige kolommen. Links particulier,
   rechts zakelijk. Het onderscheid zit in het onderdeel, niet in de site-indeling. */
.regel-uit {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: 0 clamp(.75rem, 2vw, 1.5rem) clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: var(--lijn) solid var(--hairline);
  margin-top: -1px;
}
@media (min-width: 760px) {
  .regel-uit { grid-template-columns: 1fr 1fr; }
  .regel-uit > div + div { border-left: var(--lijn) solid var(--hairline); padding-left: clamp(1.5rem, 4vw, 2.5rem); }
}
.regel-uit h3 { margin-bottom: .75rem; padding-top: 1.5rem; }
.regel-uit p { font-size: .95rem; color: var(--gedempt); max-width: 46ch; }
.regel-uit .knoppen { margin-top: 1.25rem; }

.mini {
  margin-top: 1rem;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.mini div { display: flex; gap: .75rem; padding: .45rem 0; border-top: var(--lijn) solid var(--hairline); }
.mini dt { flex: none; width: 11ch; color: var(--gedempt); }
.mini dd { margin: 0; }

/* ── 10. stroken: foto's die pas dikte krijgen als je ze aanwijst ──────────
   De ruimte voor de volle hoogte staat altijd gereserveerd, dus er verspringt
   niets. Het groeien gebeurt met twee tegengestelde scaleY-transformaties:
   het raam groeit en de inhoud krimpt evenveel mee terug, zodat de foto niet
   uitrekt maar het venster groter wordt. Alleen transform, dus CLS blijft nul. */

.stroken {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 760px) { .stroken { grid-template-columns: repeat(3, 1fr); } }

/* --f is de rustschaal: 96 gedeeld door de volle hoogte. Het onderschrift staat
   bóven de foto, zodat het groeien naar beneden gaat en er nooit een gat valt
   tussen de foto en zijn bijschrift. */
.strook { margin: 0; --f: .4; }
.strook-vak {
  height: var(--strook-vak);
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.strook-raam {
  display: block;      /* het is een <span>: zonder dit werkt transform niet */
  width: 100%;
  height: var(--strook-vak);
  overflow: hidden;
  transform-origin: top;          /* groeit naar beneden, weg van het bijschrift */
  transform: scaleY(var(--f));
  transition: transform .6s var(--veer);
  will-change: transform;
}
/* De tegengestelde schaal houdt de foto onvervormd; de verschuiving zorgt dat
   het venster in rust het midden van de foto laat zien en niet de bovenrand.
   Bij --f = 1 wordt de verschuiving vanzelf nul. */
.strook-inhoud {
  display: block;      /* idem: een inline element negeert height en transform */
  height: 100%;
  transform-origin: top;
  transform: scaleY(calc(1 / var(--f))) translateY(calc((var(--f) - 1) / 2 * 100%));
  transition: transform .6s var(--veer);
}
.strook-inhoud img { width: 100%; height: var(--strook-vak); object-fit: cover; }
.strook:hover, .strook:focus-within { --f: 1; }

.strook figcaption {
  margin-bottom: .9rem;
  padding-bottom: .8rem;
  border-bottom: var(--lijn) solid var(--hairline);
  font-size: .85rem;
  color: var(--gedempt);
}
.strook figcaption b { display: block; font-weight: 500; color: var(--tekst); }
.strook--hoog { --strook-vak: 340px; --f: .282; }
@media (max-width: 899px) { .strook--hoog { --strook-vak: 240px; --f: .4; } }

/* Zonder aanwijsapparaat is er geen aanwijzen. Dan staan ze gewoon open. */
@media (hover: none) {
  .strook { --f: 1; }
  .strook-raam, .strook-inhoud { transition: none; }
}
@media (max-width: 759px) { .strook { --strook-vak: 200px; --f: .48; } }

/* ── 11. cijfers ──────────────────────────────────────────────────────────*/

.cijfers-lijst {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 760px) { .cijfers-lijst { grid-template-columns: repeat(4, 1fr); } }
.cijfer {
  border-top: var(--lijn) solid var(--hairline);
  padding: 1.5rem 1.25rem 1.5rem 0;
}
@media (min-width: 760px) {
  .cijfer + .cijfer { border-left: var(--lijn) solid var(--hairline); padding-left: 1.5rem; }
}
.cijfer-getal {
  display: block;
  font-family: var(--kop);
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cijfer-uitleg {
  display: block;
  margin-top: .6rem;
  font-size: .88rem;
  color: var(--gedempt);
  max-width: 22ch;
}

/* ── 12. duo: tekst met een strook ernaast ────────────────────────────────*/

.duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .duo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .duo--links .duo-beeld { order: -1; }
}
.duo-tekst { max-width: var(--kolom); }
.duo-tekst p { color: var(--gedempt); }
.duo-tekst h2 + p { margin-top: 1.25rem; }
.duo-tekst .knop { margin-top: 1.25rem; }

/* ── 13. punten: genummerde lijst op haarlijnen ───────────────────────────*/

.punten { margin-top: clamp(2rem, 5vw, 3rem); }
.punt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .35rem 1.5rem;
  padding: 1.6rem 0;
  border-top: var(--lijn) solid var(--hairline);
}
@media (min-width: 760px) { .punt { grid-template-columns: 4ch minmax(0, 28ch) minmax(0, 1fr); align-items: baseline; } }
.punt:last-child { border-bottom: var(--lijn) solid var(--hairline); }
.punt-nr {
  font-size: .75rem; font-weight: 500; letter-spacing: .14em;
  font-variant-numeric: tabular-nums; color: var(--goud-tekst);
}
.punt p { color: var(--gedempt); max-width: 58ch; margin: 0; }

/* ── 14. specificatie en open punten ──────────────────────────────────────*/

.spec { margin-top: clamp(2rem, 5vw, 3rem); max-width: 76ch; }
.spec-rij {
  display: grid;
  grid-template-columns: 1fr;
  gap: .2rem .5rem;
  padding: 1rem 0;
  border-top: var(--lijn) solid var(--hairline);
}
@media (min-width: 640px) { .spec-rij { grid-template-columns: minmax(18ch, 26ch) minmax(0, 1fr); } }
.spec-rij:last-child { border-bottom: var(--lijn) solid var(--hairline); }
.spec-rij dt { font-size: .9rem; color: var(--gedempt); }
.spec-rij dd { margin: 0; font-size: .95rem; }

/* Wat nog niet vaststaat wordt zichtbaar gemarkeerd, niet geraden.
   De markering is tekst plus een lijn, nooit kleur alleen. */
.open-punt {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--goud-tekst);        /* 4,91:1 */
  border-bottom: 1px dashed var(--goud-lijn);
  padding-bottom: 2px;
}
.open-noot { display: block; margin-top: .4rem; font-size: .82rem; color: var(--gedempt); max-width: 52ch; }
.spec-uitleg { margin-top: 1.25rem; font-size: .84rem; color: var(--gedempt); max-width: 60ch; }

.og-lijst { margin-top: clamp(2rem, 5vw, 3rem); max-width: 80ch; }
.og {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr);
  gap: .3rem .9rem;
  padding: .95rem 0;
  border-top: var(--lijn) solid var(--hairline);
}
@media (min-width: 700px) { .og { grid-template-columns: 1.2rem minmax(0, 30ch) minmax(0, 1fr); align-items: baseline; } }
.og:last-child { border-bottom: var(--lijn) solid var(--hairline); }
.og .ico { width: 17px; height: 17px; color: var(--goud-tekst); }
.og--vast .ico { color: var(--tekst); }
.og-veld { font-size: .95rem; }
.og-waarde { font-size: .92rem; color: var(--gedempt); }
@media (max-width: 699px) { .og-waarde { grid-column: 2; } }

/* ── 15. kader: één stilstaand beeld uit de opname ────────────────────────*/

.kader {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
  margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 800px) { .kader { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); } }
.kader-beeld { margin: 0; }
.kader-beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }  /* 4:5, niet 9:16 */
.kader-beeld figcaption { margin-top: .75rem; font-size: .8rem; color: var(--gedempt); }
.kader-tekst p { color: var(--gedempt); max-width: var(--kolom); }
.kader-tekst h2 + p { margin-top: 1.25rem; }

/* ── 16. klanten, recepten, gegevens ──────────────────────────────────────*/

.klantlijst { margin-top: clamp(2rem, 5vw, 3rem); max-width: 60ch; }
.klant {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-top: var(--lijn) solid var(--hairline);
}
.klant:last-of-type { border-bottom: var(--lijn) solid var(--hairline); }
.klant-naam { font-family: var(--kop); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); }
.klant-soort { margin-left: auto; font-size: .85rem; color: var(--gedempt); }
.klant-rest { padding-top: 1.5rem; font-size: .9rem; color: var(--gedempt); max-width: var(--kolom); }

.receptlijst { margin-top: clamp(2rem, 5vw, 3rem); perspective: var(--perspectief); }
.recept { border-top: var(--lijn) solid var(--hairline); }
.recept:last-child { border-bottom: var(--lijn) solid var(--hairline); }
.recept-regel {
  transform-style: preserve-3d;
  box-shadow: 0 0 0 rgba(42, 39, 36, 0);
  transition: transform var(--duur) var(--veer), box-shadow var(--duur) var(--veer),
              background-color var(--duur) var(--veer);
}
.recept-regel:hover, .recept-regel:focus-within {
  transform: translate3d(0, -2px, var(--naar-voren));
  background: var(--vlak);
  box-shadow: 0 18px 40px -18px rgba(42, 39, 36, .28);
}
.recept summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: .3rem clamp(.75rem, 2vw, 1.25rem);
  align-items: baseline;
  padding: 1.5rem clamp(.75rem, 2vw, 1.25rem);
  min-height: 56px;
}
.recept summary .plus { align-self: center; }
@media (max-width: 599px) {
  .recept summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .recept summary .recept-meta { grid-column: 2; }
}
.recept summary::-webkit-details-marker { display: none; }
.recept h3 { font-family: var(--kop); font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem); font-weight: 400; }
.recept-meta { font-size: .82rem; color: var(--gedempt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.recept-uit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2.5rem;
  padding: 0 clamp(.75rem, 2vw, 1.25rem) 1.75rem calc(clamp(.75rem, 2vw, 1.25rem) + 4ch);
}
@media (min-width: 760px) { .recept-uit { grid-template-columns: minmax(0, 24ch) minmax(0, 1fr); } }
.recept-uit h4 { font-family: var(--tekst-font); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--goud-tekst); margin-bottom: .75rem; }
.recept-ing li, .recept-stap li { font-size: .92rem; color: var(--gedempt); padding: .35rem 0; border-top: var(--lijn) solid var(--hairline); }
.recept-stap { counter-reset: s; }
.recept-stap li::before { counter-increment: s; content: counter(s) ". "; color: var(--goud-tekst); font-variant-numeric: tabular-nums; }
.recept-kort { grid-column: 1 / -1; font-size: .95rem; color: var(--gedempt); max-width: var(--kolom); }

.geglijst { margin-top: clamp(2rem, 5vw, 3rem); max-width: 60ch; }
.geg { border-top: var(--lijn) solid var(--hairline); }
.geg:last-child { border-bottom: var(--lijn) solid var(--hairline); }
.geg a {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.35rem clamp(.5rem, 2vw, 1rem);
  min-height: 56px;
  text-decoration: none;
  transition: transform .4s var(--veer), background-color .4s var(--veer);
}
.geg a:hover, .geg a:focus-visible { background: var(--vlak); transform: translate3d(4px, 0, 0); }
.geg .ico { width: 20px; height: 20px; flex: none; color: var(--goud-tekst); }
.geg a .ico:last-child { margin-left: auto; color: var(--tekst); transition: transform .35s var(--veer); }
.geg a:hover .ico:last-child, .geg a:focus-visible .ico:last-child { transform: translateX(3px); }
.geg-kop { display: block; font-size: 1.05rem; }
.geg-onder { display: block; font-size: .82rem; color: var(--gedempt); }

/* ── 17. eerlijk: waar wij iets níet beweren ──────────────────────────────*/

.eerlijk-tekst {
  max-width: var(--kolom);
  margin-top: 1.75rem;
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  border-left: 2px solid var(--goud-lijn);   /* 3,27:1, draagt betekenis */
}
.eerlijk-tekst p { color: var(--gedempt); }

.plat-sectie + .plat-sectie { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 2.5rem); border-top: var(--lijn) solid var(--hairline); }
.plat-sectie h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.plat-sectie p { color: var(--gedempt); max-width: var(--kolom); margin-top: 1rem; }

/* ── 18. slot: de enige sectie met een omkadering ─────────────────────────*/

.slot-kader {
  border: var(--lijn) solid var(--tekst);
  padding: clamp(2rem, 5vw, 3.5rem);
  max-width: 68ch;
}
.slot-kader p { color: var(--gedempt); margin-top: 1rem; max-width: 52ch; }

/* ── 19. formulier ────────────────────────────────────────────────────────*/

.formulier { margin-top: clamp(2rem, 5vw, 3rem); max-width: 68ch; }
.veld { padding: 1.1rem 0; border-top: var(--lijn) solid var(--hairline); }
.veld:last-of-type { border-bottom: var(--lijn) solid var(--hairline); }
.veld > label, .veld legend { display: block; font-size: .82rem; letter-spacing: .04em; color: var(--gedempt); margin-bottom: .4rem; }
.veld .hint { color: var(--gedempt); font-size: .78rem; }
/* De haakjes staan in de opmaak en niet in de tekst, zodat ze in alle vijf de
   talen kloppen zonder dat er vijf keer een haakje vertaald hoeft te worden. */
.veld .hint::before { content: "("; }
.veld .hint::after { content: ")"; }
.veld input[type="text"], .veld input[type="email"], .veld input[type="tel"], .veld select, .veld textarea {
  width: 100%;
  min-height: 48px;
  padding: .55rem 0;
  border: 0;
  border-bottom: var(--lijn) solid var(--tekst);   /* het invoervlak is één lijn */
  border-radius: 0;
  background: transparent;
  font-size: 1rem;
  transition: border-color .3s var(--veer);
}
.veld textarea { resize: vertical; min-height: 120px; }
.veld select { appearance: none; background-image: none; }
.veld :is(input, select, textarea):hover { border-bottom-color: var(--goud-lijn); }
.veld :is(input, select, textarea)[aria-invalid="true"] { border-bottom-color: #96201C; }  /* 6,49:1 op grond */
.fout { margin: .5rem 0 0; font-size: .82rem; color: #96201C; }
.veld--keuze { border-top: var(--lijn) solid var(--hairline); }
.veld--keuze fieldset, fieldset { border: 0; margin: 0; padding: 0; }
.radio, .akkoord { display: flex; align-items: flex-start; gap: .7rem; font-size: .92rem; color: var(--tekst); cursor: pointer; min-height: 44px; padding: .4rem 0; }
.radio input, .akkoord input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--goud-tekst); flex: none; }
.akkoord span { max-width: 56ch; color: var(--gedempt); }
.akkoord a { color: var(--goud-tekst); }
.veld--knop { border: 0; padding-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.status { margin: 0; font-size: .88rem; color: var(--gedempt); }
.status[data-toestand="demo"] { color: var(--goud-tekst); }
.demo-noot { margin-top: 1rem; font-size: .84rem; color: var(--goud-tekst); }

/* ── 20. kruimelpad ───────────────────────────────────────────────────────*/

.kruimels { padding-top: 2rem; }
.kruimels ol { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .82rem; color: var(--gedempt); }
.kruimels li + li::before { content: "/"; margin-right: .5rem; color: var(--hairline); }
.kruimels a { color: var(--gedempt); text-underline-offset: .25em; }

/* ── 21. voettekst ────────────────────────────────────────────────────────*/

.voet {
  border-top: var(--lijn) solid var(--tekst);   /* de enige lijn op de pagina die zwaar mag zijn */
  margin-top: var(--lucht);
}
.voet-binnen {
  width: 100%;
  max-width: var(--breed);
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5rem) var(--rand) 2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 760px) { .voet-binnen { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 3rem 2rem; } }
.voet-merk img { width: clamp(120px, 16vw, 168px); }
.voet .spreuk { margin-top: 1rem; font-family: var(--kop); font-size: 1.05rem; color: var(--gedempt); }
.voet-sociaal { display: flex; gap: .25rem; margin-top: 1.25rem; }
.voet-sociaal a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--tekst); }
.voet-sociaal .ico { width: 19px; height: 19px; }
.voet-kolom h2 { font-family: var(--tekst-font); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--goud-tekst); margin-bottom: .75rem; }
.voet-kolom li a, .voet-adres a {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 40px; font-size: .9rem; color: var(--gedempt); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.voet-kolom li a:hover, .voet-adres a:hover { color: var(--tekst); border-bottom-color: var(--goud-lijn); }
.voet-kolom li a[aria-current="true"] { color: var(--tekst); border-bottom-color: var(--tekst); }
.voet-adres p { margin: 0; }
.voet-adres .ico { width: 16px; height: 16px; flex: none; }
.rustknop {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1rem; min-height: 44px; padding: .4rem .8rem;
  border: var(--lijn) solid var(--hairline); background: transparent;
  font-size: .82rem; color: var(--gedempt); cursor: pointer;
  transition: border-color .3s var(--veer), color .3s var(--veer);
}
.rustknop:hover { border-color: var(--goud-lijn); color: var(--tekst); }
.rustknop .ico { width: 16px; height: 16px; }
.voet-regel {
  width: 100%; max-width: var(--breed); margin-inline: auto;
  padding: 1.25rem var(--rand) 2.5rem;
  border-top: var(--lijn) solid var(--hairline);
  font-size: .8rem; color: var(--gedempt);
}
.voet-regel a { color: var(--goud-tekst); }

/* ── 22. onthulling bij het scrollen ──────────────────────────────────────
   data-rv wordt door het script gezet, niet in de HTML. Valt het script weg,
   dan staat er niets op opacity 0. 26 pixels verschuiving, meer niet. */

[data-rv] { opacity: 0; transform: translate3d(0, 26px, 0); }
[data-rv].in { opacity: 1; transform: none; transition: opacity .7s var(--veer), transform .7s var(--veer); }
[data-rv].in[style*="transition: none"] { transition: none; }

/* ── 23. beperkte beweging ────────────────────────────────────────────────
   Alles staat stil. De regel wordt dan gemarkeerd met de gouden haarlijn,
   die zonder beweging leesbaar blijft (3,27:1). */

.rm [data-rv] { opacity: 1 !important; transform: none !important; transition: none !important; }
.rm .regel, .rm .recept-regel, .rm .knop, .rm .zakelijk-knop, .rm .geg a {
  transition: none !important;
}
.rm .regel:hover, .rm .regel:focus-within,
.rm .recept-regel:hover, .rm .recept-regel:focus-within {
  transform: none !important;
  box-shadow: none !important;
  background: var(--vlak);
}
.rm .knop:hover, .rm .knop:focus-visible,
.rm .zakelijk-knop:hover, .rm .zakelijk-knop:focus-visible,
.rm .geg a:hover, .rm .geg a:focus-visible { transform: none !important; box-shadow: none !important; }
.rm .regel::before { transition: none !important; }
.rm .strook { --f: 1; }
.rm .strook-raam, .rm .strook-inhoud { transition: none !important; }
.rm .trek { transform: scaleX(1) !important; transition: none !important; }
html.rm { scroll-behavior: auto; }

@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; }
  .strook { --f: 1; }
  .trek { transform: scaleX(1) !important; }
}

/* ── 24. afdrukken ────────────────────────────────────────────────────────*/

@media print {
  .kopbalk-houder, .melding, .voet-sociaal, .rustknop, .overslaan { display: none; }
  body { background: #fff; }
  .regel-uit, .recept-uit { display: block !important; }
}