/* Lettertypen, van onze eigen server.
   ------------------------------------------------------------------
   Opgehaald bij Google Fonts en hier neergezet, met opzet. Laad je ze
   rechtstreeks bij Google, dan gaat het IP-adres van elke bezoeker naar
   een server in de Verenigde Staten voordat er iets te kiezen valt. Dat
   is precies het soort verwerking waar je anders toestemming voor moet
   vragen, en dat voor een lettertype.

   Alleen de latijnse subsets: deze sites zijn Nederlands en Vlaams.
   Bijwerken doe je door dezelfde CSS bij Google op te halen en dit
   script opnieuw te draaien.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/martian-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/martian-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ *
 * Toner-inkoop — één stijlblad voor alle drie de sites.
 *
 * Systeemregel: lezen en invullen gebeurt altijd op papier, ook op de
 * donkere site. Het zwart of oker zit in de hero, de balken en de footer.
 * Per site verschillen alleen de accentkleur en het thema van de hero.
 * ------------------------------------------------------------------ */

:root {
  --ink:#0B0B0C;
  --ink-2:#15151A;
  --ink-line:#2A2A31;
  --paper:#F4F1EA;
  --paper-2:#E7E2D6;
  --paper-line:#CFC8B8;

  --cyan:#00A9E0;
  --magenta:#EC008C;
  --yellow:#FFD400;
  --ochre:#F5B301;

  --on-ink:#EDEAE3;
  --on-ink-mute:#A8A59E;
  --on-paper:#17171A;
  --on-paper-mute:#5E5A50;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Martian Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  --gut:clamp(1.25rem,4vw,4rem);
  --step:clamp(3rem,7vw,6.5rem);
}

/* Donkere site: VolleToners.nl en .be */
body.thema-donker {
  --hero-foto:url("img/hero-magazijn.jpg");
  --acc:#00A9E0;
  --btn-grond:#00A9E0;
  --btn-op:#00151F;
  --acc-tekst:#0080AB;
  --acc-op:#00151F;
  --kop-grond:var(--ink);
  --kop-op:var(--on-ink);
  --kop-op-mute:var(--on-ink-mute);
  --kop-lijn:var(--ink-line);
  --hero-grond:var(--ink);
}

/* Belgische variant: VolleToners.be draait op de donkere basis, maar in de
   vlagkleuren. Zwart is al de grond; geel wordt het accent en de knoppen,
   rood de tekstaccenten op papier. */
