@charset "utf-8";
/* HotelsWellness.nl - site.css
   Design tokens en componenten volgens hotelswellness-huisstijl.md v1.0.
   Mobile-first: basisregels gelden voor mobiel, min-width queries breiden uit. */

/* ---------------------------------------------------------------- fonts -- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-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: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-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: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/manrope-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: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/manrope-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 {
  --color-forest: #12372e;
  --color-forest-hover: #0d2e27;
  --color-forest-active: #09241e;
  --color-eucalyptus: #6b8a7a;
  /* Eucalyptus haalt op wit maar 3,79:1 en mag volgens de huisstijl zelf niet
     voor kleine tekst. Deze donkerder variant houdt de tint en haalt WCAG AA
     op White, Stone, Mist en Linen. */
  --color-eucalyptus-text: #4a6555;
  --color-sage: #a7b8a6;
  --color-linen: #e7dfd1;
  --color-stone: #f2f2ef;
  --color-gold: #c8a46a;

  --color-white: #fff;
  --color-ink: #1f2a27;
  --color-slate: #3f4a46;
  --color-mist: #faf9f6;
  --color-border: #ded9cf;

  --color-success: #2f6f57;
  --color-error: #8a3f3b;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", Arial, Helvetica, sans-serif;

  /* Pijl voor de Booking-actie, als masker zodat hij de tekstkleur volgt. */
  --pijl: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'><path d='M0 4.5h12M8.5 1 12 4.5 8.5 8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --radius-button: 6px;
  --radius-input: 8px;
  --radius-card: 14px;
  --radius-image: 16px;
  --radius-hero: 18px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;

  --shadow-card: 0 8px 24px rgba(18, 55, 46, .08);
  --shadow-elevated: 0 14px 40px rgba(18, 55, 46, .12);

  --container-max: 1280px;
  --content-max: 1120px;
  --reading-max: 760px;
  --header-h: 64px;
}

@media (min-width: 64rem) {
  :root { --header-h: 80px; }
}

/* ----------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-white);
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-forest);
  margin: 0 0 var(--space-4);
  font-weight: 600;
}
h1 { font-size: clamp(2.125rem, 5.2vw, 3.75rem); line-height: 1.04; letter-spacing: -.02em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -.015em; }
h3 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.18; letter-spacing: -.01em; }
h4 {
  font-family: var(--font-body);
  font-size: 1.25rem; font-weight: 600; line-height: 1.3;
  color: var(--color-forest); margin: 0 0 var(--space-3);
}
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.25rem; }
li { margin-bottom: var(--space-2); }

a { color: var(--color-forest); text-underline-offset: 3px; }
a:hover { color: var(--color-eucalyptus-text); }

:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--color-forest); color: var(--color-white);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-button);
  font-weight: 600; text-decoration: none; transition: top 160ms ease-out;
}
.skip-link:focus { top: var(--space-3); color: var(--color-white); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- container -- */
.container {
  width: min(100% - 40px, var(--container-max));
  margin-inline: auto;
}
.container--content { max-width: var(--content-max); }
.prose { max-width: var(--reading-max); }
.prose p, .prose li { color: var(--color-ink); }

@media (min-width: 64rem) {
  .container { width: min(100% - 64px, var(--container-max)); }
}

.section { padding-block: var(--space-7); }
.section--tight { padding-block: var(--space-6); }
@media (min-width: 64rem) {
  .section { padding-block: var(--space-9); }
  .section--tight { padding-block: var(--space-8); }
}
.bg-stone { background: var(--color-stone); }
.bg-mist { background: var(--color-mist); }
.bg-linen { background: var(--color-linen); }
.bg-forest { background: var(--color-forest); color: var(--color-stone); }
.bg-forest h2, .bg-forest h3 { color: var(--color-white); }
.bg-forest a { color: var(--color-linen); }
.bg-forest a:hover { color: var(--color-gold); }

.eyebrow {
  display: block;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-eucalyptus-text);
  margin-bottom: var(--space-3);
}
.bg-forest .eyebrow { color: var(--color-gold); }

.section-head { max-width: var(--reading-max); margin-bottom: var(--space-6); }
.section-head p { color: var(--color-slate); margin-bottom: 0; }
.bg-forest .section-head p { color: var(--color-linen); }

.lead { font-size: 1.125rem; line-height: 1.6; max-width: 680px; }

