Cover krimpt tot vaste header Nieuw

<!-- Cover krimpt tot vaste header · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="cwh" tabindex="0" role="region" aria-label="Projectverhaal, scrollbaar">
  <div class="cwh__bar">
    <div class="cwh__cover"><img src="https://neddev.com/lab-media/cover-wordt-header-1.webp" alt="" width="1200" height="655"><span class="cwh__shade"></span>
      <div class="cwh__title"><span class="cwh__k">Restauratie · Amsterdam</span><h4 class="cwh__h">Herengracht 212</h4></div>
    </div>
  </div>
  <div class="cwh__body">
    <p class="cwh__lead">Een rijksmonument uit 1672 kreeg in veertien maanden nieuwe funderingspalen, een hersteld trappenhuis en ramen met monumentenglas.</p>
    <dl class="cwh__facts"><div><dt>Oplevering</dt><dd>ma 8 sep 2026</dd></div><div><dt>Bouwsom</dt><dd>€ 1,24 mln</dd></div><div><dt>Vergunning</dt><dd>Omgevingsplan, 11 weken</dd></div></dl>
    <p>De gevel bleef staan terwijl we van binnenuit de vloeren stempelden. De buren aan beide kanten hielden tijdens het hele traject een trillingsmeter op hun muur.</p>
    <p>Het snijwerk boven de voordeur is door een steenhouwer uit Weesp in de werkplaats hersteld en in juni teruggeplaatst.</p>
    <p class="cwh__end">Volgend project: pakhuis aan de Brouwersgracht</p>
  </div>
</div>
</div>

/* Cover krimpt tot vaste header · NedDev · eigen werk. */
.cwh{position:absolute;inset:0;overflow-y:auto;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;container-type:size;scroll-timeline:--cwh y;scrollbar-width:thin;--cwh-min:46px}
.cwh:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.cwh__bar{position:sticky;top:0;height:var(--cwh-min);z-index:2}
.cwh__cover{position:absolute;left:0;right:0;top:0;height:100cqh;overflow:hidden;background:#13293d;color:#fff;--p:0}
.cwh__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cwh__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.05),rgba(10,10,10,.55))}
.cwh__title{position:absolute;left:16px;bottom:14px;right:16px;transform-origin:left bottom}
.cwh__k{display:block;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.cwh__h{margin:0;font:800 clamp(26px,9cqi,44px)/1 'Switzer',sans-serif;letter-spacing:-.035em}
.cwh__body{margin-top:calc(100cqh - var(--cwh-min));padding:18px 16px 20px;font-size:13px;line-height:1.55;color:#2a2622}
.cwh__body p{margin:0 0 12px;max-width:34em}
.cwh__lead{font-size:15px;line-height:1.45;color:#0a0a0a;font-weight:500}
.cwh__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px;padding:10px 0;border-block:1px solid #e6e3de}
.cwh__facts dt{font:500 9.5px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:#5f5a54}
.cwh__facts dd{margin:2px 0 0;font-weight:600;font-size:12px}
.cwh__end{font-weight:600;border-top:1px solid #0a0a0a;padding-top:10px}
/* JS-fallback zet --p (0..1) */
.cwh.is-js .cwh__cover{height:calc(100cqh - (100cqh - var(--cwh-min)) * var(--p));box-shadow:0 6px 14px rgba(0,0,0,calc(max(0, var(--p) - .9) * 3))}
.cwh.is-js .cwh__cover img,.cwh.is-js .cwh__shade{opacity:calc(1 - var(--p) * .9)}
.cwh.is-js .cwh__title{bottom:calc(14px - 3px * var(--p));transform:scale(calc(1 - var(--p) * .55))}
.cwh.is-js .cwh__k{opacity:calc(1 - var(--p) * 2)}
@supports (animation-timeline: scroll()){
  .cwh__cover{animation:cwh-shrink linear both;animation-timeline:--cwh;animation-range:0 calc(100cqh - var(--cwh-min))}
  .cwh__cover img,.cwh__shade{animation:cwh-fade linear both;animation-timeline:--cwh;animation-range:0 calc(100cqh - var(--cwh-min))}
  .cwh__title{animation:cwh-title linear both;animation-timeline:--cwh;animation-range:0 calc(100cqh - var(--cwh-min))}
  .cwh__k{animation:cwh-k linear both;animation-timeline:--cwh;animation-range:0 calc(50cqh - var(--cwh-min))}
}
@keyframes cwh-shrink{0%{height:100cqh;box-shadow:0 0 0 rgba(0,0,0,0)}90%{box-shadow:0 0 0 rgba(0,0,0,0)}100%{height:var(--cwh-min);box-shadow:0 6px 14px rgba(0,0,0,.28)}}
@keyframes cwh-fade{to{opacity:.1}}
@keyframes cwh-title{to{transform:scale(.45);bottom:11px}}
@keyframes cwh-k{to{opacity:0}}

// Cover krimpt tot vaste header · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.cwh')||root;
if(window.CSS&&CSS.supports&&CSS.supports('animation-timeline: scroll()'))return;
root.classList.add('is-js');var cover=root.querySelector('.cwh__cover'),raf=0;
function upd(){raf=0;var range=root.clientHeight-46;var p=Math.min(1,Math.max(0,root.scrollTop/range));cover.style.setProperty('--p',p.toFixed(3));}
root.addEventListener('scroll',function(){if(!raf)raf=requestAnimationFrame(upd);},{passive:true});upd();
}
init(document.querySelector('.jouw-container'));