@charset "utf-8";
/* 100HalalHotels.nl - site.css
   Mobile-first. Design tokens volgen de huisstijl.
   Twee afwijkingen, beide om WCAG 2.2 AA te halen (de huisstijl eist AA zelf):
   - statusbadges Afgeleid/Te verifieren dragen Charcoal tekst in plaats van
     Ivory (Ivory op #69AEB7 = 2,37:1 en op #D4A34E = 2,16:1, beide onvoldoende);
   - de linkhover is een donkerder Sea Blue (#2E7A88, 4,65:1) omdat #5FA6B3 op
     Ivory op 2,61:1 uitkomt. Beide waarden zijn doorgerekend, niet geschat. */

/* ---------- fonts ---------- */
@font-face{font-family:"Sora";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/assets/fonts/sora-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(/assets/fonts/sora-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens ---------- */
:root{
  --teal:#0D3B3E; --teal-hover:#145457; --sea:#5FA6B3; --sand:#E9D8B6;
  --ivory:#FAF8F4; --charcoal:#1F2326; --gold:#C9A66B;
  --surface:#fff; --surface-warm:#F5F1EA; --surface-blue:#EDF5F6;
  --border:#DDD8CF; --muted:#5E686C; --link-hover:#2E7A88;
  --st-confirmed:#0D4B4D; --st-derived:#69AEB7; --st-verify:#D4A34E; --st-absent:#35393C;

  --r-btn:12px; --r-card:16px; --r-panel:24px; --r-pill:999px; --r-hero:20px;
  --sh-card:0 6px 24px rgba(13,59,62,.08); --sh-float:0 12px 36px rgba(13,59,62,.12);
  --f-head:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:80rem; --prose:70ch;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;
}

/* ---------- basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--charcoal);
  font-family:var(--f-body);font-size:1rem;line-height:1.65;
  overflow-wrap:break-word;word-break:normal}
img,svg{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--teal);
  line-height:1.2;letter-spacing:-.015em;margin:0 0 var(--s4)}
h1{font-size:clamp(1.9rem,5.2vw,2.75rem);line-height:1.14;font-weight:700}
h2{font-size:clamp(1.5rem,3.6vw,2rem);font-weight:600;margin-top:var(--s7)}
h3{font-size:clamp(1.25rem,2.6vw,1.5rem);font-weight:600;margin-top:var(--s6)}
h4{font-size:1.125rem;font-weight:600;margin-top:var(--s5)}
p,ul,ol,table,figure{margin:0 0 var(--s4)}
/* Geen onderstreping, behalve waar een link middenin lopende tekst staat.
   Daar is de streep de enige aanwijzing: de linkkleur haalt 1,29:1 tegen de
   bodytekst, ver onder de 3:1 die WCAG vraagt als kleur het alleen moet doen.
   Een linkkleur zoeken die dat wel haalt kan, maar die is fors lichter dan het
   merkteal en zit op elke achtergrond precies op de AA-grens.
   In kaarten, lijsten, tabellen en navigatie maakt de context al duidelijk dat
   er iets aanklikbaar is, dus daar kan de streep weg. */
a{color:var(--teal);text-decoration:none;
  text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--link-hover)}
.prose a,.faq__answer a,.note a,.hotel-facts a,.verdict a{text-decoration:underline}
/* Een lijstitem dat uit niets anders bestaat dan de link is navigatie, geen
   lopende tekst: daar wijst de opsomming zelf al aan dat er iets te kiezen
   valt. Alleen een link tussen andere woorden houdt zijn streep. */
.prose li>a:only-child{text-decoration:none}
:where(a,button,summary,input,select,[tabindex]):focus-visible{
  outline:3px solid var(--link-hover);outline-offset:2px;border-radius:4px}
strong,b{font-weight:600}
hr{border:0;border-top:1px solid var(--border);margin:var(--s6) 0}
small{font-size:.875rem}

.wrap{width:min(100% - 2rem,var(--wrap));margin-inline:auto}
@media(min-width:48rem){.wrap{width:min(100% - 3rem,var(--wrap))}}
.prose{max-width:var(--prose)}
.prose p,.prose li{font-size:1.0625rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;
  padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--s4);top:-10rem;z-index:100;
  background:var(--teal);color:var(--ivory);padding:var(--s3) var(--s4);
  border-radius:var(--r-btn);font-family:var(--f-head);font-weight:600}
.skip-link:focus{top:var(--s4);color:var(--ivory)}

/* ---------- header ---------- */
.site-header{background:var(--ivory);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50}
.site-header__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  min-height:4rem;padding-block:var(--s3)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;
  flex:1 1 auto;min-width:0}
.brand svg{width:1.9rem;height:2.3rem;flex:none}
.brand__name{font-family:var(--f-head);font-weight:600;
  font-size:clamp(1rem,4.4vw,1.15rem);color:var(--teal);letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:clip}
.brand__name b{color:var(--gold);font-weight:600}
.brand__name span{font-size:.75em}
.nav-toggle{display:inline-flex;align-items:center;gap:.5rem;background:none;
  border:1.5px solid var(--teal);color:var(--teal);border-radius:var(--r-btn);
  font-family:var(--f-head);font-weight:600;font-size:.9rem;
  min-height:44px;padding:0 var(--s3);cursor:pointer}
.nav-toggle svg{width:1.1rem;height:1.1rem}
.site-nav{display:none;flex:0 0 100%;padding-bottom:var(--s4)}
.site-nav[data-open="true"]{display:block}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:var(--s1)}
.site-nav a{display:block;min-height:44px;padding:.6rem var(--s3);
  font-family:var(--f-head);font-weight:600;font-size:.95rem;
  text-decoration:none;border-radius:var(--r-btn)}
.site-nav a:hover{background:var(--surface-warm)}
.site-nav a[aria-current="page"]{background:var(--surface-blue);color:var(--teal)}
/* ---- submenu ----
   De ouder blijft een gewone link naar de hub; het openen zit in een aparte
   button met aria-expanded. Een gesloten submenu staat op visibility:hidden en
   valt daarmee bewust buiten de tabvolgorde: anders loopt iemand die tabt eerst
   door 38 submenu-links voordat hij bij de inhoud is.
   Gevolg: zonder JavaScript opent het submenu alleen via hover, niet via het
   toetsenbord. Dat kost geen bereikbaarheid, want elke ouder is zelf een link
   naar de hubpagina en daar staan dezelfde bestemmingen nog een keer. */