body.belgie {
  --acc:#FDDA25;
  --btn-grond:#FDDA25;
  --btn-op:#1A1200;
  --acc-tekst:#C8102E;
  --acc-op:#1A1200;
}
body.belgie .regbar span:nth-child(1){background:#0B0B0C}
body.belgie .regbar span:nth-child(2){background:#FDDA25}
body.belgie .regbar span:nth-child(3){background:#C8102E}
body.belgie .regbar span:nth-child(4){background:#0B0B0C}

/* Lichte site: OngebruikteToners.nl */
body.thema-licht {
  --hero-foto:url("img/hero-magazijn.jpg");
  --acc:#F5B301;
  /* Geel op geel leest niet: op de lichte site is de knop zwart. */
  --btn-grond:#0B0B0C;
  --btn-op:#F4F1EA;
  --acc-tekst:#8A5F00;
  --acc-op:#1A1200;
  --kop-grond:var(--paper);
  --kop-op:var(--on-paper);
  --kop-op-mute:var(--on-paper-mute);
  --kop-lijn:var(--paper-line);
  --hero-grond:var(--ochre);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--on-paper);
  font-family:var(--display);font-size:1rem;line-height:1.55;
  font-variation-settings:"wdth" 100,"wght" 400;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%}
::selection{background:var(--acc);color:var(--acc-op)}
:focus-visible{outline:2px solid var(--acc-tekst);outline-offset:3px}
.wrap{max-width:1360px;margin:0 auto;padding-inline:var(--gut)}

/* ---------- CMYK registratiebalk ---------- */
.regbar{display:flex;height:6px}
.regbar span{flex:1}
.regbar span:nth-child(1){background:var(--cyan)}
.regbar span:nth-child(2){background:var(--magenta)}
.regbar span:nth-child(3){background:var(--yellow)}
.regbar span:nth-child(4){background:#000;flex:2}

/* ---------- baliestrook en navigatie ---------- */
.counter{
  background:var(--kop-grond);color:var(--kop-op-mute);
  border-bottom:1px solid var(--kop-lijn);
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.02em;
}
.counter .wrap{display:flex;gap:1.5rem;align-items:center;
  min-height:38px;flex-wrap:wrap;padding-block:.4rem}
.counter b{color:var(--kop-op);font-weight:500}
.counter a{text-decoration:none}
.counter a:hover{text-decoration:underline}
.spacer{margin-left:auto}
.dot{width:6px;height:6px;border-radius:50%;background:var(--acc);
  display:inline-block;margin-right:.45rem;vertical-align:.05em}

.nav{background:var(--kop-grond);color:var(--kop-op);position:relative;z-index:3;
  border-bottom:1px solid var(--kop-lijn)}
body.thema-licht .nav{border-bottom:2px solid var(--ink)}
.nav .wrap{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  min-height:76px;flex-wrap:wrap}
.mark{
  font-family:var(--display);font-size:1.3rem;letter-spacing:-.03em;
  font-variation-settings:"wdth" 90,"wght" 900;
  text-decoration:none;text-transform:uppercase;color:var(--kop-op);
}
.mark em{font-style:normal;color:var(--acc)}
body.thema-licht .mark em{color:#C98A00}
.nav ul{display:flex;gap:clamp(.9rem,2vw,1.9rem);list-style:none;margin:0;padding:0}
.nav a.lnk{
  font-family:var(--mono);font-size:.75rem;text-decoration:none;
  color:var(--kop-op-mute);padding-block:.35rem;
  border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.nav a.lnk:hover,.nav a.lnk[aria-current]{color:var(--kop-op);border-color:var(--acc)}

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.8125rem;font-weight:600;
  text-decoration:none;border:0;cursor:pointer;
  padding:.95rem 1.35rem;background:var(--btn-grond);color:var(--btn-op);
  transition:filter .18s,transform .18s,box-shadow .18s;
}
.btn:hover{filter:brightness(1.12);transform:translateY(-1px);
  box-shadow:0 10px 20px -14px rgba(0,0,0,.8)}
.btn:active{transform:translateY(0)}
.btn.sm{padding:.7rem 1rem;font-size:.75rem}
.btn.big{padding:1.15rem 1.7rem;font-size:.9375rem}
.btn .arw{transition:transform .22s cubic-bezier(.16,1,.3,1)}
.btn:hover .arw{transform:translateX(4px)}

/* WhatsApp-knop: het merk-groen van WhatsApp zelf, in beide thema's gelijk. */
.btn-wa{
  display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;
  font-family:var(--mono);font-size:.8125rem;font-weight:600;
  padding:1.1rem 1.35rem;background:#25D366;color:#052E16;
  transition:filter .18s,transform .18s,box-shadow .18s;
}
.btn-wa:hover{filter:brightness(1.08);transform:translateY(-1px);
  box-shadow:0 10px 20px -14px rgba(0,0,0,.8)}
.btn-wa:active{transform:translateY(0)}
.btn-wa svg{flex:none}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--hero-grond);
  color:var(--kop-op);
  min-height:clamp(440px,58vh,600px);display:flex;align-items:center;
  padding-block:clamp(2.5rem,5vw,4rem);
}
body.thema-licht .hero{color:#1A1200;border-bottom:2px solid var(--ink)}
.hero::before{
  content:"";position:absolute;inset:0 0 0 30%;
  background:var(--hero-foto) 24% center/cover no-repeat;
}
body.thema-donker .hero::before{filter:saturate(.62) brightness(.92) contrast(1.04)}
.hero::after{
  content:"";position:absolute;inset:0;
  background:var(--hero-verloop);
}
body.thema-donker{
  --hero-verloop:linear-gradient(90deg,#0B0B0C 0%,#0B0B0C 40%,
    rgba(11,11,12,.93) 51%,rgba(11,11,12,.5) 68%,rgba(11,11,12,.12) 100%);
}
body.thema-licht{
  --hero-verloop:linear-gradient(90deg,#F5B301 0%,#F5B301 40%,
    rgba(245,179,1,.93) 51%,rgba(245,179,1,.45) 70%,rgba(245,179,1,.06) 100%);
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero .col{max-width:34rem}

.kicker{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 1.3rem;opacity:.85;
  display:flex;align-items:center;gap:.6rem;
}
.kicker::after{content:"";height:1px;flex:1;max-width:120px;background:currentColor;opacity:.5}
h1{
  font-size:clamp(2.35rem,5.4vw,4.6rem);line-height:.96;margin:0 0 1.3rem;
  letter-spacing:-.035em;text-wrap:balance;
  font-variation-settings:"wdth" 86,"wght" 850;
}
h1 .hl{color:var(--acc)}
/* Op de lichte site is de hero zelf oker: geel op geel leest niet.
   Daar wordt de highlight een zwarte balk met okere letters, net als de knop. */
body.thema-licht h1 .hl{
  color:var(--ochre);background:var(--ink);
  padding:.02em .22em;margin-left:-.22em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.lede{font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.6;
  max-width:44ch;margin:0 0 2.1rem;opacity:.8}
.lede b{opacity:1;font-variation-settings:"wdth" 100,"wght" 600}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:stretch}

/* ---------- paginakop op de binnenpagina's ---------- */
.pagekop{
  background:var(--kop-grond);color:var(--kop-op);
  padding-block:clamp(2.5rem,5vw,4.5rem);
}
.pagekop h1{font-size:clamp(2rem,4.2vw,3.5rem);margin-bottom:1rem}
.pagekop .sub{font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.6;
  max-width:54ch;margin:0;opacity:.8}

/* ---------- stappen ---------- */
.steps{background:var(--paper);color:var(--on-paper);padding-block:var(--step)}
.steps .kicker{color:var(--acc-tekst)}
h2{font-size:clamp(1.85rem,3.4vw,3rem);line-height:1.02;margin:0 0 .6rem;
  letter-spacing:-.03em;font-variation-settings:"wdth" 88,"wght" 850}
.steps .sub{color:var(--on-paper-mute);margin:0 0 clamp(2.2rem,4vw,3.4rem);
  max-width:52ch;font-size:1.0625rem}

/* Subgrid houdt nummer, kop, tekst en metaregel over de drie kolommen
   op precies dezelfde hoogte, ook als een kop over twee regels loopt. */
.track{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto 1fr auto;
  gap:0 clamp(1.5rem,3vw,3rem);position:relative;
}
.step{display:grid;grid-row:span 4;grid-template-rows:subgrid;gap:0}
.step h3{font-size:1.25rem;margin:.9rem 0 .5rem;letter-spacing:-.02em;
  font-variation-settings:"wdth" 96,"wght" 700;align-self:start}
.step p{margin:0;color:var(--on-paper-mute);font-size:.9375rem;line-height:1.6;max-width:34ch}
.step .meta{
  margin-top:.85rem;font-family:var(--mono);font-size:.6875rem;
  color:var(--on-paper);border-top:1px solid var(--paper-line);padding-top:.6rem;
  align-self:end;
}

/* Donkere site: nummer in een kader, verbonden door een stippellijn. */
body.thema-donker .track::before{
  content:"";position:absolute;left:0;right:0;top:26px;height:1px;
  background:repeating-linear-gradient(90deg,var(--paper-line) 0 6px,transparent 6px 12px);
}
body.thema-donker .step .n{
  font-family:var(--mono);font-size:1.0625rem;font-weight:700;
  background:var(--paper);padding-right:.9rem;display:inline-block;
  position:relative;z-index:1;line-height:52px;justify-self:start;
}
body.thema-donker .step .n::before{
  content:"";position:absolute;left:-.1rem;top:6px;width:2.6rem;height:2.6rem;
  border:2px solid var(--on-paper);z-index:-1;
}

/* Lichte site: geen kaders maar een dikke okerlijn met een groot cijfer. */
body.thema-licht .step{border-top:3px solid var(--ink);padding-top:1rem}
body.thema-licht .step .n{
  font-family:var(--mono);font-size:2.25rem;font-weight:700;line-height:1;
  color:var(--ochre);-webkit-text-stroke:1px var(--ink);
  letter-spacing:-.04em;display:block;
}
body.thema-licht .step h3{margin-top:1.1rem}

/* ---------- inkoopblok op zwart ---------- */
.band{background:var(--ink);color:var(--on-ink);padding-block:var(--step)}
body.thema-licht .band{background:var(--paper);color:var(--on-paper)}
body.thema-licht .aside > div{border-top-color:var(--ink)}
body.thema-licht .aside p{color:var(--on-paper-mute)}
body.thema-licht .aside .mono{color:var(--on-paper)}
.aside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem)}
.aside > div{border-top:2px solid var(--on-ink);padding-top:1.3rem}
.aside h4{font-size:1.0625rem;margin:0 0 .5rem;
  font-variation-settings:"wdth" 96,"wght" 700}
.aside p{margin:0;color:var(--on-ink-mute);font-size:.9375rem;line-height:1.65}
.aside .mono{font-family:var(--mono);font-size:.8125rem;color:var(--on-ink);margin-top:.7rem}

/* ---------- foto naast tekst ---------- */
.second{background:var(--ink);color:var(--on-ink);padding-block:var(--step);
  border-top:1px solid var(--ink-line)}
body.thema-licht .second{background:var(--paper-2);color:var(--on-paper);
  border-top:2px solid var(--ink)}
body.thema-licht .second p{color:var(--on-paper-mute)}
body.thema-licht .second img{border:2px solid var(--ink)}
body.thema-licht .second .wrap{direction:rtl}
body.thema-licht .second .wrap > *{direction:ltr}
.second .wrap{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
.second img{display:block;width:100%;height:clamp(300px,34vw,480px);
  object-fit:cover;border:1px solid var(--ink-line)}
.second p{margin:0 0 1rem;color:var(--on-ink-mute);max-width:52ch;line-height:1.65}
.second p:last-child{margin-bottom:0}

/* ---------- lopende tekst ---------- */
.prose{background:var(--paper);color:var(--on-paper);padding-block:var(--step)}
.prose .wrap{max-width:min(1360px,58rem)}
.prose.smal .wrap{max-width:min(1360px,46rem)}
.prose h2{font-size:clamp(1.4rem,2.4vw,2rem);margin:2.4rem 0 .7rem}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 1rem;color:var(--on-paper-mute);line-height:1.7;max-width:68ch}
.prose a{color:var(--acc-tekst)}
.prose .mono{font-family:var(--mono);font-size:.8125rem;color:var(--on-paper);line-height:2}
.prose .mono.groot{font-size:.9375rem}
.let-op{border-left:2px solid var(--magenta);padding-left:1rem;color:var(--on-paper)!important}

ul.lijst{list-style:none;margin:0 0 1.4rem;padding:0;
  border-top:1px solid var(--paper-line);max-width:52rem}
ul.lijst li{padding:.7rem 0 .7rem 1.6rem;border-bottom:1px solid var(--paper-line);
  position:relative;color:var(--on-paper)}
ul.lijst li::before{content:"";position:absolute;left:0;top:1.35rem;
  width:9px;height:2px;background:var(--acc-tekst)}

table.gegevens{border-collapse:collapse;width:100%;max-width:40rem;margin-top:.6rem}
table.gegevens th,table.gegevens td{
  text-align:left;padding:.65rem 1rem .65rem 0;border-bottom:1px solid var(--paper-line);
  vertical-align:top;font-size:.9375rem}
table.gegevens th{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--on-paper-mute);font-weight:400;width:12rem}
table.gegevens td{font-family:var(--mono)}

/* ---------- waar op letten ---------- */
.check{background:var(--paper);color:var(--on-paper);padding-block:var(--step)}
.check .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
.check .shot img{display:block;width:100%;height:clamp(260px,30vw,400px);
  object-fit:cover;border:2px solid var(--ink)}
ol.genummerd{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
ol.genummerd li{display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;
  padding:1.1rem 0;border-bottom:1px solid var(--paper-line)}
ol.genummerd b{font-family:var(--mono);font-size:.8125rem;color:var(--acc-tekst)}
ol.genummerd h3{margin:0 0 .25rem;font-size:1.0625rem;
  font-variation-settings:"wdth" 96,"wght" 700}
ol.genummerd p{margin:0;color:var(--on-paper-mute);font-size:.9375rem;line-height:1.6}

/* ---------- contactkaarten ---------- */
.kaarten{background:var(--paper);color:var(--on-paper);padding-block:var(--step)}
.kaarten .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2.5rem)}
.kaart{border-top:2px solid var(--ink);padding-top:1.2rem}
.kaart h3{margin:0 0 .6rem;font-size:1.0625rem;
  font-variation-settings:"wdth" 96,"wght" 700}
.kaart .groot{font-family:var(--mono);font-size:1.0625rem;margin:0 0 .6rem;
  line-height:1.5;font-weight:700}
.kaart .groot a{color:var(--acc-tekst);text-decoration:none}
.kaart .groot a:hover{text-decoration:underline}
.kaart p{margin:0;color:var(--on-paper-mute);font-size:.9375rem;line-height:1.6}

/* ---------- afsluitende oproep ---------- */
.cta{background:var(--ink);color:var(--on-ink);padding-block:var(--step);
  border-top:1px solid var(--ink-line)}

.cta h2{margin-bottom:.8rem;max-width:20ch}
.cta p{margin:0 0 1.8rem;color:var(--on-ink-mute);max-width:52ch}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--on-ink);
  padding-block:clamp(2.5rem,5vw,4rem) 2rem;border-top:1px solid var(--ink-line)}
