@charset "utf-8";
/* Ensar Yufka - richting 6, Pallet.
   Een specificatieblad met een palletrekenmachine. De inkoper is de
   hoofdbezoeker; de consument krijgt precies een uitweg in de dienstbalk.

   Contrast: alle waarden hieronder zijn nagerekend met de WCAG 2.1
   luminantieformule tegen #F2F4F5 en #FFFFFF. Het merkgoud #C9A227 haalt op
   deze grond 2,19:1 en is dus uitsluitend decoratie; zodra goud iets moet
   betekenen gaat het naar --goud-lijn of --goud-tekst. */

/* ── lettertypen ─────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/assets/fonts/schibstedgrotesk.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrainsmono.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ── tokens ──────────────────────────────────────────────────────────────── */

:root {
  --grond:      #F2F4F5;
  --vlak:       #FFFFFF;
  --tint:       #E9EDEF;   /* dienstbalk en tabelkop */
  --tekst:      #171C1F;   /* 15,57:1 op grond, 17,18:1 op wit */
  --gedempt:    #59656C;   /*  5,43:1 op grond,  6,00:1 op wit */
  --goud:       #C9A227;   /*  2,19:1, uitsluitend decoratief */
  --goud-lijn:  #A0811F;   /*  3,37:1 op grond,  3,71:1 op wit */
  --goud-tekst: #7D6518;   /*  5,08:1 op grond,  5,60:1 op wit */
  --accent:     #1F4E79;   /*  7,85:1, alleen op bedienbare elementen */
  --knop-vlak:  #1F4E79;
  --knop-tekst: #FFFFFF;   /*  8,66:1 op de knop */
  --focus:      #1F4E79;
  --hairline:   #D3D8DB;   /*  1,30:1, decoratief */
  --lijn-sterk: #B6BFC4;

  --kop: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --tekst-font: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --cijfer-font: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --kop-gewicht: 700;

  --radius: 3px;
  --zijkolom: 264px;
  --rij: 44px;                 /* rijhoogte en minimaal raakvlak */
  --veer: cubic-bezier(.16, 1, .3, 1);
  --duur: .45s;
  --perspectief: 1400px;
  /* De tokentabel noemt rotateX(-30deg) rotateY(45deg). Met die tekens kijkt de
     camera onder de pallet en zie je de onderkant. De hoeken blijven dus, de
     tekens zijn omgedraaid. Zie README, kopje Afwijkingen. */
  --iso-x: 30deg;
  --iso-y: -45deg;
  --nav-ruimte: 22ch;          /* gemeten: "Toptan siparis verin" is 20 tekens */
  --kop-hoogte: 64px;
  --schaal: 1;
}

/* ── grondslag ───────────────────────────────────────────────────────────── */

*, *::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(--tekst-font);
  font-size: 1rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--kop);
  font-weight: var(--kop-gewicht);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(1.8rem, 1.15rem + 2.3vw, 3rem); }
