:root{
  --an-e-uit:cubic-bezier(.33,1,.68,1);
  --an-e-inuit:cubic-bezier(.65,0,.35,1);
  --an-e-weg:cubic-bezier(.32,0,.67,0);
}
.bn-tel{display:inline-block;min-width:.62em;text-align:center;font-family:var(--f);font-variant-numeric:tabular-nums}
.bon .bn-voor .mark,.bon .bn-uit .mark{background:linear-gradient(rgba(46,116,240,.12),rgba(46,116,240,.12)) no-repeat 0 0/var(--veeg,100%) 100%}
.bn-actief .bn-stip{transform-origin:0 50%}
.bon .bn-dicht{border-bottom-color:transparent}
form.on-bezig{overflow:hidden}
form.on-vouw{transition:height .32s var(--an-e-inuit)}
.on-weg{opacity:0;transform:translateY(-6px);transition:opacity .2s var(--an-e-weg),transform .2s var(--an-e-weg)}
.on-verborgen{display:none !important}
.ontvangen{transition:opacity .3s var(--an-e-uit),transform .3s var(--an-e-uit)}
.ontvangen.on-start{opacity:0;transform:translateY(8px)}
.on-kop{font-size:24px;line-height:31px;font-weight:500;letter-spacing:-.5px;color:var(--inkt);max-width:600px;text-wrap:balance}
.on-kop:focus{outline:0}
.on-kop:focus-visible{outline:2px solid var(--inkt);outline-offset:4px}
.on-route{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.on-route li{position:relative;padding:0 16px 0 0}
.on-route li:not(:last-child)::after{content:"";position:absolute;left:36px;right:8px;top:14px;height:1px;background:var(--n300);transform-origin:0 50%;transform:scaleX(1)}
.on-nr{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;background:#fff;border:1px solid var(--n300);font-size:13px;line-height:1;font-weight:500;color:var(--n600);font-variant-numeric:tabular-nums}
.on-route b{display:block;margin-top:10px;font-size:15px;line-height:21px;font-weight:500;color:var(--inkt)}
.on-route small{display:block;margin-top:2px;font-size:13px;line-height:19px;color:var(--n500)}
.on-route li.aan .on-nr{border-color:var(--blauw);background:var(--bl-band,#EAF1FD);color:var(--blauw-tekst);font-weight:600}
.on-route li.aan small{color:var(--blauw-tekst)}
.ontvangen.on-start .on-route li:not(:last-child)::after,
.ontvangen:not(.on-getekend) .on-route li:not(:last-child)::after{transform:scaleX(0)}
.on-getekend .on-route li:not(:last-child)::after{transition:transform .7s var(--an-e-inuit)}
.on-getekend .on-route li:nth-child(2)::after{transition-delay:.15s}
.on-route li:not(.aan) .on-nr,.on-route li:not(.aan) b,.on-route li:not(.aan) small{transition:opacity .3s var(--an-e-uit)}
.ontvangen:not(.on-getekend) .on-route li:not(.aan) .on-nr,
.ontvangen:not(.on-getekend) .on-route li:not(.aan) b,
.ontvangen:not(.on-getekend) .on-route li:not(.aan) small{opacity:.35}
.on-getekend .on-route li:nth-child(2) .on-nr,.on-getekend .on-route li:nth-child(2) b,.on-getekend .on-route li:nth-child(2) small{transition-delay:.25s}
.on-getekend .on-route li:nth-child(3) .on-nr,.on-getekend .on-route li:nth-child(3) b,.on-getekend .on-route li:nth-child(3) small{transition-delay:.45s}
.on-onder{margin-top:24px;padding-top:20px;border-top:1px solid var(--n200);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px}
.on-onder .ft-regel{max-width:380px}
.on-link{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:14px;line-height:20px;color:var(--n600)}
.on-link b{font-weight:500;color:var(--inkt);border-bottom:1px solid var(--n300);padding-bottom:1px;transition:border-color .16s}
.on-link svg{width:12px;height:12px;color:var(--inkt);transition:transform .16s}
.on-link:hover b{border-bottom-color:var(--inkt)}
.on-link:hover svg{transform:translate(2px,-2px)}
.formulier .on-kop{font-size:22px;line-height:29px;letter-spacing:-.4px}
@media (max-width:640px){
  .on-kop{font-size:21px;line-height:28px;letter-spacing:-.3px}
  .formulier .on-kop{font-size:20px;line-height:27px}
  .on-route{grid-template-columns:1fr;gap:14px}
  .on-route li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;padding:0}
  .on-route li .on-nr{grid-row:1 / span 2}
  .on-route b{margin-top:3px}
  .on-route li:not(:last-child)::after{left:14px;right:auto;top:28px;bottom:-14px;width:1px;height:auto;transform-origin:50% 0;transform:scaleY(1)}
  .ontvangen:not(.on-getekend) .on-route li:not(:last-child)::after{transform:scaleY(0)}
  .on-onder{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  form.on-vouw,.on-weg,.ontvangen,.on-route li::after,.on-route .on-nr,.on-route b,.on-route small{transition:none !important}
}
html[data-beweging="uit"] form.on-vouw,html[data-beweging="uit"] .on-weg,html[data-beweging="uit"] .ontvangen,
html[data-beweging="uit"] .on-route li::after,html[data-beweging="uit"] .on-route .on-nr,
html[data-beweging="uit"] .on-route b,html[data-beweging="uit"] .on-route small{transition:none !important}
.vf-pot{position:absolute !important;left:-10000px !important;top:auto;width:1px;height:1px;overflow:hidden}
.formulier-fout{margin-top:16px;padding:12px 16px;background:#fff;border:1px solid var(--n300);border-left:3px solid var(--inkt);font-size:14px;line-height:21px;color:var(--inkt)}
.formulier-fout[hidden]{display:none}
.formulier-fout a{color:var(--inkt);text-decoration:underline;text-underline-offset:2px}
.formulier-fout:focus{outline:0}
form[aria-busy="true"] button[type="submit"]{opacity:.6;cursor:progress}
.vs-pagina{padding:48px 0 72px}
.vs-pagina h1{margin:32px 0 12px;font-size:32px;line-height:40px;font-weight:500;letter-spacing:-.6px;color:var(--inkt);max-width:720px}
.vs-pagina .inleiding{max-width:640px;color:var(--n700)}
.vs-tabel{margin:24px 0;border-collapse:collapse;max-width:720px;width:100%}
.vs-tabel th,.vs-tabel td{padding:10px 12px 10px 0;border-bottom:1px solid var(--n200);text-align:left;vertical-align:top;font-size:15px;line-height:22px}
.vs-tabel th{width:38%;font-weight:500;color:var(--n600)}
.vs-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.veld-fout{display:block;margin-top:6px;padding-left:10px;border-left:2px solid var(--inkt);font-size:13px;line-height:18px;font-weight:500;color:var(--inkt)}
.veld-fout[hidden]{display:none}
form [aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]){border-color:var(--inkt);box-shadow:inset 0 0 0 1px var(--inkt)}
fieldset > .veld-fout{margin-top:10px}