/* Lijnzaad Schilderwerk, voorbeeldsite van Opgeleverd
   Tegenovergesteld aan Steenwerf: daar grafiet en mono, hier warm papier en een
   serif met karakter. Een schilder verkoopt kleur, dus kleur is hier niet een
   accent maar het onderwerp. De hele pagina neemt de gekozen kleur over.

   Fraunces als display: een serif met opsz-as en eigenzinnige details, veel
   minder gebruikt dan de standaard Garamonds. Archivo eronder, rustig en breed. */

@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --papier:#FBF7F0;
  --papier-2:#F2ECE1;
  --inkt:#16191B;
  --tekst:#4E534F;
  --zacht:#8A8F8A;
  --lijn:#E2DACB;
  --lijn-hard:#CFC4AE;

  /* de kleur die de bezoeker kiest; wordt door javascript overschreven */
  --kleur:#2F4F4A;
  --kleur-diep:#223A36;

  --display:'Fraunces',Georgia,serif;
  --sans:'Archivo',Helvetica,Arial,sans-serif;
  --binnen:1140px;
  --marge:clamp(20px,5vw,60px);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --radius:3px;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--tekst);font-family:var(--sans);
  font-size:clamp(15.5px,1vw,16.5px);line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);color:var(--inkt);margin:0;font-weight:500;
  letter-spacing:-0.012em;line-height:1.06}
h1 em,h2 em,h3 em{font-style:italic;color:var(--kleur);transition:color .5s var(--ease)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}

.binnen{max-width:var(--binnen);margin:0 auto;padding-inline:var(--marge)}
.smal{max-width:740px}

[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-reveal-delay="1"]{transition-delay:.13s}
[data-reveal][data-reveal-delay="2"]{transition-delay:.26s}
[data-reveal][data-reveal-delay="3"]{transition-delay:.39s}
[data-reveal="beeld"]{transform:scale(1.03)}
[data-reveal="beeld"].in{transform:none}
[data-stagger]>*{opacity:0;transform:translateY(12px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}
[data-stagger].in>*:nth-child(1){transition-delay:0s}
[data-stagger].in>*:nth-child(2){transition-delay:.08s}
[data-stagger].in>*:nth-child(3){transition-delay:.16s}
[data-stagger].in>*:nth-child(4){transition-delay:.24s}
[data-stagger].in>*:nth-child(5){transition-delay:.32s}

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

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-stagger]>*{opacity:1;transform:none;transition:none}
}

/* ---- demobalk ---- */
.demobar{position:relative;z-index:60;background:var(--inkt);color:#BEC4BE;font-size:12.5px;
  display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;padding:9px 18px;text-align:center}
.demobar strong{color:#fff;font-weight:500}
.demobar a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);white-space:nowrap}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.nav.vast{background:rgba(251,247,240,.94);backdrop-filter:blur(9px);box-shadow:0 1px 0 var(--lijn)}
.nav-in{max-width:var(--binnen);margin:0 auto;padding:18px var(--marge);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{text-decoration:none;display:inline-flex;gap:8px;align-items:baseline}
.logo-g{font-family:var(--display);font-weight:700;font-size:23px;color:var(--inkt);letter-spacing:-0.015em}
.logo-s{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--zacht)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.nav-links a:not(.knop){text-decoration:none;font-size:14.5px;color:var(--tekst);transition:color .3s}
.nav-links a:not(.knop):hover{color:var(--kleur)}
@media (max-width:860px){.nav-links a:not(.knop){display:none}}

.knop{display:inline-flex;align-items:center;justify-content:center;background:var(--kleur);color:#fff;
  text-decoration:none;font-weight:500;font-size:14.5px;padding:14px 28px;border:0;border-radius:var(--radius);
  cursor:pointer;transition:background .5s var(--ease),transform .35s var(--ease)}
.knop:hover{background:var(--kleur-diep);transform:translateY(-1px)}
.knop-lijn{background:transparent;color:var(--inkt);border:1px solid var(--lijn-hard)}
.knop-lijn:hover{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}

/* ---- hero ---- */
.hero{padding:clamp(40px,6vw,80px) 0 clamp(30px,4vw,50px)}
.hero-in{display:grid;grid-template-columns:1fr .92fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:940px){.hero-in{grid-template-columns:1fr;gap:32px}}
.kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--zacht)}
.hero h1{margin-top:20px;font-size:clamp(38px,6vw,74px);max-width:13ch}
.hero-sub{margin-top:24px;max-width:44ch;font-size:clamp(16px,1.15vw,18px)}
.hero-acties{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}