h2 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem); }
h3 { font-size: 1.02rem; letter-spacing: 0; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

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

:where(a, button, summary, input, select, textarea, video, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.cijfer, .code {
  font-family: var(--cijfer-font);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.code { font-size: .78em; color: var(--gedempt); letter-spacing: .02em; }

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

.overslaan {
  position: absolute; left: .5rem; top: -4rem; z-index: 90;
  background: var(--tekst); color: var(--grond);
  padding: .7rem 1.1rem; border-radius: var(--radius); text-decoration: none;
  transition: top .2s var(--veer);
}
.overslaan:focus { top: .5rem; }

/* ── de mededeling: in de stroom, nooit zwevend ──────────────────────────── */
/* Bij een eerdere demo lag een vaste balk precies over de twee heroknoppen.
   Deze staat in de gewone stroom en kan per definitie niets afdekken. */

.melding { background: var(--tekst); color: #E6EAEC; }
.melding-weg .melding { display: none; }
.melding-binnen {
  max-width: 1440px; margin-inline: auto;
  padding: .55rem clamp(.9rem, 3vw, 2.5rem);
  display: flex; align-items: center; gap: 1rem;
}
.melding p { margin: 0; font-size: .82rem; line-height: 1.45; }
.melding button {
  margin-left: auto; flex: none;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: none; border: 1px solid #48555C; border-radius: var(--radius);
  color: inherit; cursor: pointer;
}
.melding button:hover { border-color: #8A979E; }
.melding .ico { width: 15px; height: 15px; }

/* ── dienstbalk ──────────────────────────────────────────────────────────── */

.dienstbalk {
  background: var(--tint);
  border-bottom: 1px solid var(--hairline);
  font-size: .84rem;
}
.dienst-binnen {
  max-width: 1440px; margin-inline: auto;
  padding-inline: clamp(.9rem, 3vw, 2.5rem);
  display: flex; align-items: stretch; gap: 1rem; flex-wrap: wrap;
  min-height: 40px;
}

.uitweg {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--gedempt); text-decoration: none;
  padding: .5rem 0;
  border-bottom: 2px solid transparent;
}
.uitweg:hover { color: var(--accent); border-bottom-color: var(--goud-lijn); }
.uitweg .ico { width: 14px; height: 14px; }

.keuzes { margin-left: auto; display: flex; gap: .35rem; align-items: stretch; }

.keuze { position: relative; display: flex; align-items: center; }
.keuze-label {
  color: var(--gedempt); font-size: .76rem; margin-right: .4rem;
  white-space: nowrap;
}

/* De taalwissel: gestyled als een keuzelijst, maar met vijf echte links erin.
   Een <select> kan geen hreflang dragen en werkt niet zonder JavaScript. */
.keuze--taal { display: block; }
.keuze--taal > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .4rem;
  min-height: 40px; padding: 0 .6rem;
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  background: var(--vlak);
}
.keuze--taal > summary::-webkit-details-marker { display: none; }
.keuze--taal > summary:hover { color: var(--accent); }
.keuze-waarde { font-weight: 600; min-width: 6ch; }
.ico-omlaag { width: 14px; height: 14px; transition: transform .2s var(--veer); }
.keuze--taal[open] > summary .ico-omlaag { transform: rotate(180deg); }

.keuze--taal nav {
  position: absolute; z-index: 60; right: 0; top: 100%;
  min-width: max(var(--nav-ruimte), 100%);
  background: var(--vlak);
  border: 1px solid var(--lijn-sterk);
  box-shadow: 0 12px 28px -14px rgba(23, 28, 31, .4);
}
.keuze--taal ul { list-style: none; margin: 0; padding: 0; }
.keuze--taal nav a {
  display: flex; gap: .6rem; align-items: center;
  min-height: var(--rij); padding: .4rem .75rem;
  color: var(--tekst); text-decoration: none;
}
.keuze--taal nav a:hover { background: var(--tint); color: var(--accent); }
.keuze--taal nav a[aria-current] {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--goud-lijn);
}
.keuze--taal nav .code { color: var(--goud-tekst); font-weight: 600; }

.keuze--land { background: var(--vlak); border-right: 1px solid var(--hairline);
               padding-left: .6rem; }
.keuze--land select {
  appearance: none; -webkit-appearance: none;
  font: inherit; color: var(--tekst);
  background: none; border: 0;
  padding: 0 1.6rem 0 0; min-height: 40px;
  cursor: pointer; max-width: 22ch;
}
.keuze--land .ico-omlaag {
  position: absolute; right: .5rem; top: 50%; margin-top: -7px; pointer-events: none;
}

/* ── kopbalk ─────────────────────────────────────────────────────────────── */

.kopbalk {
  position: sticky; top: 0; z-index: 50;
  background: var(--vlak);
  border-bottom: 1px solid var(--lijn-sterk);
}
.kop-binnen {
  max-width: 1440px; margin-inline: auto;
  padding: .5rem clamp(.9rem, 3vw, 2.5rem);
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem);
  min-height: var(--kop-hoogte);
}
/* Het logo bestaat alleen als 400x203 png. Nooit breder dan 200 css-pixels,
   dan blijft er twee keer de pixeldichtheid over. */
.merk { flex: none; display: block; }
.merk img { width: clamp(126px, 14vw, 172px); height: auto; }

.hoofdnav { margin-left: auto; }
.hoofdnav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(.6rem, 1.6vw, 1.6rem);
}
.hoofdnav a {
  display: block; padding: .5rem .1rem;
  color: var(--tekst); text-decoration: none;
  font-size: .93rem;
  border-bottom: 2px solid transparent;
}
.hoofdnav a:hover { color: var(--accent); border-bottom-color: var(--goud-lijn); }
.hoofdnav a[aria-current] { border-bottom-color: var(--accent); font-weight: 600; }
.alleen-mobiel { display: none; }

.menuknop { display: none; }