/* ---------------------------------------------------------------- header -- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 0 rgba(18, 55, 46, .08);
  backdrop-filter: saturate(1.4) blur(6px);
}
.site-header__inner {
  min-height: var(--header-h);
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4);
}
.site-header__logo { display: flex; align-items: center; padding-block: var(--space-2); }
.site-header__logo img { width: 168px; height: auto; }
/* Onder 360 px past 168 px logo plus de menuknop niet naast elkaar en klapt de
   header naar twee regels. 150 px is de ondergrens uit de huisstijl. */
@media (max-width: 22.5rem) {
  .site-header__logo img { width: 150px; }
  .nav-toggle { padding: 0 var(--space-2); }
}
@media (min-width: 64rem) {
  .site-header__logo img { width: 220px; }
}

.nav-toggle {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-3);
  background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  font-family: var(--font-body); font-size: .875rem; font-weight: 600;
  color: var(--color-forest); cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
/* Zonder JavaScript blijft de knop verborgen; het menu staat dan open in de
   pagina. Zonder deze regel wint display:inline-flex van het hidden-attribuut. */
.nav-toggle[hidden] { display: none; }
.filterbar[hidden] { display: none; }

/* Progressive enhancement: zonder JavaScript staat het menu gewoon open in de
   pagina. JavaScript zet .is-collapsible en maakt er een inklapbaar paneel van. */
.site-nav { display: block; flex-basis: 100%; padding-bottom: var(--space-4); }
.site-nav.is-collapsible { display: none; }
.site-nav.is-collapsible.is-open {
  display: block;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-elevated);
  padding: var(--space-4) 0 var(--space-5);
}
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list li { margin: 0; }
.site-nav .nav-list > li > a {
  display: flex; align-items: center;
  min-height: 48px;
  font-weight: 600; text-decoration: none; color: var(--color-forest);
  border-bottom: 1px solid var(--color-stone);
}
/* Alleen in het uitklapbare mobiele paneel. Zonder de media query blijft deze
   width ook op desktop staan, want JavaScript zet .is-collapsible altijd, en
   dan knijpt hij elk menu-item tot een paar pixels. */
@media (max-width: 63.99rem) {
  .site-nav.is-collapsible .nav-list > li > a,
  .site-nav.is-collapsible .nav-cta {
    width: min(100% - 40px, var(--container-max));
    margin-inline: auto;
  }
}
.site-nav .nav-cta { margin-top: var(--space-4); }
.site-nav .nav-cta .button-primary { width: 100%; }

@media (min-width: 64rem) {
  .nav-toggle { display: none; }
  /* De nav is zelf een flexrij: anders komt de CTA onder het menu te staan en
     wordt de header drie regels hoog. */
  .site-nav, .site-nav.is-collapsible {
    display: flex; align-items: center; gap: var(--space-5);
    flex-basis: auto; margin-left: auto; padding-bottom: 0;
  }
  .site-nav .nav-list {
    display: flex; align-items: center; flex-wrap: nowrap; gap: var(--space-5);
  }
  .site-nav .nav-list > li { flex: 0 0 auto; }
  .site-nav .nav-list > li > a {
    display: inline-block; width: auto; margin: 0; min-height: 0;
    padding-block: var(--space-2);
    font-size: .875rem;
    /* zonder nowrap knijpen de items zich per letter kapot zodra de ruimte
       krap wordt, en dat valt niet op in een overflowtest */
    white-space: nowrap;
    border-bottom: 2px solid transparent;
  }
  .site-nav .nav-list > li > a:hover,
  .site-nav .nav-list > li > a[aria-current="page"] {
    border-bottom-color: var(--color-gold); color: var(--color-forest);
  }
  .site-nav .nav-cta { flex: 0 0 auto; width: auto; margin: 0; }
  .site-nav .nav-cta .button-primary { white-space: nowrap; }
}

/* Zes menu-items en de CTA passen pas vanaf 1280 px naast elkaar. Daaronder
   verdwijnt de CTA uit de header; de hero heeft dezelfde knop. */
@media (min-width: 64rem) and (max-width: 79.99rem) {
  .site-nav .nav-cta { display: none; }
}

