Werkgebied-kaart met projectpins New

<!-- Werkgebied-kaart met projectpins · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ckp">
  <div class="ckp__in">
    <div class="ckp__map">
      <svg class="ckp__svg" viewBox="0 0 600 420" aria-hidden="true">
        <defs><pattern id="ckp-dots" width="14" height="14" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1.2" fill="#2f5a46"/></pattern></defs>
        <path d="M58 150 L120 92 L205 70 L262 38 L350 52 L420 40 L505 78 L560 140 L572 220 L540 300 L470 352 L380 372 L300 392 L215 380 L150 342 L92 300 L48 236 Z" fill="#183f30" stroke="#3d7a5c" stroke-width="2"/>
        <path d="M58 150 L120 92 L205 70 L262 38 L350 52 L420 40 L505 78 L560 140 L572 220 L540 300 L470 352 L380 372 L300 392 L215 380 L150 342 L92 300 L48 236 Z" fill="url(#ckp-dots)" opacity=".7"/>
        <path d="M40 330 C140 318 210 360 300 352 S470 318 590 330" stroke="#6fb1d6" stroke-width="7" fill="none" opacity=".75"/>
        <path d="M300 200 C330 230 360 250 410 262 S480 300 520 312" stroke="#6fb1d6" stroke-width="3" fill="none" opacity=".6"/>
        <path d="M70 250 L180 236 L300 222 L420 206 L560 190" stroke="#f2b705" stroke-width="2" stroke-dasharray="8 6" fill="none" opacity=".55"/>
        <path d="M290 40 L295 160 L300 222 L285 330 L280 400" stroke="#f2b705" stroke-width="2" stroke-dasharray="8 6" fill="none" opacity=".55"/>
        <text x="440" y="346" fill="#6fb1d6" font-family="JetBrains Mono,monospace" font-size="11" opacity=".9">LEK</text>
        <text x="64" y="244" fill="#f2b705" font-family="JetBrains Mono,monospace" font-size="10" opacity=".7">A12</text>
        <text x="302" y="62" fill="#f2b705" font-family="JetBrains Mono,monospace" font-size="10" opacity=".7">A27</text>
      </svg>
      <button type="button" class="ckp__pin" style="left:49%;top:47%" data-i="0"><span>Utrecht</span></button>
      <button type="button" class="ckp__pin" style="left:80%;top:27%" data-i="1"><span>Amersfoort</span></button>
      <button type="button" class="ckp__pin" style="left:63%;top:46%" data-i="2"><span>Zeist</span></button>
      <button type="button" class="ckp__pin" style="left:54%;top:68%" data-i="3"><span>Houten</span></button>
      <button type="button" class="ckp__pin" style="left:41%;top:65%" data-i="4"><span>Nieuwegein</span></button>
      <button type="button" class="ckp__pin" style="left:17%;top:51%" data-i="5"><span>Woerden</span></button>
      <button type="button" class="ckp__pin" style="left:45%;top:24%" data-i="6"><span>Maarssen</span></button>
      <button type="button" class="ckp__pin" style="left:86%;top:62%" data-i="7"><span>Veenendaal</span></button>
    </div>
    <div class="ckp__panel" aria-live="polite">
      <span class="ckp__eye">Zon op Dak Utrecht · werkgebied</span>
      <h2 class="ckp__h">412 daken in de provincie, dit zijn er acht.</h2>
      <div class="ckp__card">
        <div class="ckp__thumb"></div>
        <span class="ckp__place"></span>
        <strong class="ckp__title"></strong>
        <dl class="ckp__facts"></dl>
        <p class="ckp__quote"></p>
      </div>
      <p class="ckp__hint">Klik op een pin op de kaart.</p>
    </div>
  </div>
</div>
</div>

