@layer sections{.stappen-scene{--stap-lengte:28svh}.stappen__head{gap:var(--space-4);margin-block-end:var(--space-6);display:grid}.stappen__head--beeld{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end}.stappen__title{font-size:var(--text-h2);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);max-inline-size:12ch;line-height:1.04}.stappen__media{aspect-ratio:16/10}.stappen__list{--p:1;grid-template-columns:repeat(var(--count), minmax(0, 1fr));gap:var(--space-4);margin:0;padding:0;display:grid;position:relative}.stappen__list:before,.stappen__list:after{content:"";inset-inline:1.5rem calc((100% - (var(--count) - 1) * var(--space-4)) / var(--count) - 1.5rem);background:var(--color-border-strong);transform-origin:0;block-size:1px;position:absolute;inset-block-start:1.5rem}.stappen__list:after{background:var(--color-accent);block-size:2px;transform:scaleX(var(--p));opacity:0;margin-block-start:-.5px}.stap{gap:var(--space-2);align-content:start;display:grid;position:relative}.stap__num{z-index:1;border:1px solid var(--color-border-strong);background:var(--section-bg,var(--color-surface));block-size:3rem;inline-size:3rem;font-size:var(--text-small);font-weight:var(--weight-sterk);font-variant-numeric:tabular-nums;transition:background-color var(--dur-basis) var(--ease-out), border-color var(--dur-basis) var(--ease-out), color var(--dur-basis) var(--ease-out), box-shadow var(--dur-traag) var(--ease-out);border-radius:50%;place-items:center;display:grid;position:relative}.stap.is-current .stap__num{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}.stap__title{font-size:var(--text-h3);font-weight:var(--weight-display);transition:color var(--dur-basis) var(--ease-out);margin-block-start:var(--space-2)}.stap__text{color:var(--color-text-muted);max-inline-size:26rem;transition:opacity var(--dur-traag) var(--ease-out), translate var(--dur-traag) var(--ease-out)}.stappen__bar{justify-content:space-between;align-items:center;gap:var(--space-3) var(--space-5);padding:var(--space-4) var(--space-5);border-radius:var(--radius-xl);background:var(--section-bg);color:var(--color-text);flex-wrap:wrap;margin-block-start:var(--space-7);display:flex}.stappen__bar-text{font-size:var(--text-h3);font-weight:var(--weight-display);letter-spacing:var(--tracking-kop);line-height:1.15}.stappen__bar-actions{align-items:center;gap:var(--space-2) var(--space-4);flex-wrap:wrap;display:flex}.stappen__phone{min-block-size:2.75rem;color:var(--color-text);font-weight:var(--weight-ui);text-decoration:underline;-webkit-text-decoration-color:color-mix(in srgb, currentcolor 35%, transparent);text-decoration-color:color-mix(in srgb, currentcolor 35%, transparent);text-underline-offset:.25em;align-items:center;gap:.5rem;display:inline-flex}.stappen__phone:hover{text-decoration-color:currentColor}.stappen__bar.surface-bladgroen .btn{--btn-bg:var(--color-primary);--btn-fg:var(--color-on-primary);--btn-bg-hover:color-mix(in srgb, var(--color-primary) 88%, var(--color-text-muted))}:is(.is-scene,.is-flow) .stappen__list:after{opacity:1}:is(.is-scene,.is-flow) .stap:not(.is-reached) .stap__title{color:var(--color-text-muted)}:is(.is-scene,.is-flow) .stap:not(.is-reached) .stap__text{opacity:0;translate:0 .5rem}:is(.is-scene,.is-flow):focus-within .stap .stap__text{opacity:1;translate:0}:is(.is-scene,.is-flow) .stap.is-reached .stap__num{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}:is(.is-scene,.is-flow) .stap.is-current .stap__num{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent);box-shadow:0 0 0 .5rem color-mix(in srgb, var(--color-accent) 22%, transparent)}.is-done .stappen__bar .btn{box-shadow:0 0 0 .375rem color-mix(in srgb, var(--color-text) 18%, transparent)}@media not (min-width:56rem){.stappen__head--beeld{grid-template-columns:minmax(0,1fr)}.stappen__list{gap:var(--space-5);grid-template-columns:minmax(0,1fr)}.stappen__list:before,.stappen__list:after{inset-inline:1.5rem auto;inset-block:1.5rem var(--staart,1.5rem);transform-origin:top;block-size:auto;inline-size:1px}.stappen__list:after{inline-size:2px;transform:scaleY(var(--p));margin:0 0 0 -.5px}.stap{column-gap:var(--space-3);grid-template-columns:auto minmax(0,1fr)}.stap__num{grid-row:span 2}.stap__title{margin-block-start:.5rem}.stappen__bar{padding:var(--space-4);margin-block-start:var(--space-6)}}@media (min-width:56rem) and (min-height:40rem) and (prefers-reduced-motion:no-preference){:is(.js:not(.js-laat) .stappen-scene:not(.scene-uit),.stappen-scene.is-scene){block-size:calc(100svh + var(--count,3) * var(--stap-lengte));padding-block:0}.stappen-scene.is-scene .stappen__scene{align-content:center;gap:clamp(var(--space-4), 6svh, var(--space-7));block-size:100svh;padding-block:calc(var(--header-hoogte) + var(--space-3)) var(--space-4);display:grid;position:sticky;inset-block-start:0}.stappen-scene.is-scene .stappen__head,.stappen-scene.is-scene .stappen__bar{margin-block:0}.stappen-scene.is-scene .stappen__title{font-size:min(var(--text-h2), 8.5svh)}}@media (min-width:56rem) and (min-height:40rem) and (not (min-height:50rem)) and (prefers-reduced-motion:no-preference){.stappen-scene.is-scene .stappen__scene{gap:clamp(var(--space-3), 4svh, var(--space-6));padding-block:calc(var(--header-hoogte) + var(--space-1)) var(--space-3)}.stappen-scene.is-scene .stappen__title{font-size:min(var(--text-h2), 7svh)}.stappen-scene.is-scene .section-head__intro{display:none}.stappen-scene.is-scene .stap__title{font-size:var(--text-h4)}.stappen-scene.is-scene .stappen__bar{padding-block:var(--space-3)}.stappen-scene.is-scene .stappen__bar-text{font-size:var(--text-h4)}}}