/* --------------------------------------------------------------- buttons -- */
.button-primary, .button-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: 48px; padding: 0 22px;
  border-radius: var(--radius-button);
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  letter-spacing: .07em; line-height: 1.15; text-transform: uppercase;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.button-primary {
  background: var(--color-forest); border: 1px solid var(--color-forest);
  color: var(--color-white);
}
.button-primary:hover {
  background: var(--color-forest-hover); border-color: var(--color-forest-hover);
  color: var(--color-white);
}
.button-primary:active { background: var(--color-forest-active); }
.button-secondary {
  background: transparent; border: 1px solid var(--color-forest);
  color: var(--color-forest);
}
.button-secondary:hover { background: var(--color-stone); color: var(--color-forest); }
.bg-forest .button-secondary { border-color: var(--color-linen); color: var(--color-linen); }
.bg-forest .button-secondary:hover { background: rgba(255, 255, 255, .1); color: var(--color-white); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px;                 /* tap target, huisstijl §62 */
  font-weight: 700; text-decoration: none; color: var(--color-forest);
}
.link-arrow::after { content: "\2192"; transition: transform 180ms ease-out; }
.link-arrow:hover::after { transform: translateX(3px); }

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ------------------------------------------------------------------ hero -- */
.hero { padding-block: var(--space-6) var(--space-7); }
.hero__grid { display: grid; gap: var(--space-5); align-items: center; }
.hero__body { min-width: 0; }
.hero h1 { margin-bottom: var(--space-4); }
.hero__intro { font-size: 1.0625rem; color: var(--color-slate); max-width: 46ch; }
.hero__media { min-width: 0; }
.hero__media img {
  width: 100%; border-radius: var(--radius-hero); object-fit: cover;
  aspect-ratio: 16 / 9;
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  font-size: .875rem; color: var(--color-slate); margin-top: var(--space-4);
}

@media (min-width: 64rem) {
  .hero { padding-block: var(--space-8) var(--space-9); }
  .hero__grid { grid-template-columns: 45fr 55fr; gap: var(--space-8); }
  .hero--banner .hero__grid { grid-template-columns: 1fr; }
}
.hero--banner .hero__media img { aspect-ratio: 16 / 9; max-height: 520px; }
@media (min-width: 48rem) {
  .hero--banner .hero__media img { aspect-ratio: 21 / 9; }
}
.hero--banner .hero__body { max-width: var(--reading-max); }
.hero--banner .hero__media { margin-bottom: var(--space-6); }

.page-band { padding-top: var(--space-4); }
.page-band img {
  width: 100%; border-radius: var(--radius-image); object-fit: cover;
  aspect-ratio: 16 / 5;
}
@media (min-width: 64rem) { .page-band img { aspect-ratio: 21 / 4; } }

/* ------------------------------------------------------------ breadcrumb -- */
.breadcrumb { padding-block: var(--space-3); font-size: .8125rem; }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before { content: "\203A"; color: var(--color-sage); }
.breadcrumb a { color: var(--color-slate); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-forest); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--color-forest); font-weight: 600; }

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

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card--interactive {
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
}
.card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--color-sage);
  box-shadow: var(--shadow-elevated);
}
.card__body { padding: var(--space-5); display: flex; flex-direction: column; flex: 1; }
.card__body > :last-child { margin-bottom: 0; }

/* Hotelkaart. De dataset bevat geen hotelfoto's; in plaats van een vreemd
   sfeerbeeld krijgt de kaart een merkband met de harde cijfers. */
.hotel-card__band {
  background: var(--color-stone);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.hotel-card__band--sage { background: var(--color-sage); }
.hotel-card__band--linen { background: var(--color-linen); }
.score {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  font-size: .8125rem; color: var(--color-slate);
}
.score b { font-size: 1rem; font-weight: 700; color: var(--color-forest); }
.hotel-card__band .score { color: var(--color-forest); }
.stars { font-size: .8125rem; color: var(--color-forest); letter-spacing: .1em; }
.hotel-card__name { font-size: 1.4rem; line-height: 1.2; margin-bottom: var(--space-2); }
.hotel-card__name a { text-decoration: none; }
.hotel-card__name a:hover { text-decoration: underline; }
.hotel-card__place {
  font-size: .875rem; color: var(--color-slate); margin-bottom: var(--space-3);
  display: flex; align-items: center; gap: var(--space-2);
}
.hotel-card__match { color: var(--color-ink); margin-bottom: var(--space-4); }
.hotel-card__foot {
  margin-top: auto; padding-top: var(--space-4);
  border-top: 1px solid var(--color-stone);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  flex-wrap: wrap;
}
.price { font-weight: 600; color: var(--color-forest); }
.price small { display: block; font-weight: 400; font-size: .75rem; color: var(--color-slate); }

/* ---------------------------------------------------------------- badges -- */
.badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--color-linen); color: var(--color-forest);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.badge svg { width: 14px; height: 14px; }
.badge--stone { background: var(--color-stone); }
.badge--sage { background: var(--color-sage); }
.badge--gold { background: var(--color-gold); }
.badge--forest { background: var(--color-forest); color: var(--color-white); }
.badge--outline { background: transparent; border: 1px solid var(--color-border); font-weight: 600; }