/* Werkgebied-kaart met projectpins · NedDev · eigen werk. */
.ckp{background:#0f2a20;color:#eef3e8;font-family:'Switzer',sans-serif;box-sizing:border-box}
.ckp *{box-sizing:border-box}
.ckp__in{max-width:1180px;margin:0 auto;padding:36px 32px;display:grid;grid-template-columns:1.35fr 1fr;gap:36px;align-items:center}
.ckp__map{position:relative;aspect-ratio:600/420}
.ckp__svg{position:absolute;inset:0;width:100%;height:100%}
.ckp__pin{position:absolute;width:30px;height:30px;margin:-30px 0 0 -15px;padding:0;border:0;background:none;cursor:pointer}
.ckp__pin::before{content:'';position:absolute;left:5px;top:2px;width:20px;height:20px;background:#f2b705;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 3px 8px rgba(0,0,0,.4);transition:background .2s,transform .25s}
.ckp__pin::after{content:'';position:absolute;left:12px;top:9px;width:6px;height:6px;border-radius:50%;background:#0f2a20}
.ckp__pin span{position:absolute;left:50%;top:-22px;transform:translateX(-50%);font:600 11px 'JetBrains Mono',monospace;white-space:nowrap;color:#eef3e8;background:#0f2a20;padding:2px 6px;border-radius:2px;opacity:0;transition:opacity .2s}
.ckp__pin:hover span,.ckp__pin:focus-visible span,.ckp__pin.is-on span{opacity:1}
.ckp__pin:hover::before{transform:rotate(-45deg) scale(1.15)}
.ckp__pin.is-on::before{background:#fff;transform:rotate(-45deg) scale(1.25)}
.ckp__pin:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:50%}
.ckp__eye{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#f2b705}
.ckp__h{font-size:clamp(22px,2.4vw,30px);line-height:1.12;letter-spacing:-.02em;font-weight:700;margin:10px 0 20px}
.ckp__card{background:#eef3e8;color:#0f2a20;border-radius:6px;padding:18px;display:grid;grid-template-columns:96px 1fr;gap:4px 16px;animation:ckp-in .35s ease}
.ckp__thumb{grid-row:1/4;border-radius:3px;background:linear-gradient(135deg,transparent 40%,#c9d6c4 40%),repeating-linear-gradient(90deg,#1d3b5a 0 14px,#2c5378 14px 16px),#1d3b5a;min-height:96px;position:relative}
.ckp__place{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#3d7a5c}
.ckp__title{font-size:17px;line-height:1.25}
.ckp__facts{display:grid;grid-template-columns:repeat(3,auto);gap:4px 14px;margin:6px 0 0;justify-content:start}
.ckp__facts div{display:flex;flex-direction:column}
.ckp__facts dt{font:500 10px 'JetBrains Mono',monospace;color:#5d7768;text-transform:uppercase;letter-spacing:.06em}
.ckp__facts dd{margin:0;font-weight:700;font-size:15px}
.ckp__quote{grid-column:1/-1;margin:12px 0 0;padding-top:12px;border-top:1px solid rgba(15,42,32,.15);font-size:14px;line-height:1.5;color:#33463c}
.ckp__hint{font:400 12px 'JetBrains Mono',monospace;color:rgba(238,243,232,.5);margin:14px 0 0}
@keyframes ckp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:820px){.ckp__in{grid-template-columns:1fr;padding:26px 16px;gap:16px}.ckp__h{margin-bottom:14px}.ckp__card{grid-template-columns:70px 1fr;padding:14px}.ckp__thumb{min-height:70px}.ckp__facts{grid-template-columns:repeat(3,auto);gap:4px 10px}}
@media(prefers-reduced-motion:reduce){.ckp__card{animation:none}}

// Werkgebied-kaart met projectpins · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ckp');if(!w)return;
var P=[
 ['Utrecht · Lombok','Bovenwoning met plat dak',[['Panelen','10'],['Vermogen','4,3 kWp'],['Per jaar','3.950 kWh']],'Plat dak met oost-west opstelling, geplaatst zonder boren in de dakbedekking.'],
 ['Amersfoort · Vathorst','Rijtjeshuis, hele zuidkant',[['Panelen','14'],['Vermogen','6,2 kWp'],['Per jaar','5.700 kWh']],'Met omvormer in de meterkast en monitoring via de app. Terugverdiend in ruim 6 jaar.'],
 ['Zeist · Kerckebosch','Vrijstaand huis met thuisbatterij',[['Panelen','22'],['Vermogen','9,7 kWp'],['Batterij','10 kWh']],'Laadpaal en batterij op hetzelfde systeem, zodat de auto overdag op de zon laadt.'],
 ['Houten · bedrijventerrein','Loods van een groothandel',[['Panelen','186'],['Vermogen','81 kWp'],['Per jaar','72.000 kWh']],'Geplaatst in drie zaterdagen, het bedrijf bleef doordraaien.'],
 ['Nieuwegein · Batau','Vereniging van eigenaren, 24 woningen',[['Panelen','64'],['Vermogen','28 kWp'],['Per jaar','25.400 kWh']],'Opbrengst gaat naar de gemeenschappelijke ruimtes en de lift.'],
 ['Woerden · centrum','Monumentaal pand, achterzijde',[['Panelen','8'],['Vermogen','3,4 kWp'],['Per jaar','2.900 kWh']],'Volledig zwarte panelen, vergunning met de gemeente samen geregeld.'],
 ['Maarssen · Zogwetering','Twee-onder-een-kap, oost-west',[['Panelen','16'],['Vermogen','7,0 kWp'],['Per jaar','6.100 kWh']],'Met optimizers per paneel vanwege de schaduw van de schoorsteen.'],
 ['Veenendaal · Dragonder','Basisschool De Esdoorn',[['Panelen','120'],['Vermogen','52 kWp'],['Per jaar','47.000 kWh']],'Met een scherm in de hal waarop de leerlingen de opbrengst live zien.']];
var pins=w.querySelectorAll('.ckp__pin'),card=w.querySelector('.ckp__card');
function show(i){var p=P[i];pins.forEach(function(b,j){b.classList.toggle('is-on',j===i);b.setAttribute('aria-pressed',j===i?'true':'false');});
 w.querySelector('.ckp__place').textContent=p[0];w.querySelector('.ckp__title').textContent=p[1];
 w.querySelector('.ckp__facts').innerHTML=p[2].map(function(f){return '<div><dt>'+f[0]+'</dt><dd>'+f[1]+'</dd></div>';}).join('');
 w.querySelector('.ckp__quote').textContent=p[3];card.style.animation='none';void card.offsetWidth;card.style.animation='';}
pins.forEach(function(b){b.setAttribute('aria-label','Project in '+b.textContent);b.addEventListener('click',function(){show(+b.getAttribute('data-i'));});});
show(0);
}
init(document.querySelector('.jouw-container'));