/* 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;
  --wrap: 1160px;
  --radius: 10px;
}

* { 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: var(--ochre); 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(2.2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--terracotta-dark); }

.eyebrow {
  font-family: var(--font-display);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--olive-600); margin: 0 0 .6em;
}
.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: transform .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.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; }
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 50% 45% 55% 50%;
  background: radial-gradient(circle at 35% 30%, var(--ochre), var(--terracotta));
}
.brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: #fff; letter-spacing: .01em; }
.site-nav { display: flex; gap: 22px; margin-left: auto; }
.site-nav a {
  font-family: var(--font-ui);
  color: #F1EBD9; text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--ochre); color: #fff; }
.header-cta { padding: 10px 20px; font-size: .92rem; }
.nav-toggle { display: none; }

/* 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: var(--ochre); }
.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; }

/* Permit-card (signatuur) */
.permit-card {
  background: var(--sand); color: var(--ink);
  border: 2px dashed var(--olive-600); border-radius: 14px;
  padding: 26px 26px 22px; position: relative;
  box-shadow: 0 18px 40px rgba(28,34,16,.35);
}
.permit-stamp {
  position: absolute; top: -14px; right: 18px;
  background: var(--ochre); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px; rotate: 2deg; margin: 0;
}
.permit-h { font-size: 1.15rem; margin-bottom: .8em; }
.facts { margin: 0; display: grid; gap: 10px; }
.fact { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(90,93,76,.25); padding-bottom: 8px; }
.fact dt { color: var(--ink-soft); font-size: .9rem; }
.fact dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* Torn edges (signatuur) */
.torn { height: 26px; background: var(--bone); position: relative; z-index: 2; margin-top: -25px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0,26 L0,15 C60,5 130,22 210,14 C290,6 350,21 430,12 C510,4 570,19 650,13 C730,7 800,22 880,12 C955,4 1030,18 1110,11 C1160,7 1190,13 1200,13 L1200,26 Z' fill='black'/%3E%3C/svg%3E") center/100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0,26 L0,15 C60,5 130,22 210,14 C290,6 350,21 430,12 C510,4 570,19 650,13 C730,7 800,22 880,12 C955,4 1030,18 1110,11 C1160,7 1190,13 1200,13 L1200,26 Z' fill='black'/%3E%3C/svg%3E") center/100% 100%;
}
.torn-footer { background: var(--olive-950); margin-top: 0; transform: scaleY(-1); }

/* USP-balk */
.usps { display: flex; flex-wrap: wrap; gap: 18px 36px; padding-block: 30px 10px; }
.usp { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .98rem; }
.usp-check {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--ochre); color: var(--ink);
  display: grid; place-items: center; font-size: .85rem; font-weight: 800;
}

/* 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 rgba(90,93,76,.18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.topic-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(28,34,16,.12); }
.topic-card p { color: var(--ink-soft); font-size: .95rem; }
.topic-more { font-family: var(--font-display); font-weight: 700; color: var(--terracotta-dark); font-size: .92rem; }

/* Contentpagina's */
.page-head { background: var(--sand); padding-block: 56px 64px; }
.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; }
.fees-aside { position: sticky; top: 92px; display: grid; gap: 22px; }
.aside-block { background: #fff; border: 1px solid rgba(90,93,76,.18); border-radius: var(--radius); padding: 22px; }
.aside-block h2 { font-size: 1.05rem; }
.aside-source { background: var(--sand); }
.aside-source p { font-size: .92rem; color: var(--ink-soft); }
.aside-cta { background: var(--olive-800); color: #F1EBD9; }
.aside-cta h2 { color: #fff; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.check-list li { padding-left: 28px; position: relative; font-size: .95rem; }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ochre); color: var(--ink);
  display: grid; place-items: center; font-size: .7rem; font-weight: 800;
}
@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-display); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--olive-600); padding: 0 8px 8px 0; text-align: left; border-bottom: 2px solid var(--olive-600); }
.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: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 11px; 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: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.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(--sand); border-radius: var(--radius); padding: 22px 26px; margin-top: 6px;
}
.bird-stat { text-align: center; padding-right: 22px; border-right: 2px solid rgba(90,93,76,.25); }
.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: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; 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: 800; color: var(--terracotta); }
.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: 2px solid rgba(90,93,76,.25); 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: var(--sand); border-radius: var(--radius); padding: 16px 20px;
  border: 1px solid rgba(90,93,76,.2); transition: transform .12s ease;
}
.download-link:hover { transform: translateY(-2px); }
.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; }