/* ----------------------------------------------------------------- facts -- */
.facts {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--color-stone);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
@media (min-width: 48rem) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { min-width: 0; }
.fact dt {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-eucalyptus-text); margin-bottom: var(--space-1);
}
.fact dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--color-forest); }
.fact dd small { display: block; font-size: .75rem; font-weight: 400; color: var(--color-slate); }

/* --------------------------------------------------------- match-blokken -- */
.match { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .match { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.match__col {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}
.match__col--good { background: var(--color-stone); }
.match__col--less { background: var(--color-mist); }
.match__col h3 { font-size: 1.25rem; font-family: var(--font-body); font-weight: 600; }
.match__col ul { list-style: none; padding: 0; margin: 0; }
.match__col li {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin-bottom: var(--space-3);
}
.match__col li:last-child { margin-bottom: 0; }
.match__col svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 3px; }
.match__col--good svg { stroke: var(--color-forest); }
.match__col--less svg { stroke: var(--color-slate); }

/* ---------------------------------------------------------- wellnessblok -- */
.wellness-panel {
  border: 1px solid var(--color-sage);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.wellness-panel__head {
  background: var(--color-forest); color: var(--color-white);
  padding: var(--space-4) var(--space-5);
}
.wellness-panel__head h2, .wellness-panel__head h3 { color: var(--color-white); margin: 0; font-size: 1.35rem; }
.wellness-panel__head p { margin: var(--space-2) 0 0; color: var(--color-linen); font-size: .9375rem; }
.wellness-panel__body { padding: var(--space-5); background: var(--color-white); }
.wellness-panel dl { margin: 0; display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .wellness-panel dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wellness-panel dt {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-eucalyptus-text); margin-bottom: var(--space-1);
}
.wellness-panel dd { margin: 0; color: var(--color-ink); }

.note {
  background: var(--color-mist);
  border-left: 3px solid var(--color-gold);
  padding: var(--space-4) var(--space-5);
  border-radius: 0 var(--radius-button) var(--radius-button) 0;
  font-size: .9375rem; color: var(--color-slate);
}
.note > :last-child { margin-bottom: 0; }
.note strong { color: var(--color-forest); }

/* ---------------------------------------------------------------- tabel -- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--space-5); }
table.compare {
  width: 100%; border-collapse: collapse; font-size: .875rem;
  /* Breed genoeg voor de langste hotelnaam. Te smal betekent niet netjes
     afbreken maar een kolom van 70 px waarin elk woord op een eigen regel valt;
     de tabel scrollt liever horizontaal in .table-scroll. */
  min-width: 820px;
}
table.compare td:first-child,
table.compare th:first-child { min-width: 230px; }
table.compare caption {
  text-align: left; font-size: .8125rem; color: var(--color-slate);
  padding-bottom: var(--space-3);
}
table.compare th, table.compare td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left; vertical-align: top;
}
table.compare thead th { background: var(--color-forest); color: var(--color-white); font-weight: 600; }
table.compare thead th:first-child { border-top-left-radius: var(--radius-button); }
table.compare thead th:last-child { border-top-right-radius: var(--radius-button); }
table.compare tbody tr:nth-child(even) { background: var(--color-stone); }
table.compare td a { font-weight: 600; }
table.compare .num { white-space: nowrap; }

/* ------------------------------------------------------------------ faq -- */
.faq { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: var(--space-4) var(--space-6) var(--space-4) 0;
  font-weight: 600; color: var(--color-forest); position: relative;
  min-height: 48px; display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: var(--space-2); top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--color-eucalyptus);
  border-bottom: 2px solid var(--color-eucalyptus);
  transform: rotate(45deg); transition: transform 180ms ease-out;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .faq__answer { padding: 0 0 var(--space-5); max-width: var(--reading-max); }
.faq .faq__answer > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- filters -- */
.filterbar {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}
.filterbar__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3);
}
.filterbar__head h2, .filterbar__head p { margin: 0; }
.filterbar__head h2 { font-size: 1.25rem; font-family: var(--font-body); font-weight: 600; }
.filterbar__count { font-size: .875rem; color: var(--color-slate); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-white); color: var(--color-forest);
  font-family: var(--font-body); font-size: .8125rem; font-weight: 600;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.chip:hover { border-color: var(--color-sage); }
.chip[aria-pressed="true"] {
  background: var(--color-forest); border-color: var(--color-forest); color: var(--color-white);
}
.filter-empty { display: none; }
.filter-empty.is-visible { display: block; }
.hotel-item.is-hidden { display: none; }