/* ---- gevel ---- */
.gevel{position:relative}
.gevel svg{width:100%;height:auto;filter:drop-shadow(0 24px 44px rgba(22,25,27,.10))}
.gevel .verf{transition:fill .55s var(--ease)}

/* ---- secties ---- */
.sectie{padding:clamp(56px,8vw,110px) 0}
.sec-lijn{border-top:1px solid var(--lijn)}
.sec-kleur{background:var(--papier-2)}
.label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--kleur);transition:color .5s var(--ease)}
.kop-rij{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:end;
  margin-bottom:clamp(32px,5vw,56px)}
@media (max-width:860px){.kop-rij{grid-template-columns:1fr;gap:18px}}
.kop-rij h2{font-size:clamp(28px,3.8vw,48px);margin-top:14px;max-width:17ch}
.kop-note{color:var(--zacht);font-size:15px;max-width:38ch}
.groot{font-size:clamp(18px,1.7vw,23px);line-height:1.62;color:#2C302D;font-family:var(--display);font-weight:500}

/* ---- KLEURKIEZER: de signature interactie ---- */
.kiezer{display:grid;grid-template-columns:1fr 340px;gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:940px){.kiezer{grid-template-columns:1fr}}
.kiezer-paneel{border:1px solid var(--lijn);background:var(--papier);padding:clamp(22px,3vw,32px);
  position:sticky;top:96px}
@media (max-width:940px){.kiezer-paneel{position:static}}
.kiezer-paneel h3{font-size:21px}
.swatches{margin-top:20px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.swatch{appearance:none;border:0;padding:0;cursor:pointer;aspect-ratio:1;border-radius:var(--radius);
  position:relative;transition:transform .3s var(--ease);box-shadow:inset 0 0 0 1px rgba(22,25,27,.10)}
.swatch:hover{transform:scale(1.06)}
.swatch[aria-pressed="true"]::after{content:"";position:absolute;inset:-5px;
  border:1px solid var(--inkt);border-radius:5px}
.kleur-naam{margin-top:20px;padding-top:16px;border-top:1px solid var(--lijn)}
.kleur-naam b{display:block;font-family:var(--display);font-weight:700;font-size:20px;color:var(--inkt)}
.kleur-naam span{font-size:13.5px;color:var(--zacht)}
.kleur-uitleg{margin-top:14px;font-size:14.5px}
.onderdelen{margin-top:22px;padding-top:18px;border-top:1px solid var(--lijn);display:flex;gap:8px;flex-wrap:wrap}
.onderdelen button{appearance:none;background:transparent;border:1px solid var(--lijn-hard);
  border-radius:var(--radius);padding:8px 14px;font-size:13.5px;color:var(--tekst);cursor:pointer;
  transition:background .3s,color .3s,border-color .3s}
.onderdelen button[aria-pressed="true"]{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}

/* ---- werkwijze ---- */
.stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.5vw,32px)}
@media (max-width:900px){.stappen{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.stappen{grid-template-columns:1fr}}
.stap{border-top:2px solid var(--kleur);padding-top:16px;transition:border-color .5s var(--ease)}
.stap b{display:block;font-family:var(--display);font-weight:700;font-size:17px;color:var(--inkt);margin-bottom:8px}
.stap span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--zacht);display:block;margin-bottom:10px}

/* ---- werk ---- */
.werk-lijst{border-top:1px solid var(--lijn-hard)}
.werk-rij{display:grid;grid-template-columns:1fr 200px 150px;gap:clamp(12px,2vw,28px);align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--lijn);transition:padding .3s var(--ease)}
@media (max-width:760px){.werk-rij{grid-template-columns:1fr;row-gap:4px}}
.werk-rij:hover{padding-inline:10px}
.w-wat{font-family:var(--display);font-weight:500;font-size:clamp(17px,1.6vw,20px);color:var(--inkt)}
.w-plaats{font-size:14.5px}
.w-jaar{font-size:13.5px;color:var(--zacht);text-align:right}
@media (max-width:760px){.w-jaar{text-align:left}}

