/* Huisstijl Dierenpark Hoenderdaell, dezelfde kleuren als Parkbeheer en het ticketsysteem.
   Het groen is de drager, het goud alleen accent. Gedeeld door de telefoon-app en het registrar-scherm. */
:root{
  --groen:#004744; --groen-diep:#00302c; --groen-licht:#0a5b56; --groen-flauw:#e8efed;
  --goud:#ecbe13; --goud-donker:#c79f06; --goud-flauw:#fdf6dc;
  --inkt:#16211f; --inkt-zacht:#5c6b69; --inkt-flets:#8a9694;
  --papier:#f5f6f4; --kaart:#ffffff; --lijn:#e2e6e2; --lijn-sterk:#c9d1cc; --vlak:#f7f8f6;
  --ok:#186b33; --ok-bg:#e8f2ea; --fout:#a3221b; --fout-bg:#fbeceb;
  --let:#8a6100; --let-bg:#fdf3dd;
  --schaduw:0 1px 2px rgba(22,33,31,.05);
  --schaduw-hoog:0 12px 32px -8px rgba(22,33,31,.28), 0 2px 8px rgba(22,33,31,.1);
  --radius:8px; --radius-s:6px;
  --display:'Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;
  --body:-apple-system,'Segoe UI',Roboto,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:var(--body);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-.01em}
[hidden]{display:none !important}

.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--lijn-sterk);
  background:var(--kaart);border-radius:var(--radius-s);padding:8px 14px;font-weight:600;white-space:nowrap}
.knop:hover{border-color:var(--groen)}
.knop.hoofd{background:var(--groen);border-color:var(--groen);color:#fff}
.knop.hoofd:hover{background:var(--groen-licht)}
.knop.gevaar{color:var(--fout)}
.knop:disabled{opacity:.45;cursor:default}
.knop:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{
  outline:2px solid var(--goud-donker);outline-offset:2px}

.veld{display:block;width:100%;border:1px solid var(--lijn-sterk);border-radius:var(--radius-s);
  padding:8px 10px;background:var(--kaart)}
label.lab{display:block;font-size:12.5px;font-weight:600;color:var(--inkt-zacht);margin-bottom:4px}

.melding{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--inkt);color:#fff;
  padding:12px 20px;border-radius:var(--radius);box-shadow:var(--schaduw-hoog);z-index:50;max-width:90vw}
.melding.fout{background:var(--fout)}

.badge{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--vlak);color:var(--inkt-zacht);border:1px solid var(--lijn)}
.badge.let{background:var(--let-bg);color:var(--let);border-color:transparent}
.badge.info{background:var(--groen-flauw);color:var(--groen);border-color:transparent}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.badge.fout{background:var(--fout-bg);color:var(--fout);border-color:transparent}
.badge.uit{background:var(--vlak);color:var(--inkt-flets);text-decoration:line-through}
.keuzes{display:flex;flex-wrap:wrap;gap:8px}
.keuze{border:1px solid var(--lijn-sterk);background:var(--kaart);border-radius:999px;padding:8px 14px;font-weight:600}
.keuze.aan{background:var(--groen);border-color:var(--groen);color:#fff}
.veld.groot{font-size:22px;padding:12px}
.spreekvak{display:flex;gap:8px;align-items:flex-start}.spreekvak .veld{flex:1;min-width:0}
.spreek{flex:none;width:44px;height:44px;border:1px solid var(--lijn-sterk);border-radius:50%;background:var(--kaart);font-size:20px;line-height:1}
.spreek.aan{background:var(--fout);border-color:var(--fout);color:#fff;animation:spreek-puls 1s infinite}
@keyframes spreek-puls{50%{box-shadow:0 0 0 8px rgba(160,40,40,.18)}}
.uitleg{font-size:12.5px;color:var(--inkt-zacht);margin-top:4px}
.leeg{color:var(--inkt-flets);text-align:center;padding:24px 12px}