.kop{padding-bottom:clamp(72px,8vw,120px)}
.terug{display:inline-flex;align-items:center;gap:12px;min-height:44px;margin-bottom:clamp(20px,3vw,40px);font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gips-3);text-decoration:none;transition:color .25s}
.terug:hover{color:var(--koper-licht)}
.kop .intro{margin-bottom:clamp(48px,6vw,88px)}
.kopbeeld{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(40px,5vw,64px) 28px}
.luik-kop{grid-column:1/13}
.luik-kop .kader{aspect-ratio:2400/1807}
.luik-kop img{object-position:50% 50%}
.luik-kop .m{max-width:none}
.kopbeeld .feiten{grid-column:1/13;margin:0}
.kopbeeld .feiten dd span{max-width:30ch}
.kopbeeld .feiten{container-type:inline-size}
.kopbeeld .feiten dd b{font-size:min(clamp(34px,3.4vw,52px),calc((25cqi - 24px) / 8.4))}
@media (max-width:980px){.kopbeeld .feiten dd b{font-size:min(34px,calc((50cqi - 24px) / 8.4))}}
@media (max-width:560px){.kopbeeld .feiten dd b{font-size:min(34px,calc((100cqi - 24px) / 8.4))}}
@media (max-width:760px){.kopbeeld{column-gap:16px}}
.case{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.hfd{grid-column:1/4;position:sticky;top:calc(var(--nav-h) + 16px);align-self:start}
.hfd ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn);cursor:default}
.hfd li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--koper);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.hfd li.is-active::before{transform:scaleX(1)}
.hfd li{position:relative;display:flex;gap:16px;align-items:baseline;min-height:56px;padding:16px 0;border-bottom:1px solid var(--lijn-zacht);color:var(--gips-3);transition:color .25s}
.hfd li .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--koper-licht);flex:none;width:2.2em;font-variant-numeric:tabular-nums}
.hfd li .t{font-family:var(--display);font-size:20px;line-height:1.1}
.hfd li.is-active{color:var(--gips)}
.hfd-voet{margin-top:32px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--gips-3);line-height:1.8;max-width:36ch}
.hoofdstukken{grid-column:5/13}
.h{position:relative;padding-bottom:clamp(72px,8vw,120px)}
.h+.h{padding-top:clamp(64px,7vw,104px);border-top:1px solid var(--lijn-zacht)}
.h:last-child{padding-bottom:0}
.h .n{font-family:var(--mono);font-size:var(--t-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--koper-licht);display:flex;align-items:center;gap:14px;margin-bottom:26px}
.h .n::before{content:"";width:30px;height:1px;background:var(--koper);flex:none}
.h h2{font-size:clamp(34px,3.6vw,56px);line-height:1.02;margin-bottom:30px;max-width:18ch}
.h .tekst{font-size:17.5px;max-width:58ch}
.h .fig{margin-top:clamp(40px,5vw,64px)}
.h-huis{max-width:640px}
.h-huis .kader{aspect-ratio:1807/2400}
.h-huis.h-lig{max-width:none}
.h-huis.h-lig .kader{aspect-ratio:2400/1807}
.h-huis img{object-position:50% 50%}
.h-huis figcaption{flex-direction:column;gap:6px}
.h-huis .m{text-align:left;max-width:none}
@media (max-width:600px){.h-huis{max-width:none}}
@media (max-width:980px){
  .hfd{grid-column:1/13;position:static;margin-bottom:clamp(40px,6vw,64px)}
  .hfd ol{display:none}
  .hfd-voet{margin-top:0;max-width:52ch;line-height:1.7}
  .hoofdstukken{grid-column:1/13}
  .hfd{order:1;margin:clamp(40px,6vw,64px) 0 0}
}
.verder-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 28px;align-items:start}
.register{grid-column:1/8;list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.register li{position:relative}
.register li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--koper);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.register li:hover::before,.register li:focus-within::before{transform:scaleX(1)}
.register a{display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;gap:10px 20px;align-items:baseline;padding:30px 0 28px;border-bottom:1px solid var(--lijn-zacht);text-decoration:none;color:var(--gips)}
.register .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--koper-licht);font-variant-numeric:tabular-nums}
.register .t{font-family:var(--display);font-size:clamp(28px,2.9vw,42px);line-height:1.04;transition:color .25s}
.register .m{grid-column:2;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--gips-3);line-height:1.6}
.register .pijl{grid-column:3;grid-row:1;align-self:center;width:26px;color:var(--koper-licht)}
.register a:hover .t,.register a:focus-visible .t{color:var(--koper-licht)}
.volgende{grid-column:9/13;position:sticky;top:calc(var(--nav-h) + 24px)}
.volgende h3{font-size:clamp(28px,2.6vw,38px);line-height:1.05;margin-bottom:18px}
.volgende p{font-size:15.5px;color:var(--gips-2);max-width:30ch}
.volgende .btn{margin-top:28px}
.volgende .meer{margin-top:6px;display:flex}
@media (max-width:980px){.register{grid-column:1/13}.volgende{grid-column:1/13;position:static}.volgende p:not(.label){max-width:46ch}}
@media (max-width:600px){
  .verder-grid{column-gap:16px}
  .register a{grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:24px 0 22px}
  .register .n{grid-column:1}
  .register .t{grid-column:1;font-size:28px}
  .register .m{grid-column:1}
  .register .pijl{grid-column:2;grid-row:2}
}
