/* De achtergrond: zeven kleuren en het bureau, drie behandelingen — achtergrond.css.
   GEGENEREERD door ontwerp/deur/achtergrond/bouw-proef.mjs; niet met de hand bewerken.
   Bovenaan de tokens per kandidaat uit kandidaten.json, daaronder proef.css. */

/* ———————— de kandidaten: alleen hun dag- en nachtset ———————— */
/* Huidig (A1 Linnen, ter vergelijking) */
.k-huidig,
html[data-kleur="huidig"] .volgt-kleur {
  --dag-bg: #f3f1ea;
  --dag-pp-papier: #fdfcf6;
  --dag-tekst: #373d49;
  --dag-tekst-gedempt: #62656c;
  --nacht-bg: #10162a;
  --nacht-pp-papier: #1d2540;
  --nacht-tekst: #dcd8ce;
  --nacht-tekst-gedempt: #99a0b1;
}

/* Bot */
.k-bot,
html[data-kleur="bot"] .volgt-kleur {
  --dag-bg: #f2eee6;
  --dag-pp-papier: #fcfaf5;
  --dag-tekst: #323846;
  --dag-tekst-gedempt: #615e5a;
  --nacht-bg: #0c1524;
  --nacht-pp-papier: #182233;
  --nacht-tekst: #dedad2;
  --nacht-tekst-gedempt: #9aa2ad;
  /* advies §4: één papier (oppervlak = papier) en een rand in de tint van de grond */
  --dag-oppervlak: var(--dag-pp-papier);
  --nacht-oppervlak: var(--nacht-pp-papier);
  --dag-rand: color-mix(in oklab, var(--dag-bg), var(--dag-tekst-gedempt) 18%);
  --nacht-rand: color-mix(in oklab, var(--nacht-bg), var(--nacht-tekst-gedempt) 18%);
}

/* Kalksteen */
.k-kalksteen,
html[data-kleur="kalksteen"] .volgt-kleur {
  --dag-bg: #eee9e4;
  --dag-pp-papier: #fcf9f6;
  --dag-tekst: #303744;
  --dag-tekst-gedempt: #5f5c58;
  --nacht-bg: #0c141e;
  --nacht-pp-papier: #18212d;
  --nacht-tekst: #e0dcd7;
  --nacht-tekst-gedempt: #9aa1a9;
  /* advies §4: één papier (oppervlak = papier) en een rand in de tint van de grond */
  --dag-oppervlak: var(--dag-pp-papier);
  --nacht-oppervlak: var(--nacht-pp-papier);
  --dag-rand: color-mix(in oklab, var(--dag-bg), var(--dag-tekst-gedempt) 18%);
  --nacht-rand: color-mix(in oklab, var(--nacht-bg), var(--nacht-tekst-gedempt) 18%);
}

/* Zand */
.k-zand,
html[data-kleur="zand"] .volgt-kleur,
html:not([data-kleur]) .volgt-kleur {
  --dag-bg: #eee7dc;
  --dag-pp-papier: #fcf9f3;
  --dag-tekst: #303744;
  --dag-tekst-gedempt: #5e5b56;
  --nacht-bg: #0c1524;
  --nacht-pp-papier: #182335;
  --nacht-tekst: #e0dad0;
  --nacht-tekst-gedempt: #9aa2ad;
  /* advies §4: één papier (oppervlak = papier) en een rand in de tint van de grond */
  --dag-oppervlak: var(--dag-pp-papier);
  --nacht-oppervlak: var(--nacht-pp-papier);
  --dag-rand: color-mix(in oklab, var(--dag-bg), var(--dag-tekst-gedempt) 18%);
  --nacht-rand: color-mix(in oklab, var(--nacht-bg), var(--nacht-tekst-gedempt) 18%);
}

/* Perkament */
.k-perkament,
html[data-kleur="perkament"] .volgt-kleur {
  --dag-bg: #ebe2d4;
  --dag-pp-papier: #fcf9f2;
  --dag-tekst: #2f3543;
  --dag-tekst-gedempt: #5d5953;
  --nacht-bg: #0d1627;
  --nacht-pp-papier: #1a2438;
  --nacht-tekst: #dfd8cc;
  --nacht-tekst-gedempt: #9aa2ae;
  /* advies §4: één papier (oppervlak = papier) en een rand in de tint van de grond */
  --dag-oppervlak: var(--dag-pp-papier);
  --nacht-oppervlak: var(--nacht-pp-papier);
  --dag-rand: color-mix(in oklab, var(--dag-bg), var(--dag-tekst-gedempt) 18%);
  --nacht-rand: color-mix(in oklab, var(--nacht-bg), var(--nacht-tekst-gedempt) 18%);
}

