Pakketten met wel en niet Nieuw

<!-- Pakketten met wel en niet · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="xwn">
  <div class="xwn__inner">
    <div class="xwn__head">
      <div><span class="xwn__eyebrow">Rijwielhuis Smit · Groningen</span><h2 class="xwn__h">Fietsabonnement: kies wat u echt gebruikt</h2></div>
      <label class="xwn__toggle"><input type="checkbox"><span class="xwn__sw" aria-hidden="true"></span>Toon alleen verschillen</label>
    </div>
    <div class="xwn__grid">
      <div class="xwn__plan"><b class="xwn__name">Basis</b><div class="xwn__price"><strong>€ 6,50</strong>per maand</div>
        <ul class="xwn__list"><li data-r="beurt" class="y">Jaarlijkse onderhoudsbeurt</li><li data-r="rem" class="y">Remmen en versnelling afstellen</li><li data-r="app" class="y">Online afspraak plannen</li><li data-r="band" class="n">Lekke band gratis plakken</li><li data-r="pech" class="n">Pechhulp binnen de ringweg</li><li data-r="leen" class="n">Leenfiets tijdens reparatie</li><li data-r="onder" class="n">Onderdelen tot € 50 per jaar</li></ul>
        <a href="#" class="xwn__btn">Kies Basis</a></div>
      <div class="xwn__plan xwn__plan--hl"><span class="xwn__flag">Meest gekozen</span><b class="xwn__name">Plus</b><div class="xwn__price"><strong>€ 11,95</strong>per maand</div>
        <ul class="xwn__list"><li data-r="beurt" class="y">Jaarlijkse onderhoudsbeurt</li><li data-r="rem" class="y">Remmen en versnelling afstellen</li><li data-r="app" class="y">Online afspraak plannen</li><li data-r="band" class="y">Lekke band gratis plakken</li><li data-r="pech" class="y">Pechhulp binnen de ringweg</li><li data-r="leen" class="n">Leenfiets tijdens reparatie</li><li data-r="onder" class="n">Onderdelen tot € 50 per jaar</li></ul>
        <a href="#" class="xwn__btn">Kies Plus</a></div>
      <div class="xwn__plan"><b class="xwn__name">Zorgeloos</b><div class="xwn__price"><strong>€ 17,50</strong>per maand</div>
        <ul class="xwn__list"><li data-r="beurt" class="y">Jaarlijkse onderhoudsbeurt</li><li data-r="rem" class="y">Remmen en versnelling afstellen</li><li data-r="app" class="y">Online afspraak plannen</li><li data-r="band" class="y">Lekke band gratis plakken</li><li data-r="pech" class="y">Pechhulp binnen de ringweg</li><li data-r="leen" class="y">Leenfiets tijdens reparatie</li><li data-r="onder" class="y">Onderdelen tot € 50 per jaar</li></ul>
        <a href="#" class="xwn__btn">Kies Zorgeloos</a></div>
    </div>
    <p class="xwn__foot">Maandelijks opzegbaar · e-bikes € 3 per maand extra · prijzen incl. btw</p>
  </div>
</div>
</div>

