/* ---------------------------------------------------------------------------
   D in de echte scan, stap 1 (19 oktober 2026, Michael: "Bouw D nu in de echte
   scan, in stappen op de voorvertoning, klaar vóór 9 november."). De stijl van
   proef D (/scan-proef/d/) over de scan heen, alleen waar body.scan-d staat.
   Laadt na scan.css. Zelfde html, zelfde vragen, zelfde datacontract.
   Kleuren alleen uit de huisstijl. Eén duur (350 ms) en één curve. Met minder
   beweging staat alles stil. Plan in website/scan-d-2026-10-19/PLAN.md.
   --------------------------------------------------------------------------- */

.scan-d {
  /* Kleurtokens (19 oktober 2026, op vraag van DM Regie). Het palet van D wisselt
     hier, in één blok, zonder herbouw. Nu het huidige palet; het nieuwe palet
     (website/onderzoek-palet2-2026-10-19) komt hier pas na Michaels keuze. */
  --d-grond: var(--nachtblauw);            /* de ondergrond van de scan */
  --d-tekst: var(--papier);                /* tekst en lijnen op de grond */
  --d-moeten: var(--rood-licht);           /* moeten: gloed, beeld bij een zwak antwoord, foutmelding */
  --d-willen: var(--jade);                 /* willen: gekozen antwoord, vorm, knop, gloed */
  --d-menu: rgba(6, 26, 47, .86);          /* het menu over de grond */
  --d-vlak: rgba(82, 182, 140, .4);        /* het vlak van de vorm */
  --d-veldrand: rgba(250, 249, 245, .5);   /* de rand van invulvelden */
  --d-papier-72: rgba(250, 249, 245, .72);
  --d-papier-14: rgba(250, 249, 245, .14);
  --d-papier-06: rgba(250, 249, 245, .06);
  --d-duur: 350ms;
  --d-curve: cubic-bezier(.2, .8, .2, 1);
  --maat-vraag: clamp(28px, 1.6vw + 16px, 44px);
  --moeten: .13; --willen: .13;
  background: var(--d-grond);
  color-scheme: dark;
  color: var(--d-tekst);
}
html:has(body.scan-d) { background: var(--nachtblauw); }   /* html ziet de tokens van body niet; bij een paletwissel ook hier aanpassen */

/* De gloed, rood licht en jade die met je antwoorden in elkaar overvloeien (scan.js, gloedBij). */
.scan-d::before, .scan-d::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; transition: opacity var(--d-duur) var(--d-curve); }
.scan-d::before { background: radial-gradient(70vmax 50vmax at 50% 0%, var(--d-moeten), transparent 70%); opacity: var(--moeten); }
.scan-d::after { background: radial-gradient(70vmax 50vmax at 50% 0%, var(--d-willen), transparent 70%); opacity: var(--willen); }

/* Het menu, alleen het merk, op nachtblauw. */
.scan-d .menu { background: var(--d-menu); color: var(--d-tekst); }
.scan-d .merk__method { color: var(--d-willen); }

/* De vraag */
.scan-d .scan__naam { color: var(--d-papier-72); }
.scan-d .scan__vraag { color: var(--d-tekst); font-weight: 600; line-height: 1.12; }
.scan-d .scan__nr { color: var(--d-papier-72); }
.scan-d .scan__onderdeel { color: var(--d-willen); }
.scan-d .scan__vooraf, .scan-d .scan__vanzelf, .scan-d .scan__teller { color: var(--d-papier-72); font-size: 16px; }
.scan-d .scan__vormregel { color: var(--d-tekst); }
.scan-d .scan__terug { color: var(--d-tekst); }
.scan-d .scan__mist { color: var(--d-tekst); padding-left: 12px; border-left: 3px solid var(--d-moeten); }

/* De antwoorden als rustige kaarten */
.scan-d .scan__opties { gap: 8px; }
.scan-d .scan__optie span {
  border: 1px solid var(--d-papier-14);
  border-radius: 20px;
  background: var(--d-papier-06);
  color: var(--d-tekst);
  font-size: 18px;
  transition: background var(--d-duur) var(--d-curve), border-color var(--d-duur) var(--d-curve), color var(--d-duur) var(--d-curve);
}
@media (hover: hover) { .scan-d .scan__optie span:hover { border-color: var(--d-papier-72); } }
.scan-d .scan__optie input:checked + span { background: var(--d-willen); border-color: var(--d-willen); color: var(--d-grond); }
.scan-d .scan__optie input:focus-visible + span,
.scan-d .scan__terug:focus-visible,
.scan-d .scan__overslaan:focus-visible { outline-color: var(--d-willen); }

