/* ==========================================================================
   Eyveld fluid layer (okt 2026)
   Laadt NA eyveld.css en eyveld-pitch-cfg.css. Hier staat de dynamische logica:
   alles schaalt mee met breedte EN hoogte van het scherm, geen vaste maten.

   1. Schaal:  de root-lettergrootte volgt het scherm (desktop/liggend), dus alles
               in rem (tekst, ruimte, cards, knoppen) schaalt automatisch mee.
   2. Header:  --ey-header-h = echte hoogte van de sticky header (gezet door eyveld.js).
   3. Hero:    past altijd met knoppen in het eerste scherm.
   4. Secties: ruimte en koppen schalen met de schermhoogte.
   5. Calculator: vult precies één scherm onder de header en klikt in beeld (scroll-snap).
   6. Cards:   reageren op hun eigen breedte (container queries), niet op het scherm.
   ========================================================================== */

/* ---- 1. Schaal ----------------------------------------------------------- */
/* Mobiel en tablet staand: vaste 16px (leesbaar). Breed of liggend: schaal met de
   hoogte (de krapste maat op laptops) en een beetje met de breedte.
   1920x1080 = 17px, 1536x864 = 15.7px, 1366x768 = 14.7px, 1280x650 = 13.5px. */
html { font-size: 16px; }
@media (min-width: 900px) and (orientation: landscape) {
  html { font-size: clamp(13.5px, calc(6px + 0.95vh + 0.1vw), 17px); }
}

:root {
  --ey-header-h: 5.5rem;
  --ey-screen: calc(100svh - var(--ey-header-h));
  --ey-max: 70rem;                                   /* was 1120px: schaalt nu mee */
  --ey-gutter: clamp(1rem, 3vw, 2.5rem);
  --ey-space: clamp(1.75rem, 6svh, 4rem);            /* verticale sectieruimte */
  --ey-radius: 1.5rem;
  --ey-radius-sm: 1.125rem;
  --ey-anchor-offset: calc(var(--ey-header-h) + 0.75rem);
}

.header-inner,
.hero-inner,
.section-inner,
.footer-inner {
  width: min(calc(100% - 2 * var(--ey-gutter)), var(--ey-max));
}

/* ---- 3. Hero ------------------------------------------------------------- */
.hero {
  min-height: clamp(18rem, calc(var(--ey-screen) - 3rem), 42rem);
}
.hero--short {
  min-height: clamp(13rem, calc(var(--ey-screen) * 0.55), 30rem);
}
.hero-inner {
  padding: clamp(1.5rem, 7svh, 4.5rem) 0 clamp(1.25rem, 5svh, 3.4rem);
}
.hero h1 {
  font-size: clamp(2.1rem, min(6.8vw, 9.5svh), 4.6rem);
  margin-bottom: clamp(0.4rem, 1.5svh, 0.85rem);
}
.hero p {
  font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.12rem);
  margin-bottom: clamp(0.75rem, 2.5svh, 1.3rem);
  line-height: 1.55;
}
.hero .kicker { margin-bottom: clamp(0.4rem, 1.5svh, 0.85rem); }
.hero::after {
  width: min(12.5rem, 36vw, 24svh);
  height: min(12.5rem, 36vw, 24svh);
}

/* ---- 4. Secties ---------------------------------------------------------- */
.section {
  padding: var(--ey-space) 0;
  scroll-margin-top: var(--ey-header-h);
}
.section-head h2 {
  font-size: clamp(1.8rem, min(4.4vw, 6.5svh), 3.2rem);
}

/* ---- 5. Calculator ------------------------------------------------------- */
html { scroll-snap-type: y proximity; }

#calculator.section {
  scroll-snap-align: start;
  scroll-margin-top: var(--ey-header-h);
  min-height: var(--ey-screen);
  padding: clamp(0.6rem, 2.5svh, 1.75rem) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
#calculator .section-head { margin-bottom: clamp(0.35rem, 1.5svh, 1rem); }
#calculator .section-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, min(3.6vw, 5.5svh), 2.7rem);
}

/* Twee kolommen zodra er ruimte is (was pas vanaf 1201px). */
@media (min-width: 900px) {
  .cfg {
    grid-template-columns: minmax(0, 1.15fr) minmax(17rem, 0.85fr);
    gap: clamp(0.6rem, 1.5vw, 1rem);
    align-items: stretch;
  }
  .cfg-total { position: sticky; top: calc(var(--ey-header-h) + 0.5rem); }
}

.cfg-panel,
.cfg-total {
  padding: clamp(0.7rem, 2svh, 1.15rem) clamp(0.8rem, 1.6vw, 1.25rem);
}
.cfg-panel { gap: clamp(0.4rem, 1.6svh, 0.9rem); }
.cfg-choice {
  min-height: clamp(2.9rem, 7.5svh, 4.4rem);
  padding: clamp(0.3rem, 1svh, 0.6rem) 0.55rem;
}
.cfg-grid { gap: clamp(0.45rem, 1.8svh, 0.9rem) clamp(0.6rem, 1.5vw, 1rem); }
.cfg-step { height: clamp(2.2rem, 5.2svh, 2.6rem); }

/* Brede maar lage schermen (laptops): vier tellers naast elkaar. */
@media (min-width: 1100px) and (max-height: 860px) {
  .cfg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cfg-step { min-width: 0; width: 100%; }
}

/* ---- 6. Cards ------------------------------------------------------------ */
/* Cards kijken naar hun eigen breedte: zo werkt dezelfde card in elke kolom. */
.book-lane { container-type: inline-size; }
.book-lane {
  min-height: clamp(16rem, calc(var(--ey-screen) * 0.6), 26rem);
}
@container (max-width: 44rem) {
  .book-lane__body { padding: clamp(1rem, 3cqi, 1.6rem); }
}

