Review-embedkaart Nieuw

<!-- Review-embedkaart · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="rve"><div class="rve__demo" role="group" aria-label="Demo-staat"><button type="button" class="rve__s" aria-pressed="true" data-s="ok">Review</button><button type="button" class="rve__s" aria-pressed="false" data-s="load">Laden</button><button type="button" class="rve__s" aria-pressed="false" data-s="err">Fout</button></div>
<article class="rve__card" aria-busy="false" aria-labelledby="rve-n"><div class="rve__ok"><div class="rve__top"><span class="rve__av" aria-hidden="true">MB</span><div class="rve__who"><p class="rve__n" id="rve-n">Marieke Bosman</p><p class="rve__m">Apeldoorn · 4 reviews</p></div><span class="rve__src">via Google</span></div>
<div class="rve__rate"><span class="rve__stars" role="img" aria-label="5 van 5 sterren"><svg viewBox="0 0 100 20" aria-hidden="true"><path d="M10 1.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L10 14.8l-5.2 2.8 1-5.8L1.5 7.7l5.9-.8z" transform="translate(0 0)"/><path d="M10 1.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L10 14.8l-5.2 2.8 1-5.8L1.5 7.7l5.9-.8z" transform="translate(20 0)"/><path d="M10 1.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L10 14.8l-5.2 2.8 1-5.8L1.5 7.7l5.9-.8z" transform="translate(40 0)"/><path d="M10 1.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L10 14.8l-5.2 2.8 1-5.8L1.5 7.7l5.9-.8z" transform="translate(60 0)"/><path d="M10 1.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L10 14.8l-5.2 2.8 1-5.8L1.5 7.7l5.9-.8z" transform="translate(80 0)"/></svg></span><b>5,0</b><time datetime="2026-09-22">ma 22 sep 2026</time></div>
<p class="rve__txt" id="rve-t">Op vrijdagmiddag lekte onze cv-ketel. Wolters stond dezelfde avond nog in de bijkeuken, heeft de lekkage verholpen en de week erna een nieuwe ketel geplaatst voor precies het bedrag uit de offerte. Netjes opgeruimd, uitleg over de thermostaat gekregen en een factuur met alle onderdelen erop.</p>
<div class="rve__ft"><button type="button" class="rve__more" aria-expanded="false" aria-controls="rve-t">Lees meer</button><a class="rve__lnk" href="https://www.google.com/maps" target="_blank" rel="noopener">Lees op Google<svg viewBox="0 0 12 12" aria-hidden="true"><path d="M4.5 2.5h5v5M9.5 2.5 3 9"/></svg><span class="rve__sr"> (opent nieuw venster)</span></a></div></div>
<div class="rve__load" aria-hidden="true"><i class="rve__sk rve__sk--av"></i><i class="rve__sk" style="width:46%"></i><i class="rve__sk" style="width:30%"></i><i class="rve__sk" style="width:94%"></i><i class="rve__sk" style="width:88%"></i><i class="rve__sk" style="width:60%"></i></div>
<div class="rve__err" role="alert"></div></article></div>
</div>

