Integraties-raster met filter Nieuw

<!-- Integraties-raster met filter · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="irs">
  <div class="irs__in">
    <div class="irs__head">
      <div><span class="irs__eye">Knipt · afspraaksoftware voor kappers en salons</span>
      <h2 class="irs__h">Werkt met wat je al gebruikt.</h2></div>
      <label class="irs__search"><span class="irs__sr">Zoek een koppeling</span><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.5" fill="none" stroke="currentColor" stroke-width="2"/><path d="m16 16 4.5 4.5" stroke="currentColor" stroke-width="2"/></svg><input type="search" placeholder="Zoek, bv. Mollie"></label>
    </div>
    <div class="irs__chips" role="group" aria-label="Categorie"><button type="button" class="is-on" data-c="alle">Alle</button><button type="button" data-c="Boekhouding">Boekhouding</button><button type="button" data-c="Betalen">Betalen</button><button type="button" data-c="Agenda">Agenda</button><button type="button" data-c="Berichten">Berichten</button><button type="button" data-c="Marketing">Marketing</button></div>
    <div class="irs__grid">
      <a href="#" class="irs__tile" data-c="Boekhouding"><span class="irs__logo irs__logo--a">Exact Online</span><span class="irs__cat">Boekhouding</span><p>Kassabonnen en facturen per dag naar je grootboek.</p></a>
      <a href="#" class="irs__tile" data-c="Boekhouding"><span class="irs__logo irs__logo--b">moneybird</span><span class="irs__cat">Boekhouding</span><p>Omzet per medewerker als aparte boeking.</p></a>
      <a href="#" class="irs__tile" data-c="Boekhouding"><span class="irs__logo irs__logo--c">e-Boekhouden.nl</span><span class="irs__cat">Boekhouding</span><p>Btw-tarieven voor diensten en producten apart.</p></a>
      <a href="#" class="irs__tile" data-c="Boekhouding"><span class="irs__logo irs__logo--e">Twinfield</span><span class="irs__cat">Boekhouding</span><p>Voor salons met meerdere vestigingen en een accountant.</p></a>
      <a href="#" class="irs__tile" data-c="Boekhouding"><span class="irs__logo irs__logo--d">SnelStart</span><span class="irs__cat">Boekhouding</span><p>Dagafsluiting met één klik geëxporteerd.</p></a>
      <a href="#" class="irs__tile" data-c="Betalen"><span class="irs__logo irs__logo--b">mollie</span><span class="irs__cat">Betalen</span><p>Aanbetaling via iDEAL bij online boeken.</p></a>
      <a href="#" class="irs__tile" data-c="Betalen"><span class="irs__logo irs__logo--d">SumUp</span><span class="irs__cat">Betalen</span><p>Pinbedrag komt vanzelf op de kassabon.</p></a>
      <a href="#" class="irs__tile" data-c="Betalen"><span class="irs__logo irs__logo--a">Tikkie</span><span class="irs__cat">Betalen</span><p>Betaalverzoek bij een no-show, met één tik.</p></a>
      <a href="#" class="irs__tile" data-c="Agenda"><span class="irs__logo irs__logo--c">Google Agenda</span><span class="irs__cat">Agenda</span><p>Afspraken op je telefoon, in twee richtingen.</p></a>
      <a href="#" class="irs__tile" data-c="Agenda"><span class="irs__logo irs__logo--a">Outlook</span><span class="irs__cat">Agenda</span><p>Vrije dagen uit Outlook blokkeren je agenda.</p></a>
      <a href="#" class="irs__tile" data-c="Agenda"><span class="irs__logo irs__logo--e">Apple Agenda</span><span class="irs__cat">Agenda</span><p>Via een privé-agendalink, zonder app.</p></a>
      <a href="#" class="irs__tile" data-c="Berichten"><span class="irs__logo irs__logo--d">WhatsApp</span><span class="irs__cat">Berichten</span><p>Herinnering 24 uur vooraf. 41% minder no-shows.</p></a>
      <a href="#" class="irs__tile" data-c="Berichten"><span class="irs__logo irs__logo--e">SMS</span><span class="irs__cat">Berichten</span><p>Voor klanten zonder WhatsApp, € 0,07 per bericht.</p></a>
      <a href="#" class="irs__tile" data-c="Marketing"><span class="irs__logo irs__logo--b">mailchimp</span><span class="irs__cat">Marketing</span><p>Klanten die 8 weken niet kwamen in een eigen lijst.</p></a>
      <a href="#" class="irs__tile" data-c="Marketing"><span class="irs__logo irs__logo--c">Google Bedrijfsprofiel</span><span class="irs__cat">Marketing</span><p>Boekknop direct in Google Maps.</p></a>
      <a href="#" class="irs__tile" data-c="Marketing"><span class="irs__logo irs__logo--a">Instagram</span><span class="irs__cat">Marketing</span><p>Boek-knop in je profiel en in stories.</p></a>
      <p class="irs__empty" hidden>Niet gevonden. Mail ons op koppelingen@voorbeeld.nl, we bouwen er elke maand een paar bij.</p>
    </div>
  </div>
