/* ---------------------------------------------------------------------------
   De eigen Van moeten naar willen-scan, /scan/ en /scan/team/.
   Een eigen bestand naast stijl.css, zodat de scan de rest van de site niet
   raakt. Kleuren en maten komen uit de variabelen bovenin stijl.css.
   Zonder script is de scan één lange lijst, met script (klasse
   scan-stapsgewijs op html) één vraag per scherm.
   --------------------------------------------------------------------------- */

.scan { min-height: 100svh; padding: calc(var(--menu) + 8px) 0 calc(var(--sectie) * .7); }
@media (min-width: 900px) { .scan { padding-top: calc(var(--menu) + 32px); } }

.scan__naam { margin: 0 0 20px; font: 600 12px / 1.3 var(--kop); letter-spacing: .16em; text-transform: uppercase; color: var(--houtskool-70); }

/* --- Voortgang ------------------------------------------------------------- */

.scan__voortgang { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; min-height: 44px; margin: 0 0 28px; }
.scan__balk { grid-column: 2; height: 4px; border-radius: 99px; background: var(--rand-papier); overflow: hidden; }
.scan__balk i { display: block; width: 0; height: 100%; border-radius: 99px; background: var(--jade); transition: width 400ms var(--verloop); }
.scan__terug {
  grid-column: 1;
  min-height: 44px;
  padding: 0 4px 0 0;
  border: 0;
  background: none;
  font: 500 16px / 1 var(--tekst);
  color: var(--donkerblauw);
  cursor: pointer;
}
.scan__terug::before { content: "\2190\00a0"; }
.scan__terug:focus-visible { outline: 3px solid var(--jade-diep); outline-offset: 2px; border-radius: 6px; }
.scan__terug[hidden] + .scan__balk { grid-column: 1 / -1; }

/* --- Een vraag -------------------------------------------------------------- */

.scan__form { max-width: 560px; }
.scan__stap { margin: 0 0 56px; padding: 0; border: 0; min-width: 0; }
.scan__vraag {
  display: block;
  margin: 0 0 24px;
  padding: 0;
  font: 600 var(--maat-vraag) / 1.18 var(--kop);
  letter-spacing: -.01em;
  color: var(--donkerblauw);
  text-wrap: balance;
}
.scan__vraag:focus { outline: none; }
.scan__nr { display: block; margin-bottom: 10px; font: 500 15px / 1.3 var(--tekst); letter-spacing: 0; color: var(--houtskool-70); }

.scan__opties { display: grid; gap: 10px; }
.scan__optie { position: relative; display: block; }
.scan__optie input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.scan__optie span {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 20px;
  border: 1px solid var(--houtskool-70);
  border-radius: 14px;
  background: var(--wit);
  font: 500 17px / 1.3 var(--tekst);
  color: var(--donkerblauw);
  cursor: pointer;
  transition: background 200ms var(--verloop), color 200ms, border-color 200ms, transform 200ms var(--verloop);
}
@media (hover: hover) { .scan__optie span:hover { border-color: var(--donkerblauw); } }
.scan__optie input:checked + span { background: var(--donkerblauw); border-color: var(--donkerblauw); color: var(--papier); }
.scan__optie input:focus-visible + span { outline: 3px solid var(--jade-diep); outline-offset: 2px; }
.scan__optie input:active + span { transform: scale(.99); }

.scan__volgende { margin-top: 20px; }

/* Bij de eerste vraag, alleen met script, want zonder script ga je niet
   vanzelf door. Dezelfde letter als het vraagnummer. */
.scan__vanzelf { display: none; margin: -12px 0 20px; font: 500 15px / 1.3 var(--tekst); color: var(--houtskool-70); }
html.scan-stapsgewijs .scan__vanzelf { display: block; }

/* Na versturen met een open vraag, boven de opties van die vraag. */
.scan__mist { margin: -8px 0 16px; font: 600 15px / 1.3 var(--tekst); color: var(--rood-diep); }

/* --- Formulieren in de scan -------------------------------------------------- */

.scan .formulier { margin-bottom: 24px; }
.scan select, .scan textarea {
  width: 100%;
  border: 1px solid var(--houtskool-70);
  border-radius: 12px;
  background: var(--wit);
  font: 400 17px / 1.4 var(--tekst);
  color: var(--donkerblauw);
}
.scan select { height: 50px; padding: 0 14px; }
.scan textarea { min-height: 120px; padding: 12px 16px; resize: vertical; }
.scan select:focus-visible, .scan textarea:focus-visible { outline: 3px solid var(--jade-diep); outline-offset: 2px; border-color: var(--jade-diep); }

