/* Boom in Beeld - snelle flow (masterplan S1.3). Mobiel eerst; tikdoelen >= 48 px. */
:root {
  --blad: #2f6b3a; --blad-diep: #1f4d2a; --blad-zacht: #e8f1ea; --mos: #4a684c;
  --mist: #f3f6f2; --lijn: #d5e0d6; --tekst: #1c2a1f; --kaart: #fff; --fout: #b3261e; --geel: #8a5a00;
  --tik: 52px;
}
@media (prefers-color-scheme: dark) {
  :root { --mist: #121914; --kaart: #1b241d; --tekst: #e8f0e9; --lijn: #2e3b31; --blad-zacht: #20352a; --mos: #9fbfa5; --fout: #ff8a80; --geel: #f2c14e; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--mist); color: var(--tekst); -webkit-text-size-adjust: 100%; }
.app { max-width: 560px; margin: 0 auto; min-height: 100%; min-height: 100dvh; display: flex; flex-direction: column; }
.kopbalk { padding: max(10px, env(safe-area-inset-top)) 16px 0; }
.balk { height: 5px; background: var(--lijn); border-radius: 9px; overflow: hidden; }
.balk i { display: block; height: 100%; width: 0; background: var(--blad); transition: width .25s; }
.scherm { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.scherm[hidden] { display: none; }
.inhoud { flex: 1; padding: 10px 18px; }
.inhoud.midden { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.onder { padding: 12px 16px max(18px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
h1 { font-size: 24px; line-height: 1.2; margin: 6px 0 8px; color: var(--blad-diep); }
@media (prefers-color-scheme: dark) { h1 { color: #cfe8d3; } }
h1:focus { outline: none; }
.uitleg { font-size: 15px; line-height: 1.45; margin: 4px 0 10px; }
.stap { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mos); margin: 8px 0 0; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; color: var(--blad); margin: 8px 0 14px; }
.held { height: 150px; border-radius: 18px; background: var(--blad-zacht); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; overflow: hidden; }
/* Bens lijniconen (assets/lijn/*.svg, currentColor) als masker: zo nemen ze de merkkleur aan. */
.ico { display: inline-block; width: 26px; height: 26px; flex: none; background: var(--blad); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.ico.groot { width: 118px; height: 118px; }
.startstappen { list-style: none; padding: 0; margin: 12px 0 6px; display: flex; flex-direction: column; gap: 8px; }
.startstappen li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.waarom { margin: 10px 0 4px; border: 1px solid var(--lijn); border-radius: 12px; background: var(--kaart); }
.waarom summary { min-height: 44px; display: flex; align-items: center; padding: 8px 12px; font-weight: 700; color: var(--blad); cursor: pointer; }
.waarom summary:focus-visible { outline: 3px solid #1b6cff; outline-offset: 2px; border-radius: 12px; }
.waarom p { margin: 0; padding: 0 12px 10px; font-size: 14px; line-height: 1.5; }
.waarom .buur { margin: 0 12px 12px; padding: 8px 10px; border-left: 3px solid var(--blad); background: var(--mist); }
.cam-ico { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; background: #b9d3be; }
.labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.label { background: transparent; color: var(--mos); border: 1px solid var(--lijn); font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
@media (prefers-color-scheme: dark) { .label { color: #cfe8d3; } }
.zone { font-size: 13px; color: var(--geel); }
.knop { min-height: var(--tik); border-radius: 14px; border: 0; font: inherit; font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; padding: 0 16px; }
.knop.hoofd { background: var(--blad); color: #fff; }
.knop.hoofd:disabled { opacity: .45; cursor: default; }
.knop.twee { background: var(--kaart); color: var(--blad); border: 2px solid var(--lijn); }
.knop.stil { background: transparent; color: var(--mos); min-height: 44px; font-weight: 600; font-size: 15px; }
.knop.stil.klein { min-height: 36px; font-size: 13px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #1b6cff; outline-offset: 2px; }
.knop:focus-visible, .sluiter:focus-visible, .rond:focus-visible, .keuzes label:focus-within { outline: 3px solid #1b6cff; outline-offset: 2px; }
.klino-start { margin-top: 18px; width: 100%; }
.klino-start[hidden] { display: none; }
.klino-beeld[hidden], #klino-afstand-rij[hidden] { display: none; }
.klino-beeld { min-height: 200px; }
.scherm[data-scherm="klino"] > .inhoud:not(.cam-kop) { flex: none; }
.scherm[data-scherm="klino"]:not(.donker) > .inhoud:not(.cam-kop) { flex: 1; }
.scherm[data-scherm="klino"].donker .cam-kop .uitleg { margin-bottom: 0; }
/* Richtlijn over de volle breedte, zoals de grondige flow (.vaste-richtlijn).
   Was een kruisje van 64 px: dan moet je het doel in een klein vierkantje zien
   te houden en zie je niet of het toestel scheef staat. Met een doorlopende
   lijn leg je de stamvoet of de top er gewoon op. Wit met een zwarte rand,
   want geel verdwijnt tegen herfstblad en tegen een lichte lucht. */
.vizier { position: absolute; left: 0; right: 0; top: 50%; pointer-events: none; }
.vizier::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; margin-top: -2px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.85), 0 -1px 2px rgba(0,0,0,.85); }
.klino-hoek { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; text-align: center; font-size: 34px; font-weight: 800; color: #fff; text-shadow: 0 1px 4px #000; font-variant-numeric: tabular-nums; }
.scherm.donker .uitleg { color: #dfe9e1; }
.scherm.donker .fout { color: #ffb4ab; }
.scherm.donker .groot-getal { background: #1d261e; color: #fff; border-color: #3a4a3d; }
.scherm.donker .eenheid { color: #dfe9e1; }
.voetlinks { display: flex; justify-content: center; gap: 4px; }
.concept { background: var(--kaart); border: 2px solid var(--blad); border-radius: 14px; padding: 12px 14px; margin: 12px 0; font-size: 14px; }
.concept b { display: block; margin-bottom: 4px; }
.concept-knoppen { display: flex; gap: 8px; margin-top: 10px; }
.concept-knoppen .knop { flex: 1; min-height: 46px; font-size: 15px; }
.segment { display: flex; gap: 6px; margin: 12px 0; background: var(--mist); border: 1px solid var(--lijn); border-radius: 12px; padding: 4px; }
.segment label { flex: 1; position: relative; }
.segment input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segment span { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 9px; font-weight: 700; font-size: 15px; }
.segment input:checked + span { background: var(--blad); color: #fff; }
.segment label:focus-within { outline: 3px solid #1b6cff; outline-offset: 2px; border-radius: 9px; }
.getalrij { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; }
.getalrij[hidden] { display: none; }
.groot-getal { flex: 1; min-width: 0; height: 64px; border: 2px solid var(--blad); border-radius: 14px; background: var(--kaart); color: var(--tekst); font: inherit; font-size: 30px; font-weight: 800; padding: 0 16px; }
.getalrij.klein .groot-getal { height: 52px; font-size: 22px; }
.eenheid { font-size: 20px; font-weight: 700; }
.hoogte-toon { font-size: 40px; font-weight: 800; text-align: center; color: var(--blad); margin: 22px 0 8px; }
.schuif { width: 100%; height: 44px; accent-color: var(--blad); }
.schaal { display: flex; justify-content: space-between; font-size: 12px; color: var(--mos); }
/* camera */
.scherm.donker { background: #0f1510; color: #fff; }
.scherm.donker h1 { color: #fff; }
.scherm.donker .stap { color: #b9d3be; }
.cam-kop { flex: none; padding-bottom: 6px; }
.cam { position: relative; flex: 1; min-height: 300px; background: #1d261e; overflow: hidden; touch-action: manipulation; }
.cam video, .cam img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam img { object-fit: contain; background: #000; }
.kader { position: absolute; border: 2px dashed rgba(255, 255, 255, .75); border-radius: 16px; pointer-events: none; }
.kader.boom { inset: 12% 14% 12%; }
.kader.stam { inset: 24% 26% 24%; }
.tip, .kwal, .cam-fout { position: absolute; left: 12px; right: 12px; margin: 0; font-size: 14px; padding: 8px 11px; border-radius: 10px; }
.tip { top: 10px; background: rgba(0, 0, 0, .5); }
.kwal { bottom: 12px; text-align: center; font-weight: 700; }
.kwal.goed { background: rgba(47, 107, 58, .92); }
.kwal.let-op { background: rgba(160, 100, 0, .92); }
.cam-fout { top: 40%; background: rgba(179, 38, 30, .92); }
.cam-knoppen { flex: none; display: flex; align-items: center; justify-content: space-around; gap: 10px; padding: 14px 16px max(18px, env(safe-area-inset-bottom)); }
.cam-knoppen[hidden] { display: none; }
.cam-knoppen .knop { flex: 1; }
.sluiter { width: 74px; height: 74px; border-radius: 50%; background: #fff; border: 6px solid rgba(255, 255, 255, .35); box-shadow: 0 0 0 3px #fff inset; cursor: pointer; }
.sluiter:disabled { opacity: .5; }
.rond { min-width: 56px; min-height: 56px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; border: 0; display: flex; align-items: center; justify-content: center; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; padding: 0 14px; }
.rond[hidden] { display: none; }
/* kaart */
.kaart { height: 52vh; min-height: 280px; border-radius: 16px; overflow: hidden; border: 1px solid var(--lijn); }
.nauw { display: inline-block; font-size: 13px; background: var(--blad-zacht); padding: 6px 10px; border-radius: 8px; margin-top: 10px; }
/* vraag */
.vraagblok { border: 1px solid var(--lijn); background: var(--kaart); border-radius: 14px; padding: 10px 12px 12px; margin: 10px 0; }
.vraagblok legend { font-weight: 700; font-size: 15px; padding: 0 4px; }
.keuzes { display: flex; gap: 6px; }
.keuzes label { flex: 1; position: relative; }
.keuzes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.keuzes span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 4px; font-size: 14px; font-weight: 600; border-radius: 10px; border: 1.5px solid var(--lijn); background: var(--mist); }
.keuzes input:checked + span { background: var(--blad); border-color: var(--blad); color: #fff; }
.fout { color: var(--fout); font-weight: 600; }
/* klaar */
.ref { font-size: 32px; font-weight: 800; letter-spacing: .08em; color: var(--blad); margin: 4px 0 12px; }
.duimen { display: flex; gap: 8px; margin: 8px 0; }
.duimen img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.vinken { list-style: none; padding: 0; margin: 8px 0; }
.vinken li { padding: 4px 0 4px 24px; position: relative; font-size: 15px; }
.vinken li::before { content: "✓"; position: absolute; left: 2px; color: var(--blad); font-weight: 800; }
.aanbod { background: var(--blad-zacht); border-radius: 14px; padding: 12px 14px; margin-top: 12px; font-size: 14px; }
.aanbod b { display: block; margin-bottom: 4px; }
/* bezig */
.spinner { width: 48px; height: 48px; border-radius: 50%; border: 5px solid var(--lijn); border-top-color: var(--blad); animation: draai 1s linear infinite; margin-bottom: 18px; }
@keyframes draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } .balk i { transition: none; } }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Honeypot: buiten beeld voor mensen en schermlezers; een bot vult het wel in. */
.honeypot-veld { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

/* Ander groen: keuzescherm, tekenkaart, haagmaten */
.typekeuzes { display: grid; gap: 10px; margin-top: 14px; }
.typekaart { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 14px; text-align: left;
  background: var(--kaart); color: var(--tekst); border: 2px solid var(--lijn); border-radius: 14px; font: inherit; cursor: pointer; }
.typekaart:hover { border-color: var(--blad); }
.typekaart:focus-visible { outline: 3px solid #1b6cff; outline-offset: 2px; }
.typekaart .ico { width: 36px; height: 36px; }
.typekaart span { display: grid; gap: 2px; }
.typekaart b { font-size: 17px; color: var(--blad-diep); }
.typekaart small { font-size: 14px; color: var(--mos); line-height: 1.35; }
.tekenvormen { border: 0; padding: 0; margin: 0; }
.tekenvak { position: relative; }
.kaart.teken { height: 50vh; min-height: 300px; cursor: crosshair; }
.kaartknoppen { position: absolute; top: 10px; right: 10px; z-index: 500; display: grid; gap: 6px; }
.kaartknop { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,.25); background: #fff; color: #1c2a1f;
  font: inherit; font-size: 14px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
.kaartknop:focus-visible { outline: 3px solid #1b6cff; outline-offset: 2px; }
.tekenacties { display: flex; gap: 8px; margin-top: 10px; }
.tekenacties .knop { flex: 1; min-height: 46px; font-size: 15px; }
.tekenacties .knop:disabled { opacity: .45; cursor: default; }

/* Toetsenbord op de tekenkaart: kruisje in het midden zodra de kaart de focus heeft */
.tekenvak .kruisje { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; z-index: 450; pointer-events: none; display: none; }
.tekenvak .kruisje::before, .tekenvak .kruisje::after { content: ""; position: absolute; background: #1b6cff; box-shadow: 0 0 0 1px #fff; }
.tekenvak .kruisje::before { left: 14px; top: 0; width: 2px; height: 30px; }
.tekenvak .kruisje::after { top: 14px; left: 0; height: 2px; width: 30px; }
/* Alleen bij toetsenbordfocus (niet na een tik of muisklik: Leaflet focust de kaart dan ook) */
.tekenvak:has(.kaart:focus-visible) .kruisje { display: block; }
.kaart:focus-visible { outline: 3px solid #1b6cff; outline-offset: 2px; }
/* Galerijknop: het bestandsveld blijft focusbaar voor het toetsenbord (analyse 25-09d) */
#galerij-label:focus-within { outline: 3px solid #1b6cff; outline-offset: 2px; }

/* Donkere modus (analyse 25-09c): donkergroene tekst had op de donkere achtergrond maar
   1,6 tot 2,8 contrast (WCAG vraagt 4,5). Lichtgroen #8fd19e geeft 8,9. */
@media (prefers-color-scheme: dark) {
  .logo, .waarom summary, .knop.twee, .hoogte-toon, .ref, .vinken li::before, .typekaart b { color: #8fd19e; }
  .ico { background: #8fd19e; }
  .knop.stil { color: #b9d4bd; }
}