/* Elke vraag veegt kort binnen, het oude scherm is dan al weg. */
html.scan-stapsgewijs .scan-d.d-veeg .scan__stap.is-actief { animation: d-in var(--d-duur) var(--d-curve); }   /* alleen vooruit, na een antwoord (scan.js, d-veeg) */
@keyframes d-in { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }

/* De vorm op donker */
.scan-d .vorm__as { stroke: var(--d-papier-14); }
.scan-d .vorm__as.is-nu { stroke: var(--d-willen); }
.scan-d .vorm__rand { stroke: var(--d-willen); }
.scan-d .vorm__dicht { stroke: var(--d-willen); }
.scan-d .vorm__vlak { fill: var(--d-vlak); stroke: var(--d-willen); }
.scan-d .vorm__punt { fill: var(--d-grond); stroke: var(--d-willen); }
.scan-d .vorm__punt.is-dicht { fill: var(--d-willen); }
.scan-d .poort__naam { fill: var(--d-papier-72); }
.scan-d .poort__naam.is-hier { fill: var(--d-willen); }
.scan-d .poort__lijn { stroke: var(--d-willen); }

/* De spiegel */
.scan-d .scan__spiegel { border-left-color: var(--d-willen); color: var(--d-tekst); }

/* Focus, links, kleine tekst en meldingen op donker (controle stap 1). */
.scan-d *:focus-visible { outline-color: var(--d-willen) !important; }
.scan-d .tekstlink { color: var(--d-tekst); }
.scan-d .klein, .scan-d .stil { color: var(--d-papier-72); }
.scan-d .melding, .scan-d .melding--fout { background: transparent; border-color: var(--d-moeten); color: var(--d-tekst); }
.scan-d .scan__onderdeel, .scan-d .scan__teller, .scan-d .scan__nr, .scan-d .veld__regel, .scan-d .scan__naam, .scan-d .scan__vormregel, .scan-d .klein, .scan-d .veld label { font-size: 16px; }
.scan-d .knop, .scan-d .tekstlink, .scan-d .vorm__as, .scan-d .vorm__punt { transition-duration: var(--d-duur); transition-timing-function: var(--d-curve); }
.scan-d .poort__lijn { transition: stroke-dashoffset var(--d-duur) var(--d-curve) var(--d-duur); }   /* pas na de veeg */

/* De poort en het scherm erna */
.scan-d .veld label { color: var(--d-tekst); }
.scan-d .veld__regel, .scan-d .scan__overslaan { color: var(--d-papier-72); }
.scan-d .veld input, .scan-d select, .scan-d textarea { border-color: var(--d-veldrand); background: var(--d-papier-06); color: var(--d-tekst); }
.scan-d .veld input::placeholder, .scan-d textarea::placeholder { color: var(--d-papier-72); }
.scan-d .veld input:focus-visible, .scan-d select:focus-visible, .scan-d textarea:focus-visible { outline-color: var(--d-willen); border-color: var(--d-willen); }
.scan-d .knop:hover { background: var(--d-tekst); color: var(--d-grond); }
.scan-d #aanvulling .scan__verder { background: var(--d-grond); border-top-color: var(--d-papier-14); }
.scan-d .leid, .scan-d .scan__contact p { color: var(--d-tekst); }

/* D stap 2: een beeld bij elk antwoord (scan.js, beeldBij). Eén motief per onderdeel, gevuld naar het antwoord. */
.scan-d .scan__optie span { gap: 14px; }
.scan-d .scan__beeld { flex: 0 0 28px; width: 28px; height: 28px; }
.scan-d .d-lijn { fill: none; stroke: currentColor; stroke-width: 2; opacity: .6; }
.scan-d .d-vol { fill: currentColor; opacity: .6; }
.scan-d .d-k-willen { fill: var(--d-willen); }
.scan-d .d-k-midden { fill: var(--d-tekst); }
.scan-d .d-k-moeten { fill: var(--d-moeten); }
.scan-d .scan__optie input:checked + span .d-k-willen,
.scan-d .scan__optie input:checked + span .d-k-midden,
.scan-d .scan__optie input:checked + span .d-k-moeten { fill: var(--d-grond); }

