/* Africa Parks — design system "Field Guide" (zie DESIGN.md) */
:root {
  --olive-950: #2F3A1E;
  --olive-800: #47552B;
  --olive-600: #66743B;
  --bone: #F6F0E2;
  --sand: #EADFC6;
  --ochre: #E3A421;
  --terracotta: #C05A2E;
  --terracotta-dark: #A84A24;
  --ink: #26291C;
  --ink-soft: #5A5D4C;
  --park-accent: var(--ochre);
  --font-display: "Bricolage Grotesque", "Avenir Next", sans-serif;
  --font-body: "Lora", Georgia, serif;
  --font-ui: "Bricolage Grotesque", "Avenir Next", sans-serif;
  /* Breedte, sinds 2 okt 2026 voor de hele site. Op verzoek van Mitchel ("wat
     meer de hele breedte gebruiken, net als bij het overzicht") gaat de
     container van 1160 naar 1440 pixel, dezelfde maat als het lodge-overzicht.
     Lopende tekst groeit niet mee: --measure houdt de leeskolom op ongeveer
     tachtig tekens per regel. In Lora is een ch breder dan een gemiddelde
     letter (10,6 tegen 7,9 pixel). Eerst 62ch (ruim 650 pixel); bij de
     rustronde van 2 okt 2026 66ch, omdat de tekstkolom op 1920 pixel ijl oogde
     naast de zijkolom. Dat is bijna 700 pixel, en gemeten op een lodgepagina
     79 tot 82 tekens per volle regel, in de intro en in een kaart. De zijkolom groeit
     tot --rail; wat er over is wordt witruimte tussen tekst en zijkolom, zodat
     de tekst links op de rand van de container blijft staan en de zijkolom
     rechts, net als de kop en de fotomozaïek erboven. */
  --wrap: 1440px;
  --measure: 66ch;
  --rail: 460px;
  --radius: 12px;
  /* Rustronde 2 okt 2026, met dezelfde regels als het lodge-overzicht
     (lodges.css). Eén ondergrond (bone) en haarlijnen in plaats van gekleurde
     randen. Zand alleen als heel licht vlak (--panel), nooit als band.
     Terracotta is voor de hoofdknop, oker alleen voor het streepje onder de
     actieve menu-link, olijf voor links. Kaarten hebben een hoek van 12 pixel
     en geen schaduw. */
  --hair: rgba(38,41,28,.12);
  --hair-strong: rgba(38,41,28,.32);
  --panel: #EFE6D2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bone);
}
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; color: var(--ink); padding: 8px 16px; z-index: 99; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0 0 .5em; color: var(--olive-950); }
h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--olive-800); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Klein label boven een kop: gewone zinsletters, geen spatiëring, grijs. Waar
   het label niets toevoegt aan de kop eronder staat het er niet meer. */
.eyebrow {
  font-family: var(--font-display);
  font-size: .875rem; font-weight: 600; line-height: 1.4;
  color: var(--ink-soft); margin: 0 0 .5em;
}
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 56ch; }

/* Knoppen */
.btn {
  display: inline-block; font-family: var(--font-display);
  font-weight: 700; font-size: 1rem; text-decoration: none;
  padding: 13px 26px; border-radius: var(--radius);
  transition: background .12s ease;
}
.btn-cta { background: var(--terracotta); color: #fff; }
.btn-cta:hover { background: var(--terracotta-dark); }
.btn-ghost { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.24); }

/* Header */
.site-header { background: var(--olive-800); position: sticky; top: 0; z-index: 50; }
/* Ankers landen anders onder de plakkende header. */
[id] { scroll-margin-top: 92px; }
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #fff; letter-spacing: .01em; }
/* Megamenu, breed scherm: hoofditems in de balk, per item een paneel over de
   volle breedte met kolommen en een uitgelichte kaart naar de lodges. De
   smalle versie (schuifpaneel) staat in de media query verderop. */
.site-nav { margin-left: auto; }
.nav-list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-item { position: static; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); color: #F1EBD9; text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 8px 12px; border-radius: 8px; background: none; border: 0; cursor: pointer; line-height: 1.2;
}
.nav-link:hover, .nav-link[aria-expanded="true"], .nav-link[aria-current="page"] { background: rgba(255,255,255,.12); color: #fff; }
.nav-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .8; transition: transform .15s; }
.nav-link[aria-expanded="true"] .nav-caret { transform: translateY(1px) rotate(225deg); }
.nav-panel {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: var(--olive-950); color: #F1EBD9;
  border-top: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 40px rgba(28,34,16,.35);
}
.nav-item.open .nav-panel { display: block; }
.nav-panel-inner { display: flex; gap: 56px; align-items: flex-start; padding-block: 26px 30px; }
.nav-col { flex: 0 1 auto; min-width: 150px; max-width: 260px; }
.nav-col ul { list-style: none; margin: 0; padding: 0; }
.nav-col-title { font-family: var(--font-ui); font-size: .8rem; font-weight: 700; color: var(--ochre); margin: 0 0 6px; }
.nav-months-title { margin-top: 16px; }
.nav-col li a {
  display: block; padding: 6px 0; color: #F1EBD9; text-decoration: none;
  font-family: var(--font-ui); font-size: .95rem; font-weight: 500;
}
.nav-col li a:hover, .nav-col li a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--ochre); text-underline-offset: 4px; }
.nav-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-width: 320px; }
.nav-months li a { text-align: center; padding: 6px 0; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; font-size: .85rem; }
.nav-months li a:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.nav-feature {
  flex: 0 0 300px; margin-left: auto; display: flex; flex-direction: column;
  border-radius: var(--radius); overflow: hidden; background: var(--olive-800); text-decoration: none; color: #fff;
}
.nav-feature:hover .nav-feature-title { text-decoration: underline; text-decoration-color: var(--ochre); text-underline-offset: 4px; }
.nav-feature-img { display: block; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
.nav-feature-body { padding: 14px 16px 16px; display: grid; gap: 4px; }
.nav-feature-kicker { font-family: var(--font-ui); font-size: .8rem; font-weight: 700; color: var(--ochre); }
.nav-feature-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.nav-feature-text { font-family: var(--font-ui); font-size: .88rem; color: #E6DFC9; }
.nav-sheet-head, .nav-sheet-ctas, .nav-close { display: none; }
.header-cta { padding: 10px 20px; font-size: .92rem; }
.nav-toggle { display: none; }
body.nav-open { overflow: hidden; }

/* Hero */
.hero {
  position: relative; background-size: cover; background-position: center;
  background-color: var(--olive-950); color: #fff;
}
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(28,34,16,.78) 15%, rgba(28,34,16,.25) 60%, rgba(28,34,16,.45)); }
.hero-inner {
  position: relative; display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 48px; align-items: center; padding-block: 88px 110px;
}
.hero .eyebrow { color: rgba(246,240,226,.85); }
.hero h1 { color: #fff; }
.hero .lede { color: #EFEAD9; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.img-credit { position: absolute; right: 12px; bottom: 6px; font-size: .72rem; color: rgba(255,255,255,.65); margin: 0; }

/* Feitenkaart. Was een "parkvergunning" met zandvlak, stippelrand en een
   schuin okeren stempel. Sinds 2 okt 2026 een rustig wit vlak met een
   haarlijn: de feiten als lijst van twee kolommen met een lijn per regel, de
   controledatum als gewone grijze regel onderaan (.permit-stamp). */
.permit-card {
  background: #fff; color: var(--ink);
  border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 22px 22px 18px;
}
.permit-h { font-size: 1.05rem; margin: 0 0 6px; }
.permit-stamp {
  margin: 14px 0 0; font-family: var(--font-ui); font-size: .84rem; color: var(--ink-soft);
}
.facts { margin: 0; display: grid; }
.fact {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 2px 18px;
  align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--hair);
}
.fact:last-child { border-bottom: 0; padding-bottom: 2px; }
.fact dt { font-family: var(--font-ui); font-size: .9rem; color: var(--ink-soft); }
.fact dd { margin: 0; font-family: var(--font-ui); font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums; }
/* Tweede regel onder een feit, zoals "Closed right now, opens in June" onder
   het seizoen. Vervangt de pil met het bolletje. */
.fact-sub { display: block; font-weight: 500; font-size: .85rem; color: var(--ink-soft); margin-top: 2px; }
.permit-card > .btn { display: block; text-align: center; margin-top: 14px; }

/* USP-balk */
.usps { display: flex; flex-wrap: wrap; gap: 18px 36px; padding-block: 30px 10px; }
.usp { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; font-size: .98rem; }
.usp-check { width: 5px; height: 5px; flex: none; margin-top: .72em; border-radius: 50%; background: var(--ink-soft); }

/* Topic-cards */
.section-cards { padding-block: 56px 72px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 28px; }
.topic-card {
  background: #fff; border-radius: var(--radius); padding: 24px;
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--hair);
  transition: border-color .12s ease;
}
.topic-card:hover { border-color: var(--hair-strong); }
.topic-card p { color: var(--ink-soft); font-size: .95rem; }
.topic-more { font-family: var(--font-display); font-weight: 600; color: var(--olive-800); font-size: .92rem; }

/* Contentpagina's. De kop staat sinds 2 okt 2026 op dezelfde ondergrond als
   de rest van de pagina, net als op het lodge-overzicht: geen zandband meer
   tussen kruimelpad en tekst, alleen ruimte. */
.page-head { padding-block: 24px 8px; }
/* Op een lodgepagina staat het mozaïek direct onder de titel. Compact, zodat
   de foto op een laptop meteen in beeld is, en de intro één maat kleiner. */
.page-head-lodge { padding-block: 20px 24px; }
.page-head-lodge h1 { margin-bottom: 10px; }
.page-head-lodge .lede { font-size: 1.05rem; max-width: 70ch; }
@media (max-width: 700px) { .page-head-lodge { padding-block: 16px 20px; } }
/* Kaartpagina: kop zo laag mogelijk, de kaart begint direct eronder. */
.page-head-map { padding-block: 14px 10px; }
.page-head-map h1 { margin-bottom: 6px; }
.page-head-map .lede { font-size: 1.05rem; max-width: 72ch; }
@media (max-width: 700px) { .page-head-map { padding-block: 10px 8px; } }
.fees-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 40px; padding-block: 48px 72px; align-items: start; }
.fee-block { margin-bottom: 34px; }
.fee-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.fee-table th { text-align: left; font-weight: 500; padding: 9px 8px 9px 0; border-bottom: 1px solid rgba(90,93,76,.22); }
.fee-table td { padding: 9px 0 9px 8px; border-bottom: 1px solid rgba(90,93,76,.22); vertical-align: top; }
.fee-amount { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fee-note { color: var(--ink-soft); font-size: .88rem; }
.fee-footnote { color: var(--ink-soft); font-size: .88rem; margin: 12px 0 0; }
.rate-currency { color: var(--ink-soft); font-size: .88rem; margin: 12px 0 0; }
.fees-aside { position: sticky; top: 92px; display: grid; gap: 22px; }
/* Alle blokken in de zijkolom zijn hetzelfde witte vlak. Het blok met de knop
   was donkergroen en de bron zandkleurig; de knop zelf is genoeg accent. */
.aside-block { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); padding: 22px; }
.aside-block h2 { font-size: 1.05rem; }
.aside-source p { font-size: .92rem; color: var(--ink-soft); }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.check-list li { padding-left: 22px; position: relative; font-size: .95rem; }
.check-list li::before {
  content: ""; position: absolute; left: 4px; top: .7em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft);
}
@media (max-width: 900px) {
  .fees-layout { grid-template-columns: 1fr; }
  .fees-aside { position: static; }
}

