Cookie-onderbalk met instellingenlade Nieuw

<!-- Cookie-onderbalk met instellingenlade · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="cbl">
  <div class="cbl__page" aria-hidden="true">
    <div class="cbl__nav"><b>Hotel De Duinen</b><span>Kamers</span><span>Restaurant</span><span>Arrangementen</span><span class="cbl__book">Boek direct</span></div>
    <div class="cbl__hero"><span class="cbl__k">Zandvoort · 200 meter van zee</span><p class="cbl__t">Twee nachten met ontbijt vanaf € 189</p></div>
  </div>
  <div class="cbl__bar" role="region" aria-label="Cookiemelding">
    <p>We gebruiken cookies om de site te laten werken en, als je dat goed vindt, om bezoek te meten en advertenties af te stemmen.</p>
    <div class="cbl__acts">
      <button type="button" class="cbl__link" data-open>Instellingen</button>
      <button type="button" class="cbl__btn" data-act="none">Weigeren</button>
      <button type="button" class="cbl__btn" data-act="all">Accepteren</button>
    </div>
  </div>
  <div class="cbl__shade" data-close></div>
  <div class="cbl__drawer" role="dialog" aria-modal="true" aria-labelledby="cbl-h" aria-hidden="true">
    <div class="cbl__dh"><p id="cbl-h">Cookie-instellingen</p><button type="button" class="cbl__x" data-close aria-label="Sluiten">×</button></div>
    <div class="cbl__body">
      <div class="cbl__cat">
        <div class="cbl__ch"><b>Noodzakelijk</b><span class="cbl__always">Altijd aan</span></div>
        <p>Zorgen dat boeken en betalen werkt en dat je ingelogd blijft. Hiervoor is geen toestemming nodig.</p>
        <details><summary>3 cookies</summary><ul><li><code>PHPSESSID</code> sessie</li><li><code>booking_cart</code> 1 dag</li><li><code>cookie_keuze</code> 1 jaar</li></ul></details>
      </div>
      <div class="cbl__cat">
        <div class="cbl__ch"><b>Statistiek</b><label class="cbl__sw"><input type="checkbox" data-cat="statistiek"><span></span><i class="cbl__sr">Statistiek toestaan</i></label></div>
        <p>We zien welke pagina's bezocht worden, met ingekorte IP-adressen. Gegevens blijven in de EU.</p>
        <details><summary>2 cookies</summary><ul><li><code>_pk_id</code> 13 maanden</li><li><code>_pk_ses</code> 30 minuten</li></ul></details>
      </div>
      <div class="cbl__cat">
        <div class="cbl__ch"><b>Marketing</b><label class="cbl__sw"><input type="checkbox" data-cat="marketing"><span></span><i class="cbl__sr">Marketing toestaan</i></label></div>
        <p>Laat ons advertenties tonen op andere sites aan mensen die al naar een kamer keken.</p>
        <details><summary>2 cookies</summary><ul><li><code>_gcl_au</code> 3 maanden</li><li><code>_fbp</code> 3 maanden</li></ul></details>
      </div>
    </div>
    <div class="cbl__df"><button type="button" class="cbl__btn" data-act="save">Keuze opslaan</button><button type="button" class="cbl__btn" data-act="all">Alles accepteren</button></div>
  </div>
  <button type="button" class="cbl__reopen" hidden data-open>Cookies</button>
</div>
</div>

