/* Visitr-scan dienst: landing, voortgang, aanmelden. Zelfde palet als het rapport (scan/rapport.py). */
@font-face{font-family:"Barlow Condensed";src:url("/web/fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/web/fonts/ibm-plex-sans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/web/fonts/ibm-plex-sans-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/web/fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --zand:#E2DAC5; --vel:#EEE8D8; --vel-2:#E7E0CC; --inkt:#22241C; --inkt-2:#4C4D3F; --grijs:#5E5A47;
  --lijn:#BDB298; --lijn-zacht:#D3CAB2; --signaal:#E2571A; --signaal-inkt:#A3380A; --signaal-zacht:#F6D2BC;
  --groen:#3E6B36; --groen-zacht:#CFDDBE; --khaki:#6E6033; --khaki-zacht:#E3D7AE; --op-signaal:#FFF7EE;
  --kop:"Barlow Condensed","Arial Narrow",sans-serif; --tekst:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --zand:#16170F; --vel:#1E2017; --vel-2:#25271C; --inkt:#ECE5D0; --inkt-2:#C9C2AA; --grijs:#9C9780;
  --lijn:#3E4033; --lijn-zacht:#2E3026; --signaal:#FF7433; --signaal-inkt:#FF9A66; --signaal-zacht:#46261A;
  --groen:#8DBA6B; --groen-zacht:#26331D; --khaki:#C9B677; --khaki-zacht:#353020; --op-signaal:#1B0E06;
}}
:root[data-theme="dark"]{
  --zand:#16170F; --vel:#1E2017; --vel-2:#25271C; --inkt:#ECE5D0; --inkt-2:#C9C2AA; --grijs:#9C9780;
  --lijn:#3E4033; --lijn-zacht:#2E3026; --signaal:#FF7433; --signaal-inkt:#FF9A66; --signaal-zacht:#46261A;
  --groen:#8DBA6B; --groen-zacht:#26331D; --khaki:#C9B677; --khaki-zacht:#353020; --op-signaal:#1B0E06;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--zand);color:var(--inkt);font:17px/1.55 var(--tekst);overflow-x:hidden}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3{font-family:var(--kop);font-weight:700;line-height:1.05;margin:0;letter-spacing:.005em}
h1{font-size:clamp(40px,8vw,64px);margin:10px 0 16px}
h2{font-size:28px;margin:0 0 12px}
h3{font-size:21px;margin:0 0 6px}
p{margin:0 0 12px}

.strook{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:2px solid var(--inkt);font:500 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.merk{font:700 22px/1 var(--kop);letter-spacing:.02em;text-transform:none}
.merk b{color:var(--signaal)}
main{max-width:760px;margin:0 auto;padding:32px 16px 64px}
.voor{font:500 13px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--signaal-inkt);margin:0}
.lead{font-size:20px;color:var(--inkt-2);max-width:40em}

.kaart{background:var(--vel);border:1.5px solid var(--lijn);border-radius:4px;padding:20px;margin:20px 0}
.kaart-accent{border-color:var(--inkt);box-shadow:6px 6px 0 var(--inkt)}

form .veld{margin:0 0 14px}
label{display:block;font-weight:600;margin:0 0 6px}
.hint{display:block;font-weight:400;color:var(--grijs);font-size:14px;margin-top:2px}
input[type=text],input[type=url],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;font:inherit;color:var(--inkt);background:var(--zand);border:1.5px solid var(--inkt);border-radius:3px;padding:12px 12px;min-height:48px}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--signaal);outline-offset:2px}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 20px/1 var(--kop);letter-spacing:.03em;text-transform:uppercase;
  background:var(--signaal);color:var(--op-signaal);border:2px solid var(--inkt);border-radius:3px;padding:14px 22px;min-height:52px;cursor:pointer;text-decoration:none}
.knop:hover{background:var(--signaal-inkt)}
.knop[disabled]{opacity:.6;cursor:wait}
.knop-stil{background:transparent;color:var(--inkt)}
.knop-stil:hover{background:var(--vel-2)}
.rij{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.melding{border-left:4px solid var(--signaal);background:var(--signaal-zacht);padding:12px 14px;margin:14px 0}
.melding:empty{display:none}
.klein{font-size:14px;color:var(--grijs)}
.privacy{font-size:14px;color:var(--inkt-2);margin-top:14px}

.stappen{list-style:none;padding:0;margin:0;counter-reset:s}
.stappen li{display:grid;grid-template-columns:36px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--lijn-zacht)}
.stappen li::before{counter-increment:s;content:counter(s);font:700 26px/1 var(--kop);color:var(--signaal)}

