/* Formulier voor het aanmelden van materieel.
   De kleuren en lettertypen komen uit styles.css; hier staat alleen wat
   specifiek is voor dit formulier. */
/* De navigatiebalk van de site staat vast bovenaan, dus het formulier moet
   daar onderlangs beginnen. De andere toolpagina's houden daar 132px voor vrij;
   hier is het wat minder, omdat de voortgangsbalk een smalle strip is en geen
   kop met een titel. */
.aanmeld{--r-lg:26px;--r-md:16px;--r-sm:10px; padding-top:108px}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);background:var(--paper);color:var(--ink);
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-serif);font-weight:600;line-height:1.22;margin:0}

/* ---------- kop ---------- */
.kop{background:rgba(250,246,236,.94);border-bottom:1px solid var(--line)}
.aanmeld .kop{position:static}
.kop__in{max-width:640px;margin:0 auto;padding:14px 20px 0}
.kop__rij{display:flex;align-items:center;justify-content:space-between;gap:14px}
.merk{font-family:var(--font-serif);font-weight:600;font-size:1.06rem;letter-spacing:.01em}
.merk span{color:var(--accent)}
.stap-tel{font-size:.8rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.balk{height:3px;background:var(--line-soft);border-radius:2px;margin:12px 0 0;overflow:hidden}
.balk i{display:block;height:100%;background:var(--accent);border-radius:2px;
        width:0;transition:width .45s cubic-bezier(.2,.7,.2,1)}

/* ---------- vel ---------- */
main,.aanmeld__vel{max-width:640px;margin:0 auto;padding:26px 20px 0}
.stap{display:none;animation:op .32s ease both}
.stap.actief{display:block}
@keyframes op{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.oogje{font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
       color:var(--accent);margin:0 0 10px}
h1{font-size:1.72rem;margin:0 0 10px}
h2.groep{font-size:1.12rem;margin:0 0 2px}
.lead{color:var(--ink-soft);margin:0 0 26px}
.lead--klein{font-size:.95rem}

/* ---------- velden ---------- */
.veld{margin:0 0 24px}
.veld__label{display:block;font-weight:600;font-size:.98rem;margin:0 0 3px}
.veld__hint{display:block;font-size:.86rem;color:var(--ink-faint);margin:0 0 10px;line-height:1.45}
.veld__label + .keuzes, .veld__label + input, .veld__label + .duo{margin-top:9px}
/* Bij een datumveld kan 'optioneel' niet in het veld zelf staan, dus komt het
   er als klein regeltje onder. */
.veld__hint--na{margin:6px 0 0}
input::placeholder,textarea::placeholder{color:var(--ink-faint);opacity:1}

input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],textarea,select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;
  transition:border-color .18s,box-shadow .18s;-webkit-appearance:none}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(194,90,58,.14)}
textarea{min-height:84px;resize:vertical;line-height:1.5}
.duo{display:flex;align-items:center;gap:10px}
.duo input{flex:1}
.eenheid{font-size:.94rem;color:var(--ink-faint);white-space:nowrap;font-weight:500}

/* keuzes */
.keuzes{display:flex;flex-wrap:wrap;gap:8px}
.keus{position:relative}
.keus input{position:absolute;opacity:0;width:0;height:0}
.keus span{display:block;cursor:pointer;background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:10px 16px;font-size:.94rem;font-weight:500;
  transition:all .16s;user-select:none;line-height:1.35}
.keus span:hover{border-color:var(--accent-soft)}
.keus input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff}
.keus input:focus-visible + span{box-shadow:0 0 0 3px rgba(194,90,58,.28)}
.keuzes--multi .keus input:checked + span{background:var(--ink);border-color:var(--ink)}

