/* Soñora - sonoracuracao.nl */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-display-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clash-display-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --canvas: #FAF5EC;
  --canvas-deep: #F2EADC;
  --ink: #211A12;
  --ink-soft: #5C5044;
  --accent: #E85D0F;
  --accent-deep: #C74B06;
  --accent-tekst: #B44205;     /* accent als kleine tekst: AA op beide canvassen */
  --turquoise: #0F6E70;        /* linktint op licht, AA voor kleine tekst */
  --turquoise-licht: #62BDBE;  /* linktint op ink */
  --line: rgba(33, 26, 18, 0.12);   /* decoratieve scheiding */
  --line-ui: rgba(33, 26, 18, 0.5); /* bedienbare rand: haalt 3:1 op beide canvassen */

  --font-display: "Clash Display", "Avenir Next Condensed", sans-serif;
  --font-body: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --w-content: 68rem;
  --w-lees: 34rem;             /* leesmaat: ~71 tekens bij 17px */
  --gap: clamp(1rem, 3vw, 2rem);
  --radius: 14px;

  /* Verticale schaal: één curve voor secties, banden en blokken */
  --ruimte-sectie: clamp(3.5rem, 8vw, 6rem);
  --ruimte-blok: clamp(2rem, 4vw, 3rem);
  --gutter: clamp(1rem, 4vw, 2rem);
  --kop-h: 4.75rem;            /* hoogte van de vaste/sticky kop */

  /* Stapelvolgorde, semantisch */
  --z-sticky: 20;
  --z-kop: 30;
  --z-balk: 40;
  --z-dialoog: 50;

  /* Motion: exponentiële uitloop, nooit overshoot */
  --uit: cubic-bezier(0.16, 1, 0.3, 1);
  --uit-kort: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---------- Reset en basis ---------- */
*, *::before, *::after { 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.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
main [id] { scroll-margin-top: calc(var(--kop-h) + 0.75rem); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
h3 { font-size: 1.15rem; }
p { margin: 0; }
p, li { text-wrap: pretty; }
a { color: var(--turquoise); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* De oranje ñ: het merkaccent in elk woordmerk (hero, nav, footer) */
.enye { color: var(--accent); }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--canvas);
  padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn-primary {
  background: var(--accent);
  color: var(--ink);
  border-color: var(--accent);
}
.btn-primary:hover { background: #F06E22; border-color: #F06E22; }
.btn-primary:active { transform: scale(0.98); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover { background: rgba(33, 26, 18, 0.06); }
.btn-wide {
  display: block;
  width: 100%;
  text-align: center;
}
.btn-whatsapp {
  background: var(--ink);
  color: var(--canvas);
  border-color: var(--ink);
  margin-top: 0.8rem;
}
.btn-whatsapp:hover { background: #3A3128; border-color: #3A3128; }
.btn:disabled { opacity: 0.55; cursor: default; }

/* ---------- Koppen ----------
   Eén component in twee staten. De rij (.nav-inner, .lp-kop, .sub-kop) deelt
   raster, hoogte, logoformaat en linkbehandeling; alleen het gedrag verschilt:
   de homepage zweeft over de herofoto, de andere pagina's plakken bovenaan.
   De padding houdt de balk full-bleed terwijl logo en CTA op de contentkolom
   landen, op dezelfde lijn als .section-inner, de kruimels en de footer. */
.nav-inner, .lp-kop, .sub-kop {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--kop-h);
  padding: 0 max(var(--gutter), calc((100% - var(--w-content)) / 2 + var(--gutter)));
}
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-kop);
  background: transparent;
  transition: background-color 0.25s var(--uit-kort), box-shadow 0.25s var(--uit-kort);
}
.lp-kop, .sub-kop {
  position: sticky;
  top: 0;
  z-index: var(--z-kop);
  justify-content: space-between;
  background: var(--canvas);
  box-shadow: 0 1px 0 var(--line);
}
.nav-logo {
  display: none;
  align-items: center;
}
.nav-embleem, .lp-kop img, .sub-kop img {
  height: 44px;
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(33, 26, 18, 0.18));
}
.nav-links {
  display: flex;
  gap: 1.4rem;
  margin-left: auto;
}
/* Eén behandeling voor elke navigatielink, in elke kop. Het tikdoel is 44px
   hoog zonder de balk te verhogen: de link is een flexdoos op kophoogte. */
.nav-links a, .mobile-menu a:not(.btn), .sub-terug {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--ink);
}
.nav-links a { color: var(--canvas); }
.nav-links a:hover { color: var(--accent); }
.sub-terug:hover { color: var(--accent-deep); }
.nav-cta { padding: 0.55rem 1.2rem; font-size: 0.95rem; }
.lp-kop-rechts { display: flex; align-items: center; gap: 1.2rem; }
.lp-kop-rechts .btn, .sub-kop .btn { padding: 0.55rem 1.2rem; font-size: 0.95rem; }
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(250, 245, 236, 0.55);
  border-radius: 8px;
  padding: 0.85rem 0.75rem;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--canvas);
  margin: 5px 0;
}
.nav--solid {
  background: var(--canvas);
  box-shadow: 0 1px 0 var(--line);
}
.nav--solid .nav-logo { display: flex; }
.nav--solid .nav-links a { color: var(--ink); }
.nav--solid .nav-links a:hover { color: var(--accent-deep); }
.nav--solid .nav-toggle { border-color: var(--line); }
.nav--solid .nav-toggle span { background: var(--ink); }