/* ── knoppen ─────────────────────────────────────────────────────────────── */

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--rij); padding: .55rem 1.1rem;
  font: inherit; font-size: .93rem; font-weight: 600;
  border-radius: var(--radius); text-decoration: none;
  cursor: pointer;
  transition: background-color .18s linear, color .18s linear, border-color .18s linear;
}
.knop .ico { width: 16px; height: 16px; flex: none; }
.knop-vol { background: var(--knop-vlak); color: var(--knop-tekst); border: 1px solid var(--knop-vlak); }
.knop-vol:hover { background: #17395A; border-color: #17395A; }
.knop-lijn { background: var(--vlak); color: var(--accent); border: 1px solid var(--lijn-sterk); }
.knop-lijn:hover { border-color: var(--accent); background: var(--tint); }
.knop-plat { background: none; color: var(--gedempt); border: 1px solid transparent; }
.knop-plat:hover { color: var(--accent); border-color: var(--hairline); }
.knoppen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }

.prijsknop { flex: none; }

/* ── werkblad: zijkolom plus inhoud ──────────────────────────────────────── */

.werkblad {
  max-width: 1440px; margin-inline: auto;
  padding: clamp(1rem, 2.5vw, 2rem) clamp(.9rem, 3vw, 2.5rem) 3rem;
  display: grid; gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: minmax(0, 1fr);
}

.zijkolom { display: none; }

@media (min-width: 1100px) {
  .werkblad { grid-template-columns: var(--zijkolom) minmax(0, 1fr); }
  .zijkolom { display: block; }
  .zij-binnen {
    position: sticky; top: calc(var(--kop-hoogte) + 1rem);
    background: var(--vlak);
    border: 1px solid var(--hairline);
    border-top: 3px solid var(--goud-lijn);
    border-radius: var(--radius);
    padding: 1rem .9rem;
  }
}
.zij-kop {
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gedempt); font-weight: 600; margin: 0 0 .5rem;
}
.zij-kop + .zij-rubriek, .zij-artikel + .zij-kop { margin-top: 1.2rem; }
.zijkolom ul { list-style: none; margin: 0 0 .2rem; padding: 0; }
.zijkolom li + li { border-top: 1px solid var(--hairline); }
.zijkolom li a {
  display: flex; gap: .55rem; align-items: baseline;
  padding: .5rem .25rem; min-height: 36px;
  color: var(--tekst); text-decoration: none; font-size: .88rem; line-height: 1.35;
}
.zijkolom li a:hover { color: var(--accent); background: var(--tint); }
.zijkolom li a[aria-current] { font-weight: 600; box-shadow: inset 3px 0 0 var(--goud-lijn); }
.zij-knop { width: 100%; margin-top: .8rem; font-size: .86rem; }

/* ── vlakken ─────────────────────────────────────────────────────────────── */

main { min-width: 0; }

.vlak {
  background: var(--vlak);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  scroll-margin-top: calc(var(--kop-hoogte) + 1rem);
}
.vlak-kop {
  display: flex; gap: .8rem; align-items: baseline;
  padding: 1rem clamp(1rem, 2.5vw, 1.75rem) .5rem;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1rem;
}
.vlak-nr {
  font-family: var(--cijfer-font); font-size: .8rem; font-weight: 600;
  color: var(--goud-tekst); flex: none; padding-top: .18rem;
}
.vlak-titel { min-width: 0; }
.vlak-onder { margin: .45rem 0 0; color: var(--gedempt); font-size: .93rem; max-width: 72ch; }
.vlak-inhoud { padding: clamp(1rem, 2.5vw, 1.75rem); }
.vlak-kop .tag { margin-bottom: .3rem; }

.tag {
  font-family: var(--cijfer-font);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--goud-tekst); margin: 0 0 .6rem; font-weight: 600;
}

.lead { font-size: clamp(1rem, .95rem + .25vw, 1.15rem); color: var(--gedempt); max-width: 66ch; }
.voetnoot { font-size: .82rem; color: var(--gedempt); margin: .9rem 0 0; max-width: 80ch; }
.loop { max-width: 68ch; }
.loop p { hyphens: auto; }
.loop--plat { max-width: 74ch; }
.plat-sectie + .plat-sectie { margin-top: 2rem; }
.plat-sectie h2 { margin-bottom: .6rem; }

/* ── de opening van de homepage: geen foto, meteen data ──────────────────── */

