/* HotelsMetSpa.nl - één stylesheet, mobile-first.
   Basisregels gelden voor de kleinste viewport; grotere layouts komen er met
   min-width-queries bij.

   Afwijkingen van de huisstijl staan met reden in docs/02-huisstijl-en-wcag.md.
   Kort: Soft Copper #B7855D haalt op wit 3,22:1 en zakt daarmee onder de
   AA-eis van 4,5:1 die dezelfde huisstijl in §30 stelt. Koper blijft daarom
   decoratief (lijnen, randen, iconen) en krijgt voor tekst en knoppen een
   donkerder variant uit dezelfde tint. */

:root {
  /* Merkkleuren, exact uit de huisstijl */
  --mineral-teal: #154B57;
  --deep-teal: #0C2F38;
  --warm-sand: #D8CBB7;
  --mist: #F4F1EB;
  --soft-copper: #B7855D;
  --graphite: #2C2C2C;

  /* Afgeleide kopervarianten die AA halen */
  --copper-text: #8E623F;   /* 5,29:1 op wit, 4,69:1 op Mist */
  --copper-cta: #9C6C45;    /* witte tekst haalt 4,52:1 */

  --white: #FFFFFF;
  --border: #DED8CF;
  --border-strong: #D5D0C8;
  --muted: #6F6B66;
  --success: #3F725E;
  --warning: #8A5628;       /* huisstijl #A76B37 haalt 4,37:1, deze 5,6:1 */
  --error: #9E4A43;
  --info: #3C6770;

  --tint-teal: #EEF4F4;
  --tint-copper: #F6EEE8;

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

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 8px 24px rgba(12, 47, 56, .08);
  --shadow-hover: 0 12px 32px rgba(12, 47, 56, .12);

  --container: 1200px;
  --prose: 760px;
  --intro: 840px;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 80px; --s10: 96px; --s11: 128px;
}

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  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";
  src: url("/assets/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
  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";
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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";
  src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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;
}

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

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

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

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--deep-teal);
  margin: 0 0 var(--s4);
  line-height: 1.12;
}
h1 { font-size: 42px; line-height: 1.03; letter-spacing: -.015em; }
h2 { font-size: 33px; margin-top: var(--s7); letter-spacing: -.01em; }
h3 { font-size: 24px; margin-top: var(--s6); }
h4 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--deep-teal);
  line-height: 1.25;
  margin: var(--s5) 0 var(--s2);
}
p { margin: 0 0 var(--s4); }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.25em; }
li { margin-bottom: var(--s2); }

a { color: var(--mineral-teal); }
a:hover { color: var(--deep-teal); }

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

.container {
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--deep-teal);
  color: var(--white);
  padding: var(--s3) var(--s4);
  z-index: 50;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: var(--white); }

.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper-text);
  margin: 0 0 var(--s3);
}

.lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--graphite);
  max-width: var(--intro);
}

.prose { max-width: var(--prose); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ header */
.site-header {
  background: var(--mist);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 68px;
  flex-wrap: wrap;
}
/* Logo: beeldmerk als inline SVG, woordmerk als echte HTML-tekst.
   Als SVG-tekst in een <img> viel het woordmerk terug op Georgia en liepen de
   drie tekstdelen over elkaar heen. */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--deep-teal);
}
.site-logo__mark { width: 34px; height: 22px; flex: 0 0 auto; }
.site-logo__boog-buiten { stroke: var(--soft-copper); }
.site-logo__boog-binnen { stroke: currentColor; }
.site-logo__water-1 { stroke: var(--mineral-teal); }
.site-logo__water-2 { stroke: var(--soft-copper); }
.site-logo__woord {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}
.site-logo__accent { color: var(--copper-text); }