.mobile-menu { display: none; }

@media (max-width: 767px) {
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; }
  .nav-toggle { display: block; }
  .mobile-menu[data-open] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.8rem 1.2rem 1.2rem;
    /* .nav draagt zelf geen padding meer (die zit op .nav-inner), dus het
       menu krijgt hier zijn eigen inspringing op dezelfde gutter. */
    margin: 0.6rem var(--gutter) 0;
    box-shadow: 0 12px 30px rgba(33, 26, 18, 0.15);
  }
  .mobile-menu .btn { margin-top: 0.7rem; }
}
@media (max-width: 420px) {
  .nav-inner { gap: 0.8rem; }
  .nav-cta { font-size: 0.85rem; padding: 0.72rem 0.8rem; }
}

/* ---------- Hero ---------- */
/* Full-bleed foto op de volledige viewport; alle tekst op de foto (ARANYA-patroon). */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 30rem;
  overflow: hidden;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
/* Ink-scrims: boven voor de nav, onder achter woord, subregel en CTA's.
   De bovenste houdt zijn dekking vast tot voorbij de navrij (die op 16-60px
   staat) en zakt pas daarna weg; anders vallen de links op de lichte delen
   van de foto (het witte dak, de lucht) terug tot onleesbaar. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  height: 9rem;
  background: linear-gradient(to bottom,
    rgba(33, 26, 18, 0.66) 0%,
    rgba(33, 26, 18, 0.62) 45%,
    rgba(33, 26, 18, 0) 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 64%;
  background: linear-gradient(to top, rgba(33, 26, 18, 0.6) 0%, rgba(33, 26, 18, 0.6) 30%, rgba(33, 26, 18, 0.44) 64%, rgba(33, 26, 18, 0) 100%);
}
.hero-text {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  text-align: center;
  padding: 0 1rem clamp(1.6rem, 4vh, 3rem);
  color: var(--canvas);
}
/* Het woordmerk is het echte logo, niet gezette tekst. De h1 blijft een h1;
   de naam staat in het alt-attribuut, dus voor zoekmachines en schermlezers
   verandert er niets. */
.hero-word {
  margin: 0;
  line-height: 0;
}
/* De H1 draagt het logo én een beschrijvende regel. Het logo is het merk,
   de regel vertelt zoekmachines en bezoekers waar de pagina over gaat; een
   kop die alleen "Soñora" zegt, beschrijft niets. */
.hero-claim {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: normal;
  max-width: 30rem;
  margin-inline: auto;
}
.hero-word img {
  width: clamp(12rem, 30vw, 20rem);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 4px 18px rgba(33, 26, 18, 0.28));
}
.hero-sub {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 500;
  margin-top: 0.7rem;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.3rem;
}
.hero .btn-ghost {
  color: var(--canvas);
  border-color: var(--canvas);
}
.hero .btn-ghost:hover { background: rgba(250, 245, 236, 0.14); }
.hero-tagline {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250, 245, 236, 0.85);
}

/* ---------- Sectiebasis ---------- */
.section { padding: var(--ruimte-sectie) 0; }
.section-inner {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}
.section-deep { background: var(--canvas-deep); }
.section-ink { background: var(--ink); color: var(--canvas); }

