Cases masonry met filter New

<!-- Cases masonry met filter · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="cfm">
  <div class="cfm__in">
    <div class="cfm__head">
      <div>
        <span class="cfm__eye">Houtwerk Brabant · opgeleverd werk</span>
        <h2 class="cfm__h">Maatwerk in hout, van keuken tot toonbank.</h2>
      </div>
      <div class="cfm__chips" role="group" aria-label="Filter projecten op type">
        <button type="button" class="cfm__chip is-on" data-f="alle" aria-pressed="true">Alles <span></span></button>
        <button type="button" class="cfm__chip" data-f="keuken" aria-pressed="false">Keukens <span></span></button>
        <button type="button" class="cfm__chip" data-f="kast" aria-pressed="false">Kasten <span></span></button>
        <button type="button" class="cfm__chip" data-f="winkel" aria-pressed="false">Winkels <span></span></button>
        <button type="button" class="cfm__chip" data-f="kantoor" aria-pressed="false">Kantoren <span></span></button>
      </div>
    </div>
    <div class="cfm__grid">
      <a href="#" class="cfm__item" data-t="keuken"><div class="cfm__img cfm__img--eik cfm__img--tall"></div><div class="cfm__res"><b>6 wk</b><span>van inmeten tot oplevering</span></div><div class="cfm__cap"><strong>Keuken in massief eiken</strong><span>Oisterwijk · 2025</span></div></a>
      <a href="#" class="cfm__item" data-t="winkel"><div class="cfm__img cfm__img--groen"></div><div class="cfm__res"><b>+18%</b><span>omzet per m² in het eerste jaar</span></div><div class="cfm__cap"><strong>Interieur boekhandel</strong><span>Tilburg · 2024</span></div></a>
      <a href="#" class="cfm__item" data-t="kast"><div class="cfm__img cfm__img--wit cfm__img--mid"></div><div class="cfm__res"><b>2,4 m²</b><span>extra bergruimte onder de trap</span></div><div class="cfm__cap"><strong>Trapkast met schuifladen</strong><span>Vught · 2025</span></div></a>
      <a href="#" class="cfm__item" data-t="kantoor"><div class="cfm__img cfm__img--noot"></div><div class="cfm__res"><b>4 dagen</b><span>montage tijdens de zomersluiting</span></div><div class="cfm__cap"><strong>Ontvangstbalie notariskantoor</strong><span>Breda · 2024</span></div></a>
      <a href="#" class="cfm__item" data-t="keuken"><div class="cfm__img cfm__img--noot cfm__img--mid"></div><div class="cfm__res"><b>€ 23.800</b><span>opgeleverd binnen de offerte</span></div><div class="cfm__cap"><strong>Kookeiland in notenhout</strong><span>Eindhoven · 2025</span></div></a>
      <a href="#" class="cfm__item" data-t="kast"><div class="cfm__img cfm__img--eik"></div><div class="cfm__res"><b>38 m</b><span>boekenplank met rolladder</span></div><div class="cfm__cap"><strong>Boekenwand tot het plafond</strong><span>'s-Hertogenbosch · 2023</span></div></a>
      <a href="#" class="cfm__item" data-t="winkel"><div class="cfm__img cfm__img--terra cfm__img--tall"></div><div class="cfm__res"><b>1 nacht</b><span>geplaatst, om 7:00 weer open</span></div><div class="cfm__cap"><strong>Toonbank ambachtelijke bakker</strong><span>Oss · 2025</span></div></a>
      <a href="#" class="cfm__item" data-t="kantoor"><div class="cfm__img cfm__img--groen cfm__img--mid"></div><div class="cfm__res"><b>22</b><span>werkplekken met geluiddempend front</span></div><div class="cfm__cap"><strong>Werkplekken advocatenkantoor</strong><span>Breda · 2026</span></div></a>
      <a href="#" class="cfm__item" data-t="keuken"><div class="cfm__img cfm__img--wit"></div><div class="cfm__res"><b>3 wk</b><span>inclusief stucwerk en elektra</span></div><div class="cfm__cap"><strong>Bijkeuken met wasmachinekast</strong><span>Helmond · 2026</span></div></a>
    </div>
  </div>
</div>
</div>

