@layer sections{.dagverhaal{--dag-lengte:55svh}.dagverhaal__scene{position:relative}.dagverhaal__kop{gap:var(--space-2);margin-block-end:var(--space-6);display:grid}.dagverhaal__regel{font-size:var(--text-label);font-weight:var(--weight-sterk);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--color-text-muted);align-items:center;gap:.375rem;display:inline-flex}.dagverhaal__regel .icon{flex:none}.dagverhaal__titel{font-size:var(--text-h2);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);text-wrap:balance;line-height:1.02}.dagverhaal__stappen{gap:var(--space-5) var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));margin:0;padding:0;list-style:none;display:grid}.dagverhaal__stap{gap:var(--space-3);align-content:start;display:grid}.dagverhaal__beeld{aspect-ratio:4/3;border-radius:var(--radius-xl);background:var(--color-surface-muted);margin:0;overflow:clip}.dagverhaal__beeld img{object-fit:cover;block-size:100%;inline-size:100%}.dagverhaal__tekst{gap:var(--space-2);color:var(--color-text-muted);transition:color var(--dur-basis) var(--ease-out);grid-template-columns:2.5rem minmax(0,1fr);align-items:start;display:grid}.dagverhaal__tekst strong{color:var(--color-text);font-weight:var(--weight-ui)}.dagverhaal__tekst>span:last-child{padding-block-start:.35rem}.dagverhaal__nr{aspect-ratio:1;border:1px solid var(--color-border-strong);inline-size:2.5rem;font-size:var(--text-small);font-weight:var(--weight-sterk);font-variant-numeric:tabular-nums;border-radius:50%;place-items:center;display:grid}.dagverhaal__voortgang{display:none}.dagverhaal__link{margin-block-start:var(--space-4)}@media (min-width:56rem) and (min-height:40rem) and (prefers-reduced-motion:no-preference){:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene){block-size:calc(100svh + var(--n,3) * var(--dag-lengte));padding-block:0}:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene) .dagverhaal__scene{gap:var(--space-5);block-size:100svh;padding-block:calc(var(--header-hoogte) + var(--space-3)) var(--space-4);grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;display:grid}.dagverhaal.is-scene .dagverhaal__scene{position:sticky;inset-block-start:0}:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene) .dagverhaal__paneel{gap:var(--space-3);padding:clamp(var(--space-4), 4svh, var(--space-5));border-radius:var(--radius-2xl);background:var(--color-surface-raised);box-shadow:0 30px 60px -40px color-mix(in srgb, var(--color-primary) 45%, transparent);grid-column:2;display:grid}:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene) .dagverhaal__kop{margin-block-end:var(--space-1)}:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene) .dagverhaal__titel{font-size:min(var(--text-h2), 8svh)}:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene) .dagverhaal__stappen{gap:var(--space-2);grid-template-columns:minmax(0,1fr)}:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene) .dagverhaal__stap{display:block}:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene) .dagverhaal__beeld{inset-block:calc(var(--header-hoogte) + var(--space-3)) var(--space-4);inline-size:calc((100% - var(--space-5)) * 7 / 12);aspect-ratio:auto;border-radius:var(--radius-2xl);opacity:0;transition:opacity .7s var(--ease-zacht);position:absolute;inset-inline-start:0}:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene) .dagverhaal__stap.is-actief .dagverhaal__beeld{opacity:1}.dagverhaal.is-scene .dagverhaal__beeld img{scale:calc(1.08 - var(--p,0) * .08)}:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene) .dagverhaal__stap.is-actief .dagverhaal__tekst{color:var(--color-text)}:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene) .dagverhaal__stap.is-actief .dagverhaal__nr{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}.dagverhaal.is-scene .dagverhaal__stap.is-gedaan .dagverhaal__nr{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-on-primary)}:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene) .dagverhaal__voortgang{background:var(--color-border);border-radius:2px;block-size:3px;display:block;overflow:clip}.dagverhaal__voortgang span{background:var(--color-accent);transform-origin:0;block-size:100%;display:block;transform:scaleX(0)}:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene) .dagverhaal__link{justify-self:start;margin-block-start:0}}@media (min-width:56rem) and (min-height:40rem) and (not (min-height:50rem)) and (prefers-reduced-motion:no-preference){:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene) .dagverhaal__scene{padding-block:calc(var(--header-hoogte) + var(--space-1)) var(--space-3)}:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene) .dagverhaal__beeld{inset-block:calc(var(--header-hoogte) + var(--space-1)) var(--space-3)}:is(.js:not(.js-laat) .dagverhaal:not(.scene-uit),.dagverhaal.is-scene) .dagverhaal__tekst{font-size:var(--text-small)}}}