Bento-tegel groeit uit tot vlak Nieuw

<!-- Bento-tegel groeit uit tot vlak · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bgr">
  <div class="bgr__grid">
    <button class="bgr__t bgr__t--a" type="button" aria-expanded="false" data-p="0"><span class="bgr__n">01</span><b>Onderhoud</b><span class="bgr__s">vanaf € 129 per jaar</span></button>
    <button class="bgr__t bgr__t--b" type="button" aria-expanded="false" data-p="1"><span class="bgr__n">02</span><b>Storing</b><span class="bgr__s">binnen 4 uur</span></button>
    <button class="bgr__t bgr__t--c" type="button" aria-expanded="false" data-p="2"><span class="bgr__n">03</span><b>Advies</b><span class="bgr__s">gratis thuisbezoek</span></button>
    <button class="bgr__t bgr__t--d" type="button" aria-expanded="false" data-p="3"><span class="bgr__n">04</span><b>Subsidie</b><span class="bgr__s">ISDE 2026</span></button>
  </div>
  <div class="bgr__p bgr__t--a" role="region" aria-label="Onderhoud" hidden><span class="bgr__n">01</span><b class="bgr__ph">Onderhoud</b><p>Jaarlijkse beurt van je cv-ketel of warmtepomp, inclusief rookgasmeting en rapport. Vanaf € 129 per jaar, zonder voorrijkosten in Zwolle en Kampen.</p><button class="bgr__x" type="button">Sluiten <kbd>Esc</kbd></button></div>
  <div class="bgr__p bgr__t--b" role="region" aria-label="Storing" hidden><span class="bgr__n">02</span><b class="bgr__ph">Storing</b><p>Geen warm water of de ketel geeft een foutcode? Bel 038 123 4567, binnen vier uur staat er een monteur voor de deur, ook in het weekend.</p><button class="bgr__x" type="button">Sluiten <kbd>Esc</kbd></button></div>
  <div class="bgr__p bgr__t--c" role="region" aria-label="Advies" hidden><span class="bgr__n">03</span><b class="bgr__ph">Advies</b><p>We meten je woning in en rekenen uit of een hybride warmtepomp loont. Je krijgt binnen een week een offerte met terugverdientijd.</p><button class="bgr__x" type="button">Sluiten <kbd>Esc</kbd></button></div>
  <div class="bgr__p bgr__t--d" role="region" aria-label="Subsidie" hidden><span class="bgr__n">04</span><b class="bgr__ph">Subsidie</b><p>Wij vragen de ISDE-subsidie voor je aan. Voor een hybride warmtepomp is dat in 2026 gemiddeld € 1.900.</p><button class="bgr__x" type="button">Sluiten <kbd>Esc</kbd></button></div>
</div>
</div>

