/* Vacateer coming soon: een geel prikbord. Gedeeld door alle pagina's. */
@font-face{font-family:"Bricolage Grotesque";src:url("/fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/instrument-sans.woff2") format("woff2");font-weight:400 700;font-display:swap}

:root{
  --geel:#FFE14D; --inkt:#16151C; --kobalt:#2340D8; --wit:#FFFFFF; --steen:#F3F1EA; --grijs:#5B5966;
  --kop:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --tekst:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--geel);color:var(--inkt);font-family:var(--tekst);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--inkt);color:var(--geel)}
:focus-visible{outline:3px solid var(--kobalt);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--kop);margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--kobalt);text-underline-offset:3px;text-decoration-thickness:1.5px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Bovenbalk */
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:24px}
.merk{display:inline-flex;align-items:center;gap:10px;color:var(--inkt);text-decoration:none}
.woordmerk{font-family:var(--kop);font-weight:800;font-size:30px;letter-spacing:-.045em;line-height:1}
.top nav{display:flex;gap:4px;flex-wrap:wrap}
.top nav a{color:var(--inkt);text-decoration:none;font-weight:500;padding:8px 14px;border-radius:999px}
.top nav a:hover{background:rgba(22,21,28,.08)}
.top nav a[aria-current="page"]{background:var(--inkt);color:var(--wit)}