/* ---- 2. Header ----------------------------------------------------------- */
/* De header mag breder dan de inhoud, zodat menu, Boeken en taal op één regel passen. */
.header-inner { width: min(calc(100% - 2 * var(--ey-gutter)), 84rem); flex-wrap: nowrap; }
.brand, .brand strong, .brand small { white-space: nowrap; }
@media (min-width: 981px) {
  .nav { flex-wrap: nowrap; white-space: nowrap; gap: 0.3rem clamp(0.45rem, 0.9vw, 1rem); }
}

/* ---- Plattegrond: alleen de kaart (feedback 31-10-2026) ------------------ */
.plan-title {
  margin: 0 0 clamp(0.5rem, 2svh, 1rem);
  font-family: var(--ey-font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, min(3.6vw, 5.5svh), 2.6rem);
}
.plan-frame img { max-height: calc(var(--ey-screen) - 7rem); width: auto; margin-inline: auto; }

/* ---- Calculator: vier keuzes (Kampeerplek, Trekkersveld, Camperplek, Vakantiewoningen) */
.cfg-row--four { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
.cfg-row--four .cfg-choice__label,
.cfg-row--four .cfg-choice__sub { overflow-wrap: anywhere; max-width: 100%; }
.cfg-choice--link { text-decoration: none; border-style: dashed; }
.cfg-choice--link:hover { background: #eef6f1; }
@media (max-width: 720px) {
  .cfg-row--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
}

/* ---- Seizoensmelding op /boeken/: lucht boven en onder (was 0) ----------- */
.section--note { padding: clamp(1rem, 3.5svh, 2rem) 0 0; }

/* ---- Menu: drie groepen met pagina's eronder, geen hamburger (31-10-2026) --
   De nav is display:contents, zodat groepen, Contact, Boeken en taal gewone items
   van de headerbalk worden. Desktop: één rij. Mobiel: rij 1 logo + Boeken + taal,
   rij 2 de drie groepen even breed. Openen bij hover (desktop) of tik (touch). */
.nav-quick { display: none !important; }
.nav-toggle { display: none; }
.header-inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem clamp(0.4rem, 1vw, 0.9rem); }
.brand { margin-right: auto; order: 1; }
.nav.nav--groups { display: contents; }
.nav-group { position: relative; order: 2; }
.nav-contact { order: 3; font-weight: 800; color: var(--ey-ink); text-decoration: none; padding: 0.55rem 0.4rem; }
.nav--groups .btn-nav { order: 4; }
.header-inner .lang-switch { order: 5; margin: 0; width: auto; align-self: center; }
.header-inner .lang-switch__menu { left: auto; right: 0; }
.nav-menu-contact { display: none; }

.nav-group__btn {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 1rem; color: var(--ey-ink);
  padding: 0.55rem 0.5rem; display: inline-flex; align-items: center; gap: 0.3rem;
  border-radius: 12px; min-height: 44px;
}
.nav-group__btn::after {
  content: ""; width: 0.45em; height: 0.45em; margin-top: -0.2em;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg); transition: transform 0.12s ease;
}
.nav-group.is-open .nav-group__btn::after { transform: rotate(-135deg); margin-top: 0.2em; }
.nav-group.is-active .nav-group__btn { color: var(--ey-coral); }
.nav-group__btn:hover, .nav-contact:hover { color: #1f7fb0; }

.nav-group__menu {
  display: none;
  position: absolute; top: 100%; left: 0; z-index: 1200;
  min-width: 15rem; padding: 0.45rem;
  background: #fff; border: 3px solid var(--ey-ink);
  border-radius: var(--ey-radius-sm); box-shadow: var(--ey-shadow-ink);
  flex-direction: column; gap: 0.1rem;
}
/* onzichtbare brug zodat hover niet wegvalt tussen knop en paneel */
.nav-group__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-group__menu a {
  display: block; padding: 0.6rem 0.8rem; border-radius: 12px;
  font-weight: 800; color: var(--ey-ink); text-decoration: none; white-space: nowrap;
}
.nav-group__menu a:hover, .nav-group__menu a:focus-visible { background: rgba(58, 176, 226, 0.14); }
.nav-group.is-open > .nav-group__menu,
.nav-group:focus-within > .nav-group__menu { display: flex; }
@media (hover: hover) {
  .nav-group:hover > .nav-group__menu { display: flex; }
  .nav-group:hover .nav-group__btn::after { transform: rotate(-135deg); margin-top: 0.2em; }
}

/* Mobiel en tablet staand: hamburger; open = drie groepen als lijst. */
@media (max-width: 900px) {
  .brand small { display: none; }
  .brand img { width: 40px; height: auto; }
  .brand strong { font-size: 1.15rem; }
  .nav-contact { display: none; }
  .nav-menu-contact { display: block; }
  .nav--groups .btn-nav { order: 2; padding: 0.45rem 0.85rem; min-height: 44px; }
  .header-inner .lang-switch { order: 3; }
  .header-inner .lang-code { display: none; }
  .nav-toggle { display: inline-flex; order: 4; width: 44px; height: 44px; margin: 0; }
  .nav-group { display: none; order: 10; flex: 1 1 100%; position: static; }
  .header-inner.is-menu-open .nav-group { display: block; animation: ey-menu-in 0.14s ease-out; }
  .header-inner.is-menu-open .nav-group + .nav-group { border-top: 2px solid rgba(23, 52, 71, 0.1); }
  .nav-group__btn { pointer-events: none; padding: 0.6rem 0.2rem 0.2rem; font-family: var(--ey-font-display); font-weight: 400; font-size: 1.25rem; min-height: 0; }
  .nav-group__btn::after { display: none; }
  .nav-group__menu, .nav-group.is-open > .nav-group__menu, .nav-group:focus-within > .nav-group__menu {
    display: flex; position: static; border: 0; box-shadow: none; background: none;
    padding: 0 0 0.5rem; min-width: 0;
  }
  .nav-group__menu::before { display: none; }
  .nav-group__menu a { padding: 0.65rem 0.6rem; }
  body.nav-is-open { overflow: hidden; }
  .header-inner.is-menu-open { max-height: calc(100svh - 0.5rem); overflow-y: auto; }
}
@keyframes ey-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }


