Detailpagina met meelopende boekwidget Nieuw

<!-- Detailpagina met meelopende boekwidget · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bws"><div class="bws__wrap"><p class="bws__crumb">Hotel De Kade · Zwolle · Kamers</p><h2 class="bws__h">Grachtkamer met vrijstaand bad</h2><p class="bws__meta"><span class="bws__score">8,9</span> Uitstekend · 412 beoordelingen · 32 m&sup2; · 2 personen · uitzicht op de Thorbeckegracht</p><div class="bws__gal"><img src="https://neddev.com/lab-media/boek-widget-sticky-1.webp" alt="Grachtkamer met bakstenen muur, vrijstaand bad en groot stalen raam op de gracht" width="1200" height="655" loading="lazy"><img src="https://neddev.com/lab-media/boek-widget-sticky-2.webp" alt="Ontbijttafel bij het raam met brood, kaas en koffie" width="900" height="491" loading="lazy"><img src="https://neddev.com/lab-media/boek-widget-sticky-3.webp" alt="Het hotel, een oud pakhuis aan de gracht, in de avond" width="900" height="491" loading="lazy"></div><div class="bws__cols"><div class="bws__main"><div class="bws__sec"><h3>Over deze kamer</h3><p>De grachtkamers liggen op de tweede verdieping van het voormalige graanpakhuis uit 1868. Je slaapt onder de oude eikenhouten balken, met een stalen raam van vloer tot plafond en het bad op twee meter van het water. Bedden van 180 bij 210, linnen beddengoed en verduisterende gordijnen.</p></div><div class="bws__sec"><h3>Voorzieningen</h3><ul class="bws__am"><li>Vrijstaand bad en regendouche</li><li>Wifi tot 500 Mbit/s</li><li>Nespresso en verse thee</li><li>Kluisje voor een laptop</li><li>Airco en vloerverwarming</li><li>Fietsen te leen</li><li>Lift tot de kamer</li><li>Huisdieren niet toegestaan</li></ul></div><div class="bws__sec"><h3>Ontbijt</h3><p>Van 7:00 tot 10:30 in de voormalige laadruimte: brood van de bakker in de Diezerstraat, Overijsselse kaas, eieren zoals je ze wilt en koffie van een branderij uit Kampen. &euro;&nbsp;19,50 per persoon per nacht.</p></div><div class="bws__sec"><h3>Gasten over deze kamer</h3><div class="bws__rev"><p><b>9,4</b> &ldquo;Om zes uur in bad met uitzicht op de bootjes. Het personeel regelde nog een tafel bij het bistro om de hoek.&rdquo;<span>Marieke, Utrecht · september 2026</span></p><p><b>8,6</b> &ldquo;Mooie kamer, het raam is indrukwekkend. Op zaterdagnacht wat geluid van de kade tot een uur of één.&rdquo;<span>Joost, Groningen · augustus 2026</span></p><p><b>9,0</b> &ldquo;Ontbijt is echt goed. Fietsen lenen en naar de Sassenpoort, alles op vijf minuten.&rdquo;<span>Fatima, Rotterdam · augustus 2026</span></p></div></div><div class="bws__sec"><h3>Inchecken en vertrekken</h3><p>Inchecken vanaf 15:00, uitchecken tot 11:00. Late check-out tot 13:00 kan voor &euro;&nbsp;25. Parkeren in garage Katwolderplein op 400 meter, &euro;&nbsp;14 per dag.</p></div></div><div class="bws__aside"><form class="bws__w" novalidate><p class="bws__price"><b class="bws__pn">&euro;&nbsp;149</b> per nacht <span>doordeweeks, weekend &euro;&nbsp;169</span></p><div class="bws__dates"><label>Aankomst<input type="date" class="bws__a" required></label><label>Vertrek<input type="date" class="bws__v" required></label></div><label class="bws__gl">Gasten<select class="bws__g"><option value="1">1 volwassene</option><option value="2" selected>2 volwassenen</option></select></label><label class="bws__ck"><input type="checkbox" class="bws__ob" checked> Ontbijt <span>+&euro;&nbsp;19,50 p.p. per nacht</span></label><label class="bws__ck"><input type="checkbox" class="bws__lc"> Late check-out 13:00 <span>+&euro;&nbsp;25</span></label><p class="bws__err" role="alert"></p><dl class="bws__sum"></dl><button type="submit" class="bws__go">Reserveren</button><p class="bws__note"><svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="m3 8.5 3 3 7-7"/></svg>Gratis annuleren tot 2 dagen voor aankomst</p><p class="bws__hold" aria-live="polite"></p></form></div></div></div><div class="bws__bar"><p><b class="bws__bt"></b><span class="bws__bn"></span></p><button type="button" class="bws__bgo">Reserveren</button></div></div>
</div>