/* Crème */
.k-creme,
html[data-kleur="creme"] .volgt-kleur {
  --dag-bg: #fbf6e8;
  --dag-pp-papier: #fefdf8;
  --dag-tekst: #323846;
  --dag-tekst-gedempt: #62605b;
  --nacht-bg: #0f1629;
  --nacht-pp-papier: #1b243b;
  --nacht-tekst: #e2ded2;
  --nacht-tekst-gedempt: #9da3b1;
  /* advies §4: één papier (oppervlak = papier) en een rand in de tint van de grond */
  --dag-oppervlak: var(--dag-pp-papier);
  --nacht-oppervlak: var(--nacht-pp-papier);
  --dag-rand: color-mix(in oklab, var(--dag-bg), var(--dag-tekst-gedempt) 18%);
  --nacht-rand: color-mix(in oklab, var(--nacht-bg), var(--nacht-tekst-gedempt) 18%);
}

/* Kalkwit */
.k-kalkwit,
html[data-kleur="kalkwit"] .volgt-kleur {
  --dag-bg: #f9f7f4;
  --dag-pp-papier: #fefdfb;
  --dag-tekst: #323846;
  --dag-tekst-gedempt: #62605d;
  --nacht-bg: #0b1119;
  --nacht-pp-papier: #161d27;
  --nacht-tekst: #e3e1de;
  --nacht-tekst-gedempt: #9a9fa6;
  /* advies §4: één papier (oppervlak = papier) en een rand in de tint van de grond */
  --dag-oppervlak: var(--dag-pp-papier);
  --nacht-oppervlak: var(--nacht-pp-papier);
  --dag-rand: color-mix(in oklab, var(--dag-bg), var(--dag-tekst-gedempt) 18%);
  --nacht-rand: color-mix(in oklab, var(--nacht-bg), var(--nacht-tekst-gedempt) 18%);
}

/* Bureau */
.k-bureau,
html[data-kleur="bureau"] .volgt-kleur {
  --dag-bg: #eee7dc;
  --dag-pp-papier: #fcf9f3;
  --dag-tekst: #303744;
  --dag-tekst-gedempt: #5e5b56;
  --nacht-bg: #0c1524;
  --nacht-pp-papier: #182335;
  --nacht-tekst: #e0dad0;
  --nacht-tekst-gedempt: #9aa2ad;
  /* advies §4: één papier (oppervlak = papier) en een rand in de tint van de grond */
  --dag-oppervlak: var(--dag-pp-papier);
  --nacht-oppervlak: var(--nacht-pp-papier);
  --dag-rand: color-mix(in oklab, var(--dag-bg), var(--dag-tekst-gedempt) 18%);
  --nacht-rand: color-mix(in oklab, var(--nacht-bg), var(--nacht-tekst-gedempt) 18%);
}

/* ———————— Bureau: de sluier over het hout 's nachts (zie proef.css, .bureau) ———————— */
:root {
  --bureau-sluier-sterkte: 60%;
}

/* ———————— de gekozen kleur: ring in rij 1, naam in rij 2 ———————— */
html[data-kleur="huidig"] .kandidaat[data-kandidaat="huidig"] .toestel {
  outline-color: color-mix(in srgb, var(--dag-pp-papier) 88%, transparent);
}
html[data-kleur="huidig"] .kandidaat[data-kandidaat="huidig"] :is(.gekozen-teken, .naar-groot),
html[data-kleur="huidig"] .kleurnaam[data-kandidaat="huidig"] {
  display: inline;
}
html[data-kleur="bot"] .kandidaat[data-kandidaat="bot"] .toestel {
  outline-color: color-mix(in srgb, var(--dag-pp-papier) 88%, transparent);
}
html[data-kleur="bot"] .kandidaat[data-kandidaat="bot"] :is(.gekozen-teken, .naar-groot),
html[data-kleur="bot"] .kleurnaam[data-kandidaat="bot"] {
  display: inline;
}
html[data-kleur="kalksteen"] .kandidaat[data-kandidaat="kalksteen"] .toestel {
  outline-color: color-mix(in srgb, var(--dag-pp-papier) 88%, transparent);
}
html[data-kleur="kalksteen"] .kandidaat[data-kandidaat="kalksteen"] :is(.gekozen-teken, .naar-groot),
html[data-kleur="kalksteen"] .kleurnaam[data-kandidaat="kalksteen"] {
  display: inline;
}
html[data-kleur="zand"] .kandidaat[data-kandidaat="zand"] .toestel {
  outline-color: color-mix(in srgb, var(--dag-pp-papier) 88%, transparent);
}
html[data-kleur="zand"] .kandidaat[data-kandidaat="zand"] :is(.gekozen-teken, .naar-groot),
html[data-kleur="zand"] .kleurnaam[data-kandidaat="zand"] {
  display: inline;
}
html[data-kleur="perkament"] .kandidaat[data-kandidaat="perkament"] .toestel {
  outline-color: color-mix(in srgb, var(--dag-pp-papier) 88%, transparent);
}
html[data-kleur="perkament"] .kandidaat[data-kandidaat="perkament"] :is(.gekozen-teken, .naar-groot),
html[data-kleur="perkament"] .kleurnaam[data-kandidaat="perkament"] {
  display: inline;
}
html[data-kleur="creme"] .kandidaat[data-kandidaat="creme"] .toestel {
  outline-color: color-mix(in srgb, var(--dag-pp-papier) 88%, transparent);
}
html[data-kleur="creme"] .kandidaat[data-kandidaat="creme"] :is(.gekozen-teken, .naar-groot),
html[data-kleur="creme"] .kleurnaam[data-kandidaat="creme"] {
  display: inline;
}
html[data-kleur="kalkwit"] .kandidaat[data-kandidaat="kalkwit"] .toestel {
  outline-color: color-mix(in srgb, var(--dag-pp-papier) 88%, transparent);
}
html[data-kleur="kalkwit"] .kandidaat[data-kandidaat="kalkwit"] :is(.gekozen-teken, .naar-groot),
html[data-kleur="kalkwit"] .kleurnaam[data-kandidaat="kalkwit"] {
  display: inline;
}
html[data-kleur="bureau"] .kandidaat[data-kandidaat="bureau"] .toestel {
  outline-color: color-mix(in srgb, var(--dag-pp-papier) 88%, transparent);
}
html[data-kleur="bureau"] .kandidaat[data-kandidaat="bureau"] :is(.gekozen-teken, .naar-groot),
html[data-kleur="bureau"] .kleurnaam[data-kandidaat="bureau"] {
  display: inline;
}