/* Contentdocumenten & formulieren */
.content-section { margin-bottom: 40px; }
.content-doc h2 { margin-top: 0; }
.table-scroll { overflow-x: auto; }
.fee-table thead th { font-family: var(--font-ui); font-size: .88rem; font-weight: 600; color: var(--ink-soft); padding: 0 8px 8px 0; text-align: left; border-bottom: 1px solid var(--hair-strong); }
.source-list { margin: 0; padding-left: 18px; font-size: .92rem; }
.source-list li { margin-bottom: 6px; }
.plan-form label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 16px; }
.plan-form input[type=text], .plan-form input[type=email], .plan-form select, .plan-form textarea {
  display: block; width: 100%; margin-top: 6px;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 400; color: var(--ink);
  background: #fff; border: 1.5px solid rgba(90,93,76,.35); border-radius: 8px;
  padding: 11px 13px;
}
.plan-form input:focus, .plan-form select:focus, .plan-form textarea:focus { border-color: var(--terracotta); outline: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.plan-form button { margin-top: 6px; border: 0; cursor: pointer; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Mammal-checklist & birding */
.mammal-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.legend-item {
  font-family: var(--font-ui); font-size: .8rem; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
}
.l-guaranteed { background: #3A6B28; color: #fff; }
.l-likely { background: #7FA34E; color: #fff; }
.l-chance { background: var(--ochre); color: var(--ink); }
.l-luck { background: var(--terracotta); color: #fff; }
.l-absent { background: #C9C5B4; color: #5A5D4C; }
.mammal-grid {
  list-style: none; margin: 0 0 8px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px;
}
.mammal {
  border-radius: var(--radius); padding: 14px 12px 12px;
  display: flex; flex-direction: column; gap: 3px; text-align: center; align-items: center;
  border: 1px solid rgba(90,93,76,.16);
}
.mammal-icon { display: block; width: 100%; height: 46px; margin-bottom: 4px; }
.mammal-icon svg { width: 100%; height: 100%; display: block; }
.m-guaranteed .mammal-icon { color: #2F5A1E; }
.m-likely .mammal-icon { color: #4E7A38; }
.m-chance .mammal-icon { color: #8A6510; }
.m-luck .mammal-icon { color: var(--terracotta-dark); }
.m-absent .mammal-icon { color: #9B9887; }
.mammal-name { font-family: var(--font-ui); font-weight: 700; font-size: .95rem; color: var(--olive-950); }
.mammal-status { font-family: var(--font-ui); font-size: .8rem; font-weight: 600; }
.mammal-note { font-size: .78rem; color: var(--ink-soft); }
.m-guaranteed { background: #DDEBCF; } .m-guaranteed .mammal-status { color: #2F5A1E; }
.m-likely { background: #E9F0DA; } .m-likely .mammal-status { color: #55742F; }
.m-chance { background: #F6E9C4; } .m-chance .mammal-status { color: #8A6510; }
.m-luck { background: #F6DFCB; } .m-luck .mammal-status { color: #A84A24; }
.m-absent { background: #EDEBE2; }
.m-absent .mammal-icon { opacity: .5; }
.m-absent .mammal-name { color: #6C6F5D; }
.m-absent .mammal-status { color: #7A7C6B; }
.bird-panel {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  background: var(--panel); border-radius: var(--radius); padding: 22px 26px; margin-top: 6px;
}
.bird-stat { text-align: center; padding-right: 22px; border-right: 1px solid var(--hair-strong); }
.bird-count { display: block; font-family: var(--font-ui); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--olive-800); }
.bird-count-label { font-family: var(--font-ui); font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.bird-top { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.bird-top li::marker { font-family: var(--font-ui); font-weight: 700; color: var(--ink-soft); }
.bird-name { font-family: var(--font-ui); font-weight: 700; color: var(--olive-950); }
.bird-why { color: var(--ink-soft); font-size: .93rem; }
.bird-why::before { content: " · "; }
@media (max-width: 640px) {
  .bird-panel { grid-template-columns: 1fr; }
  .bird-stat { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--hair-strong); padding-bottom: 14px; }
}

/* Kaartpagina */
.map-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 40px; padding-block: 48px 72px; align-items: start; }
.map-embed { margin-bottom: 34px; }
.map-embed iframe {
  width: 100%; height: 440px; border: 1px solid rgba(90,93,76,.25);
  border-radius: var(--radius); display: block; background: var(--sand);
}
.map-attrib { font-size: .8rem; color: var(--ink-soft); margin: 8px 0 0; }
.download-list { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 12px; }
.download-link {
  display: flex; align-items: center; gap: 16px; text-decoration: none;
  background: #fff; border-radius: var(--radius); padding: 16px 20px;
  border: 1px solid var(--hair); transition: border-color .12s ease;
}
.download-link:hover { border-color: var(--hair-strong); }
.download-icon {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--olive-800); color: #fff; display: grid; place-items: center;
  font-family: var(--font-ui); font-weight: 800; font-size: 1.1rem;
}
.download-body { display: flex; flex-direction: column; }
.download-body strong { font-family: var(--font-ui); color: var(--olive-950); }
.download-meta { font-size: .85rem; color: var(--ink-soft); }
.coords { font-family: var(--font-ui); font-size: .9rem; white-space: nowrap; }
@media (max-width: 900px) { .map-layout { grid-template-columns: 1fr; } .map-embed iframe { height: 320px; } }

[hidden] { display: none !important; }

/* Het lodge-overzicht (/lodges/: filterbalk, kaarten, vergelijken) heeft
   sinds 1 okt 2026 een eigen bestand, assets/css/lodges.css, dat alleen op
   die pagina laadt. De badges hieronder blijven hier: de lodgepagina gebruikt
   ze ook. */
.no-results { font-size: 1rem; color: var(--ink-soft); padding: 28px 0; }
.lodge-hero {
  position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
}
/* Alleen directe kinderen: de plaat (svg) en een losse foto. De fotomozaïek
   heeft eigen regels in gallery.css en mag hier niets van erven. */
.lodge-hero > svg, .lodge-hero > img {
  display: block; width: 100%; height: auto; max-height: 380px; object-fit: cover;
  border-radius: var(--radius); position: relative;
}
/* Prijsklasse, ligging en eigenaar op de lodgepagina: één grijze regel met
   puntjes ertussen, zoals op de kaarten van het overzicht. Waren gekleurde
   pillen in kapitalen. */
.badge { white-space: nowrap; }
.lodge-badges .badge + .badge::before { content: "\00b7"; margin: 0 .5em; color: var(--ink-soft); }
.badge-offline { color: var(--ink); font-weight: 700; }
.lodge-intro { font-size: 1.15rem; }

/* Footer */
.site-footer { background: var(--olive-950); color: #D9D6C4; padding-block: 12px 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; padding-block: 36px 24px; }
.footer-brand { color: #fff; margin-bottom: .4em; }
.footer-note { font-size: .92rem; color: #B9B7A0; max-width: 40ch; }
.footer-h { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: #F6F0E2; margin: 0 0 .8em; }
.site-footer nav a, .site-footer div > a { display: block; color: #D9D6C4; text-decoration: none; padding-block: 4px; font-size: .95rem; }
.site-footer a:hover { color: #fff; }
.footer-meta { border-top: 1px solid rgba(217,214,196,.2); padding-top: 16px; font-size: .85rem; color: #A5A38C; }
.footer-meta a { color: inherit; }

/* Responsive */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 34px; padding-block: 64px 80px; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .header-cta { display: none; }
  /* Smal scherm: het menu is een schuifpaneel over het hele scherm, met de
     twee knoppen bovenaan en per hoofditem een uitklapbare groep. */
  .site-nav {
    display: none; position: fixed; inset: 0; z-index: 70; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--olive-950); padding: 0 20px 36px; margin: 0;
  }
  .site-nav.open { display: block; }
  .nav-sheet-head { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
  .nav-sheet-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #fff; }
  .nav-close { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
    border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
  .nav-sheet-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 14px; }
  .nav-sheet-ctas .btn { text-align: center; padding: 12px 10px; font-size: .95rem; }
  .nav-list { display: block; }
  .nav-item { border-top: 1px solid rgba(255,255,255,.12); }
  .nav-link { display: flex; width: 100%; justify-content: space-between; align-items: center;
    padding: 16px 0; font-size: 1.05rem; color: #fff; border-radius: 0; text-align: left; }
  .nav-link:hover, .nav-link[aria-expanded="true"] { background: none; }
  .nav-caret { width: 9px; height: 9px; }
  .nav-panel { position: static; background: none; box-shadow: none; border: 0; padding: 0 0 10px; }
  .nav-panel-inner { display: block; padding: 0; max-width: none; }
  .nav-col { margin-bottom: 14px; }
  .nav-col-title { margin: 6px 0 2px; }
  .nav-col li a { padding: 9px 0; font-size: 1rem; }
  .nav-months { grid-template-columns: repeat(4, 1fr); max-width: none; }
  .nav-months li a { padding: 9px 0; font-size: .95rem; }
  /* De uitgelichte lodgekaart is op smal scherm dubbelop met de knop bovenaan. */
  .nav-feature { display: none; }
  .nav-toggle {
    display: block; margin-left: auto; background: none; border: 0; padding: 10px; cursor: pointer;
  }
  .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
    display: block; width: 24px; height: 3px; background: #fff; border-radius: 2px; content: ""; position: relative;
  }
  .nav-toggle-bar::before { position: absolute; top: -8px; }
  .nav-toggle-bar::after { position: absolute; top: 8px; }
}
@media (max-width: 560px) {
  .card-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* Gidsen-intake */
.intake-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.intake-promise { list-style: none; margin: 8px 0 0; padding: 20px 22px; background: #fff;
  border: 1px solid var(--hair); border-radius: var(--radius); display: grid; gap: 10px; }
.intake-promise li { position: relative; padding-left: 22px; font-size: .95rem; }
.intake-promise li::before { content: ""; position: absolute; left: 4px; top: .7em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft); }
.intake-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 40px;
  padding-block: 40px 72px; }
.intake-layout > form { min-width: 0; }
.intake-section { border: 0; margin: 0 0 34px; padding: 0 0 28px; border-bottom: 1px solid rgba(90,93,76,.2); }
.intake-section:last-of-type { border-bottom: 0; }
.intake-section legend { display: flex; align-items: center; gap: 12px; font-family: var(--font-display);
  font-weight: 800; font-size: 1.35rem; color: var(--olive-950); margin-bottom: 6px; padding: 0; }
.intake-step { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--olive-800); color: #fff; font-size: .9rem; flex: none; }
.intake-note { font-size: .93rem; color: var(--ink-soft); margin: 0 0 20px; max-width: 60ch; }
.intake-field { margin-bottom: 20px; }
.intake-label { display: block; font-family: var(--font-ui); font-weight: 700; font-size: .98rem;
  color: var(--olive-950); margin: 0 0 4px; }
.intake-label em, .intake-consent em { font-style: normal; font-size: .85rem; color: var(--ink-soft); font-weight: 500; }
.intake-help { font-size: .87rem; color: var(--ink-soft); margin: 0 0 8px; max-width: 62ch; line-height: 1.5; }
.intake-field input[type=text], .intake-field input[type=email], .intake-field select, .intake-field textarea {
  width: 100%; max-width: 520px; font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: #fff; border: 1.5px solid rgba(90,93,76,.32); border-radius: 8px; padding: 10px 13px; }
.intake-field input:focus-visible, .intake-field select:focus-visible, .intake-field textarea:focus-visible {
  outline: 3px solid var(--terracotta); outline-offset: 1px; }
.intake-options { display: flex; flex-wrap: wrap; gap: 8px; }
.intake-option { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-ui); font-size: .92rem; background: #fff;
  border: 1.5px solid rgba(90,93,76,.28); border-radius: 999px; padding: 7px 14px; }
.intake-option:hover { border-color: var(--olive-600); }
.intake-option input { accent-color: var(--olive-800); }
.intake-option:has(input:checked) { background: var(--olive-800); border-color: var(--olive-800); color: #fff; }
.intake-consent { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: .95rem; }
.intake-consent input { accent-color: var(--olive-800); width: 17px; height: 17px; margin-top: 3px; flex: none; }
.intake-submit { padding-top: 8px; }
.intake-submit .btn { margin-bottom: 12px; }

.intake-preview { position: sticky; top: 18px; }
.intake-preview-h { font-family: var(--font-display); font-weight: 600; font-size: .875rem;
  color: var(--ink-soft); margin: 0 0 10px; }
.guide-card { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; }
.guide-photo { aspect-ratio: 4/3; background:
  linear-gradient(170deg, #E9DCC0 0%, #D6C49B 48%, #A8935F 49%, #7E8B52 100%); }
.guide-body { padding: 16px 18px 18px; }
.guide-body h2 { font-size: 1.2rem; margin: 0 0 2px; }
.guide-nick { color: var(--olive-600); }
.guide-role { font-size: .82rem; color: var(--olive-600); font-weight: 600; margin: 0; font-family: var(--font-ui); }
.guide-meta { font-size: .85rem; color: var(--ink-soft); margin: 2px 0 10px; }
.guide-tags { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 0 0 12px; padding: 0; }
.guide-tags li { font-family: var(--font-ui); font-size: .74rem; font-weight: 600; color: var(--olive-800);
  background: #EDF2E4; border-radius: 999px; padding: 3px 9px; }
.guide-line { font-size: .89rem; margin: 0 0 6px; }
.guide-line strong { font-family: var(--font-ui); font-size: .8rem; }
.guide-vehicle { font-size: .85rem; color: var(--ink-soft); margin: 10px 0 6px;
  border-top: 1px solid rgba(90,93,76,.15); padding-top: 10px; }
.guide-rate { font-family: var(--font-display); font-weight: 800; color: var(--olive-950); margin: 0 0 10px; }
.guide-contact { display: flex; gap: 8px; }
.guide-contact span { font-family: var(--font-ui); font-size: .82rem; font-weight: 700; color: #fff;
  background: var(--olive-800); border-radius: 999px; padding: 6px 14px; }
@media (max-width: 980px) {
  .intake-head, .intake-layout { grid-template-columns: 1fr; gap: 26px; }
  .intake-preview { position: static; max-width: 340px; }
}

/* Gidsen-prikbord */
.guides-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
.guides-check { background: #fff; border: 1px solid var(--hair);
  border-radius: var(--radius); padding: 20px 22px; margin-top: 8px; }
.guides-check h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  color: var(--olive-950); margin: 0 0 6px; }
.guides-check p { font-size: .92rem; margin: 0; }
.guides-section { padding-block: 40px 72px; }
.guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 26px; }
.guide-card-full { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.guide-card-full .guide-photo { aspect-ratio: 3/4; height: auto; object-fit: cover; align-self: start; }
.guide-card-full .guide-body { padding: 20px 22px 20px; }
.guide-quote { margin: 12px 0; padding: 12px 16px; background: var(--panel);
  border-radius: 10px; font-size: .92rem; font-style: italic; }
.guide-suits { font-size: .85rem; color: var(--ink-soft); margin: 0 0 6px; }
.guide-suits strong, .guide-vehicle strong { font-family: var(--font-ui); font-size: .8rem; font-style: normal; }
.guide-foot { border-top: 1px solid rgba(90,93,76,.18); margin-top: 12px; padding-top: 12px; }
.guide-foot .guide-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.guide-foot .guide-contact .btn { font-size: .88rem; padding: 9px 18px; }
/* Deze variant hoort bij de gidsenkaarten, die op zand staan. Zonder de scope
   overschreef hij ook de tweede heroknop, die op een foto staat: donkergroen op
   een lichte foto is daar onleesbaar. Zie de heroversie bovenin dit bestand. */
.guides-page .btn-ghost,
.guide-foot .btn-ghost,
.guides-cta .btn-ghost { background: transparent; color: var(--olive-800); border: 1.5px solid var(--olive-800); }
.guides-page .btn-ghost:hover,
.guide-foot .btn-ghost:hover,
.guides-cta .btn-ghost:hover { background: var(--olive-800); color: #fff; }
.guide-verified { font-size: .76rem; color: var(--ink-soft); margin: 0; }
.guides-cta { background: var(--panel); border-radius: var(--radius); padding: 26px 30px; margin-top: 34px; }
.guides-cta h2 { margin: 0 0 6px; font-size: 1.3rem; }
.guides-cta p { margin: 0 0 16px; max-width: 62ch; }
@media (max-width: 980px) {
  .guides-head { grid-template-columns: 1fr; gap: 24px; }
  .guides-grid { grid-template-columns: 1fr; }
  .guide-card-full { grid-template-columns: 1fr; }
  .guide-card-full .guide-photo { aspect-ratio: 16/9; }
}

/* Fotomozaïek en viewer op de lodge-pagina: zie gallery.css. Dat bestand laadt
   alleen op lodgepagina's met foto's. */

/* Lodge-detail: badges, voorzieningen, kostenblok */
.lodge-badges { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0 0 14px;
  font-family: var(--font-ui); font-size: .92rem; font-weight: 500; line-height: 1.5; color: var(--ink-soft); }
.fac-lead { font-family: var(--font-ui); font-size: .9rem; font-weight: 600; color: var(--ink-soft); margin: 14px 0 4px; }
/* Voorzieningen en activiteiten als gewone tekst met puntjes, niet als
   pillen: het zijn feiten, geen knoppen. */
.fac-list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;
  font-family: var(--font-ui); font-size: .95rem; line-height: 1.6; color: var(--ink); }
.fac-list li:not(:last-child)::after { content: "\00b7"; margin: 0 .5em; color: var(--ink-soft); }

/* Verwante lodges onderaan de detailpagina */
.related-section { padding-block: 8px 64px; }
.related-section > h2 { margin-bottom: 16px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-bottom: 18px; }
.related-card { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); padding: 16px 18px; }
.related-reason { font-family: var(--font-ui); font-size: .85rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 4px; }
.related-card h3 { font-size: 1.1rem; margin: 0 0 2px; }
.related-card h3 a { color: var(--olive-950); text-decoration: none; }
.related-card h3 a:hover { text-decoration: underline; }
.related-meta { font-size: .85rem; color: var(--ink-soft); margin: 0 0 8px; }
.related-price { font-family: var(--font-display); font-weight: 700; font-size: .95rem; margin: 0; }

/* ─── Lodge-detail: ritme, diepte en het bonnetje ─────────────────────── */

/* Secties moeten ademen. h2 had geen bovenmarge, dus alles plakte aan elkaar.
   Ruimte erboven is genoeg: het okeren streepje en de haarlijn boven elke kop
   zijn sinds 2 okt 2026 weg. */
.fees-main > h2 { margin: 56px 0 6px; }
.fees-main > h2:first-of-type { margin-top: 40px; }
.section-lead { color: var(--ink-soft); margin: 0 0 18px; max-width: 60ch; }
.fees-main .check-list { margin-top: 16px; }
.fees-main .fac-list { margin-top: 14px; }
.fees-main > .fee-footnote { margin-top: 16px; }

/* Het bonnetje: het enige donkere vlak op de pagina, want dit is het punt.
   Getallen in wit in plaats van oker, en geen schaduw. */
.tally {
  background: var(--olive-950); color: #EDEAD9;
  border-radius: var(--radius); padding: 22px 26px 20px; margin: 22px 0 8px;
}
.tally-rows { margin: 0; display: grid; gap: 2px; }
.tally-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 10px 0; }
.tally-row dt { font-family: var(--font-ui); font-weight: 700; font-size: 1rem; }
.tally-row dt span {
  display: block; font-family: var(--font-body); font-weight: 400;
  font-size: .86rem; color: rgba(237,234,217,.62); margin-top: 3px; max-width: 46ch;
}
.tally-row dd {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* De tarieven zelf zijn nu het hoofdgetal, want daarmee reken je je eigen reis
   uit. De uitgewerkte som staat eronder als controle, niet als het antwoord. */
.tally-lead dd { font-size: 1.9rem; font-weight: 800; color: #fff; text-align: right; }
.tally-lead dd span {
  display: block; font-family: var(--font-body); font-weight: 400; font-size: .78rem;
  color: rgba(237,234,217,.62); white-space: nowrap; margin-top: 2px;
}
.tally-worked {
  border-top: 1px solid rgba(237,234,217,.28); margin: 8px 0 0; padding-top: 14px;
  font-size: .95rem; color: rgba(237,234,217,.86); max-width: 62ch;
}
.tally-worked strong { color: #fff; font-family: var(--font-display); font-size: 1.1rem; }
.tally-note, .tally-caveat {
  font-size: .88rem; color: rgba(237,234,217,.72); margin: 14px 0 0; max-width: 62ch;
}
.tally-link {
  display: inline-block; margin-top: 16px; color: #F6F0E2;
  font-family: var(--font-ui); font-weight: 600; font-size: .9rem;
}
.tally-link:hover { color: #fff; }

/* Get listed */
.listed-head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start; }
.listed-mail { background: var(--olive-950); color: #EDEAD9; border-radius: var(--radius); padding: 22px 24px; margin-top: 8px; }
.listed-mail-label { font-family: var(--font-ui); font-size: .9rem; font-weight: 600;
  color: rgba(237,234,217,.72); margin: 0 0 8px; }
.listed-mail-address { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: #fff; word-break: break-all; }
.listed-mail-address:hover { color: #fff; text-decoration-thickness: 2px; }
.listed-mail-note { font-size: .88rem; color: rgba(237,234,217,.72); margin: 10px 0 0; }
.listed-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 40px; padding-block: 44px 72px; }
.listed-routes { display: grid; gap: 22px; }
.listed-route { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius); padding: 24px 26px; }
.listed-route h2 { font-size: 1.4rem; margin: 0 0 10px; }
.listed-route p { margin: 0 0 12px; }
.listed-tag { font-family: var(--font-ui); font-size: .875rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 6px; }
.listed-do { font-size: .92rem; color: var(--ink-soft); }
.listed-list { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 8px; font-size: .95rem; }
.listed-nots { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 9px; font-size: .93rem; }
.listed-nots li { padding-left: 24px; position: relative; }
.listed-nots li::before { content: "\00d7"; position: absolute; left: 0; top: -2px; color: var(--ink-soft);
  font-weight: 800; font-size: 1.1rem; }
.listed-small { font-size: .84rem; color: var(--ink-soft); margin: 0; }
.listed-aside { display: grid; gap: 18px; align-content: start; }
.intake-fallback { background: var(--panel); border-radius: var(--radius);
  padding: 14px 18px; margin: 0 0 12px; }
@media (max-width: 900px) {
  .listed-head, .listed-layout { grid-template-columns: 1fr; gap: 24px; }
}

/* Logo in de header, vervangt de oude gekleurde blob */
.brand-logo { width: 52px; height: 52px; display: block; flex: none; }
@media (max-width: 700px) { .brand-logo { width: 42px; height: 42px; } }

/* Waar ga je hierna heen */
.next-steps { padding-block: 8px 64px; }
.next-steps > h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin-bottom: 16px; }
.next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.next-card { display: block; background: #fff; border: 1px solid var(--hair);
  border-radius: var(--radius); padding: 18px 20px; text-decoration: none;
  transition: border-color .12s ease; }
.next-card:hover { border-color: var(--hair-strong); }
.next-label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--olive-950); margin-bottom: 4px; }
.next-card:hover .next-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.next-reason { display: block; font-size: .9rem; color: var(--ink-soft); line-height: 1.45; }
.listed-wordmark { height: 96px; width: auto; display: block; margin-bottom: 14px; }

/* Wat een tarief dekt. Zonder deze regel staat een kamerprijs naast een
   all-in tarief alsof ze hetzelfde betekenen. Een kleine grijze regel met het
   soort tarief vetgedrukt; de gekleurde rand per soort is weg. */
.rate-basis { font-size: .93rem; color: var(--ink-soft); margin: -4px 0 16px; max-width: var(--measure); }
.rate-basis strong { color: var(--ink); }

/* Het oude uitklapmenu (.nav-group/.nav-sub) is op 3 okt 2026 vervangen door
   het megamenu bovenaan dit bestand. */

/* Gidsenblok: waar begeleiding het product is, verdient het eigen ruimte. */
.guiding { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 24px 26px 18px; margin: 34px 0; }
.guiding h2 { margin-top: 0; }
.guiding-facts { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.guiding-facts li { padding-left: 22px; position: relative; }
.guiding-facts li::before { content: ""; position: absolute; left: 4px; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-soft); }
.guiding-source { font-size: .85rem; color: var(--ink-soft); margin: 16px 0 0; }
@media (max-width: 640px) { .guiding { padding: 20px 18px 16px; } }

/* Bouwer-credit onder in de voettekst: aanwezig, niet luidruchtig. */
.footer-by { margin: 6px 0 0; opacity: .75; }
.footer-by a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Weerpagina */
.weather-head { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: start; }
.wx-now { background: var(--olive-950); color: #fff; border-radius: var(--radius); padding: 22px 24px; }
.wx-now-label { font-family: var(--font-display); font-size: .9rem; font-weight: 600;
  color: rgba(255,255,255,.72); margin: 0 0 6px; }
.wx-now-temp { font-family: var(--font-display); font-size: 3rem; font-weight: 800; margin: 0; line-height: 1; }
.wx-now-desc { margin: 6px 0 0; color: #EFEAD9; }
.wx-now-foot { margin: 4px 0 0; font-size: .85rem; color: rgba(255,255,255,.6); }
.weather-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 40px; padding-block: 48px 72px; align-items: start; }
.wx-forecast { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 34px; }
.wx-day { background: #fff; border: 1px solid rgba(90,93,76,.18); border-radius: 8px; padding: 10px 6px; text-align: center; }
.wx-day-wet { background: #EEF4F7; border-color: #BDD6E2; }
.wx-day p { margin: 0; line-height: 1.3; }
.wx-day-name { font-family: var(--font-display); font-weight: 700; font-size: .82rem; }
.wx-day-rain { font-size: .72rem; color: var(--olive-600); font-weight: 600; margin-top: 4px !important; }
.wx-day-desc { font-size: .68rem; color: var(--ink-soft); margin-top: 2px !important; }
.wx-loading { color: var(--ink-soft); font-size: .9rem; }
.wx-table td { vertical-align: top; }
.wx-meaning { font-size: .88rem; color: var(--ink-soft); max-width: 42ch; }
.wx-dry td:nth-child(4) { color: var(--terracotta-dark); font-weight: 700; }
.wx-wet td:nth-child(4) { color: #2A6F97; font-weight: 700; }
@media (max-width: 900px) {
  .weather-head, .weather-layout { grid-template-columns: 1fr; }
  .wx-forecast { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px) {
  /* Vier dagkaarten naast elkaar passen niet op een telefoon: "Mostly clear"
     duwde de pagina 60 pixel breder dan het scherm. Drie wel. */
  .wx-forecast { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .wx-day { padding: 9px 4px; }
  .wx-day-desc { font-size: .66rem; }
}

/* Weericonen en grafiek */
.wx-now-top { display: flex; gap: 16px; align-items: center; }
.wx-now-icon { width: 52px; height: 52px; flex: none; color: #F6F0E2; }
.wx-sun { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.wx-sun dt { display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: .85rem;
  color: rgba(255,255,255,.66); }
.wx-sun dt svg { width: 15px; height: 15px; color: rgba(255,255,255,.8); }
.wx-sun dd { margin: 2px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.wx-day-icon { width: 26px; height: 26px; color: var(--olive-600); margin: 2px auto 0; display: block; }
.wx-day-wet .wx-day-icon { color: #2A6F97; }
.wx-ico svg { width: 26px; height: 26px; color: var(--olive-600); }
.wx-peak .wx-ico svg { color: var(--terracotta); }
.wx-peak { background: rgba(102,116,59,.07); }
.wx-tag { font-family: var(--font-ui); font-size: .8rem; font-weight: 600; color: var(--ink-soft); }
.wx-dry-n { color: var(--terracotta-dark); font-weight: 700; }
.wx-wet-n { color: #2A6F97; font-weight: 700; }
.wx-chart { margin: 0 0 34px; background: #fff; border: 1px solid rgba(90,93,76,.18);
  border-radius: var(--radius); padding: 18px 12px 10px; }
.wx-chart svg { width: 100%; height: auto; }
.wx-c-bar { fill: #9BC0D4; }
.wx-c-peak { fill: rgba(102,116,59,.10); }
.wx-c-line { fill: none; stroke: var(--terracotta); stroke-width: 2.2; stroke-linejoin: round; }
.wx-c-dot { fill: var(--terracotta); }
.wx-c-month { font-family: var(--font-display); font-size: 13px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
.wx-c-rain { font-size: 11px; fill: var(--ink-soft); text-anchor: middle; }
.wx-chart figcaption { font-size: .8rem; color: var(--ink-soft); margin-top: 8px; text-align: center; }

/* Dagkaart in de verwachting: dag en datum samen, een balkje voor het
   temperatuurbereik over de hele periode, en regen alleen genoemd als het
   regent. Veertien keer het woord 'dry' is ruis, geen informatie. */
.wx-day-name span { display: block; font-weight: 500; font-size: .72rem; color: var(--ink-soft); }
.wx-day-desc { font-size: .7rem; color: var(--ink-soft); margin-top: 2px !important; min-height: 2em; }
.wx-range { position: relative; height: 5px; background: rgba(90,93,76,.14); border-radius: 999px; margin: 8px 4px 6px; }
.wx-range span { position: absolute; top: 0; height: 5px; border-radius: 999px;
  background: linear-gradient(90deg, #9BC0D4, var(--ochre)); }
.wx-day-temps { display: flex; justify-content: center; gap: 8px; align-items: baseline; }
.wx-day-temps strong { font-family: var(--font-display); font-size: 1.15rem; }
.wx-day-temps span { font-size: .8rem; color: var(--ink-soft); }
.wx-day-rain { font-size: .72rem; color: #2A6F97; font-weight: 700; margin-top: 3px !important; }

/* ---- Best time to visit: de jaarstrook en de maandkaarten ---------------- */
/* Vier oordelen, vier kleuren, verder niets. De strook moet je in een halve
   seconde kunnen lezen; alles wat er nog bij komt maakt hem juist trager. */
/* Seizoenskleuren. Besluit 12 sep 2026: het groene seizoen moet gewoon GROEN
   zijn. Dus: prime = zongoud (het beste = de zon), heet = terracotta,
   schouder = zand, groen seizoen = bladgroen. */
.bt-prime   { --bt: var(--ochre); }
.bt-dry-hot { --bt: #C0562A; }
.bt-shoulder{ --bt: #B79B6B; }
.bt-green   { --bt: #4E9B45; }

.bt-strip-wrap { margin-bottom: 8px; }
/* Het korte antwoord bovenaan een pagina. Was een donkergroen blok met een
   okeren label in kapitalen; nu een licht zandvlak, inkt op licht. */
.bt-answer { background: var(--panel); color: var(--ink); border-radius: var(--radius);
  padding: 22px 26px; margin-bottom: 28px; }
.bt-answer-label { font-family: var(--font-ui); font-size: .9rem; font-weight: 600;
  color: var(--ink-soft); margin: 0 0 6px; }
.bt-answer-text { margin: 0; font-size: 1.12rem; line-height: 1.55; }
.bt-answer-text strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--olive-950); }

.bt-strip { --cols: repeat(12, 1fr); }
.bt-strip ol, .bt-strip > ol { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: var(--cols); }
.bt-bars { gap: 4px; align-items: end; }
.bt-bars a { display: block; text-decoration: none; color: inherit; }
.bt-col-temp { display: block; text-align: center; font-family: var(--font-ui); font-size: .7rem;
  font-weight: 700; color: var(--ink-soft); margin-bottom: 5px; }
.bt-col-track { display: block; height: 92px; position: relative; }
.bt-col-bar { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 3px 3px 0 0;
  background: rgba(90,93,76,.34); }
.bt-bars a:hover .bt-col-bar { background: rgba(90,93,76,.55); }

/* De band. Geen tussenruimte, zodat vier droge maanden op elkaar aansluiten
   tot één blok in plaats van vier losse blokjes. */
.bt-band { margin-top: 4px !important; border-radius: 4px; overflow: hidden; }
.bt-band li { height: 15px; background: var(--bt); }
.bt-names { gap: 4px; margin-top: 7px !important; }
.bt-names a { display: block; text-align: center; text-decoration: none;
  font-family: var(--font-ui); font-size: .78rem; font-weight: 700; color: var(--olive-950); }
.bt-names a:hover { text-decoration: underline; }

.bt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
.bt-key { font-family: var(--font-ui); font-size: .78rem; font-weight: 600; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px; }
.bt-key::before { content: ""; width: 11px; height: 11px; border-radius: 3px; background: var(--bt); }
.bt-legend-note { font-size: .82rem; color: var(--ink-soft); }

@media (max-width: 700px) {
  /* Op zes kolommen vielen de band en de maandnamen los van hun eigen staven,
     want het zijn drie aparte lijsten die elk in twee rijen breken. De band moet
     juist doorlopen om leesbaar te zijn, dus houden we twaalf kolommen en laat
     de strook zelf zijwaarts scrollen. */
  .bt-strip { min-width: 540px; }
  .bt-strip-scroll { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .bt-col-track { height: 70px; }
}

/* Seizoensblokken: één alinea per periode, de cijfers per maand eronder. */
.bt-seasons { display: grid; gap: 14px; margin: 24px 0 12px; }
.bt-season { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 20px 22px 18px; scroll-margin-top: 90px; }
.bt-season-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.bt-season-head h3 { margin: 0; font-size: 1.32rem; }
.bt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; }
/* Het oordeel per periode als gewone grijze tekst; alleen het icoontje draagt
   de seizoenskleur, net als in de legenda onder de jaarstrook. */
.bt-chip { display: inline-flex; align-items: center; font-family: var(--font-ui); font-size: .85rem;
  font-weight: 600; color: var(--ink-soft); }
.bt-chip svg { color: var(--bt); }
.bt-season-text { margin: 10px 0 14px !important; }
.bt-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bt-mini li { display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; align-items: center;
  background: var(--bone); border-radius: 8px;
  padding: 9px 12px; scroll-margin-top: 90px; }
.bt-mini-icon { grid-row: span 3; width: 26px; height: 26px; color: var(--bt); }
.bt-mini-month { font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--olive-950); line-height: 1.2; }
.bt-mini-nums, .bt-mini-rain { font-size: .82rem; color: var(--ink-soft); line-height: 1.4; }
.bt-mini-nums strong { color: var(--ink); }

/* min-width: 0 is hier geen sierraad. Zonder die regel neemt de scrollcontainer
   de minimumbreedte van zijn inhoud over (540px) en duwt hij de hele pagina
   breder dan het scherm, terwijl hij juist bedoeld is om dat te voorkomen. */
.bt-strip-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
  min-width: 0; max-width: 100%; padding-bottom: 2px; }

/* Rasteritems krimpen standaard niet onder de breedte van hun inhoud. Bij een
   raster van één kolom op een telefoon betekent dat: één brede tabel of
   dagkaartenrij duwt de hele pagina breder dan het scherm. Dit zet die
   ondergrens uit, zodat de inhoud binnen de kolom moet passen. */
.weather-main, .fees-main, .weather-layout > *, .fees-layout > * { min-width: 0; }

/* Dagdelen onder het live-blok. Vier kolommen op het donkere vlak, want dit
   hoort bij "nu", niet bij de veertiendaagse verwachting eronder. */
.wx-parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(237,234,217,.22); }
.wx-part { text-align: center; padding: 2px 4px; }
.wx-part-label { font-family: var(--font-ui); font-size: .78rem; font-weight: 600;
  color: rgba(237,234,217,.72);
  margin: 0 0 6px !important; line-height: 1.3; min-height: 2.1em; }
.wx-part-icon { width: 26px; height: 26px; color: rgba(237,234,217,.9); }
.wx-part-temp { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: #fff; margin: 4px 0 2px !important; }
.wx-part-desc, .wx-part-pop { font-size: .68rem; color: rgba(237,234,217,.62);
  margin: 0 !important; line-height: 1.35; }
.wx-part-pop { color: #9BC0D4; font-weight: 700; }

/* Losse notitie op een lodge-pagina, in de woorden van de exploitant zelf. */
.lodge-note { background: #fff; border: 1px solid var(--hair);
  border-radius: var(--radius); padding: 18px 22px; margin: 26px 0; }
.lodge-note h2 { margin-bottom: .35em; font-size: 1.25rem; }
.lodge-note p { margin: 0; }

/* ---- Lodge-pagina: sprongnav, eerstehands-blokken, seizoen, prijsrang ---- */

/* Sprongnavigatie op volle pagina's. Rustig, want het is een hulpmiddel en
   geen menu. */
.lodge-jump { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0 26px;
  padding-bottom: 18px; border-bottom: 1px solid var(--hair); }
.lodge-jump a { font-family: var(--font-ui); font-size: .9rem; font-weight: 600; color: var(--olive-800); }
.lodge-jump a:hover { color: var(--ink); }

/* Voor- en nadelen (lodge.pros, lodge.cons). Twee kolommen naast elkaar,
   onder 600 pixel onder elkaar. Geen vlak, geen gekleurde rand: een klein
   grijs label per kolom, een olijfgroen vinkje voor een pluspunt en een kort
   grijs streepje voor een minpunt. Het streepje is een rand en geen
   achtergrond, zodat het ook in de hoog-contrastmodus van Windows zichtbaar
   blijft; het vinkje is een inline SVG in currentColor, om dezelfde reden. */
.pros-cons { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; margin-top: 16px; }
.pros-cons--single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 599px) { .pros-cons { grid-template-columns: minmax(0, 1fr); } }
.pc-label { font-family: var(--font-ui); font-size: .9rem; font-weight: 600; line-height: 1.4;
  color: var(--ink-soft); margin: 0 0 10px; }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pc-list li { position: relative; padding-left: 22px; font-size: .95rem; }
.pc-mark { position: absolute; left: 0; top: calc(.82em - 6px); color: var(--olive-600); }
.pc-cons li::before { content: ""; position: absolute; left: 1px; top: calc(.82em - 1px);
  width: 9px; border-top: 2px solid var(--ink-soft); }
.pc-note { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* Vragen over de lodge (lodge.faq). Vraag als kop, antwoord als gewone
   alinea in Lora, een haarlijn tussen de items. Geen uitklapper en geen
   icoon. */
.lodge-faq { margin-top: 14px; }
.faq-item { padding: 0; }
.faq-item + .faq-item { border-top: 1px solid var(--hair); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 0; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover h3 { color: var(--olive-600); }
.faq-item h3 { font-size: 1.1rem; line-height: 1.3; margin: 0; }
.faq-chevron { flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px;
  border-right: 2px solid var(--olive-800); border-bottom: 2px solid var(--olive-800);
  transform: rotate(45deg); transition: transform .15s; }
.faq-item[open] .faq-chevron { transform: rotate(225deg); }
.faq-item p { margin: 0 0 18px; max-width: var(--measure); }

/* De directe weg naar de lodge: een regel "Website" in de feitenkaart en, bij
   lodges met het aanvraagformulier, een rustig wit blok onder de
   aanvraagkaart.
   De websiteregel is een flexregel in plaats van het raster van de andere
   feiten. Het label krijgt precies de breedte van de labelkolom daar
   (1 van 2,35 delen na de tussenruimte van 18 pixel), dus zolang de waarde
   past staat hij recht onder de andere waarden. De waarde is minstens zo breed
   als het langste stuk van het domein (width: min-content; de <wbr> vóór elke
   punt zijn de breekpunten). Past dat stuk niet naast het label, dan zakt de
   waarde onder het label en krijgt hij de hele kaartbreedte, in plaats van
   midden in een woord te breken. break-word en niet anywhere: anywhere telt
   elke letter als breekpunt voor min-content, en dan zakt hij nooit. */
/* De website-rij: het domein mag nooit midden in een woord breken. Past het
   niet naast het label, dan komt het eronder op volle breedte. */
.fact-web { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.fact-web dt { flex: 0 0 auto; }
.fact-web dd { flex: 1 1 12ch; min-width: 0; text-align: right; }
.fact-web dd a { white-space: nowrap; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.fact-link { overflow-wrap: break-word; }
.direct-link { overflow-wrap: anywhere; }
.aside-direct { font-size: .9rem; }
.aside-direct p { margin: 0 0 6px; }
.aside-direct p:last-child { margin-bottom: 0; }

/* Wat de exploitant zelf verteld heeft, zichtbaar anders dan wat wij schreven.
   Dat onderscheid is het hele punt van deze site. Het staat in het label
   boven de kop en de bronregel onderaan, in gewone letters; de okeren rand
   links en de kapitalen zijn sinds 2 okt 2026 weg. */
.firsthand { position: relative; }
.firsthand-flag { font-family: var(--font-ui); font-size: .875rem; font-weight: 600;
  color: var(--ink-soft); margin: 0 0 4px !important; }

.price-rank, .fee-ontop { font-size: .86rem; color: var(--ink-soft);
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--hair); }
.fee-ontop strong { color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; }

.cta-alt { font-size: .86rem; margin-top: 10px !important; }
.aside-owner { font-size: .9rem; }
.aside-owner h2 { font-size: 1.05rem; }

/* Het aanbod in plaats van het excuus onder een tekening. */
.plate-offer { max-width: 62ch; margin: 14px auto 0; }
.plate-offer p { margin: 0 0 10px; font-size: .93rem; }
.plate-offer .btn { margin-top: 4px; }

/* 8: op mobiel staan de feiten en de actieknop nu bóven het artikel in plaats
   van na bijna zesduizend pixels proza. Dit is de grootste ingreep op de
   pagina en hij kost één regel. */
@media (max-width: 900px) {
  .fees-layout { display: flex; flex-direction: column; }
  .fees-layout .fees-aside { order: -1; }
}

/* 12: een pagina zonder inhoud hoort kort te zijn. De tekening is decoratie,
   dus die krijgt op een lege pagina minder ruimte dan een echte foto, en op een
   telefoon nog minder. Wat er wél staat komt daardoor eerder in beeld. */
.lodge-hero > svg { max-height: 260px; }
@media (max-width: 700px) { .lodge-hero > svg { max-height: 170px; } }

/* Het exploitanten-blok is voor een ander publiek dan de reiziger. Op desktop
   staat het onderaan de zijkolom, waar het niemand in de weg zit. Op mobiel
   stond het na de omkering ineens vóór het artikel; daar hoort het achteraan. */
@media (max-width: 900px) {
  .fees-layout .fees-aside { display: contents; }
  .fees-layout .permit-card { order: -3; }
  .fees-layout .aside-cta { order: -2; }
  .fees-layout .fees-main { order: -1; }
  .fees-layout .aside-owner { order: 1; }
}
.plate-offer { max-width: 62ch; margin: 12px auto 0; font-size: .9rem; color: var(--ink-soft);
  text-align: center; }
.owner-shots { margin: 8px 0 12px; padding-left: 20px; font-size: .86rem; }
.owner-shots li { margin-bottom: 5px; }
.order-note { font-size: .84rem; color: var(--ink-soft); margin: 0 0 16px; max-width: 78ch; }
/* Privacy en andere lange lopende pagina's: ruimte boven elke tussenkop. */
.doc-body h2:not(:first-child) { margin-top: 1.6em; }
.doc-updated { font-size: .88rem; color: var(--ink-soft); }

/* Vraagformulier. Zelfde veldstijl als het intakeformulier, maar korter:
   twee regels en een tekstvak, want een bezoeker met een vraag hoort geen
   vragenlijst voor de kiezen te krijgen. */
.ask-form { max-width: 62ch; }
.ask-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.ask-field { margin-bottom: 18px; }
.ask-field label { display: block; font-family: var(--font-ui); font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
.ask-field label span { font-weight: 400; color: var(--ink-soft); }
.ask-field input, .ask-field textarea {
  display: block; width: 100%;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 400; color: var(--ink);
  background: #fff; border: 1.5px solid rgba(90,93,76,.35); border-radius: 8px;
  padding: 11px 13px;
}
.ask-field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.ask-field input:focus, .ask-field textarea:focus { border-color: var(--terracotta); outline: none; }
.ask-help { font-size: .88rem; color: var(--ink-soft); margin: 6px 0 0; }
.ask-form button { border: 0; cursor: pointer; }
.ask-form button[disabled] { opacity: .55; cursor: default; }
/* Buiten beeld maar niet display:none, want dan vult een deel van de bots hem
   alsnog niet in en verliezen we het onderscheid. */
.ask-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.ask-status { font-family: var(--font-ui); font-size: .95rem; margin: 14px 0 0; }
.ask-status:empty { margin: 0; }
.ask-ok { color: var(--olive-600); font-weight: 600; }
.ask-bad { color: var(--terracotta-dark); font-weight: 600; }
.ask-sending { color: var(--ink-soft); }
.ask-small { font-size: .88rem; color: var(--ink-soft); margin-top: 18px; max-width: 56ch; }
.ask-fallback { background: var(--panel); border-radius: var(--radius); padding: 24px 28px; max-width: 62ch; }
.ask-fallback h2 { margin-top: 0; }
.ask-known { margin-top: 44px; }
.ask-can { margin-bottom: 4px; }
.ask-can li { font-size: .93rem; }
@media (max-width: 640px) {
  .ask-row { grid-template-columns: 1fr; }
}

/* Betaalde of samen gemaakte content. Moet er zichtbaar anders uitzien dan de
   rest van de pagina: eigen grond (een licht zandvlak) en het label boven de
   kop. Niet mooier dan de redactionele tekst, want dan koop je aandacht in
   plaats van ruimte. Sinds 2 okt 2026 zonder okeren rand en kapitalen. */
.feature {
  margin: 40px 0; padding: 26px 28px 22px;
  background: var(--panel); border-radius: var(--radius);
}
.feature-label {
  font-family: var(--font-ui); font-size: .875rem; font-weight: 600; color: var(--ink-soft);
  margin: 0 0 6px;
}
.feature-h { margin: 0 0 12px; font-size: 1.35rem; }
.feature p { margin: 0 0 12px; }
.feature-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 16px 0; }
.feature-shots figure { margin: 0; }
.feature-shots img { width: 100%; height: auto; border-radius: 6px; display: block; }
.feature-shots figcaption { font-size: .78rem; color: var(--ink-soft); margin-top: 5px; }
.feature-cta { margin: 4px 0 0; }
.feature-cta a { font-family: var(--font-ui); font-weight: 600; }
@media (max-width: 640px) { .feature { padding: 20px 18px 18px; } }

/* Booking-affiliate. Rustig gehouden: dit is een dienst aan de lezer en geen
   advertentie, en het mag niet concurreren met de lodge zelf. */
.bk {
  margin: 28px 0; padding: 18px 20px;
  border: 1px solid var(--hair); border-radius: var(--radius);
}
.bk-label {
  font-family: var(--font-ui); font-size: .875rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 6px;
}
.bk p { margin: 0 0 10px; font-size: .95rem; }
.bk p:last-child { margin-bottom: 0; }
.bk-note { font-size: .82rem; color: var(--ink-soft); }
.bk-inline { font-size: .92rem; margin: 14px 0 0; }
.bk-inline .bk-note { display: block; margin-top: 3px; }

/* De affiliate-melding onder de boekknop. Klein, maar wel altijd zichtbaar. */
.cta-note {
  font-size: .78rem; line-height: 1.45; margin: 12px 0 0;
  opacity: .72;
}

/* Twee praktische links onder de feitenkaart op de reispagina. Onderdeel van de
   kaart, dus geen eigen kader; wel een lijn erboven zodat duidelijk is dat het
   geen feit meer is maar een handeling. */
.bk-lines { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.bk-lines-h {
  font-family: var(--font-ui); font-size: .875rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 6px;
}
.bk-lines p { margin: 0 0 6px; font-size: .92rem; }
.bk-lines .bk-note { font-size: .76rem; margin-top: 10px; opacity: .75; }

/* Autohuur in de zijkolom van een kamppagina, alleen in parken waar zelf rijden
   een echte optie is. */
.bk-drive p { margin: 0 0 9px; font-size: .9rem; }
.bk-drive p:last-child { margin-bottom: 0; }
.bk-drive .bk-note { font-size: .76rem; opacity: .75; }


/* Waar een officiele bron een ander bedrag noemt dan wij. Opvallend genoeg om
   niet te missen, rustig genoeg om geen waarschuwingsbalk te zijn: dit is
   uitleg en geen alarm. Een licht zandvlak, geen gekleurde rand. */
.fee-conflict {
  margin: 0 0 26px; padding: 18px 20px;
  border-radius: var(--radius); background: var(--panel);
}
.fee-conflict-h {
  font-family: var(--font-ui); font-weight: 700; font-size: .95rem; margin: 0 0 9px;
}
.fee-conflict p { font-size: .93rem; margin: 0 0 9px; }
.fee-conflict p:last-child { margin-bottom: 0; }
.fee-conflict-src { font-size: .84rem; }


/* Antwoord-eerst blok op gewone contentpagina's; leent de vorm van best-time. */
.doc-answer { margin: 0 0 26px; }

/* Inhoudsopgave voor lange pagina's. */
.doc-toc { margin: 0 0 30px; padding: 16px 20px; border: 1px solid var(--hair);
           border-radius: var(--radius); }
.doc-toc-h { font-family: var(--font-ui); font-size: .9rem; font-weight: 600;
             color: var(--ink-soft); margin: 0 0 8px; }
.doc-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.doc-toc li { margin-bottom: 5px; font-size: .92rem; break-inside: avoid; }
@media (max-width: 640px) { .doc-toc ol { columns: 1; } }

/* Kruimelpad. Klein en stil; het is navigatie, geen kop. */
.crumbs { font-family: var(--font-ui); font-size: .8rem; padding-top: 14px; color: var(--ink-soft); }
.crumbs a { color: inherit; }
.crumb-sep { margin: 0 6px; opacity: .5; }

/* Zusterparken in de voettekst. */
.footer-sisters { padding-block: 26px 6px; }
.sister-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sister-card { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px;
               border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius);
               text-decoration: none; }
.sister-card:hover { border-color: rgba(255,255,255,.4); }
.sister-name { font-family: var(--font-ui); font-weight: 700; }
.sister-why { font-size: .82rem; opacity: .75; }
@media (max-width: 700px) { .sister-row { grid-template-columns: 1fr; } }

/* Updates-log op de homepage. */
.updates-block { padding-block: 44px; }
.updates-lede { color: var(--ink-soft); max-width: 60ch; margin-top: 6px; }
.updates-list { list-style: none; margin: 20px 0 0; padding: 0; }
.updates-list li { display: flex; gap: 18px; padding: 11px 0; border-top: 1px solid rgba(90,93,76,.16); }
.update-date { font-family: var(--font-ui); font-variant-numeric: tabular-nums;
               font-size: .82rem; color: var(--ink-soft); flex: 0 0 92px; }
.update-text { font-size: .95rem; }


/* Maandlinks onder de jaarstrook op best-time. display: block omdat een
   oudere regel met dezelfde naam (voor maandkaarten die niet meer bestaan)
   hier een raster van 268 pixel van maakte: kop links, pillen in een smalle
   tweede kolom. */
.bt-months { display: block; margin: 22px 0 4px; }
.bt-months-h { font-family: var(--font-ui); font-size: .9rem; font-weight: 600;
  color: var(--ink-soft); margin: 0 0 8px; }
.bt-months ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.bt-months a { display: inline-block; padding: 5px 12px; border: 1px solid var(--hair-strong);
  border-radius: 999px; font-family: var(--font-ui); font-size: .84rem; text-decoration: none; }
.bt-months a:hover { border-color: var(--ink); }


/* Iconen en prijsindicatie in de jaarstrook-legenda en de seizoensblokken. */
.bt-key svg, .bt-chip svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px; }
.bt-cost {
  display: inline-block; margin-left: 10px; padding: 2px 9px;
  border: 1px solid rgba(90,93,76,.3); border-radius: 999px;
  font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.bt-cost-note { display: block; font-size: .8rem; color: var(--ink-soft); margin-top: 3px; font-weight: 400; letter-spacing: 0; }


/* De afzender in de zijkolom. */
.author-card { text-align: left; }
.author-photo {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(255,255,255,.6); box-shadow: 0 1px 2px rgba(40,42,30,.18);
  margin-bottom: 10px;
}
.author-card p { font-size: .9rem; margin: 6px 0 10px; }

/* Foto's in contentsecties. */
.content-figure { margin: 18px 0 22px; }
.content-figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.content-figure figcaption { font-size: .82rem; color: var(--ink-soft); margin-top: 7px; }
.content-figure .img-cred { opacity: .75; }


/* Footer-doelgroepen. Vier kolommen: merk, reiziger, lodge, gids. */
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 34px; }
.footer-line { font-size: .85rem; opacity: .75; margin: 0 0 10px; line-height: 1.5; }
.footer-cta {
  display: inline-block; margin-top: 10px; padding: 8px 14px;
  border: 1px solid rgba(246,240,226,.4); border-radius: var(--radius);
  font-family: var(--font-ui); font-weight: 600; font-size: .88rem;
  color: #F6F0E2 !important; text-decoration: none; width: fit-content;
}
.footer-cta:hover { background: rgba(246,240,226,.1); border-color: rgba(246,240,226,.7); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }


/* Samenwerkingsblok op get-listed: zelfde kaart op een licht zandvlak. */
.listed-route-partner { background: var(--panel); border-color: transparent; }


/* Parknaam met eigen logo in indextabellen. */
.parkcel { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.parkcel img { border-radius:50%; flex:none; }

/* Onderzoeksblok op de homepagina: de drie artikelen uit de Fee Index.
   Donker gezet omdat het geen parkinformatie is maar ons eigen werk, en die
   twee dingen moeten op een homepagina niet op elkaar lijken. */
/* position: relative is hier niet cosmetisch. Zonder dit hangt de ::before
   hieronder aan de dichtstbijzijnde gepositioneerde voorouder en rekt hij zich
   van top:0 tot bottom:0 daarover uit. Op 15 september legde dat op alle
   zeventien homepages een donkergroen vlak over de hero heen. */
.research-block { padding-block: 52px 60px; position: relative; }
.research-block > * { position: relative; }
.research-block::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 100vw; top: 0; bottom: 0; background: var(--olive-950); z-index: 0;
}
.research-head { position: relative; padding-top: 44px; }
.research-head .eyebrow { color: rgba(246,240,226,.72); }
.research-head h2 { color: var(--bone); margin-top: 6px; }
.research-lede { color: rgba(246,240,226,.76); max-width: 62ch; margin-top: 10px; }
.research-own { margin-top: 14px; }
.research-own a { color: #F6F0E2; font-family: var(--font-ui); font-weight: 600;
  font-size: .92rem; text-underline-offset: 3px; }
.research-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 26px; padding-bottom: 44px; }
.research-card {
  background: rgba(246,240,226,.06); border: 1px solid rgba(246,240,226,.18);
  border-radius: var(--radius); padding: 22px; text-decoration: none; color: var(--bone);
  transition: background .12s ease, border-color .12s ease;
}
.research-card:hover { background: rgba(246,240,226,.11);
  border-color: rgba(246,240,226,.4); }
.research-card h3 { color: var(--bone); font-size: 1.06rem; }
.research-card p { color: rgba(246,240,226,.72); font-size: .93rem; margin-top: 8px; }
.research-card .topic-more { color: #F6F0E2; display: inline-block; margin-top: 12px; }
/* Het artikel dat op deze site zelf staat: geen buitenlink, wel zichtbaar dat
   het hier vandaan komt. */
.research-card.is-here { border-color: rgba(246,240,226,.34); }
.research-card.is-here h3::after {
  content: "On this site"; display: block; margin-top: 3px;
  font-family: var(--font-ui); font-size: .82rem; font-weight: 600; color: rgba(246,240,226,.68);
}
@media (max-width: 900px) { .research-grid { grid-template-columns: 1fr; } }

/* Een lodge waarvan de website is verdwenen. Bewust geen rood alarm: in alle
   vijf de gevallen die dit tot nu toe raakt draait het kamp gewoon door en is
   alleen het domein weg. De lezer moet weten dat hij moet bellen, niet dat hij
   moet wegblijven. */
.site-status {
  background: var(--panel); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 22px;
}
.ss-head { font-family: var(--font-ui); font-weight: 700; font-size: 1.02rem;
  display: flex; align-items: center; gap: 10px; margin: 0; }
.ss-mark { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--ink);
  color: var(--bone); font-size: .82rem; display: inline-flex;
  align-items: center; justify-content: center; }
.ss-detail { font-size: .94rem; color: var(--ink); margin-top: 8px; }
.ss-reach { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 12px 0 0; }
.ss-reach div { display: flex; gap: 8px; align-items: baseline; }
.ss-reach dt { font-family: var(--font-ui); font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.ss-reach dd { margin: 0; font-size: .92rem; }
.ss-ask { font-size: .9rem; color: var(--ink-soft); margin-top: 13px;
  border-top: 1px solid var(--hair); padding-top: 11px; }
.ss-checked { font-family: var(--font-ui); font-size: .76rem; color: var(--ink-soft); margin-top: 6px; }


/* Tussenkop binnen een blok in de zijkolom van get-listed. */
.listed-sub { font-family: var(--font-ui); font-size: .95rem; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid rgba(90,93,76,.2); }

/* Eén affiliate-melding voor de hele site, in de voettekst. Vervangt de
   meldingen die eerst onder elke afzonderlijke link stonden. */
.footer-affil { font-size: .82rem; opacity: .75; margin-top: 4px; }

/* Verhalen van reizigers. Visueel apart gehouden van de rest van de gids: hier
   staat niet wat wij hebben geverifieerd maar wat iemand heeft meegemaakt. */
.story-head .lede { max-width: 62ch; }
.story-meta { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 18px 0 0; }
.story-meta div { display: flex; flex-direction: column; gap: 2px; }
.story-meta dt { font-family: var(--font-ui); font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.story-meta dd { margin: 0; font-size: .94rem; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.story-card { background: #fff; border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 22px; text-decoration: none; color: var(--ink);
  transition: border-color .12s ease; }
.story-card:hover { border-color: var(--hair-strong); }
.story-card h2 { font-size: 1.08rem; margin: 6px 0 8px; }
.story-card p { font-size: .93rem; color: var(--ink-soft); }
.story-when { font-family: var(--font-ui); font-size: .85rem; font-weight: 600; color: var(--ink-soft); margin: 0; }
.story-invite { margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(90,93,76,.2); }
@media (max-width: 760px) { .story-grid { grid-template-columns: 1fr; } }

/* Het hulpblok. Bewust geen opvallende kleurvlek: het moet leesbaar zijn als
   een aanbod en niet als een banner. Een licht zandvlak zonder rand, dezelfde
   taal als de andere notities op de site. */
.helpbox {
  background: var(--panel); border-radius: var(--radius);
  padding: 22px 26px; margin: 34px 0 8px;
}
.helpbox-h { font-family: var(--font-ui); font-weight: 700; font-size: 1.02rem;
  margin: 0 0 8px; color: var(--olive-800); }
.helpbox-why { font-style: italic; color: var(--ink-soft); margin: 0 0 10px; }
.helpbox p { margin: 0 0 10px; max-width: 64ch; }
.helpbox-open { font-size: .88rem; color: var(--ink-soft); }
.helpbox .btn { margin-top: 4px; }
@media (max-width: 640px) { .helpbox { padding: 18px 20px; } }

/* Uitleg van de kamertypes, waar een prijslijst alleen niet genoeg zegt. */
.rate-rooms { margin: 10px 0 0; max-width: 66ch; color: var(--ink-soft); }

/* ===========================================================================
   Field Guide v2: de vier nieuwe homepageblokken. Staat alleen op parken met
   home_v2 in park.json, dus deze regels raken de rest van het netwerk niet.
   =========================================================================== */

/* Kaart van het park. Alles erop komt uit OpenStreetMap: de grens, de wegen,
   de pannen, de poorten. Er wordt niets getekend wat er niet staat.
   Watergrijsblauw is de enige kleur buiten het palet, en dat is bewust: op een
   kaart moet water als water lezen, anders is het een stip. */
.parkmap-block { padding-block: 56px 10px; }
.parkmap-head { max-width: 62ch; margin-bottom: 26px; }
.parkmap-lede { color: var(--ink-soft); margin: 0; }
.parkmap-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 32px; align-items: start; }
.parkmap-fig { margin: 0; }
.parkmap-svg { width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--sand); }
.pm-bg { fill: #F1EADA; }
.pm-lake { fill: #9FBBC2; fill-opacity: .75; stroke: #4E757F; stroke-width: 1.2; stroke-opacity: .6; }
.pm-lake-label { font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: 24px; fill: #35606C; }
.pm-shape { fill: var(--olive-600); fill-opacity: .82; stroke: var(--olive-950); stroke-width: 2.6; }
.pm-roads .pm-road { fill: none; stroke: var(--ink-soft); stroke-opacity: .5;
  stroke-linecap: round; stroke-linejoin: round; }
/* Deze drie moeten dezelfde specificiteit hebben als .pm-roads .pm-road
   hierboven, anders wint de algemene regel en is elke weg grijs. */
.pm-roads .pm-road-trunk { stroke: #8A6A46; stroke-opacity: .95; stroke-width: 4.5; }
.pm-roads .pm-road-primary { stroke-width: 2.6; }
.pm-roads .pm-road-secondary { stroke-width: 1.8; stroke-dasharray: 7 5; }
.pm-water .pm-dot { fill: #4E757F; stroke: #F1EADA; stroke-width: 1; }
.pm-water .pm-w-dam { fill: #35606C; }
.pm-water .pm-w-pomp { fill: #4E757F; stroke: var(--ochre); stroke-width: 2.2; }
.pm-gate .pm-dot { fill: var(--bone); stroke: var(--olive-950); stroke-width: 2.4; }
.pm-town rect { fill: var(--ink); }
.pm-town text { font-family: var(--font-display); font-weight: 700; font-size: 22px;
  fill: var(--ink); paint-order: stroke; stroke: #F1EADA; stroke-width: 4; }
.pm-pin .pm-dot { fill: var(--ochre); stroke: var(--olive-950); stroke-width: 3; }
.pm-pin text { font-family: var(--font-display); font-weight: 700; font-size: 20px;
  fill: var(--olive-950); pointer-events: none; }
.pm-scale line { stroke: var(--ink); stroke-width: 2; }
.pm-scale text { font-family: var(--font-display); font-weight: 700; font-size: 19px; fill: var(--ink); }
.parkmap-loc { margin: 0; }
.parkmap-loc svg { width: 100%; height: auto; display: block; background: var(--bone);
  border: 1px solid var(--sand); border-radius: var(--radius); }
.parkmap-loc figcaption { font-size: .8rem; color: var(--ink-soft); margin-top: 8px;
  line-height: 1.45; }
.pm-loc-land { fill: var(--sand); stroke: var(--ink-soft); stroke-width: 1.4; }
.pm-loc-other { fill: var(--olive-600); fill-opacity: .42; stroke: var(--olive-800);
  stroke-width: .8; stroke-opacity: .5; }
.pm-loc-ours { fill: var(--ochre); fill-opacity: .42; stroke: var(--ochre); stroke-width: 1; }
.pm-loc-park { fill: var(--ochre); stroke: var(--terracotta-dark); stroke-width: 1.8; }
.pm-loc-city circle { fill: var(--ink); }
.pm-loc-city text { font-family: var(--font-display); font-weight: 700; font-size: 15px;
  fill: var(--ink); paint-order: stroke; stroke: var(--bone); stroke-width: 4; text-anchor: middle; }
.pm-loc-title { font-family: var(--font-display); font-weight: 700; font-size: 17px;
  fill: var(--ink-soft); text-anchor: middle; }
.parkmap-fig figcaption { font-size: .8rem; color: var(--ink-soft); margin-top: 8px; }
.parkmap-side { display: flex; flex-direction: column; gap: 20px; }
.parkmap-key { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.parkmap-key li { display: flex; gap: 11px; align-items: baseline; font-size: .92rem; line-height: 1.5; }
.parkmap-key strong { font-family: var(--font-display); color: var(--olive-950); }
.pm-n { flex: none; width: 23px; height: 23px; border-radius: 50%;
  background: var(--ochre); color: var(--olive-950); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem; }
.parkmap-legend { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--sand);
  display: flex; flex-direction: column; gap: 8px; font-size: .86rem; color: var(--ink-soft); }
.parkmap-legend li { display: flex; align-items: center; gap: 10px; }
.lg { flex: none; width: 14px; height: 14px; }
.lg-water { border-radius: 50%; background: #4E757F; }
.lg-dam { border-radius: 50%; background: #35606C; width: 16px; height: 16px; }
.lg-gate { background: var(--bone); border: 2px solid var(--olive-950); transform: rotate(45deg);
  width: 11px; height: 11px; }
.lg-road { height: 4px; border-radius: 2px; background: #8A6A46; }
.parkmap-more { margin: 22px 0 0; font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
@media (max-width: 900px) { .parkmap-grid { grid-template-columns: 1fr; gap: 24px; } }

/* Wie dit schrijft. Donker blok, grote kop links, lopende tekst rechts. */
.platform-block { background: var(--olive-950); color: #E9E2CE; padding: 62px 0; margin-top: 56px; }
.platform-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 44px; align-items: start; }
.platform-left .eyebrow { color: rgba(246,240,226,.72); }
.platform-left h2 { color: #F6F0E2; font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 26px; }
.platform-right p { margin: 0 0 14px; color: #D6CFB8; }
.platform-right p:last-child { margin-bottom: 0; }
.platform-sign { font-family: var(--font-display); font-weight: 700; color: #F6F0E2 !important; }
.platform-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-ghost-dark { background: transparent; color: #F6F0E2; border: 1.5px solid rgba(246,240,226,.55); }
.btn-ghost-dark:hover { background: rgba(246,240,226,.12); color: #fff; }
@media (max-width: 820px) { .platform-grid { grid-template-columns: 1fr; gap: 26px; } }

/* Wat je hier doet. Drie beelden met de activiteit eronder. */
.why-block { padding-block: 56px 10px; }
.why-lede { max-width: 66ch; color: var(--ink-soft); margin: 0 0 26px; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why-card { margin: 0; }
.why-card a { text-decoration: none; display: block; }
.why-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); }
.why-card h3 { margin: 12px 0 6px; font-size: 1.15rem; color: var(--olive-950); }
.why-card a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.why-card p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
.why-credit { font-size: .76rem !important; margin-top: 6px !important; opacity: .75; }
@media (max-width: 800px) { .why-grid { grid-template-columns: 1fr; } }

/* Waar je slaapt. Vier kampen die elk iets vertegenwoordigen. */
.stay-block { padding-block: 56px 10px; }
.stay-head { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap; }
.stay-lede { max-width: 66ch; color: var(--ink-soft); margin: 12px 0 26px; }
.btn-ghost-line { background: transparent; color: var(--olive-800);
  border: 1.5px solid var(--olive-800); white-space: nowrap; }
.btn-ghost-line:hover { background: var(--olive-800); color: #fff; }
.stay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stay-card { margin: 0; }
.stay-visual { display: block; border-radius: var(--radius); overflow: hidden;
  background: var(--sand); }
.stay-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.stay-noimg { display: block; aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(135deg, var(--sand), var(--sand) 9px,
    #E2D5B6 9px, #E2D5B6 18px); }
.stay-role { font-family: var(--font-display); font-weight: 600; font-size: .875rem;
  color: var(--ink-soft); margin: 12px 0 2px; }
.stay-card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.stay-card h3 a { color: var(--olive-950); text-decoration: none; }
.stay-card h3 a:hover { text-decoration: underline; }
.stay-meta { margin: 0 0 6px; font-family: var(--font-display); font-weight: 600;
  font-size: .86rem; color: var(--ink-soft); }
.stay-why { margin: 0; font-size: .92rem; color: var(--ink-soft); }
@media (max-width: 1000px) { .stay-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stay-grid { grid-template-columns: 1fr; } }


/* ===========================================================================
   De interactieve kaart, tweede opzet. Er staat bewust geen enkele transform
   op een SVG-element: Safari berekent transform-box op groepen verkeerd en
   liet punten over het canvas zwerven. Alles wat beweegt is de halo (JS
   verzet cx/cy) en de HTML-tooltip, die aan het punt verankerd is in plaats
   van aan de cursor.
   =========================================================================== */
.pm-hit { fill: transparent; stroke: none; pointer-events: all; }
.pm-spot { cursor: pointer; outline: none; transition: opacity .18s ease; }
.pm-spot:focus { outline: none; }
.pm-spot:focus-visible .pm-dot { stroke: var(--terracotta); stroke-width: 4; }

/* Wie aangewezen wordt houdt zijn kleur; de rest dimt. */
.parkmap-svg.has-hover .pm-spot:not(.is-hot) { opacity: .35; }
.pm-pin.is-hot .pm-dot { stroke-width: 4; }

.pm-halo { fill: none; stroke: var(--ochre); stroke-width: 3.5; opacity: 0;
  pointer-events: none; transition: opacity .16s ease; }
.pm-halo.is-on { opacity: .95; }

/* De tooltip: verankerd boven het punt, met een pijltje eronder. */
.parkmap-fig { position: relative; }
.pm-tip { position: absolute; z-index: 30; pointer-events: none;
  width: max-content; max-width: min(260px, 74vw);
  background: #FFFDF7; border: 1px solid var(--sand-deep, #DFD0AE);
  border-radius: 10px; box-shadow: 0 6px 20px rgba(38,41,28,.18);
  padding: 10px 14px 11px; opacity: 0; transform: translateY(5px);
  transition: opacity .14s ease, transform .14s ease; }
.pm-tip.is-open { opacity: 1; transform: none; }
.pm-tip::after { content: ""; position: absolute; left: var(--arrow-x, 50%);
  bottom: -7px; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
  background: #FFFDF7; border-right: 1px solid var(--sand-deep, #DFD0AE);
  border-bottom: 1px solid var(--sand-deep, #DFD0AE); }
.pm-tip.is-below::after { bottom: auto; top: -7px;
  border: none; border-left: 1px solid var(--sand-deep, #DFD0AE);
  border-top: 1px solid var(--sand-deep, #DFD0AE); }
.pm-tip-kind { display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; color: var(--ink-soft); margin-bottom: 2px; }
.pm-tip-name { display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .98rem; color: var(--olive-950); line-height: 1.25; }
.pm-tip-what { display: block; font-size: .84rem; color: var(--ink-soft);
  line-height: 1.45; margin-top: 3px; }
.pm-tip-more { display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .8rem; color: var(--olive-800); margin-top: 6px; }

/* Legenda en kaart wijzen naar elkaar. */
.parkmap-key li { border-radius: 8px; padding: 5px 9px; margin: -3px -9px;
  transition: background .15s ease; }
.parkmap-key li.is-hot { background: var(--panel); }

/* Het landkaartje. */
.parkmap-loc { position: relative; }
.pm-loc-hit { cursor: pointer; transition: fill-opacity .15s ease; }
.pm-loc-hit:focus { outline: none; }
.pm-loc-hit:focus-visible { stroke: var(--terracotta); stroke-width: 2.5; }
.pm-loc-other.is-hover { fill-opacity: .72; }
.pm-loc-ours.is-hover, .pm-loc-ours.is-hot { fill-opacity: .88; }
.pm-loc-park.is-hover { fill: #EFB93F; }

.pm-pop { position: absolute; z-index: 31; width: max-content;
  min-width: 200px; max-width: min(260px, 80vw);
  background: #FFFDF7; border: 1px solid var(--sand-deep, #DFD0AE); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(38,41,28,.22); padding: 13px 15px 14px;
  opacity: 0; pointer-events: none; transform: translateY(5px);
  transition: opacity .16s ease, transform .16s ease; }
.pm-pop.is-open { opacity: 1; pointer-events: auto; transform: none; }
.pm-pop-name { display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; color: var(--olive-950); }
.pm-pop-blurb { display: block; font-size: .86rem; color: var(--ink);
  line-height: 1.5; margin-top: 4px; }
.pm-pop-note { display: block; font-size: .8rem; color: var(--ink-soft);
  line-height: 1.45; margin-top: 5px; }
.pm-pop-btn { display: block; text-align: center; margin-top: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: .86rem;
  color: #fff; background: var(--terracotta); padding: 8px 13px;
  border-radius: 7px; text-decoration: none; }
.pm-pop-btn:hover { background: var(--terracotta-dark); }

/* Mobiel: de kaart mag de volle breedte pakken en de legenda wordt compacter. */
@media (max-width: 640px) {
  .parkmap-block { padding-top: 40px; }
  .parkmap-fig { margin-inline: -10px; }
  .parkmap-svg { border-radius: 8px; }
  .parkmap-key li { font-size: .88rem; }
  .parkmap-legend { font-size: .82rem; }
  .pm-tip { max-width: 82vw; }
}

/* --------------------------------------------------------------------------
   Brandkit-proef: illustratie-accenten uit de Visit Africa-brandkit.
   Alleen parken met brand_proef in park.json renderen deze elementen;
   de regels hieronder zijn onschadelijk voor alle andere sites. */
.platform-block { position: relative; overflow: hidden; }
.platform-grid { position: relative; z-index: 1; }
.brand-platform-gras { position: absolute; right: -18px; bottom: -12px;
  width: min(340px, 38vw); height: auto; opacity: .22; pointer-events: none; }
.brand-stay-kever { display: flex; justify-content: flex-end; padding: 24px 6px 0; }
.brand-stay-kever img { width: 74px; height: auto; opacity: .78; }
@media (max-width: 640px) {
  .brand-platform-gras { width: 52vw; opacity: .16; }
}
.site-footer { position: relative; overflow: hidden; }
.site-footer .wrap { position: relative; z-index: 1; }
.brand-footer-gras { position: absolute; right: -16px; bottom: -10px;
  width: min(300px, 34vw); height: auto; opacity: .13; pointer-events: none; }

/* --------------------------------------------------------------------------
   De kostenpagina: tripcalculator en budgetkaarten. */
.costs-top { display: grid; gap: 26px; margin-top: 26px; }
.calc { background: var(--olive-950); border-radius: var(--radius); padding: 34px 34px 26px;
  color: #E9E2CE; position: relative; overflow: hidden; }
.calc-head h2 { color: #F6F0E2; margin: 0 0 6px; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.calc-lede { color: #D6CFB8; margin: 0 0 22px; max-width: 60ch; }
.calc-controls { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 26px; }
.calc-field-label { display: block; font-family: var(--font-ui); font-weight: 600;
  font-size: .9rem; color: rgba(246,240,226,.78); margin-bottom: 8px; }
.calc-stepper { display: inline-flex; align-items: center; gap: 2px;
  background: rgba(246,240,226,.08); border: 1px solid rgba(246,240,226,.25);
  border-radius: 999px; padding: 3px; }
.calc-btn { width: 44px; height: 44px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: #F6F0E2; font-size: 1.4rem; line-height: 1;
  font-family: var(--font-display); }
.calc-btn:hover { background: rgba(246,240,226,.14); }
.calc-num { min-width: 44px; text-align: center; font-family: var(--font-display);
  font-weight: 700; font-size: 1.3rem; color: #F6F0E2; font-variant-numeric: tabular-nums; }
.calc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.calc-card { background: #F6F0E2; color: var(--ink); border-radius: var(--radius);
  padding: 22px 22px 20px; position: relative; display: flex; flex-direction: column; }
.calc-animal { position: absolute; top: 16px; right: 16px; width: 74px; height: auto;
  opacity: .85; }
.calc-card[data-tier="camping"] .calc-animal { width: 58px; }
.calc-tier { margin: 0 84px 2px 0; font-size: 1.1rem; }
.calc-base { margin: 0 84px 16px 0; font-size: .85rem; color: var(--ink-soft); }
.calc-total { margin: 0; }
.calc-amount { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.3rem); font-variant-numeric: tabular-nums; }
.calc-pp { margin: 0 0 14px; font-size: .9rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }
.calc-break { margin: 0 0 18px; padding-top: 12px; border-top: 1px solid rgba(47,58,30,.18);
  font-size: .84rem; display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; flex: 1; }
.calc-break dt { color: var(--ink-soft); }
.calc-break dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.calc-cta { text-align: center; }
.calc-note { margin: 18px 2px 0; font-size: .82rem; color: #A5A38C; max-width: 90ch; }
@media (max-width: 860px) {
  .calc { padding: 24px 18px 20px; }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-controls { gap: 18px; }
}
.calc-seg { display: inline-flex; gap: 3px; background: rgba(246,240,226,.08);
  border: 1px solid rgba(246,240,226,.25); border-radius: 999px; padding: 3px;
  flex-wrap: wrap; }
.calc-klas { border: 0; background: transparent; color: #D6CFB8; cursor: pointer;
  border-radius: 999px; padding: 10px 16px; font-family: var(--font-display);
  font-weight: 700; font-size: .88rem; min-height: 44px; }
.calc-klas:hover { background: rgba(246,240,226,.14); color: #F6F0E2; }
.calc-klas.is-actief { background: #F6F0E2; color: var(--olive-950); }
.calc-lodge-wrap { display: block; margin: 2px 84px 6px 0; }
.calc-lodge { width: 100%; border: 1.5px solid rgba(47,58,30,.35); border-radius: 10px;
  background: #FFFDF7; color: var(--ink); font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; padding: 10px 12px; min-height: 44px; }
.calc-extras { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(246,240,226,.2); }
.calc-extra-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  gap: 12px; margin: 12px 0 6px; }
.calc-extra { position: relative; text-align: left; cursor: pointer; border-radius: 14px;
  border: 1.5px solid rgba(246,240,226,.3); background: rgba(246,240,226,.06);
  color: #E9E2CE; padding: 14px 16px 12px 46px; font: inherit; transition: border-color .15s,
  background-color .15s; }
.calc-extra:hover { border-color: rgba(246,240,226,.55); }
.calc-extra-check { position: absolute; left: 14px; top: 16px; width: 20px; height: 20px;
  border-radius: 6px; border: 2px solid rgba(246,240,226,.5); }
.calc-extra[aria-pressed="true"] { border-color: rgba(246,240,226,.85);
  background: rgba(246,240,226,.1); }
.calc-extra[aria-pressed="true"] .calc-extra-check { background: #F6F0E2;
  border-color: #F6F0E2; }
.calc-extra[aria-pressed="true"] .calc-extra-check::after { content: ""; position: absolute;
  left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--olive-950);
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.calc-extra-naam { display: block; font-family: var(--font-display); font-weight: 700;
  color: #F6F0E2; font-size: .95rem; margin-bottom: 2px; }
.calc-extra-prijs { display: block; font-size: .84rem; color: #D6CFB8; }
.calc-extra-som { display: block; font-size: .84rem; color: #F6F0E2;
  font-variant-numeric: tabular-nums; min-height: 1.2em; margin-top: 2px;
  font-family: var(--font-display); font-weight: 700; }
.calc-foot { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 18px; flex-wrap: wrap; }
.calc-deel { border: 1.5px solid rgba(246,240,226,.35); background: transparent;
  color: #E9E2CE; border-radius: 999px; padding: 10px 18px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: .86rem;
  min-height: 44px; white-space: nowrap; }
.calc-deel:hover { border-color: rgba(246,240,226,.8); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ==========================================================================
   Brede container (2 okt 2026). --wrap is 1440 (zie :root bovenin). Wat
   hieronder staat houdt de tekst leesbaar en de rest in verhouding; er is
   niets herontworpen.
   ========================================================================== */

/* Tekst plus zijkolom. Geldt voor tarieven, kosten, beste tijd, maanden, de
   gewone contentpagina's, de lodgepagina, de kaart, het weer en get-listed.
   De tekstkolom wordt nooit breder dan --measure en blijft links op de rand
   van de container staan; de zijkolom groeit mee tot --rail en staat rechts,
   onder de knop in de sitekop. Wat er tussen overblijft is witruimte. Onder
   901 pixel blijven de bestaande regels gelden (één kolom). */
@media (min-width: 901px) {
  .fees-layout, .map-layout, .weather-layout, .listed-layout {
    grid-template-columns: minmax(0, var(--measure)) clamp(300px, 34%, var(--rail));
    justify-content: space-between;
  }
}

/* Lopende tekst buiten die tekstkolom krijgt dezelfde maat, en de voetnoten
   erin ook: --measure is in ch en rekent dus met de eigen lettergrootte, zodat
   kleine letters niet op 100 tekens per regel uitkomen. */
.bt-answer-text, .platform-right p, .fee-footnote, .calc-note { max-width: var(--measure); }
/* Datum (92) plus tussenruimte (18) erbij, zodat de tekst zelf op de maat
   uitkomt. */
.updates-list { max-width: calc(var(--measure) + 110px); }

/* Homepage: de rasters houden hun aantal kolommen en krijgen meer lucht. Het
   tegelblok "Start here" heeft op negentien parken zes tegels (twee rijen van
   drie) en op drie parken vier; die vier staan op een breed scherm naast
   elkaar in plaats van drie plus een losse. */
@media (min-width: 1200px) {
  .card-grid, .why-grid, .research-grid, .stay-grid { gap: 28px; }
  .card-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
}

/* Telefoonbreedte: drie lekken die de pagina breder maakten dan het scherm
   (gevonden bij de controle van 2 okt 2026, ouder dan de brede container).
   1. Onder 900 pixel is .fees-layout een flexkolom, en align-items: start
      (bedoeld voor de plakkende zijkolom op desktop) maakte de kinderen daar
      zo breed als hun breedste regel in plaats van zo breed als het scherm.
   2. De kaartpagina heeft een raster van één kolom zonder min-width: 0.
   3. De verborgen schermlezertekst in de jaarstrook op best-time hing aan een
      voorouder buiten de scrollstrook en telde daardoor mee voor de breedte
      van de pagina. */
@media (max-width: 900px) {
  .fees-layout { align-items: stretch; }
  .map-layout > * { min-width: 0; }
}
.bt-strip-scroll { position: relative; }
/* De tarieftabel heeft drie kolommen (wie, bedrag, toelichting) en die passen
   op een telefoon niet naast elkaar. Daar staat de toelichting onder de regel,
   over de volle breedte. */
@media (max-width: 560px) {
  .fee-block .fee-table, .fee-block .fee-table tbody { display: block; }
  .fee-block .fee-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px;
    padding: 9px 0; border-bottom: 1px solid rgba(90,93,76,.22);
  }
  .fee-block .fee-table th, .fee-block .fee-table td { padding: 0; border-bottom: 0; }
  .fee-block .fee-table .fee-amount { text-align: right; }
  .fee-block .fee-table .fee-note { grid-column: 1 / -1; margin-top: 3px; }
  .fee-block .fee-table .fee-note:empty { display: none; }
}

/* Taalwisselaar (7 okt 2026, herzien na Mitchels screenshot): dezelfde letter als de
   menulinks, geen grijze vakjes; de actieve taal is wit met een okeren streep eronder,
   de andere talen gedempt. Hairlines ertussen in plaats van losse knoppen. */
.lang-switch { list-style: none; display: flex; align-items: stretch; margin: 0 0 0 .5rem; padding: 0;
  font-family: var(--font-ui); font-weight: 600; font-size: .74rem; letter-spacing: .12em; line-height: 1; }
.lang-switch li { display: flex; align-items: center; }
.lang-switch li + li { border-left: 1px solid rgba(241,235,217,.22); }
.lang-switch a, .lang-switch span { display: inline-block; padding: .55rem .55rem .45rem; color: rgba(241,235,217,.62);
  text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s; }
.lang-switch a:hover, .lang-switch a:focus-visible { color: #fff; outline: none; }
.lang-switch span[aria-current] { color: #fff; border-bottom-color: #f8b400; }
@media (max-width: 900px) { .lang-switch { margin-left: auto; margin-right: .25rem; font-size: .7rem; letter-spacing: .1em; } }

/* Taalkeuze als menu met vlag (9 okt 2026), vervangt de rij EN NL DE FR. */
.lang-pick { position: relative; margin: 0 0 0 .5rem; font-family: var(--font-ui); }
.lang-pick summary { list-style: none; display: flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .45rem .55rem; border-radius: 8px; color: #fff; font-weight: 600; font-size: .74rem;
  letter-spacing: .1em; line-height: 1; border: 1px solid rgba(241,235,217,.22); }
.lang-pick summary::-webkit-details-marker { display: none; }
.lang-pick summary:hover, .lang-pick summary:focus-visible { border-color: rgba(241,235,217,.55); outline: none; }
.lang-pick[open] summary { border-color: #f8b400; }
.lang-flag { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); flex: none; }
.lang-caret { opacity: .75; transition: transform .15s; }
.lang-pick[open] .lang-caret { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; list-style: none; margin: 0;
  padding: .35rem; min-width: 168px; background: #fff; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(20,24,12,.22), 0 0 0 1px rgba(20,24,12,.08); }
.lang-menu a, .lang-menu span { display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem;
  border-radius: 7px; font-size: .9rem; color: var(--ink, #2F3A1E); text-decoration: none; letter-spacing: 0; }
.lang-menu a:hover, .lang-menu a:focus-visible { background: #F3EEDF; outline: none; }
.lang-menu span[aria-current] { font-weight: 700; background: #F6F0E2; }
@media (max-width: 900px) { .lang-pick { margin-left: auto; margin-right: .25rem; } }