@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/bricolage-grotesque.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/figtree.woff2) format("woff2")}
:root{
  --bg:#FFFFFF; --paper:#F4F4F2; --ink:#111111; --muted:#5E5E5E; --line:#DCDCD8; --field:#FFFFFF;
  --red:#E12A27; --on-red:#FFFFFF; --red-text:#C21F1C; --red-soft:#FCE4E3; --green:#1E7A44;
  color-scheme:only light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Figtree,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Bricolage Grotesque",Figtree,system-ui,sans-serif;line-height:1.1;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0}
a{color:inherit}
.muted{color:var(--muted)}


.brand{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:800;font-size:1.35rem;line-height:1;letter-spacing:-.01em}
.brand small{display:block;font:600 .8rem/1.2 Figtree,sans-serif;letter-spacing:.01em;margin-bottom:3px}

label{display:grid;gap:4px;font-size:.9rem;font-weight:600}
.req{color:var(--red-text)}
.opt{font-weight:400;color:var(--muted)}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--field);font-weight:400;font-size:1rem}
textarea{resize:vertical}
form.stack{display:grid;gap:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.err{color:var(--red-text);font-weight:600;margin:0}
.err:empty{display:none}
.cta{border:0;border-radius:12px;background:var(--red);color:var(--on-red);padding:14px 18px;font-weight:700;font-size:1.05rem}
.cta:hover{filter:brightness(1.06)}
.cta:disabled{opacity:.6;cursor:wait}
.ghost{border:1px solid var(--line);background:transparent;border-radius:10px;padding:8px 14px;font-weight:600}
.small{padding:5px 10px;font-size:.88rem}
.nothing{background:var(--paper);border-radius:14px;padding:28px;color:var(--muted);margin:0}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;z-index:20;max-width:calc(100% - 32px);text-align:center}
@media (max-width:880px){.toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}

.skip{position:absolute;left:12px;top:-60px;z-index:30;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:calc(10px + env(safe-area-inset-top,0px))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[aria-invalid="true"]{border-color:var(--red-text);box-shadow:0 0 0 1px var(--red-text)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
[hidden]{display:none!important}

/* iOS: tijd- en datumvelden niet breder laten worden dan hun vak */
input[type=time],input[type=date]{-webkit-appearance:none;appearance:none;min-width:0;max-width:100%;display:block;text-align:left;min-height:46px;line-height:1.2}
input::-webkit-date-and-time-value{text-align:left;margin:0}
select{min-height:46px}

.mt{margin-top:18px}
.unavailable{max-width:560px;margin:12vh auto;background:var(--paper);border-top:6px solid var(--red);border-radius:14px;padding:28px}
.unavailable h1{font-size:1.8rem;font-weight:800;margin-bottom:10px}
.unavailable p{margin:10px 0 0}
.unavailable .cta{display:inline-block;text-decoration:none;margin-top:8px}