/* ---- prijs ---- */
.prijzen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,28px)}
@media (max-width:860px){.prijzen{grid-template-columns:1fr}}
.prijs{border:1px solid var(--lijn);padding:clamp(22px,3vw,32px);background:var(--papier)}
.prijs h3{font-size:19px}
.prijs .bedrag{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,36px);
  color:var(--kleur);margin-top:12px;transition:color .5s var(--ease)}
.prijs .bedrag small{font-family:var(--sans);font-weight:400;font-size:14px;color:var(--zacht)}
.prijs p{margin-top:14px;font-size:14.5px}

/* ---- contact ---- */
.contact{background:var(--inkt);color:#B9BFB9}
.contact h2{color:var(--papier)}
.contact .label{color:#fff;opacity:.6}
.contact .binnen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:860px){.contact .binnen{grid-template-columns:1fr}}
.veld{display:block;margin-bottom:16px}
.veld span{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#8A918A;margin-bottom:7px}
.veld input,.veld textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #363B37;
  color:#fff;font-family:var(--sans);font-size:16px;padding:9px 0;transition:border-color .3s}
.veld input:focus,.veld textarea:focus{outline:0;border-color:var(--kleur)}
.veld textarea{resize:vertical;min-height:90px}
.contact-gegevens li{padding:12px 0;border-top:1px solid #2A2F2B;font-size:15px}
.contact-gegevens b{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#8A918A;font-weight:500;margin-bottom:4px}
.contact-gegevens a{color:#fff;text-decoration:none;border-bottom:1px solid #363B37}

footer{background:var(--inkt);color:#767C77;font-size:13px;padding:26px 0 40px;border-top:1px solid #242926}
footer .binnen{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---- projectpagina ---- */
.proj-hero{padding:clamp(40px,6vw,72px) 0 0}
.proj-hero h1{font-size:clamp(30px,4.6vw,56px);max-width:19ch}
.proj-meta{margin-top:26px;display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap;
  padding-top:18px;border-top:1px solid var(--lijn)}
.proj-meta div b{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--zacht);font-weight:500;margin-bottom:3px}
.proj-meta div span{font-family:var(--display);font-weight:500;font-size:17px;color:var(--inkt)}
.fotoplek{border:1px dashed var(--lijn-hard);background:repeating-linear-gradient(
  -45deg,transparent,transparent 9px,rgba(22,25,27,.035) 9px,rgba(22,25,27,.035) 18px);
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
.fotoplek p{font-size:12.5px;color:var(--zacht);max-width:32ch;line-height:1.6;letter-spacing:.04em}

/* ---------- kleurkiezer: de gevel staat nu boven de swatches ----------
   Eerder stond het huis in de hero en de swatches ver daaronder, dan zie
   je niet wat je verandert. */
.hero-breed{grid-template-columns:1fr !important;max-width:none}
.hero-breed>div{max-width:66ch}
/* gevel links, swatches rechts, en de lange tekst eronder. Zo hoef je niet
   te scrollen om te zien wat je kiest. */
.kiezer-boven{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(22px,3.4vw,52px);
  align-items:start;margin-bottom:clamp(30px,4.4vh,56px)}
@media (max-width:900px){.kiezer-boven{grid-template-columns:1fr;gap:26px}}
.kiezer-boven .gevel svg{width:100%;height:auto;display:block}
.kiezer-boven .kiezer-paneel{position:sticky;top:96px}
@media (max-width:900px){.kiezer-boven .kiezer-paneel{position:static}}
.kiezer-tekst{max-width:74ch}
.steen,.voegen{transition:fill .5s var(--ease),stroke .5s var(--ease)}

.gevel-kiezer{margin-top:22px;border-top:1px solid var(--lijn);padding-top:18px}
.gevel-kiezer h4{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--zacht);font-weight:500;margin:0 0 11px}
.swatches.klein{grid-template-columns:repeat(5,1fr);gap:7px}
.swatches.klein .swatch{aspect-ratio:1/1;border-radius:var(--radius)}
.gevel-naam{margin-top:9px;font-size:13.5px;color:var(--tekst)}

/* meer van de pagina neemt de kleur over */
.werk-rij .w-jaar{color:var(--kleur);transition:color .5s var(--ease)}
.kop-note{border-left:2px solid var(--kleur);padding-left:16px;transition:border-color .5s var(--ease)}
.sec-kleur{background:color-mix(in srgb, var(--kleur) 5%, var(--papier));transition:background .6s var(--ease)}
.swatch[aria-pressed="true"]{outline:2px solid var(--inkt);outline-offset:3px}

/* ---------- LAGEN: elke laag wordt over de vorige heen gestreken ---------- */
.lagen{display:grid;grid-template-columns:.95fr 1.15fr;gap:clamp(24px,3.4vw,56px);align-items:start;
  margin-top:clamp(26px,3.6vh,44px)}
@media (max-width:900px){.lagen{grid-template-columns:1fr;gap:26px}}

.lg-knoppen{display:grid;gap:0;border-top:1px solid var(--lijn)}
.lg-knop{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--lijn);
  padding:16px 4px;cursor:pointer;font:inherit;color:inherit;
  transition:background .3s var(--ease),padding-left .35s var(--ease)}
.lg-knop:hover{background:var(--papier-2,#F1EBE0)}
.lg-knop.aan{background:var(--papier-2,#F1EBE0);padding-left:14px}
.lg-n{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--zacht);transition:color .3s var(--ease)}
.lg-knop.aan .lg-n{color:var(--kleur)}
.lg-wat{display:block;margin-top:5px;font-family:var(--serif);font-size:clamp(17px,1.5vw,20px);
  color:var(--inkt);line-height:1.25}
.lg-hoe{display:block;margin-top:4px;font-size:13.5px;color:var(--zacht)}

.lg-beeld svg{width:100%;height:auto;display:block}
.lg-maat{font-family:var(--sans);font-size:13px;fill:var(--zacht);letter-spacing:.03em}
.lg-uitleg{margin-top:14px;font-size:15px;color:var(--tekst);max-width:46ch;min-height:3em}

/* de streek: een laag wordt van links naar rechts opengeveegd */
.lg{clip-path:inset(0 100% 0 0);transition:clip-path .85s var(--ease)}
.lg.op{clip-path:inset(0 0 0 0)}
.lg-kwast{opacity:0;transform:translateX(40px);
  transition:opacity .2s linear,transform .85s var(--ease)}
.lg-kwast.veegt{opacity:1;transform:translateX(470px)}
@media (prefers-reduced-motion:reduce){
  .lg{transition:none}
  .lg-kwast{display:none}
}


/* ---- opmeten uit een filmpje ----
   Geen echte analyse, wel de echte stroom: kiezen, kijken, uitkomst.
   De zoeker is bewust grijs, zodat het als opname leest en niet als tekening. */
.scan-blok{display:grid;grid-template-columns:1fr .92fr;gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(28px,4vw,52px)}
@media (max-width:900px){.scan-blok{grid-template-columns:1fr}}

.zoeker{position:relative;background:#2A2E2C;overflow:hidden;border-radius:var(--radius)}
.zoeker svg{display:block;width:100%;height:auto}
.zoeker-ui{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.zoeker-ui b{width:7px;height:7px;border-radius:50%;background:#D2453A;display:block}
.zoeker.kijkt .zoeker-ui b{animation:rec 1.3s ease-in-out infinite}
@keyframes rec{0%,100%{opacity:1}50%{opacity:.25}}

/* hoeken van een zoeker */
.zoeker::before,.zoeker::after{content:"";position:absolute;width:22px;height:22px;
  border:2px solid rgba(255,255,255,.35);pointer-events:none}
.zoeker::before{right:12px;top:12px;border-left:0;border-bottom:0}
.zoeker::after{left:12px;bottom:12px;border-right:0;border-top:0}

.scanlijn{position:absolute;left:0;right:0;top:0;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,var(--kleur),transparent)}
.zoeker.kijkt .scanlijn{opacity:.9;animation:scanZak 1.9s var(--ease) infinite}
@keyframes scanZak{0%{top:2%}100%{top:96%}}

.vakken .vak{opacity:0;transform:scale(1.06);transform-origin:center;transform-box:fill-box}
.zoeker.klaar .vakken .vak{animation:vakIn .5s var(--ease) var(--vt,0s) forwards}
@keyframes vakIn{to{opacity:1;transform:scale(1)}}

.vak-labels{position:absolute;inset:0;pointer-events:none}
.vak-labels li{position:absolute;left:var(--x);top:var(--y);transform:translateY(4px);opacity:0;
  background:var(--kleur);color:#fff;font-family:var(--sans);font-size:11px;
  padding:3px 7px;white-space:nowrap;border-radius:2px}
.zoeker.klaar .vak-labels li{animation:vakIn .5s var(--ease) var(--vt,0s) forwards}

.scan-stap h3{font-family:var(--display);font-size:clamp(20px,2.3vw,26px);margin-bottom:10px}
.scan-stap>p{color:var(--tekst);font-size:15.5px;max-width:44ch}

.valveld{display:flex;align-items:center;gap:14px;margin-top:20px;padding:20px 22px;cursor:pointer;
  border:1px dashed var(--lijn-hard);background:var(--papier-2);border-radius:var(--radius);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.valveld:hover,.valveld.erover{border-color:var(--kleur);background:var(--papier)}
.valveld input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.val-icoon{flex:none;width:34px;height:26px;border:2px solid var(--kleur);border-radius:3px;position:relative}
.val-icoon::after{content:"";position:absolute;left:11px;top:6px;border-left:9px solid var(--kleur);
  border-top:6px solid transparent;border-bottom:6px solid transparent}
.val-tekst{display:flex;flex-direction:column;font-size:14px;color:var(--zacht);line-height:1.4}
.val-tekst b{font-family:var(--sans);font-weight:600;color:var(--inkt);font-size:15px}
.scan-stap .tekstlink{margin-top:14px;background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:var(--kleur);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,var(--kleur) 40%,transparent);transition:text-decoration-color .3s}
.scan-stap .tekstlink:hover{text-decoration-color:var(--kleur)}
.scan-acties .tekstlink{margin-top:0}
.scan-eerlijk{margin-top:18px;padding-top:16px;border-top:1px solid var(--lijn);
  font-size:13px;line-height:1.55;color:var(--zacht);max-width:48ch}

.scan-lijst{margin-top:22px;display:grid;gap:2px}
.scan-lijst li{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--lijn);font-size:15px;color:var(--zacht);
  transition:color .35s var(--ease)}
.scan-lijst li.bezig{color:var(--inkt)}
.scan-lijst li.af{color:var(--tekst)}
.scan-lijst li span{flex:none;width:16px;height:16px;border:1px solid var(--lijn-hard);border-radius:50%;
  position:relative;transition:border-color .3s,background .3s}
.scan-lijst li.bezig span{border-color:var(--kleur);border-top-color:transparent;animation:draai .8s linear infinite}
.scan-lijst li.af span{background:var(--kleur);border-color:var(--kleur);animation:none}
.scan-lijst li.af span::after{content:"";position:absolute;left:4px;top:7px;width:7px;height:3px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
@keyframes draai{to{transform:rotate(360deg)}}
.scan-balk{margin-top:24px;height:2px;background:var(--lijn);overflow:hidden}
.scan-balk span{display:block;height:100%;width:0;background:var(--kleur);transition:width .4s linear}

.scan-uit{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(18px,3vw,40px)}
@media (max-width:520px){.scan-uit{grid-template-columns:1fr}}
.scan-uit>div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--lijn)}
.scan-uit dt{color:var(--zacht);font-size:14px}
.scan-uit dd{font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--inkt);white-space:nowrap}
.scan-prijs{margin-top:22px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px;padding:16px 18px;background:var(--papier-2);border-left:3px solid var(--kleur)}
.scan-prijs span{font-size:13.5px;color:var(--zacht)}
.scan-prijs strong{font-family:var(--display);font-size:clamp(19px,2.2vw,25px);color:var(--inkt)}
.scan-zeker{margin-top:14px;font-size:13px;line-height:1.6;color:var(--zacht);max-width:50ch}
.scan-acties{margin-top:22px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .zoeker.kijkt .scanlijn{animation:none;opacity:0}
  .zoeker.kijkt .zoeker-ui b{animation:none}
  .zoeker.klaar .vakken .vak,.zoeker.klaar .vak-labels li{animation:none;opacity:1;transform:none}
  .scan-lijst li.bezig span{animation:none}}