.scan__verder { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.scan__overslaan {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 16px / 1 var(--tekst);
  color: var(--houtskool-70);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.scan__overslaan:focus-visible { outline: 3px solid var(--jade-diep); outline-offset: 2px; border-radius: 6px; }

/* Het veld dat mensen niet zien en robots wel invullen. */
.scan__vul { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.scan__verborgen { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Eén vraag per scherm, alleen met script ---------------------------------- */

html.scan-stapsgewijs .scan__stap { display: none; margin-bottom: 0; }
html.scan-stapsgewijs .scan__stap.is-actief { display: block; animation: scan-in 320ms var(--verloop); }

@keyframes scan-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

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

/* --- Mobiel, 2 oktober 2026. Alle vijf antwoorden passen op een telefoon van
   667 px hoog, de balk is te zien en de verzendknop past op het scherm. ----- */
.scan__balk { height: 6px; background: rgba(64, 56, 56, .2); }
@media (max-width: 899px) {
  :root { --menu: 64px; }
  .scan { padding-top: calc(var(--menu) + 8px); }
  .scan__naam { display: none; }
  .scan__voortgang { margin-bottom: 16px; }
  .scan__vraag { margin-bottom: 16px; }
  .scan__nr { margin-bottom: 6px; }
  .scan__opties { gap: 8px; }
  .scan .knop--groot { width: 100%; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .scan__optie span { min-height: 48px; padding: 10px 18px; }
  .scan__vraag { font-size: 24px; }
  /* Op een kleine telefoon staat de verzendknop van het contactscherm in beeld (3 oktober 2026). */
  .scan__contact .leid { font-size: 16px; line-height: 1.45; margin-bottom: 12px; }
  .scan__contact .formulier { gap: 10px; }
  .scan__contact .veld { gap: 2px; }
  .scan__contact .veld__regel { line-height: 1.35; }
  .scan__contact .knop--groot { min-height: 52px; height: 52px; }
}

/* De regel op de eerste stap van de teamscan die vooraf zegt wat er na de
   vragen komt (3 oktober 2026). Dezelfde letter als .scan__vanzelf, en ook
   zonder script in beeld. */
.scan__vooraf { margin: -12px 0 20px; font: 500 15px / 1.3 var(--tekst); color: var(--houtskool-70); }
.scan__heel { white-space: nowrap; }   /* e-mailadres breekt niet af op het streepje */

/* Het vrijwillige scherm na het versturen, 3 oktober 2026. De knop naar de
   uitslag en Overslaan blijven onderin in beeld, zodat niemand hoeft te
   scrollen om bij zijn uitslag te komen. Op de telefoon staan ze naast elkaar. */
#aanvulling .scan__verder {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rand-papier);
  background: var(--papier);
}
@media (max-width: 899px) {
  #aanvulling .scan__verder { flex-wrap: nowrap; gap: 20px; }
  #aanvulling .scan__verder .knop--groot { flex: 1 1 auto; width: auto; min-width: 0; padding: 0 20px; }
  #aanvulling .scan__overslaan { flex: none; }
}
/* De knop onder de foutmelding op /scan/bevestig/ plakte tegen de melding aan (3 oktober 2026). */
.scan .melding + p { margin-top: 20px; }
.scan .melding { margin-bottom: 16px; }

/* Typ je in een veld, dan staat de knoppenbalk niet over dat veld heen (3 oktober 2026). */
#aanvulling:has(textarea:focus, select:focus, input:focus, .scan__verder button:active) .scan__verder { position: static; }
#aanvulling select, #aanvulling textarea { scroll-margin-bottom: 110px; }

/* Golf A, stap A2 (13 oktober 2026): de voortgang houdt vanaf de eerste paint zijn plek vast, zodat het formulier niet 73 px verspringt als scan.js hem toont (CLS van 0,032 naar 0). !important tegen [hidden] { display: none !important } in stijl.css. Uit 03-funnel/onderzoek-site-2026-10-13/42-toets-techniek.md, A5. */
html.js .scan__voortgang[hidden] { display: grid !important; visibility: hidden; }

/* Stap 1 scanervaring (15 oktober 2026, K1): een nieuw scanscherm staat er meteen, tekst faadt niet meer in. */
html.scan-stapsgewijs .scan__stap.is-actief { animation: none; }

/* De vorm in de bovenste rij (scanervaring stap 3, 15 oktober 2026). Vervangt de balk van 6 px in de scan voor jezelf.
   Terug, de vorm en rechts de regel met de teller. Alleen kleur, positie en het vlak bewegen, via scan.js, nooit tekst. */
.scan__voortgang.met-vorm { grid-template-columns: auto 116px 1fr; gap: 14px; margin-bottom: 20px; }
.scan__voortgang.met-vorm .scan__balk { display: none; }
.scan__voortgang.met-vorm .scan__terug { grid-column: 1; }
.scan__vorm { grid-column: 2; width: 116px; height: 116px; overflow: visible; }
.scan__vormtekst { grid-column: 3; min-width: 0; }
.scan__vormregel { margin: 0; font: 600 15px / 1.3 var(--tekst); color: var(--donkerblauw); }
.scan__teller { margin: 4px 0 0; font: 500 13px / 1.3 var(--tekst); color: var(--houtskool-70); }
.vorm__as { stroke: rgba(64, 56, 56, .28); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke 200ms ease; }
.vorm__as.is-nu { stroke: var(--jade-diep); stroke-width: 2; }
.vorm__rand { fill: none; stroke: var(--jade-diep); stroke-width: 1.5; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.vorm__vlak { fill: rgba(11, 42, 74, .1); stroke: var(--donkerblauw); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.vorm__punt { fill: var(--papier); stroke: var(--donkerblauw); stroke-width: 2; vector-effect: non-scaling-stroke; transition: fill 200ms ease; }
.vorm__punt.is-dicht { fill: var(--donkerblauw); }
.scan__onderdeel { font: 600 13px / 1.3 var(--tekst); letter-spacing: .08em; text-transform: uppercase; color: var(--jade-diep); }
@media (max-height: 700px) {
  .scan__voortgang.met-vorm { grid-template-columns: auto 84px 1fr; }
  .scan__vorm { width: 84px; height: 84px; }
}
@media (min-width: 900px) {
  .scan__voortgang.met-vorm { grid-template-columns: auto 150px 1fr; }
  .scan__vorm { width: 150px; height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .vorm__as, .vorm__punt { transition: none; }
}

/* --- De poort (scanervaring stap 6, 15 oktober 2026) -----------------------
   Het contactscherm van de scan voor jezelf. De grote vorm met namen, de lijn
   die aanwijst waar het begint, dan kop, ruil en velden. Zie scan.js, poortBij. */
.scan__voortgang.met-vorm.is-poort { grid-template-columns: auto 1fr; }
.scan__voortgang.is-poort .scan__vorm,
.scan__voortgang.is-poort .scan__vormtekst { display: none; }
.poort__vorm { margin: 0 auto 8px; max-width: 340px; }
.poort__svg { display: block; width: 100%; height: auto; overflow: visible; }
.poort__naam { font: 500 6.5px/1 var(--tekst); fill: var(--houtskool); }
.poort__naam.is-hier { font-weight: 700; fill: var(--jade-diep); }
.poort__lijn { stroke: var(--jade-diep); stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset 400ms ease-out; }
.scan__contact.met-poort .poort__gelijk { margin-bottom: 8px; }
.scan__contact .poort__mail { margin: 10px 0 0; }
@media (prefers-reduced-motion: reduce) { .poort__lijn { transition: none; } }
@media (max-height: 700px) { .poort__vorm { max-width: 240px; } }
@media (max-width: 899px) { .scan__contact.is-typend .poort__vorm { display: none; } }

/* --- De rand trekt dicht (scanervaring stap 4, 15 oktober 2026) ------------
   Na de doelvraag wordt de gestippelde rand een volle lijn, met de klok mee
   vanaf Energie (scan.js, zetDicht). Op de poort staat hij meteen dicht. */
.vorm__dicht { fill: none; stroke: var(--jade-diep); stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }   /* ronde 1: vaste 2,5 px op elke maat, zodat vol tegen gestippeld ook op de telefoon leesbaar is */
.poort__doel { margin: 4px 0 0; text-align: center; }

/* --- De spiegelzin (scanervaring stap 5, 15 oktober 2026) ------------------
   Je eigen twee antwoorden van het onderdeel dat net af is, boven de volgende
   vraag. Geen beweging (scan.js, spiegelBij). */
.scan__spiegel { margin: 0 0 18px; padding: 2px 0 2px 12px; border-left: 3px solid var(--jade-diep); font: 400 16px/1.45 var(--tekst); color: var(--donkerblauw); }
@media (max-height: 700px) { .scan__spiegel { font-size: 15px; margin-bottom: 12px; } }
/* De rolvraag (acht keuzes) op de telefoon in twee kolommen van 48 px (50-voorstel 2.6). */
@media (max-width: 899px) {
  .scan__stap[data-code="rol"] .scan__opties { grid-template-columns: 1fr 1fr; gap: 8px; }
  .scan__stap[data-code="rol"] .scan__optie span { min-height: 48px; height: 100%; padding: 8px 12px; font-size: 15px; line-height: 1.25; }
}
@media (max-height: 700px) { .scan__spiegel { line-height: 1.35; margin-bottom: 8px; } }

/* De teamscan (scanervaring stap 9, 16 oktober 2026). Op de eerste stap, de
   teamgrootte, staat nog geen vorm. Vanaf t1 wel, met de teller van 1 tot 10. */
.scan__voortgang.met-vorm.zonder-vorm .scan__vorm,
.scan__voortgang.met-vorm.zonder-vorm .scan__vormtekst { display: none; }

/* Fase 1a, de betekenis onder de echo in de spiegel (19 oktober 2026). */
.scan__duid { display: block; margin-top: 4px; font-weight: 600; }
@media (max-height: 760px) { .scan__duid { display: none; } }   /* op een laag scherm alleen de echo, zoals voor fase 1; de betekenis komt op de uitslag terug (copybewaker 19 oktober) */