/* Cases masonry met filter · NedDev · eigen werk. */
.cfm{background:#efe7dc;color:#2b211b;font-family:'Switzer',sans-serif;box-sizing:border-box}
.cfm *{box-sizing:border-box}
.cfm__in{max-width:1180px;margin:0 auto;padding:44px 32px 48px}
.cfm__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.cfm__eye{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#a65a2a}
.cfm__h{font-size:clamp(26px,3.2vw,38px);line-height:1.08;font-weight:700;letter-spacing:-.02em;margin:10px 0 0;max-width:22ch}
.cfm__chips{display:flex;gap:8px;flex-wrap:wrap}
.cfm__chip{font:600 13px 'Switzer',sans-serif;color:#2b211b;background:transparent;border:1px solid rgba(43,33,27,.28);border-radius:999px;padding:8px 14px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.cfm__chip span{font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.6;margin-left:4px}
.cfm__chip:hover{border-color:#2b211b}
.cfm__chip.is-on{background:#2b211b;color:#efe7dc;border-color:#2b211b}
.cfm__chip:focus-visible,.cfm__item:focus-visible{outline:2px solid #a65a2a;outline-offset:3px}
.cfm__grid{columns:3;column-gap:18px}
.cfm__item{display:block;break-inside:avoid;margin:0 0 18px;position:relative;text-decoration:none;color:inherit;border-radius:4px;overflow:hidden;background:#fbf7f1;animation:cfm-in .45s ease both}
.cfm__item[hidden]{display:none}
.cfm__img{height:130px;position:relative}
.cfm__img--mid{height:175px}.cfm__img--tall{height:225px}
.cfm__img--eik{background:repeating-linear-gradient(97deg,#c99b6a 0 7px,#bf8f5d 7px 9px,#d2a676 9px 19px,#b98654 19px 21px)}
.cfm__img--noot{background:repeating-linear-gradient(88deg,#5e3d27 0 5px,#6c4730 5px 13px,#553620 13px 15px,#73503a 15px 27px)}
.cfm__img--wit{background:linear-gradient(90deg,transparent 49.6%,rgba(43,33,27,.18) 49.6% 50.4%,transparent 50.4%),linear-gradient(0deg,transparent 32%,rgba(43,33,27,.14) 32% 33%,transparent 33% 65%,rgba(43,33,27,.14) 65% 66%,transparent 66%),#e9e4dc}
.cfm__img--groen{background:linear-gradient(0deg,#5c6b4e 0 22%,transparent 22%),repeating-linear-gradient(90deg,#41503a 0 38px,#4a5a41 38px 40px),#41503a}
.cfm__img--terra{background:radial-gradient(circle at 70% 30%,#d98a5b 0 18%,transparent 19%),linear-gradient(0deg,#8a4a2a 0 40%,#b5652b 40% 42%,#c47447 42%)}
.cfm__res{position:absolute;left:0;right:0;top:0;padding:16px 18px;background:#2b211b;color:#efe7dc;transform:translateY(-101%);transition:transform .35s cubic-bezier(.2,.8,.2,1);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cfm__res b{font-size:28px;letter-spacing:-.02em;color:#f0b07a}
.cfm__res span{font-size:13px;opacity:.85}
.cfm__item:hover .cfm__res,.cfm__item:focus-visible .cfm__res{transform:none}
.cfm__cap{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px}
.cfm__cap strong{font-size:15px;font-weight:600}
.cfm__cap span{font-family:'JetBrains Mono',monospace;font-size:11px;color:#7a6656}
@keyframes cfm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:900px){.cfm__grid{columns:2}}
@media(max-width:560px){.cfm__in{padding:30px 16px 34px}.cfm__grid{column-gap:10px}.cfm__item{margin-bottom:10px}.cfm__img{height:120px}.cfm__img--mid{height:150px}.cfm__img--tall{height:190px}.cfm__res{position:static;transform:none;padding:8px 12px 0;background:transparent;color:#2b211b}.cfm__res b{font-size:18px;color:#a65a2a}.cfm__res span{display:none}.cfm__cap strong{font-size:13px}.cfm__chip{padding:7px 11px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.cfm__item{animation:none}.cfm__res{transition:none}}

// Cases masonry met filter · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.cfm');if(!w)return;
var chips=w.querySelectorAll('.cfm__chip'),items=w.querySelectorAll('.cfm__item');
chips.forEach(function(c){var f=c.getAttribute('data-f');var n=0;items.forEach(function(it){if(f==='alle'||it.getAttribute('data-t')===f)n++;});c.querySelector('span').textContent=n;
  c.addEventListener('click',function(){chips.forEach(function(o){o.classList.toggle('is-on',o===c);o.setAttribute('aria-pressed',o===c?'true':'false');});
    items.forEach(function(it){var show=f==='alle'||it.getAttribute('data-t')===f;it.hidden=!show;if(show){it.style.animation='none';void it.offsetWidth;it.style.animation='';}});});});
items.forEach(function(it){it.addEventListener('click',function(e){e.preventDefault();});});
}
init(document.querySelector('.jouw-container'));