/* De achtergrond: zeven kleuren, drie behandelingen — opmaak van de kleurproef (24-09-2026).

   Hoort bij bouw-proef.mjs. Die zet de tokens per kandidaat (uit kandidaten.json) vóór dit bestand
   in achtergrond.css. Volgorde op de pagina: stijl.css (de mockups van de deur), behandelingen.css
   (ongewijzigd), achtergrond.css.

   HOE DE TOKENS LOPEN
   - Een kandidaat (.k-zand, of .volgt-kleur onder html[data-kleur]) zet alleen zijn dag- en
     nachtset: --dag-bg, --dag-pp-papier, --dag-tekst, --dag-tekst-gedempt en hetzelfde voor
     --nacht-* (plus --oppervlak en --rand in de tint van de grond, zie bouw-proef.mjs).
   - Een licht (.licht-dag / .licht-nacht, of .volgt-licht onder html[data-licht]) wijst op hetzelfde
     element de rollen (--bg, --pp-papier, --tekst, …) naar die set. Dat moet per kader opnieuw:
     stijl.css rekent de rollen op :root uit, en een rol erft als kleur, niet als verwijzing
     (dezelfde valkuil als --accent in MASTER §11).
   - Ook de rollen van behandelingen.css (--beh-*) staan hier per licht, zodat een nachtkader naast
     een dagkader kan staan. .kamer en prefers-color-scheme doen in de kaders niet mee.
   - De korrel van nu (korrel, vignet, ruitraster) is hier een eigen laag in elk scherm
     (.korrel-licht, .korrel-ruis), los van de behandelingen: die zetten de textuur van 24-09 uit,
     en de schakelaar moet hem er ook bovenop kunnen leggen.

   Geen losse kleur in de HTML: alles is een rol of een token. De enige waarden hier zijn de korrel
   van nu, letterlijk uit stijl.css (--textuur-licht), omdat die daar alleen op :root bestaat. */


/* ————————————————————————————————————————————————————————————————————————————————
   Licht per kader: de rollen van stijl.css en behandelingen.css naar de dag- of nachtset
   ———————————————————————————————————————————————————————————————————————————————— */