/* ---- Smashed Potatoes-blok op /tarieven/ ---------------------------------- */
.event-card { margin: clamp(1rem, 3svh, 1.75rem) 0; display: grid; gap: 0.4rem; justify-items: start; }
.event-card .list { margin: 0.2rem 0 0.6rem; }
.cfg-row--four .cfg-choice__label { overflow-wrap: normal; word-break: normal; hyphens: auto; font-size: clamp(0.82rem, 0.7rem + 0.35vw, 0.98rem); }

/* ---- Smashed Potatoes: rond logo in een stralende zon + popup -------------- */
.sp-sun {
  --sp: clamp(7rem, 22svh, 10rem);
  position: relative; width: var(--sp); height: var(--sp);
  display: grid; place-items: center; margin: 0.25rem auto 0.4rem;
}
.sp-sun::before {
  content: ""; position: absolute; inset: -22%; border-radius: 50%;
  background:
    radial-gradient(circle, var(--ey-sun) 0 58%, transparent 59%),
    repeating-conic-gradient(var(--ey-sun) 0 9deg, transparent 9deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 0 70%, transparent 71%);
          mask: radial-gradient(circle, #000 0 70%, transparent 71%);
  animation: ey-sun-spin 40s linear infinite;
}
.sp-sun picture, .sp-sun img {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  border: 3px solid var(--ey-ink); object-fit: cover; display: block;
}
.sp-sun--small { --sp: clamp(5rem, 14svh, 6.5rem); margin: 0.4rem 0 0.8rem 0.6rem; }
@keyframes ey-sun-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sp-sun::before { animation: none; } }

.sp-pop { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1rem; }
.sp-pop[hidden] { display: none; }
.sp-pop__backdrop { position: absolute; inset: 0; background: rgba(23, 52, 71, 0.55); }
.sp-pop__card {
  position: relative; width: min(26rem, 100%); max-height: calc(100svh - 2rem); overflow: auto;
  background: linear-gradient(180deg, #fff6d6 0%, #fff 55%);
  border: 3px solid var(--ey-ink); border-radius: var(--ey-radius); box-shadow: var(--ey-shadow-sun);
  padding: clamp(1rem, 3svh, 1.6rem) clamp(1rem, 3vw, 1.6rem); text-align: center;
  animation: ey-menu-in 0.18s ease-out;
}
.sp-pop__card h2 { font-family: var(--ey-font-display); font-weight: 400; margin: 0.4rem 0; font-size: clamp(1.5rem, min(5vw, 4.5svh), 2rem); }
.sp-pop__card .list { text-align: left; display: inline-block; margin: 0.2rem 0 0.9rem; }
.sp-pop__card .hero-actions { justify-content: center; }
.sp-pop__x { position: absolute; top: 0.5rem; right: 0.6rem; width: 44px; height: 44px; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--ey-ink); }
body.sp-pop-open { overflow: hidden; }
@keyframes ey-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Lagere heroes (feedback 31-10): veel foto, weinig info ---------------- */
.hero {
  min-height: clamp(15rem, calc(var(--ey-screen) * 0.55), 32rem);
}
.hero-inner { padding: clamp(1.25rem, 5svh, 3rem) 0 clamp(1rem, 4svh, 2.25rem); }
.hero h1 { font-size: clamp(1.9rem, min(5.4vw, 7.5svh), 3.6rem); }
/* Subpagina's: compacte kop. */
body:not(.page-home) .hero,
.hero--short {
  min-height: clamp(10rem, calc(var(--ey-screen) * 0.34), 19rem);
}
body:not(.page-home) .hero h1 {
  font-size: clamp(1.7rem, min(4.2vw, 6svh), 2.8rem);
  max-width: 22ch;
}
/* 05-11-2026: logo card on every page the same as on home (was smaller and looked cut off). */
.sp-pop .sp-sun { margin: calc(var(--sp) * 0.26) auto calc(var(--sp) * 0.3); }
.sp-sun--small { margin: calc(var(--sp) * 0.26) 0 calc(var(--sp) * 0.3) calc(var(--sp) * 0.26); }

/* ---- Hero sweet spot (31-10, na "te laag") -------------------------------- */
.hero { min-height: clamp(18rem, calc(var(--ey-screen) * 0.66), 38rem); }
body:not(.page-home) .hero,
.hero--short { min-height: clamp(13rem, calc(var(--ey-screen) * 0.48), 26rem); }
body:not(.page-home) .hero h1 { font-size: clamp(1.9rem, min(4.8vw, 7svh), 3.2rem); }

/* ---- Smashed Potatoes als knop (geen popup, 31-10) ----------------------- */
.sp-btn { gap: 0.75rem; padding-left: 0.4rem; background: #fff; color: var(--ey-ink); }
.sp-sun--btn { --sp: 2.1rem; margin: 0 0.35rem 0 0.45rem; }
.sp-sun--btn::before { inset: -30%; }
.sp-sun--btn img { border-width: 2px; }

/* ---- Calculator: geen leeg gat (31-10). Inhoud bovenaan, hoogte volgt de inhoud
   (max. één scherm); zolang er geen type gekozen is volle breedte. ----------- */
#calculator.section {
  min-height: 0;
  justify-content: flex-start;
  padding: var(--ey-space) 0;
}
.cfg:not([data-ready]) { grid-template-columns: 1fr; }
.cfg:not([data-ready]) .cfg-total { display: none; }
#price-cfg:not([data-ready]) .cfg-panel,
#price-cfg:not([data-ready]) .cfg-row--main { max-width: none; }

/* /boeken/: vaste volgorde Kampeerplekken, Camperplekken, Vakantiewoningen (geen winterregel meer) */
html[data-ey-season="winter"] .book-lanes #huizen { order: 0; }

/* CUBE/kampeerwidget: hoeken netjes, iframe binnen de afgeronde rand (31-10) */
.book-embed { overflow: clip; }
.book-embed iframe { border-radius: calc(var(--ey-radius) - 3px); }

