Openingstijden met feestdagen New

<!-- Openingstijden met feestdagen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="xot">
  <div class="xot__inner">
    <div class="xot__main">
      <span class="xot__eyebrow">Bakkerij Hoogendoorn · Gouda</span>
      <h2 class="xot__h">Openingstijden</h2>
      <p class="xot__status"><i></i><span>Open</span></p>
      <table class="xot__table">
        <tbody>
          <tr data-d="1"><th>Maandag</th><td>8:00 tot 18:00</td></tr>
          <tr data-d="2"><th>Dinsdag</th><td>7:30 tot 18:00</td></tr>
          <tr data-d="3"><th>Woensdag</th><td>7:30 tot 18:00</td></tr>
          <tr data-d="4"><th>Donderdag</th><td>7:30 tot 18:00</td></tr>
          <tr data-d="5"><th>Vrijdag</th><td>7:30 tot 19:00</td></tr>
          <tr data-d="6"><th>Zaterdag</th><td>7:00 tot 17:00</td></tr>
          <tr data-d="0"><th>Zondag</th><td>gesloten</td></tr>
        </tbody>
      </table>
    </div>
    <div class="xot__side">
      <h3 class="xot__sh">Afwijkende tijden</h3>
      <ul class="xot__hol" aria-live="polite">
        <li><span class="xot__hd"><b>24</b>dec</span><span class="xot__hn">Kerstavond<small>Kerstbrood bestellen tot 20 december</small></span><span class="xot__ht">7:00 tot 16:00</span></li>
        <li><span class="xot__hd"><b>25</b>dec</span><span class="xot__hn">Eerste Kerstdag</span><span class="xot__ht is-closed">gesloten</span></li>
        <li><span class="xot__hd"><b>26</b>dec</span><span class="xot__hn">Tweede Kerstdag<small>alleen afhalen van bestellingen</small></span><span class="xot__ht">9:00 tot 12:00</span></li>
        <li><span class="xot__hd"><b>31</b>dec</span><span class="xot__hn">Oudejaarsdag<small>oliebollen vanaf 6:00</small></span><span class="xot__ht">6:00 tot 16:00</span></li>
      </ul>
      <p class="xot__addr">Markt 12, Gouda · 0182 123 456</p>
    </div>
  </div>
</div>
</div>