.licht-dag,
html:not([data-licht="nacht"]) .volgt-licht {
  color-scheme: light;
  --bg: var(--dag-bg);
  --oppervlak: var(--dag-oppervlak);
  --rand: var(--dag-rand);
  --inkt: var(--dag-inkt);
  --tekst: var(--dag-tekst);
  --tekst-gedempt: var(--dag-tekst-gedempt);
  --signaal: var(--dag-signaal);
  --fout: var(--dag-fout);
  --op-accent: var(--dag-op-accent);
  --signaal-inkt: var(--dag-signaal-inkt);
  --foto-vlak: var(--dag-foto-vlak);
  --pp-papier: var(--dag-pp-papier);
  --pp-lijn: var(--dag-pp-lijn);
  --pp-schaduw: var(--dag-pp-schaduw);
  --goud-lijn: var(--dag-goud-lijn);
  --schaduw-rust: var(--dag-schaduw-rust);
  --schaduw-kaart: var(--dag-schaduw-kaart);
  --schaduw-op: var(--dag-schaduw-op);
  --mic-ring: var(--dag-goud-lijn);
  --glas-vlak: color-mix(in srgb, var(--dag-pp-papier) 46%, transparent);
  --glas-rand: color-mix(in srgb, var(--dag-pp-papier) 62%, transparent);
  /* over een foto staat tekst altijd in het dagpapier van de kandidaat (stijl.css: --op-foto) */
  --op-foto: var(--dag-pp-papier);
  --op-foto-stil: color-mix(in srgb, var(--dag-pp-papier) 82%, transparent);
  --tijdbalk-lijn: color-mix(in srgb, var(--dag-pp-papier) 32%, transparent);
  --tijdbalk-venster: var(--dag-pp-papier);

  /* behandelingen.css, de dagkant van zijn :root */
  --beh-bg-bron: var(--dag-bg);
  --beh-schaduwbasis: var(--beh-dag-schaduwbasis);
  --beh-hoogsel: var(--beh-dag-hoogsel);
  --beh-snede: var(--beh-dag-snede);
  --beh-nachtrand: var(--beh-dag-nachtrand);
  --beh-poel: var(--beh-dag-poel);
  --beh-val: var(--beh-dag-val);
  --beh-diep: var(--beh-dag-diep);
  --beh-papier-op: var(--beh-dag-papier-op);
  --beh-contact: var(--beh-dag-contact);
  --beh-omgeving: var(--beh-dag-omgeving);
  --beh-vezel-helling: 1;

  /* de korrel van nu (stijl.css, textuur van 24-09): 5% ruis in multiply, verloop en vignet */
  --korrel-licht:
    linear-gradient(to bottom, rgba(40, 36, 30, 0) 35%, rgba(40, 36, 30, 0.02) 100%),
    radial-gradient(ellipse 85% 75% at 50% 45%, rgba(40, 36, 30, 0) 55%, rgba(40, 36, 30, 0.06) 100%);
  --korrel-sterkte: 0.05;
  --korrel-meng: multiply;
  --korrel-raster: var(--dag-pp-korrel);

  /* Bureau: overdag het hout zoals het is */
  --bureau-sluier: linear-gradient(transparent, transparent);
}

.licht-nacht,
html[data-licht="nacht"] .volgt-licht {
  color-scheme: dark;
  --bg: var(--nacht-bg);
  --oppervlak: var(--nacht-oppervlak);
  --rand: var(--nacht-rand);
  --inkt: var(--nacht-inkt);
  --tekst: var(--nacht-tekst);
  --tekst-gedempt: var(--nacht-tekst-gedempt);
  --signaal: var(--nacht-signaal);
  --fout: var(--nacht-fout);
  --op-accent: var(--nacht-op-accent);
  --signaal-inkt: var(--nacht-signaal-inkt);
  --foto-vlak: var(--nacht-foto-vlak);
  --pp-papier: var(--nacht-pp-papier);
  --pp-lijn: var(--nacht-pp-lijn);
  --pp-schaduw: var(--nacht-pp-schaduw);
  --goud-lijn: var(--nacht-goud-lijn);
  --schaduw-rust: var(--nacht-schaduw-rust);
  --schaduw-kaart: var(--nacht-schaduw-kaart);
  --schaduw-op: var(--nacht-schaduw-op);
  --mic-ring: var(--nacht-goud-lijn);
  --glas-vlak: color-mix(in srgb, var(--nacht-pp-papier) 46%, transparent);
  --glas-rand: color-mix(in srgb, var(--nacht-pp-papier) 62%, transparent);
  --op-foto: var(--dag-pp-papier);
  --op-foto-stil: color-mix(in srgb, var(--dag-pp-papier) 82%, transparent);
  --tijdbalk-lijn: color-mix(in srgb, var(--dag-pp-papier) 32%, transparent);
  --tijdbalk-venster: var(--dag-pp-papier);

  --beh-bg-bron: var(--nacht-bg);
  --beh-schaduwbasis: var(--beh-nacht-schaduwbasis);
  --beh-hoogsel: var(--beh-nacht-hoogsel);
  --beh-snede: var(--beh-nacht-snede);
  --beh-nachtrand: var(--beh-nacht-nachtrand);
  --beh-poel: var(--beh-nacht-poel);
  --beh-val: var(--beh-nacht-val);
  --beh-diep: var(--beh-nacht-diep);
  --beh-papier-op: var(--beh-nacht-papier-op);
  --beh-contact: var(--beh-nacht-contact);
  --beh-omgeving: var(--beh-nacht-omgeving);
  --beh-vezel-helling: 0;

  /* 's nachts: 4,5% ruis in screen (tilt het zwart op), verloop en vignet in zwart */
  --korrel-licht:
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.04) 100%),
    radial-gradient(ellipse 85% 75% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.08) 100%);
  --korrel-sterkte: 0.045;
  --korrel-meng: screen;
  --korrel-raster: var(--nacht-pp-korrel);

  /* Bureau: 's nachts dezelfde foto onder een sluier van de nachtgrond (sterkte in achtergrond.css) */
  --bureau-sluier: linear-gradient(
    color-mix(in srgb, var(--nacht-bg) var(--bureau-sluier-sterkte), transparent),
    color-mix(in srgb, var(--nacht-bg) var(--bureau-sluier-sterkte), transparent)
  );
}