/* ---- /contact/#route: één scherm, gelijke ruimte boven en onder (31-10) ---- */
#route.section {
  scroll-margin-top: var(--ey-header-h);
  padding: var(--ey-space) 0;
}
@media (min-width: 900px) {
  #route.section {
    min-height: var(--ey-screen);
    display: flex; flex-direction: column; justify-content: center;
    box-sizing: border-box;
  }
  #route .section-head { margin-bottom: clamp(0.6rem, 2svh, 1.25rem); }
  #route .split { align-items: stretch; }
  #route .map-frame,
  #route .map-frame.ey-map--large {
    min-height: 0;
    height: clamp(18rem, calc(var(--ey-screen) - 2 * var(--ey-space) - 7rem), 36rem);
  }
  #route .route-aside { display: flex; flex-direction: column; gap: clamp(0.6rem, 2svh, 1rem); max-height: clamp(18rem, calc(var(--ey-screen) - 2 * var(--ey-space) - 7rem), 36rem); }
  #route .route-aside .photo { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  #route .route-aside .photo img { width: 100%; height: 100%; object-fit: cover; }
  #route .route-aside .text-panel { flex: 0 0 auto; }
}
@media (min-width: 900px) {
  #route .map-frame, #route .map-frame.ey-map--large { height: auto; align-self: stretch; min-height: 18rem; }
}
@media (min-width: 900px) {
  #route .route-aside { max-height: none; }
  #route .route-aside .photo { flex: 0 0 auto; height: clamp(5.5rem, calc(var(--ey-screen) - 2 * var(--ey-space) - 25rem), 18rem); }
}

/* ---- Algemeen (31-10): foto's en kaarten in split-blokken schalen met het scherm,
   nooit hoger dan wat er onder de header past. Geldt op alle pagina's. ---------- */
@media (min-width: 900px) {
  .split .photo, .split-flip .photo, .split .map-frame, .split-flip .map-frame {
    min-height: 0;
    max-height: calc(var(--ey-screen) - 2 * var(--ey-space));
  }
  .split .photo img, .split-flip .photo img { height: 100%; object-fit: cover; }
  #route .route-aside .photo { min-height: 0; }
}
@media (min-width: 900px) and (max-height: 760px) {
  #route .route-aside .photo { display: none; }
}

/* ---- Plattegrond: kader om de kaart, alles binnen één scherm met ruimte (31-10) */
.plan-title { margin-bottom: clamp(0.4rem, 1.5svh, 0.9rem); }
.plan-frame {
  width: fit-content; max-width: 100%; margin: 0 auto; padding: 0;
  overflow: clip; line-height: 0;
}
.plan-frame picture, .plan-frame img { display: block; }
.plan-frame img {
  width: auto; max-width: 100%; height: auto;
  max-height: calc(var(--ey-screen) - 2 * var(--ey-space) - 3.5rem - 3.5rem);
}

/* ---- Algemeen (31-10): ALLE vaste minimale hoogtes schalen met de schermhoogte,
   zodat geen foto, kaart of widget hoger wordt dan het scherm onder de header. ---- */
.photo { min-height: min(20rem, calc(var(--ey-screen) * 0.5)); }
.map-frame, .map-frame__link, .map-frame__img,
.map-frame .ey-map__canvas, .ey-map--large .ey-map__canvas {
  min-height: min(26rem, calc(var(--ey-screen) - 2 * var(--ey-space) - 4rem));
}
img, picture, iframe, video { max-width: 100%; }
@media (max-width: 980px) {
  .photo { min-height: min(13rem, 30svh); }
}
@media (max-width: 900px) {
  .book-lane__photo, .book-lane__photo img { height: clamp(7.5rem, 18svh, 11rem); min-height: 0; object-fit: cover; }
  .book-lane__body { gap: 0.35rem; padding: 0.9rem 1rem 1rem; }
  .book-lane__body .hero-actions { flex-direction: row; flex-wrap: wrap; gap: 0.45rem; }
  .book-lane__body .hero-actions .btn { width: auto; flex: 1 1 auto; min-height: 44px; white-space: nowrap; padding: 0.55rem 0.9rem; font-size: 0.95rem; }
  .book-lane { min-height: 0; }
}

/* ---- Plattegrond: één gecentreerd geheel dat het scherm vult (31-10) -------- */
.section:has(.plan-frame) {
  min-height: var(--ey-screen); box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(0.75rem, 3svh, 2rem) 0;
}
.section:has(.plan-frame) .section-inner { display: flex; flex-direction: column; align-items: center; }
.plan-title { text-align: center; margin: 0 0 clamp(0.5rem, 2svh, 1rem); }
.plan-frame img { max-height: calc(var(--ey-screen) - clamp(1.5rem, 6svh, 4rem) - 9.5rem); }
.plan-frame + .hero-actions { justify-content: center; margin-top: clamp(0.75rem, 2.5svh, 1.25rem) !important; }
/* Drie stromen: kaartrijen met 3 kolommen (31-10) */
@media (min-width: 900px) { .types-band, .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }

/* ---- Calculator: drie stromen + subkeuze onder Kampeerplek (31-10) -------- */
.cfg-row--three3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.cfg-row--three3 .cfg-choice__label { overflow-wrap: normal; hyphens: auto; }
.cfg-subrow { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin: 0.1rem 0 0.2rem; }
#price-cfg.show-sub .cfg-subrow { display: grid; }
.cfg-sub {
  appearance: none; font: inherit; font-weight: 800; font-size: 0.88rem; color: var(--ey-ink);
  background: #fff; border: 2px solid var(--ey-ink); border-radius: 999px;
  padding: 0.45rem 0.7rem; min-height: 40px; cursor: pointer;
}
.cfg-sub.is-on { background: var(--ey-forest); color: #fff; }
@media (max-width: 520px) { .cfg-subrow { grid-template-columns: 1fr; } }

/* Kaart-fallback (voordat Leaflet laadt) vult altijd het kader (31-10, generiek) */
.ey-map__fallback, .ey-map__fallback img, .map-frame__img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 520px) {
  .cfg-row--three3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cfg-row--three3 .cfg-choice--link { grid-column: 1 / -1; min-height: 0; padding-block: 0.5rem; }
  .cfg-row--three3 .cfg-choice__label { hyphens: manual; }
}