/* ---------- 2. USP-strip ---------- */
.usps { padding: clamp(1.8rem, 4vw, 2.8rem) 0; }
.usps-list {
  list-style: none;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
  max-width: var(--w-content);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 1.6rem;
}
@media (min-width: 900px) { .usps-list { grid-template-columns: repeat(3, 1fr); } }
.usps-list li { padding-left: 1.1rem; position: relative; }
.usps-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.usps-list strong { display: block; font-weight: 500; line-height: 1.35; }
.usps-list span { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- 3. De bungalow ---------- */
.specs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: 1.4rem 0 0;
}
.specs li {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  background: var(--canvas);
}
.room-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  margin-top: 2rem;
}
@media (min-width: 560px) { .room-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .room-grid { grid-template-columns: repeat(3, 1fr); } }
.room-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}
.room-card h3 { margin-top: 0.9rem; }
.room-size {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-left: 0.4rem;
}
.room-card p { margin-top: 0.35rem; font-size: 0.95rem; color: var(--ink-soft); }
.rooms-extra {
  margin-top: 2.2rem;
  max-width: 44rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}

/* ---------- 4. Zwembad ---------- */
.pool {
  position: relative;
  height: min(82vh, 44rem);
  min-height: 28rem;
  overflow: hidden;
}
.pool-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pool::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 78%;
  background: linear-gradient(to top, rgba(33, 26, 18, 0.72) 0%, rgba(33, 26, 18, 0.5) 40%, rgba(33, 26, 18, 0) 100%);
}
.pool-text {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  color: var(--canvas);
  padding: 0 clamp(1rem, 4vw, 2.5rem) clamp(2rem, 5vh, 3.5rem);
  max-width: 38rem;
  margin: 0 auto;
  text-align: center;
}
.pool-text p { margin-top: 0.9rem; color: rgba(250, 245, 236, 0.92); }

/* ---------- 5. Galerij ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin-top: 2rem;
}
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-item { display: block; border-radius: 10px; overflow: hidden; }
.gallery-item[hidden] { display: none; }
.gallery-item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
}
.gallery-more { text-align: center; margin-top: 1.8rem; }

/* ---------- 6. Charlie en Ilonka ---------- */
.owners-inner {
  display: grid;
  gap: var(--gap);
  align-items: center;
}
@media (min-width: 768px) {
  .owners-inner { grid-template-columns: 320px 1fr; gap: clamp(2rem, 5vw, 3.5rem); }
}
.owners-photo {
  border-radius: var(--radius);
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.owners-text p { margin-top: 1rem; max-width: 36rem; }
.owners-embleem { margin-top: 1.6rem; }

/* ---------- 7. Randy ---------- */
.service-inner {
  display: grid;
  gap: var(--gap);
  align-items: start;
}
@media (min-width: 768px) {
  .service-inner { grid-template-columns: 320px 1fr; gap: clamp(2rem, 5vw, 3.5rem); }
}
.service-photo {
  border-radius: var(--radius);
  width: 100%;
  max-width: 320px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.service-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 0.8rem;
}
@media (min-width: 700px) { .service-list { grid-template-columns: repeat(2, 1fr); } }
.service-list li {
  background: var(--canvas-deep);
  border-radius: 10px;
  padding: 0.9rem 1.1rem 0.9rem 2.6rem;
  position: relative;
}
.service-list li::before {
  content: "\2713";
  position: absolute;
  left: 1.1rem;
  color: var(--accent-deep);
  font-weight: 700;
}

/* ---------- 8. Omgeving ---------- */
.area-lead {
  width: 100%;
  border-radius: var(--radius);
  margin-top: 1.8rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.area-grid {
  display: grid;
  gap: var(--gap);
  margin-top: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .area-grid { grid-template-columns: repeat(3, 1fr); } }
.area-card {
  background: var(--canvas);
  border-radius: var(--radius);
  overflow: hidden;
}
.area-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}
.area-body { padding: 1.1rem 1.4rem 1.3rem; }
/* Een kaart zonder foto rekt niet mee tot de hoogte van de fotokaarten */
.area-card:not(:has(.area-photo)) { align-self: start; }
.area-card p { margin-top: 0.4rem; font-size: 0.95rem; color: var(--ink-soft); }

.area-time {
  display: inline-block;
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--turquoise);
  border: 1px solid rgba(15, 110, 112, 0.75);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}