.lodges-head { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: start; }
.lodges-head .community-note { margin: 8px 0 0; background: rgba(255,255,255,.55); border-color: rgba(78,122,56,.35); }
@media (max-width: 900px) { .lodges-head { grid-template-columns: 1fr; gap: 22px; } }

/* Lodges: filterzijbalk links, resultaten rechts */
.lodges-layout {
  display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 34px;
  align-items: start; padding-block: 40px 72px;
}
.filter-open { display: none; }

.filter-rail {
  position: sticky; top: 18px;
  background: var(--sand); border-radius: var(--radius);
  padding: 20px 20px 18px; max-height: calc(100vh - 36px); overflow-y: auto;
}
.filter-rail-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.filter-rail-head h2 {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--olive-600); margin: 0;
}
.filter-clear {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: .82rem; font-weight: 600;
  color: var(--terracotta-dark); text-decoration: underline;
}
.filter-group { border: 0; margin: 0 0 18px; padding: 0; }
.filter-group:last-of-type { margin-bottom: 10px; }
.filter-group legend {
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--olive-600);
  margin-bottom: 7px; padding: 0;
}
.filter-row {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-ui); font-size: .92rem; font-weight: 500;
  padding: 4px 6px; margin: 0 -6px; border-radius: 7px;
  transition: background .12s ease;
}
.filter-row:hover { background: rgba(255,255,255,.55); }
.filter-row input { accent-color: var(--terracotta); width: 16px; height: 16px; flex: none; }
.filter-label { flex: 1; }
.filter-tally {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
  color: var(--ink-soft); background: rgba(255,255,255,.75);
  border-radius: 999px; padding: 1px 7px; flex: none;
}
.filter-row.is-empty, .filter-row.is-zero { opacity: .38; }
.filter-row.is-empty { cursor: not-allowed; }
.own-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.own-dot-local { background: #4E7A38; }
.own-dot-parks, .own-dot-tanapa { background: var(--ochre); }
.own-dot-owner { background: #8A6D3B; }
.own-dot-brand { background: #B9B29C; }
.filter-why {
  font-size: .82rem; color: var(--ink-soft); line-height: 1.45;
  border-left: 2px solid var(--ochre); padding-left: 10px; margin: 4px 0 8px 22px;
}
.filter-group.is-collapsed .filter-row:nth-of-type(n+7) { display: none; }
.filter-more {
  border: 0; background: none; padding: 4px 0 0; cursor: pointer;
  font-family: var(--font-ui); font-size: .84rem; font-weight: 600;
  color: var(--terracotta-dark); text-decoration: underline;
}
.filter-source {
  font-size: .78rem; line-height: 1.5; color: var(--ink-soft);
  border-top: 1px solid rgba(90,93,76,.2); padding-top: 12px; margin: 0;
}

.results-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid rgba(90,93,76,.22);
}
.results-count {
  font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
  color: var(--olive-950); margin: 0;
}
.results-sort { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: .88rem; color: var(--ink-soft); }
.results-sort select {
  font-family: var(--font-ui); font-size: .9rem; font-weight: 600; color: var(--olive-950);
  background: #fff; border: 1.5px solid rgba(90,93,76,.3); border-radius: 8px;
  padding: 6px 10px; cursor: pointer;
}
.active-filters:not([hidden]) { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.active-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-ui); font-size: .84rem; font-weight: 600;
  background: var(--olive-800); color: #fff; border: 0;
  border-radius: 999px; padding: 5px 12px;
}
.active-chip:hover { background: var(--terracotta-dark); }
.active-chip span { font-size: 1rem; line-height: 1; opacity: .8; }
.unchecked-note:not([hidden]) {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  background: #FBF3DE; border: 1px solid #E6D3A2; border-radius: var(--radius);
  padding: 10px 16px; margin: 0 0 18px; font-size: .9rem; color: var(--ink-soft);
}
.unchecked-toggle {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: .88rem; font-weight: 700;
  color: var(--terracotta-dark); text-decoration: underline;
}
.no-results { font-size: 1rem; color: var(--ink-soft); padding: 28px 0; }
.lodge-facilities {
  display: flex; flex-wrap: wrap; gap: 5px; list-style: none; margin: 2px 0 0; padding: 0;
}
.lodge-facilities li {
  font-family: var(--font-ui); font-size: .75rem; font-weight: 600; color: var(--olive-800);
  background: #EDF2E4; border-radius: 999px; padding: 3px 9px;
}
.lodge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.lodge-card {
  background: #fff; border: 1px solid rgba(90,93,76,.18); border-radius: var(--radius);
  padding: 0 24px 24px; display: flex; flex-direction: column; gap: 8px;
  overflow: hidden;
}
.lodge-visual {
  display: block; margin: 0 -24px 4px; aspect-ratio: 600 / 260; overflow: hidden;
  background: var(--sand);
}
.lodge-visual svg, .lodge-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lodge-card .lodge-card-head { margin-top: 16px; }
.lodge-hero {
  position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
}
.lodge-hero svg, .lodge-hero img {
  display: block; width: 100%; height: auto; max-height: 380px; object-fit: cover;
  border-radius: var(--radius); margin-top: -28px; position: relative; z-index: 2;
  box-shadow: 0 14px 34px rgba(28,34,16,.18);
}
.plate-note {
  font-size: .88rem; color: var(--ink-soft); margin: 12px 0 0;
  border-left: 3px solid var(--ochre); padding-left: 14px;
}
.lodge-card h2 { font-size: 1.35rem; margin: 0; }
.lodge-card h2 a { color: var(--olive-950); text-decoration: none; }
.lodge-card h2 a:hover { color: var(--terracotta-dark); }
.lodge-card-head { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  font-family: var(--font-display); font-weight: 700; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.badge-budget { background: #DCE8CE; color: #3A5220; }
.badge-mid { background: #F3E3B8; color: #6E4F0A; }
.badge-high { background: #F4D2BC; color: #7C3A15; }
.badge-top { background: var(--olive-800); color: #fff; }
.badge-loc { background: var(--bone); color: var(--ink-soft); border: 1px solid rgba(90,93,76,.25); }
.badge-own-local { background: #4E7A38; color: #fff; }
.badge-own-parks, .badge-own-tanapa { background: var(--ochre); color: var(--ink); }
.badge-own-owner { background: #8A6D3B; color: #fff; }
.badge-own-brand { background: var(--bone); color: var(--ink-soft); border: 1px solid rgba(90,93,76,.25); }
.community-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: #EAF2E0; border: 1px solid #C4D8AC; border-radius: var(--radius);
  padding: 16px 20px; margin-bottom: 28px;
}
.community-note .usp-check { background: #4E7A38; color: #fff; margin-top: 2px; }
.community-note p { margin: 0; font-size: .95rem; }
.filter-empty { opacity: .45; cursor: not-allowed; }
.filter-tally {
  font-family: var(--font-ui); font-size: .7rem; font-weight: 700;
  color: var(--ink-soft); background: rgba(255,255,255,.7);
  border-radius: 999px; padding: 1px 7px; margin-left: 1px;
}
.category-note {
  font-size: .93rem; color: var(--ink-soft);
  border-left: 3px solid var(--ochre); padding: 2px 0 2px 14px; margin: -12px 0 26px;
}
.lodge-meta { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.lodge-desc {
  font-size: .96rem; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;
  overflow: hidden;
}
.lodge-card-foot { flex-wrap: wrap; }
.lodge-price { max-width: 100%; }
.lodge-card-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(90,93,76,.18);
}
.lodge-price { font-family: var(--font-display); font-weight: 800; color: var(--olive-950); }
.lodge-open { font-size: .85rem; color: var(--ink-soft); }
.lodge-intro { font-size: 1.15rem; }
@media (max-width: 1080px) { .lodge-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .lodges-layout { grid-template-columns: 1fr; gap: 0; }
  .filter-open {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; justify-self: start;
    font-family: var(--font-ui); font-size: .95rem; font-weight: 700; cursor: pointer;
    background: var(--olive-800); color: #fff; border: 0;
    border-radius: 999px; padding: 10px 20px;
  }
  .filter-open-tally { background: #fff; color: var(--olive-950); border-radius: 999px; padding: 1px 8px; font-size: .78rem; }
  .filter-rail { display: none; position: static; max-height: none; margin-bottom: 22px; }
  .filter-rail.is-open { display: block; }
}

/* 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: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ochre); 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; }

/* 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; }
  .site-nav {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--olive-800); flex-direction: column; gap: 0; padding: 12px 24px 18px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 2px; border-bottom: 1px solid rgba(241,235,217,.15); }
  .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: rgba(255,255,255,.55);
  border: 1px solid rgba(78,122,56,.35); border-radius: var(--radius); display: grid; gap: 10px; }
.intake-promise li { position: relative; padding-left: 24px; font-size: .95rem; }
.intake-promise li::before { content: "✓"; position: absolute; left: 0; color: #4E7A38; font-weight: 700; }
.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: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--terracotta-dark); font-weight: 700; }
.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(--ochre); 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(--terracotta); }
.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(--terracotta); 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: 700; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--olive-600); margin: 0 0 10px; }
.guide-card { background: #fff; border: 1px solid rgba(90,93,76,.18); 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(--terracotta-dark); }
.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: rgba(255,255,255,.55); border: 1px solid rgba(78,122,56,.35);
  border-radius: var(--radius); padding: 20px 22px; margin-top: 8px; }
.guides-check h2 { font-family: var(--font-display); font-size: .8rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--olive-600); margin: 0 0 8px; }
.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: #F4F0E2;
  border-left: 3px solid var(--ochre); border-radius: 0 8px 8px 0; 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; }
.btn-ghost { background: transparent; color: var(--olive-800); border: 1.5px solid var(--olive-800); }
.btn-ghost:hover { background: var(--olive-800); color: #fff; }
.guide-verified { font-size: .76rem; color: var(--ink-soft); margin: 0; }
.guides-cta { background: var(--sand); 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; }
}
.lodge-fac-more { background: transparent !important; color: var(--ink-soft) !important;
  border: 1px dashed rgba(90,93,76,.35); }

/* Fotogalerij op de lodge-pagina */
.gallery { margin: 0; }
/* 3:2 is de verhouding waarin vrijwel elke camera schiet, dus een aangeleverde
   lodge-foto wordt zo niet bijgesneden. Bij 16:10 sneuvelde de boven- en
   onderkant, wat bij een staand onderwerp als een olifant het meest opvalt. */
/* NOOIT BIJSNIJDEN. Een foto die een lodge ons geeft, tonen we zoals zij hem
   genomen hebben. Geen vaste verhouding dus: de hoogte volgt de foto en wordt
   alleen begrensd, zodat een staande opname de pagina niet wegduwt. Dat er
   soms een randje overblijft is de prijs, en die is lager dan een hoofd of een
   olifant die half wegvalt. */
.gallery-lead { display: block; margin-inline: auto; max-width: 100%; width: auto;
  height: auto; max-height: min(72vh, 720px); border-radius: var(--radius); }
.gallery-caption { font-size: .85rem; color: var(--ink-soft); margin: 8px 2px 0; }
.gallery-thumbs { display: flex; gap: 8px; list-style: none; margin: 10px 0 0; padding: 0 0 4px;
  overflow-x: auto; scrollbar-width: thin; }
.gallery-thumbs li { flex: none; }
.gallery-thumb { padding: 0; border: 2px solid transparent; border-radius: 8px; cursor: pointer;
  background: none; line-height: 0; overflow: hidden; transition: border-color .12s ease; }
.gallery-thumb img { width: 118px; height: 79px; object-fit: cover; display: block; }
.gallery-thumb:hover { border-color: var(--olive-600); }
.gallery-thumb.is-current { border-color: var(--terracotta); }
.gallery-thumb:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }
@media (max-width: 700px) { .gallery-thumb img { width: 92px; height: 62px; } }

/* Met een galerij mag de hero breder en hoger dan de tekstkolom. */
.lodge-hero:has(.gallery) { max-width: 1080px; }
.lodge-hero:has(.gallery) .img-credit {
  position: static; color: var(--ink-soft); text-align: right; margin: 6px 2px 0;
}  margin-top: -28px; position: relative; z-index: 2;
  box-shadow: 0 14px 34px rgba(28,34,16,.18);
}
.gallery-thumb img { width: 152px; height: 101px; }
.gallery-thumbs { gap: 10px; margin-top: 12px; }
.gallery-caption { font-size: .9rem; margin-top: 10px; }
@media (max-width: 900px) {
  
  .gallery-thumb img { width: 108px; height: 72px; }
}

/* Lodge-detail: badges, voorzieningen, kostenblok */
.lodge-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.fac-lead { font-family: var(--font-ui); font-size: .9rem; font-weight: 600; color: var(--ink-soft); margin: 14px 0 6px; }
.fac-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.fac-list li { font-family: var(--font-ui); font-size: .84rem; font-weight: 600; color: var(--olive-800);
  background: #EDF2E4; border-radius: 999px; padding: 5px 12px; }
.fac-list-act li { background: #F4E9D2; color: #6E4F0A; }
.cost-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.cost-list li { padding-left: 18px; position: relative; }
.cost-list li::before { content: "+"; position: absolute; left: 0; color: var(--terracotta); font-weight: 700; }
.cost-worked { background: var(--sand); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 12px; }
.cost-caveat { border-left: 3px solid var(--ochre); padding-left: 14px; font-size: .93rem; color: var(--ink-soft); margin: 0 0 12px; }

/* 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 rgba(90,93,76,.18); border-radius: var(--radius); padding: 16px 18px; }
.related-reason { font-family: var(--font-ui); font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--terracotta-dark); margin: 0 0 6px; }
.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 { color: var(--terracotta-dark); }
.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. */
.fees-main > h2 {
  margin: 52px 0 4px; padding-top: 22px;
  border-top: 1px solid rgba(90,93,76,.22);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
}
.fees-main > h2:first-of-type { margin-top: 38px; }
.fees-main > h2::before {
  content: ""; display: block; width: 34px; height: 3px;
  background: var(--ochre); border-radius: 2px; margin-bottom: 14px;
}
.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; }

/* Voorzieningen: één consistente pil, zichtbaar op de crèmekleurige pagina. */
.fac-list li {
  background: #fff; border: 1px solid rgba(90,93,76,.22);
  color: var(--olive-800); padding: 6px 13px;
}
.fac-list-act li { background: #FBF1DA; border-color: #E4CE9A; color: #6E4F0A; }

/* Het bonnetje: het enige donkere vlak op de pagina, want dit is het punt. */
.tally {
  background: var(--olive-950); color: #EDEAD9;
  border-radius: 16px; padding: 22px 26px 20px; margin: 22px 0 8px;
  box-shadow: 0 18px 40px rgba(28,34,16,.22);
}
.tally-head {
  font-family: var(--font-ui); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ochre);
  margin: 0 0 14px;
}
.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: var(--ochre); 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: 2px 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: var(--ochre); 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-caveat { border-left: 2px solid var(--ochre); padding-left: 12px; }
.tally-link {
  display: inline-block; margin-top: 16px; color: var(--ochre);
  font-family: var(--font-ui); font-weight: 700; font-size: .9rem;
}
.tally-link:hover { color: #fff; }

/* Permit-kaart: massief in plaats van gestippeld, en labels boven de waarde
   zodat een lange waarde niet uitgerekt over de rechterkolom valt. */
.permit-card { border: 1px solid rgba(90,93,76,.28); border-radius: 16px; box-shadow: 0 12px 30px rgba(28,34,16,.14); }
.permit-h { font-size: 1.05rem; }
.fact { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; align-items: baseline; }
.fact dd { text-align: right; font-family: var(--font-ui); font-size: .95rem; }
.fact:has(dd:not(:only-child)) { }
@media (min-width: 0px) {
  .fact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .fact dt { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
}

/* 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: 16px; padding: 22px 24px; margin-top: 8px; }
.listed-mail-label { font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ochre); 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: var(--ochre); }
.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 rgba(90,93,76,.18); 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 { display: inline-block; font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 4px 11px; margin: 0 0 12px; }
.listed-tag-guide { background: #4E7A38; color: #fff; }
.listed-tag-lodge { background: var(--ochre); color: var(--ink); }
.listed-tag-activity { background: #8A6D3B; color: #fff; }
.listed-do { font-size: .92rem; color: var(--ink-soft); border-left: 3px solid var(--ochre); padding-left: 12px; }
.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(--terracotta);
  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: #FBF3DE; border: 1px solid #E6D3A2; 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-steps > h2::before { content: ""; display: block; width: 34px; height: 3px;
  background: var(--ochre); border-radius: 2px; margin-bottom: 14px; }
.next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.next-card { display: block; background: #fff; border: 1px solid rgba(90,93,76,.18);
  border-radius: var(--radius); padding: 18px 20px; text-decoration: none;
  transition: border-color .12s ease, transform .12s ease; }
.next-card:hover { border-color: var(--olive-600); transform: translateY(-2px); }
.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 { color: var(--terracotta-dark); }
.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. */
.rate-basis { font-size: .95rem; border-left: 3px solid var(--olive-600); padding: 8px 0 8px 14px; margin: -4px 0 16px; }
.rate-basis-all { border-left-color: var(--olive-600); }
.rate-basis-unknown { border-left-color: var(--ochre); color: var(--ink-soft); }
.rate-basis-room-only, .rate-basis-self-catering { border-left-color: var(--terracotta); }

/* Uitklapmenu onder het parkitem. Bewust zonder JavaScript: hover en
   focus-within dekken muis en toetsenbord, en de links staan altijd in de HTML
   zodat een crawler ze ziet. */
.nav-group { position: relative; display: inline-flex; align-items: center; }
.nav-caret { font-size: .7em; margin-left: 5px; opacity: .8; }
.nav-sub {
  position: absolute; top: 100%; left: -14px; z-index: 60;
  display: none; flex-direction: column; min-width: 200px;
  background: var(--olive-950); border-radius: 0 0 var(--radius) var(--radius);
  padding: 6px 0 8px; box-shadow: 0 14px 30px rgba(28,34,16,.35);
}
.nav-group:hover .nav-sub, .nav-group:focus-within .nav-sub { display: flex; }
.site-nav .nav-sub a { padding: 9px 18px; border-bottom: none; font-weight: 500; }
.site-nav .nav-sub a:hover { background: var(--olive-800); color: #fff; }

@media (max-width: 900px) {
  /* Op smal scherm werkt zweven niet: alles gewoon onder elkaar, ingesprongen. */
  .nav-group { display: block; }
  .nav-sub { position: static; display: flex; min-width: 0; background: none;
             box-shadow: none; padding: 0 0 0 16px; }
  .nav-caret { display: none; }
}

/* Gidsenblok: waar begeleiding het product is, verdient het eigen ruimte. */
.guiding { background: #fff; border: 1px solid rgba(90,93,76,.18); 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: 26px; position: relative; }
.guiding-facts li::before { content: "•"; position: absolute; left: 6px; color: var(--ochre);
  font-weight: 800; font-size: 1.2em; line-height: 1; }
.guiding-source { font-size: .85rem; color: var(--ink-soft); margin: 16px 0 0; }
/* Uitleg die altijd zichtbaar is, niet alleen bij een leeg filter. */
.filter-why-always { color: var(--ink-soft); font-size: .82rem; line-height: 1.45; margin: 10px 2px 0; }

/* 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; }

/* Foto's die niet bijgesneden mogen worden: hele opname, rustige rand eromheen. */
.gallery { text-align: center; }
.gallery-caption, .gallery-thumbs { text-align: left; }

/* 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: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ochre); 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: var(--ochre); }
.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-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.6); }
.wx-sun dt svg { width: 15px; height: 15px; color: var(--ochre); }
.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-display); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  background: var(--olive-600); color: #fff; padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
.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. */
.bt-prime   { --bt: var(--olive-600); }
.bt-dry-hot { --bt: var(--ochre); }
.bt-shoulder{ --bt: #B79B6B; }
.bt-green   { --bt: #3E8A7E; }

.bt-strip-wrap { margin-bottom: 8px; }
.bt-answer { background: var(--olive-950); color: var(--bone); border-radius: var(--radius);
  padding: 24px 28px; margin-bottom: 28px; }
.bt-answer-label { font-family: var(--font-ui); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ochre); margin: 0 0 8px; }
.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.3rem; color: #fff; }

.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); }

.bt-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 16px; margin: 24px 0 12px; }
.bt-month { background: #fff; border-radius: var(--radius); padding: 18px 20px 20px;
  border-top: 4px solid var(--bt); scroll-margin-top: 90px; }
.bt-month-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bt-month-icon { width: 30px; height: 30px; flex: none; color: var(--bt); }
.bt-month-head h3 { margin: 0; }
.bt-verdict { margin: 1px 0 0 !important; font-family: var(--font-ui); font-size: .74rem;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--bt); }
.bt-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0 0 12px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(90,93,76,.16); }
.bt-nums dt { font-family: var(--font-ui); font-size: .66rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft); }
.bt-nums dd { margin: 1px 0 0; font-family: var(--font-display); font-size: 1.05rem;
  font-weight: 700; color: var(--olive-950); }
.bt-meaning { margin: 0 !important; font-size: .93rem; line-height: 1.55; }

@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-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; }
.bt-chip { font-family: var(--font-ui); font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: var(--bt); border-radius: 999px;
  padding: 3px 9px; }
.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-left: 3px solid var(--bt); border-radius: 6px;
  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: .64rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ochre);
  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-left: 3px solid var(--olive-600);
  border-radius: 0 var(--radius) var(--radius) 0; 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 8px; margin: 18px 0 26px;
  padding-bottom: 18px; border-bottom: 1px solid rgba(90,93,76,.16); }
.lodge-jump a { font-family: var(--font-ui); font-size: .82rem; font-weight: 600;
  color: var(--olive-800); background: rgba(90,93,76,.08); border-radius: 999px;
  padding: 5px 12px; text-decoration: none; }
.lodge-jump a:hover { background: var(--olive-800); color: var(--bone); }

/* Wat de exploitant zelf verteld heeft, zichtbaar anders dan wat wij schreven.
   Dat onderscheid is het hele punt van deze site. */
.firsthand { position: relative; border-left: 3px solid var(--ochre); padding-left: 22px; }
.firsthand-flag { font-family: var(--font-ui); font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ochre);
  margin: 0 0 4px !important; }

/* Open of dicht vandaag. */
.season-now { font-family: var(--font-ui); font-size: .84rem; font-weight: 700;
  border-radius: 8px; padding: 8px 12px; margin: 0 0 14px; }
.season-open { background: rgba(102,116,59,.14); color: var(--olive-950); }
.season-closed { background: rgba(192,90,46,.14); color: var(--terracotta-dark); }
.season-now::before { content: "● "; }

.price-rank, .fee-ontop { font-size: .86rem; color: var(--ink-soft);
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(90,93,76,.16); }
.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; }
}

/* ---- Lightbox ---------------------------------------------------------- */
.gallery-zoom { display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative; }
.gallery-zoom-hint { position: absolute; right: 12px; bottom: 12px; opacity: 0;
  font-family: var(--font-ui); font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; background: rgba(38,41,28,.72);
  border-radius: 999px; padding: 6px 12px; transition: opacity .15s; }
.gallery-zoom:hover .gallery-zoom-hint, .gallery-zoom:focus-visible .gallery-zoom-hint { opacity: 1; }

.lb { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh;
  overflow: visible; }
.lb::backdrop { background: rgba(20,24,12,.92); }
.lb-img { max-width: 92vw; max-height: 82vh; width: auto; height: auto;
  border-radius: var(--radius); display: block; margin: 0 auto; }
.lb-caption { color: rgba(246,240,226,.86); font-size: .9rem; text-align: center;
  margin: 14px auto 0; max-width: 72ch; }
.lb-close, .lb-nav { position: fixed; background: rgba(38,41,28,.8); color: #fff;
  border: 0; border-radius: 999px; cursor: pointer; line-height: 1;
  font-family: var(--font-ui); }
.lb-close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 1.7rem; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-close:hover, .lb-nav:hover { background: var(--terracotta); }
@media (max-width: 700px) {
  .lb-nav { width: 44px; height: 44px; font-size: 1.6rem; }
  .lb-img { max-height: 70vh; }
}

/* ---- Vergelijken op de overzichtspagina -------------------------------- */
.lodge-compare { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  font-family: var(--font-ui); font-size: .8rem; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; }
.lodge-compare input { width: 16px; height: 16px; accent-color: var(--olive-600); cursor: pointer; }
.lodge-compare.is-blocked { opacity: .4; cursor: not-allowed; }

/* De balk komt pas in beeld als er iets gekozen is, en blijft onderin staan. */
.cmp-bar { position: sticky; bottom: 14px; z-index: 20; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 12px;
  background: var(--olive-950); color: var(--bone); border-radius: var(--radius);
  padding: 14px 18px; margin: 18px 0; box-shadow: 0 12px 32px rgba(28,34,16,.28); }
.cmp-count { margin: 0; font-size: .92rem; }
.cmp-actions { display: flex; align-items: center; gap: 12px; }
.cmp-actions .btn { padding: 9px 16px; font-size: .88rem; }
.cmp-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.cmp-clear { background: none; border: 0; color: rgba(246,240,226,.75); cursor: pointer;
  font-family: var(--font-ui); font-size: .85rem; text-decoration: underline; }

.cmp-dialog { border: 0; border-radius: var(--radius); padding: 0; max-width: min(96vw, 1000px);
  background: var(--bone); color: var(--ink); }
.cmp-dialog::backdrop { background: rgba(20,24,12,.72); }
.cmp-dialog-head { display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 12px; }
.cmp-dialog-head h2 { margin: 0; font-size: 1.4rem; }
.cmp-close { background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer;
  color: var(--ink-soft); }
.cmp-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cmp-table th, .cmp-table td { padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid rgba(90,93,76,.16); }
.cmp-table thead th { font-family: var(--font-display); font-size: 1rem; }
.cmp-table tbody th { font-family: var(--font-ui); font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; width: 1%; }
.cmp-blank { color: var(--ink-soft); font-style: italic; }

/* 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; }

/* 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(--sand); 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; }
}