.nav-lijst>li{position:relative}
.heeft-sub{display:flex;flex-wrap:wrap;align-items:center}
.heeft-sub>a{flex:1 1 auto}
.sub-toggle{flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;width:44px;min-height:44px;background:none;border:0;
  color:var(--teal);cursor:pointer;border-radius:var(--r-btn)}
.sub-toggle svg{width:1.05rem;height:1.05rem;transition:transform .18s}
.sub-toggle:hover{background:var(--surface-warm)}
.sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.site-nav .submenu{flex:0 0 100%;display:none;margin:0 0 var(--s2);
  padding:0 0 0 var(--s3);border-left:2px solid var(--border)}
.site-nav .submenu a{font-weight:500;font-size:.9rem;min-height:40px;padding:.5rem var(--s3)}
.site-nav .sub-toggle[aria-expanded="true"]+.submenu{display:block}

@media(min-width:64rem){
  .nav-toggle{display:none}
  .site-nav{display:block!important;padding:0;flex:0 0 auto}
  .site-header__bar{flex-wrap:nowrap;gap:var(--s4)}
  .site-nav .nav-lijst{flex-direction:row;gap:var(--s1);align-items:center}
  .site-nav a{padding:.5rem .7rem}
  .heeft-sub{flex-wrap:nowrap}
  .heeft-sub>a{padding-right:.15rem}
  .sub-toggle{width:1.8rem;min-height:2.2rem}
  .site-nav .submenu{position:absolute;top:100%;left:0;z-index:60;display:block;
    min-width:15rem;margin:0;padding:var(--s2);border-left:0;
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--r-card);box-shadow:var(--sh-float);
    opacity:0;visibility:hidden;transform:translateY(-.35rem);
    transition:opacity .16s,transform .16s,visibility .16s}
  .site-nav .heeft-sub:hover>.submenu,
  .site-nav .heeft-sub:focus-within>.submenu,
  .site-nav .sub-toggle[aria-expanded="true"]+.submenu{
    opacity:1;visibility:visible;transform:none}
  .site-nav .nav-lijst>li:last-child .submenu,
  .site-nav .nav-lijst>li:nth-last-child(2) .submenu{left:auto;right:0}
}
@media(prefers-reduced-motion:reduce){
  .site-nav .submenu{transition:none}
  .sub-toggle svg{transition:none}
}

/* ---- kaart met beeld ---- */
/* .card verderop in dit bestand zet padding op var(--s5). Bij gelijke
   specificiteit wint de laatste regel, dus zonder deze verhoging kreeg elk
   kaartbeeld een witte rand van 1,5rem en oogde de kaart veel te ruim. */
.card.card--beeld{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card__media,.card__tile{aspect-ratio:2/1;overflow:hidden;background:var(--teal)}
.card__media img{width:100%;height:100%;object-fit:cover;display:block}
.card__tile{position:relative;display:grid;place-items:center}
.card__tile::after{content:"";position:absolute;inset:0;opacity:.20;
  background:url(/assets/img/brand/geometric-repeat.svg) repeat;background-size:120px 120px}
.card__tile-tekst{position:relative;z-index:1;font-family:var(--f-head);
  font-weight:600;color:var(--sand);font-size:1.05rem;text-align:center;padding:0 var(--s3)}
.card__body{padding:var(--s4) var(--s5) var(--s5);display:flex;
  flex-direction:column;gap:var(--s2);flex:1}
/* De kop draagt hier zijn eigen ondermarge niet: de flex-gap regelt de afstand
   al, en samen gaven ze een gat waar de kaart leeg van oogde. */
.card__body h3{margin:0;font-size:1.1875rem;line-height:1.3}
/* Kaartkoppen zijn al herkenbaar als aanklikbaar door de kaart eromheen; een
   streep eronder maakt het raster onrustig. De kleurwissel bij hover en de
   focusring blijven, dus er gaat geen aanwijzing verloren. */
.card__body h3 a{text-decoration:none;color:var(--teal)}
.card__body h3 a:hover{color:var(--link-hover);text-decoration:none}
/* Het beeld linkt naar dezelfde pagina als de kop. Als blok, anders houdt de
   inline-a een regelhoogte over onder de foto. */
.card__link{display:block;text-decoration:none}
.card__body p{margin:0}
.card__body p:last-child{margin-bottom:0}


/* ---------- hero ---------- */
.hero{background:var(--teal);color:var(--ivory);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
  background:url(/assets/img/brand/geometric-repeat.svg) repeat;background-size:190px 190px}
.hero__inner{position:relative;z-index:1;padding-block:var(--s7) var(--s7)}
@media(min-width:64rem){.hero__inner{padding-block:var(--s8)}}
.hero h1{color:var(--ivory);max-width:22ch}
.hero__kicker{font-family:var(--f-head);font-weight:600;font-size:.8125rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold);
  margin:0 0 var(--s3);display:flex;align-items:center;gap:.55rem}
.hero__kicker::before{content:"";width:1.5rem;height:1px;background:var(--gold)}
.hero__lead{font-size:clamp(1.0625rem,2.2vw,1.25rem);max-width:56ch;
  color:#E8EEEC;margin-bottom:var(--s5)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
.hero__media{margin-top:var(--s5);border-radius:var(--r-hero);overflow:hidden;
  box-shadow:var(--sh-float);background:#0A2E30}
.hero__media img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
.hero__grid>*{min-width:0}
.hero--split .hero__actions{margin-top:var(--s5)}
@media(min-width:64rem){
  .hero--split .hero__grid{display:grid;gap:0 var(--s7);
    grid-template-columns:1fr 1fr;align-items:center;
    grid-template-areas:"txt beeld" "acties beeld"}
  .hero--split .hero__txt{grid-area:txt}
  .hero--split .hero__media{grid-area:beeld;margin-top:0}
  .hero--split .hero__actions{grid-area:acties;margin-top:var(--s5);align-self:start}
  .hero--split h1{max-width:none}
}
/* ---------- hero met het beeld als achtergrond ----------
   Het beeld stond eerst in een kader naast de tekst, met een schaduw die op
   het donkere vlak als een lichte rand leest. Nu vult het de hele hero.

   De sluier is berekend, niet gekozen. Over het slechtst denkbare beeldpunt
   -- helder wit -- geeft een teal-sluier van 0,72 nog 4,9:1 voor de ivoren
   tekst en 4,5:1 voor de lead; daaronder zakt het door de AA-eis. Links, waar
   de tekst staat, zit het verloop daar ruim boven; naar rechts loopt het terug
   zodat de foto daar gewoon te zien is. Op mobiel staat de tekst over de volle
   breedte, dus daar dekt de sluier overal even zwaar. */
.hero--beeld{position:relative;isolation:isolate}
.hero__achtergrond{position:absolute;inset:0;margin:0;border-radius:0;
  box-shadow:none;overflow:hidden;z-index:-2}
.hero__achtergrond img{display:block;width:100%;height:100%;aspect-ratio:auto;
  object-fit:cover;object-position:center}
.hero--beeld::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(13,59,62,.90),rgba(13,59,62,.86))}
@media(min-width:64rem){
  .hero--beeld::before{background:linear-gradient(to right,
    rgba(13,59,62,.96) 0%,rgba(13,59,62,.92) 56%,rgba(13,59,62,.70) 74%,
    rgba(13,59,62,.40) 90%,rgba(13,59,62,.32) 100%)}
  .hero--beeld .hero__txt,.hero--beeld .hero__actions{max-width:34rem}
}
/* Het patroonvlak hoort over de foto, niet eronder. */
.hero--beeld::after{z-index:-1}