.voortgang-stappen{list-style:none;padding:0;margin:0 0 8px;display:flex;flex-wrap:wrap;gap:6px}
.voortgang-stappen li{font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 9px;border:1.5px solid var(--lijn);border-radius:3px;color:var(--grijs)}
.voortgang-stappen li.gedaan{border-color:var(--groen);color:var(--groen);background:var(--groen-zacht)}
.voortgang-stappen li.nu{border-color:var(--signaal);color:var(--signaal-inkt);background:var(--signaal-zacht)}

.badge{display:inline-block;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;border-radius:2px;white-space:nowrap}
.b-OK{background:var(--groen-zacht);color:var(--groen)}
.b-PROBLEEM{background:var(--signaal-zacht);color:var(--signaal-inkt)}
.b-KANS,.b-INDICATIE{background:var(--khaki-zacht);color:var(--khaki)}
.b-INFO,.b-NIET_GEMETEN{background:var(--vel-2);color:var(--grijs)}
.lijst{list-style:none;margin:0;padding:0}
.lijst li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--lijn-zacht)}
.lijst .uitleg{flex-basis:100%;margin:0;font-size:14px;color:var(--inkt-2)}

.machine{padding:12px 0;border-top:1px solid var(--lijn-zacht)}
.machine-kop{display:flex;justify-content:space-between;gap:12px;font-weight:600}
.balk{height:8px;background:var(--vel-2);border-radius:2px;margin:8px 0;overflow:hidden}
.balk span{display:block;height:100%;background:var(--signaal);width:0;transition:width .4s ease}
.fragment{font-size:15px;color:var(--inkt-2);margin:0;overflow-wrap:anywhere}
.fragment::before{content:"“"}.fragment::after{content:"”"}
.citaat{font-size:14px;color:var(--grijs);margin:4px 0 0;overflow-wrap:anywhere}
.onzeker label::after{content:" · controleer dit";color:var(--signaal-inkt);font-weight:400}
.onzeker input,.onzeker textarea,[aria-invalid=true]{border-color:var(--signaal-inkt);box-shadow:inset 4px 0 0 var(--signaal)}
.klaar-link{font:700 26px/1.1 var(--kop);word-break:break-all}
[hidden]{display:none!important}
[data-soort="signaal"] .alleen-gesprek,[data-soort="gesprek"] .alleen-signaal{display:none}
[data-soort="signaal"] .alleen-bureau,[data-soort="gesprek"] .alleen-bureau,[data-soort="bureau"] .alleen-signaal,[data-soort="bureau"] .alleen-gesprek{display:none}
[data-soort="gesprek"] .alleen-factuur,[data-soort="bureau"] .alleen-factuur{display:none}
.factuur{margin-top:12px;border-top:1px solid var(--lijn-zacht);padding-top:10px}
.factuur summary{cursor:pointer;font-weight:600;font-size:15px}
.prijzen{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.prijzen li{border:1px solid var(--lijn);border-radius:6px;padding:14px 16px;background:var(--vel)}
.prijzen .bedrag{font:700 30px/1 var(--kop);margin:0 0 4px}
.prijzen .bedrag small{font:400 15px/1.3 var(--tekst);color:var(--inkt-2);margin-left:6px}
.paspoort-kaart p{margin:0 0 8px}
.paspoort-mist{color:var(--grijs);font-size:14px}
.voet{max-width:760px;margin:0 auto;padding:20px 16px 40px;border-top:1px solid var(--lijn);font-size:14px;color:var(--grijs);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
@media (prefers-reduced-motion:reduce){.balk span{transition:none}}
@media (max-width:520px){.knop{width:100%}.kaart{padding:16px}.lead{font-size:18px}}

/* v3 (research 13): merkregel, betaald/gratis, betaalkaart */
.strook .van{font:400 13px/1 var(--tekst);letter-spacing:0;text-transform:none;color:var(--grijs)}
.strook .van a{color:var(--inkt);text-decoration:none;border-bottom:1px solid var(--lijn)}
.voet a{color:inherit}
.kaart-kop{margin:0 0 12px;font-size:24px}
body[data-betaald=""] .alleen-betaald{display:none}
body:not([data-betaald=""]) .alleen-gratis{display:none}
.prijs{font:700 40px/1 var(--kop);color:var(--signaal)}
.prijs small{font:400 15px/1.3 var(--tekst);color:var(--grijs);margin-left:8px}
.betaal-wacht{color:var(--grijs);font-size:15px}

/* v4 (livegang blok 3, 0.13.0): bewijs, rapportinhoud, bureaus, wie, FAQ, tekstpagina's */
.bewijs{margin:36px 0 28px;padding:20px 0 8px;border-top:2px solid var(--inkt);border-bottom:1px solid var(--lijn-zacht)}
.bewijs h2{font-size:clamp(28px,5vw,40px);line-height:1.08;margin:8px 0 12px;max-width:18em}
.bewijs h2 em{font-style:normal;color:var(--signaal)}
.bewijs p{max-width:44em}
.lijst-vinken{list-style:none;padding:0;margin:0 0 24px}
.lijst-vinken li{position:relative;padding:8px 0 8px 30px;border-top:1px solid var(--lijn-zacht)}
.lijst-vinken li::before{content:"";position:absolute;left:2px;top:14px;width:12px;height:7px;border-left:3px solid var(--groen);border-bottom:3px solid var(--groen);transform:rotate(-45deg)}
.bureau{margin-top:28px}
.bureau h2{margin-top:6px}
.signaal-voorbeeld{margin:12px 0 14px;padding:12px 16px;border-left:4px solid var(--signaal);background:var(--zand);font-size:15px}
.signaal-voorbeeld p{margin:0 0 8px}
.signaal-voorbeeld p:last-child{margin:0}
.wie{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:start;margin:36px 0 28px;padding-top:20px;border-top:1px solid var(--lijn-zacht)}
.wie-foto{width:96px;height:96px;border-radius:50%;object-fit:cover;border:2px solid var(--inkt)}
.wie p{max-width:44em}
.faq{margin:0 0 28px}
.faq details{border-top:1px solid var(--lijn-zacht);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--lijn-zacht)}
.faq summary{cursor:pointer;font-weight:600;padding:10px 0;list-style:none;position:relative;padding-right:28px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:6px;font:700 24px/1 var(--kop);color:var(--signaal)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 12px;max-width:44em;color:var(--inkt-2)}
main.tekst h2{margin-top:32px;font-size:26px}
main.tekst ul{padding-left:20px;margin:0 0 12px}
main.tekst li{margin:0 0 8px;max-width:44em}
main h2+.stappen,main h2+.prijzen{margin-top:4px}
@media (max-width:520px){.wie{grid-template-columns:64px 1fr;gap:14px}.wie-foto{width:64px;height:64px}}

/* v5 (audit 2026-10-29): contrast, tikdoelen, stappen op mobiel, velden */
.strook a.merk{text-decoration:none}
.voet a,.rij a.klein{display:inline-block;padding:8px 0;min-height:24px}
#url{scroll-margin-top:24px}
#sites{max-width:8em}
.veld-rij{display:grid;grid-template-columns:8em 1fr;gap:12px}
.veld-rij .veld{margin:0}
.voortgang-stappen li.gedaan::before{content:"✓ "}
@media (max-width:520px){
  .voortgang-stappen li:not(.nu){display:none}
  .voortgang-stappen li.nu::before{content:attr(data-stap) " · "}
}
.cta-onder{margin:8px 0 24px;padding:20px;background:var(--vel);border:1.5px solid var(--inkt);box-shadow:6px 6px 0 var(--inkt);border-radius:4px}
.cta-onder h2{margin-bottom:6px}
.geld-terug{font-size:14px;color:var(--inkt-2);margin:10px 0 0}

.kiesvraag{margin:12px 0 16px;padding:12px 16px;border-left:4px solid var(--signaal);background:var(--zand)}
.kiesvraag p{margin:0 0 6px}
.kiesvraag .voor{margin-bottom:8px}
.voorbeelden{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:0 0 8px}
.voorbeelden .kaart{margin:0;display:flex;flex-direction:column}
.voorbeelden h3{font-size:24px;line-height:1.1;margin:4px 0 10px}
.voorbeelden .actie{border-left:4px solid var(--groen);padding:8px 12px;background:var(--zand);font-size:15px;margin:0 0 12px}
.voorbeelden .rij{margin-top:auto}