/* Openingstijden met feestdagen · NedDev · eigen werk. */
.xot{background:#f7efe4;color:#3f2a1e;font-family:'Switzer',sans-serif;box-sizing:border-box}
.xot *{box-sizing:border-box}
.xot__inner{max-width:1040px;margin:0 auto;padding:46px 32px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.xot__eyebrow{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#b06a2a;margin-bottom:10px}
.xot__h{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:clamp(30px,3.6vw,40px);line-height:1;margin:0 0 14px}
.xot__status{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;font-size:14px;font-weight:600;background:#fff;padding:7px 13px 7px 11px;border-radius:999px}
.xot__status i{width:9px;height:9px;border-radius:50%;background:#2f9e5a;box-shadow:0 0 0 3px rgba(47,158,90,.2)}
.xot__status.is-closed i{background:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.18)}
.xot__table{width:100%;border-collapse:collapse;font-size:15px}
.xot__table th,.xot__table td{padding:9px 12px;text-align:left;border-bottom:1px solid rgba(63,42,30,.14)}
.xot__table th{font-weight:500}
.xot__table td{text-align:right;font-variant-numeric:tabular-nums;color:#6b5546}
.xot__table tr.is-today{background:#3f2a1e}
.xot__table tr.is-today th,.xot__table tr.is-today td{color:#fff;font-weight:700;border-bottom-color:#3f2a1e}
.xot__table tr.is-today th::after{content:'vandaag';margin-left:10px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;background:#d98c3f;color:#3f2a1e;padding:2px 6px;border-radius:3px;vertical-align:2px}
.xot__table tr.is-alt td{text-decoration:line-through;opacity:.6}
.xot__side{background:#fff;border-radius:6px;padding:24px;border:1px solid rgba(63,42,30,.1)}
.xot__sh{margin:0 0 12px;font-size:16px;font-weight:700}
.xot__hol{list-style:none;margin:0;padding:0}
.xot__hol li{display:grid;grid-template-columns:50px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid rgba(63,42,30,.1)}
.xot__hol li:last-child{border-bottom:0}
.xot__hd{text-align:center;background:#f7efe4;border-radius:4px;padding:5px 0;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;color:#8a6c57;line-height:1.1}
.xot__hd b{display:block;font-family:'Switzer',sans-serif;font-size:19px;color:#3f2a1e}
.xot__hn{font-size:14.5px;font-weight:600}
.xot__hn small{display:block;font-weight:400;font-size:12.5px;color:#8a6c57;margin-top:2px}
.xot__ht{font-size:13.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.xot__ht.is-closed{color:#c0392b}
.xot__hol li.is-soon{position:relative}
.xot__hol li.is-soon .xot__hd{background:#d98c3f;color:#3f2a1e}
.xot__addr{margin:14px 0 0;padding-top:12px;border-top:1px dashed rgba(63,42,30,.2);font-size:13px;color:#8a6c57}
@media(max-width:820px){.xot__inner{grid-template-columns:minmax(0,1fr);padding:30px 16px;gap:22px}.xot__side{padding:16px}.xot__hol li{grid-template-columns:44px 1fr;}.xot__ht{grid-column:2}}

// Openingstijden met feestdagen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.xot');if(!w)return;
var H={0:null,1:[8,18],2:[7.5,18],3:[7.5,18],4:[7.5,18],5:[7.5,19],6:[7,17]};
var F=[
 {d:'2026-12-24',n:'Kerstavond',s:'Kerstbrood bestellen tot 20 december',h:[7,16]},
 {d:'2026-12-25',n:'Eerste Kerstdag',h:null},
 {d:'2026-12-26',n:'Tweede Kerstdag',s:'alleen afhalen van bestellingen',h:[9,12]},
 {d:'2026-12-31',n:'Oudejaarsdag',s:'oliebollen vanaf 6:00',h:[6,16]},
 {d:'2027-01-01',n:'Nieuwjaarsdag',h:null},
 {d:'2027-03-29',n:'Tweede Paasdag',h:null},
 {d:'2027-04-27',n:'Koningsdag',s:'tompoucen vanaf 7:00',h:[8,14]},
 {d:'2027-05-06',n:'Hemelvaartsdag',h:[9,13]},
 {d:'2027-05-17',n:'Tweede Pinksterdag',h:null},
 {d:'2027-12-25',n:'Eerste Kerstdag',h:null}
];
var M=['jan','feb','mrt','apr','mei','jun','jul','aug','sep','okt','nov','dec'];
function t(x){var h=Math.floor(x),m=Math.round((x-h)*60);return h+':'+(m<10?'0':'')+m;}
function rng(h){return h?t(h[0])+' tot '+t(h[1]):'gesloten';}
function key(d){return d.getFullYear()+'-'+('0'+(d.getMonth()+1)).slice(-2)+'-'+('0'+d.getDate()).slice(-2);}
var now=new Date(),today=key(now),dow=now.getDay(),hr=now.getHours()+now.getMinutes()/60;
var fx=F.filter(function(f){return f.d===today;})[0];
var row=w.querySelector('tr[data-d="'+dow+'"]');if(row){row.classList.add('is-today');if(fx){row.classList.add('is-alt');}}
var todayH=fx?fx.h:H[dow],st=w.querySelector('.xot__status'),lab=st.querySelector('span');
if(todayH&&hr>=todayH[0]&&hr<todayH[1]){lab.textContent='Nu open, sluit om '+t(todayH[1])+(fx?' ('+fx.n+')':'');st.classList.remove('is-closed');}
else{st.classList.add('is-closed');var nd=null,nt='';
  if(todayH&&hr<todayH[0]){nd='vandaag';nt=t(todayH[0]);}
  else{for(var i=1;i<8;i++){var d=new Date(now.getTime()+i*864e5),f2=F.filter(function(f){return f.d===key(d);})[0],h2=f2?f2.h:H[d.getDay()];if(h2){nd=i===1?'morgen':['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag'][d.getDay()];nt=t(h2[0]);break;}}}
  lab.textContent='Nu gesloten'+(nd?', '+nd+' weer open om '+nt:'');}
var up=F.filter(function(f){return f.d>=today;}).slice(0,4);
if(up.length){w.querySelector('.xot__hol').innerHTML=up.map(function(f){var p=f.d.split('-'),dd=new Date(+p[0],+p[1]-1,+p[2]),days=Math.round((dd-new Date(now.getFullYear(),now.getMonth(),now.getDate()))/864e5);
  var soon=days<=14,extra=days===0?'vandaag':days===1?'morgen':'over '+days+' dagen';
  return '<li'+(soon?' class="is-soon"':'')+'><span class="xot__hd"><b>'+(+p[2])+'</b>'+M[+p[1]-1]+'</span><span class="xot__hn">'+f.n+'<small>'+(f.s?f.s+' · ':'')+extra+'</small></span><span class="xot__ht'+(f.h?'':' is-closed')+'">'+rng(f.h)+'</span></li>';}).join('');}
}
init(document.querySelector('.jouw-container'));