.hoofd, .pagina-kop {
  background: var(--vlak);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--goud-lijn);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.hoofd-tekst { max-width: 40ch; }
.hoofd h1, .pagina-kop h1 { margin-bottom: .7rem; }
.pagina-kop .lead { margin-bottom: 0; }

.kentallen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
.kental { background: var(--vlak); padding: .85rem 1rem; }
.kental-getal {
  display: block; font-size: clamp(1.35rem, 1rem + 1.3vw, 1.9rem);
  font-weight: 600; line-height: 1.1; color: var(--tekst);
}
.kental-kort {
  display: block; margin-top: .2rem;
  font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gedempt);
}

.prijsregel { font-size: 1.35rem; font-weight: 600; margin: .9rem 0 0; }
.prijsregel span:last-child { font-size: .85rem; font-weight: 400; color: var(--gedempt); }

.kruimels { margin: 0 0 .9rem; font-size: .84rem; }
.kruimels ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.kruimels li + li::before { content: "/"; color: var(--lijn-sterk); margin-right: .4rem; }
.kruimels span { color: var(--gedempt); }

/* ── tabellen: het hart van deze richting ────────────────────────────────── */

.tabel-raam { overflow-x: auto; }
.blad-tabel {
  width: 100%; border-collapse: collapse;
  font-size: .92rem;
}
.blad-tabel th, .blad-tabel td {
  text-align: left; vertical-align: top;
  padding: .6rem .7rem; min-height: var(--rij);
  border-bottom: 1px solid var(--hairline);
}
.blad-tabel thead th {
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gedempt); font-weight: 600;
  background: var(--tint);
  border-bottom: 1px solid var(--lijn-sterk);
  white-space: nowrap;
}
.blad-tabel tbody tr { transition: background-color .12s linear; }
.blad-tabel tbody tr:hover { background: var(--tint); }
.blad-tabel tbody th { font-weight: 600; }
.blad-tabel tbody th a { color: var(--tekst); text-decoration: none; }
.blad-tabel tbody th a:hover { color: var(--accent); text-decoration: underline; }
.blad-tabel th .code { margin-right: .5rem; }
.rij-label {
  display: block; font-weight: 400; font-size: .78rem; color: var(--gedempt);
  margin-left: 2.4rem;
}
.td-blad { text-align: right; }
.bladlink {
  display: inline-flex; align-items: center; gap: .35rem;
  white-space: nowrap; font-weight: 600; text-decoration: none;
}
.bladlink:hover { text-decoration: underline; }
.bladlink .ico { width: 15px; height: 15px; }

.blad-tabel--spec th[scope="row"] { width: 44%; font-weight: 400; color: var(--gedempt); }
.blad-tabel--spec td { font-weight: 600; }
.sp-groep th {
  background: var(--tint); color: var(--tekst);
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  border-top: 1px solid var(--lijn-sterk);
  border-bottom: 1px solid var(--lijn-sterk);
}
.sp--open td { font-weight: 400; }

.blad-tabel--og th[scope="row"] {
  width: 52%; font-weight: 400;
  display: flex; gap: .5rem; align-items: flex-start;
}
.blad-tabel--og .ico { width: 17px; height: 17px; flex: none; margin-top: .18rem; }
.og--vast .ico { color: var(--goud-tekst); }
.og--open .ico { color: var(--gedempt); }
.og--vast td { font-weight: 600; }

/* Het open veld: zichtbaar gemarkeerd, nooit ingevuld met een schatting. */
.open-punt {
  display: inline-block;
  font-family: var(--cijfer-font); font-size: .76rem;
  color: var(--goud-tekst); font-weight: 600;
  background: #FBF4DC;
  border: 1px dashed var(--goud-lijn);
  border-radius: 2px;
  padding: .1rem .4rem;
  line-height: 1.5;
}
.open-noot {
  display: block; margin-top: .3rem;
  font-size: .8rem; color: var(--gedempt); font-weight: 400;
}

/* Op smalle schermen wordt elke rij een blokje met de kolomnaam ervoor. */
@media (max-width: 720px) {
  .blad-tabel, .blad-tabel tbody, .blad-tabel tr, .blad-tabel td, .blad-tabel th { display: block; }
  .blad-tabel thead { display: none; }
  .blad-tabel tbody tr {
    border: 1px solid var(--hairline); border-radius: var(--radius);
    margin-bottom: .6rem; padding: .3rem .1rem;
  }
  .blad-tabel td, .blad-tabel th { border-bottom: 0; padding: .35rem .7rem; }
  .blad-tabel td[data-kop]::before {
    content: attr(data-kop) ": ";
    color: var(--gedempt); font-size: .78rem;
  }
  .blad-tabel--spec th[scope="row"], .blad-tabel--og th[scope="row"] { width: auto; }
  .sp-groep th { border-radius: 0; }
  .td-blad { text-align: left; }
  .rij-label { margin-left: 2.4rem; }
}