/* ————————————————————————————————————————————————————————————————————————————————
   Het scherm: de textuur van stijl.css uit, de korrel van nu als eigen laag
   ———————————————————————————————————————————————————————————————————————————————— */
/* stijl.css legt korrel en vignet op .scherm::before/::after. Hier weg: de korrel komt uit de eigen
   laag hieronder, en ::before is van behandeling a of b (het licht, de vezel) als die aanstaat. */
.proef .scherm::after {
  content: none;
}
.proef .scherm:not(.behandeling-a, .behandeling-b)::before {
  content: none;
}
/* Het ruitraster in het papier (stijl.css .papier::before): alleen met de korrel aan. */
.proef .papier::before {
  content: none;
}
html[data-korrel="aan"] .proef .volgt-korrel .papier::before,
.proef .korrel-vast .papier::before {
  content: "";
  opacity: var(--korrel-raster);
}
.korrel-licht,
.korrel-ruis {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}
.korrel-licht {
  z-index: 30;
  background: var(--korrel-licht);
}
.korrel-ruis {
  z-index: 31;
  background-image: var(--textuur-korrel);
  background-size: var(--textuur-tegel) var(--textuur-tegel);
  mix-blend-mode: var(--korrel-meng);
  opacity: var(--korrel-sterkte);
}
html[data-korrel="aan"] .volgt-korrel :is(.korrel-licht, .korrel-ruis),
.korrel-vast :is(.korrel-licht, .korrel-ruis) {
  display: block;
}

/* Behandeling a: het licht begint waar het zichtbare linnen begint (behandelingen.css:
   --beh-licht-van). Bij het huis onder de band (148 + 51 px van 844 ≈ 24%), bij de opening onder
   het open beeld (440 + 51 px ≈ 58%). */
.scherm.m-huis {
  --beh-licht-van: 24%;
}
.scherm.m-opening {
  --beh-licht-van: 58%;
}
/* Eén regel van (c) die in de mockup anders heet: in de app is het .kop .scrim-onder, hier de korte
   scrim onder de plaat (.kop is op deze pagina de paginakop van stijl.css). Rechts, waar de
   attributie staat, volle sterkte; links nog 45%. Letterlijk als in behandelingen.css. */
.behandeling-c .plaat .scrim-onder {
  -webkit-mask-image: linear-gradient(to left, var(--inkt) 40%, color-mix(in srgb, var(--inkt) 45%, transparent) 100%);
  mask-image: linear-gradient(to left, var(--inkt) 40%, color-mix(in srgb, var(--inkt) 45%, transparent) 100%);
}

/* Het moment: elk kader draagt beide schermen; de schakelaar laat er één zien. */
html[data-moment="opening"] .volgt-moment > .m-huis,
html:not([data-moment="opening"]) .volgt-moment > .m-opening {
  display: none;
}


/* ————————————————————————————————————————————————————————————————————————————————
   De pagina
   ———————————————————————————————————————————————————————————————————————————————— */
.blad.breed {
  max-width: 2400px;
}
.aanbevelingen {
  display: grid;
  gap: var(--ruimte-1);
  margin: var(--ruimte-2) 0 0;
  padding: 0;
  list-style: none;
  max-width: 70ch;
}
.aanbevelingen li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--ruimte-3);
  align-items: baseline;
  font-size: var(--maat-groot);
  color: var(--tekst);
}
.aanbevelingen b {
  font-family: var(--font-kop);
  font-size: var(--maat-klein);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inkt);
}
.deel {
  margin-top: var(--ruimte-2);
  font-size: var(--maat-klein);
  color: var(--tekst-gedempt);
}
.rij-sectie {
  padding: var(--ruimte-5) 0 var(--ruimte-4);
  scroll-margin-top: 8rem;
}
.rij-sectie .moment-kop p + p {
  margin-top: calc(-1 * var(--ruimte-1));
}
.klein {
  font-size: var(--maat-klein);
  color: var(--tekst-gedempt);
}

/* De balk: vijf schakelaars. Op een telefoon niet plakkend, anders neemt hij het scherm. */
.proef .balk .schakelaars {
  justify-content: flex-end;
}
.proef .schakelaar button {
  min-width: 0;
}
@media (max-width: 719px) {
  .proef .balk {
    position: static;
  }
  .proef .balk .schakelaars {
    justify-content: flex-start;
    padding-bottom: var(--ruimte-2);
  }
  /* een pil met vijf of zeven knoppen past niet op 390: hij breekt, en wordt dan een blok */
  .proef .schakelaar {
    flex-wrap: wrap;
    border-radius: var(--radius-klein);
  }
}


/* ————————————————————————————————————————————————————————————————————————————————
   Rij 1: zeven kleuren en het bureau, met onder elk kader een kaartje in het eigen papier
   ———————————————————————————————————————————————————————————————————————————————— */