/* toelichting */
.toel{margin:-8px 0 24px}
.toel__knop{background:none;border:none;padding:0;font:inherit;font-size:.88rem;
  color:var(--accent);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.toel__knop:hover{color:var(--accent-deep)}
.toel__vak{display:none;margin-top:10px}
.toel.open .toel__vak{display:block}

/* kaarten voor machinekeuze */
.tegels{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tegel{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:18px 14px;text-align:center;cursor:pointer;transition:all .16s;
  display:flex;flex-direction:column;align-items:center;gap:9px;font:inherit}
.tegel:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.tegel svg{width:38px;height:38px;color:var(--accent)}
.tegel b{font-size:.94rem;font-weight:600;line-height:1.3}
.tegel--anders{grid-column:1/-1;flex-direction:row;justify-content:center;padding:15px}
.tegel--anders svg{width:26px;height:26px}

/* fotoblokken */
.foto{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);
  padding:16px;margin:0 0 12px;transition:border-color .16s}
.foto.gevuld{border-color:var(--ok);background:#F7FAF6}
.foto__kop{display:flex;align-items:flex-start;gap:11px;margin:0 0 8px}
.foto__nr{flex:none;width:26px;height:26px;border-radius:50%;background:var(--paper-2);
  color:var(--ink-soft);font-size:.82rem;font-weight:700;display:grid;place-items:center;margin-top:1px}
.foto.gevuld .foto__nr{background:var(--ok);color:#fff}
.foto__titel{font-weight:600;font-size:.99rem;line-height:1.3}
.foto__uitleg{font-size:.87rem;color:var(--ink-faint);margin:0 0 10px;line-height:1.45;padding-left:37px}
/* Hoeveel er nog bij kan. Dit mag opvallen: het is de enige plek waar iemand
   ziet dat de volgende foto er niet meer in gaat. */
.foto__tel{display:inline-block;font-size:.82rem;font-weight:700;letter-spacing:.03em;
  background:var(--cream);color:#7A5A12;border-radius:999px;padding:4px 13px;margin:0 0 10px}
.foto__tel--vol{background:var(--accent);color:#fff}
.foto__knop{display:block;padding-left:37px}
/* Twee eigen knoppen: foto maken of uit het album kiezen. Het standaard
   bestandsveld liet die keuze aan het toestel over, en op nieuwere Android
   kwam de camera daar helemaal niet meer in voor. */
.foto__acties{display:flex;flex-wrap:wrap;gap:8px}
.foto__actie{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.92rem;
  font-weight:600;color:var(--ink);background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:11px 17px;cursor:pointer;transition:all .16s}
.foto__actie svg{width:18px;height:18px;color:var(--accent);flex:none}
.foto__actie:hover:not(:disabled){border-color:var(--accent);color:var(--accent-deep)}
.foto__actie:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(194,90,58,.28)}
.foto__actie:disabled{opacity:.4;cursor:not-allowed}
.foto__actie--cam{background:var(--cream);border-color:var(--line)}
.merkje{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:var(--paper-2);color:var(--ink-soft);
  border-radius:4px;padding:2px 6px;margin-left:7px;vertical-align:2px}
.merkje--intern{background:var(--cream);color:#7A5A12}

/* statusregel onder een fotoveld */
.foto__stand{font-size:.85rem;color:var(--ok);font-weight:600;margin:7px 0 0;min-height:1.2em}
.foto__stand--fout{color:var(--accent)}
.foto__wis{background:none;border:none;padding:0;margin:2px 0 0;font:inherit;font-size:.83rem;
  color:var(--ink-faint);text-decoration:underline;cursor:pointer}
.foto__wis:hover{color:var(--accent)}

/* terugval als de bewijsfoto ontbreekt */
.terugval{margin:12px 0 0 37px;padding:13px 15px;background:var(--cream);border-radius:var(--r-sm)}
.terugval__kop{margin:0 0 10px;font-size:.87rem;font-weight:600;color:#7A5A12}
.terugval__veld{display:block;margin:0 0 9px}
.terugval__veld:last-child{margin-bottom:0}
.terugval__veld span{display:block;font-size:.84rem;font-weight:500;color:var(--ink-soft);margin:0 0 4px}
.terugval__veld i{font-style:normal;color:var(--ink-faint)}
.terugval__veld input{padding:9px 11px;font-size:.94rem;background:#fff}
.terugval__veld input.leeg{border-color:var(--accent-soft)}

/* toelichting per aangevinkt gebrek */
.detailvakken:not(:empty){margin:12px 0 0}
.detailvak{display:block;margin:0 0 9px}
.detailvak:last-child{margin-bottom:0}
.detailvak span{display:block;font-size:.85rem;font-weight:600;color:var(--accent-deep);margin:0 0 4px}
.detailvak textarea{min-height:56px;font-size:.94rem;padding:10px 12px}

/* fotoveld midden in een vraag, bij een onbekend batterijtype */
.fotobij-veld{margin:12px 0 0;padding:13px 15px;background:var(--cream);border-radius:var(--r-sm)}
.fotobij-veld p{margin:0 0 9px;font-size:.87rem;color:#7A5A12;line-height:1.45}

/* vrije opmerking per machine */
.opmerking{margin:26px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.opmerking__uit{font-size:.92rem;color:var(--ink-faint);line-height:1.55;margin:6px 0 12px}
.opmerking__lijst{list-style:none;margin:0 0 16px;padding:0}
.opmerking__lijst li{position:relative;padding:0 0 10px 20px;font-size:.92rem;
  color:var(--ink-faint);line-height:1.5}
.opmerking__lijst li:last-child{padding-bottom:0}
.opmerking__lijst li::before{content:"";position:absolute;left:4px;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--accent-soft)}
.opmerking__lijst b{color:var(--ink-soft)}
.opmerking textarea{min-height:104px}
.akkoord--klein{margin:12px 0 0;padding:14px 16px}
.akkoord--klein span{font-size:.93rem}

/* valstrik voor robots: onzichtbaar voor mensen, wel invulbaar voor een script */
.lokaas{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* melding als het versturen mislukt */
.verzendfout{display:none;background:#FDEEE9;border:1.5px solid var(--accent-soft);
  border-radius:var(--r-md);padding:15px 17px;margin:20px 0 0;
  font-size:.93rem;color:var(--accent-deep);line-height:1.5}

/* akkoordvinkje voor het versturen */
.akkoord{display:flex;gap:14px;align-items:flex-start;background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-md);padding:17px 19px;
  margin:22px 0 12px;cursor:pointer;transition:border-color .16s}
.akkoord:hover{border-color:var(--accent-soft)}
.akkoord.nodig{border-color:var(--accent);background:#FFF8F4}
.akkoord input{width:21px;height:21px;margin:1px 0 0;accent-color:var(--accent);flex:none}
.akkoord span{font-size:.94rem;line-height:1.5;color:var(--ink-soft)}
.kleine{font-size:.84rem;color:var(--ink-faint);line-height:1.55;margin:0 2px 4px}
.kleine a{color:var(--accent)}

/* uitstelvinkje onder de fotos */
.uitstel{margin:4px 0 0;padding:14px 16px;background:#fff;
  border:1.5px dashed var(--line);border-radius:var(--r-md)}
.uitstel span{font-size:.9rem;color:var(--ink-soft);line-height:1.45}

/* invulveld dat nog leeg is */
input.leeg{border-color:var(--accent-soft)}

/* zetje op het overzicht om het dossier compleet te maken */
.tip{background:var(--cream);border-radius:var(--r-md);padding:18px 20px;margin:22px 0 0}
.tip p{margin:0 0 11px;font-size:.93rem;color:#6B4E10;line-height:1.55}
.tip p:last-child{margin-bottom:0}
.tip__kop{font-family:var(--font-serif);font-weight:600;font-size:1.08rem;
  color:var(--ink) !important;margin:0 0 9px !important;line-height:1.3}

/* voorbeeldkaartje bij de fotos */
.kaartje{margin:0 0 22px}
.kaartje svg{width:100%;height:auto;display:block}
.kaartje__bij{font-size:.88rem;color:var(--ink-faint);line-height:1.5;margin:10px 2px 0}
.legenda{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 2px 0;padding:0;
  font-size:.88rem;color:var(--ink-soft)}
.legenda b{color:var(--accent);margin-right:4px}
.schets{flex:none;width:52px;height:40px;margin-left:auto}
.schets svg{width:100%;height:100%;display:block}

/* notitie / uitleg */
.notitie{background:var(--paper-2);border-radius:var(--r-md);padding:17px 19px;
  font-size:.92rem;color:var(--ink-soft);line-height:1.55;margin:0 0 24px}
.notitie b{color:var(--ink)}
.notitie--accent{background:var(--cream)}

/* overzicht */
.regel{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);
  margin:0 0 10px;overflow:hidden}
.regel__open{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:none;border:none;font:inherit;color:inherit;cursor:pointer;
  padding:15px 15px 13px 17px;transition:background .16s}
.regel__open:hover{background:var(--paper-2)}
.regel__ic{flex:none;width:34px;height:34px;border-radius:9px;background:var(--paper-2);
  display:grid;place-items:center;color:var(--accent)}
.regel__open:hover .regel__ic{background:#fff}
.regel__ic svg{width:20px;height:20px}
.regel__tk{flex:1;min-width:0}
.regel__tk b{display:block;font-size:.99rem}
.regel__tk small{display:block;color:var(--ink-faint);font-size:.86rem;line-height:1.4}
.regel__wijz{display:inline-block;margin-top:3px;font-size:.82rem;font-weight:600;color:var(--accent)}
.regel__pijl{flex:none;width:18px;height:18px;color:var(--ink-faint)}
.regel__voet{display:flex;border-top:1px solid var(--line-soft)}
.regel__kopie,.regel__weg{background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:.84rem;padding:10px 17px;text-align:left}
.regel__kopie{flex:1;color:var(--accent);font-weight:600;border-right:1px solid var(--line-soft)}
.regel__kopie:hover{background:var(--paper-2)}
.regel__weg{flex:none;color:var(--ink-faint)}
.regel__weg:hover{color:var(--accent);background:var(--paper-2)}

/* melding boven aan het vragenscherm na een kopie */
.melding{display:none;background:var(--cream);border-radius:var(--r-md);
  padding:18px 20px;margin:0 0 26px}
.melding.aan{display:block}
.melding p{margin:0 0 10px;font-size:.92rem;color:#6B4E10;line-height:1.55}
.melding p:last-child{margin-bottom:0}
.melding b{color:var(--ink)}
.melding__kop{font-family:var(--font-serif);font-weight:600;font-size:1.06rem;
  color:var(--ink) !important;margin:0 0 9px !important;line-height:1.3}

/* knoppen */
/* De knoppen staan gewoon onder de inhoud van het scherm. Eerder stond deze
   balk vast onderaan het venster, maar dan zweeft hij los van het vinkje waar
   hij bij hoort, en op het introscherm dekte hij de laatste regels af. */
.voet{padding:10px 20px 44px}
.voet__in{max-width:640px;margin:0 auto;display:flex;gap:10px}
.knop{flex:1;font:inherit;font-weight:600;font-size:1rem;border-radius:999px;
  padding:15px 22px;cursor:pointer;border:1.5px solid transparent;transition:all .16s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.knop--door{background:var(--accent);color:#fff}
.knop--door:hover{background:var(--accent-deep)}
.knop--door:disabled{background:var(--line);color:var(--ink-faint);cursor:not-allowed}
.knop--terug{flex:none;background:transparent;border-color:var(--line);color:var(--ink-soft);padding:15px 20px}
.knop--terug:hover{border-color:var(--ink-faint)}
/* Even laten zien dat de knop het gehoord heeft maar nog niet kan, zolang er
   foto's onderweg zijn. */
.knop--wacht{animation:wiebel .28s ease 2}
@keyframes wiebel{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.knop--tweede{background:#fff;border-color:var(--line);color:var(--ink)}
.knop--tweede:hover{border-color:var(--accent);color:var(--accent)}

/* klaar */
.klaar{text-align:center;padding:30px 0 0}
.klaar__ring{width:76px;height:76px;border-radius:50%;background:var(--ok);
  display:grid;place-items:center;margin:0 auto 22px}
.klaar__ring svg{width:38px;height:38px;color:#fff}
.code{font-family:var(--font-serif);font-size:1.6rem;font-weight:600;letter-spacing:.06em;
  background:var(--paper-2);border-radius:var(--r-md);padding:15px 22px;display:inline-block;margin:6px 0 22px}

.let{background:#fff;border:1px dashed var(--accent-soft);border-radius:var(--r-md);
  padding:14px 17px;font-size:.88rem;color:var(--ink-soft);margin:22px 0 0;line-height:1.5}
.let b{color:var(--accent-deep)}
@media(min-width:560px){ .tegels{grid-template-columns:repeat(3,1fr)} h1{font-size:2rem} }