/* D stap 2: de spiegel als kaart die omdraait, boven de volgende vraag. Voor je antwoorden, achter wat het zegt. */
.scan-d .scan__spiegel--kaart { padding: 0; border: 0; perspective: 1200px; }
.scan-d .scan__kaart { display: grid; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform var(--d-duur) var(--d-curve); }
.scan-d .scan__kaart.is-om { transform: rotateY(180deg); }
.scan-d .scan__kaartkant { grid-area: 1 / 1; display: block; padding: 14px 16px; border-radius: 20px; font-size: 16px; line-height: 1.4; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.scan-d .scan__kaartvoor { transform: rotateY(0deg); background: var(--d-papier-06); border: 1px solid var(--d-papier-14); color: var(--d-tekst); }
.scan-d .scan__kaartachter { transform: rotateY(180deg); background: var(--d-willen); color: var(--d-grond); font-weight: 600; }
.scan-d .scan__kaartlabel { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 600; color: var(--d-papier-72); }
.scan-d .scan__kaartachter .scan__kaartlabel { color: var(--d-grond); }
.scan-d .scan__kaartachter .scan__kaartdraai { color: var(--d-grond); text-decoration-color: var(--d-grond); }   /* "Draai terug" op de jade achterkant (scan D) */
.scan-d .scan__kaartdraai { display: block; margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--d-tekst); text-decoration: underline; text-decoration-color: var(--d-willen); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .scan-d .scan__kaart { transition: none; } }
/* Op een lage telefoon is de kaart compact, zodat het laatste antwoord in beeld blijft. */
@media (max-width: 899px) and (max-height: 760px) {
  .scan-d .scan__spiegel--kaart { margin-bottom: 10px; }
  .scan-d .scan__kaartkant { padding: 8px 14px; font-size: 16px; line-height: 1.35; }
  .scan-d .scan__kaartvoor .scan__kaartlabel { display: none; }
  .scan-d .scan__kaartachter .scan__kaartlabel { display: none; }
  .scan-d .scan__kaartdraai { display: inline; margin: 0 0 0 6px; font-size: 16px; }
  .scan-d .scan__opties { gap: 6px; }
}
@media (max-height: 700px) {
  .scan-d .scan__optie span { min-height: 45px; padding: 7px 16px; }
  .scan-d .scan__spiegel--kaart { margin-bottom: 8px; }
}

/* Op een lage telefoon passen de vijf antwoorden van de eerste vraag in beeld. */
@media (max-height: 700px) {
  html.scan-stapsgewijs .scan-d .scan__vanzelf { display: none; }
  .scan-d .scan__optie span { font-size: 17px; }
  .scan-d .scan__vooraf { margin-bottom: 12px; }
}