/* --z is de weergave van het toestel (390 × 844 blijft 390 × 844; alleen de zoom schaalt). Per stap
   nagerekend: 8 × 410 × z + 7 × 12 + 2 × 20 + 2 × 20 ≤ breedte − 15 (een vaste schuifbalk); onder
   1600 twee rijen van vier. */
.kandidaten {
  --z: 0.6;
  display: flex;
  gap: var(--ruimte-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: var(--ruimte-4) var(--ruimte-4) var(--ruimte-6);
}
.kandidaten > .kandidaat {
  flex: 0 0 calc((var(--telefoon-b) + 2 * var(--telefoon-rand)) * var(--z));
  scroll-snap-align: center;
}
@media (min-width: 1000px) {
  .kandidaten {
    --z: 0.5;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ruimte-5) var(--ruimte-3);
    overflow: visible;
  }
}
@media (min-width: 1200px) {
  .kandidaten {
    --z: 0.64;
  }
}
@media (min-width: 1400px) {
  .kandidaten {
    --z: 0.76;
  }
}
@media (min-width: 1500px) {
  .kandidaten {
    --z: 0.82;
  }
}
@media (min-width: 1600px) {
  .kandidaten {
    --z: 0.43;
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media (min-width: 1760px) {
  .kandidaten {
    --z: 0.48;
  }
}
@media (min-width: 1920px) {
  .kandidaten {
    --z: 0.52;
  }
}
@media (min-width: 2440px) {
  .kandidaten {
    --z: 0.68;
  }
}
.kandidaten .toestel {
  zoom: var(--z);
}
.kandidaat {
  margin: 0;
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--ruimte-3);
}
/* De gekozen kleur (de schakelaar "kleur"): een lichte ring om het toestel, gemeten ná de zoom. */
.kandidaat .toestel {
  outline: calc(3px / var(--z)) solid transparent;
  outline-offset: calc(6px / var(--z));
}

/* Het kaartje: een vel in het papier van de kandidaat, op het hout. Tekst in zijn eigen rollen,
   dus wat hier staat is meteen een proef van tekst en gedempt grijs op zijn papier. */
.kaart {
  width: 100%;
  display: grid;
  gap: var(--ruimte-2);
  padding: var(--ruimte-3);
  border-radius: var(--pp-radius);
  background: var(--pp-papier);
  color: var(--tekst);
  font-size: var(--maat-klein);
  line-height: 1.4;
  filter: var(--tafel-afdruk-schaduw);
}
.kaart-kop {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--ruimte-1) var(--ruimte-2);
}
.kaart h3 {
  font-size: var(--maat-groot);
  color: var(--inkt);
  letter-spacing: -0.005em;
}
.gekozen-teken {
  display: none;
  padding: 0 var(--ruimte-2);
  border: 1px solid var(--goud-lijn);
  border-radius: var(--radius-pil);
  font-size: var(--maat-mini);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inkt);
}
.kaart-sub,
.kaart-noot {
  font-size: var(--maat-mini);
  color: var(--tekst-gedempt);
}
.kaart-hex {
  margin: 0;
  display: grid;
  gap: 2px;
}
.kaart-hex > div {
  display: flex;
  justify-content: space-between;
  gap: var(--ruimte-2);
}
.kaart-hex dt {
  color: var(--tekst-gedempt);
}
.kaart-hex dd {
  margin: 0;
  color: var(--inkt);
  font-variant-numeric: tabular-nums lining-nums;
}
table.kaart-contrast {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
}
.kaart-contrast th,
.kaart-contrast td {
  padding: 2px 0;
  font-weight: 400;
  text-align: right;
}
.kaart-contrast th:first-child {
  text-align: left;
  color: var(--tekst-gedempt);
}
.kaart-contrast thead th {
  font-size: var(--maat-mini);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-gedempt);
  border-bottom: 1px solid var(--rand);
}
.kaart-contrast td {
  color: var(--inkt);
}
.kaart-waarom {
  color: var(--tekst);
}
.kaart-voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-1) var(--ruimte-3);
}
.kies {
  position: relative;
  height: 2rem;
  padding: 0 var(--ruimte-3);
  border: 1px solid var(--rand);
  border-radius: var(--radius-pil);
  background: none;
  color: var(--inkt);
  font-size: var(--maat-klein);
  font-weight: 600;
  cursor: pointer;
}
.kies::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 100%;
  height: var(--tap);
  transform: translate(-50%, -50%);
}
.kies .kies-wel,
.kies[aria-pressed="true"] .kies-niet {
  display: none;
}
.kies[aria-pressed="true"] .kies-wel {
  display: inline;
}
.kies[aria-pressed="true"] {
  background: var(--inkt);
  color: var(--op-accent);
  border-color: var(--inkt);
}
.naar-groot {
  display: none;
  font-size: var(--maat-klein);
  color: var(--tekst);
}