/* Cookie-onderbalk met instellingenlade · NedDev · eigen werk. */
.cbl{position:relative;width:100%;align-self:flex-start;flex:none;height:520px;background:#f6f1e7;color:#173042;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box}
.cbl *{box-sizing:border-box}
.cbl__page{position:absolute;inset:0;display:flex;flex-direction:column}
.cbl__nav{display:flex;align-items:center;gap:22px;padding:18px 32px;font-size:14px}
.cbl__nav b{font-family:Georgia,serif;font-size:21px;margin-right:12px}
.cbl__book{margin-left:auto;background:#173042;color:#fff;padding:9px 14px;border-radius:2px;font-weight:600}
.cbl__hero{flex:1;margin:0 32px 32px;border-radius:2px;padding:36px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:linear-gradient(180deg,#9cc3d8 0%,#cfe2ea 48%,#e9d7b4 48%,#dcc597 100%)}
.cbl__k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#173042}
.cbl__t{font-family:Georgia,serif;font-size:clamp(26px,3.6vw,44px);line-height:1.05;margin:8px 0 60px;color:#173042;max-width:16ch}
.cbl__bar{position:absolute;left:0;right:0;bottom:0;z-index:2;background:#173042;color:#fff;display:flex;align-items:center;gap:24px;padding:16px 32px;transition:transform .3s ease}
.cbl.is-done .cbl__bar{transform:translateY(110%);visibility:hidden}
.cbl__bar p{margin:0;font-size:14px;line-height:1.5;flex:1;color:rgba(255,255,255,.85)}
.cbl__acts{display:flex;align-items:center;gap:10px;flex:none}
.cbl__link{background:transparent;border:0;color:#fff;font:600 14px 'Switzer',sans-serif;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:10px 8px}
.cbl__btn{font:700 14px 'Switzer',sans-serif;background:#f6f1e7;color:#173042;border:1px solid #f6f1e7;border-radius:2px;padding:10px 20px;cursor:pointer;min-width:120px;transition:background .2s ease}
.cbl__btn:hover,.cbl__btn:focus-visible{background:#e6c98f;border-color:#e6c98f}
.cbl__shade{position:absolute;inset:0;z-index:3;background:rgba(23,48,66,.45);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.cbl__drawer{position:absolute;top:0;right:0;bottom:0;z-index:4;width:400px;max-width:100%;background:#fff;display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s}
.cbl.is-open .cbl__shade{opacity:1;visibility:visible;transition:opacity .3s ease}
.cbl.is-open .cbl__drawer{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.cbl__dh{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #ece4d4}
.cbl__dh p{margin:0;font-weight:800;font-size:17px}
.cbl__x{width:34px;height:34px;border:0;border-radius:50%;background:#f6f1e7;color:#173042;font-size:22px;line-height:1;cursor:pointer}
.cbl__body{flex:1;overflow:auto;padding:4px 20px}
.cbl__cat{padding:14px 0;border-bottom:1px solid #f0eadf}
.cbl__ch{display:flex;align-items:center;justify-content:space-between}
.cbl__ch b{font-size:15px}
.cbl__always{font-family:'JetBrains Mono',monospace;font-size:11px;color:#5d7a6a}
.cbl__cat p{font-size:13px;line-height:1.5;color:#4e6271;margin:6px 0 8px}
.cbl__cat summary{font-size:12px;font-weight:600;color:#173042;cursor:pointer}
.cbl__cat ul{margin:6px 0 0;padding-left:18px;font-size:12px;color:#4e6271;line-height:1.7}
.cbl__cat code{font-family:'JetBrains Mono',monospace;font-size:11px;background:#f6f1e7;padding:1px 5px;border-radius:2px}
.cbl__sw{position:relative;cursor:pointer}
.cbl__sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:inherit}
.cbl__sw span{display:block;width:40px;height:22px;border-radius:999px;background:#cdd4da;position:relative;transition:background .2s ease}
.cbl__sw span::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s ease}
.cbl__sw input:checked+span{background:#173042}
.cbl__sw input:checked+span::after{transform:translateX(18px)}
.cbl__sw input:focus-visible+span{outline:2px solid #e6c98f;outline-offset:2px}
.cbl__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cbl__df{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 20px;border-top:1px solid #ece4d4}
.cbl__df .cbl__btn{background:#173042;color:#fff;border-color:#173042;min-width:0}
.cbl__df .cbl__btn:hover{background:#245070}
.cbl__reopen{position:absolute;left:16px;bottom:16px;z-index:2;font:600 12px 'Switzer',sans-serif;background:#fff;color:#173042;border:1px solid #d8cdb8;border-radius:999px;padding:8px 12px;cursor:pointer}
@media(max-width:700px){
.cbl__nav span{display:none}.cbl__nav .cbl__book{display:inline}.cbl__nav{padding:12px 16px}
.cbl__hero{margin:0 16px 16px;padding:20px}
.cbl__bar{flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px}
.cbl__acts{display:grid;grid-template-columns:1fr 1fr}
.cbl__link{grid-column:1/-1;order:3;padding:4px}
.cbl__btn{min-width:0}}
@media(prefers-reduced-motion:reduce){.cbl__bar,.cbl__drawer,.cbl__shade,.cbl__sw span,.cbl__sw span::after{transition:none}}

// Cookie-onderbalk met instellingenlade · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.cbl');if(!w)return;
var dr=w.querySelector('.cbl__drawer'),re=w.querySelector('.cbl__reopen'),last=null;
var boxes=w.querySelectorAll('input[data-cat]');
function open(o,from){w.classList.toggle('is-open',o);dr.setAttribute('aria-hidden',o?'false':'true');
  if(o){last=from||null;setTimeout(function(){w.querySelector('.cbl__x').focus({preventScroll:true});},60);}
  else if(last&&last.offsetParent){last.focus({preventScroll:true});}}
function done(){open(false);w.classList.add('is-done');re.hidden=false;
  // Productie: sla de keuze op (cookie_keuze) en laad pas daarna statistiek/marketing-scripts.
}
w.querySelectorAll('[data-open]').forEach(function(b){b.addEventListener('click',function(){w.classList.remove('is-done');re.hidden=true;open(true,w.querySelector('.cbl__link'));});});
w.querySelectorAll('[data-close]').forEach(function(b){b.addEventListener('click',function(){open(false);});});
w.querySelectorAll('[data-act]').forEach(function(b){b.addEventListener('click',function(){
  var a=b.getAttribute('data-act');
  if(a==='all')boxes.forEach(function(x){x.checked=true;});
  if(a==='none')boxes.forEach(function(x){x.checked=false;});
  done();});});
w.addEventListener('keydown',function(e){if(e.key==='Escape'&&w.classList.contains('is-open'))open(false);});
}
init(document.querySelector('.jouw-container'));