/* ---------- 9. Review ---------- */
.review { padding: var(--ruimte-sectie) 0; }
.review-inner { max-width: 50rem; text-align: center; }
.review-score {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(6rem, 15vw, 10rem);
  line-height: 1;
  color: var(--accent);
}
.review-quote { margin: 1.5rem 0 0; }
.review-quote p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.5;
}
.review-quote footer { margin-top: 1.4rem; color: rgba(250, 245, 236, 0.8); }
.review-quote cite { font-style: normal; font-weight: 500; color: var(--canvas); }
.review-quote a { color: var(--turquoise-licht); display: inline-block; margin-left: 0.4rem; }
.review-response { margin-top: 1.8rem; font-size: 0.9rem; color: rgba(250, 245, 236, 0.6); }
.review-meer {
  display: grid;
  gap: 1rem;
  margin-top: 2.5rem;
  text-align: left;
}
@media (min-width: 760px) { .review-meer { grid-template-columns: repeat(3, 1fr); } }
.review-kaart {
  border: 1px solid rgba(250, 245, 236, 0.16);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.review-kaart p { font-size: 0.95rem; color: rgba(250, 245, 236, 0.92); }
/* Sterren bewust in canvas-wit: de 10 blijft het enige oranje moment hier */
.review-sterren {
  letter-spacing: 0.15em;
  font-size: 1rem;
}
.ster-leeg { color: rgba(250, 245, 236, 0.38); }
.review-kaart footer {
  margin-top: auto;
  font-size: 0.85rem;
  color: rgba(250, 245, 236, 0.6);
}
.review-kaart footer a { color: var(--turquoise-licht); }

/* ---------- 10. Prijzen en boeken ----------
   Het boekingsspoor: links de kalender en de volledige kostenopbouw, rechts
   een meelopend paneel dat het totaalbedrag permanent in beeld houdt. Dat is
   het omgekeerde van een platform, waar schoonmaak en belasting pas bij het
   afrekenen verschijnen. Hier staan ze er de hele tijd bij. */
/* De kostenalinea: het uitgerekende totaalbedrag in lopende tekst, vlak onder
   de sectiekop. Bewust proza en geen tabel, want dit is de passage die
   geciteerd moet kunnen worden. */
.kosten-uitleg {
  max-width: var(--w-lees);
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  background: var(--canvas-deep);
  border-radius: var(--radius);
  line-height: 1.65;
}
.kosten-uitleg strong { font-family: var(--font-mono); font-size: 1.05rem; }

.boek-spoor {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: 2rem;
  align-items: start;
}
/* Grid-items krimpen standaard niet onder hun min-content; zonder dit rekt de
   kalender de pagina op bij 320px. */
.boek-hoofd, .boek-rail { min-width: 0; }
@media (min-width: 1000px) {
  .boek-spoor { grid-template-columns: minmax(0, 1fr) 23rem; }
  .boek-rail { position: sticky; top: calc(var(--kop-h) + 1rem); }
}
.booking-grid { margin-top: 2.5rem; }

/* Prijsanker: het bedrag staat er altijd, en zodra er data gekozen zijn
   verandert "vanaf € 75" in het volledige totaal. Geen verrassing achteraf. */
.prijs-anker {
  background: var(--ink);
  color: var(--canvas);
  border-radius: 16px;
  padding: 1.3rem 1.4rem;
  margin-bottom: 1rem;
}
.prijs-anker-kop {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(250, 245, 236, 0.6);
}
.prijs-anker-bedrag { margin-top: 0.2rem; line-height: 1.1; }
.prijs-anker-bedrag strong {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--accent);
}
.prijs-anker-bedrag span { color: rgba(250, 245, 236, 0.8); }
.prijs-anker-leeg {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(250, 245, 236, 0.8);
}
.prijs-anker .cal-overzicht { margin-top: 1rem; border-top: 1px solid rgba(250, 245, 236, 0.22); padding-top: 1rem; }
.prijs-anker .cal-overzicht dl { margin: 0; }
.prijs-anker .cal-overzicht div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; }
.prijs-anker .cal-overzicht dt { color: rgba(250, 245, 236, 0.8); font-size: 0.95rem; }
.prijs-anker .cal-overzicht dd { margin: 0; font-family: var(--font-mono); font-size: 0.95rem; }
.prijs-anker .cal-totaal {
  border-top: 1px solid rgba(250, 245, 236, 0.22);
  margin-top: 0.35rem;
  padding-top: 0.7rem !important;
}
.prijs-anker .cal-totaal dt { color: var(--canvas); font-weight: 500; }
.prijs-anker .cal-totaal dd { font-size: 1.25rem; font-weight: 500; color: var(--accent); }
.prijs-anker .cal-borg, .prijs-anker .cal-lastminute {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(250, 245, 236, 0.8);
}
.prijs-anker .cal-lastminute { color: var(--accent); font-weight: 500; }
.price-table {
  width: 100%;
  border-collapse: collapse;
}
.price-table th, .price-table td {
  text-align: left;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.price-table th { font-weight: 400; color: var(--ink-soft); }
.price-table td {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.05rem;
}
.prijs-langer { margin-top: 1rem; font-size: 0.95rem; color: var(--ink-soft); }
/* Last-minute is een prijsfeit, geen waarschuwing: zelfde tintvlak als de
   andere geldblokken, met het bedrag in accentkleur. */
.lastminute {
  margin-top: 1.2rem;
  background: var(--canvas-deep);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  font-weight: 500;
}
.lastminute strong { color: var(--accent-tekst); font-family: var(--font-mono); }
.costs { margin: 1.8rem 0 0; }
.costs div { margin-top: 1.1rem; }
.costs dt { font-weight: 500; }
.costs dd { margin: 0.15rem 0 0; font-size: 0.95rem; color: var(--ink-soft); }
.booking-photo {
  margin-top: 2rem;
  border-radius: var(--radius);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  max-width: 420px;
}
.booking-form {
  background: var(--canvas-deep);
  border-radius: 16px;
  padding: clamp(1.3rem, 3vw, 2rem);
}
.booking-form h3 { font-size: 1.35rem; }
.booking-form form { margin-top: 1.2rem; }
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.3rem;
}
.optioneel { font-weight: 400; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--line-ui);
  border-radius: 8px;
  background: var(--canvas);
  font: inherit;
  color: var(--ink);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C5044' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.6rem;
}
.field-akkoord {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.field-akkoord input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
  accent-color: var(--accent);
}
.field-row {
  display: grid;
  gap: 1rem;
}
@media (min-width: 480px) { .field-row { grid-template-columns: 1fr 1fr; } }
.form-error {
  color: #B42318;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}
.booking-platforms {
  margin-top: 1.4rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- Beschikbaarheidskalender ---------- */
.cal {
  background: var(--canvas-deep);
  border-radius: 16px;
  padding: clamp(1.3rem, 3vw, 2rem);
  margin-top: 2rem;
}
.cal-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cal-kop h3 { font-size: 1.35rem; }
.cal-knoppen { display: flex; gap: 0.5rem; }
.cal-knop {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-ui);
  background: var(--canvas);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.cal-knop:disabled { opacity: 0.35; cursor: default; }
.cal-uitleg { margin-top: 0.6rem; font-size: 0.95rem; color: var(--ink-soft); max-width: 40rem; }
.cal-maanden {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: 1.4rem;
}
@media (min-width: 720px) { .cal-maanden { grid-template-columns: 1fr 1fr; } }
.cal-maand h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0 0 0.6rem;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  text-align: center;
  padding-bottom: 0.3rem;
}
.cal-dag {
  aspect-ratio: auto;
  min-height: 44px;
  border: none;
  border-radius: 8px;
  background: var(--canvas);
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.cal-dag.leeg { background: transparent; cursor: default; }
.cal-dag:disabled { cursor: default; }
.cal-dag.verleden { background: transparent; color: rgba(33, 26, 18, 0.3); }
.cal-dag.bezet { background: #D2BE94; color: rgba(33, 26, 18, 0.70); text-decoration: line-through; }
.cal-dag:not(:disabled):not(.leeg):hover { background: rgba(232, 93, 15, 0.16); }
.cal-dag.selectie:hover, .cal-dag.tussen:hover { background: var(--accent-deep); }
.cal-knop:not(:disabled):hover { background: var(--canvas-deep); border-color: var(--ink); }
.cal-dag.wissel-start { background: linear-gradient(105deg, var(--canvas) 50%, #E5D8BE 50%); }
.cal-dag.wissel-eind { background: linear-gradient(105deg, #E5D8BE 50%, var(--canvas) 50%); }
.cal-dag.selectie { background: var(--accent); color: var(--ink); font-weight: 500; }
.cal-dag.tussen { background: rgba(232, 93, 15, 0.22); }
.cal-legenda {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding: 0;
  margin: 1.2rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.cal-legenda li { display: flex; align-items: center; gap: 0.45rem; }
.leg {
  border: 1px solid var(--line-ui);
  width: 16px;
  height: 16px;
  border-radius: 5px;
  display: inline-block;
}
.leg-vrij { background: var(--canvas); }
.leg-bezet { background: #D2BE94; }
.leg-wissel { background: linear-gradient(105deg, var(--canvas) 50%, #D2BE94 50%); }
.leg-selectie { background: var(--accent); }
.cal-melding {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #B42318;
}
.cal-overzicht {
  margin-top: 1.4rem;
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
  max-width: 30rem;
}
.cal-overzicht dl { margin: 0; }
.cal-overzicht dl div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
}
.cal-overzicht dd {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
}
.cal-totaal {
  border-top: 1px solid var(--line);
  margin-top: 0.4rem;
  padding-top: 0.6rem !important;
  font-weight: 500;
}
.cal-borg, .cal-lastminute {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.cal-lastminute { color: var(--accent-tekst); font-weight: 500; }
.cal-voetnoot { margin-top: 0.7rem; font-size: 0.85rem; color: var(--ink-soft); }
.seizoen {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 0.8rem;
}
.seizoen summary {
  list-style: none;
  cursor: pointer;
  font-weight: 500;
  padding: 0.3rem 1.6rem 0.3rem 0;
  position: relative;
}
.seizoen summary::-webkit-details-marker { display: none; }
.seizoen summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-deep);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 1.3rem;
}
.seizoen[open] summary::after { content: "\2212"; }
.seizoen summary:hover, .seizoen summary:hover::after { color: var(--accent-deep); }
.seizoen p { margin-top: 0.7rem; font-size: 0.95rem; color: var(--ink-soft); }

.cal-fout { margin-top: 1rem; color: var(--ink-soft); }

/* Honeypot: visueel en voor toetsenbord onbereikbaar, wel aanwezig voor bots */
.veld-verborgen {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-privacy {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.form-succes {
  background: var(--canvas);
  border: 1px solid var(--line-ui);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
}

/* ---------- 11. FAQ ---------- */
.faq-inner { max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq h2 { margin-bottom: 1rem; }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 2rem 1.05rem 0;
  font-weight: 500;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-deep);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 1.4rem;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover, .faq summary:hover::after { color: var(--accent-deep); }
.faq details p { padding: 0 0 1.1rem; color: var(--ink-soft); max-width: 40rem; }

/* ---------- 12. Footer ---------- */
.footer {
  background: var(--ink);
  color: var(--canvas);
  padding: clamp(3rem, 6vw, 4.5rem) 0 1.5rem;
}
.footer-inner {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 800px) { .footer-inner { grid-template-columns: 1.2fr 1fr 1fr 1fr; } }
.footer-tagline { margin-top: 1rem; color: rgba(250, 245, 236, 0.8); }
.footer-col h3 {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(250, 245, 236, 0.6);
  margin-bottom: 0.8rem;
}
.footer-col p { margin-top: 0.5rem; }
.footer a { color: var(--turquoise-licht); }
.footer a:hover { color: #F06E22; }
.footer-note {
  text-align: center;
  margin-top: 3rem;
  font-size: 0.9rem;
  color: rgba(250, 245, 236, 0.55);
}
@media (max-width: 767px) { body:has(.sticky-cta) .footer { padding-bottom: 6rem; } }

/* ---------- Sticky CTA (alleen mobiel) ---------- */
.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--canvas);
  box-shadow: 0 -1px 0 var(--line), 0 -8px 24px rgba(33, 26, 18, 0.12);
  transition: transform 0.25s ease;
}
.sticky-cta .btn { padding: 0.6rem 1.1rem; font-size: 0.9rem; }
.sticky-price { font-size: 0.9rem; color: var(--ink-soft); white-space: nowrap; }
.sticky-price strong {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--ink);
}
.sticky-cta[data-verborgen] { transform: translateY(120%); }
@media (min-width: 768px) { .sticky-cta { display: none; } }
/* Onder 360px passen de prijsvermelding en de knop niet naast elkaar; de knop
   wint, want die is de handeling. Zelfde reden voor de kalenderkop. */
@media (max-width: 360px) {
  .sticky-price { display: none; }
  .sticky-cta .btn { width: 100%; text-align: center; }
  .cal-kop { flex-wrap: wrap; }
}

/* ---------- Subpagina's (huisregels, voorwaarden, privacy) ---------- */
.sub-inhoud h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: 1.2rem; }
.sub-inhoud h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 2rem 0 0.5rem; }
.sub-inhoud p { margin-top: 0.7rem; }
.sub-inhoud ul { margin: 0.7rem 0 0; padding-left: 1.2rem; }
.sub-inhoud li { margin-top: 0.35rem; }
.sub-bijgewerkt { color: var(--ink-soft); font-size: 0.9rem; margin-top: 2.5rem; }

.footer-juridisch {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.9rem;
}
.footer-juridisch a { margin: 0 0.6rem; }

/* ---------- Landingspagina's ---------- */
.kruimels {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.kruimels ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}
/* Tikdoel van 44px zonder de strook hoger te maken */
.kruimels a { display: inline-block; padding: 0.7rem 0; margin: -0.7rem 0; }
.kruimels li::after { content: "›"; margin-left: 0.4rem; color: var(--ink-soft); opacity: 0.55; }
.kruimels li:last-child::after { content: ""; }

/* Kopbeeld van een landingspagina: foto met ink-scrim en titel erop */
.lp-hero {
  position: relative;
  margin-top: 0.8rem;
  height: min(40vh, 26rem);
  min-height: 13rem;
  overflow: hidden;
}
@media (min-width: 700px) { .lp-hero { height: min(52vh, 26rem); } }
.lp-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(33, 26, 18, 0.86) 0%, rgba(33, 26, 18, 0.78) 28%, rgba(33, 26, 18, 0.5) 62%, rgba(33, 26, 18, 0.2) 100%);
}
.lp-hero-tekst {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem) clamp(1.4rem, 4vw, 2.4rem);
  color: var(--canvas);
}
.lp-hero-tekst h1 { color: var(--canvas); font-size: clamp(1.9rem, 5vw, 3rem); }
.lp-hero-tekst { text-align: center; }
.lp-hero-tekst p {
  margin: 0.6rem auto 0;
  max-width: 34rem;
  color: rgba(250, 245, 236, 0.92);
}

/* Leesritme: op de landingspagina's staan tekst en beeld (.lp-fotos,
   .lp-figuur) in één gecentreerde kolom van 46rem. De juridische pagina's
   (.sub-inhoud) houden de leesmaat op de linker contentlijn. */
.lp-inhoud, .sub-inhoud { max-width: var(--w-content); }
.lp-inhoud > :is(p, h2, h3, ul, ol, dl, .faq) { max-width: 46rem; margin-inline: auto; }
.lp-inhoud .lp-lead { max-width: 46rem; }
.sub-inhoud > :is(p, h1, h2, ul, ol) { max-width: var(--w-lees); }
.lp-fotos, .lp-figuur { max-width: 46rem; margin-inline: auto; }

.lp-inhoud h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 2.5rem; }
.lp-inhoud h2:first-child { margin-top: 0; }
.lp-inhoud h3 { margin-top: 1.6rem; }
.lp-inhoud p { margin-top: 0.8rem; }
.lp-inhoud ul { margin-top: 0.8rem; padding-left: 1.2rem; }
.lp-inhoud li { margin-top: 0.4rem; }

/* Eén leadrol op alle paginatypes in plaats van drie halve varianten */
.lp-lead, .section-intro, .sub-inhoud > p:first-of-type {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--w-lees);
  margin-top: 0.9rem;
}

/* Feitenlijst: machineleesbaar en snel scanbaar */
.feiten {
  margin-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.feiten div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.feiten dt { color: var(--ink-soft); }
.feiten dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: right;
}

.lp-fotos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin-top: 1.6rem;
}
/* Twee kolommen: het product wordt op de landingspagina's even groot getoond
   als op de homepage. Een derde losse foto zou een wees zijn, dus die pakt de
   volle breedte, in een breder formaat, anders wordt hij onevenredig hoog. */
.lp-fotos > :nth-child(3):last-child { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.lp-fotos img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
}
.lp-figuur { margin-top: 1.6rem; }
.lp-figuur img { width: 100%; border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; }
.lp-figuur figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--ink-soft); }