/* ---------------------------------------------------------------- lijsten -- */
.linklist { list-style: none; padding: 0; margin: 0; columns: 1; }
.linklist li { margin-bottom: var(--space-2); break-inside: avoid; }
@media (min-width: 48rem) { .linklist { columns: 2; column-gap: var(--space-6); } }
@media (min-width: 64rem) { .linklist--3 { columns: 3; } }

/* Kolomkoppen in smalle kolommen, bijvoorbeeld op de HTML-sitemap. Een H2 in
   Cormorant op 44 px breekt daar een lang woord als "Bestemmingsgidsen" af. */
.linkcol h2 {
  font-family: var(--font-body);
  font-size: 1rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-forest);
  margin-bottom: var(--space-3);
}
.linkcol h2 + ul { margin-bottom: var(--space-5); }

.compact-list { list-style: none; padding: 0; margin: 0; }
.compact-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); margin: 0;
}
.compact-list__thumb {
  width: 72px; height: 54px; object-fit: cover; flex: 0 0 auto;
  border-radius: var(--radius-button);
}
.compact-list a { font-weight: 600; text-decoration: none; }
.compact-list a:hover { text-decoration: underline; }
.compact-list .meta { font-size: .8125rem; color: var(--color-slate); margin-left: auto; }

.destination-card { text-decoration: none; display: block; }
.destination-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.destination-card .card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.destination-card h3 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.destination-card p { color: var(--color-slate); font-size: .9375rem; margin-bottom: 0; }
.destination-card .count {
  font-size: .8125rem; color: var(--color-eucalyptus-text); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--space-2);
}

.intent-card { text-decoration: none; display: flex; gap: var(--space-4); align-items: flex-start; }
.intent-card svg { flex: 0 0 auto; width: 28px; height: 28px; stroke: var(--color-eucalyptus-text); }
.intent-card h3 { font-size: 1.3rem; margin-bottom: var(--space-2); }
.intent-card p { font-size: .9375rem; color: var(--color-slate); margin: 0; }

.trust-item svg { width: 32px; height: 32px; stroke: var(--color-gold); margin-bottom: var(--space-3); }
.trust-item h3 { font-size: 1.35rem; }
.trust-item p { margin-bottom: 0; }

/* ---------------------------------------------------------------- divider -- */
.divider {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  margin-block: var(--space-6);
}
.divider span { display: block; width: 40px; height: 1px; background: var(--color-gold); }
.divider i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); }

/* ------------------------------------------------------------------ form -- */
.form { max-width: 620px; }
.field { margin-bottom: var(--space-4); }
.field label {
  display: block; font-size: .8125rem; font-weight: 600;
  color: var(--color-forest); margin-bottom: var(--space-2);
}
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--font-body); font-size: 16px;
  color: var(--color-ink); background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  padding: 12px 14px;
}
.field input, .field select { min-height: 48px; }
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--color-forest);
  outline: 3px solid rgba(200, 164, 106, .35); outline-offset: 0;
}
.field .hint { font-size: .8125rem; color: var(--color-slate); margin-top: var(--space-2); }

/* ---------------------------------------------------------------- footer -- */
.site-footer { background: var(--color-forest); color: var(--color-stone); padding-block: var(--space-8) var(--space-6); }
.site-footer a { color: var(--color-linen); text-decoration: none; }
.site-footer a:hover { color: var(--color-gold); text-decoration: underline; }
.site-footer h2 {
  font-family: var(--font-body); font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--color-gold);
  margin-bottom: var(--space-4);
}
.footer-grid { display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand img { width: 200px; margin-bottom: var(--space-4); }
.footer-brand p { color: var(--color-linen); font-size: .9375rem; max-width: 34ch; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--space-2); font-size: .9375rem; }
.footer-bottom {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid rgba(231, 223, 209, .2);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  font-size: .8125rem; color: var(--color-linen);
}
.footer-bottom p { margin: 0; }
/* Copyright links, de twee voorbehouden rechts: dat scheidt de mededeling over
   het merk van de mededeling over de cijfers en de commissie. */
.footer-bottom p:first-child { margin-right: auto; }
@media (min-width: 48rem) {
  .footer-bottom p:not(:first-child) { text-align: right; }
}

/* ------------------------------------------------------------------ misc -- */
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.updated { font-size: .8125rem; color: var(--color-slate); }
.affiliate-note { font-size: .8125rem; color: var(--color-slate); max-width: var(--reading-max); }

.error-page { text-align: center; padding-block: var(--space-9); }
.error-page .container { max-width: 640px; }