.site-logo--licht { color: var(--mist); }
.site-logo--licht .site-logo__water-1 { stroke: var(--warm-sand); }
.site-logo--licht .site-logo__accent { color: var(--soft-copper); }
.footer-brand .site-logo { font-size: inherit; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: var(--s2) var(--s3);
  background: transparent;
  border: 1px solid var(--mineral-teal);
  border-radius: var(--radius-sm);
  color: var(--mineral-teal);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.nav-toggle .icon { width: 20px; height: 20px; }

.site-nav { flex-basis: 100%; }
.nav-list {
  list-style: none;
  margin: 0 0 var(--s3);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nav-list li { margin: 0; border-top: 1px solid var(--border); }
/* Elementselector met dezelfde specificiteit als componentklassen elders:
   bewust laag gehouden zodat .button-primary in de nav niet wordt overruled. */
.nav-list a {
  display: block;
  padding: var(--s3) 0;
  min-height: 44px;
  color: var(--deep-teal);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.nav-list a:hover { color: var(--mineral-teal); }
.nav-list a[aria-current="page"] { color: var(--mineral-teal); font-weight: 700; }

/* ---------------------------------------------------------- uitklapmenu's */
.nav-item--sub > a { display: flex; align-items: center; gap: 6px; }
.nav-item__chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  flex: 0 0 auto;
}
.nav-sub__kop {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--s2);
}
.nav-sub ul { list-style: none; margin: 0; padding: 0; }
.nav-sub li { margin: 0; border: 0; }
.nav-sub a {
  display: block;
  padding: 9px 0;
  min-height: 40px;
  font-size: 15px;
  font-weight: 500;
  color: var(--deep-teal);
  text-decoration: none;
}
.nav-sub a:hover { color: var(--mineral-teal); }

/* -------------------------------------------------------------- breadcrumb */
.breadcrumb {
  background: var(--mist);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
  padding: var(--s3) 0;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: var(--s2); }
.breadcrumb li + li::before { content: "›"; color: var(--muted); }
.breadcrumb a { color: var(--mineral-teal); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--muted); }

/* -------------------------------------------------------------------- hero */
.hero { padding: var(--s7) 0 var(--s6); }
.hero--plain {
  background:
    url("/assets/images/arch-water-pattern.svg") right -60px top -40px / 320px no-repeat,
    var(--mist);
  border-bottom: 1px solid var(--border);
}
.hero__grid { display: grid; gap: var(--s5); }
.hero__body > *:last-child { margin-bottom: 0; }
.hero__media { margin: 0; }
.hero__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.hero__media figcaption {
  font-size: 13px;
  color: var(--muted);
  margin-top: var(--s2);
  line-height: 1.45;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}
/* Was een rij losse regels met een icoon ervoor, die als doorlopende tekst
   las. Nu een label per feit, zodat je ze los van elkaar opneemt. */
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(12, 47, 56, .05);
  font-size: 14px;
  font-weight: 500;
  color: var(--deep-teal);
  line-height: 1.3;
}
.hero-meta .icon { width: 18px; height: 18px; color: var(--copper-text); flex: 0 0 auto; }
/* De hero staat op zand; op een witte sectie mag het label juist zand zijn. */
.section--white .hero-meta span,
.hero--plain .hero-meta span { background: var(--mist); }

/* ----------------------------------------------------------------- knoppen */
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