/* De lichte site sluit af in oker met zwarte tekst, zodat de onderkant
   van de twee sites niet identiek is. */
body.thema-licht footer{
  background:var(--ochre);color:var(--on-paper);border-top:3px solid var(--ink);
}
body.thema-licht footer .co{color:#5A4200}
body.thema-licht footer .co b{color:var(--on-paper)}
.fgrid{display:flex;gap:2rem 3rem;flex-wrap:wrap;align-items:flex-start;
  justify-content:space-between}
footer .co{font-family:var(--mono);font-size:.75rem;line-height:1.9;color:var(--on-ink-mute)}
footer .co b{color:var(--on-ink);font-weight:500}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

/* ---------- offerteformulier ---------- */
.quote{background:var(--paper);color:var(--on-paper);padding-block:var(--step)}
.tof-hp{position:absolute!important;left:-9999px!important}

fieldset{border:0;margin:0 0 2.75rem;padding:0}
legend{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acc-tekst);padding:0 0 .8rem;width:100%;border-bottom:2px solid var(--ink);
}
.f{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.f > span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;
  color:var(--on-paper-mute)}
input,select{
  font:inherit;font-family:var(--mono);font-size:.875rem;color:var(--on-paper);
  background:#FFF;border:1px solid var(--paper-line);padding:.72rem .75rem;
  width:100%;min-width:0;border-radius:0;appearance:none;
  transition:border-color .15s,background .15s;
}
input::placeholder{color:#9C968A}
input:hover,select:hover{border-color:#A8A192}
input:focus,select:focus{outline:2px solid var(--acc-tekst);outline-offset:-2px;
  border-color:var(--acc-tekst)}
select{background-image:linear-gradient(45deg,transparent 50%,var(--on-paper) 50%),
  linear-gradient(135deg,var(--on-paper) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
input[type=number]{font-variant-numeric:tabular-nums}

.qrow{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 5.5rem minmax(0,1fr) 2.6rem;
  gap:.7rem;align-items:end;padding:1.1rem 0;border-bottom:1px dotted var(--paper-line)}
.qrow .del{
  background:transparent;border:1px solid var(--paper-line);color:var(--on-paper-mute);
  cursor:pointer;height:2.7rem;font-family:var(--mono);font-size:1.1rem;line-height:1;
  transition:border-color .15s,color .15s,background .15s;
}
.qrow .del:hover{border-color:var(--magenta);color:var(--magenta);background:#FFF}
.qrow:only-child .del{visibility:hidden}
.rowbar{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;padding-top:1.3rem}
.btn-line{
  background:#FFF;border:1px dashed #A8A192;color:var(--on-paper);cursor:pointer;
  font-family:var(--mono);font-size:.8125rem;padding:.78rem 1.15rem;
  transition:border-color .15s,color .15s;
}
.btn-line:hover{border-color:var(--acc-tekst);color:var(--acc-tekst)}
.tally{margin:0 0 0 auto;font-family:var(--mono);font-size:.8125rem;color:var(--on-paper-mute)}
.tally b{color:var(--on-paper);font-weight:700;font-variant-numeric:tabular-nums}

.drop{display:block;border:1px dashed #A8A192;background:#FFF;
  padding:1.7rem 1.4rem;cursor:pointer;margin-top:1.3rem;
  transition:border-color .15s,background .15s}
.drop:hover,.drop:focus-within{border-color:var(--acc-tekst);background:#FCFBF8}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop b{display:block;font-size:1.0625rem;margin-bottom:.35rem;
  font-variation-settings:"wdth" 96,"wght" 700}
.drop span{font-family:var(--mono);font-size:.75rem;color:var(--on-paper-mute);line-height:1.7}
.drop .count{color:var(--acc-tekst);font-weight:700}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin-top:1.4rem}
.pick{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}
.pick label{
  font-family:var(--mono);font-size:.8125rem;border:1px solid var(--paper-line);
  background:#FFF;padding:.7rem 1.05rem;cursor:pointer;color:var(--on-paper-mute);
  transition:border-color .15s,color .15s,background .15s;
}
.pick label:hover{border-color:#A8A192;color:var(--on-paper)}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick label:has(input:checked){background:var(--acc);border-color:var(--acc);color:var(--acc-op)}
.pick label:has(input:focus-visible){outline:2px solid var(--acc-tekst);outline-offset:2px}

.send{display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap;
  border-top:2px solid var(--ink);padding-top:1.9rem}
.send p{margin:0;font-family:var(--mono);font-size:.75rem;color:var(--on-paper-mute);
  line-height:1.7;max-width:38ch}

.tof-ok,.tof-err{border-top:2px solid var(--ink);padding:1.6rem 0 0;margin-top:1rem}
.tof-ok h3{font-size:1.5rem;margin:0 0 .5rem;letter-spacing:-.02em;
  font-variation-settings:"wdth" 96,"wght" 800}
.tof-ok p,.tof-err p{margin:0;max-width:56ch;color:var(--on-paper-mute)}
.tof-err{border-top-color:var(--magenta);margin-bottom:1.6rem;
  font-family:var(--mono);font-size:.8125rem;line-height:1.7}

/* Voortgang tijdens het verkleinen en versturen */
.tof-bezig{margin:.9rem 0 0;font-family:var(--mono);font-size:.8125rem;
  letter-spacing:.02em;color:var(--on-paper-mute)}
.send .btn[disabled]{opacity:.55;cursor:progress}

/* ---------- cookietoestemming ---------- */
/* De twee knoppen zijn met opzet even groot en even opvallend: weigeren moet
   net zo makkelijk zijn als accepteren, anders is de toestemming niet vrij
   gegeven en dus niet geldig. */
.ck{position:fixed;inset:auto 0 0 0;z-index:9999;background:var(--paper,#fff);
  color:var(--on-paper,#111);border-top:2px solid var(--ink,#111);
  box-shadow:0 -8px 30px rgba(0,0,0,.18)}
.ck-binnen{max-width:64rem;margin:0 auto;padding:1.4rem 1.5rem 1.6rem}
.ck h2{font-size:1.05rem;margin:0 0 .4rem;letter-spacing:-.01em}
.ck p{margin:0 0 .9rem;max-width:60ch;color:var(--on-paper-mute,#555);
  font-size:.9375rem;line-height:1.6}
.ck-lijst{margin:0 0 1rem;display:grid;gap:.6rem}
.ck-rij{display:flex;gap:.7rem;align-items:flex-start;font-size:.875rem;
  line-height:1.5;max-width:60ch;cursor:pointer}
.ck-rij input{margin-top:.25rem;width:1.05rem;height:1.05rem;flex:none;cursor:pointer}
.ck-rij b{font-weight:700}
.ck-knoppen{display:flex;flex-wrap:wrap;gap:.6rem}
.ck-btn{flex:1 1 12rem;padding:.7rem 1.1rem;font:inherit;font-size:.9375rem;
  font-weight:600;cursor:pointer;border:2px solid var(--ink,#111);
  background:var(--paper,#fff);color:var(--on-paper,#111);border-radius:2px}
.ck-btn:hover{background:var(--ink,#111);color:var(--paper,#fff)}
.ck-btn:focus-visible{outline:3px solid var(--accent,#00A9E0);outline-offset:2px}
.ck-klein{margin:.9rem 0 0;font-size:.8125rem}
.ck-klein a{color:inherit}
@media (max-width:560px){
  .ck-btn{flex:1 1 100%}
}

/* ---------- mobiel ---------- */
.wa-fixed{display:none}
@media (max-width:980px){
  body.thema-licht .hero .wrap{grid-template-columns:1fr}
  body.thema-licht .hero{padding-bottom:clamp(2.5rem,5vw,4.5rem)}
  .hero{min-height:0;padding-bottom:clamp(9rem,32vw,15rem)}
  .hero::before{inset:auto 0 0 0;height:44%}
  body.thema-donker{--hero-verloop:linear-gradient(180deg,#0B0B0C 0%,#0B0B0C 50%,
    rgba(11,11,12,.9) 66%,rgba(11,11,12,.2) 100%)}
  body.thema-licht{--hero-verloop:linear-gradient(180deg,#F5B301 0%,#F5B301 50%,
    rgba(245,179,1,.85) 66%,rgba(245,179,1,.15) 100%)}
  .track{grid-template-columns:1fr;grid-template-rows:none;gap:2rem}
  .step{grid-row:auto;grid-template-rows:none;display:block;
    border-top:1px dotted var(--paper-line);padding-top:1rem}
  body.thema-donker .track::before{display:none}
  .aside,.second .wrap,.check .wrap{grid-template-columns:1fr}
  .kaarten .wrap{grid-template-columns:1fr}
}
@media (max-width:820px){
  .qrow{grid-template-columns:1fr 1fr;position:relative;padding-top:1.6rem}
  .qrow .del{position:absolute;top:0;right:0;width:2.2rem;height:2.2rem}
  .grid2{grid-template-columns:1fr}
  .tally{margin-left:0}
}
@media (max-width:720px){
  .nav ul{order:3;width:100%;overflow-x:auto;padding-bottom:.5rem}
  .nav .spacer{display:none}
  .actions .btn,.actions .btn-wa{flex:1 1 100%;justify-content:center}
  table.gegevens th{width:auto;display:block;padding-bottom:0;border:0}
  table.gegevens td{display:block;padding-top:.15rem}
  .wa-fixed{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9;
    border-top:1px solid var(--ink);background:rgba(244,241,234,.95);
    backdrop-filter:blur(8px);padding:.6rem var(--gut);gap:.6rem}
  .wa-fixed a{flex:1;justify-content:center}
  .wa-fixed .btn-wa{flex:none}
  body{padding-bottom:74px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}