:root{
  --bg:#f6efe7; --paper:#fff9f2; --ink:#2c211b; --accent:#7a1f24; --gold:#d6b253; --muted:#85766a; --line:#eadbcc; --green:#1c8a56; --red:#9f1e2a; --amber:#a87100;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: Inter, system-ui, Segoe UI, Roboto, sans-serif; color:var(--ink); background:linear-gradient(180deg,#fbf5ee, var(--bg));}
.topbar{display:flex; justify-content:space-between; align-items:flex-end; padding:.75rem 1.2rem; border-bottom:2px solid var(--line)}
.brand{font-family: Fraunces, Georgia, serif; font-size:2.15rem; color:var(--accent); font-weight:700}
.tabs{display:flex; gap:1rem; flex-wrap:wrap}
.tab{background:none; border:none; font:600 1rem Inter, sans-serif; color:var(--accent); padding:.5rem .25rem; border-bottom:3px solid transparent; cursor:pointer}
.tab.active{border-color:var(--gold)}

.page{display:grid; grid-template-columns: 360px 1fr; gap:16px; padding:14px; align-items:start}
.panel{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:1rem}
.elevate{box-shadow:0 12px 24px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.05)}

.opening h2{font-family: Fraunces, Georgia, serif; color:var(--accent); margin:.2rem 0 .4rem 0}
.opening .lead{color:var(--muted); margin:.2rem 0 .4rem 0}
.opening .hours{font-family: Fraunces, Georgia, serif; font-weight:600; font-size:1.8rem}
.opening .hours .sep{opacity:.6; padding:0 .4rem}
.opening .crowd{margin-top:.4rem; font-weight:600}
.opening .dot{display:inline-block; width:.6rem; height:.6rem; border-radius:50%; background:#bbb; margin-right:.4rem}
.opening .updated{color:var(--muted); font-size:.9rem; margin-top:.25rem}

.search-row{display:flex; gap:.6rem; align-items:center; justify-content:space-between; border-top:1px dashed var(--line); padding-top:.7rem; margin-top:.7rem; min-width:0}
#q{flex:1; padding:.6rem .7rem; border:1px solid var(--line); border-radius:10px; background:#fff; min-width:0}
.chk{font-size:.95rem; color:var(--muted)}

.columns{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
@media (max-width: 1280px){ .columns{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 960px){
  .page{grid-template-columns:1fr}
  .columns{grid-template-columns:1fr}
}

.column{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:.75rem; min-width:0}
.column h3{font-family: Fraunces, Georgia, serif; margin:.1rem .2rem .6rem .2rem; color:var(--accent); font-size:1.15rem}
.subhead{font-weight:700; color:#5a4339; margin:.25rem 0 .25rem .25rem; font-size:.92rem; opacity:.85}
.list{list-style:none; margin:0; padding:0}

.item{display:flex; justify-content:space-between; align-items:center; padding:.44rem .55rem; border-radius:10px; border:1px solid transparent; transition:background .15s ease; cursor:pointer; gap:.5rem; min-width:0}
.item:hover{background:#fff}
.name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; min-width:0}
.badges{display:flex; gap:.3rem; flex-wrap:wrap; max-width:60%}

/* Compacte tegels op mobiel */
/* @media (max-width: 640px){
  .list{display:grid; grid-template-columns:repeat(2, minmax(140px, 1fr)); gap:8px}
  .item{display:block; border:1px solid var(--line); border-radius:12px; padding:.55rem; background:#fff}
  .name{white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
  .badges{margin-top:.4rem; justify-content:flex-start; max-width:100%}
} */

.badge{font-size:.72rem; border-radius:999px; padding:.18rem .55rem; border:1px solid #ddd; color:#3f3f3f; background:#eee; flex:0 0 auto}
.badge.wait{background:#f1f7ff; border-color:#cfe2ff; font-weight:700}
.badge.open{background:#e7f6ef; color:var(--green); border-color:#c5eadb}
.badge.closed{background:#fde9ec; color:var(--red); border-color:#f5c2cb}
.badge.maint{background:#fff4e0; color:var(--amber); border-color:#f0d79a}
.badge.outage{background:#fde9ec; color:var(--red); border-color:#f5c2cb}
.badge.vq{background:#efe7ff; border-color:#d9c6ff}

.badge.toi-calm{background:#e7f6ef; color:var(--green); border-color:#c5eadb}
.badge.toi-normal{background:#f2f2f2; color:#555; border-color:#e2e2e2}
.badge.toi-gesloten{background:#fde9ec; color:var(--red); border-color:#f5c2cb}

.hidden{display:none}

.modal{position:fixed; inset:0; display:none}
.modal[aria-hidden="false"]{display:block}
.modal .overlay{position:absolute; inset:0; background:rgba(0,0,0,.35)}
.modal .dialog{position:absolute; top:6vh; left:50%; transform:translateX(-50%); width:min(920px, 96vw); max-height:88vh; overflow:auto; background:#fffefb; border-radius:16px; border:1px solid var(--line); box-shadow:0 20px 40px rgba(0,0,0,.25); padding:1rem 1.1rem}
.modal .dialog h2{font-family: Fraunces, Georgia, serif; margin:.2rem 0 .6rem 0; color:var(--accent)}
.modal .close{position:absolute; top:.45rem; right:.55rem; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:#fff; font-size:1.3rem; cursor:pointer}
.dlg-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px}
@media (max-width: 860px){ .dlg-grid{grid-template-columns:1fr} }
.dlg-section{background:#fff; border:1px solid var(--line); border-radius:12px; padding:.7rem; margin-bottom: .5rem;}
.dlg-section h3{margin:.1rem 0 .4rem 0; color:var(--accent); font-size:1.05rem}
.kv{display:grid; grid-template-columns: 180px 1fr; gap:6px; font-size:.96rem}
#map{height:360px; border-radius:10px; border:1px solid var(--line)}
.busy-rustig{background:#9bd1b0 !important}
.busy-druk{background:#ffd27d !important}
.busy-ergdruk{background:#ffa3a3 !important}

.topbar{align-items:center}
.brand{display:flex; align-items:center; gap:.4rem; margin-right: .7em;}
.logo-wis{font:800 2rem/1 Inter, system-ui, Segoe UI, Roboto, sans-serif; color:#5a5a5a; letter-spacing:.02em}
.logo-tag{display:inline-block; padding:.06rem .34rem; border-radius:4px; background:#5e5e5e; color:#fff; font:700 .62rem/1 Inter, system-ui, Segoe UI, Roboto, sans-serif; text-transform:lowercase; opacity:.95}
@media (min-width: 900px){ .logo-wis{font-size:2rem} .logo-tag{font-size:.68rem; padding:.08rem .4rem} }


@media (min-width: 960px) {
  .tabs { display: flex; gap: 1rem; flex-wrap: wrap; }
}
@media (max-width: 959.98px) {
  .topbar { display: inline; }
  .tabs { list-style: none; margin: 0; margin-left: 1em; margin-right: 1em; padding: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
  .tab {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .7rem .8rem;
    background: #fff;
    text-align: center;
  }
  .brand { display:none }
}