/* ── de rekenmachine ─────────────────────────────────────────────────────── */

.reken { display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); }
@media (min-width: 900px) {
  .reken { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
}
.reken h3 {
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gedempt); margin-bottom: .9rem;
}

.rv { margin-bottom: .7rem; }
.rv label { display: block; font-size: .84rem; color: var(--gedempt); margin-bottom: .2rem; }
.rv-invoer { display: flex; align-items: stretch; }
.rv input {
  font: inherit; font-family: var(--cijfer-font); font-size: .95rem;
  width: 100%; min-height: var(--rij); padding: .4rem .6rem;
  border: 1px solid var(--lijn-sterk); border-radius: var(--radius) 0 0 var(--radius);
  background: var(--vlak); color: var(--tekst);
}
.rv input:focus { border-color: var(--accent); }
.rv-eenheid {
  flex: none; display: grid; place-items: center; min-width: 3ch; padding: 0 .5rem;
  background: var(--tint); border: 1px solid var(--lijn-sterk); border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--cijfer-font); font-size: .8rem; color: var(--gedempt);
}
.rv-invoer:has(.rv-eenheid:empty) input { border-radius: var(--radius); }
.rv-eenheid:empty { display: none; }

.reken-knoppen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.reken-knoppen .knop { font-size: .85rem; padding-inline: .8rem; }

.reken-open {
  display: flex; gap: .5rem; align-items: flex-start;
  margin-top: 1rem; font-size: .82rem; color: var(--gedempt);
  border-left: 3px solid var(--goud-lijn); padding-left: .7rem;
}
.reken-open .ico { width: 16px; height: 16px; flex: none; margin-top: .15rem; color: var(--goud-tekst); }