.button-primary, .button-secondary, .button-copper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 14px 22px;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.button-primary {
  background: var(--mineral-teal);
  color: var(--white);
  border: 1px solid var(--mineral-teal);
}
.button-primary:hover { background: var(--deep-teal); border-color: var(--deep-teal); color: var(--white); }
.button-secondary {
  background: transparent;
  color: var(--mineral-teal);
  border: 1px solid var(--mineral-teal);
}
.button-secondary:hover { background: var(--tint-teal); color: var(--deep-teal); }
.button-copper {
  background: var(--copper-cta);
  color: var(--white);
  border: 1px solid var(--copper-cta);
}
.button-copper:hover { background: #7F572F; border-color: #7F572F; color: var(--white); }
.button-primary .icon, .button-secondary .icon, .button-copper .icon {
  width: 18px; height: 18px;
}

/* ---------------------------------------------------------------- secties */
.section { padding: var(--s7) 0; }
.section--mist { background: var(--mist); }
.section--white { background: var(--white); }
.section--sand { background: rgba(216, 203, 183, .28); }
.section--teal { background: var(--deep-teal); color: var(--white); }
.section--teal h2, .section--teal h3 { color: var(--white); }
.section--teal p { color: var(--warm-sand); }
.section--teal a { color: var(--white); }
.section__head { max-width: var(--intro); margin-bottom: var(--s6); }
.section__head > *:last-child { margin-bottom: 0; }
.section > .container > h2:first-child { margin-top: 0; }

.divider {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s6) 0;
}
.divider span { flex: 1; height: 1px; background: var(--border); }
.divider i {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--soft-copper);
}

/* ------------------------------------------------------------------ cards */
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--s5); }

.hotel-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.hotel-card__media { position: relative; background: var(--tint-teal); }
.hotel-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.hotel-card__body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.hotel-card__body > *:last-child { margin-bottom: 0; }
.hotel-card h3 {
  font-size: 24px;
  margin: 0 0 var(--s1);
  line-height: 1.15;
}
.hotel-card h3 a { color: var(--deep-teal); text-decoration: none; }
.hotel-card h3 a:hover { color: var(--mineral-teal); text-decoration: underline; }
.hotel-card__plaats {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 var(--s3);
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.hotel-card__plaats .icon { width: 19px; height: 19px; flex: 0 0 auto; }
.keuze-kaart__plaats .icon { width: 19px; height: 19px; flex: 0 0 auto; }
.hotel-card p { font-size: 15px; line-height: 1.55; }
.hotel-card__kiezen {
  font-size: 15px;
  line-height: 1.55;
  padding: var(--s3);
  background: var(--tint-teal);
  border-radius: var(--radius-sm);
  margin-bottom: var(--s3);
}
.hotel-card__kiezen strong { color: var(--deep-teal); }
.hotel-card__foot {
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.score {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  font-size: 13px;
  color: var(--muted);
}
.score strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--mineral-teal);
  color: var(--white);
  font-size: 15px;
}
.sterren { display: inline-flex; gap: 1px; color: var(--soft-copper); }
.sterren { color: var(--soft-copper); }
.sterren .icon { width: 17px; height: 17px; }

/* ----------------------------------------------------------------- badges */
.badges { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); padding: 0; list-style: none; }
.badges li { margin: 0; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge .icon { width: 17px; height: 17px; }
.badge--compact { border-color: var(--mineral-teal); background: var(--tint-teal); color: var(--mineral-teal); }
.badge--compleet { background: var(--mineral-teal); color: var(--white); }
.badge--resort { border-color: var(--soft-copper); background: var(--tint-copper); color: var(--copper-text); }
.badge--prive { background: var(--deep-teal); color: var(--white); }
.badge--feit { border-color: var(--border-strong); background: var(--white); color: var(--graphite); font-weight: 500; }

/* ----------------------------------------------------------- spapaspoort */
.paspoort {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-card);
}
.paspoort__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--border);
}
.paspoort__kop h2, .paspoort__kop h3 { margin: 0; font-size: 25px; }
.paspoort__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.paspoort__lijst > li {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--border);
  margin: 0;
  min-width: 0;
}
.paspoort__lijst > li:last-child { border-bottom: 0; }
.paspoort__label {
  flex: 0 0 40%;
  font-size: 14px;
  font-weight: 700;
  color: var(--deep-teal);
}
.paspoort__waarde { flex: 1; font-size: 15px; min-width: 0; }
.paspoort__waarde .detail { display: block; font-size: 13px; color: var(--muted); }
.paspoort__waarde .icon { width: 19px; height: 19px; vertical-align: -4px; margin-right: 5px; }
.ja .icon { color: var(--success); }
.nee .icon { color: var(--muted); }
.onbekend { color: var(--muted); font-style: italic; }
.paspoort__let-op {
  margin: calc(var(--s4) * -1) 0 var(--s4);
  padding: var(--s3);
  background: var(--tint-copper);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--graphite);
}
.paspoort__let-op strong { color: var(--copper-text); }