/* Wat met de schakelaars meeloopt in de kaartjes: dag of nacht, en het contrast per behandeling. */
html[data-licht="nacht"] .toon-dag,
html:not([data-licht="nacht"]) .toon-nacht {
  display: none;
}
.st {
  display: none;
}
html:not([data-licht="nacht"]):is([data-behandeling="geen"], [data-behandeling="b"]) .st-dag-kaal,
html:not([data-licht="nacht"])[data-behandeling="a"] .st-dag-a,
html:not([data-licht="nacht"]):is([data-behandeling="c"], [data-behandeling="ca"]) .st-dag-c,
html[data-licht="nacht"]:is([data-behandeling="geen"], [data-behandeling="b"]) .st-nacht-kaal,
html[data-licht="nacht"]:is([data-behandeling="a"], [data-behandeling="c"], [data-behandeling="ca"]) .st-nacht-lagen {
  display: inline;
}


/* ————————————————————————————————————————————————————————————————————————————————
   Rij 2: de gekozen kleur groot, dag en nacht, 390 en 1440
   ———————————————————————————————————————————————————————————————————————————————— */
.twee {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ruimte-5) var(--ruimte-7);
  padding: var(--ruimte-5) var(--ruimte-4) var(--ruimte-6);
}
.twee .toestel,
.drie .toestel {
  zoom: 0.7;
}
@media (min-width: 600px) {
  .twee .toestel,
  .drie .toestel {
    zoom: 0.8;
  }
}
@media (min-width: 1000px) {
  .twee .toestel,
  .drie .toestel {
    zoom: 1;
  }
}
/* De stand in woorden: wat de schakelaars in deze rij hebben gezet. */
.toon-eigen,
.kleurnaam,
.behnaam,
.korrelnaam {
  display: none;
}
html:is(:not([data-kleur="zand"]), :not([data-behandeling="ca"]), [data-korrel="aan"]) .toon-eigen {
  display: inline;
}
html:is(:not([data-kleur="zand"]), :not([data-behandeling="ca"]), [data-korrel="aan"]) .toon-aanbeveling {
  display: none;
}
html[data-behandeling="geen"] .behnaam[data-b="geen"],
html[data-behandeling="a"] .behnaam[data-b="a"],
html[data-behandeling="c"] .behnaam[data-b="c"],
html[data-behandeling="ca"] .behnaam[data-b="ca"],
html[data-behandeling="b"] .behnaam[data-b="b"],
html[data-korrel="aan"] .korrelnaam[data-korrel="aan"],
html:not([data-korrel="aan"]) .korrelnaam[data-korrel="uit"] {
  display: inline;
}
/* Bureau heeft een eigen kader (andere opbouw); de kleur-schakelaar laat het ene of het andere zien. */
html:not([data-kleur="bureau"]) .alleen-bureau,
html[data-kleur="bureau"] .niet-bureau {
  display: none;
}
html[data-kleur="bureau"] .stand-regel .behnaam[data-b],
html[data-kleur="bureau"] .stand-regel .korrelnaam[data-korrel="aan"] {
  display: none;
}
html[data-kleur="bureau"] .stand-regel .korrelnaam[data-korrel="uit"] {
  display: inline;
}
.stand-regel {
  font-size: var(--maat-groot);
  color: var(--inkt);
}
.stand-regel b {
  font-family: var(--font-kop);
  font-weight: 600;
}
/* Twee laptops (1440 × 900) naast elkaar; de zoom per stap nagerekend zoals bij rij 1. */
.laptops {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ruimte-5);
  margin-top: var(--ruimte-5);
}
.laptop-plek {
  display: grid;
  gap: var(--ruimte-2);
  min-width: 0;
}
.laptop-plek > p {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: var(--maat-basis);
  color: var(--inkt);
}
.laptops .laptop-houder {
  --laptop-zoom: 0.22;
  margin-inline: 0;
}
@media (min-width: 600px) {
  .laptops .laptop-houder {
    --laptop-zoom: 0.37;
  }
}
@media (min-width: 768px) {
  .laptops .laptop-houder {
    --laptop-zoom: 0.49;
  }
}
@media (min-width: 960px) {
  .laptops .laptop-houder {
    --laptop-zoom: 0.62;
  }
}
@media (min-width: 1100px) {
  .laptops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ruimte-4);
  }
  .laptops .laptop-houder {
    --laptop-zoom: 0.35;
  }
}
@media (min-width: 1280px) {
  .laptops .laptop-houder {
    --laptop-zoom: 0.41;
  }
}
@media (min-width: 1440px) {
  .laptops .laptop-houder {
    --laptop-zoom: 0.47;
  }
}
@media (min-width: 1600px) {
  .laptops .laptop-houder {
    --laptop-zoom: 0.52;
  }
}
@media (min-width: 1920px) {
  .laptops .laptop-houder {
    --laptop-zoom: 0.64;
  }
}
@media (min-width: 2440px) {
  .laptops .laptop-houder {
    --laptop-zoom: 0.8;
  }
}