.lp-cta {
  background: var(--ink);
  color: var(--canvas);
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1rem;
}
.lp-cta h2 { color: var(--canvas); }
.lp-cta p { margin: 0.8rem auto 1.6rem; max-width: 32rem; color: rgba(250, 245, 236, 0.85); }
.lp-cta a.btn-ghost { color: var(--canvas); border-color: var(--canvas); }
.lp-cta a.btn-ghost:hover { background: rgba(250, 245, 236, 0.14); }
.lp-cta-knoppen { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

.lp-verder {
  max-width: calc(46rem + 2 * clamp(1rem, 4vw, 2rem)); /* op de as van de leeskolom en het beeld */
  margin: 0 auto;
  padding: 2.5rem clamp(1rem, 4vw, 2rem) 0;
}
.lp-verder h2 { font-size: 1.15rem; font-family: var(--font-body); font-weight: 500; }
.lp-verder-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
@media (min-width: 640px) { .lp-verder-grid { grid-template-columns: repeat(2, 1fr); } }
.lp-verder-grid a {
  display: block;
  background: var(--canvas-deep);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  text-decoration: none;
  color: var(--ink);
}
.lp-verder-grid a:hover { background: #EBE0CD; }
.lp-verder-grid strong { display: block; font-family: var(--font-display); font-weight: 600; color: var(--turquoise); }
.lp-verder-grid a:hover strong { text-decoration: underline; }
.lp-verder-grid span { font-size: 0.9rem; color: var(--ink-soft); }

/* Doorlink vanuit een homepagesectie */
.sectie-link {
  display: inline-block;
  margin-top: 1.2rem;
  font-weight: 500;
}
.pool-text .sectie-link { color: var(--canvas); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sectie-link:hover { color: var(--accent-deep); }
.pool-text .sectie-link:hover { color: var(--canvas); text-decoration-thickness: 3px; }
.mobile-menu a:not(.btn):hover { color: var(--accent-deep); }
.lightbox-close:hover, .lightbox-nav:hover { background: var(--accent); }

/* ---------- Motion-pass ----------
   Actief via html.motion-aan, gezet door JS en alleen zonder
   prefers-reduced-motion (dan draait er niets). Uitsluitend transform,
   opacity en de kleur van de ñ; nooit layout-eigenschappen, CLS blijft 0. */

/* 1. Hero-entrance: het enige geregisseerde moment */
@keyframes hero-settle {
  from { transform: scale(1.04); }
  to { transform: scale(1); }
}
@keyframes instap {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.motion-aan .hero-img { animation: hero-settle 6s ease-out both; }
.motion-aan .hero-word { animation: instap 0.6s ease-out both; }
.motion-aan .hero-claim { animation: instap 0.6s ease-out 0.1s both; }
.motion-aan .hero-cta { animation: instap 0.6s ease-out 0.2s both; }
.motion-aan .hero-tagline { animation: instap 0.6s ease-out 0.3s both; }

/* 2. Scroll-reveals: per sectie één groep, eenmalig.
   De zichtbare staat is de standaard; alleen wat de observer daadwerkelijk
   heeft aangemerkt (.klaar) mag verborgen beginnen. Zo blijft de pagina
   volledig leesbaar als JS uitvalt, traag laadt of de observer nooit vuurt. */
.motion-aan .reveal.klaar {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s var(--uit), transform 0.45s var(--uit);
}
.motion-aan .reveal.klaar.zichtbaar {
  opacity: 1;
  transform: none;
}

/* 3. Zwembad: trage ken burns, het tweede moment */
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
.motion-aan .pool-img { animation: kenburns 20s ease-in-out infinite alternate; }

/* 4. Micro-interacties */
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-2px); }
  .btn:disabled:hover { transform: none; }
  .btn-primary:active { transform: translateY(-1px) scale(0.98); }
  .gallery-item img { transition: transform 0.2s var(--uit-kort); }
  .gallery-item:hover img { transform: scale(1.03); }
}
@keyframes lb-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.motion-aan .lightbox[open] { animation: lb-fade 0.15s ease; }
.motion-aan .lightbox[open]::backdrop { animation: lb-fade 0.15s ease; }

/* 5. De 10 schaalt eenmalig aan, met een exponentiële uitloop in plaats van
   een terugveer: het cijfer komt tot stilstand, het stuitert niet. */
.motion-aan .review-score.reveal.klaar {
  transform: scale(0.92);
  transition: opacity 0.3s var(--uit), transform 0.7s var(--uit);
}
.motion-aan .review-score.reveal.klaar.zichtbaar { transform: scale(1); }

/* ---------- Lightbox ---------- */
.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 94vw;
  max-height: 94vh;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(33, 26, 18, 0.93); }
.lightbox img {
  max-width: 94vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 8px;
}
.lightbox-close, .lightbox-nav {
  position: fixed;
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--canvas);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- Printen ----------
   Zonder scroll heeft de observer niets aangemerkt, dus alles wat een
   reveal-beginstaat draagt zou blanco op papier komen. */
@media print {
  .motion-aan .reveal.klaar,
  .motion-aan .review-score.reveal.klaar { opacity: 1 !important; transform: none !important; }
  .nav, .sticky-cta, .lightbox { display: none !important; }
  .lp-kop, .sub-kop { position: static; }
}