/* Review-embedkaart · NedDev · eigen werk. */
.rve{position:absolute;inset:0;box-sizing:border-box;padding:10px 14px 12px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.rve__demo{display:flex;gap:4px}
.rve__s{font:500 10px 'JetBrains Mono',monospace;border:1px solid rgba(10,10,10,.16);background:transparent;color:#5f5e5a;padding:3px 8px;border-radius:3px;cursor:pointer;transition:background .15s,color .15s}
.rve__s:hover{color:#0a0a0a;border-color:#0a0a0a}.rve__s[aria-pressed="true"]{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.rve__s:focus-visible,.rve__more:focus-visible,.rve__lnk:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.rve__card{position:relative;width:100%;max-width:350px;box-sizing:border-box;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px;padding:13px 14px 11px;box-shadow:0 1px 2px rgba(10,10,10,.05)}
.rve__top{display:flex;align-items:center;gap:9px}
.rve__av{flex:none;width:32px;height:32px;border-radius:50%;background:#1f4d3a;color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.rve__who{flex:1;min-width:0}.rve__n{margin:0;font-size:13px;font-weight:650}.rve__m{margin:1px 0 0;font-size:11px;color:#6b6a66}
.rve__src{font:500 9.5px 'JetBrains Mono',monospace;color:#6b6a66;align-self:flex-start}
.rve__rate{display:flex;align-items:center;gap:7px;margin:8px 0 6px;font-size:11px;color:#6b6a66}
.rve__stars svg{display:block;width:72px;height:14px;fill:#F5480F}
.rve__rate b{color:#0a0a0a;font-size:12px}
.rve__txt{margin:0;font-size:12.5px;line-height:1.5;color:#2a2926;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.rve__card.is-open .rve__txt{display:block;max-height:76px;overflow-y:auto}
.rve__ft{display:flex;justify-content:space-between;align-items:center;margin-top:7px}
.rve__more{font:600 11.5px 'Switzer',system-ui,sans-serif;border:0;background:none;padding:2px 0;color:#0a0a0a;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(10,10,10,.3);cursor:pointer;transition:text-decoration-color .15s}
.rve__more:hover{text-decoration-color:#0a0a0a}
.rve__lnk{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:#b33208;text-decoration:none;border-radius:2px;transition:color .15s}
.rve__lnk:hover{color:#0a0a0a}.rve__lnk svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.rve__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rve__load,.rve__err{display:none}
.rve__card[data-s="load"] .rve__ok,.rve__card[data-s="err"] .rve__ok{display:none}
.rve__card[data-s="load"] .rve__load{display:flex;flex-direction:column;gap:7px;min-height:136px}
.rve__sk{display:block;height:9px;border-radius:3px;background:linear-gradient(90deg,#ecebe8 30%,#f7f6f4 50%,#ecebe8 70%);background-size:300% 100%;animation:rve-sh 1.1s linear infinite}
.rve__sk--av{width:32px;height:32px;border-radius:50%}
@keyframes rve-sh{to{background-position:-150% 0}}
.rve__card[data-s="err"] .rve__err{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:136px;font-size:12.5px;line-height:1.45}
.rve__err p{margin:0}.rve__err b{display:block;font-size:13px}
@media(max-width:420px){.rve{padding:8px 10px}.rve__card{padding:10px 11px 9px}.rve__txt{font-size:12px;-webkit-line-clamp:2;line-clamp:2}.rve__card.is-open .rve__txt{max-height:54px}.rve__rate{margin:6px 0 4px}.rve__card[data-s="load"] .rve__load,.rve__card[data-s="err"] .rve__err{min-height:112px}}
@media(prefers-reduced-motion:reduce){.rve__sk{animation:none}}

// Review-embedkaart · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.rve');if(!w)return;var card=w.querySelector('.rve__card'),more=w.querySelector('.rve__more'),err=w.querySelector('.rve__err');
more.addEventListener('click',function(){var o=more.getAttribute('aria-expanded')!=='true';more.setAttribute('aria-expanded',o?'true':'false');more.textContent=o?'Minder':'Lees meer';card.classList.toggle('is-open',o);});
w.querySelectorAll('.rve__s').forEach(function(b){b.addEventListener('click',function(){w.querySelectorAll('.rve__s').forEach(function(x){x.setAttribute('aria-pressed',x===b?'true':'false');});var s=b.dataset.s;card.dataset.s=s;card.setAttribute('aria-busy',s==='load'?'true':'false');
err.innerHTML=s==='err'?'<b>Review kon niet worden geladen</b><p>Probeer het later opnieuw of bekijk alle 214 reviews direct op Google.</p><a class="rve__lnk" href="https://www.google.com/maps" target="_blank" rel="noopener">Alle reviews op Google<span class="rve__sr"> (opent nieuw venster)</span></a>':'';});});
}
init(document.querySelector('.jouw-container'));