/* Staybello — ontwerpsysteem + componenten.
   Bewust zonder webfonts: de systeem-stack rendert direct (0 KB, geen CLS, geen FOUT). */

:root{
  --ink:#12283F; --ink2:#3B4F66; --muted:#7A8899; --faint:#9AA7B4;
  --line:#E6E1D8; --line2:#F0ECE4;
  --bg:#F8F6F2; --card:#fff; --sand:#F3EFE8;
  --brand:#0F5C7A; --brand-d:#0A4359; --brand-l:#EAF3F6;
  --cta:#EE5A45; --cta-d:#D8452F;
  --gold:#F2A33C; --green:#17805F; --green-l:#E8F5F0;
  --r:14px; --r-s:10px; --r-l:20px;
  --sh:0 1px 2px rgba(18,40,63,.06),0 4px 16px rgba(18,40,63,.06);
  --sh-l:0 6px 28px rgba(18,40,63,.13);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --head:1.5rem; --maxw:1560px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Vangnet tegen horizontaal slepen: overflow-x:clip en niet hidden, want hidden maakt van
   body een scrollcontainer en breekt daarmee elke position:sticky in de pagina (de kaart, de
   filterkolom, de kop en de samenvatting in de kassa hangen daaraan). */
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink2);font:15px/1.55 var(--sans);
     -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ink);margin:0 0 .5em;line-height:1.2;font-weight:700;letter-spacing:-.015em}