/* Held met aanmelding en prikbord */
.held{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;padding-block:40px 112px}
.held h1{font-weight:800;font-size:clamp(2.5rem,4.8vw,4.6rem);line-height:.98;letter-spacing:-.04em;max-width:18ch}
.held.smal h1{font-size:clamp(2.4rem,4.8vw,4.4rem);max-width:17ch}
.intro{font-size:clamp(1.1rem,1.5vw,1.3rem);max-width:48ch;margin-top:28px;color:#2B2930}
.intro + .intro{margin-top:14px}
form.aanmelden{margin-top:40px;display:flex;gap:8px;background:var(--wit);border:2px solid var(--inkt);border-radius:22px;padding:6px;max-width:560px}
form.aanmelden label{flex:1;min-width:0;display:flex}
form.aanmelden input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:16px;font:inherit;font-size:17px;color:var(--inkt)}
form.aanmelden input::placeholder{color:#6E6B78}
form.aanmelden:focus-within{box-shadow:0 0 0 3px var(--kobalt)}
.knop{font:inherit;cursor:pointer;border:0;background:var(--inkt);color:var(--wit);font-weight:600;border-radius:16px;padding:14px 22px;white-space:nowrap;transition:background-color .18s,transform .18s cubic-bezier(.2,.8,.2,1);text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.knop:hover{background:#2E2C38}
.knop:active{transform:translateY(1px)}
.knop[disabled]{opacity:.7;cursor:progress}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fout{margin-top:12px;font-weight:600;color:#8A1C1C}
.bedankt{margin-top:40px;max-width:560px;background:var(--inkt);color:var(--wit);border-radius:22px;padding:22px 24px;display:flex;gap:16px;align-items:center}
.bedankt b{font-family:var(--kop);font-size:1.35rem;letter-spacing:-.02em;display:block}

.bord{position:relative;min-height:560px}
.kaartje{position:absolute;width:min(340px,84%);background:var(--wit);border:2px solid var(--inkt);border-radius:20px;padding:26px 22px 22px;display:grid;gap:12px;box-shadow:0 22px 34px -22px rgba(22,21,28,.55);animation:ophangen .7s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--wacht,0s)}
.kaartje .titel{font-family:var(--kop);font-size:1.5rem;font-weight:700;line-height:1.12;letter-spacing:-.025em}
.kaartje .regel{font-size:15px;color:#3E3C46}
.soort{justify-self:start;font-size:14px;font-weight:600;border-radius:999px;padding:4px 12px;border:1.5px solid var(--inkt)}
.soort.m{background:var(--steen)}
.soort.ma{background:var(--geel)}
.soort.a{background:var(--inkt);color:var(--wit)}
.kaartje .pin{position:absolute;top:-10px;left:50%;translate:-50% 0;animation:prikken .45s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--wacht,0s) + .45s)}
.k1{top:0;left:0;rotate:-4deg;z-index:1}
.k2{top:185px;right:0;rotate:3deg;z-index:3}
.k3{top:385px;left:6%;rotate:-1.5deg;z-index:2}
@keyframes ophangen{from{transform:translateY(-24px)}to{transform:none}}
@keyframes prikken{from{transform:translateY(-16px) rotate(-25deg)}to{transform:none}}

/* Witte secties */
.vlak{background:var(--wit);padding-block:120px}
.vlak:not(.steen) + .vlak:not(.steen){padding-top:0}
.vlak.steen{background:var(--steen);padding-block:120px}
.twee{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:72px;align-items:start}
.vlak h2{font-size:clamp(2rem,3.6vw,3.2rem);font-weight:800;line-height:1.05;letter-spacing:-.035em;max-width:18ch}
.lead{font-size:1.2rem;max-width:44ch;margin-top:28px;color:#2B2930}
.tekst p{max-width:62ch;color:#2B2930;font-size:1.08rem}
.tekst p + p{margin-top:16px}
.tekst h3{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;margin:36px 0 10px}
.tekst h3:first-child{margin-top:0}
.tekst ul{margin:12px 0 0;padding-left:20px;max-width:62ch;color:#2B2930}
.tekst li + li{margin-top:6px}

.rij{display:grid;gap:8px;padding-block:28px;border-top:2px solid var(--inkt)}
.rij:last-child{border-bottom:2px solid var(--inkt)}
.rij h3{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:14px}
.rij h3 a{color:var(--inkt);text-decoration:none}
.rij h3 a:hover{text-decoration:underline}
.rij p{max-width:56ch;color:#2B2930}
.stip{width:18px;height:18px;border-radius:999px;border:2px solid var(--inkt);flex:none}
.stip.m{background:var(--steen)} .stip.ma{background:var(--geel)} .stip.a{background:var(--inkt)}

.vraag{border-top:2px solid var(--inkt)}
.vraag:last-child{border-bottom:2px solid var(--inkt)}
.vraag summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-family:var(--kop);font-weight:700;font-size:1.3rem;letter-spacing:-.02em}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary svg{flex:none;transition:transform .25s}
.vraag[open] summary svg{transform:rotate(45deg)}
.vraag p{padding:0 0 24px;max-width:60ch;color:#2B2930}

footer{padding-block:40px}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:24px}
footer p{max-width:46ch}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer a{color:var(--inkt);font-weight:500}

/* Losse tekstpagina's (privacy, 404) */
.pagina{background:var(--wit)}
.pagina main{max-width:68ch;margin:0 auto;padding:64px max(16px,env(safe-area-inset-right,0px)) 96px max(16px,env(safe-area-inset-left,0px))}
.pagina main h1{font-weight:800;font-size:clamp(2.2rem,5vw,3.2rem);line-height:1.05;letter-spacing:-.035em;margin-bottom:32px}
.pagina main h2{font-weight:800;font-size:1.35rem;letter-spacing:-.02em;margin:40px 0 8px}
.pagina main p{color:#2B2930}
.pagina header{background:var(--geel)}

@media (max-width:900px){
  .held{grid-template-columns:1fr;gap:56px;padding-block:20px 88px}
  .bord{min-height:540px;max-width:460px}
  .vlak,.vlak.steen{padding-block:88px}
  .twee{grid-template-columns:1fr;gap:40px}
}
@media (max-width:620px){
  .top nav a:not([aria-current]){display:none}
}
@media (max-width:520px){
  form.aanmelden{flex-direction:column}
  form.aanmelden .knop{padding:16px}
  .k2{top:175px}
  .k3{top:370px;left:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}