.paspoort-demo{max-width:44rem;margin-inline:auto}
/* Beeld en paspoort horen bij elkaar, dus vormen ze één paneel: dezelfde
   omlijsting, dezelfde schaduw, geen tussenruimte. Los naast elkaar met een
   gat ertussen lezen ze als twee losse blokken die toevallig naast elkaar
   staan, en dan valt bovendien op dat de foto korter is dan de lijst. */
.paspoort-demo--beeld{max-width:none;display:grid;gap:0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-panel);box-shadow:var(--sh-card);overflow:hidden}
@media(min-width:64rem){
  .paspoort-demo--beeld{grid-template-columns:minmax(0,1fr) minmax(24rem,1.05fr);
    align-items:stretch}
}
/* Het paspoort zit al in het gezamenlijke paneel; een eigen rand, radius en
   schaduw zouden een tweede kader binnen het eerste tekenen. */
.paspoort-demo--beeld .paspoort{border:0;border-radius:0;box-shadow:none;
  background:transparent;display:flex;flex-direction:column}
.paspoort-demo--beeld .paspoort__rows{flex:1}
/* De carrousel vult de volle hoogte van de lijst ernaast, zodat de onderrand
   van beide op dezelfde lijn eindigt. */
.paspoort-demo--beeld .galerij,
.paspoort-demo--beeld .galerij__spoor,
.paspoort-demo--beeld .galerij__item{height:100%}
.paspoort-demo--beeld .galerij__item img{height:100%;aspect-ratio:auto;
  border-radius:0}
.paspoort-demo--beeld .galerij__spoor{border-radius:0}
/* Het bijschrift telt hier dubbel: de teller rechtsonder noemt het aantal al,
   en in dit paneel zou de regel de onderrand van het beeld doorbreken. */
.paspoort-demo--beeld .galerij__bijschrift{display:none}
.paspoort-demo .paspoort{margin:0}

.page-head{padding-block:var(--s6) var(--s2)}
.page-head h1{margin-bottom:var(--s3)}
.page-head .lead{font-size:clamp(1.0625rem,2vw,1.1875rem);color:var(--charcoal);
  max-width:62ch}

/* ---------- breadcrumbs ---------- */
/* Het kruimelpad plakte tegen de eerste alinea. */
.breadcrumb{padding-block:var(--s4) var(--s6);font-size:.875rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}
.breadcrumb li{display:flex;align-items:center;gap:.35rem;color:var(--muted)}
/* 23px hoog bleef net onder de 24px die WCAG 2.5.8 voor een los raakvlak
   vraagt. Een kruimelpadlink is navigatie, geen link in een lopende zin, dus
   de uitzondering voor inline links geldt hier niet. */
.breadcrumb a{display:inline-flex;align-items:center;min-height:24px}
.breadcrumb li+li::before{content:"/";color:var(--border)}
.breadcrumb a{color:var(--muted)}

/* ---------- buttons ---------- */
/* Elke knop heeft dezelfde buitenmaat: de rand staat ook op de gevulde
   variant, zodat een primaire en een secundaire knop naast elkaar exact even
   hoog en even hoog uitgelijnd zijn. Zonder die rand scheelde het 3 px en
   stonden ze zichtbaar scheef. text-align:center houdt een knop die over twee
   regels breekt netjes; align-items:center doet de verticale helft. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.6rem 1.5rem;border-radius:var(--r-btn);
  border:1.5px solid transparent;box-sizing:border-box;
  font-family:var(--f-head);font-weight:600;font-size:.9375rem;line-height:1.25;
  letter-spacing:.005em;text-align:center;text-decoration:none;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s,box-shadow .18s,transform .08s}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--teal);border-color:var(--teal);color:var(--ivory);
  box-shadow:0 1px 2px rgba(13,59,62,.18)}
.btn--primary:hover{background:var(--teal-hover);border-color:var(--teal-hover);
  color:var(--ivory);box-shadow:0 3px 10px rgba(13,59,62,.22)}
/* Een doorzichtige knop op een warme ondergrond leest als tekst met een lijntje
   eromheen. Een eigen vlak maakt hem herkenbaar als knop zonder hem met de
   primaire te laten concurreren. */
.btn--secondary{background:var(--surface);border-color:var(--teal);color:var(--teal);
  box-shadow:0 1px 2px rgba(13,59,62,.08)}
.btn--secondary:hover{background:var(--surface-blue);border-color:var(--teal-hover);
  color:var(--teal-hover);box-shadow:0 3px 10px rgba(13,59,62,.14)}
/* Compacte variant voor in een tabelcel. 36 px hoog blijft ruim boven de
   24 px die WCAG 2.5.8 als doelgrootte vraagt. */
/* Vaste breedte, zodat elke boekingsknop in elke tabel dezelfde maat heeft.
   Op een regel werd hij 256 px en domineerde hij de tabel; hij mag hier over
   twee regels breken. Daarmee is ook de hoogte overal gelijk. */
.btn--tabel{width:9.25rem;min-height:44px;padding:.35rem .7rem;
  font-size:.8125rem;line-height:1.25;border-radius:10px;background:var(--teal);
  border-color:var(--teal);color:var(--ivory);white-space:normal}
.btn--tabel:hover{background:var(--teal-hover);border-color:var(--teal-hover);
  color:var(--ivory)}
/* Een rij knoppen: gelijke hoogte, nette afstand, en op mobiel netjes onder
   elkaar in plaats van tegen elkaar aan. */
.btn-rij{display:flex;flex-wrap:wrap;align-items:stretch;gap:var(--s3);
  margin:var(--s5) 0 0}