/* ---- Anchors (02-11): één regel voor de hele site. Doel komt 12px onder de
   header. Alleen html scroll-padding; geen extra scroll-margin op elementen
   (die telden bij elkaar op en zetten het doel te laag). ------------------- */
:root { --ey-anchor-offset: calc(var(--ey-header-h) + 12px); }
html { scroll-padding-top: var(--ey-anchor-offset); }
.section, #calculator.section, #route.section,
#price-cfg, #cfg-night, #cfg-total-card, #boek, [id] { scroll-margin-top: 0; }

/* ---- Reserveerblok (#boek): ruimte t.o.v. de calculator, fullscreen en snappy */
#boek.book-panel {
  margin-top: clamp(1.5rem, 6svh, 3.5rem);
  scroll-snap-align: start;
  min-height: calc(var(--ey-screen) - 24px);
  display: flex; flex-direction: column;
  box-sizing: border-box;
}
#boek.book-panel[hidden] { display: none !important; }
#boek .book-panel__head { margin-bottom: clamp(0.5rem, 2svh, 1rem); }
#boek .book-embed, #boek iframe { flex: 1 1 auto; }
#boek .book-embed { max-width: 46.5rem; width: 100%; margin-inline: auto; }
#calculator.section { scroll-snap-align: none; }
#calculator .section-head { scroll-snap-align: start; }
#boek .book-embed { flex: 0 0 auto; }
/* #boek: geen CSS-snap (botste met de JS-scroll bij openen); openen scrolt zelf naar het blok. */
#boek.book-panel { scroll-snap-align: none; }

/* ---- Review 03-11: tikdoelen mobiel >= 44px (calculator) ------------------- */
@media (max-width: 900px), (pointer: coarse) {
  .cfg-step { height: auto; min-height: 48px; padding: 0.1rem; }
  .cfg-step button { width: 44px; height: 44px; font-size: 1.15rem; }
  .cfg-sub { min-height: 44px; }
  .cfg-check--acsi .ey-info { min-width: 32px; min-height: 32px; }
}
/* Smalle telefoons (<=400px): header blijft op één regel */
@media (max-width: 400px) {
  .header-inner { gap: 0.35rem; }
  .brand { gap: 0.4rem; min-width: 0; }
  .brand img { width: 34px; }
  .brand strong { font-size: 1.02rem; }
  .nav--groups .btn-nav { padding: 0.4rem 0.7rem; font-size: 0.88rem; }
  .header-inner .lang-switch__toggle { padding-inline: 0.4rem; gap: 0.2rem; }
  .nav-toggle { width: 42px; height: 42px; }
}

/* ---- Review 03-11: kaart op volledig scherm recht en vol scherm (overschrijft
   kanteling en de algemene max-height voor kaarten in split-blokken) -------- */
.ey-map.is-fullscreen,
.split .ey-map.is-fullscreen,
#route .map-frame.ey-map.is-fullscreen {
  transform: none !important;
  inset: 0.75rem !important;
  height: auto !important; min-height: 0 !important; max-height: none !important;
  z-index: 3000;
}
body.ey-map-fs-open .float-book-wrap, body.ey-map-fs-open .float-book { display: none !important; }

/* ---- Review 03-11: hamburgermenu scrolt zelf, pagina erachter niet; X blijft zichtbaar */
@media (max-width: 900px) {
  html:has(body.nav-is-open) { overflow: hidden; }
  /* 13-11-2026: body niet ook op hidden. Met html en body allebei hidden werd body
     een eigen scrollcontainer en schoof de sticky header (met het open menu) uit
     beeld als je al gescrold was. Zonder :has blijft body hidden de scroll-lock. */
  html:has(body.nav-is-open) body.nav-is-open { overflow: visible; }
  .header-inner.is-menu-open { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  .header-inner.is-menu-open .nav-toggle,
  .header-inner.is-menu-open .btn-nav,
  .header-inner.is-menu-open .lang-switch,
  .header-inner.is-menu-open .brand { position: sticky; top: 0; z-index: 2; }
  .header-inner.is-menu-open::before {
    content: ""; position: sticky; top: 0; order: 0; flex: 0 0 100%; height: 0;
  }
}

/* ---- Huishoudelijk reglement (/informatie/#huisregels) --------------------- */
.rules-grid { gap: clamp(0.8rem, 2vw, 1.25rem); }
.rule-card strong { display: block; font-family: var(--ey-font-display); font-weight: 400; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); margin-bottom: 0.4rem; }
.rule-card .list { margin: 0; display: grid; gap: 0.45rem; }
.rules-sign { margin-top: clamp(1rem, 3svh, 1.6rem); font-weight: 800; }

/* ---- E3 (03-11): zwevende Boeken-knop alleen op brede schermen, waar hij niets
   bedekt. Mobiel, tablet en laptop: weg (Boeken staat al in de header). ------ */
@media (max-width: 1599px) {
  .float-book-wrap, .float-book, .float-book-hint { display: none !important; }
}

/* ---- E1 (03-11): vaste kleur per stroom. Kampeerplekken (+ trekkersveld) =
   koraal, Camperplekken = sky, Vakantiewoningen = forest. ------------------ */