.paspoort__bron {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
.paspoort__bron a { color: var(--mineral-teal); }

.gecontroleerd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
}
.gecontroleerd .icon { width: 16px; height: 16px; }

/* --------------------------------------------------------------- callouts */
.callout {
  border-left: 3px solid var(--soft-copper);
  background: var(--tint-copper);
  padding: var(--s4);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: var(--s5) 0;
}
.callout > *:last-child { margin-bottom: 0; }
.callout h3, .callout h4 { margin-top: 0; }
.callout--teal { border-left-color: var(--mineral-teal); background: var(--tint-teal); }

.keuzeblok {
  display: grid;
  gap: var(--s3);
  margin: var(--s5) 0;
}
.keuzeblok > div {
  padding: var(--s4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--white);
}
.keuzeblok > div > *:last-child { margin-bottom: 0; }
.keuzeblok strong { color: var(--deep-teal); display: block; margin-bottom: var(--s1); }

/* ------------------------------------------------------------------- lijst */
.link-lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.link-lijst li { margin: 0; }
.link-lijst a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s3) var(--s4);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--deep-teal);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.link-lijst a:hover { border-color: var(--mineral-teal); color: var(--mineral-teal); }
.link-lijst .aantal { font-size: 13px; font-weight: 500; color: var(--muted); }

/* ------------------------------------------------------------ keuzekaarten */
.keuze-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  /* Lucht onder het blok, zodat de volgende kop niet tegen de
     onderrand van de laatste kaart plakt. */
  margin-bottom: var(--s6);
}
.keuze-kaart {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.keuze-kaart__media { position: relative; background: var(--tint-teal); }
.keuze-kaart__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.keuze-kaart__label {
  position: absolute;
  left: var(--s3);
  bottom: var(--s3);
  background: var(--deep-teal);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
}
.keuze-kaart__body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.keuze-kaart__body > *:last-child { margin-bottom: 0; }
.keuze-kaart h3 { font-size: 24px; margin: 0 0 var(--s1); line-height: 1.15; }
.keuze-kaart h3 a { color: var(--deep-teal); text-decoration: none; }
.keuze-kaart h3 a:hover { color: var(--mineral-teal); text-decoration: underline; }
.keuze-kaart__plaats {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 var(--s3);
}
.keuze-kaart__reden { font-size: 15px; line-height: 1.55; }
.keuze-kaart__acties {
  margin-top: auto;
  padding-top: var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.keuze-kaart__acties .button-primary,
.keuze-kaart__acties .button-secondary {
  flex: 1 1 auto;
  padding: 12px 16px;
  font-size: 14px;
}

.affiliate-noot {
  max-width: var(--prose);
  margin-top: var(--s5);
  font-size: 14px;
  color: var(--muted);
}

/* knop op een Deep Teal sectie: omgekeerd, want de sectieregel maakt elke
   link wit en dat gaf witte tekst op een witte knop */
.button-op-donker {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 14px 22px;
  border-radius: 10px;
  background: var(--white);
  color: var(--deep-teal) !important;
  border: 1px solid var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.button-op-donker:hover { background: var(--warm-sand); border-color: var(--warm-sand); }
.button-op-donker .icon { width: 18px; height: 18px; }

/* ---------------------------------------------------- bestemmingskaarten */
.bestemming-grid {
  list-style: none;
  margin: 0 0 var(--s6);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}
/* Een grid als laatste element in een sectie heeft die marge niet nodig: de
   sectie brengt zijn eigen padding mee. */
.bestemming-grid:last-child,
.keuze-grid:last-child { margin-bottom: 0; }
.bestemming-kaart { margin: 0; min-width: 0; }
.bestemming-kaart > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  color: var(--deep-teal);
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.bestemming-kaart > a:hover {
  border-color: var(--mineral-teal);
  box-shadow: var(--shadow-hover);
  color: var(--mineral-teal);
}
.bestemming-kaart__media { display: block; background: var(--tint-teal); }
.bestemming-kaart__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.bestemming-kaart__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4);
  min-height: 48px;
}
.bestemming-kaart__naam {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
}
.bestemming-kaart .aantal {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
/* Zonder beeld blijft de kaart een nette tekstrij in plaats van een lege plek. */
.bestemming-kaart--tekst > a {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  min-height: 64px;
}
.bestemming-kaart--tekst .bestemming-kaart__naam { font-size: 20px; }

.uitleg-grid { display: grid; gap: var(--s5); }
.uitleg-kaart {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s5);
}
.uitleg-kaart > *:last-child { margin-bottom: 0; }
.uitleg-kaart .icon-rond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  background: var(--tint-teal);
  color: var(--mineral-teal);
  margin-bottom: var(--s3);
}
.uitleg-kaart .icon-rond .icon { width: 28px; height: 28px; }
.uitleg-kaart h3, .uitleg-kaart h2 { margin-top: 0; font-size: 22px; }

