@layer sections{.estroom__raster{gap:var(--space-5);display:grid}.estroom__tekstkolom{gap:var(--space-4);align-content:start;display:grid}.estroom__titel{font-size:var(--text-h2);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);max-inline-size:14ch;line-height:1.04}.estroom__intro{font-size:var(--text-lead);color:var(--color-text-muted);max-inline-size:34rem}.estroom__wissel{border-radius:var(--radius-pill);background:var(--color-surface-muted);justify-self:start;max-inline-size:100%;padding:.25rem;display:none}.js .estroom__wissel{display:inline-flex}.estroom__wissel button{border-radius:var(--radius-pill);min-block-size:2.75rem;color:var(--color-text);font-weight:var(--weight-ui);white-space:nowrap;transition:background-color var(--dur-basis) var(--ease-out);align-items:center;gap:.5rem;padding-inline:1.125rem;display:inline-flex}.estroom__wissel button[aria-checked=true]{background:var(--color-surface-raised);box-shadow:0 4px 14px -8px color-mix(in srgb, var(--color-primary) 45%, transparent)}.estroom__wissel button:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}.estroom__teksten{gap:var(--space-2);max-inline-size:34rem;display:grid}.estroom__tekst{color:var(--color-text-muted)}.estroom__tekst-naam{color:var(--color-text);font-weight:var(--weight-ui)}.js .estroom__teksten>*{grid-area:1/1}.js .estroom__tekst:not(.is-actief){visibility:hidden}.js .estroom__tekst-naam{display:none}.estroom__figuur{gap:var(--space-2);margin:0;display:grid}.estroom__vlak{--schijf:clamp(3.25rem, 2.25rem + 3vw, 5.25rem);aspect-ratio:5/4;border-radius:var(--radius-2xl);background:radial-gradient(50% 55% at 50% 0%, color-mix(in srgb, var(--color-highlight) 35%, transparent), transparent 70%), var(--color-surface-muted);inline-size:min(100%,95svh);transition:background-color var(--dur-traag) var(--ease-zacht);margin-inline:auto;position:relative;overflow:clip}.estroom.is-avond .estroom__vlak{background:radial-gradient(50% 55% at 50% 0%, color-mix(in srgb, var(--color-highlight) 12%, transparent), transparent 70%), var(--color-primary)}.estroom__svg{block-size:100%;inline-size:100%;position:absolute;inset:0}.estroom__svg--smal{display:none}.estroom__lijn{fill:none;stroke:color-mix(in srgb, var(--color-primary) 32%, transparent);stroke-width:2px;stroke-dasharray:6 8;vector-effect:non-scaling-stroke}.estroom.is-avond .estroom__lijn{stroke:color-mix(in srgb, var(--color-text-inverse) 38%, transparent)}.estroom__deeltje{fill:var(--color-accent)}.estroom.is-avond .estroom__deeltje{fill:var(--color-highlight)}.estroom__pijl{fill:none;stroke:var(--color-accent);stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;display:none}.estroom.is-avond .estroom__pijl{stroke:var(--color-highlight)}.estroom__pad{transition:opacity var(--dur-traag) var(--ease-zacht)}.estroom[data-situatie=s0] .estroom__pad:not([data-wanneer~=s0]),.estroom[data-situatie=s1] .estroom__pad:not([data-wanneer~=s1]),.estroom[data-situatie=s2] .estroom__pad:not([data-wanneer~=s2]){opacity:.12}.estroom[data-situatie=s0] .estroom__pad:not([data-wanneer~=s0]) :is(circle,.estroom__pijl),.estroom[data-situatie=s1] .estroom__pad:not([data-wanneer~=s1]) :is(circle,.estroom__pijl),.estroom[data-situatie=s2] .estroom__pad:not([data-wanneer~=s2]) :is(circle,.estroom__pijl){visibility:hidden}.estroom__knoop{translate:-50% calc(var(--schijf) / -2);justify-items:center;gap:.375rem;display:grid;position:absolute;inset-block-start:var(--y);inset-inline-start:var(--x)}.estroom__icoon{inline-size:var(--schijf);aspect-ratio:1;background:var(--color-surface-raised);color:var(--on-light-text);box-shadow:0 16px 36px -20px color-mix(in srgb, var(--color-primary) 55%, transparent);transition:opacity var(--dur-traag) var(--ease-zacht);border-radius:50%;place-items:center;display:grid}.estroom__knoop--zon .estroom__icoon{background:color-mix(in srgb, var(--color-accent) 30%, var(--color-surface-raised))}.estroom[data-situatie=s0] .estroom__knoop:not([data-wanneer~=s0]) .estroom__icoon,.estroom[data-situatie=s1] .estroom__knoop:not([data-wanneer~=s1]) .estroom__icoon,.estroom[data-situatie=s2] .estroom__knoop:not([data-wanneer~=s2]) .estroom__icoon{opacity:.4}.estroom__label{border-radius:var(--radius-pill);background:var(--color-surface-raised);color:var(--on-light-text);font-size:var(--text-label);font-weight:var(--weight-ui);white-space:nowrap;padding:.15rem .6rem}.estroom__noot{justify-self:start}@media (prefers-reduced-motion:reduce){.estroom__deeltje{display:none}.estroom__pijl{display:inline}.estroom__pad,.estroom__icoon,.estroom__vlak{transition:none}}@media not (min-width:64rem){.estroom__tekstkolom{display:contents}.estroom__kop{order:1}.estroom__wissel{order:2}.estroom__figuur{order:3}.estroom__teksten{order:4}}@media (min-width:64rem){.estroom__raster{gap:var(--space-7);grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center}}@media not (min-width:40rem){.estroom__vlak{aspect-ratio:4/5;inline-size:100%}.estroom__svg--breed{display:none}.estroom__svg--smal{display:block}.estroom__knoop{inset-block-start:var(--ys);inset-inline-start:var(--xs)}.estroom__label{padding-inline:.45rem;font-size:.75rem}.js .estroom__wissel{grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;justify-self:stretch;display:grid}.estroom__wissel button{justify-content:center;gap:.375rem;padding-inline:.625rem}}}