.anchor-offset { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ------------------------------------------------------- uitklapmenu -- */
/* De links in het paneel staan gewoon in de HTML. <details> geeft toetsenbord-
   bediening en werking zonder JavaScript; JS sluit het alleen netjes af. */
.nav-menu { position: static; }
.nav-menu > summary {
  display: flex; align-items: center; gap: 6px;
  min-height: 48px; cursor: pointer; list-style: none;
  font-size: .875rem; font-weight: 600; color: var(--color-forest);
  white-space: nowrap;
  border-bottom: 1px solid var(--color-stone);
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-chevron { width: 16px; height: 16px; transition: transform 180ms ease-out; }
.nav-menu[open] > .nav-chevron, .nav-menu[open] > summary .nav-chevron { transform: rotate(180deg); }
.nav-panel__head {
  margin: 0 0 var(--space-2);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-eucalyptus-text);
}
.nav-panel__col ul { list-style: none; margin: 0; padding: 0; }
.nav-panel__col li { margin: 0; }
.nav-panel__col a {
  display: flex; align-items: center; min-height: 40px;
  font-size: .9375rem; font-weight: 500; color: var(--color-ink);
  text-decoration: none;
}
.nav-panel__col a:hover { color: var(--color-forest); text-decoration: underline; }
.nav-panel__col a[aria-current] { font-weight: 700; color: var(--color-forest); }
.nav-panel__foot { padding-top: var(--space-3); }

@media (min-width: 64rem) {
  .nav-menu > summary {
    min-height: 0; padding-block: var(--space-2);
    border-bottom: 2px solid transparent;
  }
  .has-menu.is-active > .nav-menu > summary { border-bottom-color: var(--color-gold); }
  .nav-menu > summary:hover { border-bottom-color: var(--color-gold); }
  .nav-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-elevated);
    padding-block: var(--space-6);
    z-index: 45;
  }
  .nav-panel__inner {
    display: grid; gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .nav-panel__foot {
    width: min(100% - 64px, var(--container-max));
    margin: var(--space-5) auto 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-stone);
  }
}

@media (max-width: 63.99rem) {
  .nav-panel { padding: var(--space-2) 0 var(--space-4); }
  .nav-panel__inner, .nav-panel__foot {
    width: min(100% - 40px, var(--container-max)); margin-inline: auto;
  }
  .nav-panel__col + .nav-panel__col { margin-top: var(--space-4); }
  .site-nav.is-collapsible .nav-menu > summary {
    width: min(100% - 40px, var(--container-max)); margin-inline: auto;
  }
}

/* ------------------------------------------------- foto op de hotelkaart -- */
.hotel-card__media { position: relative; }
.hotel-card__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.hotel-card__overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-6) var(--space-5) var(--space-3);
  background: linear-gradient(to top, rgba(18, 55, 46, .88), rgba(18, 55, 46, 0));
  pointer-events: none;
}
.hotel-card__overlay .score, .hotel-card__overlay .score b,
.hotel-card__overlay .stars { color: var(--color-white); }
.hotel-card__overlay .score b { font-size: 1.125rem; }
.hotel-card__note {
  position: absolute; right: var(--space-3); top: var(--space-3);
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: rgba(18, 55, 46, .82); color: var(--color-white);
  font-size: .75rem; letter-spacing: .02em;
}

/* --------------------------------------------- fotos op de hotelpagina -- */
.hotel-hero { position: relative; margin-bottom: var(--space-3); }
.hotel-hero__note {
  position: absolute; right: var(--space-4); top: var(--space-4);
  padding: 4px 11px; border-radius: var(--radius-pill);
  background: rgba(18, 55, 46, .85); color: var(--color-white);
  font-size: .8125rem; letter-spacing: .02em;
}
.hotel-hero img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-hero);
}
.hotel-gallery {
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-3);
}
.hotel-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-card);
}
.photo-credit { font-size: .75rem; color: var(--color-slate); margin-top: var(--space-2); }