h1{font-size:clamp(28px,4vw,44px)}
h2{font-size:clamp(22px,2.6vw,30px)}
h3{font-size:19px}
p{margin:0 0 1em}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.wrap-n{max-width:1160px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hide{display:none!important}

/* ---------- knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  border-radius:var(--r-s);padding:11px 18px;font-weight:650;font-size:15px;line-height:1.2;
  background:var(--cta);color:#fff;transition:background .15s,box-shadow .15s,border-color .15s;white-space:nowrap}
.btn:hover{background:var(--cta-d);text-decoration:none;color:#fff}
.btn-o{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-o:hover{background:var(--sand);color:var(--ink);border-color:#D9D2C6}
.btn-b{background:var(--brand)}
.btn-b:hover{background:var(--brand-d)}
.btn-g{background:transparent;color:var(--brand);padding:8px 12px}
.btn-g:hover{background:var(--brand-l)}
.btn-s{padding:8px 14px;font-size:14px}
.btn-lg{padding:15px 28px;font-size:16px;border-radius:12px}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- kop / navigatie ---------- */
.hd{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.hd-in{display:flex;align-items:center;gap:18px;height:62px;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.logo{display:flex;align-items:center;gap:9px;font:700 21px/1 var(--sans);color:var(--ink);letter-spacing:-.03em;flex:none}
.logo:hover{text-decoration:none}
.logo b{font-weight:800}
.logo .lo-b{color:var(--brand)}
.logo svg{flex:none}
#sbar{flex:1 1 auto;min-width:0;max-width:820px}
.hd-nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.hd-nav a{color:var(--ink2);padding:8px 12px;border-radius:8px;font-weight:550;font-size:14.5px}
.hd-nav a:hover{background:var(--sand);text-decoration:none}
.selw{position:relative;display:inline-flex;align-items:center}
.selw select{appearance:none;background:transparent;border:1px solid var(--line);border-radius:8px;
  padding:8px 30px 8px 11px;font-size:14px;font-weight:550;color:var(--ink2);cursor:pointer}
.selw select:hover{background:var(--sand)}
.selw::after{content:"";position:absolute;right:11px;pointer-events:none;width:8px;height:8px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-2px) rotate(45deg)}
@media(max-width:860px){.hd-nav .nav-hide{display:none}}

/* ---------- zoekbalk ---------- */
.sb{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh);overflow:visible;position:relative}
.sb-f{background:#fff;position:relative;flex:1;min-width:0;padding:9px 14px;display:flex;flex-direction:column;justify-content:center}
.sb-f:first-child{border-radius:13px 0 0 13px}
.sb-f label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.sb-f input,.sb-f .sb-val{border:0;background:transparent;padding:0;width:100%;font-size:15px;font-weight:600;color:var(--ink);
  outline:none;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-f input::placeholder{color:var(--faint);font-weight:500}
/* Kruisje om de bestemming te wissen. Alleen zichtbaar als er iets staat (het `hidden`-attribuut
   doet dat); de ruimte ernaast is altijd gereserveerd zodat de tekst niet verspringt. */
.sb-f[data-f="dest"] input{padding-right:26px}
.sb-x{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:99px;padding:0;
  background:var(--sand);color:var(--muted);cursor:pointer}
.sb-x:hover{background:var(--line);color:var(--ink)}
.sb-go{flex:none;border-radius:0 13px 13px 0;padding:0 26px;background:var(--cta);color:#fff;border:0;font-weight:700;font-size:16px}
.sb-go:hover{background:var(--cta-d)}
.sb-dt{max-width:150px}
.sb-gs{max-width:190px}
/* Pas onder 720px in tweeen breken. Bleef dit op 900px staan, dan werd de zoekbalk op een
   tablet in portret vier regels hoog — en omdat de kop PLAKT, hield die 300px bovenaan het
   scherm bezet tijdens het scrollen. In een rij is hij tot ~720px prima leesbaar. */
@media(max-width:719px){
  .sb{flex-wrap:wrap;border-radius:14px}
  .sb-f{flex:1 1 46%;min-width:46%;border-radius:0!important}
  .sb-f:first-child{flex:1 1 100%;min-width:100%;border-radius:13px 13px 0 0!important}
  .sb-go{flex:1 1 100%;border-radius:0 0 13px 13px;padding:14px}
  .sb-dt,.sb-gs{max-width:none}
}
/* autocomplete */
.ac{position:absolute;top:calc(100% + 6px);left:0;min-width:340px;max-width:min(460px,92vw);background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-l);z-index:70;padding:5px;
  max-height:min(70vh,460px);overflow-y:auto}
.ac-i{display:flex;gap:11px;align-items:center;padding:9px 11px;border-radius:8px;cursor:pointer}
.ac-i:hover,.ac-i.on{background:var(--brand-l)}
.ac-ic{width:32px;height:32px;border-radius:8px;background:var(--sand);display:grid;place-items:center;flex:none;color:var(--brand)}
.ac-t{font-weight:650;color:var(--ink);font-size:14.5px}
.ac-s{font-size:12.5px;color:var(--muted)}
.ac-h{padding:9px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
/* popovers (gasten / datums) */
.pop{position:absolute;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-l);z-index:70;padding:16px;min-width:300px}
.pop-r{right:0}
.gr{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line2)}
.gr:last-of-type{border-bottom:0}
.gr b{display:block;color:var(--ink);font-size:14.5px}
.gr span{font-size:12.5px;color:var(--muted)}
.stp{display:flex;align-items:center;gap:12px}
.stp button{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--brand);
  font-size:19px;line-height:1;display:grid;place-items:center;font-weight:600}
.stp button:hover:not([disabled]){border-color:var(--brand);background:var(--brand-l)}
.stp button[disabled]{opacity:.35;cursor:default}
.stp i{font-style:normal;min-width:22px;text-align:center;font-weight:700;color:var(--ink)}

/* ---------- zoekresultaten-layout ---------- */
.res{display:grid;gap:20px;max-width:var(--maxw);margin:0 auto;padding:18px 20px 60px;
  grid-template-columns:272px minmax(0,1fr) minmax(0,.85fr)}
.res.view-list{grid-template-columns:272px minmax(0,1fr)}
.res.view-list .col-map{display:none}
/* Kaartweergave is ALLEEN de kaart. Er stond een smalle lijstkolom naast, en die knelde de
   hotelkaartjes zo ver in dat elk woord op een eigen regel kwam. Wil je lijst en kaart samen,
   dan is dat "Gesplitst" — daar is die knop voor. */
.res.view-map{grid-template-columns:minmax(0,1fr)}
.res.view-map .col-filt{display:none}
/* De hotelkaartjes gaan weg, maar de balk met het aantal, de sortering en de knoppen
   Lijst/Gesplitst/Kaart MOET blijven staan — die zit namelijk in deze kolom, en zonder haar is
   er geen weg terug uit de kaart. */
.res.view-map .col-list{display:block;position:static;max-height:none;overflow:visible}
.res.view-map .col-list > *:not(.rhead):not(.chips){display:none}
.res.view-map .col-map{height:calc(100vh - 190px)}
@media(max-width:1240px){
  .res,.res.view-list,.res.view-split{grid-template-columns:248px minmax(0,1fr)}
  .res.view-split .col-map{display:none}
  .res.view-map{grid-template-columns:minmax(0,1fr)}
  .res.view-map .col-list{display:none}
}
@media(max-width:900px){
  .res,.res.view-list,.res.view-split,.res.view-map{grid-template-columns:minmax(0,1fr);padding:12px 14px 90px}
  .col-filt{display:none}
  .col-filt.open{display:block;position:fixed;inset:0;z-index:90;background:#fff;overflow:auto;padding:0;
    max-height:none;top:0}
  .res.view-list .col-map,.res.view-split .col-map{display:none}
  .res.view-map .col-list{display:none}
  .res.view-map .col-map{height:calc(100vh - 150px)}
}
.col-filt{align-self:start;position:sticky;top:78px;max-height:calc(100vh - 96px);overflow:auto;
  scrollbar-width:thin;padding-right:4px}
.col-map{align-self:start;position:sticky;top:78px;height:calc(100vh - 96px);border-radius:var(--r);
  overflow:hidden;border:1px solid var(--line);background:#E8EDF0;position:sticky}
#map{width:100%;height:100%;position:relative}

/* filters */
.fbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
.fbox h4{margin:0;padding:13px 15px;font-size:14px;font-weight:700;color:var(--ink);display:flex;
  align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.fbox h4 .cv{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.fbox.cl h4 .cv{transform:rotate(-135deg) translate(-1px,-1px)}
.fbox .fb-b{padding:0 15px 14px}
.fbox.cl .fb-b{display:none}
.chk{display:flex;align-items:center;gap:9px;padding:6px 0;cursor:pointer;font-size:14px;color:var(--ink2)}
.chk input{width:17px;height:17px;accent-color:var(--brand);flex:none;margin:0}
.chk .n{margin-left:auto;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.chk:hover{color:var(--ink)}
.chk.off{opacity:.42;cursor:default}
.pill-row{display:flex;flex-wrap:wrap;gap:7px}
.pill{border:1px solid var(--line);background:#fff;border-radius:99px;padding:6px 13px;font-size:13.5px;
  font-weight:600;color:var(--ink2)}
.pill:hover{border-color:var(--brand);color:var(--brand)}
.pill.on{background:var(--brand);border-color:var(--brand);color:#fff}
.fmore{background:none;border:0;color:var(--brand);font-weight:650;font-size:13.5px;padding:7px 0}
.fmore:hover{text-decoration:underline}
/* prijs-schuif + histogram */
.hist{display:flex;align-items:flex-end;gap:2px;height:44px;margin:4px 0 2px}
.hist i{flex:1;background:var(--brand-l);border-radius:2px 2px 0 0;min-height:2px;transition:background .15s}
.hist i.on{background:#9EC5D3}
.rng{position:relative;height:26px}
.rng input{position:absolute;left:0;top:6px;width:100%;margin:0;background:none;pointer-events:none;
  -webkit-appearance:none;appearance:none;height:14px}
.rng input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;
  background:#fff;border:2px solid var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:grab}
.rng input::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;
  border:2px solid var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:grab}
.rng::before{content:"";position:absolute;left:0;right:0;top:12px;height:3px;background:var(--line);border-radius:2px}
.rng-v{display:flex;justify-content:space-between;font-size:13px;font-weight:650;color:var(--ink);margin-top:2px}

/* resultatenkop */
.rhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rhead h1{font-size:22px;margin:0}
.rcount{color:var(--muted);font-size:14px}
.sortw{margin-left:auto;display:flex;gap:8px;align-items:center}
.tabs{display:inline-flex;background:var(--sand);border-radius:10px;padding:3px;gap:2px}
.tabs button{border:0;background:none;padding:7px 13px;border-radius:8px;font-size:13.5px;font-weight:650;color:var(--ink2)}
.tabs button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(18,40,63,.14)}
/* Op een telefoon zijn de weergaveknoppen overbodig — de onderbalk doet hetzelfde en
   "gesplitst" past er niet op. Deze regel MOET na .tabs{display:inline-flex} staan: bij gelijke
   specificiteit wint in CSS de laatste, niet de meest specifieke media-query. */
@media(max-width:900px){.tabs{display:none}}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--brand-l);color:var(--brand-d);
  border:1px solid #CFE3EA;border-radius:99px;padding:5px 8px 5px 13px;font-size:13px;font-weight:650}
.chip button{border:0;background:none;color:inherit;font-size:16px;line-height:1;padding:0 3px;opacity:.6}
.chip button:hover{opacity:1}

/* hotelkaart */
.hcard{display:flex;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:14px;transition:box-shadow .18s,border-color .18s;cursor:pointer}
.hcard:hover{box-shadow:var(--sh-l);border-color:#D9D2C6}
.hcard.hl{border-color:var(--brand);box-shadow:0 0 0 2px rgba(15,92,122,.18)}
.hc-im{width:230px;flex:none;position:relative;background:var(--sand);aspect-ratio:4/3}
.hc-im img{width:100%;height:100%;object-fit:cover}
.hc-b{flex:1;min-width:0;padding:14px 16px;display:flex;gap:14px}
.hc-l{flex:1;min-width:0}
.hc-r{width:150px;flex:none;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;text-align:right}
.hc-n{font-size:17px;font-weight:700;color:var(--ink);margin:0 0 3px;line-height:1.25}
.hc-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:7px}
/* De ster is een SVG uit deze regel, geen tekstglyph: op elk scherm even scherp en overal
   even groot. De HTML zegt alleen HOEVEEL het er zijn (één <i> per ster), dus dit kost geen
   extra verzoek en nauwelijks bytes. font-size:0 verbergt een ★ die ergens is blijven staan. */
.stars{display:inline-flex;align-items:center;gap:2.5px;line-height:1;font-size:0;
  vertical-align:-2px}
.stars i{display:block;width:15px;height:15px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F2A33C' d='M12 2.4l2.98 6.04 6.67.97-4.83 4.7 1.14 6.64L12 17.62 6.04 20.75l1.14-6.64-4.83-4.7 6.67-.97z'/%3E%3C/svg%3E") center/contain no-repeat}
.chk .stars,.fbox .stars{gap:3.5px}
.chk .stars i,.fbox .stars i{width:19px;height:19px}
/* Een filterregel zonder resultaten mag gedempt zijn, niet onleesbaar. */
.chk.off{opacity:.55}
.score{display:inline-flex;align-items:center;gap:7px}
.score b{background:var(--brand);color:#fff;border-radius:7px 7px 7px 2px;padding:3px 7px;font-size:13px;font-weight:700}
.score span{font-size:12.5px;color:var(--ink2);font-weight:600}
.hc-am{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tag{background:var(--sand);border-radius:6px;padding:3px 8px;font-size:12px;color:var(--ink2);font-weight:550}
.tag.g{background:var(--green-l);color:var(--green);font-weight:650}
.tag.d{background:#FDECE9;color:var(--cta-d);font-weight:700}
.pr-was{font-size:13px;color:var(--faint);text-decoration:line-through}
.pr{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.pr-s{font-size:12.5px;color:var(--muted);margin-top:1px}
.pr-t{font-size:12.5px;color:var(--muted)}
@media(max-width:640px){
  .hcard{flex-direction:column}
  .hc-im{width:100%;aspect-ratio:16/10}
  .hc-b{flex-direction:column;gap:10px;padding:13px}
  .hc-r{width:auto;flex-direction:row;align-items:flex-end;justify-content:space-between;text-align:left;
    border-top:1px solid var(--line2);padding-top:10px}
}

/* skeletons */
.sk{background:linear-gradient(100deg,#EFEBE4 30%,#F7F4EE 50%,#EFEBE4 70%);background-size:200% 100%;
  animation:sh 1.1s linear infinite;border-radius:6px}
@keyframes sh{to{background-position:-200% 0}}
.sk-card{display:flex;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
.sk-card .a{width:230px;aspect-ratio:4/3;flex:none}
.sk-card .b{flex:1;padding:16px}
@media(max-width:640px){.sk-card{flex-direction:column}.sk-card .a{width:100%;aspect-ratio:16/10}}

/* kaart-markers (Leaflet + Google) */
.mpin{background:var(--ink);color:#fff;border:1.5px solid #fff;border-radius:99px;padding:4px 9px;
  font:700 12.5px/1 var(--sans);white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.mpin.on{background:var(--cta)}
.mpop{width:210px;font-family:var(--sans)}
.mpop img{width:100%;height:112px;object-fit:cover;border-radius:8px;margin-bottom:7px}
.mpop b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px}
.map-btn{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:5;background:#fff;
  border:1px solid var(--line);border-radius:99px;padding:8px 16px;font-weight:650;font-size:13.5px;
  color:var(--ink);box-shadow:var(--sh-l)}

/* mobiele actiebalk */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:80;background:#fff;border-top:1px solid var(--line);
  display:none;gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom))}
@media(max-width:900px){.mbar{display:flex}}
/* Het gat tussen 901 en 1240px: daar verbergt .res.view-map de lijstkolom, en de knoppen
   Lijst/Gesplitst/Kaart zitten in die kolom. Zonder deze regel is er in de kaartweergave op een
   tablet geen enkele weg terug. Alleen in de kaartweergave, want in de lijstweergave staan die
   knoppen daar wel gewoon. */
@media(min-width:901px) and (max-width:1240px){
  #app.view-map ~ .mbar{display:flex}
  #app.view-map ~ .mbar #mFilt{display:none}
}
.mbar button{flex:1;border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px;font-weight:650;font-size:14px;color:var(--ink)}
.mbar button.pri{background:var(--ink);color:#fff;border-color:var(--ink)}
.fsheet-hd{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;z-index:2}
.fsheet-b{padding:14px 16px 100px}
.fsheet-ft{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));display:flex;gap:10px}

/* detail-overlay */
.ov{position:fixed;inset:0;z-index:100;background:rgba(18,40,63,.55);overflow-y:auto;padding:0}
.ov-in{background:var(--bg);max-width:1080px;margin:0 auto;min-height:100%}
@media(min-width:1100px){.ov{padding:28px 0}.ov-in{border-radius:var(--r-l);overflow:hidden;min-height:auto;margin-bottom:28px}}
.ov-hd{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);padding:12px 20px;
  display:flex;align-items:center;gap:14px;z-index:5}
.ov-bd{padding:20px}
.gal{display:grid;grid-template-columns:2fr 1fr 1fr;gap:6px;border-radius:var(--r);overflow:hidden;margin-bottom:20px}
.gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;background:var(--sand)}
.gal img:first-child{grid-row:span 2;aspect-ratio:4/3}
@media(max-width:700px){.gal{grid-template-columns:1fr}.gal img{aspect-ratio:16/10}.gal img:not(:first-child){display:none}}
.room{display:flex;gap:14px;align-items:center;padding:15px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;margin-bottom:10px;flex-wrap:wrap}
.room-l{flex:1;min-width:190px}
.room-n{font-weight:700;color:var(--ink);margin-bottom:3px}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px 20px}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:10px}

/* homepage */
.hero{background:linear-gradient(180deg,#12283F 0%,#1B3C5C 100%);color:#fff;padding:56px 0 92px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(900px 380px at 80% -10%,rgba(242,163,60,.18),transparent 70%)}
.hero .wrap-n{position:relative;z-index:1}
.hero h1{color:#fff;max-width:16ch}
.hero p.lead{color:#C7D6E2;font-size:clamp(16px,2vw,19px);max-width:56ch;margin-bottom:28px}
.hero-sb{background:#fff;border-radius:16px;padding:8px;box-shadow:0 12px 40px rgba(0,0,0,.22)}
.hero-sb .sb{border:0;box-shadow:none;background:transparent;gap:0}
.hero-sb .sb-f{border-right:1px solid var(--line);border-radius:0!important}
.hero-sb .sb-go{border-radius:11px;margin-left:8px}
@media(max-width:900px){.hero-sb .sb-f{border-right:0;border-bottom:1px solid var(--line)}.hero-sb .sb-go{margin:0}}
.usp{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:26px}
.usp>div{display:flex;gap:11px;align-items:flex-start;color:#D5E2EC;font-size:14.5px;line-height:1.45}
.usp b{display:block;color:#fff;margin-bottom:2px}
.usp svg{flex:none;margin-top:2px;color:var(--gold)}
.sec{padding:52px 0}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.sec-hd p{margin:0;color:var(--muted)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.dcard{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink);aspect-ratio:4/3;display:block}
.dcard img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:transform .4s,opacity .3s}
.dcard:hover img{transform:scale(1.05);opacity:.95}
.dcard-t{position:absolute;left:0;right:0;bottom:0;padding:14px;color:#fff;
  background:linear-gradient(transparent,rgba(10,25,40,.82))}
.dcard-t b{display:block;font-size:17px;font-weight:700}
.dcard-t span{font-size:13px;opacity:.85}
.dcard:hover{text-decoration:none}
.dchip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:99px;padding:8px 15px;font-weight:600;color:var(--ink2);font-size:14.5px}
.dchip:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.icard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.icard h3{margin-bottom:6px}
.icard p{margin:0;color:var(--ink2);font-size:14.5px}
.faq{border-bottom:1px solid var(--line)}
.faq summary{padding:16px 0;font-weight:650;color:var(--ink);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:22px;color:var(--brand);font-weight:400;flex:none}
.faq[open] summary:after{content:"−"}
.faq p{padding:0 0 16px;margin:0;color:var(--ink2);max-width:78ch}
.prose{max-width:74ch}
.prose h2{margin-top:36px}
.prose ul{padding-left:20px;color:var(--ink2)}
.prose li{margin-bottom:6px}

/* voettekst */
.ft{background:var(--ink);color:#B9C8D6;padding:46px 0 26px;margin-top:40px}
.ft a{color:#DCE7F0}
.ft-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;margin-bottom:28px}
.ft h4{color:#fff;font-size:14px;margin-bottom:10px;letter-spacing:.02em}
.ft ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:2}
.ft-b{border-top:1px solid rgba(255,255,255,.13);padding-top:18px;font-size:13px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap}

/* meldingen */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:10px;font-weight:600;font-size:14.5px;z-index:200;opacity:0;
  pointer-events:none;transition:.25s;box-shadow:var(--sh-l)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.note{background:#FFF8E8;border:1px solid #F3E2B8;border-radius:var(--r-s);padding:12px 14px;font-size:14px;color:#7A5A15}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty b{display:block;color:var(--ink);font-size:18px;margin-bottom:6px}
.spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
  animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(1turn)}}

/* ---------- kalender (bereikkiezer) ---------- */
.cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-lbl{font-weight:700;color:var(--ink);font-size:14px}
.cal-nav{width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:50%;
  display:grid;place-items:center;color:var(--ink2)}
.cal-nav:first-child svg{transform:rotate(180deg)}
.cal-nav:hover{background:var(--sand)}
.cal-w{display:flex;gap:24px}
.cal-m{width:238px}
.cal-hd{text-align:center;font-weight:700;color:var(--ink);font-size:14px;margin-bottom:8px}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:1px 0}
.cal-dow{font-style:normal;text-align:center;font-size:11px;font-weight:700;color:var(--faint);padding-bottom:4px}
.cal-d{border:0;background:none;height:32px;font-size:13.5px;color:var(--ink2);border-radius:8px;position:relative;font-weight:550}
.cal-d:hover:not(.off){background:var(--brand-l);color:var(--brand-d)}
.cal-d.off{color:#CDD5DD;cursor:default}
.cal-d.mid{background:var(--brand-l);border-radius:0;color:var(--brand-d)}
.cal-d.sel{background:var(--brand);color:#fff;font-weight:700}
.cal-d.sel.start{border-radius:8px 0 0 8px}
.cal-d.sel.end{border-radius:0 8px 8px 0}
.cal-d.sel.start.end{border-radius:8px}
/* De hover-regel hierboven is specifieker dan .cal-d.sel (drie klassen tegen twee) en won dus
   van de selectie: de dag ONDER de muis — precies je vertrekdag — bleef lichtblauw in plaats van
   donker. Deze twee regels zetten dat recht. */
.cal-d.sel:hover:not(.off){background:var(--brand);color:#fff}
.cal-d.mid:hover:not(.off){background:var(--brand-l);color:var(--brand-d)}
.cal-ft{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line2);font-size:13px;color:var(--muted);font-weight:600}
@media(max-width:760px){
  .cal-w{flex-direction:column;gap:14px;max-height:56vh;overflow:auto}
  .cal-m{width:100%}
  .pop{position:fixed;left:12px;right:12px;top:auto;bottom:12px;min-width:0;max-height:82vh;overflow:auto}
}

/* ---------- afrekenen ---------- */
.bk{display:grid;gap:22px;grid-template-columns:minmax(0,1fr) 360px;max-width:1060px;margin:0 auto;padding:26px 20px 70px}
.bk-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.bk-card h2{font-size:20px}
.bk-im{width:100%;height:170px;object-fit:cover}
.bk-side{align-self:start;position:sticky;top:78px}
/* LET OP DE VOLGORDE: dit blok MOET na .bk-side hierboven staan. Stond het ervoor, dan won de
   losse regel en bleef de samenvatting ook op een telefoon sticky — hij plakte dan bovenaan het
   scherm en dekte het invulformulier af, zodat je je naam en e-mailadres niet kwijt kon.
   Op een telefoon staat het formulier bovenaan: daar kom je voor. De samenvatting en het blok
   "dit is wat je boekt" volgen eronder. */
@media(max-width:900px){
  .bk{grid-template-columns:minmax(0,1fr);padding:16px 14px 60px}
  .bk-side{position:static;top:auto;order:0;align-self:stretch}
  .bk-main{order:-1}
}
.bk-row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:14px;
  border-bottom:1px solid var(--line2);align-items:baseline}
.bk-row:last-child{border-bottom:0}
.bk-row span{color:var(--muted);flex:none}
.bk-row b{color:var(--ink);text-align:right;font-weight:650}
.bk-tot{border-top:1px solid var(--line);border-bottom:0;margin-top:6px;padding-top:12px}
.bk-tot b{font-size:21px;font-weight:800;letter-spacing:-.02em}
.bk-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
@media(max-width:560px){.bk-grid{grid-template-columns:1fr}}
.bk-f{display:flex;flex-direction:column;gap:5px}
.bk-f span{font-size:13px;font-weight:600;color:var(--ink2)}
.bk-f input{border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:15px;background:#fff}
.bk-f input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,92,122,.13)}
.bk-payhead{display:flex;justify-content:space-between;align-items:baseline;background:var(--sand);
  border-radius:var(--r-s);padding:13px 16px;margin-top:14px}
.bk-payhead b{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.bk-secure{display:flex;gap:9px;align-items:flex-start;margin-top:16px;font-size:12.5px;color:var(--muted)}
.bk-tick{width:58px;height:58px;border-radius:50%;background:var(--green-l);color:var(--green);
  display:grid;place-items:center;margin:0 auto 16px}
.bk-steps{display:flex;gap:10px;list-style:none;margin:0 0 16px;padding:0;flex-wrap:wrap}
.bk-steps li{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--faint)}
.bk-steps li i{font-style:normal;width:23px;height:23px;border-radius:50%;background:var(--line2);
  color:var(--muted);display:grid;place-items:center;font-size:12px;font-weight:700}
.bk-steps li.on{color:var(--ink)}
.bk-steps li.on i{background:var(--brand);color:#fff}
.bk-steps li.ok{color:var(--green)}
.bk-steps li.ok i{background:var(--green-l);color:var(--green)}
#payEl{margin-top:14px;min-height:44px}
#payEl .lp-submit-button-wrapper{margin-top:18px}
#payEl .lp-submit-button{width:100%;background:var(--cta);color:#fff;border:0;border-radius:10px;
  padding:15px;font-weight:700;font-size:16px;cursor:pointer}
#payEl .lp-submit-button:hover{background:var(--cta-d)}
#payEl .lp-submit-button:disabled{opacity:.6;cursor:default}
#payEl #st-error-message{color:#C0392B;font-size:13px;margin-top:8px}

/* ---------- bestemmingspagina's ---------- */
.dest-hero{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:3/1;background:var(--sand);margin-bottom:20px}
.dest-hero img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.dest-hero{aspect-ratio:16/9;border-radius:var(--r)}}
.hero-credit{position:absolute;right:0;bottom:0;background:rgba(10,25,40,.55);color:#E7EEF4;
  font-size:11px;padding:4px 9px;border-radius:8px 0 0 0}
.dest-top h1{margin-bottom:14px}
.dest-sb{margin-bottom:20px}
.answer{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:var(--r-s);padding:16px 18px}
.answer p{margin:0 0 6px;color:var(--ink2);font-size:15.5px;line-height:1.6}
.answer b{color:var(--ink)}
.answer-meta{font-size:12.5px!important;color:var(--muted)!important;margin:0!important}
.dest-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}
@media(max-width:980px){.dest-body{grid-template-columns:minmax(0,1fr)}.dest-side{order:-1}}
.dest-body .prose{max-width:none}
.lead-p{font-size:16.5px;color:var(--ink2)}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;position:sticky;top:78px}
.side-card h3{font-size:16px;margin-bottom:6px}
.side-card p{font-size:14px;color:var(--muted)}
.side-links{list-style:none;padding:0;margin:16px 0 0;font-size:14.5px}
.side-links li{border-top:1px solid var(--line2)}
.side-links a{display:block;padding:9px 0;color:var(--ink2);font-weight:550}
.side-links a:hover{color:var(--brand);text-decoration:none}
.tbl-w{overflow-x:auto;margin:14px 0 8px}
.tbl{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.tbl th,.tbl td{padding:11px 15px;text-align:left;border-bottom:1px solid var(--line2)}
.tbl th{font-weight:600;color:var(--ink2)}
.tbl td{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.minis{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:14px 0 8px}
.mini{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:block}
.mini:hover{box-shadow:var(--sh-l);text-decoration:none}
.mini img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--sand)}
.mini-b{padding:11px 13px}
.mini-b b{display:block;color:var(--ink);font-size:14.5px;line-height:1.3;margin-bottom:4px}
.mini-m{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.mini-p{font-weight:800;color:var(--ink);font-size:17px}
.mini-p span{font-weight:500;font-size:12px;color:var(--muted)}
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:14px 0}
.area{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px 17px}
.area b{display:block;color:var(--ink);margin-bottom:4px;font-size:15.5px}
.area p{margin:0;font-size:14px;color:var(--ink2)}
.ctry-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-bottom:30px}
.ctry h3{font-size:16px;margin-bottom:6px}
.ctry-l{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:14px}
.ctry-l a{color:var(--ink2)}

/* ---------- compacte zoekbalk in de kop (mobiel) ---------- */
.sb-compact{display:flex;align-items:center;gap:9px;width:100%;background:#fff;border:1px solid var(--line);
  border-radius:99px;padding:9px 15px;box-shadow:var(--sh);color:var(--ink);font-weight:600;font-size:14px;
  text-align:left;min-width:0}
.sb-compact svg{flex:none;color:var(--brand)}
.sb-compact span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-sheet{position:fixed;inset:0;z-index:110;background:#fff;overflow:auto}
.sb-sheet-b{padding:16px}
/* Twee rijen: logo + menu boven, zoekbalk eronder over de VOLLE breedte. In een rij samen
   kneep de flexbox #sbar tot 0 px — de zoekbalk stond er wel, maar was onzichtbaar. Dit gold
   eerst pas onder 900px; op een tablet kwam daardoor een samengevouwen pil in beeld. Met een
   eigen rij past de echte balk daar prima, dus schuift de grens naar 1240px. */
@media(max-width:1239px){
  .hd-in{gap:10px;padding:7px 12px;height:auto;flex-wrap:wrap;row-gap:8px}
  #sbar{order:3;flex:1 0 100%;min-width:0;max-width:none}
  .hd-nav{margin-left:auto;flex-wrap:nowrap}
  /* De kop is nu twee rijen hoog; bleef dit op 78px staan, dan schoven de filters en de kaart
     er half onderdoor. */
  .col-map,.col-filt{top:126px}
  .col-filt{max-height:calc(100vh - 144px)}
  .col-map{height:calc(100vh - 144px)}
}
@media(max-width:900px){
  .hd-in .logo span{display:none}
}
@media(max-width:560px){
  /* Op 375px was het menu samen met het logo 387px breed en viel het naar een eigen regel:
     drie rijen kop. Iets krappere binnenmarges schelen 28px en dat is precies genoeg. */
  .hd-in{gap:8px 6px}
  .hd-nav{gap:2px}
  .hd-nav a{padding:8px 6px}
  .langsw>summary{padding:6px 4px}
  .col-map,.col-filt{top:112px}
  .res.view-map .col-map{height:calc(100vh - 200px)}
}

/* ---------- kaart: lijst volgt het kaartbeeld ---------- */
.map-follow{position:absolute;top:12px;left:12px;z-index:5;display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:13px;
  font-weight:650;color:var(--ink);box-shadow:var(--sh-l);cursor:pointer;user-select:none}
.map-follow input{width:15px;height:15px;accent-color:var(--brand);margin:0;cursor:pointer}
.map-pill{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:6;background:var(--ink);
  color:#fff;border-radius:99px;padding:8px 16px;font-size:13px;font-weight:650;box-shadow:var(--sh-l);
  pointer-events:none;white-space:nowrap}
@media(max-width:1240px){.map-follow{font-size:12px;padding:7px 11px}}

/* ============================================================
   MARKTPLAATS-OPZET — dicht, veel instappunten, overal prijzen.
   Bewuste keuze: meer inhoud per scherm dan witruimte, zodat elke
   pagina zowel converteert als intern doorlinkt.
   ============================================================ */
.sec-tight{padding:34px 0}
.sec-tight:first-of-type{padding-top:26px}
.hd2{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.hd2 h2{font-size:clamp(19px,2.1vw,24px);margin:0}
.hd2 p{margin:0;color:var(--muted);font-size:14px}
.hd2 a{font-size:14px;font-weight:650;white-space:nowrap}

/* compacte hero */
/* GEEN overflow:hidden hier: dat kapte de suggestielijst onder de zoekbalk af, zodat je van
   "kuta" alleen Bali en Lombok zag en Kuta zelf niet. De z-index houdt de lijst boven de
   secties die erna komen. */
.hero2{background:linear-gradient(160deg,#12283F 0%,#1C3F5F 100%);color:#fff;padding:34px 0 30px;position:relative;z-index:3}
.hero2:after{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 300px at 88% -20%,rgba(242,163,60,.16),transparent 65%)}
.hero2 .wrap{position:relative;z-index:1}
.hero2 h1{color:#fff;font-size:clamp(23px,3vw,34px);margin-bottom:5px}
.hero2 .sub{color:#B9CCDC;font-size:15px;margin:0 0 18px}
.hero2-sb{background:#fff;border-radius:14px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.24)}
.hero2-sb .sb{border:0;box-shadow:none;background:transparent;gap:0}
.hero2-sb .sb-f{border-right:1px solid var(--line);border-radius:0!important}
.hero2-sb .sb-go{border-radius:10px;margin-left:6px}
@media(max-width:900px){.hero2-sb .sb-f{border-right:0;border-bottom:1px solid var(--line)}.hero2-sb .sb-go{margin:0}}

/* vertrouwensbalk */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.16);
  border-radius:11px;overflow:hidden;margin-top:16px}
.trust div{background:rgba(255,255,255,.06);padding:11px 14px;backdrop-filter:blur(2px)}
.trust b{display:block;color:#fff;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.trust span{color:#AFC4D6;font-size:12.5px}
@media(max-width:760px){.trust{grid-template-columns:repeat(2,1fr)}}

/* bestemmingstegels met prijs */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:12px}
.tile{position:relative;display:block;border-radius:12px;overflow:hidden;background:var(--ink);aspect-ratio:5/4}
.tile img{width:100%;height:100%;object-fit:cover;opacity:.86;transition:transform .35s,opacity .25s}
.tile:hover{text-decoration:none}
.tile:hover img{transform:scale(1.06);opacity:1}
.tile-b{position:absolute;left:0;right:0;bottom:0;padding:26px 11px 10px;color:#fff;
  background:linear-gradient(transparent,rgba(9,22,36,.86))}
.tile-b b{display:block;font-size:15px;font-weight:700;line-height:1.2}
.tile-b span{font-size:12px;opacity:.85}
.tile-p{position:absolute;top:8px;right:8px;background:#fff;color:var(--ink);border-radius:7px;
  padding:3px 8px;font-size:12.5px;font-weight:750;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.tiles-sm{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.tiles-sm .tile{aspect-ratio:4/3}
.tiles-sm .tile-b b{font-size:14px}

/* thema- en typetegels — bewust STIL.
   Eerder stond hier per tegel een groen icoon, een titel, drie regels omschrijving, een
   scheidingslijn en twee bedragen. Twintig tegels lang is dat een muur. Nu: icoon, titel, en
   een regel met het aantal en de vanaf-prijs. De omschrijving zit als `title` op de link. */
.thgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:9px}
.th{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line2);
  border-radius:11px;padding:12px 14px;color:var(--ink2);
  transition:border-color .12s,background .12s}
.th > div{min-width:0;flex:1}
/* In rust neutraal: twintig resortgroene blokjes naast elkaar maakten het onrustig. Pas als je
   een tegel aanwijst krijgt hij de merkkleur. */
.th i{flex:none;width:30px;height:30px;border-radius:8px;background:var(--sand);color:var(--muted);
  display:grid;place-items:center;transition:background .12s,color .12s}
.th:hover{border-color:var(--line);background:var(--bg);text-decoration:none}
.th:hover i{background:var(--brand-l);color:var(--brand)}
.th b{display:block;color:var(--ink);font-size:14px;font-weight:650;line-height:1.3}
.th > div > span{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px}
/* het bedrag is het enige dat mag opvallen */
.th .px{display:inline;white-space:nowrap;font-weight:700;color:var(--ink2)}

/* landen in kolommen (intern linkwerk) */
.regions{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px 22px}
.regions h3{font-size:14px;margin:0 0 7px;color:var(--ink);letter-spacing:.01em}
.regions ul{list-style:none;margin:0;padding:0;font-size:13.5px;line-height:1.85}
.regions a{color:var(--ink2)}
.regions a:hover{color:var(--brand)}
.regions .more{color:var(--muted)}

/* prijstabel "goedkoopste nu" */
.dealtbl{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;font-size:14px}
.dealtbl th,.dealtbl td{padding:9px 13px;border-bottom:1px solid var(--line2);text-align:left}
.dealtbl th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:700}
.dealtbl td.num{text-align:right;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dealtbl tr:last-child td{border-bottom:0}
.dealtbl tbody tr:hover{background:var(--sand)}
.dealtbl a{font-weight:650}
.dealtbl .flag{color:var(--muted);font-size:12.5px}

/* uitgelichte band (voor hotels) */
.band{background:var(--ink);color:#fff;border-radius:var(--r);padding:26px 28px;display:flex;
  gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h2{color:#fff;margin:0 0 5px;font-size:22px}
.band p{margin:0;color:#B9CCDC;font-size:14.5px;max-width:62ch}
.band .btn{background:var(--gold);color:#12283F}
.band .btn:hover{background:#E39428;color:#12283F}

/* compacte uitleg-kaarten */
.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.why div{background:#fff;border:1px solid var(--line);border-radius:11px;padding:15px 16px}
.why b{display:block;color:var(--ink);margin-bottom:4px;font-size:15px}
.why p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.5}

/* grote SEO-voettekst */
.ft-wide{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:20px 24px;margin-bottom:24px}
.ft-wide h4{color:#fff;font-size:13px;margin-bottom:8px;letter-spacing:.02em}
.ft-wide ul{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.95}
.cal-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line2)}
.cal-quick .pill{padding:5px 11px;font-size:13px}

/* ---------- hoteldetail: galerij, voorzieningen, scores, reviews ---------- */
.gal-i{padding:0;border:0;background:var(--sand);position:relative;cursor:zoom-in;overflow:hidden}
.gal-i img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.gal-i:hover img{transform:scale(1.04)}
.gal-i:first-child{grid-row:span 2;aspect-ratio:4/3}
.gal-i:not(:first-child){aspect-ratio:1}
.gal-more{position:absolute;inset:0;background:rgba(12,26,42,.55);color:#fff;display:grid;
  place-items:center;font-weight:700;font-size:15px;letter-spacing:.01em}
.gal-i:hover .gal-more{background:rgba(12,26,42,.68)}
@media(max-width:700px){.gal-i:not(:first-child){display:none}.gal-i:first-child{aspect-ratio:16/10;grid-row:auto}}

.det-top{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start;margin-bottom:10px}
.det-times{font-size:13px;color:var(--muted);margin-top:6px}
.det-desc{margin:14px 0}
.det-h{margin:26px 0 10px;font-size:18px}
.det-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;margin:14px 0}
.det-cta span{display:block;font-size:13px;color:var(--muted)}
.det-cta b{font-size:19px;color:var(--ink);font-weight:800;letter-spacing:-.02em}

/* voorzieningen: precies twee regels tot je uitklapt */
.fac-list{display:flex;flex-wrap:wrap;gap:7px;max-height:74px;overflow:hidden;transition:max-height .2s}
.fac-list.open{max-height:none}
.fac{background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 12px;
  font-size:13.5px;color:var(--ink2);white-space:nowrap}
.fac:before{content:"✓ ";color:var(--green);font-weight:700}

/* horizontale scores */
.scores{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px 28px;margin-bottom:14px}
.score-row{display:flex;align-items:center;gap:12px}
.score-n{flex:none;width:132px;font-size:14px;font-weight:650;color:var(--ink)}
.score-bar{flex:1;height:11px;background:var(--line2);border-radius:99px;overflow:hidden}
.score-bar i{display:block;height:100%;background:linear-gradient(90deg,#2E8FA8,var(--brand));border-radius:99px}
.score-v{flex:none;width:34px;text-align:right;font-size:14px;font-weight:750;color:var(--ink);
  font-variant-numeric:tabular-nums}
.pc{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.rev-s{background:var(--brand);color:#fff;border-radius:7px 7px 7px 2px;padding:3px 7px;font-size:13px}

/* lichtbak: een venster met een klikbare rand eromheen */
.lb{position:fixed;inset:0;z-index:130;background:rgba(9,18,28,.72);display:grid;place-items:center;padding:28px}
.lb-panel{width:min(1000px,94vw);height:min(760px,88vh);background:#0F1B26;border-radius:16px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-hd{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;
  color:#C8D6E2;font-size:13px;border-bottom:1px solid rgba(255,255,255,.09)}
.lb-x{background:rgba(255,255,255,.12);border:0;color:#fff;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;flex:none}
.lb-x:hover{background:rgba(255,255,255,.24)}
/* flex + min-height:0 i.p.v. grid met place-items: bij een auto-hoge grid-rij groeit de rij mee
   met de foto en betekent max-height:100% niets meer — dan schoof de foto over de miniaturen. */
.lb-main{flex:1 1 auto;min-height:0;position:relative;display:flex;align-items:center;
  justify-content:center;padding:10px;overflow:hidden}
.lb-main img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:8px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.16);border:0;
  color:#fff;width:42px;height:42px;border-radius:50%;display:grid;place-items:center}
.lb-nav:hover{background:rgba(255,255,255,.3)}
.lb-prev{left:10px}.lb-prev svg{transform:rotate(180deg)}
.lb-next{right:10px}
.lb-strip{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;padding:10px 12px;scrollbar-width:thin;
  border-top:1px solid rgba(255,255,255,.09)}
.lb-strip img{height:52px;width:74px;object-fit:cover;border-radius:6px;opacity:.5;cursor:pointer;flex:none}
.lb-strip img.on,.lb-strip img:hover{opacity:1;outline:2px solid #fff}
@media(max-width:700px){.lb{padding:10px}.lb-panel{width:100%;height:92vh}
  .lb-nav{width:36px;height:36px}.lb-strip img{height:44px;width:62px}}

/* omschrijving + faciliteiten in een eigen vak */
.det-box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:16px 0}
.det-box .det-h{margin-top:22px}
.det-box .det-desc{margin:0 0 4px}
.det-box .det-desc p:last-child{margin-bottom:0}
.det-box .fac{background:var(--sand);border-color:transparent}

/* reviewfilter */
.rev-filter{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 12px}
.rev-count{margin-left:auto;font-size:13px;color:var(--muted)}

/* ---------- bestemmingspagina: te doen + praktische informatie ---------- */
.todos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:14px 0 6px}
.todo{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;
  border-left:3px solid var(--gold)}
.todo b{display:block;color:var(--ink);font-size:15px;margin-bottom:3px;line-height:1.3}
.todo p{margin:0;font-size:13.5px;color:var(--ink2);line-height:1.45}
.gtk{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px 18px 16px;margin:14px 0}
.gtk-row{display:flex;gap:18px;padding:11px 0;border-bottom:1px solid var(--line2);align-items:flex-start}
.gtk-row:last-of-type{border-bottom:0}
.gtk-row>span{flex:none;width:150px;font-weight:650;color:var(--ink);font-size:14px}
.gtk-row>div{flex:1;font-size:14.5px;color:var(--ink2);line-height:1.5}
.gtk-watch{background:#FFF8E8;border:1px solid #F3E2B8;border-radius:var(--r-s);padding:12px 14px;margin-top:14px}
.gtk-watch b{display:block;color:#7A5A15;margin-bottom:3px;font-size:14px}
.gtk-watch p{margin:0;font-size:14px;color:#7A5A15;line-height:1.5}
@media(max-width:640px){.gtk-row{flex-direction:column;gap:2px}.gtk-row>span{width:auto}}

/* "wat is er te doen" onder de filters */
.todo-list{list-style:none;margin:0;padding:0}
.todo-list li{padding:7px 0;border-bottom:1px solid var(--line2)}
.todo-list li:last-child{border-bottom:0}
.todo-list b{display:block;color:var(--ink);font-size:13.5px;line-height:1.3}
.todo-list span{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:1px}
.gtk-mini{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:13px;
  border-bottom:1px solid var(--line2)}
.gtk-mini:last-of-type{border-bottom:0}
.gtk-mini span{color:var(--muted)}
.gtk-mini b{color:var(--ink);text-align:right}
.gtk-mini-w{margin:8px 0 0;font-size:12.5px;color:var(--ink2);line-height:1.45}

/* --- Waar ligt het + afstanden ------------------------------------------------------------
   Het kaartvlak is met CSS getekend (raster + speld), niet met een afbeelding of een iframe:
   nul verzoeken, nul licentiegedoe, en het klikt door naar onze eigen kaart met live prijzen. */
.todo-km{display:block;margin-top:6px;font-size:12px;color:var(--brand);font-weight:600}
.where{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start;margin:14px 0 6px}
.where-txt{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.where-txt>p{margin:0 0 10px}
.where-sub{margin:2px 0 6px;font-size:12.5px;color:var(--muted)}
.where-map{position:relative;display:block;min-height:210px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);text-decoration:none;background:#EDF1F0;
  background-image:linear-gradient(var(--line2) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line2) 1px,transparent 1px),
                   linear-gradient(160deg,#DCE8EC 0%,#EFF2EE 45%,#E4EBE2 100%);
  background-size:34px 34px,34px 34px,100% 100%}
.where-map:hover{border-color:var(--brand)}
.where-pin{position:absolute;left:50%;top:44%;width:20px;height:20px;margin:-26px 0 0 -10px;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--cta);
  box-shadow:0 6px 14px rgba(18,40,63,.28)}
.where-pin::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}
.where-cta{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;font-weight:700;
  color:#fff;background:linear-gradient(transparent,rgba(10,67,89,.88) 42%)}
.where-cta small{display:block;font-weight:500;font-size:12px;opacity:.85;margin-top:1px}
@media(max-width:840px){.where{grid-template-columns:1fr}.where-map{min-height:170px}}
/* aantal hotels achter een gebiedslink: rustig, maar het maakt de keuze concreet */
.dchip i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted);
  background:var(--sand);border-radius:20px;padding:1px 7px}
.dchip:hover i{background:var(--brand-l);color:var(--brand)}

/* --- Redactieblok op de collectiepagina's --------------------------------------------------
   Eigen achtergrond zodat het advies zichtbaar losstaat van de prijsblokken eromheen. */
.guide{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;margin:12px 0 4px;max-width:860px}
.guide>p{margin:0 0 12px}
.guide h3{font-size:15px;margin:16px 0 8px}
.guide-list{margin:0;padding-left:20px}
.guide-list li{margin:0 0 7px;line-height:1.5}
.guide-watch{background:var(--sand);border-radius:var(--r-s);padding:12px 15px;margin:16px 0 0}
.guide-watch b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:3px}
.guide-watch p{margin:0;font-size:14px}
.guide-suits{margin:14px 0 0;font-size:14px;color:var(--ink2)}
.guide-suits b{color:var(--ink)}

/* taalwissel in de kop: echte links, geen dropdown, zodat crawlers ze volgen */
.langsw{position:relative;font-size:13px}
.langsw>summary{list-style:none;cursor:pointer;color:var(--ink);font-weight:650;
  display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:8px;white-space:nowrap}
.langsw>summary::-webkit-details-marker{display:none}
.langsw>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid var(--muted);
  border-bottom:1.6px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px)}
.langsw>summary:hover{background:var(--sand)}
.langsw[open]>summary{background:var(--sand)}
.langsw-m{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:150px;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;
  box-shadow:0 12px 30px rgba(16,32,48,.14);display:flex;flex-direction:column}
.langsw-m a{display:block;padding:8px 10px;border-radius:7px;color:var(--ink2)}
.langsw-m a:hover{background:var(--sand);color:var(--brand)}

/* ---------- kassa: vertrouwen en "dit boek je" ---------- */
.bk-trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.bk-trust>div{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;font-size:13px;font-weight:600;color:var(--ink2);line-height:1.25}
.bk-trust svg{flex:none;color:var(--brand)}
.bk-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-bottom:12px}
.bk-meta small{font-size:12px}
/* Let op de selector: .bk-what-h b (klasse + element) is specifieker dan .bk-score alleen, en
   kleurde het cijfer donker en zette het op display:block. Vandaar .bk-meta ervoor. */
.bk-meta .bk-score,.bk-score{background:var(--brand);color:#fff;border-radius:7px;padding:2px 8px;
  font-size:12.5px;font-weight:700;display:inline-block;margin:0}
.bk-what{margin-top:16px;padding:20px 22px}
.bk-what h2{font-size:17px;margin-bottom:12px}
.bk-what-h b{font-size:16.5px;color:var(--ink);display:block;margin-bottom:4px}
.bk-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}
.bk-gal img{width:100%;height:88px;object-fit:cover;border-radius:9px;background:var(--sand)}
.bk-gal img:first-child{grid-column:span 2;grid-row:span 2;height:182px}
@media(max-width:640px){
  .bk-gal{grid-template-columns:repeat(3,1fr)}
  .bk-gal img{height:74px}
  .bk-gal img:first-child{grid-column:span 3;grid-row:auto;height:150px}
}

.bk-ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;font-weight:700;
  letter-spacing:.06em;background:var(--sand);border-radius:7px;padding:3px 9px;display:inline-block}

/* ---------- mijn reizen ---------- */
.mg-or{display:flex;align-items:center;gap:12px;margin:22px 0 18px;color:var(--faint);font-size:12.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mg-or:before,.mg-or:after{content:"";flex:1;height:1px;background:var(--line)}
.trips{display:flex;flex-direction:column;gap:14px}
.trip{display:grid;grid-template-columns:190px minmax(0,1fr);background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.trip.off{opacity:.62}
.trip>img,.trip-noimg{width:100%;height:100%;min-height:150px;object-fit:cover;background:var(--sand)}
.trip-b{padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.trip-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.trip-t b{font-size:16.5px;color:var(--ink)}
.trip-m{color:var(--muted);font-size:13.5px}
.trip-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.trip-f b{font-size:17px;font-weight:800;letter-spacing:-.02em}
.trip-a{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.trip-a .btn{display:inline-flex;align-items:center;gap:6px}
@media(max-width:640px){
  .trip{grid-template-columns:minmax(0,1fr)}
  .trip>img,.trip-noimg{height:150px;min-height:0}
}

/* ---------- kamerkaarten: kamer links, tarieven rechts ---------- */
.det-sub{color:var(--muted);font-size:13.5px;margin:-6px 0 14px}
.room-g{display:grid;grid-template-columns:250px minmax(0,1fr);border:1px solid var(--line);
  border-radius:var(--r);background:#fff;margin-bottom:14px;overflow:hidden}
.room-left{padding:14px;border-right:1px solid var(--line)}
.room-ph{width:100%;height:104px;object-fit:cover;border-radius:9px;background:var(--sand);
  display:block;margin-bottom:10px}
.room-n{font-weight:700;color:var(--ink);font-size:15.5px;line-height:1.3;margin-bottom:6px}
.room-facts{display:flex;flex-direction:column;gap:6px;margin-bottom:11px}
.room-facts .rf{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.25;
  color:var(--ink);font-weight:550}
.room-facts .rf-i{flex:none;display:inline-flex;align-items:center;gap:1px;color:var(--muted)}
.room-facts .rf-i svg{display:block}
/* Gevulde poppetjes in inktkleur: je ziet in één oogopslag voor hoeveel personen de kamer is. */
.room-facts .rf-p{display:inline-flex;align-items:center;gap:1px;color:var(--ink)}
.room-facts .rf-x{margin-left:3px;font-size:12.5px;font-weight:800;color:var(--ink)}
/* "per kamer" hoort bij de waarde ervoor, niet ernaast: gedempt en een maatje kleiner. */
.room-facts .rf-sub{color:var(--muted);font-weight:500;font-size:12.5px}
.room-am{display:flex;flex-wrap:wrap;gap:5px}
.room-am span{border:1px solid var(--line);border-radius:99px;padding:3px 9px;font-size:12px;color:var(--muted)}
.room-d{margin-top:10px}
.room-d summary{cursor:pointer;font-size:13px;font-weight:650;color:var(--brand);list-style:none}
.room-d summary::-webkit-details-marker{display:none}
.room-d p{margin:8px 0 0;font-size:13px;color:var(--ink2);line-height:1.55;white-space:pre-line}
.room-right{display:flex;flex-direction:column}
.room-meta{display:flex;align-items:center;gap:7px;background:var(--brand-l);
  border-bottom:1px solid var(--line);padding:11px 16px;font-size:14px;font-weight:650;color:var(--brand-d)}
.room-meta svg{flex:none;color:var(--brand)}
.room-o{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;
  border-bottom:1px solid var(--line)}
.room-o:last-child{border-bottom:0}
.room-o-l{min-width:0}
.room-o-t{font-size:14.5px;color:var(--ink);font-weight:650}
.room-can{font-size:13px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:5px}
.room-can.ok{color:var(--green);font-weight:600}
.room-can svg{flex:none}
.room-tax{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12.5px;margin-top:4px}
.room-tax svg{flex:none}
.room-o-p{flex:none;display:flex;align-items:center;gap:12px}
.room-o-pr{text-align:right;line-height:1.2}
.room-o-pr s{display:block;font-size:12.5px;color:var(--muted)}
.room-o-p b{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ink);display:block}
.room-pn,.room-plus{display:block;font-size:12px;color:var(--muted)}
@media(max-width:820px){
  .room-g{grid-template-columns:minmax(0,1fr)}
  .room-left{border-right:0;border-bottom:1px solid var(--line);display:grid;
    grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:start}
  .room-ph{height:88px;margin-bottom:0}
  .room-left .room-n,.room-left .room-facts,.room-left .room-am,.room-left .room-d{grid-column:2}
  .room-ph{grid-row:1/span 4}
}
@media(max-width:560px){
  .room-left{grid-template-columns:minmax(0,1fr)}
  .room-ph{grid-row:auto;height:150px;margin-bottom:10px}
  .room-left .room-n,.room-left .room-facts,.room-left .room-am,.room-left .room-d{grid-column:1}
  .room-o{flex-direction:column;align-items:stretch;gap:10px}
  .room-o-p{justify-content:space-between}
  .room-o-pr{text-align:left}
  .room-o-p .btn{margin-top:0}
}

/* ============================================================
   BLOG — /blog/ en /blog/<slug>/
   Bewust een SMALLE tekstkolom (68ch): lange regels lezen slecht, en een blog wordt gelezen,
   niet gescand zoals een resultatenlijst. De rest van de site houdt zijn eigen brede opzet.
   ============================================================ */
.bhero{position:relative;height:340px;overflow:hidden;background:var(--ink)}
.bhero img{width:100%;height:100%;object-fit:cover;display:block}
/* verloop van onder naar boven: de tekst staat onderin en moet leesbaar zijn op elke foto */
.bhero-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,20,34,.82) 0%,rgba(6,20,34,.45) 45%,rgba(6,20,34,.12) 100%)}
.bhero-in{position:absolute;left:0;right:0;bottom:0;padding-bottom:26px;color:#fff}
.bhero-in h1{color:#fff;font-size:clamp(26px,3.4vw,40px);line-height:1.15;margin:0 0 8px;max-width:20ch}
.bhero-in p{color:#D8E3EC;font-size:16px;margin:0;max-width:60ch}
.bhero-in nav a{color:#C3D3E0}
.bhero-in nav span{color:#8FA6B8!important}
@media(max-width:700px){.bhero{height:270px}}

.bpost{max-width:68ch;margin:0 auto;padding:26px 0 60px}
.bpost h2{font-size:clamp(20px,2.2vw,26px);line-height:1.25;margin:34px 0 10px;scroll-margin-top:130px}
.bpost h3{font-size:17px;margin:22px 0 6px;color:var(--ink)}
.bpost p{margin:0 0 14px;color:var(--ink2);line-height:1.68;font-size:16px}
.bpost .lead{font-size:18px;line-height:1.6;color:var(--ink);margin-bottom:20px}
.bpost ul,.bpost ol{margin:0 0 16px;padding-left:22px;color:var(--ink2);line-height:1.65;font-size:16px}
.bpost li{margin-bottom:7px}
.bpost a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.bpost a:hover{color:var(--brand-d)}

.bmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;color:var(--muted);
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.bmeta b{color:var(--ink2);font-weight:650}
.bdot{width:3px;height:3px;border-radius:50%;background:var(--line);flex:none}

.btoc{background:var(--sand);border-radius:12px;padding:15px 18px;margin:0 0 26px}
.btoc b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:7px}
.btoc ol{margin:0;padding-left:19px;font-size:14.5px;line-height:1.75}
.btoc a{color:var(--ink2);text-decoration:none}
.btoc a:hover{color:var(--brand);text-decoration:underline}

/* een brede tabel mag de PAGINA nooit horizontaal laten schuiven; hij scrolt in zijn eigen doos */
.btbl-w{overflow-x:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.btbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:420px}
.btbl th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);
  padding:11px 14px;background:var(--sand);border-bottom:1px solid var(--line);white-space:nowrap}
.btbl td{padding:11px 14px;border-bottom:1px solid var(--line2);color:var(--ink2);vertical-align:top}
.btbl tr:last-child td{border-bottom:0}
.btbl b{color:var(--ink)}

.bcta{background:var(--brand-l);border:1px solid #CFE2E9;border-radius:12px;padding:16px 18px;
  margin:22px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.bcta p{margin:0;font-weight:650;color:var(--brand-d);font-size:15px}
.bcta .btn{flex:none}

.bnote{border-left:3px solid var(--brand);background:var(--sand);border-radius:0 10px 10px 0;
  padding:13px 16px;margin:18px 0;font-size:15px;line-height:1.6;color:var(--ink2)}

.bfig{margin:22px 0}
.bfig img{width:100%;height:auto;border-radius:12px;display:block}
.bfig figcaption{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.5}

.bfaq{border-top:1px solid var(--line)}

/* kaarten: op de index en onder een artikel ("verder lezen") */
.bcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:14px 0 0}
.bcards-lg{margin-top:22px}
.bcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:block;
  transition:border-color .12s,box-shadow .12s}
.bcard:hover{border-color:var(--brand);box-shadow:var(--sh);text-decoration:none}
.bcard img{width:100%;height:150px;object-fit:cover;display:block;background:var(--sand)}
.bcard > div{padding:13px 15px 15px}
.bcat{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--brand);
  font-weight:700;margin-bottom:4px}
.bcard b{display:block;color:var(--ink);font-size:16px;line-height:1.3;margin-bottom:5px}
.bex{display:block;font-size:13.5px;color:var(--muted);line-height:1.5}