/* Groot scherm, vanaf 1180 breed. Links de vorm groot, rechts de vraag in een kolom van 600 px. */
@media (min-width: 1180px) {
  .scan-d .scan .midden { max-width: 1376px; }
  .scan-d .scan .kolom { display: grid; grid-template-columns: minmax(0, 1fr) 600px; column-gap: 64px; max-width: none; align-items: start; }
  .scan-d .scan .kolom > * { grid-column: 2; }
  .scan-d .scan .kolom > .scan__naam { grid-column: 1 / -1; }
  .scan-d .scan__voortgang.met-vorm { grid-column: 1; grid-row: 2 / span 3; position: sticky; top: calc(var(--menu) + 40px); display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .scan-d .scan__voortgang.met-vorm .scan__terug { align-self: flex-start; }
  .scan-d .scan__vorm { width: min(440px, 100%); height: auto; aspect-ratio: 1; }
  .scan-d .scan__vorm .vorm__punt { r: 1.6px; }                  /* de punten blijven klein als de vorm groot staat (viewBox van 100) */
  .scan-d .scan__vormtekst { text-align: center; }
  .scan-d .scan .kolom:has(.scan__voortgang.is-poort), .scan-d .scan .kolom:has(.scan__voortgang.zonder-vorm) { grid-template-columns: 600px; justify-content: center; }
  .scan-d .scan .kolom:has(.scan__voortgang.is-poort) > *, .scan-d .scan .kolom:has(.scan__voortgang.zonder-vorm) > * { grid-column: 1; grid-row: auto; position: static; }
}

@media (prefers-reduced-motion: reduce) {
  html.scan-stapsgewijs .scan-d .scan__stap.is-actief { animation: none; }
  .scan-d::before, .scan-d::after, .scan-d .scan__optie span { transition: none; }
}

/* ---------------------------------------------------------------------------
   Scan D, de vorm in 3D (20 oktober 2026, Michaels ja op bouwen op de
   voorvertoning; uit de proef /scan-proef/3d/, ronde 4). vorm3d-scan.js zet
   html.d3-aan zodra het canvas er is; pas dan gaat de platte vorm weg en geldt
   de indeling hieronder. Zonder dat script blijft alles zoals hierboven. Op
   een groot scherm vult de vorm de linkerkolom, op de telefoon staat hij boven
   de vraag. Alle tekst minstens 16 px; alleen de namen in de tekening zijn op
   de telefoon 14 px. Ook voor de teamscan, die sinds scan D body.scan-d heeft.
   --------------------------------------------------------------------------- */

/* De platte vorm en de platte poortvorm weg, het canvas op hun plek */
.d3-aan .scan-d .scan__vorm,
.d3-aan .scan-d .poort__vorm { display: none; }
.d3-vorm { display: block; width: 100%; }

/* --- De antwoorden: kaarten met het beeld links ---------------------------- */
.d3-aan .scan-d .scan__opties { gap: 8px; }
.d3-aan .scan-d .scan__optie span { min-height: 56px; padding: 6px 18px 6px 10px; gap: 14px; border-radius: 16px; font-size: 18px; line-height: 1.25; }
.d3-aan .scan-d .scan__beeld { flex: 0 0 40px; width: 40px; height: 40px; padding: 5px; border-radius: 11px; background: var(--d-papier-06); }
.d3-aan .scan-d .scan__optie input:checked + span .scan__beeld { background: rgba(6, 26, 47, .12); }
@media (min-width: 1180px) {
  .d3-aan .scan-d .scan__optie span { min-height: 64px; font-size: 19px; }
  .d3-aan .scan-d .scan__beeld { flex-basis: 44px; width: 44px; height: 44px; }
}

/* --- Telefoon en tablet: boven de vraag, de volle breedte ---------------- */
@media (max-width: 1179px) {
  .d3-aan .scan-d .scan__voortgang.met-vorm { grid-template-columns: auto 1fr; gap: 0; min-height: 0; margin-bottom: 4px; }
  .d3-aan .scan-d .scan__voortgang.met-vorm .scan__terug:not([hidden]) { margin-right: 8px; }
  .d3-aan .scan-d .scan__voortgang.met-vorm .scan__terug { grid-column: 1; grid-row: 1; min-height: 34px; }
  .d3-aan .scan-d .scan__vormtekst { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; }
  .d3-aan .scan-d .scan__vormregel { font-size: 16px; line-height: 1.25; }
  .d3-aan .scan-d .scan__teller { margin: 0; font-size: 16px; white-space: nowrap; }
  .d3-aan .scan-d .d3-vorm { grid-column: 1 / -1; grid-row: 2; height: 200px; }
  .d3-aan .scan-d .scan__voortgang.is-poort .scan__vormtekst { display: none; }
  /* Typ je je naam of e-mailadres, dan maakt de vorm plaats voor het toetsenbord. */
  .d3-aan .scan-d .kolom:has(.is-typend) .d3-vorm { display: none; }
}
@media (min-width: 700px) and (max-width: 1179px) {
  .d3-aan .scan-d .d3-vorm { height: 300px; }
}

/* Telefoon (mobiel optimaliseren, 20 oktober 2026, DM Regie). Eén compacte
   rij bovenaan: links de terugpijl en "Vraag 3 van 10" (scan.js zet die in de
   teller), rechts de vorm klein, zonder de vijf namen (vorm3d-scan.js toont
   alleen de naam van de as die net groeit). De regel boven de vraag zelf gaat
   dan uit beeld (blijft voor een schermlezer), net als "Je beeld groeit met
   elk antwoord.". Doel: de vraagkop in de bovenste 35 procent, alle
   antwoorden boven de vouw, ook op 375 x 667 met de balken van Safari. */
@media (max-width: 699px) {
  .d3-aan .scan-d .scan { padding-top: var(--menu); }
  .d3-aan .scan-d .scan__voortgang.met-vorm { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0; margin-bottom: 6px; }
  .d3-aan .scan-d .scan__voortgang.met-vorm .scan__terug { grid-column: 1; grid-row: 1; min-height: 44px; }
  .d3-aan .scan-d .scan__voortgang.met-vorm .scan__terug:not([hidden]) { margin-right: 6px; }
  .d3-aan .scan-d .scan__vormtekst { grid-column: 2; grid-row: 1; display: block; min-height: 0; }
  .d3-aan .scan-d .scan__vormregel { display: none; }
  .d3-aan .scan-d .scan__teller { margin: 0; font: 600 16px / 1.3 var(--tekst); letter-spacing: .06em; text-transform: uppercase; color: var(--d-willen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .d3-aan .scan-d .d3-vorm { grid-column: 3; grid-row: 1; width: 132px; height: 96px; }
  .d3-aan .scan-d .scan__voortgang.is-poort .scan__vormtekst { display: block; }
  /* Na de poort is de vorm compleet: bij de vraag van Dennis en wat lukte staat de vraag direct bovenaan. */
  .d3-aan .scan-d .scan__voortgang[data-soort="extra"] .d3-vorm { display: none; }
  /* iPhone SE met de balken van Safari: op de poort geen vorm, zodat de knop in beeld staat. */
  @media (max-height: 620px) { .d3-aan .scan-d .scan__voortgang.is-poort .d3-vorm { display: none; } }
  @media (max-height: 620px) { .d3-aan .scan-d .scan__contact .scan__vraag { font-size: 22px; } .d3-aan .scan-d .scan__contact .veld__regel { line-height: 1.3; } .d3-aan .scan-d .scan__contact .formulier { gap: 6px; } }
  /* Terug als pijl alleen; de naam blijft Terug voor een schermlezer. */
  .d3-aan .scan-d .scan__terug { width: 34px; padding: 0; overflow: hidden; white-space: nowrap; font-size: 0; }
  .d3-aan .scan-d .scan__terug::before { font-size: 20px; }
  /* De regel boven de vraag staat al in de rij; hier alleen nog voor een schermlezer. */
  .d3-aan .scan-d .scan__stap .scan__nr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

  .d3-aan .scan-d .scan__vraag { margin-bottom: 10px; font-size: 24px; line-height: 1.1; }
  .d3-aan .scan-d .scan__opties { gap: 5px; }
  /* Kaarten iets compacter, zodat vijf antwoorden van twee regels passen; het tikdoel blijft minstens 48 px. */
  .d3-aan .scan-d .scan__optie span { min-height: 48px; padding: 3px 12px 3px 8px; gap: 10px; font-size: 17px; line-height: 1.2; }
  .d3-aan .scan-d .scan__beeld { flex-basis: 34px; width: 34px; height: 34px; padding: 4px; border-radius: 10px; }

  /* De korte introregel op de telefoon; de lange staat bij de poort. */
  .d3-aan .scan-d .scan__stap[data-stap="vraag"] .scan__vooraf:not(.scan__vooraf--kort) { display: none; }
  .d3-aan .scan-d .scan__vooraf--kort { display: block; }
  /* De introregel en "je gaat vanzelf door" onder de antwoorden. */
  html.d3-aan.scan-stapsgewijs .scan-d .scan__stap[data-stap="vraag"].is-actief:has(.scan__vooraf) { display: flex; flex-direction: column; }
  .d3-aan .scan-d .scan__stap[data-stap="vraag"] .scan__opties { order: 1; }
  .d3-aan .scan-d .scan__stap[data-stap="vraag"] .scan__vooraf { order: 2; margin: 12px 0 0; line-height: 1.4; }
  .d3-aan .scan-d .scan__stap[data-stap="vraag"] .scan__vanzelf { order: 3; margin: 4px 0 0; }

  /* De kaart "Dit zei je" onder de antwoorden. */
  .d3-aan .scan-d .scan .kolom { display: flex; flex-direction: column; }
  .d3-aan .scan-d .scan .kolom > .scan__voortgang { order: 1; }
  .d3-aan .scan-d .scan .kolom > form { order: 2; }
  .d3-aan .scan-d .scan .kolom > .scan__spiegel { order: 3; margin: 16px 0 0; }

  /* De poort: de knop in beeld als het toetsenbord dicht is. */
  .d3-aan .scan-d .scan__contact .scan__vraag { margin-bottom: 6px; }
  .d3-aan .scan-d .scan__contact .leid { margin-bottom: 8px; line-height: 1.35; }
  .d3-aan .scan-d .scan__contact .formulier { gap: 8px; }
  .d3-aan .scan-d .scan__contact .veld { gap: 2px; }
  .d3-aan .scan-d .scan__contact .veld input { min-height: 48px; }
  .d3-aan .scan-d .scan__contact .veld__regel { margin-top: 4px; line-height: 1.35; }
}
/* De korte introregel alleen op de telefoon met script; de teller alleen op de
   telefoon (op een groter scherm staat "Vraag 3 van 10" al boven de vraag). */
.scan-d .scan__vooraf--kort { display: none; }
@media (min-width: 700px) {
  .scan-d .scan__teller { display: none; }
}

/* --- Groot scherm: de vorm vult de linkerkolom --------------------------- */
@media (min-width: 1180px) {
  .d3-aan .scan-d .scan__voortgang.met-vorm { position: sticky; display: grid; grid-template-columns: 1fr; gap: 0; justify-items: stretch; }
  .d3-aan .scan-d .scan__voortgang.met-vorm .scan__terug { position: absolute; top: 0; left: 0; z-index: 1; }
  .d3-aan .scan-d .d3-vorm { grid-column: 1; width: calc(100% + 40px); margin-left: -40px; height: calc(100svh - var(--menu) - 130px); min-height: 460px; max-height: 820px; }
  .d3-aan .scan-d .scan__vormtekst { grid-column: 1; text-align: center; }
  /* Op de poort blijft de vorm links staan; de regel hierboven maakt er anders één kolom van. */
  .d3-aan .scan-d .scan .kolom:has(.scan__voortgang.is-poort) { grid-template-columns: minmax(0, 1fr) 600px; justify-content: stretch; }
  .d3-aan .scan-d .scan .kolom:has(.scan__voortgang.is-poort) > * { grid-column: 2; grid-row: auto; }
  .d3-aan .scan-d .scan .kolom:has(.scan__voortgang.is-poort) > .scan__naam { grid-column: 1 / -1; }
  .d3-aan .scan-d .scan .kolom:has(.scan__voortgang.is-poort) > .scan__voortgang { grid-column: 1; grid-row: 2 / span 3; position: sticky; top: calc(var(--menu) + 40px); }
  .d3-aan .scan-d .scan .kolom:has(.scan__voortgang.is-poort) .d3-vorm { height: calc(100svh - var(--menu) - 90px); }
}

/* --- Na de poort: de vraag van Dennis, wat lukte en het laadmoment -------- */
.scan-d .scan__anders { display: grid; gap: 8px; margin: 14px 0 0; }
.scan-d .scan__anders[hidden] { display: none; }
.scan-d .scan__anders label { font: 600 16px / 1.3 var(--tekst); color: var(--d-tekst); }
.scan-d .scan__anders input { min-height: 48px; padding: 10px 14px; border: 1px solid var(--d-veldrand); border-radius: 12px; background: var(--d-papier-06); color: var(--d-tekst); font: 400 17px / 1.3 var(--tekst); }
.scan-d .scan__anders input:focus-visible { outline: 3px solid var(--d-willen); outline-offset: 2px; border-color: var(--d-willen); }
.scan-d .scan__anders .knop { justify-self: start; }
.scan-d #aanvulling .scan__verder { position: static; margin-top: 12px; padding: 0; border-top: 0; background: none; }   /* niet meer de plakkende balk van het oude scherm "Wat zoek jij?": hij lag over Verder */
.scan-d .laden__lijst { display: grid; gap: 12px; margin: 22px 0 18px; padding: 0; list-style: none; }
.scan-d .laden__regel { font: 400 18px / 1.4 var(--tekst); color: var(--d-tekst); }
.scan-d .laden__naam { color: var(--d-willen); font-weight: 600; }
.scan-d .laden__klaar { margin: 0; font: 600 18px / 1.4 var(--tekst); color: var(--d-tekst); }
/* Met script komen de regels één voor één binnen (scan.js, laden). Eén duur, één curve. */
html.scan-stapsgewijs .scan-d .laden__regel,
html.scan-stapsgewijs .scan-d .laden__klaar { opacity: 0; transform: translateY(6px); transition: opacity var(--d-duur) var(--d-curve), transform var(--d-duur) var(--d-curve); }
html.scan-stapsgewijs .scan-d .laden__regel.is-zichtbaar,
html.scan-stapsgewijs .scan-d .laden__klaar.is-zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.scan-stapsgewijs .scan-d .laden__regel, html.scan-stapsgewijs .scan-d .laden__klaar { transition: none; transform: none; }
}