.reken-uitkomst { min-width: 0; }
.reken-lijst {
  margin: 1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
}
.ru { background: var(--vlak); padding: .6rem .75rem; }
.ru dt { font-size: .74rem; color: var(--gedempt); line-height: 1.3; }
.ru dd { margin: .15rem 0 0; font-size: 1.1rem; font-weight: 600; }
.ru--groot { background: #F5F8FA; }
.ru--groot dd { font-size: 1.5rem; color: var(--accent); }
.ru dd.waarschuw { color: #8A2A12; }

.reken-melding {
  margin: .8rem 0 0; font-size: .84rem; color: var(--gedempt);
  background: #FBF4DC; border-left: 3px solid var(--goud-lijn);
  padding: .55rem .75rem;
}
.reken-melding.fout { background: #FBEEE9; border-left-color: #A33A1C; color: #6E2A14; }
.reken-land {
  margin: .6rem 0 0; font-size: .84rem; color: var(--gedempt);
  border-left: 3px solid var(--accent); padding: .5rem .75rem; background: #F3F7FA;
}
.reken-land b { color: var(--tekst); }

.aannames { margin-top: 1.4rem; border-top: 1px solid var(--hairline); padding-top: .8rem; }
.aannames summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .4rem;
  font-size: .84rem; font-weight: 600; color: var(--accent);
  min-height: 36px;
}
.aannames summary::-webkit-details-marker { display: none; }
.aannames[open] summary .ico-omlaag { transform: rotate(180deg); }
.aannames ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .84rem; color: var(--gedempt); }
.aannames li { margin-bottom: .35rem; }

/* ── de pallet in css ────────────────────────────────────────────────────── */
/* Vijf vlakken per doos zijn niet nodig: bij een vaste kijkhoek zie je er drie.
   De ruimte staat vast met aspect-ratio, dus er verspringt niets als het
   aantal dozen verandert. */

.pallet-raam {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 460px;
  background: linear-gradient(180deg, #FBFCFC 0%, #EEF1F3 100%);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.pallet { position: absolute; inset: 0; perspective: var(--perspectief); }
.pallet-toneel {
  position: absolute; left: 50%; top: 58%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: scale(var(--schaal)) rotateX(var(--iso-x)) rotateY(var(--iso-y));
  transition: transform var(--duur) var(--veer);
}
.pallet-bodem, .doos {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform-style: preserve-3d;
}
.zij {
  position: absolute; display: block;
  width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
  margin-left: calc(var(--w) * -0.5px); margin-top: calc(var(--h) * -0.5px);
  border: 1px solid rgba(23, 28, 31, .22);
}
/* boven, voor en rechts: de drie vlakken die je bij deze kijkhoek ziet */
.zij-top    { --w: var(--bx); --h: var(--bz); transform: rotateX(90deg) translateZ(calc(var(--by) * .5px)); }
.zij-voor   { --w: var(--bx); --h: var(--by); transform: translateZ(calc(var(--bz) * .5px)); }
.zij-rechts { --w: var(--bz); --h: var(--by); transform: rotateY(90deg) translateZ(calc(var(--bx) * .5px)); }

.pallet-bodem { --bx: 240; --by: 28.8; --bz: 160; }
.pallet-bodem .zij-top    { background: #C0A575; }
.pallet-bodem .zij-voor   { background: #9C8154; }
.pallet-bodem .zij-rechts { background: #866D45; }

.doos .zij-top    { background: #E2E7EA; }
.doos .zij-voor   { background: #C9D2D7; }
.doos .zij-rechts { background: #AEBAC1; }
.doos--top .zij-top { background: #EFDFA8; }

.rm .pallet-toneel { transition: none; }

/* ── beeld ───────────────────────────────────────────────────────────────── */

.videoblok, .fotoblok { display: grid; gap: clamp(1rem, 3vw, 2rem); }
@media (min-width: 800px) {
  .videoblok, .fotoblok { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: start; }
}
.videoraam { position: relative; margin: 0; }
.videoraam video {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  background: var(--tint);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  display: block;
}
.videoknop {
  position: absolute; left: .6rem; top: .6rem;
  width: 40px; height: 40px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .94); color: var(--accent);
  border: 1px solid var(--lijn-sterk); border-radius: var(--radius);
  cursor: pointer;
}
.videoknop:hover { background: #fff; border-color: var(--accent); }
.videoknop .ico { width: 17px; height: 17px; }
.videoknop .ico-stop, .videoknop[aria-pressed="true"] .ico-start { display: none; }
.videoknop[aria-pressed="true"] .ico-stop { display: block; }

.fotoraam { margin: 0; }
.fotoraam img { width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius); }
figcaption { margin-top: .5rem; font-size: .8rem; color: var(--gedempt); }
.videotekst { max-width: 62ch; }

/* ── lijsten ─────────────────────────────────────────────────────────────── */

.cijferlijst {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
}
.cijferlijst li { background: var(--vlak); padding: 1rem; }
.cijfer-getal { display: block; font-size: 1.7rem; font-weight: 600; line-height: 1.1; }
.cijfer-uitleg { display: block; margin-top: .3rem; font-size: .86rem; color: var(--gedempt); }

.punten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
          background: var(--hairline); border: 1px solid var(--hairline); }
@media (min-width: 720px) { .punten { grid-template-columns: repeat(3, 1fr); } }
.punten li { background: var(--vlak); padding: 1.1rem; }
.punt-nr { display: block; margin-bottom: .4rem; color: var(--goud-tekst); font-weight: 600; }
.punten h3 { margin-bottom: .4rem; }
.punten p { font-size: .9rem; color: var(--gedempt); margin: 0; }

.klantlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
              background: var(--hairline); border: 1px solid var(--hairline); }
@media (min-width: 560px) { .klantlijst { grid-template-columns: repeat(2, 1fr); } }
.klantlijst li { background: var(--vlak); padding: 1rem; }
.klant-naam { display: block; font-weight: 600; font-size: 1.1rem; }
.klant-soort { display: block; font-size: .84rem; color: var(--gedempt); }

.geglijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
            background: var(--hairline); border: 1px solid var(--hairline); }
@media (min-width: 640px) { .geglijst { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.geglijst a {
  background: var(--vlak); display: flex; gap: .7rem; align-items: center;
  padding: .9rem 1rem; min-height: 64px;
  color: var(--tekst); text-decoration: none; height: 100%;
}
.geglijst a:hover { background: var(--tint); color: var(--accent); }
.geglijst .ico { width: 20px; height: 20px; flex: none; color: var(--goud-tekst); }
.geg-kop { display: block; font-weight: 600; }
.geg-onder { display: block; font-size: .82rem; color: var(--gedempt); }

.receptlijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.receptlijst > li { border-bottom: 1px solid var(--hairline); scroll-margin-top: calc(var(--kop-hoogte) + 1rem); }
.recept > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem .2rem; min-height: var(--rij);
}
.recept > summary::-webkit-details-marker { display: none; }
.recept > summary:hover { color: var(--accent); }
.recept-naam { font-weight: 600; }
.recept-meta { margin-left: auto; font-size: .8rem; color: var(--gedempt); white-space: nowrap; }
.recept[open] summary .ico-omlaag { transform: rotate(180deg); }
.recept-uit { padding: 0 .2rem 1.2rem 2.4rem; display: grid; gap: 1rem; }
@media (min-width: 720px) { .recept-uit { grid-template-columns: 1fr 1fr; }
  .recept-kort { grid-column: 1 / -1; } }
.recept-uit h3 { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
                 color: var(--gedempt); margin-bottom: .4rem; }
.recept-uit ul, .recept-uit ol { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
.recept-uit li { margin-bottom: .3rem; }
.recept-kort { color: var(--gedempt); }

/* ── slot ────────────────────────────────────────────────────────────────── */

.vlak--slot {
  border-left: 3px solid var(--goud-lijn);
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FA 100%);
}
.slot {
  padding: clamp(1.2rem, 3vw, 2rem);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center;
  justify-content: space-between;
}
.slot p { margin: .4rem 0 0; color: var(--gedempt); }
.slot .knoppen { margin-top: 0; }

/* ── formulier ───────────────────────────────────────────────────────────── */

.demo-noot {
  font-size: .84rem; color: var(--goud-tekst); font-weight: 600;
  background: #FBF4DC; border-left: 3px solid var(--goud-lijn);
  padding: .55rem .75rem; margin-bottom: 1.2rem;
}
.formulier { display: grid; gap: 1rem; }
@media (min-width: 700px) { .formulier { grid-template-columns: 1fr 1fr; }
  .veld--breed { grid-column: 1 / -1; } }
.veld label { display: block; font-size: .86rem; color: var(--gedempt); margin-bottom: .25rem; }
.hint { color: var(--lijn-sterk); }
.veld input, .veld select, .veld textarea {
  font: inherit; width: 100%; min-height: var(--rij); padding: .5rem .65rem;
  border: 1px solid var(--lijn-sterk); border-radius: var(--radius);
  background: var(--vlak); color: var(--tekst);
}
.veld textarea { min-height: 7rem; resize: vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus { border-color: var(--accent); }
.veld input[aria-invalid="true"], .veld textarea[aria-invalid="true"],
.veld select[aria-invalid="true"] { border-color: #A33A1C; }
.fout { color: #8A2A12; font-size: .82rem; margin: .3rem 0 0; }
fieldset { border: 1px solid var(--hairline); border-radius: var(--radius); padding: .6rem .8rem; margin: 0; }
legend { font-size: .86rem; color: var(--gedempt); padding-inline: .3rem; }
.radio, .akkoord { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem;
                   min-height: 32px; cursor: pointer; }
.radio input, .akkoord input { width: 18px; height: 18px; min-height: 0; margin-top: .25rem; flex: none;
                               accent-color: var(--accent); }
.akkoord span { color: var(--tekst); }
.status { margin: .6rem 0 0; font-size: .86rem; color: var(--goud-tekst); font-weight: 600; }

/* ── voettekst ───────────────────────────────────────────────────────────── */

.voet { background: var(--tekst); color: #DBE1E4; margin-top: 2rem; }
.voet a { color: #DBE1E4; text-decoration: none; }
.voet a:hover { color: #F3D98A; text-decoration: underline; }
.voet-binnen {
  max-width: 1440px; margin-inline: auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(.9rem, 3vw, 2.5rem);
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.voet-merk img { width: 150px; filter: invert(1) brightness(1.9) contrast(1.1); }
.spreuk { margin: .7rem 0; font-size: .9rem; color: #F3D98A; }
.voet-sociaal { display: flex; gap: .4rem; }
.voet-sociaal a { display: grid; place-items: center; width: 40px; height: 40px;
                  border: 1px solid #3A464C; border-radius: var(--radius); }
.voet-sociaal a:hover { border-color: #F3D98A; }
.voet-kolom h2 { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
                 color: #90A0A7; margin-bottom: .6rem; }
.voet-kolom ul { list-style: none; margin: 0; padding: 0; }
.voet-kolom li a { display: block; padding: .3rem 0; font-size: .9rem; }
.voet-adres p { margin: 0 0 .3rem; }
.voet-adres a { display: flex; gap: .5rem; align-items: center; padding: .3rem 0; font-size: .9rem; }
.voet-adres .ico { width: 17px; height: 17px; flex: none; color: #F3D98A; }
.rustknop {
  margin-top: .8rem; display: inline-flex; gap: .5rem; align-items: center;
  min-height: var(--rij); padding: .4rem .8rem;
  background: none; border: 1px solid #3A464C; border-radius: var(--radius);
  color: inherit; font: inherit; font-size: .84rem; cursor: pointer;
}
.rustknop:hover { border-color: #90A0A7; }
.rustknop .ico { width: 16px; height: 16px; }
.voet-regel {
  max-width: 1440px; margin-inline: auto;
  padding: 1rem clamp(.9rem, 3vw, 2.5rem) 2rem;
  border-top: 1px solid #2A353B; font-size: .8rem; color: #90A0A7;
}

/* ── onthulling: alleen opacity en transform, dus geen layout shift ──────── */

[data-rv] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .5s var(--veer), transform .5s var(--veer);
}
[data-rv].in { opacity: 1; transform: none; }
.rm [data-rv] { opacity: 1; transform: none; transition: 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] { opacity: 1 !important; transform: none !important; }
}
.rm html, html.rm { scroll-behavior: auto; }

/* ── mobiel ──────────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .hoofdnav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--vlak); border-bottom: 1px solid var(--lijn-sterk);
    box-shadow: 0 14px 24px -18px rgba(23, 28, 31, .5);
  }
  .hoofdnav.open { display: block; }
  .hoofdnav ul { flex-direction: column; gap: 0;
                 padding: .5rem clamp(.9rem, 3vw, 2.5rem) 1rem; }
  .hoofdnav li + li { border-top: 1px solid var(--hairline); }
  .hoofdnav a { padding: .8rem .1rem; min-height: var(--rij); font-size: 1rem;
                border-bottom: 0; box-shadow: none; }
  .hoofdnav a[aria-current] { box-shadow: inset 3px 0 0 var(--goud-lijn); padding-left: .6rem; }
  .alleen-mobiel { display: list-item; }
  .menuknop {
    display: grid; place-items: center; margin-left: auto;
    width: var(--rij); height: var(--rij);
    background: var(--vlak); border: 1px solid var(--lijn-sterk);
    border-radius: var(--radius); color: var(--tekst); cursor: pointer;
  }
  .menuknop .ico { width: 20px; height: 20px; }
  .menuknop .ico-kruis, .menuknop[aria-expanded="true"] .ico-menu { display: none; }
  .menuknop[aria-expanded="true"] .ico-kruis { display: block; }
  .kopbalk { position: relative; }
}
@media (max-width: 719px) {
  .prijsknop { display: none; }
  .dienst-binnen { flex-direction: column; align-items: stretch; gap: 0; }
  .uitweg { justify-content: space-between; border-bottom: 1px solid var(--hairline); }
  .keuzes { margin-left: 0; flex-direction: column; gap: 0; }
  .keuze { border-top: 1px solid var(--hairline); }
  .keuze--taal > summary { border: 0; min-height: var(--rij); }
  .keuze--land { border-right: 0; min-height: var(--rij); }
  .keuze--land select { flex: 1; max-width: none; }
  .keuze--taal nav { position: static; border-left: 0; border-right: 0; box-shadow: none; }
  .slot { flex-direction: column; align-items: flex-start; }
}

/* ── afdrukken: het specificatieblad op papier ───────────────────────────── */

@media print {
  .melding, .dienstbalk, .kopbalk, .zijkolom, .voet, .knoppen, .reken-invoer,
  .videoknop, .aannames, .overslaan, .kruimels { display: none !important; }
  body { background: #fff; font-size: 10.5pt; }
  .werkblad { display: block; padding: 0; max-width: none; }
  .vlak, .hoofd, .pagina-kop {
    border: 1px solid #999; break-inside: avoid; margin-bottom: 8pt;
  }
  .blad-tabel { font-size: 9.5pt; }
  .open-punt { border: 1px dashed #666; background: none; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #444; }
  .pallet-raam { break-inside: avoid; }
}