/* Detailpagina met meelopende boekwidget · NedDev · eigen werk. */
/* fonts (Fontshare): gambetta@500,600 */
.bws{--ink:#1d1a16;--mut:#5e574e;--acc:#8a2e1a;--paper:#faf7f2;--line:rgba(29,26,22,.14);background:var(--paper);color:var(--ink);font-family:'Switzer',system-ui,sans-serif;container-type:inline-size}
.bws__wrap{max-width:1180px;margin:0 auto;padding:32px 40px 56px}
.bws__crumb{margin:0 0 8px;font:500 11px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--mut)}
.bws__h{margin:0;font-family:'Gambetta',Georgia,serif;font-weight:600;font-size:40px;line-height:1.05;letter-spacing:-.01em}
.bws__meta{margin:10px 0 18px;font-size:14px;color:var(--mut)}
.bws__score{display:inline-block;margin-right:4px;padding:1px 6px;border-radius:3px;background:var(--ink);color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.bws__gal{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:6px;height:360px;border-radius:6px;overflow:hidden}
.bws__gal img{width:100%;height:100%;object-fit:cover;display:block}
.bws__gal img:first-child{grid-row:1/3}
.bws__cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;margin-top:32px;align-items:start}
.bws__sec{padding:0 0 26px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.bws__sec:last-child{border-bottom:0}
.bws__sec h3{margin:0 0 10px;font-family:'Gambetta',Georgia,serif;font-weight:600;font-size:22px}
.bws__sec p{margin:0;font-size:15px;line-height:1.65;color:var(--mut);max-width:62ch}
.bws__am{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin:0;padding:0;list-style:none;font-size:14.5px}
.bws__am li{padding-left:16px;position:relative}
.bws__am li::before{content:'';position:absolute;left:0;top:.6em;width:7px;height:1.5px;background:var(--acc)}
.bws__rev{display:grid;gap:14px}
.bws__rev p{color:var(--ink)}
.bws__rev b{display:inline-block;min-width:34px;margin-right:6px;padding:1px 5px;border:1px solid var(--ink);border-radius:3px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
.bws__rev span{display:block;margin-top:3px;font-size:12.5px;color:var(--mut)}
.bws__aside{position:sticky;top:16px}
.bws__w{margin:0;padding:20px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 18px 40px -28px rgba(29,26,22,.45)}
.bws__price{margin:0 0 14px;font-size:14px;color:var(--mut)}
.bws__price b{font-family:'Gambetta',Georgia,serif;font-size:28px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.bws__price span{display:block;font-size:12.5px}
.bws__dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid rgba(29,26,22,.3);border-radius:6px 6px 0 0}
.bws__dates label,.bws__gl{display:block;padding:7px 10px;font:600 10px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.bws__dates label+label{border-left:1px solid rgba(29,26,22,.3)}
.bws__gl{border:1px solid rgba(29,26,22,.3);border-top:0;border-radius:0 0 6px 6px;margin-bottom:12px}
.bws__dates input,.bws__g{display:block;width:100%;min-width:0;box-sizing:border-box;margin-top:2px;padding:0;border:0;background:none;font:500 14px 'Switzer',system-ui,sans-serif;color:var(--ink);font-variant-numeric:tabular-nums;outline:none}
.bws__dates label:focus-within,.bws__gl:focus-within{box-shadow:inset 0 0 0 2px var(--ink);border-radius:5px}
.bws__w.is-err .bws__v{color:#b42318}
.bws__ck{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14px;cursor:pointer}
.bws__ck input{width:16px;height:16px;margin:0;accent-color:var(--ink)}
.bws__ck input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.bws__ck span{margin-left:auto;font-size:12.5px;color:var(--mut)}
.bws__err{margin:0;font-size:13px;color:#b42318;min-height:0}
.bws__err:not(:empty){margin:6px 0 8px}
.bws__sum{margin:12px 0 14px;padding:12px 0 0;border-top:1px solid var(--line);font-size:14px}
.bws__sum div{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.bws__sum dt{color:var(--mut)}
.bws__sum dd{margin:0;font-variant-numeric:tabular-nums}
.bws__sum .bws__tot{margin-top:6px;padding-top:9px;border-top:1px solid var(--line);font-weight:700;font-size:16px}
.bws__sum .bws__tot dt{color:var(--ink)}
.bws__go,.bws__bgo{width:100%;height:46px;border:0;border-radius:6px;background:var(--acc);color:#fff;font:600 15px 'Switzer',system-ui,sans-serif;cursor:pointer;transition:background-color .15s}
.bws__go:hover,.bws__bgo:hover{background:var(--ink)}
.bws__go:active,.bws__bgo:active{transform:translateY(1px)}
.bws__go:focus-visible,.bws__bgo:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.bws__go:disabled{opacity:.5;cursor:not-allowed}
.bws__note{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:12.5px;color:#2f6b3f}
.bws__hold{margin:8px 0 0;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.bws__hold:empty{display:none}
.bws__hold{padding:8px 10px;border-radius:4px;background:#fbeee9;color:var(--acc)}
.bws__bar{display:none}
@container (max-width:860px){.bws__wrap{padding:22px 16px 28px}.bws__h{font-size:28px}.bws__gal{grid-template-columns:1fr;grid-template-rows:none;height:auto}.bws__gal img{aspect-ratio:16/10;height:auto}.bws__gal img:nth-child(n+2){display:none}.bws__cols{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:22px}.bws__am{grid-template-columns:1fr}.bws__aside{position:static}.bws__w{scroll-margin-top:12px}
.bws__bar{display:flex;align-items:center;gap:12px;position:sticky;bottom:0;padding:10px 16px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 20px -16px rgba(29,26,22,.5);z-index:2}.bws__bar p{flex:1;margin:0;font-size:12.5px;color:var(--mut);line-height:1.3}.bws__bar b{display:block;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}.bws__bgo{width:auto;padding:0 20px;height:42px}}
@supports not (container-type:inline-size){@media (max-width:860px){.bws__cols{grid-template-columns:1fr}.bws__aside{position:static}.bws__gal{grid-template-columns:1fr;height:auto}}}
@media (prefers-reduced-motion:reduce){.bws *{transition:none!important}}

// Detailpagina met meelopende boekwidget · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.bws');if(!w)return;
var f=w.querySelector('.bws__w'),a=w.querySelector('.bws__a'),v=w.querySelector('.bws__v'),g=w.querySelector('.bws__g'),ob=w.querySelector('.bws__ob'),lc=w.querySelector('.bws__lc'),sum=w.querySelector('.bws__sum'),err=w.querySelector('.bws__err'),hold=w.querySelector('.bws__hold'),bt=w.querySelector('.bws__bt'),bn=w.querySelector('.bws__bn');
var WD=149,WE=169,BF=19.5,LC=25,TAX=3.25,timer=null;
function iso(d){return d.getFullYear()+'-'+('0'+(d.getMonth()+1)).slice(-2)+'-'+('0'+d.getDate()).slice(-2)}
function parse(s){var p=(s||'').split('-');return p.length===3?new Date(+p[0],+p[1]-1,+p[2]):null}
function eur(n){return '\u20ac\u00a0'+n.toLocaleString('nl-NL',{minimumFractionDigits:n%1?2:0,maximumFractionDigits:2})}
var T=new Date();T.setHours(0,0,0,0);var s0=new Date(T);s0.setDate(s0.getDate()+((5-s0.getDay()+7)%7||7));var e0=new Date(s0);e0.setDate(e0.getDate()+2);
a.min=iso(T);a.value=iso(s0);v.value=iso(e0);v.min=iso(new Date(s0.getTime()+864e5));
function calc(){var A=parse(a.value),V=parse(v.value),ppl=+g.value;err.textContent='';f.classList.remove('is-err');
  if(!A||!V){err.textContent='Vul je aankomst- en vertrekdatum in.';f.classList.add('is-err');return null}
  if(A<T){err.textContent='Aankomst ligt in het verleden.';f.classList.add('is-err');return null}
  if(V<=A){err.textContent='Vertrek moet na aankomst liggen.';f.classList.add('is-err');return null}
  var n=0,room=0,we=0;for(var d=new Date(A);d<V;d.setDate(d.getDate()+1)){n++;var r=(d.getDay()===5||d.getDay()===6)?WE:WD;room+=r;if(r===WE)we++}
  if(n>14){err.textContent='Online boek je maximaal 14 nachten. Bel ons voor een langer verblijf.';f.classList.add('is-err');return null}
  return {n:n,room:room,we:we,bf:ob.checked?BF*ppl*n:0,lc:lc.checked?LC:0,tax:TAX*ppl*n,ppl:ppl}}
function render(){var c=calc();v.min=a.value?iso(new Date(parse(a.value).getTime()+864e5)):'';
  if(!c){sum.innerHTML='';bt.textContent='Kies je datums';bn.textContent='';return}
  var tot=c.room+c.bf+c.lc+c.tax,rows=[[c.n+(c.n===1?' nacht':' nachten')+(c.we?' ('+c.we+' weekend)':''),c.room]];
  if(c.bf)rows.push(['Ontbijt, '+c.ppl+' p.',c.bf]);if(c.lc)rows.push(['Late check-out',c.lc]);rows.push(['Toeristenbelasting',c.tax]);
  sum.innerHTML=rows.map(function(r){return '<div><dt>'+r[0]+'</dt><dd>'+eur(r[1])+'</dd></div>'}).join('')+'<div class="bws__tot"><dt>Totaal</dt><dd>'+eur(tot)+'</dd></div>';
  bt.textContent=eur(tot);bn.textContent=c.n+(c.n===1?' nacht':' nachten')+', '+c.ppl+(c.ppl===1?' gast':' gasten')+', incl. belasting'}
[a,v,g,ob,lc].forEach(function(el){el.addEventListener('change',render);el.addEventListener('input',render)});
f.addEventListener('submit',function(e){e.preventDefault();var c=calc();if(!c){(f.classList.contains('is-err')?v:a).focus();return}
  clearInterval(timer);var left=900,go=w.querySelector('.bws__go');go.textContent='Naar gegevens en betalen';
  function tick(){hold.textContent='We houden de kamer voor je vast: nog '+(left/60|0)+':'+('0'+left%60).slice(-2)+' minuten';if(left--<=0){clearInterval(timer);hold.textContent='De kamer is weer vrijgegeven. Klik op Reserveren om opnieuw te proberen.';go.textContent='Reserveren'}}
  tick();timer=setInterval(tick,1000)});
w.querySelector('.bws__bgo').addEventListener('click',function(){f.scrollIntoView({block:'start',behavior:matchMedia('(prefers-reduced-motion:reduce)').matches?'auto':'smooth'});a.focus({preventScroll:true})});
render();
}
init(document.querySelector('.jouw-container'));