/* Bento-tegel groeit uit tot vlak · NedDev · eigen werk. */
.bgr{position:absolute;inset:0;padding:12px;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;container-type:size}
.bgr__grid{display:grid;height:100%;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}
.bgr__t{appearance:none;border:0;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:10px 12px;border-radius:6px;cursor:pointer;font:inherit;position:relative;transition:transform .16s}
.bgr__grid .bgr__t:hover{transform:translateY(-2px)}
.bgr__t:focus-visible,.bgr__x:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.bgr__t--a{grid-row:span 2;background:#0a0a0a;color:#fff}
.bgr__t--b{background:#F5480F;color:#0a0a0a}
.bgr__t--c{background:#fff;color:#0a0a0a;border:1px solid #dcd8d2}
.bgr__t--d{grid-column:span 2;background:#d9e3dc;color:#0a0a0a}
.bgr__t b{font-size:17px;letter-spacing:-.02em;line-height:1.1}
.bgr__n{position:absolute;top:10px;left:12px;font:500 10px 'JetBrains Mono',monospace;opacity:.8}
.bgr__s{font-size:11.5px;opacity:.85}
.bgr__p{position:absolute;inset:12px;border-radius:6px;padding:34px 16px 14px;display:flex;flex-direction:column;gap:8px;z-index:3;view-transition-class:bgr-vt}
.bgr__p[hidden]{display:none}
.bgr__ph{font-size:clamp(22px,8cqi,32px);letter-spacing:-.03em;line-height:1}
.bgr__p p{margin:0;font-size:13px;line-height:1.5;max-width:30em}
.bgr__x{appearance:none;align-self:flex-start;margin-top:auto;border:1px solid currentColor;background:transparent;color:inherit;font:600 12px 'Switzer',sans-serif;padding:7px 12px;border-radius:999px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.bgr__x kbd{font:500 9.5px 'JetBrains Mono',monospace;border:1px solid currentColor;border-radius:3px;padding:1px 4px;opacity:.75}
.bgr__p.is-in>*{animation:bgr-in .32s .12s cubic-bezier(.2,.7,.2,1) both}
@keyframes bgr-in{from{opacity:0;transform:translateY(6px)}}
::view-transition-group(*.bgr-vt){animation-duration:.42s;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.bgr__p.is-in>*{animation:none}.bgr__t{transition:none}}
@container (max-width:360px){.bgr__t b{font-size:15px}.bgr__s{font-size:10.5px}}

// Bento-tegel groeit uit tot vlak · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.bgr')||root;
var tiles=[].slice.call(root.querySelectorAll('.bgr__grid .bgr__t')),panels=[].slice.call(root.querySelectorAll('.bgr__p'));
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,open=-1,uid='bgr'+Math.random().toString(36).slice(2,8);
function swap(i,show){var t=tiles[i],p=panels[i];
  if(show){t.style.viewTransitionName='';p.hidden=false;p.style.viewTransitionName=uid;t.setAttribute('aria-expanded','true');}
  else{p.style.viewTransitionName='';p.hidden=true;t.style.viewTransitionName=uid;t.setAttribute('aria-expanded','false');}}
function flip(from,to,rev){var a=from.getBoundingClientRect(),b=to.getBoundingClientRect();if(!to.animate||!a.width)return;
  var tr='translate('+(a.left-b.left)+'px,'+(a.top-b.top)+'px) scale('+(a.width/b.width)+','+(a.height/b.height)+')';
  to.style.transformOrigin='0 0';to.animate(rev?[{transform:'none'},{transform:tr}]:[{transform:tr},{transform:'none'}],{duration:420,easing:'cubic-bezier(.3,.7,.2,1)'});}
function go(i,show){var t=tiles[i],p=panels[i];
  if(rm){show?(p.hidden=false,t.setAttribute('aria-expanded','true')):(p.hidden=true,t.setAttribute('aria-expanded','false'));}
  else if(document.startViewTransition){if(show)t.style.viewTransitionName=uid;var vt=document.startViewTransition(function(){swap(i,show);});vt.finished.then(function(){t.style.viewTransitionName='';p.style.viewTransitionName='';});}
  else if(show){p.hidden=false;t.setAttribute('aria-expanded','true');flip(t,p);}
  else{var b=t.getBoundingClientRect(),a=p.getBoundingClientRect();t.setAttribute('aria-expanded','false');
    if(p.animate){p.style.transformOrigin='0 0';p.animate([{transform:'none'},{transform:'translate('+(b.left-a.left)+'px,'+(b.top-a.top)+'px) scale('+(b.width/a.width)+','+(b.height/a.height)+')'}],{duration:380,easing:'cubic-bezier(.3,.7,.2,1)'}).onfinish=function(){p.hidden=true;};}else p.hidden=true;}
  if(show){p.classList.add('is-in');open=i;setTimeout(function(){p.querySelector('.bgr__x').focus({preventScroll:true});},rm?0:60);}
  else{p.classList.remove('is-in');open=-1;t.focus({preventScroll:true});}}
tiles.forEach(function(t,i){t.addEventListener('click',function(){if(open<0)go(i,true);});});
panels.forEach(function(p,i){p.querySelector('.bgr__x').addEventListener('click',function(){go(i,false);});});
root.addEventListener('keydown',function(e){if(e.key==='Escape'&&open>=0){e.preventDefault();go(open,false);}});
}
init(document.querySelector('.jouw-container'));