/* Pakketten met wel en niet · NedDev · eigen werk. */
.xwn{background:#faf7f2;color:#231a17;font-family:'Switzer',sans-serif;box-sizing:border-box}
.xwn *{box-sizing:border-box}
.xwn__inner{max-width:1080px;margin:0 auto;padding:34px 32px 26px}
.xwn__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.xwn__eyebrow{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#c8102e;margin-bottom:10px}
.xwn__h{font-size:clamp(24px,3vw,34px);line-height:1.08;letter-spacing:-.02em;font-weight:700;margin:0;max-width:22ch}
.xwn__toggle{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;cursor:pointer;user-select:none}
.xwn__toggle input{position:absolute;opacity:0;width:1px;height:1px}
.xwn__sw{width:40px;height:22px;border-radius:11px;background:#d8d0c6;position:relative;transition:background .2s}
.xwn__sw::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.xwn__toggle input:checked+.xwn__sw{background:#c8102e}
.xwn__toggle input:checked+.xwn__sw::after{transform:translateX(18px)}
.xwn__toggle input:focus-visible+.xwn__sw{outline:2px solid #231a17;outline-offset:2px}
.xwn__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.xwn__plan{position:relative;background:#fff;border:1.5px solid #e6ddd2;border-radius:6px;padding:18px 20px 18px;display:flex;flex-direction:column}
.xwn__plan--hl{border-color:#c8102e;box-shadow:0 18px 36px -24px rgba(200,16,46,.5)}
.xwn__flag{position:absolute;top:-11px;left:20px;background:#c8102e;color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:3px}
.xwn__name{font-size:18px}
.xwn__price{font-size:13px;color:#7a6c62;margin:4px 0 10px}
.xwn__price strong{display:inline-block;font-size:30px;color:#231a17;letter-spacing:-.02em;margin-right:6px}
.xwn__list{list-style:none;margin:0 0 14px;padding:0;border-top:1px solid #efe8df}
.xwn__list li{position:relative;padding:8px 0 8px 28px;border-bottom:1px solid #efe8df;font-size:14px;line-height:1.3;transition:opacity .3s,max-height .35s,padding .35s;max-height:60px;overflow:hidden}
.xwn__list li::before{content:'';position:absolute;left:0;top:8px;width:18px;height:18px;border-radius:50%}
.xwn__list li::after{content:'';position:absolute}
.xwn__list li.y::before{background:#e5f4ea}
.xwn__list li.y::after{left:6px;top:12px;width:7px;height:4px;border-left:2px solid #1b7a43;border-bottom:2px solid #1b7a43;transform:rotate(-45deg)}
.xwn__list li.n{color:#a0948a}
.xwn__list li.n::before{background:#f3eeea}
.xwn__list li.n::after{left:4px;top:12px;width:10px;height:10px;background:linear-gradient(45deg,transparent 42%,#a89a8f 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,#a89a8f 42% 58%,transparent 58%)}
.xwn__list li.n span{display:none}
.xwn__list li.n{text-decoration:line-through;text-decoration-color:rgba(160,148,138,.6)}
.xwn__list li.n::selection{background:none}
.xwn.is-diff .xwn__list li.is-same{max-height:0;padding-top:0;padding-bottom:0;opacity:0;border-bottom-width:0}
.xwn__btn{margin-top:auto;display:block;text-align:center;text-decoration:none;font-weight:700;font-size:14px;padding:12px;border-radius:4px;border:1.5px solid #231a17;color:#231a17;transition:background .2s,color .2s}
.xwn__btn:hover{background:#231a17;color:#fff}
.xwn__plan--hl .xwn__btn{background:#c8102e;border-color:#c8102e;color:#fff}
.xwn__plan--hl .xwn__btn:hover{background:#a00d25}
.xwn__foot{margin:14px 0 0;font-size:12.5px;color:#7a6c62;text-align:center}
@media(prefers-reduced-motion:reduce){.xwn__list li{transition:none}}
@media(max-width:820px){.xwn__inner{padding:32px 16px 26px}.xwn__grid{grid-template-columns:1fr;gap:22px}}

// Pakketten met wel en niet · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.xwn');if(!w)return;
var rows={};w.querySelectorAll('.xwn__list li').forEach(function(li){var k=li.getAttribute('data-r');(rows[k]=rows[k]||[]).push(li.className.indexOf('y')>-1?'y':'n');});
w.querySelectorAll('.xwn__list li').forEach(function(li){var v=rows[li.getAttribute('data-r')];if(v.every(function(x){return x===v[0];}))li.classList.add('is-same');li.setAttribute('aria-label',(li.classList.contains('n')?'Niet inbegrepen: ':'Inbegrepen: ')+li.textContent);});
w.querySelector('.xwn__toggle input').addEventListener('change',function(e){w.classList.toggle('is-diff',e.target.checked);});
}
init(document.querySelector('.jouw-container'));