.btn-rij .btn{flex:0 1 auto}
.btn--on-dark{background:var(--ivory);color:var(--teal)}
.btn--on-dark:hover{background:#fff;color:var(--teal)}
.btn--ghost{border-color:var(--ivory);color:var(--ivory);background:transparent}
.btn--ghost:hover{background:rgba(250,248,244,.12);color:var(--ivory)}
.btn--block{width:100%}
.btn svg{width:1.05rem;height:1.05rem;flex:none}

/* ---------- checklist met vinkvakjes ----------
   Vier losse kaarten lazen als vier mededelingen. Als lijst zie je dat het om
   een reeks gaat die per voorziening wordt afgelopen. Het vakje draagt het
   teken van de status, dus kleur is niet de enige drager. */
.checklijst{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;
  gap:var(--s3)}
@media(min-width:52rem){
  .checklijst{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s4)}
}
.checklijst__rij{display:flex;gap:var(--s3);align-items:flex-start;min-width:0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:var(--s4)}
.checkvak{flex:none;width:2.125rem;height:2.125rem;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center}
.checkvak--confirmed{background:var(--st-confirmed);color:var(--ivory)}
.checkvak--derived{background:var(--st-derived);color:var(--charcoal)}
.checkvak--verify{background:var(--st-verify);color:var(--charcoal)}
.checkvak--absent{background:var(--st-absent);color:var(--ivory)}
.checklijst__label{margin:0 0 .15rem;font-family:var(--f-head);font-weight:600;
  color:var(--teal)}
.checklijst__uitleg{margin:0;color:var(--muted);font-size:.9375rem;line-height:1.5}

/* ---------- lege tabelcellen ----------
   Een leeg vak leest als een weergavefout. Het streepje zegt dat wij het niet
   weten; de reden staat ernaast als verborgen tekst. */
.leeg{color:var(--muted);opacity:.75}
.leeg-uitleg{color:var(--muted);font-size:.8125rem;line-height:1.3;display:inline-block}
.boekcel{white-space:normal}

/* ---------- Verder kijken ----------
   Panelen met het beeld van de doelpagina in plaats van een rij pillen. */
.verder{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;
  gap:var(--s4);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:48rem){.verder{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:72rem){.verder{grid-template-columns:repeat(4,minmax(0,1fr))}}
.verder__kaart{display:flex;flex-direction:column;height:100%;min-width:0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);overflow:hidden;text-decoration:none;
  color:var(--teal);transition:box-shadow .18s,transform .18s,border-color .18s}
.verder__kaart:hover{box-shadow:0 8px 22px rgba(13,59,62,.14);
  transform:translateY(-2px);border-color:var(--teal)}
.verder__beeld{display:block;aspect-ratio:2/1;background:var(--surface-warm)}
.verder__beeld img,.verder__beeld .hcard__vlak{display:block;width:100%;height:100%;
  object-fit:cover}
.verder__naam{display:block;padding:var(--s3) var(--s4);font-family:var(--f-head);
  font-weight:600;font-size:.9375rem;line-height:1.3}

/* De landkolom staat los van de plaats: dat leest rustiger dan
   "Marrakech, Marokko" in elke rij, en je kunt erop sorteren. */
td.land{color:var(--muted);white-space:nowrap}

/* ---------- secties ---------- */
.section{padding-block:var(--s7)}
.section--warm{background:var(--surface-warm)}
.section--blue{background:var(--surface-blue)}
.section--dark{background:var(--teal);color:var(--ivory);position:relative;overflow:hidden}
.section--dark h2,.section--dark h3{color:var(--ivory)}
.section--dark::after{content:"";position:absolute;inset:0;opacity:.07;pointer-events:none;
  background:url(/assets/img/brand/geometric-repeat.svg) repeat;background-size:190px 190px}
.section--dark>*{position:relative;z-index:1}
.section__head{margin-bottom:var(--s5);max-width:60ch}
.section__head h2{margin-top:0}
.section__head p{color:var(--muted);margin-bottom:0}
.section--dark .section__head p{color:#CBD9D7}
.kicker{font-family:var(--f-head);font-weight:600;font-size:.75rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  margin:0 0 var(--s2)}
.section--dark .kicker{color:var(--gold)}
.divider{display:block;width:100px;height:14px;margin:var(--s6) 0;
  background:url(/assets/img/brand/divider-diamond.svg) no-repeat left center;
  background-size:contain}

/* ---------- grids ---------- */
.grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:40rem){.grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:64rem){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.grid>*{min-width:0}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:var(--s5);min-width:0}
.card h3{margin-top:0}
/* Zonder eigen maat groeit een inline SVG hier tot de volle kaartbreedte: de
   globale regel img,svg{max-width:100%;height:auto} geeft geen bovengrens.
   Het icoon hoort een merkteken boven de kop te zijn, geen illustratie. */
.card h3 svg{display:block;width:2.25rem;height:2.25rem;margin-bottom:var(--s3)}
.card p:last-child{margin-bottom:0}
.card--warm{background:var(--surface-warm)}
.card--dark{background:var(--teal);color:var(--ivory);border-color:transparent}
.card--dark h3{color:var(--ivory)}

/* hotelkaart */
.hcard{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;
  transition:transform .18s,box-shadow .18s;min-width:0}
.hcard:hover{transform:translateY(-4px);box-shadow:var(--sh-float)}
.hcard__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--teal)}
.hcard__media img{width:100%;height:100%;object-fit:cover;display:block}
/* Merkvlak waar geen eigen foto van het pand bestaat. Bewust vlak en rustig:
   het moet als merk lezen, niet als een foto die niet geladen is. */
.hcard__vlak{position:absolute;inset:0;background:var(--teal)}
.hcard__vlak::after{content:"";position:absolute;inset:0;opacity:.22;
  background:url(/assets/img/brand/geometric-repeat.svg) repeat;background-size:96px 96px}
/* De meter staat rechtsboven in het tekstdeel, naast de hotelnaam. Over het
   beeld gelegd had hij een verloopband nodig om leesbaar te blijven, en die
   band verduisterde juist de onderrand van de foto. */
.hcard__kop{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s3)}
.hcard__kop .hcard__name{flex:1 1 auto;min-width:0}
.hcard__meter{flex:none;display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--f-head);font-weight:600;font-size:.75rem;color:var(--muted);
  background:var(--surface-blue);border-radius:var(--r-pill);
  padding:.25rem .6rem .25rem .4rem;white-space:nowrap}
.hcard__body{padding:var(--s4) var(--s5) var(--s5);display:flex;
  flex-direction:column;gap:var(--s3);flex:1}
.hcard__name{font-family:var(--f-head);font-weight:600;font-size:1.1875rem;
  color:var(--teal);margin:0;line-height:1.3}