/* -------------------------------------------------------------- tabellen */
.tabel-wrap { overflow-x: auto; margin: var(--s5) 0; }
table { border-collapse: collapse; width: 100%; min-width: 520px; background: var(--white); font-size: 15px; }
caption { text-align: left; font-size: 13px; color: var(--muted); padding-bottom: var(--s2); }
th, td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--border); vertical-align: top; }
thead th { background: var(--deep-teal); color: var(--white); font-size: 13px; font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------------- faq */
.faq { border-top: 1px solid var(--border); max-width: var(--prose); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer;
  padding: var(--s4) 0;
  font-weight: 700;
  font-size: 16px;
  color: var(--deep-teal);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 48px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--mineral-teal); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq__answer { padding-bottom: var(--s4); }
.faq__answer > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- formulier */
.form { max-width: var(--prose); }
.form p { margin-bottom: var(--s4); }
.form label { display: block; font-size: 14px; font-weight: 700; color: var(--deep-teal); margin-bottom: var(--s2); }
.form input, .form textarea, .form select {
  width: 100%;
  min-height: 48px;
  padding: 12px var(--s3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--graphite);
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus {
  border-color: var(--mineral-teal);
  box-shadow: 0 0 0 3px rgba(21, 75, 87, .12);
  outline: none;
}
.form .hint { font-size: 13px; color: var(--muted); font-weight: 400; }
.botveld { position: absolute; left: -9999px; }

/* ------------------------------------------------------------------ footer */
.site-footer {
  background: var(--deep-teal);
  color: var(--warm-sand);
  padding: var(--s7) 0 var(--s5);
  margin-top: var(--s8);
}
.footer-grid { display: grid; gap: var(--s6); }
.footer-brand img { width: 200px; }
.footer-brand p { font-size: 14px; color: var(--warm-sand); margin-top: var(--s3); }
.footer-brand__check { display: flex; align-items: center; gap: var(--s2); color: var(--warm-sand); }
.footer-brand__check .icon { width: 18px; height: 18px; flex: 0 0 auto; }
.site-footer h2 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 var(--s3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s2); }
.site-footer a { color: var(--warm-sand); font-size: 15px; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.footer-bottom {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid rgba(216, 203, 183, .25);
  display: grid;
  gap: var(--s2);
  font-size: 13px;
}
.footer-bottom p { margin: 0; color: var(--warm-sand); }
/* .site-footer a zet een eigen font-size van 15px en wint daarmee van de 13px
   die dit blok erft. De derde regel is een link en werd daardoor groter dan de
   twee ernaast. Alle drie de regels horen hetzelfde te zijn. */
.footer-bottom a { font-size: inherit; font-family: inherit; }

/* -------------------------------------------------------------- 404-pagina */
.notfound { padding: var(--s9) 0; text-align: center; }
.notfound .actions { justify-content: center; }

/* ------------------------------------------------------------ breakpoints */
@media (min-width: 48rem) {
  body { font-size: 17px; }
  .container { width: min(100% - 48px, var(--container)); }
  h1 { font-size: 52px; }
  h2 { font-size: 38px; }
  h3 { font-size: 27px; }
  h4 { font-size: 19px; }
  .lead { font-size: 20px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bestemming-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keuze-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uitleg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keuzeblok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paspoort__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { padding: var(--s8) 0 var(--s7); }
  .section { padding: var(--s8) 0; }
  .link-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .container { width: min(100% - 64px, var(--container)); }
  h1 { font-size: 64px; }
  h2 { font-size: 46px; }
  h3 { font-size: 29px; }
  h4 { font-size: 20px; }
  .lead { font-size: 22px; }
  .site-header__inner { min-height: 88px; flex-wrap: nowrap; }
  .site-header__logo img { width: 220px; }
  .nav-toggle { display: none; }
  .site-nav { flex-basis: auto; display: block !important; }
  .nav-list { flex-direction: row; align-items: center; gap: var(--s5); margin: 0; }
  .nav-list li { border-top: 0; }
  .nav-list > li > a { padding: var(--s2) 0; font-size: 14px; border-bottom: 2px solid transparent; }
  .nav-list > li > a:hover { border-bottom-color: var(--mineral-teal); }
  .nav-list > li > a[aria-current="page"] { border-bottom-color: var(--mineral-teal); }
  /* Binnen het paneel is een streep te zwaar. Een zachte achtergrond en wat
     inspringing laten zien waar je bent zonder een lijn over de hele kolom. */
  .nav-sub a { border-bottom: 0; border-radius: 8px; padding: 9px 10px; margin: 0 -10px; }
  .nav-sub a:hover,
  .nav-sub a:focus-visible { background: var(--tint-teal); text-decoration: none; }
  .nav-sub a[aria-current="page"] {
    background: var(--tint-teal);
    color: var(--mineral-teal);
    font-weight: 600;
  }
  .site-logo__woord { font-size: 31px; }
  .site-logo__mark { width: 40px; height: 26px; }

  /* Uitklapmenu op hover en op focus-within, dus zonder JavaScript en
     bereikbaar met de tab-toets. */
  .nav-item--sub { position: relative; }
  .nav-sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    padding-top: var(--s3);
    z-index: 45;
  }
  .nav-item--sub:hover > .nav-sub,
  .nav-item--sub:focus-within > .nav-sub { display: block; }
  .nav-sub__inner {
    display: flex;
    gap: var(--s6);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-hover);
    padding: var(--s5) var(--s6);
    min-width: max-content;
  }
  .nav-sub__groep { min-width: 150px; }
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bestemming-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .keuze-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .uitleg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .keuzeblok { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .link-lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .hero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--s7); }
  .hero--plain { padding: var(--s9) 0 var(--s8); }
  .hero-h1-hero h1 { font-size: 64px; }
  .section { padding: var(--s9) 0; }
}

@media (max-width: 63.999rem) {
  .nav-sub { padding: 0 0 var(--s3) var(--s4); }
  .nav-sub__inner { display: block; }
  .nav-sub__groep + .nav-sub__groep { margin-top: var(--s3); }
  .nav-item__chevron { display: none; }

  /* Mobiel menu: dicht tenzij JavaScript het opent. Zonder JavaScript blijft
     het menu zichtbaar, zodat de navigatie altijd bruikbaar is. */
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .js .nav-toggle { display: inline-flex; }
}

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

@media print {
  .site-header, .site-footer, .breadcrumb, .actions { display: none; }
  body { background: #fff; }
}