Twee pakketten naast elkaar kiezen Nieuw

<!-- Twee pakketten naast elkaar kiezen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="pvk"><div class="pvk__in">
<fieldset class="pvk__fs"><legend class="pvk__lg">Onderhoud cv-ketel, Installatiebedrijf Hoekstra Amersfoort</legend>
<div class="pvk__grid">
<label class="pvk__c"><input type="radio" name="pvk-p" value="basis" data-n="Basis" data-p="8.95">
<span class="pvk__top"><span class="pvk__n">Basis</span><span class="pvk__p"><b>&euro; 8,95</b> per maand</span></span>
<span class="pvk__ul"><span>Jaarlijkse onderhoudsbeurt</span><span>Storing: monteur binnen 24 uur</span><span class="pvk__dif">Voorrijkosten &euro; 45 per storing</span><span class="pvk__dif">Onderdelen betaal je los</span></span></label>
<label class="pvk__c"><input type="radio" name="pvk-p" value="compleet" data-n="Compleet" data-p="15.95" checked>
<span class="pvk__top"><span class="pvk__n">Compleet</span><span class="pvk__p"><b>&euro; 15,95</b> per maand</span></span>
<span class="pvk__ul"><span>Jaarlijkse onderhoudsbeurt</span><span class="pvk__dif">Storing: monteur binnen 8 uur, ook in het weekend</span><span class="pvk__dif">Geen voorrijkosten</span><span class="pvk__dif">Onderdelen tot &euro; 350 inbegrepen</span></span></label>
</div>
</fieldset>
<p class="pvk__diff" aria-live="polite"></p>
<button class="pvk__btn" type="button"></button>
</div></div>
</div>

/* Twee pakketten naast elkaar kiezen · NedDev · eigen werk. */
.pvk{position:absolute;inset:0;overflow:auto;display:flex;padding:12px;box-sizing:border-box;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.pvk *,.pvk *::before,.pvk *::after{box-sizing:border-box}
.pvk__in{margin:auto;width:100%;max-width:440px}
.pvk__fs{border:0;margin:0;padding:0;min-width:0}
.pvk__lg{padding:0;margin-bottom:8px;font-size:14px;font-weight:700;line-height:1.3}
.pvk__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pvk__c{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px 11px;background:#fff;border:1px solid rgba(10,10,10,.2);border-radius:8px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pvk__c:hover{border-color:#0a0a0a}
.pvk__c:has(input:checked){border-color:#0a0a0a;box-shadow:inset 0 0 0 2px #0a0a0a}
.pvk__c:has(input:focus-visible){outline:2px solid #F5480F;outline-offset:2px}
.pvk__c input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pvk__c::after{content:'';position:absolute;right:10px;top:11px;width:18px;height:18px;border:1.5px solid #6b6b6b;border-radius:50%;background:#fff;pointer-events:none}
.pvk__c:has(input:checked)::after{border-color:#0a0a0a;background:#0a0a0a;box-shadow:inset 0 0 0 4px #fff}
.pvk__top{display:flex;flex-direction:column;gap:1px;padding-right:24px}
.pvk__n{font-size:14px;font-weight:700}
.pvk__p{font-size:12.5px;color:#4a4a4a}
.pvk__p b{font-size:16px;color:#0a0a0a;font-weight:700}
.pvk__ul{display:grid;gap:4px;font-size:12px;line-height:1.35;color:#3a3a3a}
.pvk__ul span{padding-left:10px;position:relative}
.pvk__ul span::before{content:'';position:absolute;left:0;top:.5em;width:4px;height:4px;background:#a3a09a;border-radius:1px}
.pvk__ul .pvk__dif{color:#0a0a0a;font-weight:600}
.pvk__ul .pvk__dif::before{background:#F5480F}
.pvk__diff{margin:8px 0;font-size:12.5px;line-height:1.4;color:#3a3a3a}
.pvk__btn{width:100%;height:40px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13.5px 'Switzer',sans-serif;cursor:pointer;transition:background-color .15s}
.pvk__btn:hover{background:#2a2a2a}
.pvk__btn:active{transform:translateY(1px)}
.pvk__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pvk *{transition:none!important}}

// Twee pakketten naast elkaar kiezen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.pvk');if(!w)return;
var sfx='-'+Math.random().toString(36).slice(2,7);w.querySelectorAll('input[type=radio]').forEach(function(r){r.name=r.name+sfx;});
var diff=w.querySelector('.pvk__diff'),btn=w.querySelector('.pvk__btn');
function eur(n){return '\u20ac\u00a0'+n.toFixed(2).replace('.',',');}
function upd(){var r=w.querySelector('input:checked'),n=r.getAttribute('data-n'),p=+r.getAttribute('data-p');
 btn.textContent='Kies '+n+', '+eur(p)+' per maand';
 diff.textContent=n==='Compleet'?'Voor '+eur(7)+' per maand meer dan Basis: storing binnen 8 uur, geen voorrijkosten en onderdelen tot \u20ac\u00a0350. Na twee storingen per jaar ben je goedkoper uit.':'Basis is '+eur(7)+' per maand goedkoper. Bij een storing betaal je \u20ac\u00a045 voorrijkosten plus onderdelen, en wacht je tot 24 uur.';}
w.querySelectorAll('input').forEach(function(r){r.addEventListener('change',upd);});
btn.addEventListener('click',function(){var n=w.querySelector('input:checked').getAttribute('data-n');btn.textContent=n+' gekozen, volgende stap: je adres';});
upd();
}
init(document.querySelector('.jouw-container'));