.hcard__name a{text-decoration:none;color:inherit}
.hcard__name a:hover{color:var(--link-hover)}
.hcard__meta{display:flex;flex-wrap:wrap;gap:.35rem var(--s3);font-size:.875rem;
  color:var(--muted);margin:0}
.hcard__note{margin:0;font-size:.9375rem}
/* De knop erfde de standaardhoogte van 48px, wat naast een pil van 28px uit
   balans oogt. In een kaart mag hij compacter; align-items:center zet beide op
   dezelfde middellijn. */
.hcard__foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s3);justify-content:space-between}
.hcard__foot .btn{min-height:40px;padding:.4rem 1.1rem;font-size:.875rem}
.hcard__score{align-self:center}
.hcard__score{font-family:var(--f-head);font-weight:600;font-size:.875rem;
  color:var(--teal);background:var(--surface-blue);border-radius:var(--r-pill);
  padding:.3rem .7rem;white-space:nowrap}

/* ---------- badges ---------- */
.badges{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.badge{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  border-radius:var(--r-pill);
  font-family:var(--f-head);font-weight:600;font-size:.75rem;line-height:1.2;
  padding:.4rem .75rem;white-space:nowrap}
.badge svg{width:.95rem;height:.95rem;flex:none}
.badge--feature{background:var(--surface);border:1px solid var(--border);color:var(--charcoal)}

/* Kenmerklabels dragen elk hun eigen tint. Acht identieke witte pillen lezen
   als een opsomming; met kleur herken je de voorziening al voor je het label
   leest. Alle tinten zijn licht met donkere tekst, zodat het contrast ruim
   binnen AA blijft -- dat wordt bij de build doorgerekend. */
.badge--kenmerk{border:1px solid transparent;color:var(--teal);
  background:var(--surface-blue);border-radius:var(--r-pill)}
.badge--kenmerk svg{stroke:currentColor;opacity:.9}
.badge--halal-food{background:#F3EAD8;color:#5A4212}
.badge--alcohol-free{background:#E4F0F2;color:#0F4145}
.badge--women-pool{background:#E2EFF3;color:#124A56}
.badge--private-pool{background:#DEEDEA;color:#0E4740}
.badge--beach{background:#F5EBD5;color:#5C4514}
.badge--spa{background:#EDE8F1;color:#43335A}
.badge--prayer-room{background:#E7F0E6;color:#25482A}
.badge--family{background:#F6E9E4;color:#5E3423}

/* Dekkingsmeter: achtpuntige ster, een punt per kenmerk. Geen halal-score maar
   een bewijsteller -- zie de toelichting bij render.dekkingsmeter. */
/* Een plaats onder zijn land in het submenu. Het streepje maakt de nesting
   ook zichtbaar als de inspringing wegvalt, bijvoorbeeld bij grote tekst. */
/* Even specifiek als .site-nav .submenu a hierboven, anders wint die regel
   met zijn eigen padding en valt de inspringing weg. */
.site-nav .submenu .submenu__kind>a{padding-left:var(--s6);position:relative}
.submenu__kind>a::before{content:"";position:absolute;left:var(--s4);
  top:calc(50% - 1px);width:.55rem;height:2px;background:currentColor;opacity:.45}

.ster{display:inline-flex;align-items:center;gap:.45rem;flex:none}
.ster svg{width:2.6rem;height:2.6rem;flex:none;overflow:visible}
.ster__punt{fill:currentColor;opacity:.22}
.ster__punt.is-aan{opacity:1;fill:var(--ster-kleur,var(--gold))}
/* De trap loopt van bevestigd-groen naar neutraal grijs, niet naar rood: een
   lage stand betekent weinig bewijs, geen slechte accommodatie. Deze tinten
   zijn zo gekozen dat ze zowel op het lichte paspoortblok als op de donkere
   band over de kaartfoto leesbaar blijven. */
.ster--hoog{--ster-kleur:#3E9E6B}
.ster--midden{--ster-kleur:#5FA6B3}
.ster--laag{--ster-kleur:#D4A34E}
.ster--weinig{--ster-kleur:#9AA6A9}
.ster b{font-weight:600;font-size:1.375rem;font-family:var(--f-head);
  font-variant-numeric:tabular-nums;line-height:1}
/* Op de kaart ligt de meter op de foto; daar telt compactheid zwaarder dan
   afleesbaarheid van de losse punten. */
.ster--klein svg{width:1.5rem;height:1.5rem}
.ster--klein b{font-size:1rem}

/* Thumbnail in de naamcel van een vermeldingstabel. De cel wordt een flexrij
   zodat een lange hotelnaam naast het beeld doorloopt in plaats van eronder. */
th.naam{display:flex;align-items:center;gap:var(--s3)}
.rijbeeld{width:56px;height:56px;flex:none;border-radius:10px;object-fit:cover;
  background:var(--surface-blue)}
.rijbeeld--leeg{position:relative;overflow:hidden;background:var(--teal);display:block}
.rijbeeld--leeg::after{content:"";position:absolute;inset:0;opacity:.28;
  background:url(/assets/img/brand/geometric-repeat.svg) repeat;background-size:56px 56px}
.badge--confirmed{background:var(--st-confirmed);color:var(--ivory)}
.badge--derived{background:var(--st-derived);color:var(--charcoal)}
.badge--verify{background:var(--st-verify);color:var(--charcoal)}
.badge--absent{background:var(--st-absent);color:var(--ivory)}
.badge--confirmed svg,.badge--absent svg{stroke:var(--ivory)}
.badge--derived svg,.badge--verify svg{stroke:var(--charcoal)}
.badge--feature svg{stroke:var(--teal)}

/* ---------- Halal Hotel Paspoort ---------- */
.paspoort{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-panel);box-shadow:var(--sh-card);overflow:hidden;
  margin-block:var(--s5)}
/* Twee kolommen in plaats van een flexrij met wrap. Als flexrij viel de
   legenda op een eigen regel terwijl de dekkingsmeter rechtsboven bleef
   hangen, met een leeg vlak tussen de twee. Nu staan titel en legenda onder
   elkaar links, en staat de meter daar over de volle hoogte naast. */
.paspoort__head{padding:var(--s5);border-bottom:1px solid var(--border);
  background:var(--surface-warm);display:grid;gap:var(--s4)}
@media(min-width:56rem){
  .paspoort__head{grid-template-columns:minmax(0,1fr) auto;
    column-gap:var(--s5);align-items:center}
  .paspoort__head>div:first-child,
  .paspoort__legenda{grid-column:1}
  .paspoort__dekking{grid-column:2;grid-row:1/span 2;align-self:center}
}
.paspoort__head h2{margin:0;font-size:1.375rem}
.paspoort__head p{margin:.25rem 0 0;font-size:.875rem;color:var(--muted)}
.paspoort__legenda{display:flex;flex-wrap:wrap;gap:.35rem}
.paspoort__dekking{display:flex;align-items:center;gap:var(--s3);margin:0;
  padding:var(--s3) var(--s4);background:var(--surface-blue);
  border-radius:var(--r-card);font-size:.9375rem;color:var(--teal);max-width:26rem}
.paspoort__dekking .ster{color:var(--teal)}
.paspoort__dekking small{color:var(--muted);font-size:.8125rem;line-height:1.4;
  display:inline-block;margin-top:.15rem}
.paspoort__rows{margin:0;padding:0;list-style:none}
.paspoort__row{display:grid;gap:.35rem var(--s4);padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--border);min-height:44px;
  align-content:center;align-items:center}
.paspoort__row:last-child{border-bottom:0}
.paspoort__kenmerk{display:flex;align-items:center;gap:.55rem;
  font-family:var(--f-head);font-weight:600;font-size:.9375rem;color:var(--teal)}
.paspoort__kenmerk svg{width:1.25rem;height:1.25rem;flex:none;stroke:var(--teal)}
.paspoort__toel{font-size:.9375rem;color:var(--muted);margin:0}
/* Pas vanaf 56rem drie kolommen. Op 48rem hield de toelichting maar 231px
   over naast een label van 240 en een badge van 152: dat leest als een
   afgeknepen kolom in plaats van als een zin. Onder die breedte stapelt de rij,
   wat op een tablet in portret prettiger leest. */
@media(min-width:56rem){
  .paspoort__row{grid-template-columns:15rem 9.5rem 1fr;align-items:center}
  .paspoort__toel{grid-column:3}
  /* De demo heeft geen toelichtingskolom; anders staat de badge tegen een
     lege derde kolom aan te kijken. */
  .paspoort--demo .paspoort__row{grid-template-columns:1fr auto}
}
.paspoort--demo .paspoort__row{align-items:center}
.paspoort--demo .badge{justify-self:end}
.paspoort__foot{padding:var(--s4) var(--s5);background:var(--surface-blue);
  font-size:.875rem;color:var(--muted);display:flex;flex-wrap:wrap;
  gap:var(--s3);justify-content:space-between;align-items:center}
.paspoort__foot p{margin:0}

/* ---------- lijsten ---------- */
.checklist,.watchlist{list-style:none;margin:0 0 var(--s4);padding:0}
.checklist li,.watchlist li{position:relative;padding-left:1.9rem;margin-bottom:.6rem}
.checklist li::before{content:"";position:absolute;left:0;top:.42em;width:1.1rem;height:.6rem;
  border-left:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);
  transform:rotate(-45deg)}
.watchlist li::before{content:"";position:absolute;left:.2rem;top:.5em;width:.7rem;height:.7rem;
  border:2.5px solid var(--sea);border-radius:50%}
/* gap .5rem liet twee rijen pillen bijna tegen elkaar aan liggen, terwijl de
   rasters elders op var(--s4) staan. --s3 houdt de rijen los zonder dat de
   lijst uit elkaar valt. */
/* ---------- punten: plus, vraagteken, min ---------- */
/* Drie tekens met elk een eigen betekenis. De kleur ondersteunt, maar draagt
   het niet alleen: het teken zelf verschilt, en de betekenis staat als
   verborgen tekst in de regel. */
.puntenlijst{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.puntenlijst li{display:flex;align-items:flex-start;gap:.65rem;margin:0}
.punt__teken{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;margin-top:.1rem;border-radius:50%;
  font-family:var(--f-head);font-weight:600;font-size:.9375rem;line-height:1}
.punt--plus .punt__teken{background:#E1F0E7;color:#1E5A38}
.punt--onbekend .punt__teken{background:#F7EBD3;color:#6B4E12}
.punt--afwezig .punt__teken{background:#EDEFF0;color:#3A4246}

/* ---------- toplijstkaart ---------- */
/* Genummerde selectie met beeld. Het rangnummer ligt linksboven op de foto in
   plaats van als losse regel boven de naam: dat kostte een hele tekstregel
   voor een enkel cijfer, en het cijfer hoort bij het beeld. */
.toplijst .hcard__media{position:relative}
.toplijst__rang{position:absolute;left:var(--s3);top:var(--s3);z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:2rem;height:2rem;padding:0 .45rem;border-radius:var(--r-pill);
  background:var(--teal);color:var(--sand);
  font-family:var(--f-head);font-weight:600;font-size:1rem;line-height:1;
  box-shadow:0 2px 10px rgba(9,32,34,.35)}
.toplijst .hcard__name{margin:0}
/* De khatim naast de opsomming: de meter zegt hoeveel van de acht kenmerken
   bevestigd zijn, de tekst zegt welke. Ze horen bij elkaar en staan daarom in
   een rij, met de meter op vaste breedte zodat de tekstkolom niet springt. */
.toplijst__dekking{display:flex;gap:var(--s3);align-items:flex-start;min-width:0}
.toplijst__dekking svg{flex:none}
.toplijst__bev{margin:0;font-size:.9375rem;color:var(--muted)}
.toplijst__bev b{color:var(--teal)}
.toplijst__actie{margin:auto 0 0}
.toplijst__actie .btn{min-height:40px;padding:.4rem 1.1rem;font-size:.875rem}

/* ---------- criterialijst ---------- */
/* De kale vinklijst las als bijzin. Als genummerde kaartjes op een zachte
   ondergrond wordt zichtbaar dat het regels zijn waar de selectie op berust. */
.criteria{list-style:none;margin:0 0 var(--s4);padding:0;display:grid;
  gap:var(--s2);counter-reset:criterium}
.criteria li{counter-increment:criterium;position:relative;margin:0;
  padding:var(--s3) var(--s4) var(--s3) 3.1rem;
  background:var(--surface-blue);border-radius:var(--r-card);
  font-size:1rem}
.criteria li::before{content:counter(criterium);position:absolute;
  left:var(--s3);top:calc(var(--s3) + .1rem);
  display:inline-flex;align-items:center;justify-content:center;
  width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--teal);color:var(--sand);
  font-family:var(--f-head);font-weight:600;font-size:.8125rem;line-height:1}
@media(min-width:48rem){.criteria{grid-template-columns:1fr 1fr}}

.linklist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:var(--s3)}
.linklist a{display:inline-flex;align-items:center;min-height:44px;
  padding:.5rem 1rem;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-pill);font-family:var(--f-head);font-weight:600;
  font-size:.875rem;text-decoration:none}
.linklist a:hover{background:var(--surface-blue)}

/* ---------- tabellen ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--border);
  border-radius:var(--r-card);background:var(--surface);margin-bottom:var(--s4)}
table{border-collapse:collapse;width:100%;font-size:.9375rem;margin:0}
/* Vaste rijhoogte plus ondergrenzen voor de tekstkolommen. De kolommen werden
   verdeeld naar kopbreedte, waardoor "Dameszwembad" 167 px kreeg en de
   plaatsnaam 112 px -- en daar brak "Marmaris, Egeische kust" over drie
   regels terwijl de buurrij er een had. Met deze maten past alles in ten
   hoogste drie regels en komt elke rij op dezelfde hoogte uit. */
tbody td,tbody th{height:5.75rem}
th.naam,td.plaats{min-width:9rem}
.table-uitleg{margin:0 0 var(--s3);color:var(--muted);font-size:.875rem;
  max-width:var(--prose)}
/* Verticaal gecentreerd en een vaste rijhoogte. Met top-uitlijning hing een
   "Ja" of een streepje bovenin een rij die door een lange hotelnaam twee keer
   zo hoog was als de buurrij; de kolom leek dan uit het lood te staan. De
   hoogte is ruim genoeg voor een naam van twee regels, dus elke rij komt op
   dezelfde maat uit. */
th,td{padding:.85rem .75rem;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--border)}
/* Getallen rechts uitlijnen en op vaste cijferbreedte, anders staan scores en
   bedragen onder elkaar te schuiven. */
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums;
  white-space:nowrap}
thead th.num{padding-right:2rem}
td.naam{font-weight:500}
.table-wrap table{min-width:44rem}
thead th{background:var(--teal);color:var(--ivory);font-family:var(--f-head);
  font-weight:600;font-size:.875rem;white-space:nowrap;position:relative}
tbody tr:nth-child(even){background:var(--surface-warm)}
tbody tr:last-child td{border-bottom:0}
th[data-sort]{cursor:pointer;padding-right:2rem}
th[data-sort]::after{content:"";position:absolute;right:.85rem;top:50%;
  width:0;height:0;margin-top:-2px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid rgba(250,248,244,.45)}
th[aria-sort="ascending"]::after{border-top:0;border-bottom:5px solid var(--gold)}
th[aria-sort="descending"]::after{border-top:5px solid var(--gold)}
.table-filter{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:end;
  margin-bottom:var(--s3)}
.table-filter label{font-family:var(--f-head);font-weight:600;font-size:.8125rem;
  color:var(--teal);display:block;margin-bottom:.3rem}
.table-filter input,.table-filter select{min-height:48px;border-radius:var(--r-btn);
  border:1px solid var(--border);background:var(--surface);padding:0 var(--s3);
  font-family:var(--f-body);font-size:1rem;color:var(--charcoal);min-width:12rem}
.table-filter input:focus,.table-filter select:focus{border-color:var(--teal)}
.table-count{font-size:.875rem;color:var(--muted);margin:0 0 var(--s3)}

/* ---------- FAQ ---------- */
/* De vragen stonden als aaneengesloten blok met 16px binnenruimte, terwijl de
   rest van de pagina met 24px en afgeronde kaarten werkt. Daardoor oogde dit
   deel dichter dan alles eromheen. Nu is elke vraag een eigen kaart met
   dezelfde maatvoering als de andere kaarten op de site. */
.faq{display:grid;gap:var(--s2)}
.faq details{border:1px solid var(--border);border-radius:var(--r-card);
  background:var(--surface);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:var(--s4) 3rem var(--s4) var(--s5);
  font-family:var(--f-head);font-weight:600;font-size:1.0625rem;color:var(--teal);
  position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:var(--s5);top:1.45rem;
  width:.6rem;height:.6rem;border-right:2px solid var(--teal);
  border-bottom:2px solid var(--teal);transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary{background:var(--sand)}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.65rem}
.faq__answer{padding:var(--s4) var(--s5) var(--s5);max-width:var(--prose)}
.faq__answer p:last-child{margin-bottom:0}

/* ---------- notities ---------- */
.note{border-left:3px solid var(--gold);background:var(--surface-warm);
  padding:var(--s4) var(--s5);border-radius:0 var(--r-card) var(--r-card) 0;
  margin-block:var(--s5)}
.note p:last-child{margin-bottom:0}
.note--blue{border-left-color:var(--sea);background:var(--surface-blue)}
.note__title{font-family:var(--f-head);font-weight:600;color:var(--teal);
  margin:0 0 var(--s2);font-size:1rem}

/* ---------- trustbar ---------- */
.trustbar{display:grid;gap:var(--s4);grid-template-columns:1fr;list-style:none;
  margin:0;padding:0}
@media(min-width:40rem){.trustbar{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.trustbar{grid-template-columns:repeat(4,1fr)}}
.trustbar li{display:flex;gap:var(--s3);align-items:flex-start}
.trustbar svg{width:1.75rem;height:1.75rem;flex:none;stroke:var(--gold)}
.trustbar b{display:block;font-family:var(--f-head);font-size:.9375rem;color:var(--ivory)}
.trustbar span{font-size:.875rem;color:#CBD9D7}

/* ---------- hotel intro ---------- */
.hotel-top{display:grid;gap:var(--s5);margin-bottom:var(--s5)}
@media(min-width:64rem){.hotel-top{grid-template-columns:1.6fr 1fr;align-items:start}}
/* Met galerij wordt het een drieluik: het beeld krijgt de brede kolom, de
   introtekst en de kerngegevens staan er rechts naast onder elkaar. */
@media(min-width:64rem){
  .hotel-top--galerij{grid-template-columns:minmax(0,1.45fr) minmax(18rem,1fr);
    grid-template-areas:"beeld tekst" "beeld feiten";align-content:start}
  .hotel-top--galerij .galerij{grid-area:beeld}
  .hotel-top--galerij .prose{grid-area:tekst}
  .hotel-top--galerij .hotel-facts{grid-area:feiten}
}

/* ---------- galerij / carrousel ---------- */
.galerij{margin:0;min-width:0;position:relative}
.galerij__spoor{display:flex;gap:var(--s2);margin:0;padding:0;list-style:none;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  border-radius:var(--r-card);
  /* Firefox en WebKit verbergen de balk verschillend; zonder deze twee
     regels springt de hoogte van de strook per browser. */
  scrollbar-width:none;-ms-overflow-style:none}
.galerij__spoor::-webkit-scrollbar{display:none}
/* snap op start, niet op center: bij center weigert de browser een
   programmatische sprong naar een scrollLeft die niet exact op een snappunt
   valt, en veert de strook terug naar het beeld waar hij stond. */
.galerij__item{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.galerij__item img{display:block;width:100%;height:auto;aspect-ratio:3/2;
  object-fit:cover;border-radius:var(--r-card);background:var(--surface-blue)}
.galerij__bijschrift{margin-top:var(--s2);font-size:.8125rem;color:var(--muted)}
.galerij__knop{position:absolute;top:calc(50% - 1.5rem);width:2.75rem;height:2.75rem;
  display:grid;place-items:center;border:0;cursor:pointer;border-radius:50%;
  background:rgba(9,32,34,.72);color:var(--ivory);font-size:1.25rem;line-height:1;
  transition:background .15s}
.galerij__knop:hover{background:rgba(9,32,34,.9)}
.galerij__knop[disabled]{opacity:.35;cursor:default}
.galerij__knop--vorige{left:var(--s3)}
.galerij__knop--volgende{right:var(--s3)}
.galerij__teller{position:absolute;right:var(--s3);bottom:var(--s3);
  background:rgba(9,32,34,.72);color:var(--ivory);border-radius:var(--r-pill);
  padding:.25rem .7rem;font-size:.75rem;font-family:var(--f-head);font-weight:600;
  font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.galerij__spoor{scroll-behavior:auto}}
.hotel-facts{background:var(--surface-warm);border:1px solid var(--border);
  border-radius:var(--r-card);padding:var(--s5)}
.hotel-facts dl{margin:0;display:grid;grid-template-columns:auto 1fr;
  gap:.55rem var(--s4);font-size:.9375rem}
.hotel-facts dt{font-family:var(--f-head);font-weight:600;color:var(--teal)}
.hotel-facts dd{margin:0}
.verdict{background:var(--surface-blue);border-radius:var(--r-card);
  padding:var(--s5);margin-bottom:var(--s5)}
.verdict h2{margin:0 0 var(--s3);font-size:1.25rem}
.verdict p:last-child{margin-bottom:0}

/* ---------- boeken ---------- */
.boeken{display:grid;gap:var(--s4);margin-bottom:var(--s4)}
@media(min-width:48rem){.boeken{grid-template-columns:repeat(2,1fr)}}
.boeken__item{border:1px solid var(--border);border-radius:var(--r-card);
  padding:var(--s5);background:var(--surface);display:flex;flex-direction:column;gap:var(--s3)}
.boeken__item h3{margin:0;font-size:1.0625rem}
.boeken__item p{margin:0;font-size:.9375rem;color:var(--muted)}
.boeken__item .btn{margin-top:auto}

/* ---------- footer ---------- */
.site-footer{background:var(--teal);color:var(--ivory);margin-top:var(--s8);
  position:relative;overflow:hidden}
.site-footer::after{content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;
  background:url(/assets/img/brand/geometric-repeat.svg) repeat;background-size:190px 190px}
.site-footer>*{position:relative;z-index:1}
.site-footer__grid{display:grid;gap:var(--s6);padding-block:var(--s7);
  grid-template-columns:1fr}
@media(min-width:48rem){.site-footer__grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:64rem){.site-footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.site-footer h2{font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);margin:0 0 var(--s3);font-weight:600}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.5rem}
.site-footer a{color:var(--ivory);text-decoration:none;font-size:.9375rem}
.site-footer a:hover{color:var(--gold)}
.site-footer p{font-size:.9375rem;color:#CBD9D7}
.brand__mark{color:var(--teal);display:inline-flex}
.site-footer .brand__name{color:var(--ivory)}
/* Op de donkere voettekst was het merkteken in teal onzichtbaar. */
.site-footer .brand__mark{color:var(--ivory)}
.site-footer__bottom{border-top:1px solid rgba(250,248,244,.16);
  padding-block:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s3);
  justify-content:space-between;font-size:.8125rem;color:#CBD9D7}
.site-footer__bottom p{margin:0;font-size:.8125rem}

/* ---------- formulier ---------- */
.form{display:grid;gap:var(--s4);max-width:38rem}
.form label{font-family:var(--f-head);font-weight:500;font-size:.8125rem;
  color:var(--teal);display:block;margin-bottom:.35rem}
.form input,.form select,.form textarea{width:100%;min-height:48px;
  border:1px solid var(--border);border-radius:var(--r-btn);background:var(--surface);
  padding:.7rem var(--s3);font-family:var(--f-body);font-size:1rem;color:var(--charcoal)}
.form textarea{min-height:9rem;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(95,166,179,.28)}
.form .hint{font-size:.8125rem;color:var(--muted);margin:.35rem 0 0}
.form-status{margin:0;padding:var(--s4);border-radius:var(--r-btn);font-size:.9375rem}
.form-status[data-state="ok"]{background:var(--surface-blue);color:var(--teal)}
.form-status[data-state="fout"]{background:#F6E7E4;color:#7A2A1D}

/* ---------- 404 ---------- */
.error-page{padding-block:var(--s8)}
.error-page h1{font-size:clamp(2rem,6vw,3rem)}

/* ---- omgevingskaart -------------------------------------------------------
   De kaart en de lijst ernaast zijn een eenheid: dezelfde gegevens, een keer
   getekend en een keer leesbaar. Onder 56rem staan ze onder elkaar met de
   kaart eerst. De kolommen zijn minmax(0,...) en niet 1fr: een 1fr-baan heeft
   min-content als ondergrens, waardoor een lange plaatsnaam de pagina breder
   maakt dan het venster. */
.kaartsectie{margin:var(--s7) 0}
.kaartsectie__body{display:grid;gap:var(--s5);align-items:start}
@media(min-width:56rem){
  .kaartsectie__body{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
}
.kaartfiguur{margin:0;min-width:0}
.kaartfiguur img{display:block;width:100%;height:auto;border:1px solid var(--border);
  border-radius:var(--r-card);background:var(--surface-warm)}
.kaartfiguur figcaption{margin-top:var(--s2);font-size:.8125rem;color:var(--muted)}
.kaartsectie__naast{display:grid;gap:var(--s4);min-width:0}
.omgeving__groep h3{margin:0 0 var(--s2);font-size:1rem;font-family:var(--f-head)}
.omgeving{list-style:none;margin:0;padding:0;display:grid;gap:0}
.omgeving li{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:0 var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--border);
  font-size:.9375rem;line-height:1.35}
.omgeving li:last-child{border-bottom:0}
.omgeving__naam{font-weight:600;min-width:0}
.omgeving__waar{color:var(--muted);font-size:.875rem}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  .hcard:hover{transform:none}
}