/* Gedeeld door alle pagina's: menu op telefoons, toegankelijkheid, formulierfouten, tekstpagina's. */
html,body{margin:0}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--signal);color:#fff;padding:10px 14px;font:600 14px/1 var(--body)}
.skip:focus{left:var(--gutter);top:10px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* menu */
.menuknop{display:none}
.top nav .menu-tel{display:none}
@media (max-width:820px){
  .top .btn{order:2;margin-left:auto}
  .menuknop{order:3;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;background:transparent;color:var(--paper);
    border:1px solid var(--line);font:600 14px/1 var(--body);cursor:pointer}
  .menuknop .streep{position:relative;width:16px;height:2px;background:currentColor;transition:background .2s}
  .menuknop .streep::before,.menuknop .streep::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;transition:transform .2s}
  .menuknop .streep::before{top:-5px}.menuknop .streep::after{top:5px}
  .top.open .menuknop .streep{background:transparent}
  .top.open .menuknop .streep::before{transform:translateY(5px) rotate(45deg)}
  .top.open .menuknop .streep::after{transform:translateY(-5px) rotate(-45deg)}
  .top nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;flex-direction:column;gap:0;
    background:var(--ink);border-bottom:1px solid var(--line);padding:4px var(--gutter) 16px;font-size:17px}
  .top.open{background:var(--ink)}
  .top.open nav{display:flex}
  .top nav a{padding:14px 0;border-bottom:1px solid var(--line);color:var(--paper)}
  .top nav .menu-tel{display:block;border-bottom:0;color:var(--signal);font-weight:600}
}
@media (max-width:380px){.menuknop .menulabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.top .btn{padding:10px 12px}}

/* formulier */
.req{color:var(--signal)}
.verplicht{font-size:13px;color:var(--steel);margin:0}
.veldfout{display:block;margin-top:6px;font:500 13px/1.4 var(--body);color:#ff8a78}
[aria-invalid="true"]{border-color:var(--signal)!important;outline:1px solid var(--signal)}
.formmsg.goed{color:var(--paper);border-left:3px solid var(--signal);padding-left:12px}
.privacyregel{grid-column:1/-1;font-size:13px;color:var(--steel);margin:0}
.privacyregel a{color:var(--paper)}

/* tekstpagina's (privacy, 404) */
.tekstpagina .wrap{max-width:760px}
.tekstpagina h2{font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:700;font-size:22px;text-transform:uppercase;margin:40px 0 10px}
.tekstpagina p,.tekstpagina li{color:var(--muted);line-height:1.65}
.tekstpagina ul{padding-left:20px}
.tekstpagina .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* contrast (WCAG AA): kleine rode tekst iets lichter, knoppen iets donkerder rood */
:root{--signal-tekst:#F05642;--signal-knop:#D63A25}
.eyebrow b,.panel .num span,.steps b,a.route b,a.route span,.tl b,.route li::before,.formmsg.fout,.rr:hover,.req,.top nav .menu-tel{color:var(--signal-tekst)}
.btn{background:var(--signal-knop);border-color:var(--signal-knop)}
.btn:hover{background:#C9351F;border-color:#C9351F}
.btn.ghost,.btn.ghost:hover{background:transparent}
.veldfout{text-transform:none;letter-spacing:0}
.lbl{display:block}
@media (max-width:440px){.top .btn .lang{display:none}}
.tekstpagina .ph1{font-size:clamp(30px,7vw,64px);overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;text-wrap:wrap;max-width:none}
.veldfout:empty{display:none}
form label{align-content:start}
.top .btn .lang{margin-left:.3em}
.top .btn{gap:0}
.tekstpagina{min-height:calc(100vh - 150px)}

/* ---------- foto per processtap ---------- */
.stapfoto{margin:-30px -30px 22px;overflow:hidden;background:var(--petrol)}
.stapfoto img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
@media (min-width:821px) and (max-height:780px){.stapfoto img{aspect-ratio:3/1}}

/* ---------- telefoon en kleine tablet: rustig, zonder 3D ----------
   Onder 820px geen 3D-scène en geen zwevende panelen: de stappen staan
   gewoon onder elkaar als kaarten met foto. Sneller en overzichtelijker. */
@media (max-width:820px){
  #stage,.vignette,.rail,.scrollhint{display:none!important}
  .top{background:var(--ink);border-bottom:1px solid var(--line);padding-bottom:12px}
  .hero{min-height:0;padding:112px var(--gutter) 40px}
  #proces{padding:0 0 24px}
  .chapter{min-height:0;display:block;padding:0 var(--gutter);margin:0 0 14px}
  .panel{position:static;margin:0;max-width:none;padding:20px 18px 22px;background:var(--petrol);
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .stapfoto{margin:-20px -18px 18px}
  .stapfoto img{aspect-ratio:3/2}
  .panel h2{font-size:clamp(24px,7vw,32px)}
  .wrap{padding-top:56px;padding-bottom:56px}
}
.portaal-regel{margin:18px 0 0;font-size:14px;color:var(--muted)}

/* Tweede logo voor de lichte weergave van het portaal (01-10-2026); standaard verborgen */
.top .logo .logo-licht{display:none}