/* ---------------------------------------------------- sorteerbare tabel -- */
table.compare th { padding: 0; }
.th-sort {
  display: flex; align-items: center; gap: 6px; width: 100%;
  min-height: 48px; padding: var(--space-3) var(--space-4);
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: .875rem; font-weight: 600;
  color: var(--color-white); text-align: left;
}
.th-sort__icon {
  width: 8px; height: 8px; flex: 0 0 auto; opacity: .45;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
th[aria-sort="ascending"] .th-sort__icon { opacity: 1; transform: rotate(-135deg); }
th[aria-sort="descending"] .th-sort__icon { opacity: 1; }
table.compare tbody tr.is-hidden { display: none; }
.table-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.table-tools label {
  font-size: .8125rem; font-weight: 600; color: var(--color-forest);
}
.table-tools input {
  min-height: 44px; min-width: 220px; padding: 0 14px;
  font-family: var(--font-body); font-size: 16px;
  border: 1px solid var(--color-border); border-radius: var(--radius-input);
  background: var(--color-white); color: var(--color-ink);
}
.table-tools input:focus {
  border-color: var(--color-forest);
  outline: 3px solid rgba(200, 164, 106, .35);
}
.table-tools .count { font-size: .8125rem; color: var(--color-slate); margin-left: auto; }

/* ----------------------------------------------------- link-panelen -- */
.link-panel { text-decoration: none; display: block; }
.link-panel img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.link-panel .card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.link-panel h3 { font-size: 1.35rem; margin-bottom: var(--space-2); }
.link-panel p { color: var(--color-slate); font-size: .9375rem; margin: 0; }
.link-panel .eyebrow { margin-bottom: var(--space-2); }

/* --- Voorzieningen als tegels in plaats van een tweekolomstabel ---------- */
.speclist {
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: grid; gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .speclist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .speclist { grid-template-columns: repeat(3, 1fr); } }
.spec {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: var(--space-4); border-radius: var(--radius-card);
  background: var(--color-white); border: 1px solid var(--color-linen);
}
.spec__icon { width: 22px; height: 22px; color: var(--color-forest); }
.spec__label { font-size: .875rem; letter-spacing: .01em; color: var(--color-ink); }
.spec__value {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--color-forest);
}
.spec__value .icon { width: 17px; height: 17px; }
.spec.is-yes { background: #f1f5f0; border-color: var(--color-sage); }
.spec.is-no { background: var(--color-stone); }
.spec.is-no .spec__icon, .spec.is-no .spec__value { color: #5d6b66; }
.spec.is-no .spec__value { font-weight: 500; }
.spec.is-info .spec__value .stars { color: var(--color-gold); letter-spacing: .08em; }

/* --- Hotel als panel met foto ------------------------------------------- */
.hotel-panel { display: flex; flex-direction: column; overflow: hidden; text-decoration: none; }
.hotel-panel__media { position: relative; background: var(--color-linen); }
.hotel-panel__media img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
.hotel-panel__media:empty { display: none; }
.hotel-panel__score {
  position: absolute; left: var(--space-3); bottom: var(--space-3);
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--color-forest); color: var(--color-white);
  font-size: .875rem; font-weight: 600; letter-spacing: .01em;
}
.hotel-panel__note {
  position: absolute; right: var(--space-3); top: var(--space-3);
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: rgba(18, 55, 46, .82); color: var(--color-white);
  font-size: .75rem; letter-spacing: .02em;
}
.hotel-panel__place {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 var(--space-2); font-size: .9375rem; color: #4a5a55;
}
.hotel-panel__place .icon { width: 17px; height: 17px; flex: none; }
.hotel-panel__price { margin-top: auto; font-weight: 600; color: var(--color-forest); }
.hotel-panel__price small {
  display: block; font-weight: 400; font-size: .8125rem; color: #5d6b66;
}

/* --- Omgevingskaart, volledig inline getekend ---------------------------- */
.locator { margin: var(--space-5) 0 var(--space-4); }
.locator__svg {
  display: block; width: 100%; max-width: 46rem; height: auto;
  border-radius: var(--radius-image); border: 1px solid var(--color-linen);
}
.loc-bg { fill: var(--color-mist); }
.loc-ring { fill: none; stroke: var(--color-linen); stroke-width: 1.5; }
.loc-ringlabel, .loc-scale {
  fill: #6d7a75; font-size: 12px; text-anchor: middle;
  font-family: var(--font-body, system-ui, sans-serif);
}
.loc-dot { fill: var(--color-sage); }
.loc-here-halo { fill: rgba(200, 164, 106, .35); }
.loc-here { fill: var(--color-gold); stroke: var(--color-forest); stroke-width: 2; }
.loc-bar { stroke: #6d7a75; stroke-width: 1.5; }
.locator figcaption {
  margin-top: var(--space-3); font-size: .875rem; color: #5d6b66;
}

/* Artikel sluit direct op de intro aan; de hero levert de ruimte al. */
.section--flush { padding-block: 0 var(--space-6); }
@media (min-width: 64rem) { .section--flush { padding-block: 0 var(--space-8); } }

/* --- Omgevingskaart uit OpenStreetMap-data, inline getekend --------------- */
.gm-bg { fill: #f4f2ec; }
.gm-water { fill: #cfe0e6; }
.gm-park { fill: #dfe8d8; }
.gm-spoor { fill: none; stroke: #c4c2bb; stroke-width: 1.4; stroke-dasharray: 5 4; }
.gm-weg { fill: none; stroke: #ffffff; stroke-linecap: round; stroke-linejoin: round; }
.gm-weg--hoofd { stroke: #f0e2c4; }
.gm-weg--snel { stroke: #e8cf9c; }
.gm-punt { fill: #7a8a84; }
.gm-plaats, .gm-wijk, .gm-wegnaam, .gm-schaal {
  font-family: var(--font-body, system-ui, sans-serif);
  paint-order: stroke fill; stroke: #f4f2ec; stroke-width: 3.5;
  stroke-linejoin: round; text-anchor: middle;
}
.gm-plaats { fill: #2c3b36; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.gm-wijk { fill: #4a5a55; font-size: 12.5px; font-weight: 600; }
.gm-wegnaam { fill: #7a6a4a; font-size: 11.5px; font-weight: 600; }
.gm-schaalvlak { fill: rgba(244, 242, 236, .82); }
.gm-bar { stroke: #4a5a55; stroke-width: 1.5; }
.gm-schaal { fill: #4a5a55; font-size: 11px; text-anchor: start; stroke-width: 0; }
.gm-hier-halo { fill: rgba(200, 164, 106, .4); }
.gm-hier { fill: var(--color-gold); stroke: var(--color-forest); stroke-width: 2.5; }

/* --- Keuzekaart: het label ligt op de foto, niet erboven ----------------- */
.pick-card { overflow: hidden; }
.pick-card .hotel-card__media img { aspect-ratio: 16 / 10; }
.pick-label {
  display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--color-gold); color: var(--color-forest);
  font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
}
.pick-card .hotel-card__overlay { justify-content: flex-start; }

/* --- Booking-actie op de kaart -------------------------------------------
   Bewust geen tweede volle knop: de kaart heeft er al een primaire actie
   ("Bekijk hotel"). Dit is een rustige tekstactie met een pijl die meebeweegt,
   zodat het aanbod zichtbaar is zonder de kaart te laten schreeuwen. */
.card__cta { margin-top: var(--space-3); }
.button-booking {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 15px;
  border: 1px solid var(--color-linen); border-radius: var(--radius-pill);
  background: transparent; color: var(--color-forest);
  font-size: .875rem; font-weight: 600; text-decoration: none;
  transition: background 160ms ease-out, border-color 160ms ease-out;
}
.button-booking::after {
  content: ""; width: 14px; height: 9px; flex: none;
  background: currentColor;
  -webkit-mask: var(--pijl) no-repeat center / contain;
  mask: var(--pijl) no-repeat center / contain;
  transition: transform 160ms ease-out;
}
.button-booking:hover, .button-booking:focus-visible {
  background: var(--color-stone); border-color: var(--color-sage);
}
.button-booking:hover::after, .button-booking:focus-visible::after {
  transform: translateX(3px);
}
.button-booking--klein {
  padding: 4px 10px; font-size: .8125rem; border-color: transparent;
}
.compact-list__body { min-width: 0; flex: 1; }

/* De eerste sectie sluit op de hero aan.
   Onder elkaar telden de onderruimte van de hero (80 px) en de bovenruimte van
   de sectie (64 px) bij elkaar op tot 160 px leegte tussen de introzin en de
   eerste alinea. Die twee horen samen een pauze te vormen, niet twee. */
.hero + .section, .hero + .section--tight { padding-top: var(--space-5); }
@media (min-width: 64rem) {
  .hero--banner { padding-bottom: var(--space-6); }
  .hero + .section, .hero + .section--tight { padding-top: var(--space-6); }
}

/* --- Bewijs per hotel op de themapagina's -------------------------------- */
.bewijslijst { max-width: var(--reading-max); }
.bewijs {
  border-bottom: 1px solid var(--color-linen);
  padding: var(--space-3) 0;
}
.bewijs > summary {
  cursor: pointer; list-style: none; font-weight: 600;
  color: var(--color-forest); display: flex; align-items: center; gap: 8px;
}
.bewijs > summary::-webkit-details-marker { display: none; }
.bewijs > summary::before {
  content: ""; width: 10px; height: 10px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 160ms ease-out;
}
.bewijs[open] > summary::before { transform: rotate(45deg); }
.bewijs blockquote {
  margin: var(--space-3) 0 var(--space-2); padding-left: var(--space-4);
  border-left: 3px solid var(--color-gold);
  font-style: italic; color: var(--color-ink);
}
.bewijs p { margin-bottom: var(--space-2); }
.bewijs .updated { word-break: break-word; }