.funnel-card--kampeer { background: #fdecea; box-shadow: var(--ey-shadow-coral); }
.book-lane--kampeer { box-shadow: var(--ey-shadow-coral); }

/* ---- E4 (03-11): leesbaarheid. Lopende tekst nooit kleiner dan 16px (WCAG/
   gangbare norm); op grote schermen tot 18px. Hulpteksten min. ~13px. ------ */
@media (min-width: 900px) and (orientation: landscape) {
  html { font-size: clamp(16px, calc(7px + 0.9vh + 0.12vw), 18px); }
}
.cfg-field .hint, .cfg-check__hint, .rates-note, .cfg-tax, .cfg-note, .cfg-choice__sub { font-size: max(0.8rem, 13px); }
@media (min-width: 1100px) and (max-height: 860px) {
  .cfg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* E1: gekozen kampeerplek/trekkersveld in de stroomkleur koraal */
.cfg-choice--kampeer.is-on, .cfg-sub.is-on { background: #C24A3C; border-color: var(--ey-ink); color: #fff; }
.cfg-choice--kampeer.is-on .cfg-choice__sub { color: #fff; }

/* ---- E5 (03-11): eigen 404 --------------------------------------------- */
.nf { min-height: var(--ey-screen); display: grid; place-items: center; padding: var(--ey-space) var(--ey-gutter);
  background: radial-gradient(circle at 20% 20%, rgba(252,185,0,.18), transparent 40%), radial-gradient(circle at 80% 70%, rgba(58,176,226,.16), transparent 45%); }
.nf__inner { max-width: 40rem; text-align: center; display: grid; justify-items: center; gap: clamp(.6rem, 2svh, 1.1rem); }
.nf__badge { width: clamp(7rem, 22svh, 10rem); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: var(--ey-sun); border: 4px solid var(--ey-ink); box-shadow: var(--ey-shadow-ink); transform: rotate(-6deg); }
.nf__badge span { font-family: var(--ey-font-display); font-size: clamp(2.4rem, 7svh, 3.6rem); color: var(--ey-ink); }
.nf__title { font-family: var(--ey-font-display); font-weight: 400; margin: 0; font-size: clamp(2rem, min(6vw, 7svh), 3.2rem); line-height: 1.15; }
.nf__lead { margin: 0; font-size: 1.1rem; color: var(--ey-muted); }
.nf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: .4rem; }
.nf__btn { font-size: 1.12rem; padding: .95rem 1.6rem; min-height: 56px; }
.nf__or { margin: .6rem 0 0; font-weight: 800; }
.nf__streams { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.nf__stream { padding: .55rem 1rem; border-radius: 999px; border: 2px solid var(--ey-ink); font-weight: 800; color: var(--ey-ink); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nf__stream--kampeer { background: #fdecea; } .nf__stream--camper { background: #e8f6ff; } .nf__stream--huis { background: #e8f3ec; }
.nf__contact { margin: .4rem 0 0; font-weight: 700; }
@media (max-width: 520px) { .nf__actions .btn { width: 100%; } }

/* ---- D6 (03-11): plattegrond, legenda en 'waar ligt wat' als tekst ------- */
.plan-info { width: 100%; max-width: var(--ey-max); margin-top: clamp(1.5rem, 5svh, 3rem); display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1rem, 3vw, 2.5rem); text-align: left; }
.plan-info h2 { font-family: var(--ey-font-display); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 0 0 .6rem; }
.plan-where { display: grid; gap: .55rem; margin: 0; }
.plan-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .9rem; }
.plan-legend li { display: flex; align-items: center; gap: .5rem; font-weight: 700; }
.legend-dot { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--ey-ink); flex: 0 0 auto; }
.legend-dot--icon { background: var(--ey-coral); border-radius: 50%; border-color: #fff; box-shadow: 0 0 0 2px var(--ey-coral); width: .8rem; height: .8rem; }
@media (max-width: 760px) { .plan-info { grid-template-columns: 1fr; } }

/* ---- Over ons (/informatie/#over-ons) ------------------------------------ */
.about { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1.25rem, 4vw, 3rem); align-items: start; }
.about__text h2 { font-family: var(--ey-font-display); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.8rem); margin: .5rem 0 .6rem; }
.about__text p { margin: 0 0 .85rem; line-height: 1.65; }
.about__sign { font-weight: 800; }
.about__photo { margin: 0; overflow: hidden; }
.about__photo img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }

/* ---- E2 (03-11, ronde 2): max 1 rode knop per scherm. De gekozen opties in
   de calculator zijn geen knoppen-met-actie: lichte stroomkleur + inkt, de
   subkeuze in inkt. Alleen "Reserveren" blijft rood. ----------------------- */
#price-cfg .cfg-choice.is-on { background: #e8f6ff; color: var(--ey-ink); border-color: var(--ey-ink); box-shadow: inset 0 0 0 2px var(--ey-ink); }
#price-cfg .cfg-choice--kampeer.is-on { background: #fdecea; color: var(--ey-ink); }
#price-cfg .cfg-choice.is-on .cfg-choice__sub { color: var(--ey-ink); opacity: .85; }
#price-cfg .cfg-sub.is-on { background: var(--ey-ink); border-color: var(--ey-ink); color: #fff; }

/* ---- Smashed Potatoes op /boeken/ (05-11-2026): prijs direct zichtbaar ---- */
.event-card .event-price { margin: .35rem 0 .5rem; font-size: 1.05rem; }
.event-card .event-price b { font-size: 1.6rem; font-weight: 800; }
.event-card .event-price small { display: block; color: var(--ey-muted); font-size: max(.8rem, 13px); }
.event-card--boeken { margin-top: var(--ey-space, 2rem); }

/* ---- 05-11-2026: gele -/+ knoppen raken de zwarte rand nooit (4px lucht rondom) ---- */
.cfg-step,
.cfg-grid .cfg-field--nights > .cfg-step { height: auto !important; min-height: 0 !important; padding: 4px !important; }

/* ---- 05-11-2026: footer-kaart vult het gele kader helemaal (geen donkere strook) ---- */
.footer-map { display: flex; flex-direction: column; background: #e8efe9; }
.footer-map .ey-map__canvas { flex: 1 1 auto; height: auto; min-height: 200px; }

/* 05-11-2026: geen rode knop op een gekleurd blok (sticker met kleur); rood blijft voor de hoofdactie. */
.sticker[class*="lift-"] .btn-primary { background: #fff; color: var(--ey-ink); }

/* ---- 05-11-2026: taalkeuze opent al bij hover (muis), net als het menu ---- */
@media (hover: hover) and (pointer: fine) {
  .lang-switch:hover .lang-switch__menu,
  .lang-switch:hover .lang-switch__menu[hidden] { display: flex !important; }
  .lang-switch:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.6rem; }
  .lang-switch:hover .lang-switch__caret { transform: rotate(180deg); }
}

/* ---- 05-11-2026: iconen voor de menu-items (links van de tekst) ---- */
.nav-group__menu a { display: flex; align-items: center; gap: 0.55rem; }
.nav-ico { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; color: var(--ey-forest, #2f6b4f); }
.nav-ico svg { width: 100%; height: 100%; display: block; }
.nav-group__menu a:hover .nav-ico, .nav-group__menu a:focus-visible .nav-ico { color: currentColor; }

/* ---- 05-11-2026: nooit twee rode knoppen binnen één scherm onder elkaar.
   eyveld.js zet .btn-calm op een rode knop die te dicht onder een andere staat. ---- */
.btn.btn-primary.btn-calm { background: #fff; color: var(--ey-ink); }
.btn.btn-primary.btn-calm:hover { background: #fff7e6; }

/* ---- 05-11-2026: huidige pagina zichtbaar in het uitklapmenu ---- */
.nav-group__menu a.is-current {
  background: #fff3cc;
  border-radius: 10px; /* 14-11-2026: geen gele streep links meer (Bart) */
  font-weight: 800;
}
.nav-group__menu a.is-current .nav-ico { color: var(--ey-ink); }

/* Homepage verblijfkaarten: omschrijving (zoals op /verblijf/) boven de prijsregel */
a.type .type-desc{display:block;margin-bottom:.35rem}
a.type .type-desc + span{display:block;font-size:.92em;opacity:.92}

/* 06-11-2026: rustige primaire knop bleef wit bij hover (witte tekst op crème): tekst donker houden */
.btn.btn-primary.btn-calm:hover, .btn.btn-primary.btn-calm:focus-visible { color: var(--ey-ink, #173447); }
.btn.btn-calm:hover *, .btn.btn-calm:focus-visible * { color: inherit; }

/* Calculator: melding bij meer dan 2 honden */
.hint.hint-warn { font-weight: 800; color: var(--ey-ink, #173447); }
.cfg-field[hidden], .hint[hidden] { display: none !important; }

/* ---- 13-11-2026 (eigenaar: "rood was beter"): de hoofdknoppen in de pagina zijn
   weer rood (.btn-primary, zie eyveld.css); de sky-variant van 08-11 is terug-
   gedraaid. Max. een rode knop tegelijk in beeld regelt eyveld.js:
   - in de pagina: per schermhoogte blijft de belangrijkste knop rood, de andere
     wordt rustig (.btn-calm);
   - header "Boeken": rood, rustig (.is-calm) zodra een andere rode knop in beeld is;
   - zwevende knop: koraal, wit (.float-book--white) naast een rode knop in beeld.
   13-11-2026: alles altijd rood; JS-verdeling staat uit, footer ook rood. ---- */
/* 13-11-2026 (Bart): footer "Boeken" is rood, net als de rest (wit-regel verwijderd). */
/* Op een gekleurde sticker blijft de knop wit (zie 05-11). */
html body .sticker[class*="lift-"] a.btn.btn-primary { background: #fff; color: var(--ey-ink); }
html body .sticker[class*="lift-"] a.btn.btn-primary:hover { background: #fff7e6; color: var(--ey-ink); }
/* Rustige rode knop in de pagina: wit met inkt (ook bij hover leesbaar). */
html body .btn.btn-primary.btn-calm,
html body a.btn.btn-primary.btn-calm:visited { background: #fff; color: var(--ey-ink); }
html body .btn.btn-primary.btn-calm:hover,
html body .btn.btn-primary.btn-calm:focus-visible { background: #fff7e6; color: var(--ey-ink); }
/* Header "Boeken" rustig zolang er een andere rode knop in beeld is. */
.nav a.btn-nav { transition: background-color 0.18s ease, color 0.18s ease; }
html body .nav a.btn-nav.is-calm,
html body .nav a.btn-nav.is-calm:visited,
html body .nav a.btn-nav.is-calm.is-active { background: #fff; color: var(--ey-ink); }
html body .nav a.btn-nav.is-calm:hover,
html body .nav a.btn-nav.is-calm:focus-visible,
html body .nav a.btn-nav.is-calm.is-active:hover { background: #fff7e6; color: var(--ey-ink); }
@media (prefers-reduced-motion: reduce) { .nav a.btn-nav { transition: none; } }

/* ---- 08-11-2026 (W30): huidige pagina bij de losse menulinks. Contact kleurt
   koraal via .nav a.is-active; Boeken (rood) krijgt een onderstreping. ---- */
.nav a.btn-nav[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; }

/* ---- 08-11-2026 (W4/W28): footerkaart zonder wit randje. De achtergrond achter de
   kaart is geel (= de rand), zodat subpixel-naden in de hoek wegvallen; tegels
   overlappen een halve pixel zodat er geen witte naden tussen staan. ---- */
.footer-map { background: var(--ey-sun); }
.footer-map .ey-map__canvas { border-radius: calc(var(--ey-radius-sm) - 3px); }
.ey-map .leaflet-tile-container img.leaflet-tile { width: 256.5px !important; height: 256.5px !important; mix-blend-mode: normal; }

/* ---- 08-11-2026 (W7/W10): calculator.
   Breed (>= 1100px): vijf tellers naast elkaar, ook op hoge schermen (1440x900
   had twee kolommen en daardoor ~350px lege ruimte in de prijskaart). De
   prijskaart is zo hoog als zijn inhoud; de knoppen staan direct onder de prijs.
   Tablet staand (600-1099px): drie tellers per rij en compacter, zodat prijs en
   "Reserveren" op 820x1180 zonder scrollen in beeld staan. ---- */
@media (min-width: 1100px) {
  .cfg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cfg-step { min-width: 0; width: 100%; }
}
@media (min-width: 900px) {
  .cfg { align-items: start; }
  .cfg-total .hero-actions { margin-top: 0.6rem; }
}
@media (min-width: 600px) and (max-width: 1099px) and (orientation: portrait) {
  .cfg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem 0.9rem; }
  .cfg-grid .cfg-field .hint { margin-top: 0.15rem; }
  .cfg-panel { gap: 0.6rem; }
  .cfg-choice { min-height: 3.6rem; }
  .cfg-total { gap: 0.2rem; padding-block: 0.85rem; }
  .cfg-total .amount { margin: 0; }
  .cfg-breakdown li { padding-block: 0.15rem; }
  .cfg-total .hero-actions { margin-top: 0.45rem; }
  #calculator .section-head { margin-bottom: 0.4rem; }
  #calculator.section { justify-content: flex-start; }
}

/* ---- 08-11-2026 (E4): leesbaarheid. Lopende tekst minimaal 16px, hulpregels in de
   calculator minimaal 14px (ook mobiel, waar ze 11-13px waren). ---- */
.use-card p, .sticker p, .text-panel p, .book-lane__body p, .funnel-card p { font-size: max(1rem, 16px); }
html body #price-cfg .hint,
html body #price-cfg .cfg-check__hint,
html body #price-cfg .cfg-choice__sub,
html body .cfg-tax,
html body .cfg-note,
html body .cfg-walkin,
html body .cfg-breakdown li,
html body .cfg-breakdown li strong,
html body .rates-note { font-size: max(0.875rem, 14px); }
.cfg-walkin a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.hero p { font-size: clamp(1rem, 0.9rem + 0.3vw, 1.12rem); }
/* 08-11-2026: links in lopende tekst (bv. de mail voor Hemelvaart/Pinksteren) herkenbaar. */
main p a:not([class]), main li a:not([class]) { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1.5px; }

/* ---- 13-11-2026 (Bart): "Boeken" in het footermenu is rood, net als in de header. ---- */
html body .footer-nav a[href$="/boeken/"],
html body .footer-nav a[href$="/boeken/"]:visited {
  background: #C24A3C;
  border-color: #C24A3C;
  color: #fff;
}
html body .footer-nav a[href$="/boeken/"]:hover,
html body .footer-nav a[href$="/boeken/"]:focus-visible {
  background: #E96656;
  border-color: #E96656;
  color: #fff;
}

/* ---- 14-11-2026 (eigenaar): hamburgermenu als accordeon. Groepen standaard dicht,
   tik op de groepskop klapt hem open (een tegelijk). Alleen mobiel/tablet staand
   (<= 900px) en alleen als eyveld.js .nav--acc zet: zonder JS blijft alles open.
   Desktop (hover-dropdowns) verandert niet. Contact staat los onder de groepen. ---- */
@media (max-width: 900px) {
  .nav--acc .nav-group__btn {
    pointer-events: auto; cursor: pointer;
    width: 100%; min-height: 48px; justify-content: space-between;
    padding: 0.55rem 0.5rem 0.55rem 0.2rem; border-radius: 12px;
  }
  .nav--acc .nav-group__btn::after {
    display: block; flex: 0 0 auto; margin: -0.25em 0.35rem 0 0;
    transform: rotate(45deg); transition: transform 0.18s ease, margin-top 0.18s ease;
  }
  .nav--acc .nav-group.is-open .nav-group__btn::after,
  .nav--acc .nav-group.is-open:hover .nav-group__btn::after { transform: rotate(-135deg); margin-top: 0.25em; }
  .nav--acc .nav-group:not(.is-open):hover .nav-group__btn::after { transform: rotate(45deg); margin-top: -0.25em; }
  .nav--acc .nav-group__btn:focus-visible { outline: 3px solid var(--ey-sky, #3AB0E2); outline-offset: 2px; }
  /* Dicht: hoogte 0 en onzichtbaar (ook niet tabbaar); open: hoogte uit --ey-acc-h. */
  .nav--acc .nav-group__menu,
  .nav--acc .nav-group:focus-within > .nav-group__menu,
  html body .nav--acc .nav-group:hover > .nav-group__menu {
    display: flex; overflow: hidden; max-height: 0; visibility: hidden; padding: 0;
    transition: max-height 0.18s ease, padding 0.18s ease, visibility 0s linear 0.18s;
  }
  html body .nav--acc .nav-group.is-open > .nav-group__menu {
    max-height: var(--ey-acc-h, 40rem); visibility: visible; padding: 0 0 0.5rem;
    transition: max-height 0.18s ease, padding 0.18s ease, visibility 0s;
  }
  /* Contact: losse link, direct zichtbaar in het open menu (niet in een groep). */
  .nav--acc .nav-menu-contact { display: none; }
  .nav--acc .nav-contact { display: none; }
  .header-inner.is-menu-open .nav--acc .nav-contact {
    display: flex; align-items: center; order: 11; flex: 1 1 100%;
    min-height: 48px; padding: 0.55rem 0.2rem; border-radius: 0;
    border-top: 2px solid rgba(23, 52, 71, 0.1);
    font-family: var(--ey-font-display); font-weight: 400; font-size: 1.25rem;
    animation: ey-menu-in 0.14s ease-out;
  }
  .header-inner.is-menu-open .nav--acc .nav-contact.is-active { color: var(--ey-coral); }
  /* Het kortere menu: de pagina erachter niet laten doorschemeren. */
  body.nav-is-open .site-header { background: #fff; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .nav--acc .nav-group__btn::after,
  .nav--acc .nav-group__menu,
  html body .nav--acc .nav-group.is-open > .nav-group__menu { transition: none !important; }
  .header-inner.is-menu-open .nav-group,
  .header-inner.is-menu-open .nav--acc .nav-contact { animation: none; }
}

/* ---- 14-11-2026 (Bart): kaarten die naar een pagina leiden zijn klikbaar
   (hele kaart is de link, zelfde lift als de andere kaarten). ---- */
a.sticker.sticker--link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
a.sticker.sticker--link:focus-visible { transform: translateY(-3px); }
a.sticker.sticker--link:focus-visible { outline: 3px solid var(--ey-sky, #3AB0E2); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { a.sticker.sticker--link:focus-visible { transform: none; } }