</div>
</div>

/* Integraties-raster met filter · NedDev · eigen werk. */
.irs{background:#f3ede4;color:#161412;font-family:'Switzer',sans-serif;box-sizing:border-box}
.irs *{box-sizing:border-box}
.irs__in{max-width:1180px;margin:0 auto;padding:40px 32px}
.irs__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.irs__eye{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#d9472b}
.irs__h{font-size:clamp(26px,3.2vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:8px 0 0}
.irs__search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d8cfc1;border-radius:999px;padding:0 14px;width:260px;max-width:100%}
.irs__search:focus-within{border-color:#161412}
.irs__search svg{width:16px;height:16px;color:#8a8073;flex:none}
.irs__search input{border:0;background:transparent;font:400 14px 'Switzer',sans-serif;color:#161412;padding:10px 0;width:100%;outline:none;min-width:0}
.irs__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.irs__chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.irs__chips button{font:600 13px 'Switzer',sans-serif;color:#161412;background:transparent;border:1px solid #d8cfc1;border-radius:999px;padding:7px 13px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.irs__chips button span{font:500 11px 'JetBrains Mono',monospace;opacity:.55;margin-left:5px}
.irs__chips button:hover{border-color:#161412}
.irs__chips button.is-on{background:#161412;color:#f3ede4;border-color:#161412}
.irs__chips button:focus-visible,.irs__tile:focus-visible{outline:2px solid #ff6b4a;outline-offset:2px}
.irs__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #d8cfc1;border-left:1px solid #d8cfc1}
.irs__tile{background:#fbf8f3;border-right:1px solid #d8cfc1;border-bottom:1px solid #d8cfc1;padding:18px 18px 16px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px;min-height:132px;position:relative;transition:background .2s}
.irs__tile[hidden]{display:none}
.irs__tile::after{content:'Koppel in 2 min';position:absolute;right:14px;top:16px;font:500 10.5px 'JetBrains Mono',monospace;color:#d9472b;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.irs__tile:hover{background:#fff}
.irs__tile:hover::after{opacity:1;transform:none}
.irs__logo{font-size:20px;line-height:1.1;color:#161412}
.irs__logo--a{font-weight:700;letter-spacing:-.02em}
.irs__logo--b{font-weight:800;letter-spacing:-.045em;font-size:22px}
.irs__logo--c{font-weight:500;letter-spacing:-.01em}
.irs__logo--d{font-weight:900;letter-spacing:-.03em;font-style:italic}
.irs__logo--e{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:17px;letter-spacing:.02em;text-transform:uppercase}
.irs__cat{font:500 10.5px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:#8a8073}
.irs__tile p{margin:auto 0 0;font-size:13px;line-height:1.45;color:#4d463e}
.irs__empty{grid-column:1/-1;background:#fbf8f3;border-right:1px solid #d8cfc1;border-bottom:1px solid #d8cfc1;margin:0;padding:22px 18px;font-size:14px;color:#4d463e}
.irs__tile.is-in{animation:irs-in .3s ease both}
@keyframes irs-in{from{opacity:0}to{opacity:1}}
@media(max-width:960px){.irs__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.irs__in{padding:28px 16px}.irs__search{width:100%}.irs__grid{grid-template-columns:repeat(2,1fr)}.irs__tile{padding:14px 12px;min-height:118px}.irs__logo{font-size:16px}.irs__logo--b{font-size:18px}.irs__logo--e{font-size:14px}.irs__tile p{font-size:12px}.irs__tile::after{display:none}}
@media(prefers-reduced-motion:reduce){.irs__tile.is-in{animation:none}.irs__tile::after{transition:none}}

// Integraties-raster met filter · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.irs');if(!w)return;
var tiles=w.querySelectorAll('.irs__tile'),chips=w.querySelectorAll('.irs__chips button'),q=w.querySelector('.irs__search input');var cat='alle';
chips.forEach(function(c){var k=c.getAttribute('data-c');var n=0;tiles.forEach(function(t){if(k==='alle'||t.getAttribute('data-c')===k)n++;});var s=document.createElement('span');s.textContent=n;c.appendChild(s);c.setAttribute('aria-pressed',c.classList.contains('is-on'));
 c.addEventListener('click',function(){cat=k;chips.forEach(function(x){x.classList.toggle('is-on',x===c);x.setAttribute('aria-pressed',x===c);});apply();});});
function apply(){var term=q.value.trim().toLowerCase();var n=0;tiles.forEach(function(t){var ok=(cat==='alle'||t.getAttribute('data-c')===cat)&&(!term||t.textContent.toLowerCase().indexOf(term)>-1);
 if(ok&&t.hidden){t.classList.remove('is-in');void t.offsetWidth;t.classList.add('is-in');}t.hidden=!ok;if(ok)n++;});w.querySelector('.irs__empty').hidden=n>0;}
q.addEventListener('input',apply);
tiles.forEach(function(t){t.addEventListener('click',function(e){e.preventDefault();});});
}
init(document.querySelector('.jouw-container'));