@layer componenten{.hero{--hero-boven: var(--header-h, 64px);--hero-zij: max(var(--container-pad, clamp(1rem, 4vw, 2rem)), calc((100% - var(--container-max, 1280px)) / 2 + var(--container-pad, clamp(1rem, 4vw, 2rem))));position:relative;isolation:isolate}.hero__inhoud{position:relative;display:grid;gap:var(--spacing-md, 16px);align-content:start}.hero__inhoud>*{margin:0}.hero__eyebrow{font-size:var(--text-sm, .875rem);letter-spacing:.08em;text-transform:uppercase}.hero__kop{font-family:var(--font-display, inherit);font-size:var(--text-display, clamp(2.4rem, 1.6rem + 4vw, 4.6rem));line-height:var(--lh-tight, 1.1);text-wrap:balance}.hero__regel{font-size:var(--text-lg, 1.125rem);max-width:34rem}.hero__knoppen{margin-top:var(--spacing-xs, 4px)}.hero__beeld{position:relative;overflow:hidden}.hero[data-hero=beeld-vol]{display:grid;min-height:min(92svh,900px);color:var(--color-text-inverse, #fff)}.hero[data-hero=beeld-vol] .hero__beeld{position:absolute;inset:0;z-index:-2}.hero[data-hero=beeld-vol] .hero__beeld img{width:100%;height:100%;object-fit:cover;object-position:var(--focus-telefoon, var(--focus, 50% 30%))}.hero__sluier{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,#00000052,#0000 18%),linear-gradient(to top,#000000c7,#0009 38%,#0000004d 58%,#0000 74%)}.hero[data-hero=beeld-vol] .hero__inhoud{align-self:end;padding:calc(var(--hero-boven) + 24px) var(--hero-zij) clamp(24px,4svh,40px)}.hero[data-hero=beeld-vol] .hero__inhoud,.hero[data-hero=beeld-vol] .hero__inhoud *{color:inherit}.hero[data-hero=gespleten-paneel]{display:grid;padding-top:var(--hero-boven)}.hero[data-hero=gespleten-paneel] .hero__beeld{height:clamp(282px,38svh,420px)}.hero[data-hero=gespleten-paneel] .hero__inhoud{padding:var(--spacing-lg, 24px) var(--hero-zij) var(--spacing-xl, 32px)}.hero[data-hero=gespleten-paneel] .hero__kop,.hero[data-hero=beeld-vol] .hero__kop{font-size:min(var(--text-display, 2.4rem),2.25rem)}.hero[data-hero=redactioneel-boven]{display:grid;padding-top:calc(var(--hero-boven) + var(--spacing-lg, 24px))}.hero[data-hero=redactioneel-boven] .hero__inhoud{padding:0 var(--hero-zij) var(--spacing-lg, 24px)}.hero[data-hero=redactioneel-boven] .hero__beeld{margin-inline:var(--hero-zij);aspect-ratio:4 / 3;border-radius:var(--radius-md, 12px)}.hero[data-hero=belofte-gezicht]{padding:calc(var(--hero-boven) + var(--spacing-lg, 24px)) var(--hero-zij) var(--spacing-xl, 32px)}.hero[data-hero=belofte-gezicht] .hero__persoon{display:grid;grid-template-columns:128px minmax(0,1fr);gap:var(--spacing-md, 16px);align-items:center;margin:0}.hero__portret{position:relative;overflow:hidden;aspect-ratio:4 / 5;border-radius:var(--radius-md, 12px)}.hero__portret img{width:100%;height:100%;object-fit:cover;object-position:var(--focus, 50% 30%)}.hero__persoon figcaption{display:grid;gap:2px}.hero__naam{font-weight:var(--weight-semibold, 600)}@media(min-width:900px){.hero[data-hero=beeld-vol]{min-height:min(86svh,860px)}.hero[data-hero=beeld-vol] .hero__beeld img{object-position:var(--focus, 50% 30%)}.hero__sluier{background:linear-gradient(to bottom,#0000004d,#0000 16%),linear-gradient(to right,#000000a8,#0000006b 36%,#0000 62%)}.hero[data-hero=beeld-vol] .hero__inhoud{max-width:calc(var(--hero-zij) + 40rem);padding-bottom:clamp(48px,9svh,104px)}.hero[data-hero=gespleten-paneel]{grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:min(86svh,820px)}.hero[data-hero=gespleten-paneel] .hero__kop,.hero[data-hero=beeld-vol] .hero__kop{font-size:var(--text-display, clamp(2.4rem, 1.6rem + 4vw, 4.6rem))}.hero[data-hero=gespleten-paneel] .hero__beeld{order:2;height:auto;min-height:100%}.hero[data-hero=gespleten-paneel] .hero__inhoud{align-content:center;padding:var(--spacing-2xl, 48px) clamp(32px,4vw,72px) var(--spacing-2xl, 48px) var(--hero-zij)}.hero[data-hero=redactioneel-boven] .hero__inhoud{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5vw,96px);align-items:end}.hero[data-hero=redactioneel-boven] .hero__eyebrow,.hero[data-hero=redactioneel-boven] .hero__kop{grid-column:1}.hero[data-hero=redactioneel-boven] .hero__inhoud>:not(.hero__eyebrow):not(.hero__kop){grid-column:2}.hero[data-hero=redactioneel-boven] .hero__beeld{aspect-ratio:auto;height:clamp(320px,52svh,600px)}.hero[data-hero=belofte-gezicht] .hero__inhoud{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,6vw,112px);align-items:center}.hero[data-hero=belofte-gezicht] .hero__inhoud>:not(.hero__persoon){grid-column:1}.hero[data-hero=belofte-gezicht] .hero__persoon{grid-column:2;grid-row:1 / span 6;grid-template-columns:1fr;align-self:center}.hero[data-hero=belofte-gezicht] .hero__portret{max-height:70svh}}}