/* ————————————————————————————————————————————————————————————————————————————————
   Rij 3: nu naast de aanbeveling, met wat er verandert
   ———————————————————————————————————————————————————————————————————————————————— */
/* Drie kaders (nu, aanbeveling, bureau) en de notitie; de notitie staat eronder tot er naast de drie
   plaats is. Per stap nagerekend zoals rij 1. */
.drie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  justify-content: center;
  align-items: start;
  gap: var(--ruimte-5) var(--ruimte-6);
  padding: var(--ruimte-5) var(--ruimte-4) var(--ruimte-6);
}
@media (min-width: 820px) {
  .drie {
    grid-template-columns: repeat(2, max-content);
  }
  .drie > .notitie {
    grid-column: 1 / -1;
    justify-self: center;
  }
}
@media (min-width: 1300px) {
  .drie {
    grid-template-columns: repeat(3, max-content);
  }
  .drie .toestel {
    zoom: 0.88;
  }
}
@media (min-width: 1600px) {
  .drie .toestel {
    zoom: 1;
  }
}
@media (min-width: 2100px) {
  .drie {
    grid-template-columns: repeat(3, max-content) minmax(0, 34rem);
    padding-inline: var(--ruimte-6);
  }
  .drie > .notitie {
    grid-column: auto;
    justify-self: start;
  }
}
.drie .notitie ul {
  gap: var(--ruimte-3);
}
.drie .notitie li b {
  color: var(--inkt);
  font-weight: 600;
}
.drie .notitie .klein {
  margin-top: var(--ruimte-1);
}


/* ————————————————————————————————————————————————————————————————————————————————
   Bureau: het walnoten blad als grond van de telefoon, alle tekst op papier (E, 24-09)
   ———————————————————————————————————————————————————————————————————————————————— */
/* Dezelfde foto als de tafel, vast op het toestel (het scherm scrolt niet). 's Nachts de sluier van
   de nachtgrond erover. Geen korrel of vignet: het hout heeft zijn eigen textuur, en het toestel
   draagt geen .volgt-korrel. De tokens zijn die van Zand (.k-bureau); behandeling c ligt vast. */
.proef .scherm.bureau {
  --plaat-open: 316px; /* de afdruk heeft een rand en Carmen twee stroken: lager dan de 440 van A, anders valt haar eerste strook boven weg */
  --plaat-band: 112px; /* ingeklapt: een smalle afdruk */
  /* het vel van (c), voor alles wat op het hout ligt: licht op de bovenrand, een warme snede,
     contact en een schaduw naar rechtsonder (1:2, zoals op tafel) */
  --bureau-vel:
    inset 0 1px 0 var(--beh-licht),
    0 0 0 1px var(--beh-rand),
    0 0 0 1px var(--beh-lichtrand),
    0 1px 1px var(--beh-contact-kleur),
    3px 6px 16px -6px var(--beh-omgeving-kleur);
  background: var(--bureau-sluier), var(--hout) url("beeld/hout-walnoot.jpg") center / cover;
}
/* De plaat en zijn onderrand samen: één afdruk in zijn passe-partout, zoals de afdrukken op de band. */
.bureau-afdruk {
  flex: 0 0 auto;
  position: relative;
  margin: var(--ruimte-3) var(--ruimte-3) 0;
  padding: var(--pp-rand-galerij) var(--pp-rand-galerij) 0;
  border-radius: var(--pp-radius);
  background: var(--beh-papier);
  box-shadow: var(--bureau-vel);
}
.bureau-afdruk .foto-vak {
  border-radius: var(--pp-radius-foto);
}
.bureau .bureau-afdruk .onderrand {
  padding: var(--ruimte-2) var(--ruimte-1) var(--pp-rand-galerij);
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}
/* Carmen spreekt op een strook linnen (het linnen van Zand), het huis op zijn vel papier: het
   materiaal zegt nog steeds wie er spreekt. De duw staat als kleine regel op haar strook. */
.bureau .stroom {
  gap: var(--ruimte-3);
}
.bureau .stroom > :not(.huisvel) {
  padding: var(--ruimte-3) var(--ruimte-4);
  border-radius: var(--pp-radius);
  background: var(--bg);
  box-shadow: var(--bureau-vel);
}
.bureau .stroom .statusregel {
  min-height: 0;
  margin-top: var(--ruimte-2);
  padding-inline: 0;
}
/* Het veld is al papier (c); de andere voorzetten ook, anders staat hun tekst op het hout. */
.bureau .chip:not(.eerst) {
  background: var(--beh-papier);
  box-shadow:
    0 0 0 1px var(--beh-lichtrand),
    0 1px 1px var(--beh-contact-kleur),
    1px 2px 6px -2px var(--beh-omgeving-kleur);
}